Muban

Getting started

Installing

Add muban to your project:

Simple component

Create your component:

import { defineComponent, bind, ref } from '@muban/muban'; const MyComponent = defineComponent({ name: 'my-component', setup({ props, refs }) { const content = ref('Hello World'); return [ bind(refs.self, { text: content}), ]; } });
1
2
3
4
5
6
7
8
9
10
11

Make sure to have the following HTML on the page:

<html> ... <body> <div data-component="my-component">Hello</div> </body> </html>



 


1
2
3
4
5
6

Then init your component:

import { createApp } from '@muban/muban'; createApp(MyComponent).mount(document.body)
1
2
3

Your page should now display Hello World if your component is correctly running.

Dev template

Create our template:

import { html } from '@muban/template'; type MyComponentProps = { welcomeText: string; }; function myComponentTemplate({ welcomeText }: MyComponentProps) { return html`<div data-component="my-component">${welcomeText}</div>`; }
1
2
3
4
5
6
7
8
9

Make sure to have the following HTML on the page:

<html> ... <body> <div id="app"> <div data-component="my-component">Hello</div> </div> </body> </html>



 
 
 


1
2
3
4
5
6
7
8

Render your template:

import { createApp } from '@muban/muban'; const appRoot = document.getElementById('app'); const app = createApp(MyComponent); app.mount(appRoot, myComponentTemplate, { welcomeText: 'Hello' });
1
2
3
4
5

Using Storybook

Add @muban/storybook to your project:

Add these two scripts in your package.json

{ "scripts": { "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook -o ./dist/storybook" } }


 
 


1
2
3
4
5
6

Create your .storybook/main.js with this content:

module.exports = { stories: [ '../src/**/*.stories.mdx', '../src/**/*.stories.@(js|ts)' ], addons: [ '@storybook/addon-essentials', ] }
1
2
3
4
5
6
7
8
9

Create your story file:

import type { Story } from '@muban/storybook'; export default { title: 'MyComponent', argTypes: { welcomeText: { control: 'text' }, }, }; export const Default: Story<MyComponentProps> = () => ({ template: myComponentTemplate, component: MyComponent, }); Default.args = { welcomeText: 'Hello', };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Run storybook: