MutableJS
MutableJS
Minimal JavaScript library. Only 18kb. If you’re into Web Components, Polymer, Vue, you’re 👌.
Use
<script src="dist/mutable.min.js"></script>
or
const Mutable = require('dist/mutable.min.js')
Initialization
<div id="app">
</div>
new Mutable({
el: '#app',
data() {
return {
greet: 'Hola ke pasa',
}
},
methods: {},
hooks: {},
})
Methods
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">
</div>
new Mutable({
el: '#app',
data() {
return {
greet: 'Hola ke pasa',
}
},
methods: {
upperLetters(text) {
return text.toUpperCase()
},
},
})
Will render:
HOLA KE PASA
Conditionals
<p m-if="condition">If true will show</p>
<p m-show="condition">If true will toggle</p>
Loops
<div id="app">
<ul>
<li m-for="beer in beers"></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>
Events
<div id="app">
<button m-on:click="randomize">Click me</button>
<p>Random 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)
}
}
})
All directives
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 value
Instances
this.get('property')
this.set('property', data)
this.methods('methodName', [data])
Lifecycle
new Mutable({
el: '#app',
hooks: {
init() {}, // Mutable initialized
mounted() {}, // First mount
destroyed() {} // 💥
}
})
Data model
<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" />
Components
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: {},
}
Props
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> . MIT license.</p>
</footer>`
}
Example
See /example/index.html, based in this VueJS project
Development
Node v.10.15.1
Commands:
npm i
npm run build
Build files will be created in /dist.
License
This library is released under the MIT license.