riot / examples

Demos and examples for Riot and submodules

Riot Examples

This is a series of examples designed to showcase the benefits of adopting Riot. It is made possible by the Riot open source community.

Note: The Riot.js 3 examples are available here .

We have several examples to choose from; each one demonstrates different aspects of Riot:

Basics

Example
Timer	Source	Demo
Todo	Source	Demo
Todo (pre-compiled)	Source	Demo
Color Palette	Source	Demo
Hooks	Source	Demo
Router - Page switcher	Source	Demo
Animated list reordering	Source	Demo
Simple modal	Source	Demo
Live Ajax Search	Source	Demo

Advanced

Example
TypeScript	Source
Router - Complex	Source	Demo
Router - History API	Source
Router - Lazy Routes	Source
SSR	Source
Deno	Source

Contribute

If you have an example that you think others could benefit from and you'd like to share it please read the contributing guidelines and submit a PR.

Bugs

If you find something that isn't expected please create an issue and we'll get on it. To make it easier to debug please use the Bug Reporter.

examples's Issues

examples/webpack: cannot render sub component <logs>

require('./random.tag') 
riot.mount('random', {
  title: 'Random number generator!'
})
riot.mount('logs', {
  title: ''
})

add code mount 'logs' the sub component can reander but not work parent is undefine

What is the most up-to-date recommended seed/setup for latest riot version (3.11)?

What is the most elegant way to get a riot based UI today?

i'd love the following points to be addressed:

1. A proper code-mapping for easy debugging
2. A good way to bundle the application (so far i used Webpack and JSPM)
3. It would be lovely if it would work elegantly with Typescript.
4. Is it best to use Tag files, or straight JS? If the later, would it be better to use a class that inherit from riot's tag class? If so, can i place the template code in a different file?
5. Future compatibility: i saw that there's going to be a change (that "export default" thing) - how would you recommend to write the code for the smoothest migration path?

If you have more items for consideration - please add them....

Note that this is also posted on stackoverflow, but there were zero answers there: https://stackoverflow.com/questions/51588560/what-is-the-most-up-to-date-recommended-seed-setup-for-latest-riot-version-3-11

Makes gh-pages as default branch

Is it OK?
I think we don't have to manage both master and gh-pages. We could drop master after the default changed.

ES6 sample is broken

The ES6 example seems to be broken both on plunker and when I run locally. I'm still quite new so not sure where to look. The compiler seems to be creating invalid javascript i.e. es.tag.js has:

riot.tag2('es-6', '<p>{getMessage()}</p>', '', '', function(opts) {
'use strict';

var name = 'Riot';
undefined.message = 'Hello ' + name;
undefined.getMessage = function () {
    return undefined.message;
};
});

note the undefined's

checked checkbox when deleting todo item

Copied the todo app https://riot.js.org/documentation/#todo-example and added some extra features like deleting checked items.

When deleting a checked item, the checkbox of the next item in the list becomes checked although it does not have the attribute "checked" or the property "done" ins the items object.

This can be solved by either giving each item the property "done: false" as default or in the riot tag asking in the loop if item.done === true to check the item.

Is this a known issue which was meant to be as specific as possible?

Code-splitting bundle.js

Current Rollup example works well, outputting one file bundle.js with iife format.

But when the size of bundle.js grows bigger, perhaps we need advanced Rollup (or Webpack/Parcel) configuration which enables minify, code-split, dynamic imports, etc.

It would be a great help if this enhancement can be applied on current v4 examples.

Thanks.

"replacement content must be a string" on rollup build

$ cd rollup && npm run build

> [email protected] build /home/phoenix/workspace/riot/examples/rollup
> rollup -c

🚨   replacement content must be a string


npm ERR! Linux 4.8.0-2-amd64
npm ERR! argv "/home/phoenix/.nvm/versions/node/v7.3.0/bin/node" "/home/phoenix/.nvm/versions/node/v7.3.0/bin/npm" "run" "build"
npm ERR! node v7.3.0
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `rollup -c`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script 'rollup -c'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the riot-rollup-example package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     rollup -c
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs riot-rollup-example
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls riot-rollup-example
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/phoenix/workspace/riot/examples/rollup/npm-debug.log

Live filtering example doesn't work

There is something wrong with Live filtering example. Yahoo changed the API or something? The example does not work out of the box and should be fixed.

