Skip to content

v5.4.0

Compare
Choose a tag to compare
@GianlucaGuarini GianlucaGuarini released this 04 May 20:17
· 177 commits to main since this release
  • Update: replace the compiler acorn javascript parser with the (bigger but more modern) @babel/parser
  • Add: typescript syntax support in Riot.js <script> tags

Notice:
Riot.js will not type check your components scripts nor transpile them. This version allows you to use the typescript syntax without forcing the use of a typescript preprocessor, but type checking and transpilation should be handled with tools like babel or ts-loader
You can check the new compiler here with the following demo component:

<random>
  <h3>{ props.title }</h3>

  <button onclick={ generate }>
    Generate
  </button>

  <h1>
    { state.number }
  </h1>

  <logs logs={ state.logs } onclear={ clearLogs }></logs>

  <script lang="ts">
    import Logs from '../logs/logs.riot'
    import {RandomComponent} from './types'

    function Random(): RandomComponent {
      return {
        state: {
          number: null,
          logs: []
        },
        generate(event: MouseEvent): void {
          this.update({
            number: Math.floor(Math.random() * 10000),
            logs: this.state.logs.concat({
              text: `Generate button clicked. Event type is ${event.type}`
            })
          })
        },
        clearLogs(): void {
          this.update({
            logs: []
          })
        }
      }
    }

    Random.components = {
      Logs
    }

    export default Random
  </script>
</random>