2.2.7 • Published 3 years ago
omusubi-js v2.2.7
Omusubi.js
View component library using WebComponents.
Usage
import {Component, html, defineComponent} from 'omusubi-js';
class FizzBuzzDispatcher extends Dispatcher {
init() {
return {
arr: [0]
}
}
update(state) {
return {
arr: state.arr.concat([state.arr.length]);
}
}
}
class FizzBuzz extends Component {
static dispatcher = FizzBuzzDispatcher;
render(state, dispatch) {
return html`
<h1>Hello, FizzBuzz!</h1>
<button @click=${e => dispatch('update')}>Count!</button>
<ul>
${state.arr.map(i => html`
<li>${
i % 15 == 0
? 'fizzbuzz'
: i % 3 == 0
? 'fizz'
: i % 5 == 0
? 'buzz'
: i
}</li>
`)}
</ul>
`
}
}
defineComponent('fizz-buzz')(FizzBuzz);
<fizz-buzz></fizz-buzz>
Install
You can install this by using npm:
$ npm install --save-dev omusubi-js
Or, you can use it by CDN:
import {Component, html, defineComponent} from '//unpkg.com/omusubi-js/omusubi.min.js';
...
Features
Cooperate with Vanilla
You do not need any compile process to define component. The components you defined are able to be used in native HTML.
No Virtual DOM
Insted of Virtual DOM diffing, Omusubi.js uses Value diffing; check diff if there is possibility of changing.
The Elm Architecture
Omusubi.js is desined while respecting The Elm Architecture. You can make components which have less side-effects.
2.2.7
3 years ago
2.2.6
3 years ago
2.2.5
3 years ago
2.2.3
3 years ago
2.2.4
3 years ago
2.2.2
3 years ago
2.2.1
3 years ago
2.2.0
3 years ago
2.1.4
3 years ago
2.1.3
3 years ago
2.1.2
3 years ago
2.1.0
3 years ago
2.0.0
3 years ago
1.1.1
3 years ago
1.1.0
3 years ago
1.1.2
3 years ago
1.0.14
3 years ago
1.0.13
3 years ago
1.0.11
3 years ago
1.0.10
3 years ago
1.0.9
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.0
3 years ago