Fasty CMS support RiotJS v4+ compiled tags

We wrote Fasty based on RiotJS v3. It was using the compiler within your browser. It was working but it was not the best ay to do. Now you can use compiled tags using RiotJS v4.

To create a new component using RiotJS v4 you just have to create a new component and select the right kind

Then on each tag update, your tag will be compiled.

How to use your tag

  1. You need to first import JS libraries. RiotJS v4 and a router (Navigo).

{{ external | https://cdnjs.cloudflare.com/ajax/libs/riot/4.14.0/riot.min.js }}
{{ external | https://unpkg.com/navigo@6.0.2/lib/navigo.min.js }}

Mount your app

Here a small HTML / JS code to load your app. It contains 2 routes.

<div class="container">
  <div id="app"></div>
  <a href="/en/riot4#!/">Root</a>
  <a href="/en/riot4#!/demo">/demo</a>
</div>

<script type="module">
  {{ riot4 | todor | source }}
  var root = null;
  var useHash = true; // Defaults to: false
  var hash = '#!'; // Defaults to: '#'
  var router = new Navigo(root, useHash, hash);
  
  var mount = function(tag, id, props) {
    document.getElementById(id).innerHTML = ""
    tag(document.getElementById(id), props)
  }
  
  router
    .on(function () {
      mount(riot.component(todor), 'app')
    })
    .on('/demo', function () {
      mount(riot.component(todor), 'app', { test: 'hello world' })
    })
    .resolve();
</script>

This will allow you to create smaller and faster Single Page Applications (SPA). Next RiotJS v5 will just work without API break changes. You'll have then an even small & faster SPA after the release.

Leave a comment