Breaking changes in Riot-js 4, first impressions from the migration guide

published Jun 06, 2019 02:40   by admin ( last modified Jun 09, 2019 12:29 )

Firstly, it's interesting with a migration guide that starts with saying you should not migrate. What is meant afaict is that you should upgrade your brain to write for Riot 4, but keep old components on e.g. Riot3.

Migration Guide · Riot.js

Version 3 documentation is here

A number of things have changed that I have not used, such as the observable pattern and referencing parents and children.

More verbose

Pretty much all changes will make you write more code inside of a web component. That is a minus I think.

Some good things

The general idea is to be more compatible with contemporary javascript syntax.

There is one thing that has changed that I think is for the better and that is that the "refs" way of referring to DOM elements is gone and instead replaced by the jquery-like selector "$". That makes more sense. I have never used the "yield" tag but it sounds like the new term "slot" is a better word for it.

Some things that add lines of code

Methods operating on the component now need to be wrapped inside an "export default" block, which adds code. I guess you could just put the method names in there and keep the rest outside of the export block. The inline logical statements of the form {truthyOrFalsyTing ? 'iftrue': 'iffalse'} seem to have been removed, and instead you are supposed to create or import functions and put them in the template.


I see no reason to upgrade now, which is inline with the recommendation in the upgrade guide. I'll look through a bit more later onto the new things and see if there is some cool stuff that I'd like to use.


It is hard to find the old docs on the riot site for verison 3, I think they have been deleted, and hence many Google links are broken. I had to go to GitHub to find stuff. I now see that the new FAQ refers you to, but that page does not exist.