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: