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:

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.js file in public
  • create a yo-bob.js file in public/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.

blog comments powered by Disqus

Related posts