Mounting

Initializes the server-rendered components of a page on the client.

mountAll mounts every instance of a component, mount one instance you pick by its rootId. Both read the props from the hydration data the server wrote.

Usage

Call mountAll in your entry file. Its first argument is namespace:name: the Fluid namespace your component collection is registered under (see Getting Started), followed by the component's name:

import { mountAll } from 'fluid-primitives';
import { Accordion } from 'fluid-primitives/accordion';

mountAll('primitives:accordion', ({ props }) => new Accordion(props).init());

mountAll calls your callback once per accordion on the page. new Accordion(props) stores the props. init() builds the state machine, renders and starts it, and returns the instance, so the callback can return it directly. Read instance.machine, instance.api and instance.hydrator after init(), an earlier read throws.

The namespace is required because two component collections can register a component with the same name, and mountAll and mount throw without it.

Mount one instance yourself

mountAll mounts every instance on its own. To mount one yourself, for example to pass callbacks, set autoMount="{false}" on the root:

<ui:collapsible.root autoMount="{false}" rootId="shipping-details"> ... </ui:collapsible.root>

Then call mount with the rootId. It mounts that instance whatever its autoMount value:

import { mount } from 'fluid-primitives';
import { Collapsible } from 'fluid-primitives/collapsible';

const collapsible = mount('ui:collapsible', 'shipping-details', ({ props }) =>
    new Collapsible({
        ...props,
        onOpenChange: ({ open }) => {
            localStorage.setItem('shipping-details-open', String(open));
        },
    }).init()
);

mount creates a new instance on every call, so call destroy() on the old one before you mount the same rootId again. getComponentInstance and destroyComponentsWithin find an instance from mount like one from mountAll.

mountAll

Mounts every instance of a component that is not mounted yet and was not rendered with autoMount="{false}". It is safe to call more than once, e.g. after lazily inserted DOM adds new instances: mounted ones are skipped.

The props in the callback are typed from componentName via HydrationPropsFor. A component without generated types gets an untyped bag.

mountAll<K extends KnownComponentName | (string & {})>(componentName: K, callback: (data: { autoMount: boolean; props: HydrationPropsFor<Extract<K, string>>; createHydrator: () => ComponentHydrator; }) => Component<unknown, unknown> | void): void

Name	Description	Required	Default
`componentName`	`K` The namespaced name, e.g. `ui:select`.	Yes	-
`callback`	`(data: { autoMount: boolean; props: HydrationPropsFor<Extract<K, string>>; createHydrator: () => ComponentHydrator; }) => Component<unknown, unknown> \| void` Creates the instance of one hydration entry and returns it.	Yes	-

mountAll('ui:accordion', ({ props }) => new Accordion(props).init());

mount

Mounts one instance by its rootId, also one that was rendered with autoMount="{false}". Unlike mountAll(), it creates a new instance on every call, which then replaces the one tracked before. getComponentInstance() and destroyComponentsWithin() find it like any other.

The props in the callback are typed like those of mountAll().

mount<K extends KnownComponentName | (string & {}), T extends Component<unknown, unknown>>(componentName: K, rootId: string, callback: (data: { autoMount: boolean; props: HydrationPropsFor<Extract<K, string>>; createHydrator: () => ComponentHydrator; }) => T | void): T | undefined

Name	Description	Required	Default
`componentName`	`K` The namespaced name, e.g. `ui:dialog`.	Yes	-
`rootId`	`string` The `rootId` the component was rendered with.	Yes	-
`callback`	`(data: { autoMount: boolean; props: HydrationPropsFor<Extract<K, string>>; createHydrator: () => ComponentHydrator; }) => T \| void` Creates the instance and returns it.	Yes	-

Returns T | undefined. The instance, or undefined if there is no hydration entry for rootId.

getComponentInstance

Finds a component instance that is already mounted, by the namespaced name it was mounted with and its hydration id (the id prop it was rendered with). Works for instances from mountAll() and mount() alike. It is for primitives that compose two independent instances of themselves at runtime, e.g. the submenus of a Menu.

getComponentInstance<T extends Component<unknown, unknown> = Component<unknown, unknown>>(componentName: string, id: string): T | undefined

Name	Description	Required	Default
`componentName`	`string` The namespaced name, e.g. `ui:menu`.	Yes	-
`id`	`string` The hydration id of the instance.	Yes	-

Returns T | undefined. The instance, or undefined if none is mounted under that id.

destroyComponentsWithin

Destroys every mounted instance whose root element is root or inside it, and forgets it. Call it before you remove a subtree from the DOM, e.g. a row of a FieldArray.

Only the root part of an instance counts. A component without one, such as Dialog, is never matched.

destroyComponentsWithin(root: Element | Document): void

Name	Description	Required	Default
`root`	`Element \| Document` The element that is about to be removed.	Yes	-