# mivm

> A tiny mvvm library for fun. Use snabbdom.js for virtual dom.

Latest version **1.0.1** (published 2020-10-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install mivm
pnpm add mivm
yarn add mivm
bun add mivm
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2020-10-16 |
| First published | 2020-10-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 63.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | johnnywang |

## Links

- npm: https://www.npmjs.com/package/mivm
- npm.io page: https://npm.io/package/mivm

## Dependencies (9)

- [mivm](https://npm.io/package/mivm.md) ^1.0.0
- [hash-sum](https://npm.io/package/hash-sum.md) ^2.0.0
- [snabbdom](https://npm.io/package/snabbdom.md) 0.7.3
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.11.6
- [parcel-bundler](https://npm.io/package/parcel-bundler.md) 1.12.4
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.11.5
- [@rollup/plugin-commonjs](https://npm.io/package/@rollup/plugin-commonjs.md) ^15.1.0
- [@rollup/plugin-node-resolve](https://npm.io/package/@rollup/plugin-node-resolve.md) ^9.0.0
- [@babel/plugin-transform-react-jsx](https://npm.io/package/@babel/plugin-transform-react-jsx.md) ^7.10.4

## Recent versions

- 1.0.1 (latest) — 2020-10-16
- 1.0.0 — 2020-10-16

## README

# Mivm

A tiny mvvm library for fun. Use snabbdom.js for virtual dom.

This plugin is just built for learning & memoing purpose.

Do not use in your production.


## Install

``` bash
$ npm install mivm
$ yarn add mivm
```


## Usage

### Create root app

Use `renderApp` with a function or options to create root app, then mount it to DOM.

```js
import { renderApp } from 'mivm';

const app = renderApp(({ html }) =>
  html`<div id="app">Hello App</div>`
).mount('#app');
```


### Create component

Use `setup` to create a component for compiler to deal with.

Components can be used with options `components`, then used in `render` function.

```js
// MyButton
import { setup } from 'mivm';

export default setup(
  ({ html }) => html`<button>My Button</button>`
);
```

```js
// Use in root
import { renderApp } from 'mivm';
import MyButton from './MyButton';

const app = renderApp({
  components: {
    MyButton
  },
  render({ html }) {
    return html`
      <div id="app">
        Hello App
        <MyButton></MyButton>
      </div>
    `;
  }
}).mount('#app');
```

```js
// Use in another component
import { setup } from 'mivm';
import MyButton from './MyButton';

export default setup({
  components: {
    MyButton,
  },
  render({ html }) {
    // ...
  }
})
```


### Create reactive state

Use `data` option with `ref`, `reactive`, `watchEffect` function, then return them.

get returned object by render function's 2nd argument.

```js
import { setup } from 'mivm';

export default setup({
  data({ ref }) {
    const msg = ref('World');
    return { msg };
  },
  render({ html }, state) {
    // get state
    const { msg } = state;
    return html`
      <div class="message">
        Hello ${msg.value}
      </div>
    `;
  }
});
```


### Add event

Add event with `@` startWith, eg. `@click`, `@input`, `@keyup`

```js
export default setup({
  data({ ref }) {
    const inputText = ref('');
    const inputHandler = function(e) {
      inputText.value = e.target.value;
    };
    return { inputText, inputHandler };
  },
  render({ html }, state) {
    const { inputText, inputHandler } = state;
    return html`
      <div>
        This is Test: ${inputText.value}
        <input value="${inputText.value}" @input="${inputHandler}" />
      </div>
    `;
  }
});
```


## Demo

Use parceljs for example

```html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>

  <script src="index.js"></script>
</body>
</body>
</html>
```

```js
// index.js
import { renderApp, setup } from 'mivm';

// component 1
const Test = setup({
  data({ ref }) {
    const inputText = ref('');
    const inputHandler = function(e) {
      inputText.value = e.target.value;
    };
    return { inputText, inputHandler };
  },
  render({ html }, state) {
    const { inputText, inputHandler } = state;
    return html`
      <div class="test">
        This is Test: ${inputText.value}
        <input value="${inputText.value}" @input="${inputHandler}" />
      </div>
    `;
  }
});

// component 2
const Test2 = setup(({ html }) => html`
  <div class="test2">Hello Test2</div>
`);

const app = renderApp({
  components: {
    Test,
    Test2
  },
  data({ ref }) {
    const count = ref(0);
    const increment = () => {
      count.value += 1;
    };
    return { count, increment };
  },
  render({ html }, state) {
    return html`
      <div id="app">
        ${state.count.value}
        <p @click="${state.increment}">Hello World</p>
        <Test></Test>
        <Test2></Test2>
      </div>
    `;
  },
}).mount('#app');

console.log(app);
```

---
_Source: https://npm.io/package/mivm · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._