Releases: riot/riot
Releases · riot/riot
v5.4.4
- Fix riot/ssr#23
v5.4.3
v5.4.2
v5.4.1
v5.4.0
- 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
v5.3.2
v5.3.1
- 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
- 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
- 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>