Export component related types.

component/api.ts

@@ -0,0 +1,124 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+/**
+ * EXPERIMENTAL
+ *
+ * What a host needs in order to talk about Element Call, without Element Call:
+ * the component's props and the types they are made of, the handle and the
+ * host bridge, the intents a call can be started with and the configuration
+ * each implies.
+ *
+ * This is an entry point of its own, `@element-hq/element-call-component/api`,
+ * so that a host can import it on a path that must stay light — a call model
+ * that needs `BackgroundStyle.Solid` as a value, say — and load the component
+ * itself, and everything it brings, only when a call is shown. The main entry
+ * point re-exports all of it, so a host that does not care may import
+ * everything from there.
+ *
+ * Nothing in here may reach anything that is not a type or a constant: the
+ * point of this module is what it does not import.
+ */
+
+import type { Ref } from "react";
+import type { MatrixClient } from "matrix-js-sdk";
+
+import type { UrlProperties } from "../src/UrlParams";
+import type { ElementCallHandle, ElementCallHostBridge } from "./host";
+import {
+  BackgroundStyle,
+  configurationForIntent,
+  HeaderStyle,
+  type UrlConfiguration,
+  UserIntent,
+} from "../src/UrlConfiguration";
+
+// How the host and Element Call talk to each other, and what they say
+export type { ElementCallHandle, ElementCallHostBridge } from "./host";
+export type { DeviceMuteRequest, DeviceMuteState } from "../src/HostBridge";
+export type { JoinCallData } from "../src/widget";
+// The deployment-wide configuration, as distinct from ElementCallConfiguration
+// below, which is per call
+export type { ConfigOptions } from "../src/config/ConfigOptions";
+// The values that appear in ElementCallConfiguration and in the intent, and
+// what each intent means by default
+export {
+  BackgroundStyle,
+  configurationForIntent,
+  HeaderStyle,
+  type UrlConfiguration,
+  UserIntent,
+};
+
+/**
+ * How Element Call should behave. Everything is optional; anything left out
+ * takes the default that {@link ElementCallProps.intent} implies.
+ *
+ * This is the behaviour a widget can be configured with through its URL, plus
+ * the one fact about the call a host has a say in here, the background. The
+ * rest of what a widget's URL carries — who the user is, how to reach the
+ * homeserver, where to report analytics, the shared secret of a room that is
+ * encrypted with one — a component host supplies by other routes, or not at
+ * all; and what can change while the call is running, the theme and the
+ * language, is a prop of its own.
+ */
+export type ElementCallConfiguration = Partial<UrlConfiguration> &
+  Partial<Pick<UrlProperties, "background">>;
+
+export interface ElementCallProps {
+  /**
+   * The client to place the call with. Element Call does not authenticate
+   * anyone or manage a session of its own; this one is the host's.
+   */
+  client: MatrixClient;
+  /** The room to call in. The host's client must already know about it. */
+  roomId: string;
+  /**
+   * What the user asked for — whether they started the call or joined one that
+   * was already running, and whether it is a call in a group or a DM. Element
+   * Call decides what each of those means: whether to show the lobby first,
+   * whether to ring, and so on.
+   *
+   * Defaults to joining an existing group call, which is the most conservative
+   * reading, but a host that knows which button the user pressed should say so.
+   */
+  intent?: UserIntent;
+  /**
+   * How Element Call should behave, overriding whatever {@link intent} implies.
+   * A host that finds itself setting a lot of these probably wants a different
+   * intent instead.
+   *
+   * Compared by value, so it is fine to write this inline; only a change to
+   * what it says restarts anything.
+   */
+  config?: ElementCallConfiguration;
+  /**
+   * What Element Call tells the host while the call is running: that the user
+   * has joined or hung up, that it would like to be kept on screen, and so on.
+   * Without one, Element Call assumes nobody is listening.
+   */
+  hostBridge?: ElementCallHostBridge;
+  /**
+   * What the host tells Element Call: to hang up, to mute, to join. Available
+   * once the component has rendered.
+   */
+  ref?: Ref<ElementCallHandle>;
+  /**
+   * The theme to show Element Call in, `light` or `dark`. Left out, Element
+   * Call picks. Changes take effect at once, and cost nothing else.
+   */
+  theme?: string;
+  /**
+   * The language to show Element Call in, as a BCP 47 tag: one of the
+   * `supportedLanguages` the main entry point exports, or something that falls
+   * back to one (`de-AT` to `de`). Left out, the browser's language is used.
+   *
+   * Translations are one thing shared by every Element Call on the page, so
+   * the most recently set language wins for all of them.
+   */
+  language?: string;
+}

component/index.tsx

