Supply Element Call's parameters through a context

Element Call's parameters come from its URL, which works while it owns
the page but leaves an embedder with nowhere to put them. Add a context
so they can be provided directly, falling back to parsing
window.location when no provider is present.

This also decouples the thirteen consumers from react-router: useUrlParams
called useLocation, so each of them required a router ancestor, which the
embedded build will not have. The standalone and widget builds keep their
URL-derived behaviour via useUrlParamsFromLocation, provided in App.

No functional change.
This commit is contained in:
Valere
2026-09-02 09:58:34 +02:00
parent 0dca5835f6
commit bc6015eff2
2 changed files with 61 additions and 18 deletions
+29 -4
View File
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/
import { useMemo } from "react";
import { createContext, use, useMemo } from "react";
import { useLocation } from "react-router-dom";
import { logger } from "matrix-js-sdk/lib/logger";
import {
@@ -519,11 +519,36 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
};
};
const UrlParamsContext = createContext<UrlParams | null>(null);
/**
* Hook to simplify use of getUrlParams.
* @returns The app parameters for the current URL
* Supplies the parameters Element Call should run with.
*
* The standalone and widget builds derive these from the URL, but an embedder
* has no URL of its own to put them in, so it provides them directly instead.
*
* TODO: `UrlParams` is no longer an accurate name now that these need not come
* from a URL. Renaming it touches every consumer, so it is left until the rest
* of the de-globalisation work has settled.
*/
export const useUrlParams = (): UrlParams => {
export const UrlParamsProvider = UrlParamsContext.Provider;
/**
* The parameters Element Call is running with.
*
* Falls back to parsing `window.location` when no provider is present, so that
* tests and stories keep working without one.
*/
export const useUrlParams = (): UrlParams =>
use(UrlParamsContext) ?? getUrlParams();
/**
* Derives {@link UrlParams} from the current router location.
*
* Only meaningful when Element Call owns the URL; embedders provide the params
* directly through {@link UrlParamsProvider}.
*/
export const useUrlParamsFromLocation = (): UrlParams => {
const { search, hash } = useLocation();
return useMemo(() => getUrlParams(search, hash), [search, hash]);
};