Skip to content

mubanjs/muban

Folders and files

NameName
Last commit message
Last commit date
Mar 3, 2022
Jan 27, 2022
Nov 2, 2022
Jun 12, 2023
Jun 12, 2023
Jun 12, 2023
Jul 28, 2020
Jan 3, 2022
Jan 27, 2022
Jan 3, 2022
Jan 3, 2022
Jul 28, 2020
Feb 1, 2023
Jan 9, 2022
Dec 14, 2022
Jan 9, 2022
May 15, 2021
Dec 29, 2020
Jun 12, 2023
Jun 12, 2023
Jun 12, 2023
Mar 16, 2021
Apr 14, 2022
Apr 14, 2022
Jun 12, 2023

Repository files navigation

Muban

Please check the full documentation

Getting started

Installing

Add muban to your project:

npm i @muban/muban
yarn add @muban/muban

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}),
    ];
  }
});

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.

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>`;
}

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' });

Using Storybook

Add @muban/storybook to your project:

npm i -D @muban/storybook
yarn add @muban/storybook

Add 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';

export default {
  title: 'MyComponent',
  argTypes: {
    welcomeText: { control: 'text' },
  },
};

export const Default: Story<MyComponentProps> = {
  render() {
    return {
      template: myComponentTemplate,
      component: MyComponent,
    }
  },
  args: {
    welcomeText: 'Hello',
  }
}

Run storybook:

npm run storybook
yarn storybook

Contributing

Please read the CONTRIBUTING.md for more information. Your help is much appreciated!