<my-title>   <h1>{titleContent}</h1>   <script>     this.titleContent = "Hello World!";   </script> </my-title>
Pour l'utiliser dans votre page html, c'est tout simple :
Vous déclarez le composant dans la page :
<script src="my-title.html" type="riot/tag"></script>
Vous utilisez votre nouveau tag (<my-title>) comme ceci :
<body>   <my-title></my-title> </body>

let tool = {   hello: () => {     return "hello";   } } riot.mount('my-title', {tool: tool, text: "message"});
Et l'utiliser comme ceci :
<my-title>   <h1>{titleContent}</h1>   <script>     this.titleContent = opts.tool.hello() + ":" + opts.text;     // on obtiendra <h1>hello:message</h1>   </script> </my-title>

<button-send-message>   <button onclick={send}>Send message to Electron</button>    <script>     send (event) {       opts.ipcRenderer.send('message-hello',{message:"yo"});     }   </script> </button-send-message>

<display-message>   <hr>   <h2>{messageContent}</h2>   <hr>   <script>     opts.ipcRenderer.on('message-random', (event, arg) => {       this.messageContent = arg;       this.update(); // mettre à jour le composant     });   </script> </display-message>

app.on('ready', () => {   mainWindow = new BrowserWindow();   mainWindow.webContents.loadURL(`file://${__dirname}/index.html`);    mainWindow.webContents.on('did-finish-load', () => {      setInterval(() => {       // notifier toutes les 2 secondes       mainWindow.webContents.send("message-random", Math.random());     }, 2000)    }) });

const fetch = require('node-fetch');  class GitHubClient {   constructor({baseUri, token}) { //eg token = process.env.TOKEN_GITHUB_DOT_COM     this.baseUri = baseUri     this.credentials = token !== null && token.length > 0 ? "token" + ' ' + token : null     this.headers = {       "Content-Type": "application/json",       "Accept": "application/vnd.github.v3.full+json",       "Authorization": this.credentials     }   }    getData({path}) {     let _response = {}     return fetch(this.baseUri + path, {       method: 'GET',       headers: this.headers     })     .then(response => {       // save reference of response / then we can access to headers       _response = response       // if response is ok transform response.text to json object       return response.ok ? response.json() : null;     })     .then(jsonData => {       // add json data to _response       _response.data = jsonData;       return _response;     })   }    postData({path, data}) {     let _response = {}     return fetch(this.baseUri + path, {       method: 'POST',       headers: this.headers,       body: JSON.stringify(data)     })     .then(response => {       _response = response       return response.ok ? response.json() : null;     })     .then(jsonData => {       _response.data = jsonData;       return _response;     })   } }  module.exports = GitHubClient

const GitHubClient = require('./js/GitHubClient')  let githubCli = new GitHubClient({   baseUri:"https://api.github.com",   token:process.env.TOKEN_GITHUB_DOT_COM });  // get user information githubCli.getData({path:"/users/k33g"}) .then(response => {   console.log(response.data); }) .catch(error => {   console.log("error", error) })

const GitHubClient = require('./js/GitHubClient')  // création du client GitHub let githubCli = new GitHubClient({   baseUri:"https://api.github.com",   token:process.env.TOKEN_GITHUB_DOT_COM });  // polling de l'API toutes les 10 secondes (10000ms) setInterval(() => {   githubCli.getData({path:"/repos/k33g/sandbox-api/events"}).then(response => {      githubCli.headers["If-None-Match"] = response.headers.get('etag')     console.log(response.status, response.ok)     /*       si changement, affichera: 200 true       sinon, affichera: 304 false     */       if(response.status == 200) { // Il y a eu un changement        // Récupérer le dernier event       let lastEvent = response.data[0];        // Tester le type d'event       if(lastEvent.type == "CreateEvent") {         console.log("CreateEvent", response.data)       }        if(lastEvent.type == "PullRequestEvent") {         console.log("PullRequestEvent", response.data)       }        if(lastEvent.type == "PushEvent") {         console.log("PushEvent", response.data)       }      }    })   .catch(error => {     console.log(">>> error:", error)   }) }, 10000)  /* Normalement le délai est de 60 secondes Il est possible de le récupérer de cette manière:      githubCli.getData({path:"/repos/k33g/sandbox-api/events"}).then(response => {       let delay = response.headers.get('X-Poll-Interval')       console.log("delay:", delay * 1000)     }) */

setInterval(() => {   githubCli.getData({path:"/repos/k33g/sandbox-api/events"}).then(response => {      githubCli.headers["If-None-Match"] = response.headers.get('etag')      if(response.status == 200) {       let lastEvent = response.data[0];        if(lastEvent.type == "PushEvent") {         let ref = lastEvent.payload.ref.split("refs/heads/")[1];          console.log(">>> ref:", ref);         console.log(">>> commits:", lastEvent.payload.commits);       }     }   })   .catch(error => {     console.log(">>> error:", error)   }) }, 10000)

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width,initial-scale=1">   <title>Application</title>   <script src="bower_components/riot/riot+compiler.min.js"></script>   <!-- include the tags -->   <script src="tags/grid-events.html" type="riot/tag"></script>    <!-- Semantic-UI -->   <link rel="stylesheet" type="text/css" href="bower_components/semantic/dist/semantic.min.css">   <script src="bower_components/jquery/dist/jquery.js"></script>   <script src="bower_components/semantic/dist/semantic.min.js"></script>  </head> <body class="ui container">   <h1>Application</h1>    <grid-events></grid-events>    <script>    require('./renderer');   </script>  </body> </html>

const {app, ipcMain, BrowserWindow} = require('electron'); const GitHubClient = require('./js/GitHubClient')  /*   Création du client GitHub: */  let githubCli = new GitHubClient({   baseUri:"https://api.github.com",   token:process.env.TOKEN_GITHUB_DOT_COM });  /*   Création d'une méthode pour interroger les events du repository:   la variable `sender` correspond à l'objet `mainWindow.webContents` de l'application Electron, qui permettra d'envoyer des messages à l'objet `ipcRenderer` de `renderer.js` */  let getEvents = ({owner, repo, sender}) => {   githubCli.getData({path:`/repos/${owner}/${repo}/events`}).then(response => {     githubCli.headers["If-None-Match"] = response.headers.get('etag')      if(response.status == 200) {       let lastEvent = response.data[0];        if(lastEvent.type == "PushEvent") {         let ref = lastEvent.payload.ref.split("refs/heads/")[1];             /*           A chaque "PushEvent" j'envoie des informations sur le topic "PushEvent"         */          sender.send("PushEvent", {ref: ref, commits: lastEvent.payload.commits})       }     }   })   .catch(error => {     console.log(">>> error:", error)   }) }  app.on('ready', () => {   mainWindow = new BrowserWindow();   mainWindow.webContents.loadURL(`file://${__dirname}/index.html`);    mainWindow.webContents.on('did-finish-load', () => {      /*       Une fois mon applicaion "chargée", je commence le polling de l'API     */      setInterval(() => {       getEvents({owner: "k33g", repo: "sandbox-api", sender: mainWindow.webContents})     }, 10000) // réduire le délais pour les tests   }) });  ipcMain.on('close-main-window', (event, arg) => {   app.quit(); });

<grid-events>   <h2>Repositrory Events on branch {ref}</h2>    <table class="ui celled table">     <thead>       <tr>         <th>sha</th>         <th>author</th>         <th>message</th>       </tr>     </thead>     <tbody>       <tr each={commits}>         <td><a href={url} target="_blank">{sha}</a></td>         <td>{author.email} {author.name}</td>         <td>{message}</td>       </tr>     </tbody>   </table>    <script>     opts.ipcRenderer.on('PushEvent', (event, arg) => {       this.ref = arg.ref       this.commits = arg.commits       this.update();     });   </script> </grid-events>

// ... if(lastEvent.type == "PushEvent") {   let ref = lastEvent.payload.ref.split("refs/heads/")[1];    let filesList = []; // permettra de stocker tous les fichiers des commits   let counter = 0;    /*     - à chacun synchronisation, je récupère le handle de l'utilisateur     - puis pour chaque commit j'interroge l'API GitHub GET /repos/:owner/:repo/commits/:sha pour obtenir les infos du commit courant     - je merge la liste des fichiers du commit avec `filesList`     - j'incrémente mon compteur     - une fois que le compteur est égal à la taille tu tableau de commits,       => j'ai fini mes requêtes       => je notifie mon IHM avec les informations   */   let handleNameOfCommitAuthor = lastEvent.actor.login;    lastEvent.payload.commits.forEach(commit => {      githubCli.getData({path:`/repos/${handleNameOfCommitAuthor}/${repo}/commits/${commit.sha}`})       .then(response => {         let filesOfCommit = response.data.files;          filesList = filesList.concat(filesOfCommit)         counter++         if(counter==lastEvent.payload.commits.length) {           // je notifie mon IHM           sender.send("PushEvent", {ref: ref, commits: lastEvent.payload.commits, filesList: filesList})         }       })   }) } // ...

<grid-events>   <h2>Repositrory Events on branch {ref}</h2>    <h3>Commits:</h3>   <table class="ui celled table">     <thead>       <tr>         <th>sha</th>         <th>author</th>         <th>message</th>       </tr>     </thead>     <tbody>       <tr each={commits}>         <td><a href={url} target="_blank">{sha}</a></td>         <td>{author.email} {author.name}</td>         <td>{message}</td>       </tr>     </tbody>   </table>    <h3>Files:</h3>   <table class="ui celled table">     <thead>       <tr>         <th>sha</th>         <th>filename</th>         <th>status</th>       </tr>     </thead>     <tbody>       <tr each={filesList}>         <td>{sha}</td>         <td>{filename}</td>         <td>status:{status} additions:{additions} deletions:{deletions} changes:{changes}</td>       </tr>     </tbody>   </table>    <script>     opts.ipcRenderer.on('PushEvent', (event, arg) => {       this.ref = arg.ref       this.commits = arg.commits       this.filesList = arg.filesList       this.update();     });   </script> </grid-events>

githubCli.postData({   path:`/repos/${owner}/${repo}/statuses/${commit.sha}`,   data: {     state: "success",     description: "you're the best"   } })

if(lastEvent.type == "PushEvent") {   let ref = lastEvent.payload.ref.split("refs/heads/")[1];    let filesList = [];   let counter = 0;    let handleNameOfCommitAuthor = lastEvent.actor.login;    lastEvent.payload.commits.forEach(commit => {     githubCli.getData({path:`/repos/${handleNameOfCommitAuthor}/${repo}/commits/${commit.sha}`})       .then(response => {         let filesOfCommit = response.data.files;          // je parcours la liste des fichiers         filesOfCommit.forEach(file => {           // je teste l'extension du fichier           if(file.filename.split('.').pop()=="md") {             // si c'est du markdown, le check est valide             githubCli.postData({               path:`/repos/${owner}/${repo}/statuses/${commit.sha}`,               data: {                 state: "success",                 description: "you're the best"               }             })           } else {             //si ce n'est pas du markdown, le check est invalide             githubCli.postData({               path:`/repos/${owner}/${repo}/statuses/${commit.sha}`,               data: {                 state: "failure",                 description: "ouch!"               }             })           }         })          filesList = filesList.concat(filesOfCommit)         counter++         if(counter==lastEvent.payload.commits.length) {           console.log(filesList)           sender.send("PushEvent", {ref: ref, commits: lastEvent.payload.commits, filesList: filesList})         }       })   }) }