Skip to content

Releases: riot/riot

v5.4.4

05 Jun 19:41
Compare
Choose a tag to compare

v5.4.3

29 May 15:24
Compare
Choose a tag to compare

v5.4.2

15 May 13:37
Compare
Choose a tag to compare

v5.4.1

04 May 21:17
Compare
Choose a tag to compare

v5.4.0

04 May 20:17
Compare
Choose a tag to compare
  • 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>

v5.3.3

05 Apr 20:46
Compare
Choose a tag to compare

v5.3.2

05 Apr 10:03
Compare
Choose a tag to compare

v5.3.1

28 Feb 19:52
Compare
Choose a tag to compare
  • Fix #2895
  • Update improve compiler legacy syntax support. The following syntax is now also supported
<my-component>
  <p>{ state.message }</p>
  <button onclick={onClick}>Click Me</button>

  <script>
    const context = this

    context.state = {
      message: ''
    }
    
    context.onBeforeMount = () => {
      context.state.message = 'Hello'
    }

    context.onClick = () => {
      context.update({
        message: 'Goodbye'
      })
    }
  </script>
</my-component>

v5.3.0

13 Feb 14:31
Compare
Choose a tag to compare
  • Update improve support for legacy Riot.js syntax fixing some edge cases
  • Update improve support for recursive tags

Now you can recursively render tags without having to register them globally

<recursive-tree>
  <p>{ props.name }</p>
  <recursive-tree 
    if={ props.children.length && props.children } 
    each={ child in props.children } { ...child }/>
</recursive-tree>

v5.2.0

31 Jan 20:15
Compare
Choose a tag to compare
  • Add support for old style Riot.js syntax

Some liked more the old RIot.js syntax so you can now write components also as follows

<old-syntax>
  <p>{ state.message }</p>
  <button onclick={onClick}>Click Me</button>

  <script>
    this.onBeforeMount = () => {
      this.state.message = 'Hello'
    }

    this.onClick = () => {
      this.update({
        message: 'Goodbye'
      })
    }
  </script>
</old-syntax>