Web components

Fasty allow you to create RiotJS web components. I'm pretty sure you know reactJS or vueJS ... so why RiotJS ?

I think RiotJS has everything you need for building nice web components without the pain to manage your dependencies. It has out of the box a compiler running in your browser. The cost of compilation is very low. Think about your reactJS or VueJS workflow (compilation, trans-typing, etc...) It comes with a lot of dependencies (look at your node_modules folder)... With RiotsJS it's simple as including a single javascript source in your HTML file.

Here a component (we use RiotJS v3)

First don't forget to include the javascript tag in the JS included text field in your layout.

{{ external | https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js }}

<todo>

  <!-- layout -->
  <h3>{ opts.title }</h3>

  <ul>
    <li each={ item, i in items }>{ item }</li>
  </ul>

  <form onsubmit={ add }>
    <input ref="input">
    <button>Add #{ items.length + 1 }</button>
  </form>

  <!-- style -->
  <style>
    h3 {
      font-size: 14px;
    }
  </style>

  <!-- logic -->
  <script>
    this.items = []

    add(e) {
      e.preventDefault()
      var input = this.refs.input
      this.items.push(input.value)
      input.value = ''
    }
  </script>

</todo>

Once your component created you can insert it anywhere you want in your HTML code using

<todo></todo>

{{ riot | todo | mount }}

Each Web Components are autonomous ... So you can have multiple <todo></todo> with no issue.

Of course here it's a basic sample, but you could create a true dynamic component linked to your own API built within Fasty.

Here a demo :

And here a screenshot of my component within the admin UI