Tweet
Prepare
Create our tag
Mount
Riot and in-browser TRACEUR transpilation, (“React like”)
This is the reading of this article that inspired me: http://blog.srackham.com/posts/riot-es6-webpack-apps/.
Prerequisite
You need:
traceur.min.js(bower install traceur)traceur.min.maprio.min.js(bower install riot)- you need an http server (this is very useful: https://www.npmjs.com/package/http-server)
So, you should have something like that:
my-app/
├── public/
| ├── js/
| | ├── tags
| | | └── yo-bob.js
| | └── bower_components/
| | ├── riot/
| | | └── riot.min.js
| | └── traceur/
| | └── traceur.min.js
| ├── index.html
| └── main.js
- create a
main.jsfile inpublic - create a
yo-bob.jsfile inpublic/js/tags
Prepare index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<!-- my very cute custom tag -->
<yo-bob></yo-bob>
<!-- traceur -->
<script src="js/bower_components/traceur/traceur.min.js">
traceur.options.experimental = true;
</script>
<!-- riot -->
<script src="js/bower_components/riot/riot.min.js"></script>
<script>
System.import('main.js').catch(function (e) { console.error(e); });
</script>
</body>
</html>Create our tag yo-bob
We will not use the riot tags but describe our component in JavaScript (ES2015), using ES6 Template Strings like that:
Edit yo-bob.js:
/* yo-bob tag */
riot.tag('yo-bob',
`
<h1>{label}</h1>
<h2>{subLabel}</h2>
`,
function(opts) {
let firstName = "Bob";
let lastName = "Morane";
this.label = '--- Yo! ---';
this.subLabel = `Yo ${firstName} ${lastName}`;
this.on('mount', () => {
this.root.querySelector("h1").style.color = "red";
this.root.querySelector("h2").style.color = "green";
});
}
);
export default {
mount: (options) => {
riot.mount('yo-bob', options);
}
}Mount yo-tag in the package
Edit main.js:
import yoBob from 'js/tags/yo-bob.js'
yoBob.mount({});“Run” it
cd my-app
http-server
Then, open http://localhost:8080
That’s all.
Tweet