@@ -36,14 +36,12 @@ import {
   type FC,
   type JSX,
   type ReactNode,
-  type Ref,
   useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from "react";
-import { type MatrixClient } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { I18nextProvider } from "react-i18next";
 import { TooltipProvider } from "@vector-im/compound-web";
@@ -62,10 +60,8 @@ import { RootElementProvider, useRootElement } from "../src/RootElementContext";
 import {
   configurationForIntent,
   componentProperties,
-  type UrlConfiguration,
   type UrlParams,
   UrlParamsProvider,
-  type UrlProperties,
   UserIntent,
   useUrlParams,
 } from "../src/UrlParams";
@@ -79,102 +75,16 @@ import { i18n } from "../src/utils/i18n";
 import { useTheme } from "../src/useTheme";
 import { useStableValue } from "../src/useStableValue";
 import styles from "./ElementCall.module.css";
-import {
-  type ElementCallHandle,
-  type ElementCallHostBridge,
-  useComponentHostBridge,
-} from "./host";
+import { useComponentHostBridge } from "./host";
+import { type ElementCallProps } from "./api";
 import { supportedLanguages, translationsBackend } from "./localization";
 
 // The languages Element Call can be shown in
 export { supportedLanguages } from "./localization";
-
-// How the host and Element Call talk to each other, and what they say
-export { type ElementCallHandle, type ElementCallHostBridge } from "./host";
-export {
-  type DeviceMuteRequest,
-  type DeviceMuteState,
-} from "../src/HostBridge";
-export { type JoinCallData } from "../src/widget";
-// The deployment-wide configuration, as distinct from ElementCallConfiguration
-// above, which is per call
-export { type ConfigOptions } from "../src/config/ConfigOptions";
-// The values that appear in ElementCallConfiguration and in the intent
-export {
-  BackgroundStyle,
-  HeaderStyle,
-  UserIntent,
-  type UrlConfiguration,
-} from "../src/UrlParams";
-
-/**
- * How Element Call should behave. Everything is optional; anything left out
- * takes the default that {@link ElementCallProps.intent} implies.
- *
- * This is the behaviour a widget can be configured with through its URL, plus
- * the one fact about the call a host has a say in here, the background. The
- * rest of what a widget's URL carries — who the user is, how to reach the
- * homeserver, where to report analytics, the shared secret of a room that is
- * encrypted with one — a component host supplies by other routes, or not at
- * all; and what can change while the call is running, the theme and the
- * language, is a prop of its own.
- */
-export type ElementCallConfiguration = Partial<UrlConfiguration> &
-  Partial<Pick<UrlProperties, "background">>;
-
-export interface ElementCallProps {
-  /**
-   * The client to place the call with. Element Call does not authenticate
-   * anyone or manage a session of its own; this one is the host's.
-   */
-  client: MatrixClient;
-  /** The room to call in. The host's client must already know about it. */
-  roomId: string;
-  /**
-   * What the user asked for — whether they started the call or joined one that
-   * was already running, and whether it is a call in a group or a DM. Element
-   * Call decides what each of those means: whether to show the lobby first,
-   * whether to ring, and so on.
-   *
-   * Defaults to joining an existing group call, which is the most conservative
-   * reading, but a host that knows which button the user pressed should say so.
-   */
-  intent?: UserIntent;
-  /**
-   * How Element Call should behave, overriding whatever {@link intent} implies.
-   * A host that finds itself setting a lot of these probably wants a different
-   * intent instead.
-   *
-   * Compared by value, so it is fine to write this inline; only a change to
-   * what it says restarts anything.
-   */
-  config?: ElementCallConfiguration;
-  /**
-   * What Element Call tells the host while the call is running: that the user
-   * has joined or hung up, that it would like to be kept on screen, and so on.
-   * Without one, Element Call assumes nobody is listening.
-   */
-  hostBridge?: ElementCallHostBridge;
-  /**
-   * What the host tells Element Call: to hang up, to mute, to join. Available
-   * once the component has rendered.
-   */
-  ref?: Ref<ElementCallHandle>;
-  /**
-   * The theme to show Element Call in, `light` or `dark`. Left out, Element
-   * Call picks. Changes take effect at once, and cost nothing else.
-   */
-  theme?: string;
-  /**
-   * The language to show Element Call in, as a BCP 47 tag: one of
-   * {@link supportedLanguages}, or something that falls back to one (`de-AT`
-   * to `de`). Left out, the browser's language is used.
-   *
-   * Translations are one thing shared by every Element Call on the page, so
-   * the most recently set language wins for all of them.
-   */
-  language?: string;
-}
+// Everything a host needs to talk about Element Call — the props, the handle,
+// the host bridge, the intents and what each means — also available without
+// the component itself from `@element-hq/element-call-component/api`
+export * from "./api";
 
 /**
  * Prepares the things Element Call needs before it can be shown: translations,

component/package.json

@@ -25,6 +25,10 @@
       "types": "./dist/types/component/index.d.ts",
       "default": "./dist/element-call.js"
     },
+    "./api": {
+      "types": "./dist/types/component/api.d.ts",
+      "default": "./dist/api.js"
+    },
     "./style.css": "./dist/element-call.css"
   },
   "sideEffects": [

component/tsconfig.build.json

@@ -13,8 +13,8 @@
     "rootDir": "..",
     "outDir": "./dist/types"
   },
-  // The entry point, plus the ambient declarations (CSS modules, `?react` SVGs,
-  // `import.meta.env`, …) that the sources it reaches rely on.
-  "include": ["./index.tsx", "../src/@types/*.d.ts"],
+  // The entry points, plus the ambient declarations (CSS modules, `?react` SVGs,
+  // `import.meta.env`, …) that the sources they reach rely on.
+  "include": ["./index.tsx", "./api.ts", "../src/@types/*.d.ts"],
   "exclude": []
 }