mount() function

Home > @rimitive/view > mount

mount() function

Mount modules and render a component with automatic effect scoping.

Takes modules (same as compose()), and wraps the effect function so that effects created within the component tree are automatically disposed when the returned unmount function is called.

Signature:

export declare function mount<TModules extends Module[]>(...modules: TModules): MountFn<ServiceFromModules<TModules>>;

Parameters

Parameter	Type	Description
modules	TModules	Modules to compose

Returns:

MountFn<ServiceFromModules<TModules>>

A mount function that takes (container, component) and returns unmount()

Example 1

Basic usage

const unmount = mount(
  SignalModule, EffectModule, createElModule(adapter)
)(container, ({ signal, effect, el }) => () => {
  const count = signal(0);
  effect(() => console.log(count())); // Auto-disposed on unmount
  return el('div')(count);
});

unmount(); // Disposes effect, removes from DOM

Example 2

With resource (also auto-scoped)

const unmount = mount(
  SignalModule, EffectModule, ResourceModule, createElModule(adapter)
)(container, ({ resource, el }) => () => {
  const data = resource((signal) =>
    fetch('/api/data', { signal }).then(r => r.json())
  );

  return el('div')(
    data.loading() ? 'Loading...' : data.latest()?.name
  );
});

unmount(); // Aborts in-flight request, disposes resource