typescript fails to start with "Error: Debug Failure. False expression."

I followed the insturctionon and I have failed at 'npm start' with the error, "Error: Debug Failure. False expression."
This seems a transpile code fails to transform typescript into js.

Log:

ERROR in ./app/random/random.riot
Module build failed (from ./node_modules/@riotjs/webpack-loader/dist/riot-webpack-loader.cjs.js):
Error: Debug Failure. False expression.
at processImportedModules (/home/um/WebstormProjects/examples/typescript/node_modules/typescript/lib/typescript.js:90834:26)
at findSourceFile (/home/um/WebstormProjects/examples/typescript/node_modules/typescript/lib/typescript.js:90634:17)
at /home/um/WebstormProjects/examples/typescript/node_modules/typescript/lib/typescript.js:90480:85
at getSourceFileFromReferenceWorker (/home/um/WebstormProjects/examples/typescript/node_modules/typescript/lib/typescript.js:90447:34)
at processSourceFile (/home/um/WebstormProjects/examples/typescript/node_modules/typescript/lib/typescript.js:90480:13)
at processRootFile (/home/um/WebstormProjects/examples/typescript/node_modules/typescript/lib/typescript.js:90310:13)
at /home/um/WebstormProjects/examples/typescript/node_modules/typescript/lib/typescript.js:89326:60
at Object.forEach (/home/um/WebstormProjects/examples/typescript/node_modules/typescript/lib/typescript.js:280:30)
at Object.createProgram (/home/um/WebstormProjects/examples/typescript/node_modules/typescript/lib/typescript.js:89326:16)
at check (/home/um/WebstormProjects/examples/typescript/riot-typescript-transformer.js:115:22)
@ ./app/main.ts 3:0-41 5:10-16
ℹ ｢wdm｣: Failed to compile.

ES6 example

Does the es6 example still make sense in riot v4?
Sould it be migrated or removed?

Cannot read property 'first' of undefined

I cant run this example in plunker :(

http://plnkr.co/edit/XRQXCmKgOlyDEDHQ06wY?p=preview

Cannot read property 'first' of undefined list.tag[51]

Named Slots

https://plnkr.co/edit/mw6VQTqFrCr9r9wL

I'm attempting to use the named slots feature, seems straight forward. The rendering here is not in the order I would expect.

Am I doing something incorrect?

Webpack example doesn't work

I copied the entirety of the webpack example folder and installed all the dependencies. When I run npm start, I got this error:

ERROR in ./app/random.riot
andom.riot' in 'C:\[redacted]\riotjs\webpack\app's
@ ./app/random.riot 109:24-89
@ ./app/main.js

ERROR in ./app/logs.riot
iotjswebpackapplogs.riot' in 'C:\[redacted]\riotjs\webpack\app's
@ ./app/logs.riot 54:24-89
@ ./app/random.riot
@ ./app/main.js
   ?wdm?: Failed to compile.

I'm still pretty new to using Webpack, so I'm not sure what's causing it.

examples/webpack: mistake version

Please this capture, the version of riotjs is v2.6.7 in bundle.js.

examples/todo-app: cannot get the input value

I try to runtodo-app on plunker, but the following error was output to console on add method. Since version 3.0.0, can we get the value of input tag specified by the value of name?

Riot with Tailwind

Hi @GianlucaGuarini

Would there be a preprocessor example of Riotjs with Tailwindcss?

Thanks.

Riot can't update checkboxes after a user has interacted with them

In Riot 2.3.16, Riot's DOM updating seems to be alot more efficient and doesn't replace nodes it doesn't have to if only an attribute has changed.

This has caused a problem with checkboxes, once a user has interacted with them, Riot can no longer toggle their state. I believe this is because Riot uses setAttribute to set checked="checked". Riot also needs to set element.checked = true/false for the checkbox to update.

Here's the CodePen http://codepen.io/unknown9595/pen/vGLWqV

Update to riot 2.3

All the example must be updated using riot 2.3

Plunker, jsfiddle or any alternative?

We need a good platform to show the demo, to reproduce the bug, ...etc.
As a playground for the Riot users, what is the best option? Some requirements here:

• put HTML, JavaScript, CSS, and Tag file
• API for creating the demo dynamically (because the example code is hosted on GitHub)
• user can fork it
• nice looking (I hope...)

AFIK, Only Plunker accepts the .tag files. So Plunker seems better for me. (but not the best)
Any alternatives? Let us know your recommended platform :)

