Muban

App

createApp

declare function createApp(
  rootComponent: ComponentFactory,
): App;
1
2
3
import { createApp } from '@muban/muban';

const app = createApp(MyComponent);
1
2
3

mount

declare function mount<P extends Record<string, unknown>>(
  container: HTMLElement,
  template?: (props: P) => string | Array<string>,
  data?: P,
): ComponentApi | undefined;
1
2
3
4
5
const app = createApp(MyComponent);
const appRoot = document.getElementById('app');

// mount the app into the container
const myComponentInstance = app.mount(appRoot);
1
2
3
4
5
const app = createApp(MyComponent);
const appRoot = document.getElementById('app');

// mount the app into the container
// it will also render the `myComponentTemplate` in the dom using the values passed
const myComponentInstance = app.mount(appRoot, myComponentTemplate, { title: 'Hello World!' });
1
2
3
4
5
6

unmount

declare function unmount(): void;
1

The unmount method will unmount and dispose all created components, and when the app is mounted with a development template it will also clean up the DOM.

const app = createApp(MyComponent);
const appRoot = document.getElementById('app');

// mount the app into the container
const myComponentInstance = app.mount(appRoot);

// unmount again
app.unmount();
1
2
3
4
5
6
7
8

components

Registering components globally will make sure that those components will be initialized if they exist in the DOM, and are not explicitly configured in any other "parent" component.

declare function components(
  ...components: Array<ComponentFactory | LazyComponent>
): App;
1
2
3

Global components follow the same "creation order" as normal components, and will inherit the context if they are nested (in the DOM) in any parent component that provides the context.

const app = createApp(MyComponent);

// register a single component
app.component(ToggleExpand);

// register a lazy component
app.component(
  lazy('lazy-test', () => import('./LazyTest'))
);

// or register multiple at the same time
app.component(
  ToggleExpand,
  lazy(
    'product-card',
    () => import('../filter-products/FilterProducts.card'),
  ),
  lazy('lazy-test', () => import('./LazyTest')),
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

provide

declare function provide<T>(key: InjectionKey<T> | string, value: T): App;
1

In most cases your root component will provide objects to the rest of your app, but you can also provide the values directly to your App itself.

const app = createApp(MyComponent);

// provides an instance of an `SomeGlobalState` object under the `some-key`
app.provide('some-key', new SomeGlobalState())


// in any other component, just inject the value to use it
const value = inject('some-key');
1
2
3
4
5
6
7
8