Please check the full documentation
Add muban to your project:
yarn add @muban/mubanCreate 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}),
];
}
});Make sure to have the following HTML on the page:
<html>
...
<body>
<div data-component="my-component">Hello</div>
</body>
</html>Then init your component:
import { createApp } from '@muban/muban';
createApp(MyComponent).mount(document.body);Your page should now display Hello World if your component is correctly running.
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>`;
}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>Render your template:
import { createApp } from '@muban/muban';
const appRoot = document.getElementById('app');
const app = createApp(MyComponent);
app.mount(appRoot, myComponentTemplate, { welcomeText: 'Hello' });Add @muban/storybook to your project:
yarn add @muban/storybookAdd these two scripts in your package.json
{
"scripts": {
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook -o ./dist/storybook"
}
}Create your .storybook/main.js with this content:
module.exports = {
stories: [
'../src/**/*.stories.mdx',
'../src/**/*.stories.@(js|ts)'
],
addons: [
'@storybook/addon-essentials',
]
}Create your story file:
import type { Story } from '@muban/storybook/dist/client/preview/types-6-0';
export default {
title: 'MyComponent',
argTypes: {
welcomeText: { control: 'text' },
},
};
export const Default: Story<MyComponentProps> = () => ({
template: myComponentTemplate,
component: MyComponent,
});
Default.args = {
welcomeText: 'Hello',
};Run storybook:
yarn storybookyarn storybookOpen http://localhost:8080/.
Example components are located in ./examples/src/components. Each component has its own folder,
with a TS, CSS and Story file in it.
This project uses postcss (with only basic nesting and $vars plugin).