Candidates

• Static: Plunker, JSBin, CodePen, JSFiddle
• Dynamic: Runnable, jsapp

Not working in IE11

Help us to manage our issues by answering the following:

1. Describe your issue:

I'm trying to use riot v4 with IE11 and added all required polyfills.
However even with it the code throws an error:

Unable to get property 'removeAttribute' of undefined or null reference

Any idea how to fix this or rather is riot v4 supposed to be used with IE11?

Here's my code

index.html

<my-list></my-list>
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=Object.values%2CArray.from%2CObject.assign%2CCustomEvent%2CSymbol%2CObject.entries"></script>
<script src="index.js"></script>

index.js

import MyList from './my-list.riot'
import {component} from 'riot'

component(MyList)(document.querySelector('my-list'), {
    items: ['apple', 'orange', 'banana']
})

my-list.riot

<my-list>
    <ul if={ props.items }>
        <li each={ item in props.items }>{ item }</li>
    </ul>
</my-list>

2. Can you reproduce the issue?

see above

3. On which browser/OS does the issue appear?

IE11, Win7

4. Which version of Riot does it affect?

Any

5. How would you tag this issue?

• Question
• Bug
• Discussion
• Feature request
• Tip
• Enhancement
• Performance

Typo in package.json

Found
"@riotjs/compiler": "ˆ5.0.0",
instead of
"@riotjs/compiler": "^5.0.0",

That is to say:
ˆ vs. ^

Examples

This issue is originally opened at riot/riot.github.io#7 and we decided to create this examples repo. I'd like to continue the discussion here.

Playground

We can show it in <iframe> with our live editor.

• The simplest example and also a nice tutorial on Plunker.

Basics

Well tested examples for the beginners. If compatible with Plunker, we can add the "edit on Plunker" button.

• Todo App
• Todo App (pre-compiled)
• Timer
• Router - Page switcher
• Mixins by @gregorypratt
• Observables by @gregorypratt

Bug Reporter

• Riot Bug Reporter

More

Relatively not tested well, but good resources for the people who want to learn more.

• Webpack setups
• gulp setups
• Browserify setups
• How to write in ES6
• Isomorphic App
• Router - pushState
• Hackathon starter - cf. Angular's one
• Plunker opener
• Live editor
• Performance tips

Migrate remaining examples to riot4

Hi, if you need i can migrate the examples that aren't updated to riot4.

[Riot 3] if-else-elseif example fails the first rendering

Import scss files in riotjs single file components

Hi, Im looking for way to import scss in style tags like in Vuejs but with the current setup it doesnt work. Thanks.

todo-app and todo-app-precompiled are different

There is an extra X1 button on http://riotjs.com/examples/todo-app/ which is not present on http://riotjs.com/examples/todo-app-precompiled/ (on Win 10, Firefox 42.0, no errors in the console for either app)

The 2 examples are listed as comparable on http://riotjs.com/guide/compiler/#demos, I have no idea which version of the app is correct.

Expected:
it should be the same app

(P.S.: no time to fix this myself this week)

Plunker .tag files syntax

If you add .tag files on Plunker, it dont set syntax highlighting. Maybe rename all examples files to .html extensions?

For example, todo app: http://plnkr.co/edit/uQp4fVG0TW6jeKkcW34g?p=preview
You original: http://riotjs.com/examples/plunker/?app=todo-app

Select todo.tag file and try to change it ))

Humbly asking for help.

Hi! Sorry to bother you, but I am really stuck with getting sourcemaps working for riot though rollup. My latest attempt was to mimic your recipe here in the gulp setup I have. I always manage to get it bundled and working, but the sourcemaps remain an elusive mystery.

This is my latest attempt after running npm-chek-updates:

const rollup = require('rollup')
const riot = require('rollup-plugin-riot')
const nodeResolve = require('rollup-plugin-node-resolve')
const commonjs = require('rollup-plugin-commonjs')
const buble = require('rollup-plugin-buble')

// Helpers
const utils = require('../utils');

// Package settings
var settings = require('upquire')('/package.json').settings;

