Minimal JavaScript library. Only 18kb. If you're into Web Components, Polymer, Vue, you're 👌.
<script src="dist/mutable.min.js"></script>or
const Mutable = require('dist/mutable.min.js')<div id="app">
{{ greet }}
</div>new Mutable({
el: '#app',
data() {
return {
greet: 'Hola ke pasa',
}
},
methods: {},
hooks: {},
})new Mutable({
el: '#app',
data() {
return {
greet: 'Hola ke pasa',
}
},
methods: {
newGreet(text) {
this.set('greet', text)
}
},
hooks: {
mounted() {
this.methods('newGreet', ['¡Hola a tod@s!'])
}
},
})Other example:
<div id="app">
{{ upperLetters(greet) }}
</div>new Mutable({
el: '#app',
data() {
return {
greet: 'Hola ke pasa',
}
},
methods: {
upperLetters(text) {
return text.toUpperCase()
},
},
})Will render:
HOLA KE PASA<p m-if="condition">If true will show</p><p m-show="condition">If true will toggle</p><div id="app">
<ul>
<li m-for="beer in beers">{{ beer }}</li>
</ul>
</div>new Mutable({
el: '#app',
data() {
return {
beers: ['Pale Ale', 'Barley Wine', 'IPA', 'Golden Ale'],
}
},
})Will render:
<ul>
<li>Pale Ale</li>
<li>Barley Wine</li>
<li>IPA</li>
<li>Golden Ale</li>
</ul><div id="app">
<button m-on:click="randomize">Click me</button>
<p>Random beer: {{ beer }}</p>
</div>new Mutable({
el: '#app',
data() {
return {
beer: '',
beers: ['Pale Ale', 'Barley Wine', 'IPA', 'Golden Ale'],
}
},
methods: {
randomize() {
const getBeer = Math.floor(Math.random() * this.get(beers).length)
this.set('beer', getBeer)
}
}
})m-html // renders HTML ⚠️
m-if // conditional
m-show // conditional
m-for // loop
m-on:event // event listener
// .stop
// .prevent
// .ctrl
// .shift
// .alt
// .enter
m-original // conserve value's property as original JavaScript expression
m-model // binding data to input valuethis.get('property')
this.set('property', data)
this.methods('methodName', [data])new Mutable({
el: '#app',
hooks: {
init() {}, // Mutable initialized
mounted() {}, // First mount
destroyed() {} // 💥
}
})<input m-model="beer" />new Mutable({
el: '#app',
data() {
return {
beer: 'IPA',
}
},
hooks: {
mounted() {
this.set('beer', 'Stout')
}
},
})Will fist render:
<input value="IPA" />Then on mount:
<input value="Stout" />You can create components using JavaScript's import / export:
// Footer.js
export default {
template:
`<footer>
<p><sup>©</sup> 2016. MIT license.</p>
</footer>`
}// main.js
import Footer from './components/Footer'
Mutable.component('copyright', Footer)<!-- index.html -->
...
<body id="app">
<copyright />
...
</body>You can use as many methods as needed:
export default {
props: [],
template: '',
data: {},
methods: {},
hooks: {},
}Passing props is as easy as registering and calling them as follows:
<!-- index.html -->
<body id="app">
<copyright year="2017" />
...
</body>// Footer.js
export default {
props: ['year'],
template:
`<footer>
<p><sup>©</sup> {{ year }}. MIT license.</p>
</footer>`
}See /example/index.html, based in this VueJS project
Node v.10.15.1
npm i
npm run buildBuild files will be created in /dist.
This library is released under the MIT license.