1.0.0-alpha.35 • Published 1 year ago

@muban/muban v1.0.0-alpha.35

Weekly downloads
15
License
MIT
Repository
github
Last release
1 year ago

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!

1.0.0-alpha.35

2 years ago

1.0.0-alpha.34

3 years ago

1.0.0-alpha.33

3 years ago

1.0.0-alpha.30

3 years ago

1.0.0-alpha.32

3 years ago

1.0.0-alpha.31

3 years ago

1.0.0-alpha.29

3 years ago

1.0.0-alpha.28

3 years ago

1.0.0-alpha.27

4 years ago

1.0.0-alpha.26

4 years ago

1.0.0-alpha.25

4 years ago

1.0.0-alpha.23

4 years ago

1.0.0-alpha.22

4 years ago

1.0.0-alpha.24

4 years ago

1.0.0-alpha.21

4 years ago

1.0.0-alpha.20

4 years ago

1.0.0-alpha.19

4 years ago

1.0.0-alpha.18

4 years ago

1.0.0-alpha.16

4 years ago

1.0.0-alpha.15

4 years ago

1.0.0-alpha.17

4 years ago

1.0.0-alpha.14

4 years ago

1.0.0-alpha.13

4 years ago

1.0.0-alpha.12

4 years ago

1.0.0-alpha.11

4 years ago

1.0.0-alpha.10

4 years ago

1.0.0-alpha.9

4 years ago

1.0.0-alpha.8

4 years ago

1.0.0-alpha.7

4 years ago

1.0.0-alpha.6

4 years ago

1.0.0-alpha.5

4 years ago

1.0.0-alpha.4

4 years ago

1.0.0-alpha.3

4 years ago

1.0.0-alpha.2

4 years ago

1.0.0-alpha.1

4 years ago