module.exports = (gulp) => {

  return (js_main_name, done) =>
  {
    return rollup.rollup({
      entry: utils.join(settings.dir_src_client, `${js_main_name}.js`),
      plugins: [
        riot({
          presets: ['es2015-riot'],
          ext: 'html',
          type: 'none',
          sourceMap: true,
        }),
        nodeResolve({
          jsnext: true,
          main: true,
          browser: true
        }),
        commonjs(),
        buble()
      ],
      external: [
        'riot',
        'jquery',
        'rx'
      ],
    })
    .then(function (bundle) {
      bundle.write({
        globals: {
          riot: 'riot',
          jquery: '$',
          rx: 'Rx',
        },
        format: "iife",
        dest: `${settings.dir_dist_client}/${js_main_name}.bundle.js`,
        sourceMap: true
      });
    })
    .then(done)
  }
}

Still this message haunts me: Sourcemap is likely to be incorrect: a plugin was used to transform files, but didn't generate a sourcemap for the transformation. Consult https://github.com/rollup/rollup/wiki/Troubleshooting

Thank you!

DOMException Failed to execute 'insertBefore' on 'Node'

hi all,
i don't understand this exception in my riot v4 project.
The message is:
riot+compiler.js?v=dd6adea73093a1cdadf25239d0e45752:881 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
If i refresh the browser page the error doesn't appear...

Question on example: animated-list-reordering

@cognitom I was looking through this example animated-list-reordering and was wondering about this particular comment: https://github.com/riot/examples/blob/gh-pages/animated-list-reordering/list.tag#L57

I tried to add items and update the flip instance accordingly, but I was unsuccessful. I have used the FLIP technique before, but not within the context of Riot. I don't see where you'd update the items and update the flip instance to make this work. Did you try something like this in Riot?

Refresh Problem with Router - Complex example

I tried router-complex example, everything works nice but i noticed that when i refresh the page

localhost:3000/first/apple

it throws back Syntax error and i'm basically seeing nothing on the screen. I'm trying to make a SPA for my portfolio, and want to format the url structure like

/{works}/{project_id} 

wish i could solve this problem myself..any suggestions?

Next: update examples for Riot3

Your contributions are always welcome!
Feel free to send PRs to next branch. Thank you 😉

• bug-reporter - checked by @cognitom
• color-palette - fixed by @cognitom 8cf3981
• es6 - checked by @cognitom
• if-else-elseif - #40 fixed by @cognitom, @GianlucaGuarini 567683d c9570fb
• todo-app-precompiled - #41 #42 #44 fixed by @K-Kuwahara
• todo-app - #43 #44 fixed by @K-Kuwahara
• live-ajax-search @GianlucaGuarini
• animated-list-reordering @GianlucaGuarini
• timer
• observables
• mixins - checked by @K-Kuwahara
• live-editor
• live-filtering
• plunker
• pre-process-less
• router-complex
• router-history-api
• router-page-switcher
• rollup
• webpack

webpack no longer has preLoaders

The examples still refer to preLoaders ...

Issue with yielding data from <calendar> to <btn> (riot-bootstrap)

Hi there,
I found that {daynum} value isn't passed correctly to <btn> tag (in v.3 only), so days aren't displayed.

<tbody>
  <tr><th each={ day in weekdays }>{ day }</th></tr>
  <tr each={ week in calendar }>
    <td each={ week }>
      <btn active={ selected } disabled={ !currentMonth } onclick={ dayclick }>{ daynum }</btn>
    </td>
  </tr>
</tbody>

Though in v.2.5 yielding works fine.

GraphQL Example is blank

http://riotjs.com/examples/graphql/ shows nothing... a blank page.

Rollup plugin failed to parse a tag in certain condition

Hello,

My app uses a tag
<my-tag style="height:{height}px"> <my-tag> ... this.height=100

Riot compiler does make its work fine, while rollup plugin fires an error. If instead of inline styling I'm using a {class:class}, all worked fine though.

Mikhail

Plunker Integration question

Maybe a little of topic, but I really like your Integration with plunker. Unfortunately I can't find out how it works. Do you know of any tutorial or article describing how to achieve it?

Thank you!

examples/todo-app-precompiled: mistake version and cannot run

At todo-app-precompiled/index.html,

<script src="https://cdn.rawgit.com/riot/riot/master/riot.min.js"></script>

the version of riot.js in this URL is v2.6.7!
So, I changed the URL to https://rawgit.com/riot/riot/next/riot.min.js and displayed index.html in the browser, it was displayed as follows.

And in this state I tried running the application, but I could not add or delete todo.