├── .editorconfig
├── .gitignore
├── .travis.yml
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── animated-list-reordering
    ├── README.md
    ├── index.html
    ├── list.riot
    ├── plunker.json
    └── style.css
├── bug-reporter
    ├── README.md
    ├── index.html
    ├── my-tag.html
    └── plunker.json
├── color-palette
    ├── README.md
    ├── app.riot
    ├── color-palette.riot
    ├── index.html
    └── plunker.json
├── deno
    ├── .gitignore
    ├── README.md
    ├── import_map.json
    ├── index.html
    ├── index.ts
    ├── package-lock.json
    ├── package.json
    ├── rollup.browser-config.js
    ├── rollup.server-config.js
    ├── src
    │   ├── app.riot
    │   ├── main.ts
    │   ├── pages
    │   │   ├── about.riot
    │   │   ├── home.riot
    │   │   └── not-found.riot
    │   ├── routes.ts
    │   └── types
    │   │   ├── globals.d.ts
    │   │   ├── riot-file.d.ts
    │   │   └── riot-hydrate.d.ts
    └── tsconfig.json
├── hooks
    ├── README.md
    ├── index.html
    ├── my-tag.html
    ├── plunker.json
    └── with-hooks.js
├── lazy-routes
    ├── .gitignore
    ├── README.md
    ├── app
    │   ├── about.riot
    │   ├── app.riot
    │   ├── home.riot
    │   ├── loader.riot
    │   └── main.js
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── index.html
    └── webpack.config.js
├── live-ajax-search
    ├── README.md
    ├── index.html
    ├── plunker.json
    ├── puff.svg
    ├── search.riot
    └── style.css
├── live-editor
    ├── README.md
    ├── index.html
    ├── live-editor.riot
    ├── plunker.json
    ├── sample.riot
    ├── stage.html
    └── style.css
├── modal
    ├── README.md
    ├── cool-modal.riot
    ├── index.html
    ├── modal.riot
    └── plunker.json
├── plunker
    ├── README.md
    ├── app.riot
    └── index.html
├── riot-config
    ├── .gitignore
    ├── README.md
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── riot.config.js
    └── src
    │   ├── app.riot
    │   └── main.js
├── router-complex
    ├── README.md
    ├── app-help.riot
    ├── app-main.riot
    ├── app-navi.riot
    ├── app.riot
    ├── index.html
    └── plunker.json
├── router-history-api
    ├── README.md
    ├── app.riot
    ├── index.html
    ├── package.json
    ├── plunker.json
    └── superstatic.json
├── router-page-switcher
    ├── README.md
    ├── app.riot
    ├── index.html
    ├── package.json
    └── plunker.json
├── ssr
    ├── .babelrc
    ├── .gitignore
    ├── README.md
    ├── app
    │   ├── app.riot
    │   ├── main.js
    │   └── pages
    │   │   ├── about.riot
    │   │   ├── home.riot
    │   │   └── not-found.riot
    ├── index.html
    ├── index.js
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── bundle.js.LICENSE.txt
    └── webpack.config.js
├── timer
    ├── README.md
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── plunker.json
    ├── style.css
    ├── test
    │   ├── register.js
    │   └── timer.spec.js
    └── timer.riot
├── todo-app-precompiled
    ├── README.md
    ├── index.html
    ├── todo.css
    ├── todo.js
    └── todo.riot
├── todo-app
    ├── README.md
    ├── index.html
    ├── plunker.json
    ├── todo.css
    └── todo.riot
└── typescript
    ├── .eslintrc.json
    ├── .gitignore
    ├── README.md
    ├── app
        ├── RiotFile.d.ts
        ├── logs
        │   ├── logs.riot
        │   └── types.ts
        ├── main.ts
        └── random
        │   ├── random.riot
        │   └── types.ts
    ├── package-lock.json
    ├── package.json
    ├── public
        ├── .gitkeep
        └── index.html
    ├── tsconfig.json
    └── webpack.config.js


/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 | 
3 | [*]
4 | end_of_line = lf
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Useless files
 2 | .DS_Store
 3 | 
 4 | # Logs
 5 | *.log
 6 | 
 7 | # Editor Files
 8 | .idea
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | 
15 | # Directory for instrumented libs generated by jscoverage/JSCover
16 | lib-cov
17 | 
18 | # Coverage directory used by tools like istanbul
19 | coverage
20 | 
21 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
22 | .grunt
23 | 
24 | # node-waf configuration
25 | .lock-wscript
26 | 
27 | 
28 | # Compiled binary addons (http://nodejs.org/api/addons.html)
29 | build/Release
30 | 
31 | # Dependency directory
32 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
33 | node_modules
34 | .npm-debug.log
35 | 
36 | # editor file
37 | .idea
38 | 
39 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |   - 10
 4 | branches:
 5 |   only:
 6 |     - gh-pages
 7 |     - /^.*$/
 8 | env:
 9 |   - TEST_DIR=timer
10 | 
11 | notifications:
12 |   email: false
13 | 
14 | script: cd $TEST_DIR && npm install && npm test
15 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing to Riot Examples
 2 | 
 3 | If you'd like to contribute an example or bug fix, feel free to send us a pull request. Please make sure to search the issue tracker first for duplicates.
 4 | 
 5 | ### Make it testable
 6 | 
 7 | Create tests for your examples. This is so we can ensure they don't break when future changes are made and it also helps people to understand the processes within.
 8 | 
 9 | ### Script tags and external libraries
10 | 
11 | Please make sure to use always the latest riot releases:
12 | 
13 | - [riot+compiler.min.js](https://rawgit.com/riot/riot/main/riot%2Bcompiler.min.js)
14 | - [riot.js](https://cdn.rawgit.com/riot/riot/main/riot.min.js)
15 | 
16 | For all the other libraries use [unpkg.com](https://www.unpkg.com)
17 | 
18 | ### Folder structure
19 | 
20 | Please follow the standard set by the other examples by using this folder structure suggestion:
21 | 
22 | - example-tag.css
23 | - example-tag.js
24 | - example-tag.tag
25 | - index.html
26 | - README.md
27 | - package.json
28 | - test/
29 | 
30 | Not all of these are required, it will differ between examples.
31 | 
32 | #### We are happy to accept PRs so thank you in advance!
33 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Riot 
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [![Build Status][travis-image]][travis-url] [![MIT License][license-image]][license-url]
 2 | 
 3 | # Riot Examples
 4 | 
 5 | This is a series of examples designed to showcase the benefits of adopting [Riot](https://riot.js.org). It is made possible by the Riot open source community.
 6 | 
 7 | **Note**: The Riot.js 3 examples are available [here](https://github.com/riot/examples/tree/v3) .
 8 | 
 9 | We have several examples to choose from; each one demonstrates different aspects of Riot:
10 | 
11 | ## Basics
12 | 
13 | Example | | |
14 | :-- | :-- | :--
15 | Timer | [Source](timer) | [Demo](https://riot.js.org/examples/plunker/?app=timer)
16 | Todo | [Source](todo-app) | [Demo](https://riot.js.org/examples/plunker/?app=todo-app)
17 | Todo (pre-compiled) | [Source](todo-app-precompiled) | [Demo](https://riot.js.org/examples/todo-app-precompiled/)
18 | Color Palette | [Source](color-palette) | [Demo](https://riot.js.org/examples/plunker/?app=color-palette)
19 | Hooks | [Source](hooks) | [Demo](https://riot.js.org/examples/plunker/?app=hooks)
20 | Router - Page switcher | [Source](router-page-switcher) | [Demo](https://riot.js.org/examples/plunker/?app=router-page-switcher)
21 | Animated list reordering | [Source](animated-list-reordering) | [Demo](https://riot.js.org/examples/plunker/?app=animated-list-reordering)
22 | Simple modal | [Source](modal) | [Demo](https://riot.js.org/examples/plunker/?app=modal)
23 | Live Ajax Search | [Source](live-ajax-search) | [Demo](https://riot.js.org/examples/plunker/?app=live-ajax-search)
24 | 
25 | ## Advanced
26 | 
27 | Example | | |
28 | :-- | :-- | :--
29 | TypeScript | [Source](typescript) |
30 | Router - Complex | [Source](router-complex) | [Demo](https://riot.js.org/examples/plunker/?app=router-complex)
31 | Router - History API | [Source](router-history-api) |
32 | Router - Lazy Routes | [Source](lazy-routes) |
33 | SSR | [Source](ssr) |
34 | Deno | [Source](deno) |
35 | 
36 | ## Contribute
37 | 
38 | If you have an example that you think others could benefit from and you'd like to share it please read the [contributing guidelines](CONTRIBUTING.md) and submit a PR.
39 | 
40 | ## Bugs
41 | 
42 | If you find something that isn't expected please [create an issue](https://github.com/riot/examples/issues) and we'll get on it. To make it easier to debug please use the [Bug Reporter](https://riot.js.org/examples/plunker/?app=bug-reporter).
43 | 
44 | [travis-image]:https://img.shields.io/travis/riot/examples.svg?style=flat-square
45 | [travis-url]:https://travis-ci.org/riot/examples
46 | 
47 | [license-image]:http://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
48 | [license-url]:LICENSE
49 | 


--------------------------------------------------------------------------------
/animated-list-reordering/README.md:
--------------------------------------------------------------------------------
 1 | # Mixins
 2 | 
 3 | This is a simple example showing how to create smooth animation reordering a collection list in riot.
 4 | It uses [animore](https://github.com/gianlucaguarini/animore) to handle the transitions.
 5 | 
 6 | ## Have a play
 7 | 
 8 | [Open this example on Plunker](https://riot.js.org/examples/plunker/?app=animated-list-reordering)
 9 | 
10 | ## Run locally
11 | 
12 | Install superstatic if you don't have.
13 | 
14 | ```bash
15 | $ npm install -g superstatic
16 | ```
17 | 
18 | Download or clone this repo, then run the command.
19 | 
20 | ```bash
21 | $ cd to/this/dir
22 | $ superstatic
23 | ```
24 | 
25 | Open the URL shown in your browser.
26 | 


--------------------------------------------------------------------------------
/animated-list-reordering/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <link rel="stylesheet" type="text/css" href="style.css">
 5 |   </head>
 6 |   <body>
 7 | 
 8 |     <list></list>
 9 | 
10 |     <script src="https://unpkg.com/animore/animore.js"></script>
11 |     <script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
12 | 
13 |     <script type="riot" src="./list.riot"></script>
14 | 
15 |     <script type="text/javascript">
16 |       riot.compile().then(() => {
17 |         riot.mount('list')
18 |       })
19 |     </script>
20 | 
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/animated-list-reordering/list.riot:
--------------------------------------------------------------------------------
  1 | <list>
  2 |   <h1>Sorting options</h1>
  3 |   <button class="secondary" onclick={ shuffle }>
  4 |     Shuffle
  5 |   </button>
  6 |   <button class="secondary" onclick={ () => sortBy('age') }>
  7 |     Sort by age
  8 |   </button>
  9 |   <button class="secondary" onclick={ () => sortBy('name') }>
 10 |     Sort by Name
 11 |   </button>
 12 |   <button class="secondary" onclick={ add }>
 13 |     Add person
 14 |   </button>
 15 | 
 16 |   <h2>People Collection</h2>
 17 |   <ol>
 18 |     <li each={ person in state.people } key={ person.id }>
 19 |       <div>
 20 |         { person.name } - { person.age }
 21 |       </div>
 22 |       <button onclick={ () => remove(person.id) }>
 23 |         Remove person
 24 |       </button>
 25 |     </li>
 26 |   </ol>
 27 | 
 28 |   <script>
 29 |     // some private random variables
 30 |     const amount = 50
 31 |     const names = [
 32 |       'Jack', 'Susy', 'Mel', 'Fred', 'George',
 33 |       'Bob', 'Roger', 'Lucy', 'Tino', 'Lucy',
 34 |       'Nina', 'Rudy', 'Greg', 'Albert', 'Rick'
 35 |     ]
 36 | 
 37 |     const uid = ((id) => () => id++)(0)
 38 | 
 39 |     // helper to create a random entry in the collection
 40 |     const createPerson = () => ({
 41 |       name: names[~~(Math.random() * names.length)],
 42 |       age: ~~(Math.random() * 100) + 1, // avoid 0,
 43 |       id: uid()
 44 |     })
 45 | 
 46 |     // helper function to shuffle the items in the array
 47 |     function shuffle(o) {
 48 |       var j, x, i
 49 |       for (i = o.length; i; i -= 1) {
 50 |         j = Math.floor(Math.random() * i)
 51 |         x = o[i-1]
 52 |         o[i-1] = o[j]
 53 |         o[j] = x
 54 |       }
 55 | 
 56 |       return o
 57 |     }
 58 | 
 59 |     export default {
 60 |       state: {
 61 |         people: Array.from({ length: amount }, createPerson)
 62 |       },
 63 |       onBeforeUpdate() {
 64 |         this.animations = animore(this.$$('li'), {
 65 |           duration: 500,
 66 |           easing: 'cubic-bezier(0.860, 0.000, 0.070, 1.000)'
 67 |         })
 68 | 
 69 |         this.animations.forEach(({ stash }) => stash())
 70 |       },
 71 |       // run the animation when the DOM
 72 |       // is updated
 73 |       onUpdated() {
 74 |         this.animations.forEach(({ apply }) => apply())
 75 |       },
 76 |       // Ui public methods
 77 | 
 78 |       /**
 79 |        * Shuffle the people order without any logic
 80 |        */
 81 |       shuffle() {
 82 |         this.update({ people: shuffle(this.state.people) })
 83 |       },
 84 | 
 85 |       /**
 86 |        * Sort the people array by a single property
 87 |        * @param {string} prop - property we want use to sort the collection
 88 |        */
 89 |       sortBy(prop) {
 90 |         this.update({
 91 |           people: this.state.people.sort(function(a, b) {
 92 |             if (a[prop] < b[prop])
 93 |                 return -1
 94 |               else if (a[prop] > b[prop])
 95 |                 return 1
 96 |               else
 97 |                 return 0
 98 |           })
 99 |         })
100 |       },
101 | 
102 |       add() {
103 |         const { people } = this.state
104 | 
105 |         // add randomply a new person
106 |         people.splice(~~(Math.random() * people.length), 0, createPerson())
107 | 
108 |         this.update({ people })
109 |       },
110 | 
111 |       remove(id) {
112 |         const { people } = this.state
113 | 
114 |         this.update({ people: people.filter(p => p.id !== id) })
115 |       }
116 |     }
117 |   </script>
118 | 
119 |   <style>
120 |     :host {
121 |       --primary-color: #0f1731;
122 |       --secondary-color: #fb0d48;
123 | 
124 |       font: 1.2rem 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
125 |       display: inline-block;
126 |       color: var(--primary-color);
127 |     }
128 | 
129 |     ol {
130 |       list-style: none;
131 |       margin: 0;
132 |       padding: 0;
133 |     }
134 |     ol li {
135 |       padding: 1rem;
136 |       display: flex;
137 |       align-items: center;
138 |       justify-content: space-between;
139 |       width: 50%;
140 |       float: left;
141 |       box-sizing: border-box;
142 |       background: white;
143 |       border: 1px solid #9fdeff;
144 |     }
145 | 
146 |     button {
147 |       font-size: 0.8rem;
148 |       text-transform: uppercase;
149 |       background: var(--primary-color);
150 |       color: #fff;
151 |       border: 1px solid #9fdeff;
152 |       padding: 0.8rem 1.6rem;
153 |       border-radius: 0.4rem;
154 |     }
155 | 
156 |     button.secondary {
157 |       background: var(--secondary-color);
158 |     }
159 | 
160 |     @media screen and (max-width: 768px) {
161 |       :host {
162 |         font-size: 75%;
163 |       }
164 | 
165 |       button {
166 |         font-size: 0.6rem;
167 |         padding: 0.4rem 0.8rem;
168 |       }
169 |       ol li {
170 |         width: 100%;
171 |       }
172 |     }
173 |   </style>
174 | </list>
175 | 


--------------------------------------------------------------------------------
/animated-list-reordering/plunker.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "title": "Color Palette",
 3 |   "files": [
 4 |     "index.html",
 5 |     "README.md",
 6 |     "list.riot",
 7 |     "style.css"
 8 |   ]
 9 | }
10 | 


--------------------------------------------------------------------------------
/animated-list-reordering/style.css:
--------------------------------------------------------------------------------
1 | body {
2 |   margin: 0;
3 |   padding: 2rem;
4 |   background: #9fdeff;
5 | }


--------------------------------------------------------------------------------
/bug-reporter/README.md:
--------------------------------------------------------------------------------
 1 | # Riot Bug Reporter
 2 | 
 3 | This is a template for bug reporting.
 4 | 
 5 | ## How to report
 6 | 
 7 | 1. [Open this template on Plunker](https://riot.js.org/examples/plunker/?app=bug-reporter)
 8 | 2. Edit & save
 9 | 3. Share the url
10 | 


--------------------------------------------------------------------------------
/bug-reporter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |   </head>
 5 |   <body>
 6 | 
 7 |     <my-tag></my-tag>
 8 | 
 9 |     <script type="text/javascript" src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
10 |     <script type="riot" src="./my-tag.html"></script>
11 | 
12 |     <script type="text/javascript">
13 |       riot.compile().then(() => {
14 |         riot.mount('my-tag')
15 |       })
16 |     </script>
17 | 
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/bug-reporter/my-tag.html:
--------------------------------------------------------------------------------
 1 | <my-tag>
 2 |   <h1>{ state.message }</h1>
 3 | 
 4 |   <script>
 5 |     export default {
 6 |       state: {
 7 |         message: 'hello there'
 8 |       }
 9 |     }
10 |   </script>
11 | </my-tag>
12 | 


--------------------------------------------------------------------------------
/bug-reporter/plunker.json:
--------------------------------------------------------------------------------
1 | {
2 |   "title": "Riot Bug Reporter",
3 |   "files": [
4 |     "index.html",
5 |     "my-tag.html",
6 |     "README.md"
7 |   ]
8 | }
9 | 


--------------------------------------------------------------------------------
/color-palette/README.md:
--------------------------------------------------------------------------------
 1 | # Color Palette
 2 | 
 3 | This is an example for showing how to create custom form element.
 4 | 
 5 | - you can set or get the value via `value` attribute
 6 | - it fires `onchange` event like `<input>` element
 7 | 
 8 | ## Have a play
 9 | 
10 | [Open this example on Plunker](https://riot.js.org/examples/plunker/?app=color-palette)
11 | 
12 | ## Run locally
13 | 
14 | Install superstatic if you don't have.
15 | 
16 | ```bash
17 | $ npm install -g superstatic
18 | ```
19 | 
20 | Download or clone this repo, then run the command.
21 | 
22 | ```bash
23 | $ cd to/this/dir
24 | $ superstatic
25 | ```
26 | 
27 | Open the URL shown in your browser.
28 | 


--------------------------------------------------------------------------------
/color-palette/app.riot:
--------------------------------------------------------------------------------
 1 | <app style="background: { state.color }">
 2 | 
 3 |   <color-palette value={ state.color } onchange={ onChange } />
 4 | 
 5 |   <p>Click the color.</p>
 6 | 
 7 |   <script>
 8 |     export default {
 9 |       state: {
10 |         color: '',
11 |       },
12 |       onChange(event) {
13 |         this.update({
14 |           color: event.target.value
15 |         })
16 |       }
17 |     }
18 |   </script>
19 | 
20 |   <style>
21 |     :host {
22 |       position: absolute;
23 |       top: 0; right: 0; bottom: 0; left: 0;
24 |       padding: 1em;
25 |       text-align: center;
26 |       background: #eee;
27 |     }
28 |   </style>
29 | 
30 | </app>
31 | 


--------------------------------------------------------------------------------
/color-palette/color-palette.riot:
--------------------------------------------------------------------------------
 1 | <color-palette>
 2 |   <div
 3 |     each={ color in state.colors }
 4 |     style="background: { color }"
 5 |     class={ color === props.value ? 'selected' : '' }
 6 |     onclick={ () => onClick(color) }/>
 7 | 
 8 |   <script>
 9 |     export default {
10 |       state: {
11 |         colors: [
12 |           '#edc951',
13 |           '#eb6841',
14 |           '#cc2a36',
15 |           '#4f372d',
16 |           '#00a0b0'
17 |         ],
18 |       },
19 |       onBeforeMount(props) {
20 |         this.root.value = props.value
21 |       },
22 |       onClick(color) {
23 |         this.root.value = color
24 |         this.root.dispatchEvent(new Event('change'))
25 |       }
26 |     }
27 |   </script>
28 | 
29 |   <style>
30 |     :host {
31 |       display: inline-block;
32 |       padding: .5em;
33 |       line-height: 0;
34 |       background: white;
35 |       transition: box-shadow .2s;
36 |     }
37 | 
38 |     :host:hover {
39 |       box-shadow: 0 1px 5px rgba(0,0,0,.5);
40 |     }
41 | 
42 |     div {
43 |       display: inline-block;
44 |       width: 2em;
45 |       height: 2em;
46 |       position: relative;
47 |       cursor: pointer;
48 |       z-index: 1;
49 |       box-sizing: border-box;
50 |       -moz-box-sizing: border-box;
51 |       transition: box-shadow .2s;
52 |     }
53 |     div:hover {
54 |       z-index: 2;
55 |       box-shadow: 0 2px 10px rgba(0,0,0,.5);
56 |     }
57 | 
58 |     div:hover,
59 |     div.selected {
60 |       border: 3px solid rgba(255,255,255,.7);
61 |     }
62 | 
63 |   </style>
64 | 
65 | </color-palette>
66 | 


--------------------------------------------------------------------------------
/color-palette/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 |   <head>
 5 |     <title>Color Palette</title>
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   </head>
 8 | 
 9 |   <body>
10 |     <app></app>
11 | 
12 |     <!-- riot tags -->
13 |     <script type="riot" src="color-palette.riot"></script>
14 |     <script type="riot" src="app.riot"></script>
15 | 
16 |     <!-- scripts we need -->
17 |     <script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
18 |     <script src="mixin.js"></script>
19 | 
20 |     <!-- mount this app -->
21 |     <script>
22 |       riot.compile().then(() => {
23 |         riot.mount('app')
24 |       })
25 |     </script>
26 | 
27 |     <style>
28 |       body {
29 |         margin: 0;
30 |       }
31 |     </style>
32 |   </body>
33 | 
34 | </html>
35 | 


--------------------------------------------------------------------------------
/color-palette/plunker.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "title": "Color Palette",
 3 |   "files": [
 4 |     "index.html",
 5 |     "README.md",
 6 |     "app.riot",
 7 |     "color-palette.riot"
 8 |   ]
 9 | }
10 | 


--------------------------------------------------------------------------------
/deno/.gitignore:
--------------------------------------------------------------------------------
1 | public/*
2 | 


--------------------------------------------------------------------------------
/deno/README.md:
--------------------------------------------------------------------------------
 1 | # Deno SSR Example
 2 | 
 3 | This example shows how you can render and hydrate a simple Riot.js application using [`deno`](https://deno.land/).
 4 | **This demo works only on V8 based browser because [`importmap` is not yet 100% supported](https://caniuse.com/import-maps)** 
 5 | 
 6 | ## Run locally
 7 | 
 8 | Download or clone this repo.
 9 | Install packages.
10 | 
11 | ```bash
12 | $ npm install
13 | ```
14 | And then run the oak server using
15 | 
16 | ```bash
17 | $ npm start
18 | ```
19 | 
20 | Use the following command to watch the frontend files and update 
21 | ```bash
22 | $ npm watch
23 | ```
24 | 
25 | Notice that Deno dosn't support (hmr) livereload yet
26 | 
27 | - Open [http://localhost:3000/](http://localhost:3000/)


--------------------------------------------------------------------------------
/deno/import_map.json:
--------------------------------------------------------------------------------
1 | {
2 |   "imports": {
3 |     "@riotjs/ssr": "./node_modules/@riotjs/ssr/index.js"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/deno/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <meta charset="UTF-8">
 4 |   <title>Riot Deno App</title>
 5 |   <link rel="stylesheet" href="https://unpkg.com/modern-css-reset/dist/reset.min.css" />
 6 |   <style riot>
 7 |     <%= css %>
 8 |   </style>
 9 | </head>
10 | <body>
11 |   <%= html %>
12 |   <script>
13 |     window.__INITIAL_STATE__ = <%= initialState %>
14 |   </script>
15 | 
16 |   <script type="module">
17 |     import './public/main.js'
18 |   </script>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/deno/index.ts:
--------------------------------------------------------------------------------
 1 | import { Application } from 'https://deno.land/x/oak@v10.5.1/mod.ts'
 2 | import { template } from 'https://cdn.pika.dev/lodash-es'
 3 | import { renderAsyncFragments } from '@riotjs/ssr'
 4 | import RootComponent from'./public/app.js'
 5 | import importMap from './import_map.json' assert { type: 'json' }
 6 | import routes from './src/routes.ts'
 7 | import { toRegexp, match } from '@riotjs/route'
 8 | 
 9 | const app = new Application()
10 | const page = await Deno.readTextFile('./index.html')
11 | const pages = Object.values(routes)
12 | 
13 | app.use(async (ctx, next) => {
14 |   // quick test to identify static assets
15 |   if (ctx.request.url.pathname.includes('.')) return next()
16 | 
17 |   // generate the initial state
18 |   const initialState = {
19 |     initialRoute: ctx.request.url.pathname,
20 |     base: ctx.request.url.origin,
21 |     routes,
22 |   }
23 | 
24 |   // generate the rendered html + css
25 |   const { html, css } = await renderAsyncFragments('app', RootComponent, initialState)
26 | 
27 |   // send 404 if the current path doesn't match any of the routes
28 |   if (!pages.some(page => match(initialState.initialRoute, toRegexp(page.path)))) {
29 |     ctx.response.status = 404
30 |   }
31 | 
32 |   // render the body
33 |   ctx.response.body = template(page)({
34 |     html,
35 |     css,
36 |     initialState: JSON.stringify(initialState)
37 |   })
38 | })
39 | 
40 | app.use(async (context, next) => {
41 |   try {
42 |     await context.send({
43 |       root: `${ Deno.cwd() }/`,
44 |       index: 'index.html',
45 |     })
46 |   } catch {
47 |     next()
48 |   }
49 | })
50 | 
51 | console.log('App running on: http://localhost:3000')
52 | 
53 | await app.listen({ port: 3000 })
54 | 
55 | 
56 | 
57 | 


--------------------------------------------------------------------------------
/deno/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "deno",
 3 |   "version": "1.0.0",
 4 |   "description": "Deno SSR Demo",
 5 |   "repository": "riot/examples",
 6 |   "main": "src/main.ts",
 7 |   "author": "Gianluca Guarini",
 8 |   "license": "MIT",
 9 |   "type": "module",
10 |   "engines": {
11 |     "node": ">=10.0.0"
12 |   },
13 |   "scripts": {
14 |     "start": "npm run build && deno run --import-map=import_map.json --no-check=remote --allow-net --watch --allow-read index.ts",
15 |     "clean": "rm -rf public/*",
16 |     "build-browser": "rollup -c rollup.browser-config.js",
17 |     "build-server": "rollup -c rollup.server-config.js",
18 |     "build": "npm run clean && npm run build-browser && npm run build-server",
19 |     "watch": "rollup -c -w"
20 |   },
21 |   "keywords": [
22 |     "riot",
23 |     "deno"
24 |   ],
25 |   "devDependencies": {
26 |     "@riotjs/cli": "^9.0.5",
27 |     "@riotjs/compiler": "^9.0.6",
28 |     "@rollup/plugin-commonjs": "^25.0.7",
29 |     "@rollup/plugin-node-resolve": "^15.2.3",
30 |     "@rollup/plugin-typescript": "^11.1.5",
31 |     "rollup-plugin-riot": "^9.0.2"
32 |   },
33 |   "dependencies": {
34 |     "@riotjs/hydrate": "^9.0.0",
35 |     "@riotjs/route": "^9.1.2",
36 |     "@riotjs/ssr": "^9.0.0",
37 |     "erre": "^3.0.1",
38 |     "riot": "^9.1.2"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/deno/rollup.browser-config.js:
--------------------------------------------------------------------------------
 1 | import riot from 'rollup-plugin-riot'
 2 | import commonjs from '@rollup/plugin-commonjs'
 3 | import { nodeResolve } from '@rollup/plugin-node-resolve'
 4 | import typescript from '@rollup/plugin-typescript'
 5 | 
 6 | export default {
 7 |   input: 'src/main.ts',
 8 |   output: {
 9 |     file: 'public/main.js',
10 |     format: 'esm',
11 |   },
12 |   onwarn: function(error) {
13 |     if (/Circular dependency/.test(error.message)) return
14 |     console.error(error.message)
15 |   },
16 |   plugins: [
17 |     commonjs({
18 |       ignore: ['url']
19 |     }),
20 |     nodeResolve(),
21 |     riot(),
22 |     typescript({
23 |       include: "./src/**"
24 |     })
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------
/deno/rollup.server-config.js:
--------------------------------------------------------------------------------
 1 | import riot from 'rollup-plugin-riot'
 2 | import typescript from '@rollup/plugin-typescript'
 3 | 
 4 | export default {
 5 |   input: 'src/app.riot',
 6 |   external: ['@riotjs/hydrate', 'erre', '@riotjs/route', 'riot'],
 7 |   output: {
 8 |     file: 'public/app.js',
 9 |     format: 'esm',
10 |   },
11 |   plugins: [
12 |     riot(),
13 |     typescript({
14 |       include: "./src/**"
15 |     })
16 |   ]
17 | }
18 | 


--------------------------------------------------------------------------------
/deno/src/app.riot:
--------------------------------------------------------------------------------
  1 | <app>
  2 |   <router on-started={onRouterStarted} base={props.base} initial-route={props.initialRoute}>
  3 |     <nav>
  4 |       <a each={page in getPages()} class={getLinkClass(page.path)} href={page.path}>
  5 |         {page.label}
  6 |       </a>
  7 |     </nav>
  8 | 
  9 |     <header>
 10 |       <img width="111" height="116" src="https://riot.js.org/img/logo/square.svg" alt="Riot.js Logo"/>
 11 |       🚀
 12 |       <img width="110" height="110" src="https://upload.wikimedia.org/wikipedia/commons/8/84/Deno.svg" alt="Deno Logo"/>
 13 |     </header>
 14 | 
 15 |     <not-found if={state.showNotFound}/>
 16 | 
 17 |     <main>
 18 |       <route each={page in getPages()} path={page.path}>
 19 |         <main is={page.component}/>
 20 |       </route>
 21 |     </main>
 22 |   </router>
 23 | 
 24 |   <script lang="ts">
 25 |     import { withTypes } from 'riot'
 26 |     import erre from 'erre'
 27 |     import Home from './pages/home.riot'
 28 |     import NotFound from './pages/not-found.riot'
 29 |     import About from './pages/about.riot'
 30 |     import { Router, Route, route, toRegexp, match } from '@riotjs/route'
 31 | 
 32 |     export default withTypes({
 33 |       components: {
 34 |         Router,
 35 |         Route,
 36 |         Home,
 37 |         About,
 38 |         NotFound
 39 |       },
 40 |       state: {
 41 |         currentPath: null,
 42 |         showNotFound: false
 43 |       },
 44 |       // the isServer property is automatically injected by @riotjs/ssr
 45 |       onBeforeMount({ initialRoute }) {
 46 |         // create a stream on all routes
 47 |         this.anyRouteStream = route('(.*)')
 48 |         // create a stream to check the riot-router state
 49 |         this.routerStateStream = erre()
 50 |         // update the state of the not found component depending on the initial route
 51 |         this.state.showNotFound = this.isNotFoundVisible(initialRoute)
 52 |         // check any route change to understand if the not found site should be displayed
 53 |         // and to update the menu link classes
 54 |         this.anyRouteStream.on.value(this.onAnyRoute)
 55 |         // set the initial current path
 56 |         this.state.currentPath = initialRoute
 57 |       },
 58 |       onRouterStarted() {
 59 |         // broadcast the router started event
 60 |         this.routerStateStream.push('started')
 61 |       },
 62 |       // Needed only for SSR
 63 |       onAsyncRendering(resolve) {
 64 |         const onReady = () => {
 65 |           this.routerStateStream.off.value(onReady)
 66 |           resolve()
 67 |         }
 68 | 
 69 |         // wait the router started event
 70 |         this.routerStateStream.on.value(onReady)
 71 |       },
 72 |       getPages() {
 73 |         return Object.values(this.props.routes)
 74 |       },
 75 |       isNotFoundVisible(path) {
 76 |         return !this.getPages().some(p => match(path, toRegexp(p.path)))
 77 |       },
 78 |       onAnyRoute({ pathname }) {
 79 |         // show the not found page if none of the page paths are matched
 80 |         this.update({
 81 |           currentPath: pathname,
 82 |           showNotFound: this.isNotFoundVisible(pathname)
 83 |         })
 84 |       },
 85 |       getLinkClass(path) {
 86 | 
 87 |         return this.state?.currentPath === path ? 'active' : null
 88 |       },
 89 |       onBeforeUnmount() {
 90 |         this.routerStateStream.end()
 91 |         this.anyRouteStream.end()
 92 |       }
 93 |     })
 94 |   </script>
 95 | 
 96 |   <style>
 97 |     :host {
 98 |       --primary-color: rgba(96, 165, 254, 1);
 99 |       --background-color: aliceblue;
100 |       --light-gray: #f4f4f4;
101 | 
102 |       font-family: ui-sans-serif, system-ui, sans-serif;
103 |       box-sizing: border-box;
104 |       display: flex;
105 |       flex-direction: column;
106 |       justify-content: center;
107 | 
108 |       margin: 0 auto;
109 |       padding: 2rem 1rem 1rem;
110 |       min-height: 100vh;
111 |       text-align: center;
112 |       background-color: var(--background-color);
113 |     }
114 | 
115 |     h1 {
116 |       font-weight: 300;
117 |       font-size: 1.6rem;
118 |       margin-bottom: 1.2rem;
119 |     }
120 | 
121 |     h1 b {
122 |       font-weight: bold;
123 |     }
124 | 
125 |     header {
126 |       display: flex;
127 |       justify-content: center;
128 |       align-items: center;
129 |       padding: 1.2rem 1rem 1rem;
130 |       margin: 1rem 0;
131 |       gap: 2rem;
132 |     }
133 | 
134 |     main {
135 |       margin: 0 auto;
136 |       max-width: 600px;
137 |       min-height: 200px;
138 |     }
139 | 
140 |     main p {
141 |       line-height: 1.6;
142 |       margin-bottom: 1rem;
143 |     }
144 | 
145 |     nav {
146 |       display: flex;
147 |       align-items: center;
148 |       justify-content: center;
149 |     }
150 | 
151 |     a {
152 |       color: var(--primary-color);
153 |       text-decoration: none;
154 |     }
155 | 
156 |     a:focus, a:active, a:hover {
157 |       opacity: 0.7;
158 |     }
159 | 
160 |     nav a {
161 |       padding: 0 0.4rem;
162 |     }
163 | 
164 |     nav a.active {
165 |       text-decoration: underline;
166 |       pointer-events: none;
167 |     }
168 |   </style>
169 | </app>
170 | 


--------------------------------------------------------------------------------
/deno/src/main.ts:
--------------------------------------------------------------------------------
1 | import hydrate from '@riotjs/hydrate'
2 | import App from './app.riot'
3 | 
4 | const appNode = document.querySelector('app')
5 | appNode && hydrate(App)(appNode, window.__INITIAL_STATE__)
6 | 


--------------------------------------------------------------------------------
/deno/src/pages/about.riot:
--------------------------------------------------------------------------------
1 | <about>
2 |   <h1>A <b>modern</b> runtime for <b>JavaScript</b> and <b>TypeScript</b>.</h1>
3 |   <p>Deno is a simple, modern and secure runtime for JavaScript, TypeScript, and WebAssembly that uses V8 and is built in Rust.</p>
4 |   <p><a href="https://deno.land/" target="_blank" rel="nofollow">Read More</a></p>
5 | </about>


--------------------------------------------------------------------------------
/deno/src/pages/home.riot:
--------------------------------------------------------------------------------
1 | <home>
2 |   <h1>Hello <b>Deno</b> :)</h1>
3 |   <p>Did you know that Riot.js components can be rendered also by Deno?<br/>
4 |   What a great news!</p>
5 | </home>


--------------------------------------------------------------------------------
/deno/src/pages/not-found.riot:
--------------------------------------------------------------------------------
 1 | <not-found>
 2 |   <h1>Page not found</h1>
 3 |   <p>Opsi, wrong page. Go back to <a href={HOME.path}>{HOME.label}</a> :(</p>
 4 | 
 5 |   <script lang="ts">
 6 |     import { withTypes } from 'riot'
 7 |     import routes from '../routes.ts'
 8 | 
 9 |     export default withTypes({
10 |       ...routes
11 |     })
12 |   </script>
13 | </not-found>
14 | 
15 | 


--------------------------------------------------------------------------------
/deno/src/routes.ts:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   HOME: {
 3 |     path: '/',
 4 |     label: 'Home',
 5 |     component: 'home'
 6 |   },
 7 |   ABOUT: {
 8 |     path: '/about',
 9 |     label: 'What\'s Deno?',
10 |     component: 'about'
11 |   }
12 | }


--------------------------------------------------------------------------------
/deno/src/types/globals.d.ts:
--------------------------------------------------------------------------------
 1 | interface Window {
 2 |   __INITIAL_STATE__: {
 3 |     initialRoute: string
 4 |     base: string
 5 |     routes: Record<string, {
 6 |       path: string
 7 |       label: string
 8 |       component: string
 9 |     }>
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/deno/src/types/riot-file.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.riot' {
2 |   import {RiotComponentWrapper} from 'riot'
3 |   export default RiotComponentWrapper<any, any>
4 | }
5 | 


--------------------------------------------------------------------------------
/deno/src/types/riot-hydrate.d.ts:
--------------------------------------------------------------------------------
1 | declare module '@riotjs/hydrate' {
2 |   import { RiotComponent, RiotComponentWrapper} from 'riot'
3 |   export default function <Props, State, Component = RiotComponent<Props, State>>(wrapper: RiotComponentWrapper<Component>): (
4 |     el: Element,
5 |     initialProps?: Props
6 |   ) => Component
7 | }
8 | 


--------------------------------------------------------------------------------
/deno/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowJs": true,
 4 |     "skipLibCheck": true,
 5 |     "esModuleInterop": true,
 6 |     "inlineSourceMap": true,
 7 |     "isolatedModules": true,
 8 |     "module": "esnext",
 9 |     "strict": true,
10 |     "target": "esnext"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/hooks/README.md:
--------------------------------------------------------------------------------
 1 | # Riot Hooks Example
 2 | 
 3 | This example shows how you can add hooks to the Riot.js components thanks to the fantastic [uhooks](https://github.com/WebReflection/uhooks) micro library.
 4 | This is just a basic example that can be easily extended to match your needs.
 5 | 
 6 | ## Have a play
 7 | 
 8 | [Open this example on Plunker](https://riot.js.org/examples/plunker/?app=hooks)
 9 | 
10 | 


--------------------------------------------------------------------------------
/hooks/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <style>
 5 |       body {
 6 |         font-family: 'Helvetica Neue', Helvetica, Arial;
 7 |         min-height: 100vh;
 8 |         align-items: center;
 9 |         justify-content: center;
10 |         display: flex;
11 |         background: #980f33;
12 |       }
13 |     </style>
14 |   </head>
15 |   <body>
16 | 
17 |     <my-tag count="0"></my-tag>
18 | 
19 |     <script type="text/javascript" src="https://unpkg.com/uhooks@0.2.8/min.js"></script>
20 |     <script type="text/javascript" src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
21 |     <script type="text/javascript" src="./with-hooks.js"></script>
22 |     <script type="riot" src="./my-tag.html"></script>
23 | 
24 |     <script type="text/javascript">
25 |       riot.compile().then(() => {
26 |         riot.mount('my-tag')
27 |       })
28 |     </script>
29 | 
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/hooks/my-tag.html:
--------------------------------------------------------------------------------
 1 | <my-tag>
 2 |   <h1>Counter</h1>
 3 |   <p>{ count }</p>
 4 |   <div class="buttons">
 5 |     <button onclick="{ increment }">+</button>
 6 |     <button onclick="{ decrement }">-</button>
 7 |   </div>
 8 |   <script>
 9 |     const { useState } = uhooks
10 | 
11 |     export default withHook((props) => {
12 |       const [count, setCount] = useState(Number(props.count))
13 | 
14 |       const increment = () => setCount(count + 1)
15 |       const decrement = () => setCount(count - 1)
16 | 
17 |       return {
18 |         count,
19 |         increment,
20 |         decrement
21 |       }
22 |     })
23 |   </script>
24 |   <style>
25 |     :host {
26 |       display: flex;
27 |       flex-direction: column;
28 |       align-items: center;
29 |       background: white;
30 |       padding: 2rem;
31 |       min-width: 25vw;
32 |       border-radius: 1rem;
33 |       text-align: center;
34 |       box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2);
35 |     }
36 | 
37 |     h1 {
38 |       margin-bottom: 1rem;
39 |     }
40 | 
41 |     p {
42 |       font-size: 1.6rem;
43 |       margin-top: 0;
44 |     }
45 | 
46 |     .buttons {
47 |       display: flex;
48 |       grid-gap: 0.5rem;
49 |     }
50 | 
51 |     button {
52 |       cursor: pointer;
53 |       color: white;
54 |       background: #0f1731;
55 |       border: none;
56 |       font-size: 1.8rem;
57 |       width: 4rem;
58 |       height: 4.2rem;
59 |       border-radius: 0.4rem;
60 |     }
61 | 
62 |     button:hover, button:focus-visible {
63 |       background: #1FADC5;
64 |     }
65 |   </style>
66 | </my-tag>
67 | 


--------------------------------------------------------------------------------
/hooks/plunker.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "title": "Riot.js hooks",
 3 |   "files": [
 4 |     "index.html",
 5 |     "with-hooks.js",
 6 |     "my-tag.html",
 7 |     "README.md"
 8 |   ]
 9 | }
10 | 


--------------------------------------------------------------------------------
/hooks/with-hooks.js:
--------------------------------------------------------------------------------
 1 | const IS_MOUNTED = Symbol()
 2 | 
 3 | const withHook = setup => () => {
 4 |   const hooks = uhooks.hooked((props, component) => {
 5 |     Object.assign(component, setup(props))
 6 |     if (component[IS_MOUNTED]) component.update()
 7 |   })
 8 | 
 9 |   return {
10 |     onBeforeMount(props) {
11 |       hooks(props, this)
12 |       this[IS_MOUNTED] = true
13 |     }
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/lazy-routes/.gitignore:
--------------------------------------------------------------------------------
1 | public/bundle.js
2 | 


--------------------------------------------------------------------------------
/lazy-routes/README.md:
--------------------------------------------------------------------------------
 1 | # Webpack
 2 | 
 3 | This is a simple example demonstrates how to lazy load Riot.js components [@riotjs/lazy](https://www.npmjs.com/package/@riotjs/lazy).
 4 | 
 5 | ## Run locally
 6 | 
 7 | Download or clone this repo.
 8 | 
 9 | Install packages.
10 | 
11 | ```bash
12 | $ npm install
13 | ```
14 | And then run the server using `webpack-dev-server` or any possible way you know
15 | 
16 | ```bash
17 | $ npm start
18 | ```
19 | 
20 | - Open [http://localhost:3000/](http://localhost:3000/)


--------------------------------------------------------------------------------
/lazy-routes/app/about.riot:
--------------------------------------------------------------------------------
1 | <about>
2 |   <p>My name is {props.name}</p>
3 | </about>


--------------------------------------------------------------------------------
/lazy-routes/app/app.riot:
--------------------------------------------------------------------------------
 1 | <app>
 2 |   <h1>{props.message}</h1>
 3 | 
 4 |   <router>
 5 |     <nav>
 6 |       <ul>
 7 |         <li><a href='/'>Home</a></li>
 8 |         <li><a href='/about'>About</a></li>
 9 |       </ul>
10 |     </nav>
11 |     <route path='/'>
12 |       <home/>
13 |     </route>
14 |     <route path='/about'>
15 |       <about name="Gianluca"/>
16 |     </route>
17 |   </router>
18 | 
19 |   <script>
20 |     import lazy from '@riotjs/lazy'
21 |     import { Router, Route } from '@riotjs/route'
22 |     import Loader from './loader.riot'
23 | 
24 |     export default {
25 |       components: {
26 |         Router,
27 |         Route,
28 |         Home: lazy(Loader, () => import('./home.riot')),
29 |         About: lazy(Loader, () => import('./about.riot')),
30 |       }
31 |     }
32 |   </script>
33 | 
34 |   <style>
35 |     :host {
36 |       font-family: Helvetica Neue, Helvetica, Arial;
37 |     }
38 | 
39 |     ul {
40 |       display: flex;
41 |       list-style: none;
42 |       padding: 0;
43 |       margin: 0;
44 |     }
45 | 
46 |     ul li a {
47 |       padding: 16px;
48 |     }
49 | 
50 |   </style>
51 | </app>


--------------------------------------------------------------------------------
/lazy-routes/app/home.riot:
--------------------------------------------------------------------------------
1 | <home>
2 |   <p>I am the home page</p>
3 | </home>


--------------------------------------------------------------------------------
/lazy-routes/app/loader.riot:
--------------------------------------------------------------------------------
1 | <loader>
2 |   Loading...
3 | </loader>


--------------------------------------------------------------------------------
/lazy-routes/app/main.js:
--------------------------------------------------------------------------------
1 | import '@riotjs/hot-reload'
2 | import {component} from 'riot'
3 | import Random from './app.riot'
4 | 
5 | component(Random)(document.getElementById('app'), {
6 |   message: 'Lazy Routes Application'
7 | })
8 | 


--------------------------------------------------------------------------------
/lazy-routes/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "riot-lazy-routes",
 3 |   "version": "0.0.1",
 4 |   "description": "Lazy routes example",
 5 |   "repository": "riot/examples",
 6 |   "main": "app/main.js",
 7 |   "author": "Gianluca Guarini",
 8 |   "license": "MIT",
 9 |   "scripts": {
10 |     "start": "webpack serve --mode=development --port 3000"
11 |   },
12 |   "keywords": [
13 |     "riot",
14 |     "webpack"
15 |   ],
16 |   "devDependencies": {
17 |     "@riotjs/compiler": "^9.0.6",
18 |     "@riotjs/hot-reload": "^9.0.1",
19 |     "@riotjs/webpack-loader": "^9.0.1",
20 |     "webpack": "^5.89.0",
21 |     "webpack-cli": "^5.1.4",
22 |     "webpack-dev-server": "^4.15.1"
23 |   },
24 |   "dependencies": {
25 |     "@riotjs/lazy": "9.0.0",
26 |     "@riotjs/route": "^9.1.2",
27 |     "riot": "^9.1.1"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/lazy-routes/public/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <meta charset="UTF-8">
 4 |   <title>Riot app</title>
 5 | </head>
 6 | <body>
 7 | 
 8 |   <div id="app"></div>
 9 | 
10 |   <script src="public/bundle.js" charset="utf-8"></script>
11 | </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/lazy-routes/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: './app/main.js',
 6 |   output: {
 7 |     path: path.resolve(__dirname, 'public'),
 8 |     publicPath: '/public/',
 9 |     filename: 'bundle.js'
10 |   },
11 |   resolve: {
12 |     fallback: {
13 |       url: false
14 |     }
15 |   },
16 |   module: {
17 |     rules: [
18 |       {
19 |         test: /\.riot$/,
20 |         exclude: /node_modules/,
21 |         use: [{
22 |           loader: '@riotjs/webpack-loader',
23 |           options: {
24 |             hot: true
25 |           }
26 |         }]
27 |       }
28 |     ]
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/live-ajax-search/README.md:
--------------------------------------------------------------------------------
 1 | # Mixins
 2 | 
 3 | This is a simple example showing how it's simple to create a live ajax search. This script relies on the [The Open Movie Database API](www.omdbapi.com) making search queries based on the movies titles
 4 | 
 5 | ## Have a play
 6 | 
 7 | [Open this example on Plunker](https://riot.js.org/examples/plunker/?app=live-ajax-search)
 8 | 
 9 | ## Run locally
10 | 
11 | Install superstatic if you don't have.
12 | 
13 | ```bash
14 | $ npm install -g superstatic
15 | ```
16 | 
17 | Download or clone this repo, then run the command.
18 | 
19 | ```bash
20 | $ cd to/this/dir
21 | $ superstatic
22 | ```
23 | 
24 | Open the URL shown in your browser.
25 | 


--------------------------------------------------------------------------------
/live-ajax-search/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <link rel="stylesheet" type="text/css" href="style.css">
 5 |   </head>
 6 |   <body>
 7 | 
 8 |     <search></search>
 9 | 
10 |     <script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
11 | 
12 |     <script type="riot" src="./search.riot"></script>
13 | 
14 |     <script type="text/javascript">
15 | 
16 |       // Returns a function, that, as long as it continues to be invoked, will not
17 |       // be triggered. The function will be called after it stops being called for
18 |       // N milliseconds.
19 |       function debounce(fn, wait) {
20 |         let timeout;
21 | 
22 |         return (...args) => {
23 |           clearTimeout(timeout);
24 |           timeout = setTimeout(() => fn(...args), wait);
25 |         };
26 |       }
27 | 
28 |       (async () => {
29 |         await riot.compile()
30 | 
31 |         riot.mount('search')
32 |       })()
33 |     </script>
34 | 
35 |   </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/live-ajax-search/plunker.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "title": "Color Palette",
 3 |   "files": [
 4 |     "index.html",
 5 |     "README.md",
 6 |     "search.riot",
 7 |     "style.css",
 8 |     "puff.svg"
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/live-ajax-search/puff.svg:
--------------------------------------------------------------------------------
 1 | <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
 2 | <svg width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
 3 |     <g fill="none" fill-rule="evenodd" stroke-width="2">
 4 |         <circle cx="22" cy="22" r="1">
 5 |             <animate attributeName="r" begin="0s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite"/>
 6 |             <animate attributeName="stroke-opacity" begin="0s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite"/>
 7 |         </circle>
 8 |         <circle cx="22" cy="22" r="1">
 9 |             <animate attributeName="r" begin="-0.9s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite"/>
10 |             <animate attributeName="stroke-opacity" begin="-0.9s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite"/>
11 |         </circle>
12 |     </g>
13 | </svg>


--------------------------------------------------------------------------------
/live-ajax-search/search.riot:
--------------------------------------------------------------------------------
  1 | <search>
  2 |   <label>
  3 |     <span>Search a movie</span>
  4 |     <input type="input" oninput={ search } placeholder="28 Days Later..">
  5 |   </label>
  6 | 
  7 |   <div if={ state.loading } class="loader">
  8 |     <img src="puff.svg">
  9 |   </div>
 10 | 
 11 |   <p if={ state.error } class="error">{ state.error }</p>
 12 | 
 13 |   <ul if={ state.results }>
 14 |     <li each={ result in state.results }>
 15 |       <a href="http://www.imdb.com/title/{ result.imdbID }" target="_blank">{ result.Title }</a>
 16 |       <span>{ result.Year }</span>
 17 |     </li>
 18 |   </ul>
 19 | 
 20 |   <script>
 21 |     export default {
 22 |       state: {
 23 |         loading: false,
 24 |         lastSearch: null,
 25 |         error: null,
 26 |         results: [],
 27 |       },
 28 |       reset() {
 29 |         this.update({
 30 |           loading: false,
 31 |           error: null,
 32 |           results: [],
 33 |         })
 34 |       },
 35 |       search(e) {
 36 |         const search = e.target.value
 37 | 
 38 |         this.reset()
 39 | 
 40 |         if (this.state.lastSearch !== search) {
 41 |           this.update({ loading: true })
 42 |           this.doApiRequest(search)
 43 |         }
 44 | 
 45 |         this.state.lastSearch = search
 46 |       },
 47 |       doApiRequest(search) {
 48 |         return debounce((search) => {
 49 |           fetch(`https://www.omdbapi.com/?apikey=2fcb2848&s=${search}`)
 50 |             .then((res) => res.json())
 51 |             .then((data) => {
 52 |               if (this.$('input').value) {
 53 |                 this.update({
 54 |                   error: data.Error,
 55 |                   results: data.Search,
 56 |                 })
 57 |               }
 58 | 
 59 |               this.update({ loading: false })
 60 |             })
 61 |         }, 500)(search)
 62 |       },
 63 |     }
 64 |   </script>
 65 | 
 66 |   <style>
 67 |     :host {
 68 |       position: absolute;
 69 |       top: 2rem;
 70 |       left: 50%;
 71 |       transform: translate(-50%, 0);
 72 |     }
 73 |     .loader {
 74 |       position: absolute;
 75 |       top: 50%;
 76 |       left: 50%;
 77 |       transform: translate(-50%, -50%);
 78 |     }
 79 |     .loader {
 80 |       margin: 6rem 0 0;
 81 |     }
 82 |     .error {
 83 |       color: #FFFAAA;
 84 |       margin: 1rem 0;
 85 |     }
 86 |     label {
 87 |       align-items: center;
 88 |       display: flex;
 89 |       flex-direction: column;
 90 |       font-size: 1.6rem;
 91 |     }
 92 |     label span {
 93 |       text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
 94 |     }
 95 |     input {
 96 |       margin: 1rem 0 0;
 97 |       font-size: 1.6rem;
 98 |       font-weight: 300;
 99 |       padding: 0.8rem 1rem;
100 |       color: white;
101 |       border: 1px solid rgba(255, 255, 255, 0.05);
102 |       background: rgba(255, 255, 255, 0.05);
103 |       transition: all 0.3s;
104 |       box-shadow: 1px 1px 2px rgba(0,0,0, 0.3);
105 |       -moz-appearance:none;
106 |       -webkit-appearance:none;
107 |       outline: none;
108 |     }
109 |     input:focus {
110 |       border: 1px solid transparent;
111 |       background: rgba(255, 255, 255, 0.08);
112 |     }
113 |     ul {
114 |       padding: 0;
115 |       margin: 1rem 0 2rem;
116 |     }
117 |     ul li {
118 |       padding: 0.6rem 1rem;
119 |       margin: 1px 0;
120 |       line-height: 1.4rem;
121 |       display: flex;
122 |       justify-content: space-between;
123 |       align-items: center;
124 |       align-content: space-between;
125 |       text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
126 |       background: rgba(255, 255, 255, 0.08);
127 |       box-shadow: 0 0 2px rgba(0,0,0, 0.3);
128 |       box-sizing: border-box;
129 |     }
130 |     ul li:hover,
131 |     ul li:active,
132 |     ul li:focus {
133 |       background: rgba(255, 255, 255, 0.1);
134 |     }
135 |     ul li a {
136 |       margin: 0 0.6rem 0 0;
137 |       text-decoration: none;
138 |       color: white;
139 |     }
140 |     ul li span {
141 |       opacity: 0.5;
142 |     }
143 |   </style>
144 | </search>
145 | 
146 | 


--------------------------------------------------------------------------------
/live-ajax-search/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: 'Helvetica Neue', Helvetica, Arial;
 4 |   font-weight: 300;
 5 |   background-size: cover;
 6 |   background-attachment: fixed;
 7 |   background-image: -webkit-radial-gradient(ellipse farthest-corner at top, #661141, #000000);
 8 |   background-image: radial-gradient(ellipse farthest-corner at top, #661141, #000000);
 9 |   color: white;
10 | }
11 | 


--------------------------------------------------------------------------------
/live-editor/README.md:
--------------------------------------------------------------------------------
 1 | # Live Editor
 2 | 
 3 | This is a live editor for Riot tag.
 4 | 
 5 | ## Have a play
 6 | 
 7 | [Open this example on Plunker](https://riot.js.org/examples/plunker/?app=live-editor)
 8 | 
 9 | ## Run locally
10 | 
11 | Install superstatic if you don't have.
12 | 
13 | ```bash
14 | $ npm install -g superstatic
15 | ```
16 | 
17 | Download or clone this repo, then run the command.
18 | 
19 | ```bash
20 | $ cd to/this/dir
21 | $ superstatic
22 | ```
23 | 
24 | Open the URL shown in your browser.
25 | 


--------------------------------------------------------------------------------
/live-editor/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 |   <head>
 5 |     <title>Riot live editor</title>
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 | 
10 |   <body>
11 |     <live-editor src="sample.riot?"></live-editor>
12 | 
13 |     <!-- riot tags -->
14 |     <script type="riot" src="live-editor.riot"></script>
15 | 
16 |     <!-- scripts we need -->
17 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/ace.js"></script>
18 |     <script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
19 |     <script>
20 |       riot.compile().then(() => {
21 |         riot.mount('live-editor')
22 |       })
23 |     </script>
24 |   </body>
25 | 
26 | </html>
27 | 


--------------------------------------------------------------------------------
/live-editor/live-editor.riot:
--------------------------------------------------------------------------------
 1 | <live-editor>
 2 | 
 3 |   <!-- the empty line causes editor start from second line (on purpose) -->
 4 |   <section></section>
 5 | 
 6 |   <iframe src="stage.html" scrolling="no"></iframe>
 7 | 
 8 |   <script>
 9 |     function get(url, fn) {
10 |       var req = new XMLHttpRequest()
11 |       req.onreadystatechange = function() {
12 |         if (req.readyState == 4 && (req.status == 200 || (!req.status && req.responseText.length)))
13 |           fn(req.responseText)
14 |       }
15 |       req.open('GET', url, true)
16 |       req.send('')
17 |     }
18 | 
19 |     export default {
20 |       onMounted(props) {
21 |         const editor = ace.edit(this.$('section'))
22 |         const doc = editor.getSession()
23 | 
24 |         editor.setTheme('ace/theme/monokai')
25 |         doc.setMode('ace/mode/html')
26 |         doc.setTabSize(2)
27 |         editor.session.setUseWorker(false)
28 | 
29 |         doc.on('change', () => { this.reloadIframe(doc.getValue()) })
30 | 
31 |         if (window.location.hash)
32 |           doc.setValue(decodeURIComponent(window.location.hash.substring(1)))
33 |         else
34 |           get(props.src, function(code) { doc.setValue(code) })
35 |       },
36 |       reloadIframe(code) {
37 |         const iframe = this.$('iframe')
38 |         // reload the iframe
39 |         iframe.src = iframe.src
40 |         iframe.onload = function() {
41 |           window.location.hash = encodeURIComponent(code)
42 |           iframe.contentWindow.postMessage(code, '*')
43 |         }
44 |       }
45 |     }
46 |   </script>
47 | 
48 |   <style>
49 |     :host {
50 |       display: block;
51 |       height: 100vh;
52 |       overflow: hidden;
53 |     }
54 | 
55 |     iframe {
56 |       display: inline-block;
57 |       vertical-align: top;
58 |       padding-left: 1em;
59 |       color: #333;
60 |       border: none;
61 |       height: 100vh;
62 |     }
63 | 
64 |     section {
65 |       height: 150px;
66 |     }
67 | 
68 |     @media (min-width: 500px) {
69 |       iframe {
70 |         width: 45%;
71 |       }
72 |       section {
73 |         height: 100vh;
74 |         display:inline-block;
75 |         width: 50%;
76 |       }
77 |     }
78 |   </style>
79 | 
80 | </live-editor>
81 | 


--------------------------------------------------------------------------------
/live-editor/plunker.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "title": "Live Editor",
 3 |   "files": [
 4 |     "index.html",
 5 |     "README.md",
 6 |     "live-editor.riot",
 7 |     "stage.html",
 8 |     "sample.riot"
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/live-editor/sample.riot:
--------------------------------------------------------------------------------
 1 | <sample>
 2 |   <h3>{ message }</h3>
 3 |   <ul>
 4 |     <li each={ tech in techs }>
 5 |       { tech.name }
 6 |     </li>
 7 |   </ul>
 8 | 
 9 |   <script>
10 |     export default {
11 |       message: 'Hello, Riot!',
12 |       techs: [
13 |         { name: 'HTML' },
14 |         { name: 'JavaScript' },
15 |         { name: 'CSS' }
16 |       ]
17 |     }
18 | 
19 |   </script>
20 | 
21 |   <style>
22 |     :host { font-size: 2rem }
23 |     h3 { color: #444 }
24 |     ul { color: #999 }
25 |   </style>
26 | </sample>
27 | 


--------------------------------------------------------------------------------
/live-editor/stage.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 |   <head>
 5 |     <title>Riot live editor</title>
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 | 
10 |   <body>
11 |     <sample></sample>
12 |     <!-- scripts we need -->
13 |     <script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
14 |     <script>
15 |       window.addEventListener('message', function(e) {
16 |         const { code } = riot.compileFromString(e.data)
17 |         riot.inject(code, 'sample', './sample.riot')
18 |         riot.mount('sample')
19 |       }, false)
20 |     </script>
21 |   </body>
22 | 
23 | </html>
24 | 


--------------------------------------------------------------------------------
/live-editor/style.css:
--------------------------------------------------------------------------------
1 | body {
2 |   margin: 0;
3 |   font-family: "myriad pro", "Tahoma", "sans-serif";
4 | }
5 | 


--------------------------------------------------------------------------------
/modal/README.md:
--------------------------------------------------------------------------------
1 | # Riot Modal
2 | 
3 | This a simple modal made with riot and [Animate.css](https://daneden.github.io/animate.css/).  
4 | This demo also demonstrates the use of [slots](https://riot.js.org/documentation/#slots).
5 | 
6 | [Demo](https://riot.js.org/examples/plunker/?app=modal)
7 | 
8 | 


--------------------------------------------------------------------------------
/modal/cool-modal.riot:
--------------------------------------------------------------------------------
 1 | <!-- A "concrete" modal which uses the layout -->
 2 | <cool-modal>
 3 |   <modal state={ state.modal } title="My Cool Modal" if={ state.modal.visible }>
 4 |     <p>{ state.modal.message }</p>
 5 |     <div class="btn-group">
 6 |       <button onclick={ sayHello }>Say hello!</button>
 7 |       <button onclick={ closeModal }>Close modal</button>
 8 |     </div>
 9 |   </modal>
10 | 
11 |   <script>
12 |     export default {
13 |       state: {
14 |         modal: observable({
15 |           visible: true,
16 |           message: 'Goodbye',
17 |         }),
18 |       },
19 |       sayHello() {
20 |         this.state.modal.message = 'Hello'
21 |         this.update()
22 |       },
23 |       closeModal() {
24 |         this.state.modal.trigger('close', () => {
25 |           this.state.modal.visible = false
26 |           this.update()
27 |         })
28 |       }
29 |     }
30 |   </script>
31 | 
32 |   <style>
33 |     button {
34 |       cursor: pointer;
35 |       background: white;
36 |       border: 1px solid #2e6eb5;
37 |       padding: 8px;
38 |     }
39 | 
40 |     .btn-group {
41 |       display: flex;
42 |       gap: 12px;
43 |     }
44 |   </style>
45 | </cool-modal>
46 | 


--------------------------------------------------------------------------------
/modal/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
 5 |     <style>
 6 |       body {
 7 |         overflow: hidden;
 8 |         background: #d9ebff;
 9 |       }
10 |     </style>
11 |   </head>
12 |   <body>
13 | 
14 |     <cool-modal></cool-modal>
15 | 
16 |     <script type="text/javascript" src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
17 |     <script src="https://unpkg.com/@riotjs/observable@4.1.1/dist/observable.js"></script>
18 |     <script type="riot" src="./modal.riot"></script>
19 |     <script type="riot" src="./cool-modal.riot"></script>
20 | 
21 |     <script type="text/javascript">
22 |       riot.compile()
23 |         .then(() => {
24 |           riot.mount('cool-modal')
25 |         })
26 |     </script>
27 | 
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/modal/modal.riot:
--------------------------------------------------------------------------------
 1 | <modal>
 2 |   <div class="modal animated faster { state.animation }">
 3 |     <h2 class="modal-title">{ props.title }</h2>
 4 | 
 5 |     <div class="modal-body">
 6 |       <slot />
 7 |     </div>
 8 |   </div>
 9 | 
10 |   <script>
11 |     export default {
12 |       state: {
13 |         animation: '',
14 |       },
15 |       onMounted() {
16 |         this.update({ animation: 'pulse' })
17 | 
18 |         this.props.state.on('close', (callback) => {
19 |           this.update({ animation: 'zoomOut' })
20 | 
21 |           setTimeout(() => {
22 |             callback()
23 |           }, 500)
24 |         })
25 |       },
26 |     }
27 |   </script>
28 | 
29 | 
30 |   <style>
31 |     :host {
32 |       font-family: Helvetica Neue, Helvetica, Arial, serif;
33 |       position: absolute;
34 |       display: block;
35 |       top: 50%;
36 |       left: 50%;
37 |       transform: translate(-50%, -50%);
38 |     }
39 | 
40 |     h2 {
41 |       margin: 0;
42 |       font-size: 1.2rem;
43 |     }
44 | 
45 |     .modal {
46 |       padding: 24px;
47 |       background: #e3f5ff;
48 |       border: 4px solid #ffffff;
49 |       border-radius: 4px;
50 |       box-shadow: 0 0 4px rgba(0 0 0 / 0.2);
51 |     }
52 |   </style>
53 | </modal>
54 | 


--------------------------------------------------------------------------------
/modal/plunker.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "title": "Riot Bug Reporter",
 3 |   "files": [
 4 |     "index.html",
 5 |     "modal.riot",
 6 |     "cool-modal.riot",
 7 |     "README.md"
 8 |   ]
 9 | }
10 | 


--------------------------------------------------------------------------------
/plunker/README.md:
--------------------------------------------------------------------------------
 1 | # Plunker
 2 | 
 3 | This is a tool to send code to Plunker.
 4 | 
 5 | ## Use
 6 | 
 7 | Open the url like this:
 8 | 
 9 | ```
10 | https://riot.js.org/examples/plunker/?app=todo-app
11 | ```
12 | 
13 | To work with this tool, follow the example folder. The `plunker.json` file
14 | looks like this:
15 | 
16 | ```json
17 | {
18 |   "title": "Todo App",
19 |   "files": [
20 |     "index.html",
21 |     "README.md",
22 |     "todo.css",
23 |     "todo.tag"
24 |   ]
25 | }
26 | ```
27 | 
28 | ## Run locally
29 | 
30 | Install superstatic if you don't already have it.
31 | 
32 | ```bash
33 | $ npm install -g superstatic
34 | ```
35 | 
36 | Download or clone this repo, then run the command.
37 | 
38 | ```bash
39 | $ cd to/parent/dir
40 | $ superstatic
41 | ```
42 | 
43 | Open the URL shown in your browser.
44 | 


--------------------------------------------------------------------------------
/plunker/app.riot:
--------------------------------------------------------------------------------
 1 | <app>
 2 |   <p>Now opening Plunker...</p>
 3 | 
 4 |   <form ref="form" method="post" action="https://plnkr.co/edit/?p=preview">
 5 |     <input type="hidden" name="description" value={ state.manifest.title || 'Riot Example' }>
 6 |     <input type="hidden" name="private" value="true">
 7 |     <input type="hidden" name="tags[0]" value="riotjs">
 8 |     <input type="hidden" name="tags[1]" value="example">
 9 |     <input each={ file in state.files }
10 |       type="hidden"
11 |       name="files[{ file.name }]"
12 |       value={ file.content }>
13 |   </form>
14 | 
15 |   <script>
16 |     var query = location.search
17 |       .replace(/^\?/, '')
18 |       .split('&').reduce(function(obj, current){
19 |         var arr = current.split('=')
20 |         if (arr[0]) obj[arr[0]] = arr[1]
21 |         return obj
22 |       }, {})
23 | 
24 | 
25 |     export default {
26 |       state: {
27 |         files: [],
28 |         manifest: {},
29 |       },
30 |       onMounted() {
31 |         fetch('../' + query.app + '/plunker.json')
32 |           .then(res => res.json())
33 |           .then(manifest => {
34 |             this.update({ manifest })
35 |             return Promise.all(manifest.files.map(function(name) {
36 |               return fetch('../' + query.app + '/' + name)
37 |                 .then(res => res.text())
38 |                 .then(function(content){
39 |                   return { name: name, content }
40 |                 })
41 |             }))
42 |           })
43 |           .then(files => {
44 |             this.update({ files: files })
45 |             this.$('form').submit()
46 |           })
47 |       }
48 |     }
49 |   </script>
50 | 
51 |   <style>
52 |     :host {
53 |       display: block;
54 |       font-family: sans-serif;
55 |       margin: 0;
56 |       padding: 1em;
57 |       text-align: center;
58 |       color: #ccc;
59 |     }
60 |     form {
61 |       display: none;
62 |     }
63 |   </style>
64 | </app>
65 | 


--------------------------------------------------------------------------------
/plunker/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 |   <head>
 5 |     <title>Opening Plunker...</title>
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   </head>
 8 | 
 9 |   <body>
10 |     <app></app>
11 | 
12 |     <!-- riot tags -->
13 |     <script type="riot" src="app.riot"></script>
14 | 
15 |     <!-- scripts we need -->
16 |     <script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
17 | 
18 |     <!-- mount this app -->
19 |     <script>
20 |       riot.compile().then(() => {
21 |         riot.mount('app')
22 |       })
23 |     </script>
24 |   </body>
25 | 
26 | </html>
27 | 


--------------------------------------------------------------------------------
/riot-config/.gitignore:
--------------------------------------------------------------------------------
1 | dist/
2 | 


--------------------------------------------------------------------------------
/riot-config/README.md:
--------------------------------------------------------------------------------
 1 | # How to use riot.config.js
 2 | 
 3 | This is an example for showing how to use the `@riotjs/cli` together with a `riot.config.js` file.
 4 | 
 5 | ## Run locally
 6 | 
 7 | Download or clone this repo, then run the command.
 8 | 
 9 | ```bash
10 | $ git clone https://github.com/riot/examples
11 | $ cd example/riot-config
12 | $ npm install
13 | $ npm run build
14 | ```
15 | 
16 | Then `dist` directory will be made in your project.
17 | 
18 | *Note*  if you installed `riot` globally in your environment. You can use the command bellow instead of `$ npm run build`:
19 | 
20 | ```bash
21 | $ riot --config riot.config.js src/main.js dist/main.js
22 | ```
23 | 
24 | This says "compile `tag/*` files into `dist/` directory with the config file `riot.config.js`".
25 | 
26 | ## Watch
27 | 
28 | To watch your tag file and check it in your browser, run the command below:
29 | 
30 | ```bash
31 | $ npm start
32 | ```
33 | 


--------------------------------------------------------------------------------
/riot-config/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 |   <head>
 5 |     <title>Riot with next standards</title>
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <script type="importmap">
 8 |     {
 9 |       "imports": {
10 |         "riot": "https://unpkg.com/riot@9/esm/riot.js"
11 |       }
12 |     }
13 |     </script>
14 | 
15 |   </head>
16 | 
17 |   <body>
18 |     <div id="root"></div>
19 |     <script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
20 |     <script type="module" src="dist/main.js"></script>
21 |   </body>
22 | 
23 | </html>
24 | 


--------------------------------------------------------------------------------
/riot-config/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "riot-config-example",
 3 |   "version": "1.0.0",
 4 |   "description": "Riot with riot.config.js",
 5 |   "type": "module",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "start": "npm run watch & npm run server",
 9 |     "build": "npx riot --config riot.config.js src/main.js",
10 |     "watch": "npx riot --config riot.config.js -w src/main.js",
11 |     "server": "serve"
12 |   },
13 |   "devDependencies": {
14 |     "@riotjs/cli": "^9.0.5",
15 |     "@riotjs/compiler": "^9.0.6",
16 |     "serve": "^14.2.1"
17 |   },
18 |   "license": "MIT"
19 | }
20 | 


--------------------------------------------------------------------------------
/riot-config/riot.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   sourcemap: 'inline',
3 |   output: 'dist/main.js',
4 |   format: 'esm'
5 | }
6 | 


--------------------------------------------------------------------------------
/riot-config/src/app.riot:
--------------------------------------------------------------------------------
 1 | <app>
 2 |   <h1>{ title }</h1>
 3 |   <p>This example shows how to use the riot.config.js:</p>
 4 | 
 5 |   <script>
 6 |     const name = 'there'
 7 | 
 8 |     export default {
 9 |       title: `Hello ${ name }!`
10 |     }
11 |   </script>
12 | 
13 |   <style>
14 |     :host {
15 |       --riot-color: #f04;
16 |     }
17 | 
18 |     h1 {
19 |       color: var(--riot-color);
20 |       border-bottom: 1px solid var(--riot-color);
21 |     }
22 |   </style>
23 | </app>
24 | 


--------------------------------------------------------------------------------
/riot-config/src/main.js:
--------------------------------------------------------------------------------
1 | import {component} from 'riot'
2 | import App from './app.riot'
3 | 
4 | component(App)(document.getElementById('root'))
5 | 


--------------------------------------------------------------------------------
/router-complex/README.md:
--------------------------------------------------------------------------------
 1 | # Router - Complex example
 2 | 
 3 | This is a relatively complex example for showing how to use Riot Router to handle the URL.
 4 | 
 5 | ## Have a play
 6 | 
 7 | [Open this example on Plunker](https://riot.js.org/examples/plunker/?app=router-complex)
 8 | 
 9 | ## Run locally
10 | 
11 | Install superstatic if you don't have.
12 | 
13 | ```bash
14 | $ npm install -g superstatic
15 | ```
16 | 
17 | Download or clone this repo, then run the command.
18 | 
19 | ```bash
20 | $ cd to/this/dir
21 | $ superstatic
22 | ```
23 | 
24 | Open the URL shown in your browser.
25 | 


--------------------------------------------------------------------------------
/router-complex/app-help.riot:
--------------------------------------------------------------------------------
 1 | <app-help>
 2 |   <route path="#/:id/(.*)?">
 3 |     <h2>Help</h2>
 4 |     <p>
 5 |       { getHelpText(route) }
 6 |     </p>
 7 |   </route>
 8 |   <script>
 9 |     export default {
10 |       state: {
11 |         data: {
12 |           first: "This is the help for the first page.",
13 |           second: "This is the help for the second page."
14 |         }
15 |       },
16 |       getHelpText(route) {
17 |         const {id} = route.params
18 | 
19 |         return this.state.data[id] || 'Help not found.'
20 |       }
21 |     }
22 |   </script>
23 | 
24 |   <style>
25 |     :host {
26 |       position: fixed;
27 |       top: auto;
28 |       right: 0;
29 |       bottom: 0;
30 |       left: 0;
31 |       width: 100%;
32 |       height: 130px;
33 |       box-sizing: border-box;
34 |       font-family: sans-serif;
35 |       margin: 0;
36 |       padding: 1em;
37 |       text-align: center;
38 |       color: #666;
39 |       background: #f7f7f7;
40 |     }
41 |     @media (min-width: 480px) {
42 |       :host {
43 |         top: 0;
44 |         right: 0;
45 |         bottom: auto;
46 |         left: auto;
47 |         width: 200px;
48 |         height: 100%;
49 |       }
50 |     }
51 |   </style>
52 | </app-help>
53 | 


--------------------------------------------------------------------------------
/router-complex/app-main.riot:
--------------------------------------------------------------------------------
 1 | <app-main>
 2 |   <article>
 3 |     <!-- subroutes blocks -->
 4 |     <route path="#/first(.*)">
 5 |       <ul>
 6 |         <li each={ item in state.data }>
 7 |           <a href="#/first/{ item.id }">{ item.title }</a>
 8 |         </li>
 9 |       </ul>
10 |     </route>
11 | 
12 |     <main>
13 |       <!-- main content -->
14 |       <route each={ page in state.mainPages } path={page.path}>
15 |         <h1>{ page.title }</h1>
16 |         <p>{ page.body }</p>
17 |       </route>
18 | 
19 |       <!-- subroutes contents -->
20 |       <route path="#/first/:id">
21 |         <h1>{getSubPageDataById(route).title}</h1>
22 |         <p>{getSubPageDataById(route).body}</p>
23 |       </route>
24 |     </main>
25 |   </article>
26 | 
27 |   <script>
28 |     export default {
29 |       state: {
30 |         data: [
31 |           { id: 'apple', title: 'Apple', body: "The world biggest fruit company." },
32 |           { id: 'orange', title: 'Orange', body: "I don't have the word for it..." }
33 |         ],
34 |         mainPages: [{
35 |           path: '(#)?',
36 |           title: "Home of the great app",
37 |           body: "Timeline or dashboard as you like!"
38 |         }, {
39 |           path: '#/first',
40 |           title: "First feature of your app",
41 |           body: "It could be a list of something for example."
42 |         },{
43 |           path: '#/second',
44 |           title: "Second feature of your app",
45 |           body: "It could be a config page for example."
46 |         }]
47 |       },
48 |       getSubPageDataById(route) {
49 |         const {id} = route.params
50 |         return this.state.data.find(data => data.id === id)
51 |       }
52 |     }
53 |   </script>
54 | 
55 |   <style>
56 |     :host {
57 |       display: block;
58 |       font-family: sans-serif;
59 |       margin-right: 0;
60 |       margin-bottom: 130px;
61 |       margin-left: 50px;
62 |       padding: 1em;
63 |       text-align: center;
64 |       color: #666;
65 |     }
66 |     ul {
67 |       padding: 10px;
68 |       list-style: none;
69 |     }
70 |     li {
71 |       display: inline-block;
72 |       margin: 5px;
73 |     }
74 |     a {
75 |       display: block;
76 |       background: #f7f7f7;
77 |       text-decoration: none;
78 |       width: 150px;
79 |       height: 150px;
80 |       line-height: 150px;
81 |       color: inherit;
82 |     }
83 |     a:hover {
84 |       background: #eee;
85 |       color: #000;
86 |     }
87 |     @media (min-width: 480px) {
88 |       :scope {
89 |         margin-right: 200px;
90 |         margin-bottom: 0;
91 |       }
92 |     }
93 |   </style>
94 | 
95 | </app-main>
96 | 


--------------------------------------------------------------------------------
/router-complex/app-navi.riot:
--------------------------------------------------------------------------------
 1 | <app-navi>
 2 |   <route path="(.*)">
 3 |     <a each={ link in state.links }
 4 |       href="{ link.url }"
 5 |       class={ isLinkSelected(link, route) ? 'selected' : '' }>
 6 |       { link.name }
 7 |     </a>
 8 |   </route>
 9 | 
10 |   <script>
11 |     export default {
12 |       state: {
13 |         links: [
14 |           { name: "H", url: "#" },
15 |           { name: "F", url: "#/first" },
16 |           { name: "S", url: "#/second" }
17 |         ]
18 |       },
19 |       isLinkSelected(link, route) {
20 |         const isHome = !route.hash || route.hash === '#'
21 | 
22 |         if (link.url === '#') {
23 |           return isHome
24 |         }
25 | 
26 |         return !isHome && route.hash.includes(link.url)
27 |       }
28 |     }
29 |   </script>
30 | 
31 |   <style>
32 |     :host {
33 |       position: fixed;
34 |       top: 0;
35 |       left: 0;
36 |       height: 100%;
37 |       box-sizing: border-box;
38 |       font-family: sans-serif;
39 |       text-align: center;
40 |       color: #666;
41 |       background: #333;
42 |       width: 50px;
43 |       transition: width .2s;
44 |     }
45 |     :host:hover {
46 |       width: 60px;
47 |     }
48 |     a {
49 |       display: block;
50 |       box-sizing: border-box;
51 |       width: 100%;
52 |       height: 50px;
53 |       line-height: 50px;
54 |       padding: 0 .8em;
55 |       color: white;
56 |       text-decoration: none;
57 |       background: #444;
58 |     }
59 |     a:hover {
60 |       background: #666;
61 |     }
62 |     a.selected {
63 |       background: teal;
64 |     }
65 |   </style>
66 | 
67 | </app-navi>
68 | 


--------------------------------------------------------------------------------
/router-complex/app.riot:
--------------------------------------------------------------------------------
 1 | <app>
 2 |   <router base={base}>
 3 |     <app-main></app-main>
 4 |     <app-navi></app-navi>
 5 |     <app-help></app-help>
 6 |   </router>
 7 |   <script>
 8 |     const loc = window.location
 9 | 
10 |     export default {
11 |       base: `${loc.pathname}/`
12 |     }
13 |   </script>
14 | </app>
15 | 


--------------------------------------------------------------------------------
/router-complex/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 |   <head>
 5 |     <title>Riot Router: Complex example</title>
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   </head>
 8 | 
 9 |   <body>
10 |     <app></app>
11 |     <!-- riot tags -->
12 |     <script type="riot" src="app-main.riot"></script>
13 |     <script type="riot" src="app-navi.riot"></script>
14 |     <script type="riot" src="app-help.riot"></script>
15 |     <script type="riot" src="app.riot"></script>
16 | 
17 |     <!-- scripts we need -->
18 |     <script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
19 |     <script src="https://unpkg.com/@riotjs/route/index.umd.js"></script>
20 | 
21 |     <!-- mount this app -->
22 |     <script>
23 |       riot.register('router', route.Router)
24 |       riot.register('route', route.Route)
25 | 
26 |       riot.compile().then(function() {
27 |         riot.mount('app')
28 |       })
29 |     </script>
30 | 
31 |     <style>
32 |       body { margin: 0 }
33 |     </style>
34 |   </body>
35 | 
36 | </html>
37 | 


--------------------------------------------------------------------------------
/router-complex/plunker.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "title": "Router - Complex example",
 3 |   "files": [
 4 |     "index.html",
 5 |     "README.md",
 6 |     "app.riot",
 7 |     "app-main.riot",
 8 |     "app-navi.riot",
 9 |     "app-help.riot"
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/router-history-api/README.md:
--------------------------------------------------------------------------------
 1 | # Router - History API
 2 | 
 3 | This is basically equivalent to [Page Switcher example](../router-page-switcher/), but it uses HTML5 history API.
 4 | 
 5 | ## Set up your server
 6 | 
 7 | You need to set up your server ([Express](http://expressjs.com/) or anything) to redirect all to `index.html`. You can also try it with `superstatic`. Just write [superstatic.json](superstatic.json) like this.
 8 | 
 9 | ## Have a play
10 | 
11 | This demo is not available on Plunker.
12 | 
13 | ## Run locally
14 | 
15 | Install superstatic if you don't have.
16 | 
17 | ```bash
18 | $ npm install -g superstatic
19 | ```
20 | 
21 | Download or clone this repo, then run the command.
22 | 
23 | ```bash
24 | $ cd to/this/dir
25 | $ superstatic
26 | ```
27 | 
28 | Open the URL shown in your browser.
29 | 


--------------------------------------------------------------------------------
/router-history-api/app.riot:
--------------------------------------------------------------------------------
 1 | <app>
 2 |   <router>
 3 |     <nav>
 4 |       <a each={ page in state.pages } href="/{ page.id }">
 5 |         { page.title }
 6 |       </a>
 7 |     </nav>
 8 | 
 9 |     <route path="/:id?">
10 |       <h1>{getPageById(route).title}</h1>
11 |       <p>{getPageById(route).body}</p>
12 |     </route>
13 |   </router>
14 |   <script>
15 |     const pages = [
16 |       { id: "", title: "Home", body: "Click the link above." },
17 |       { id: "first", title: "First", body: "This is the first page." },
18 |       { id: "second", title: "Second", body: "This is the second page." }
19 |     ]
20 | 
21 |     export default {
22 |       components: {
23 |         router: route.Router,
24 |         route: route.Route,
25 |       },
26 |       state: {
27 |         pages
28 |       },
29 |       getPageById(route) {
30 |         const {id} = route.params
31 |         return pages.find(page => page.id === id) || pages[0]
32 |       }
33 |     }
34 |   </script>
35 | 
36 |   <style>
37 |     :host {
38 |       display: block;
39 |       font-family: sans-serif;
40 |       margin: 0;
41 |       padding: 1em;
42 |       text-align: center;
43 |       color: #666;
44 |     }
45 |     nav {
46 |       display: block;
47 |       border-bottom: 1px solid #666;
48 |       padding: 0 0 1em;
49 |     }
50 |     nav > a {
51 |       display: inline-block;
52 |       padding: 0 .8em;
53 |     }
54 |     nav > a:not(:first-child) {
55 |       border-left: 1px solid #eee;
56 |     }
57 |   </style>
58 | </app>
59 | 


--------------------------------------------------------------------------------
/router-history-api/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 |   <head>
 5 |     <title>Riot Router Example: History API</title>
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   </head>
 8 | 
 9 |   <body>
10 |     <app></app>
11 | 
12 |     <!-- riot tags -->
13 |     <script type="riot" src="app.riot"></script>
14 | 
15 |     <!-- scripts we need -->
16 |     <script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
17 |     <script src="https://unpkg.com/@riotjs/route/index.umd.js"></script>
18 | 
19 |     <!-- mount this app -->
20 |     <script>
21 | 
22 |     riot.compile().then(function() {
23 |       riot.mount('app')
24 |     })
25 | 
26 |     </script>
27 |   </body>
28 | 
29 | </html>
30 | 


--------------------------------------------------------------------------------
/router-history-api/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "router-history-api",
3 |   "version": "1.0.0",
4 |   "description": "Riot example",
5 |   "private": true,
6 |   "license": "MIT"
7 | }
8 | 


--------------------------------------------------------------------------------
/router-history-api/plunker.json:
--------------------------------------------------------------------------------
1 | {
2 |   "title": "Router - Page switcher",
3 |   "files": [
4 |     "index.html",
5 |     "README.md",
6 |     "app.riot"
7 |   ]
8 | }
9 | 


--------------------------------------------------------------------------------
/router-history-api/superstatic.json:
--------------------------------------------------------------------------------
1 | {
2 |   "rewrites": [
3 |     { "source": "**/*", "destination": "index.html" }
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/router-page-switcher/README.md:
--------------------------------------------------------------------------------
 1 | # Router - Page switcher
 2 | 
 3 | This is a simple example for showing how to use Riot Router to handle the URL.
 4 | 
 5 | ## Have a play
 6 | 
 7 | [Open this example on Plunker](https://riot.js.org/examples/plunker/?app=router-page-switcher)
 8 | 
 9 | ## Run locally
10 | 
11 | Install superstatic if you don't have.
12 | 
13 | ```bash
14 | $ npm install -g superstatic
15 | ```
16 | 
17 | Download or clone this repo, then run the command.
18 | 
19 | ```bash
20 | $ cd to/this/dir
21 | $ superstatic
22 | ```
23 | 
24 | Open the URL shown in your browser.
25 | 


--------------------------------------------------------------------------------
/router-page-switcher/app.riot:
--------------------------------------------------------------------------------
 1 | <app>
 2 |   <router initial-route={state.initialRoute} base={state.base}>
 3 |     <nav>
 4 |       <a each={ page in state.pages } href="/#{ page.id }">
 5 |         { page.title }
 6 |       </a>
 7 |     </nav>
 8 | 
 9 |     <route path=":id?">
10 |       <h1>{getPageById(route).title}</h1>
11 |       <p>{getPageById(route).body}</p>
12 |     </route>
13 |   </router>
14 |   <script>
15 |     const pages = [
16 |       { id: "home", title: "Home", body: "Click the link above." },
17 |       { id: "first", title: "First", body: "This is the first page." },
18 |       { id: "second", title: "Second", body: "This is the second page." }
19 |     ]
20 | 
21 |     const initialRoute = `${window.location.hash ? window.location.hash.replace('#', '') : 'home'}`
22 | 
23 |     export default {
24 |       components: {
25 |         router: route.Router,
26 |         route: route.Route,
27 |       },
28 |       state: {
29 |         pages,
30 |         initialRoute,
31 |         base: `/#`
32 |       },
33 |       getPageById(route) {
34 |         const {id} = route.params
35 |         return pages.find(page => page.id === id) || pages[0]
36 |       }
37 |     }
38 |   </script>
39 | 
40 |   <style>
41 |     :host {
42 |       display: block;
43 |       font-family: sans-serif;
44 |       margin: 0;
45 |       padding: 1em;
46 |       text-align: center;
47 |       color: #666;
48 |     }
49 |     nav {
50 |       display: block;
51 |       border-bottom: 1px solid #666;
52 |       padding: 0 0 1em;
53 |     }
54 |     nav > a {
55 |       display: inline-block;
56 |       padding: 0 .8em;
57 |     }
58 |     nav > a:not(:first-child) {
59 |       border-left: 1px solid #eee;
60 |     }
61 |   </style>
62 | </app>
63 | 


--------------------------------------------------------------------------------
/router-page-switcher/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 |   <head>
 5 |     <title>Riot Router Example: Page Switching</title>
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   </head>
 8 | 
 9 |   <body>
10 |     <app></app>
11 | 
12 |     <!-- riot tags -->
13 |     <script type="riot" src="app.riot"></script>
14 | 
15 |     <!-- scripts we need -->
16 |     <script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
17 |     <script src="https://unpkg.com/@riotjs/route/index.umd.js"></script>
18 | 
19 |     <!-- mount this app -->
20 |     <script>
21 | 
22 |     riot.compile().then(function() {
23 |       riot.mount('app')
24 |     })
25 | 
26 |     </script>
27 |   </body>
28 | 
29 | </html>
30 | 


--------------------------------------------------------------------------------
/router-page-switcher/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "router-page-switcher",
3 |   "version": "1.1.0",
4 |   "description": "Riot example",
5 |   "private": true,
6 |   "license": "MIT"
7 | }
8 | 


--------------------------------------------------------------------------------
/router-page-switcher/plunker.json:
--------------------------------------------------------------------------------
1 | {
2 |   "title": "Router - Page switcher",
3 |   "files": [
4 |     "index.html",
5 |     "README.md",
6 |     "app.riot"
7 |   ]
8 | }
9 | 


--------------------------------------------------------------------------------
/ssr/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     [
 4 |       "@babel/preset-env",
 5 |       {
 6 |         "modules": false,
 7 |         "targets": [
 8 |           "last 2 versions"
 9 |         ]
10 |       }
11 |     ]
12 |   ]
13 | }
14 | 


--------------------------------------------------------------------------------
/ssr/.gitignore:
--------------------------------------------------------------------------------
1 | public/bundle.js
2 | 


--------------------------------------------------------------------------------
/ssr/README.md:
--------------------------------------------------------------------------------
 1 | # SSR
 2 | 
 3 | This example shows how you can render and hydrate a simple Riot.js application using `@riotjs/ssr`.
 4 | 
 5 | ## Run locally
 6 | 
 7 | Download or clone this repo.
 8 | 
 9 | Install packages.
10 | 
11 | ```bash
12 | $ npm install
13 | ```
14 | And then run the koa server using
15 | 
16 | ```bash
17 | $ npm start
18 | ```
19 | 
20 | - Open [http://localhost:3000/](http://localhost:3000/)


--------------------------------------------------------------------------------
/ssr/app/app.riot:
--------------------------------------------------------------------------------
 1 | <app>
 2 |   <router on-started={onRouterStarted} initial-route={props.initialRoute}>
 3 |     <nav>
 4 |       <a each={page in props.pages} href={page.path}>
 5 |         {page.label}
 6 |       </a>
 7 |     </nav>
 8 | 
 9 |     <not-found if={state.showNotFound}/>
10 | 
11 |     <route each={page in props.pages} path={page.path}>
12 |       <main is={page.component}/>
13 |     </route>
14 |   </router>
15 | 
16 |   <script>
17 |     import erre from 'erre'
18 |     import Home from './pages/home.riot'
19 |     import NotFound from './pages/not-found.riot'
20 |     import About from './pages/about.riot'
21 |     import {Router, Route, route, toRegexp, match} from '@riotjs/route'
22 | 
23 |     export default {
24 |       components: {
25 |         Router,
26 |         Route,
27 |         Home,
28 |         About,
29 |         NotFound
30 |       },
31 |       state: {
32 |         showNotFound: false
33 |       },
34 |       // the isServer property is automatically injected by @riotjs/ssr
35 |       onBeforeMount({isServer, initialRoute}) {
36 |         // create a stream on all routes
37 |         this.anyRouteStream = route('(.*)')
38 |         // create a stream to check the riot-router state
39 |         this.routerStateStream = erre()
40 |         // update the state of the not found component depending on the initial route
41 |         this.state.showNotFound = this.isNotFoundVisible(initialRoute)
42 |         // check any route change to understand if the not found site should be displayed
43 |         this.anyRouteStream.on.value(this.onAnyRoute)
44 |       },
45 |       onRouterStarted() {
46 |         // broadcast the router started event
47 |         this.routerStateStream.push('started')
48 |       },
49 |       // Needed only for SSR
50 |       onAsyncRendering(resolve) {
51 |         const onReady = () => {
52 |           this.routerStateStream.off.value(onReady)
53 |           resolve()
54 |         }
55 | 
56 |         // wait the router started event
57 |         this.routerStateStream.on.value(onReady)
58 |       },
59 |       isNotFoundVisible(path) {
60 |         return !this.props.pages.some(p => match(path, toRegexp(p.path)))
61 |       },
62 |       onAnyRoute(path) {
63 |         // show the not found page if none of the page paths are matched
64 |         this.update({
65 |           showNotFound: this.isNotFoundVisible(path.pathname)
66 |         })
67 |       },
68 |       onBeforeUnmount() {
69 |         this.routerStateStream.end()
70 |         this.anyRouteStream.end()
71 |       }
72 |     }
73 |   </script>
74 | 
75 |   <style>
76 |     :host {
77 |       font-family: Helvetica Neue, Helvetica, Arial;
78 |     }
79 | 
80 |     nav a {
81 |       margin: 0 0.2rem;
82 |     }
83 |   </style>
84 | </app>
85 | 


--------------------------------------------------------------------------------
/ssr/app/main.js:
--------------------------------------------------------------------------------
1 | import '@riotjs/hot-reload'
2 | import hydrate from '@riotjs/hydrate'
3 | import App from './app.riot'
4 | 
5 | hydrate(App)(document.querySelector('app'),  window.__INITIAL_STATE__)
6 | 


--------------------------------------------------------------------------------
/ssr/app/pages/about.riot:
--------------------------------------------------------------------------------
1 | <about>
2 |   <h1>Something about me</h1>
3 |   <p>Here I describe who I am and what I do</p>
4 | </about>


--------------------------------------------------------------------------------
/ssr/app/pages/home.riot:
--------------------------------------------------------------------------------
1 | <home>
2 |   <h1>I am the home page</h1>
3 |   <p>Welcome</p>
4 | </home>


--------------------------------------------------------------------------------
/ssr/app/pages/not-found.riot:
--------------------------------------------------------------------------------
1 | <not-found>
2 |   <h1>Page not found</h1>
3 | </not-found>


--------------------------------------------------------------------------------
/ssr/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <meta charset="UTF-8">
 4 |   <title>Riot app</title>
 5 |   <style riot>
 6 |     <%= css %>
 7 |   </style>
 8 | </head>
 9 | <body>
10 |   <%= html %>
11 |   <script>
12 |     window.__INITIAL_STATE__ = <%= initialState %>
13 |   </script>
14 |   <script src="/bundle.js" charset="utf-8"></script>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/ssr/index.js:
--------------------------------------------------------------------------------
 1 | const Koa = require('koa')
 2 | const app = new Koa()
 3 | const {readFileSync} = require('fs')
 4 | const {template} = require('lodash')
 5 | const {renderAsyncFragments} = require('@riotjs/ssr')
 6 | const unregister = require('@riotjs/register')()
 7 | const page = readFileSync('./index.html', 'utf8')
 8 | 
 9 | const pages = [{
10 |   path: '/',
11 |   label: 'Home',
12 |   component: 'home'
13 | }, {
14 |   path: '/about',
15 |   label: 'About',
16 |   component: 'about'
17 | }]
18 | 
19 | app.use(require('koa-static')('./public'))
20 | 
21 | app.use(async ctx => {
22 |   const initialState = {
23 |     initialRoute: ctx.request.url,
24 |     pages,
25 |   }
26 |   const App = require('./app/app.riot').default
27 |   const {html, css} = await renderAsyncFragments('app', App, initialState)
28 | 
29 |   ctx.body = template(page)({
30 |     html,
31 |     initialState: JSON.stringify(initialState),
32 |     css
33 |   })
34 | 
35 |   unregister()
36 | })
37 | 
38 | app.listen(3000)
39 | 
40 | console.log('App running on: http://localhost:3000')
41 | 


--------------------------------------------------------------------------------
/ssr/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ssr",
 3 |   "version": "0.0.1",
 4 |   "description": "SSR",
 5 |   "repository": "riot/examples",
 6 |   "main": "app/main.js",
 7 |   "author": "Gianluca Guarini",
 8 |   "license": "MIT",
 9 |   "engines": {
10 |     "node": ">=10.0.0"
11 |   },
12 |   "scripts": {
13 |     "start": "npm run build && node index",
14 |     "build": "webpack -c webpack.config.js",
15 |     "dev": "webpack -w -c webpack.config.js --mode=development"
16 |   },
17 |   "keywords": [
18 |     "riot",
19 |     "webpack"
20 |   ],
21 |   "devDependencies": {
22 |     "@babel/core": "7.19.0",
23 |     "@babel/preset-env": "7.19.0",
24 |     "@riotjs/compiler": "^6.3.2",
25 |     "@riotjs/hot-reload": "6.0.1",
26 |     "@riotjs/webpack-loader": "^6.0.0",
27 |     "babel-loader": "^8.2.5",
28 |     "koa": "^2.13.4",
29 |     "koa-static": "^5.0.0",
30 |     "lodash": "^4.17.21",
31 |     "riot": "^7.0.6",
32 |     "webpack": "^5.74.0",
33 |     "webpack-cli": "^4.10.0"
34 |   },
35 |   "dependencies": {
36 |     "@riotjs/hydrate": "^6.0.1",
37 |     "@riotjs/register": "^6.0.1",
38 |     "@riotjs/route": "^8.0.2",
39 |     "@riotjs/ssr": "^8.1.2",
40 |     "erre": "^2.2.0"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/ssr/public/bundle.js.LICENSE.txt:
--------------------------------------------------------------------------------
1 | /* Riot WIP, @license MIT */
2 | 


--------------------------------------------------------------------------------
/ssr/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: './app/main.js',
 6 |   mode: 'production',
 7 |   devtool: 'inline-source-map',
 8 |   externals: {
 9 |     'url': 'URL'
10 |   },
11 |   performance: {
12 |     hints: false
13 |   },
14 |   output: {
15 |     path: path.resolve(__dirname, 'public'),
16 |     publicPath: '/public/',
17 |     filename: 'bundle.js'
18 |   },
19 |   module: {
20 |     rules: [
21 |       {
22 |         test: /\.riot$/,
23 |         exclude: /node_modules/,
24 |         use: [{
25 |           loader: '@riotjs/webpack-loader',
26 |           options: {
27 |             hot: true
28 |           }
29 |         }]
30 |       },
31 |       {
32 |         test: /\.js$/,
33 |         exclude: /node_modules/,
34 |         use: {
35 |           loader: 'babel-loader',
36 |           options: {
37 |             presets: ['@babel/preset-env']
38 |           }
39 |         }
40 |       }
41 |     ]
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/timer/README.md:
--------------------------------------------------------------------------------
 1 | # Timer
 2 | 
 3 | This is a simplest timer example on [README](https://github.com/riot/riot#tag-definition).
 4 | 
 5 | ## Have a play
 6 | 
 7 | [Open this example on Plunker](https://riot.js.org/examples/plunker/?app=timer)
 8 | 
 9 | ## Run locally
10 | 
11 | Install superstatic if you don't have.
12 | 
13 | ```bash
14 | $ npm install -g superstatic
15 | ```
16 | 
17 | Download or clone this repo, then run the command.
18 | 
19 | ```bash
20 | $ cd to/this/dir
21 | $ superstatic
22 | ```
23 | 
24 | Open the URL shown in your browser.
25 | 


--------------------------------------------------------------------------------
/timer/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 |   <head>
 5 |     <title>Riot Example: Timer</title>
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <link rel="stylesheet" href="style.css">
 8 |   </head>
 9 | 
10 |   <body>
11 |     <timer></timer>
12 | 
13 |     <!-- riot tags -->
14 |     <script src="timer.riot" type="riot"></script>
15 | 
16 |     <!-- scripts we need -->
17 |     <script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
18 | 
19 |     <!-- mount this app -->
20 |     <script>
21 |       riot.compile().then(() => {
22 |         riot.mount('timer', { start: 0 })
23 |       })
24 |     </script>
25 |   </body>
26 | 
27 | </html>
28 | 


--------------------------------------------------------------------------------
/timer/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "timer",
 3 |   "version": "1.0.1",
 4 |   "description": "Riot example",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "test": "mocha -r esm -r test/register test/*.spec.js"
 8 |   },
 9 |   "devDependencies": {
10 |     "@riotjs/ssr": "^6.0.0",
11 |     "chai": "^4.2.0",
12 |     "esm": "^3.2.25",
13 |     "jsdom": "15.1.1",
14 |     "jsdom-global": "3.0.2",
15 |     "mocha": "^6.1.4",
16 |     "riot": "^5.1.2"
17 |   },
18 |   "license": "MIT"
19 | }
20 | 


--------------------------------------------------------------------------------
/timer/plunker.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "title": "Timer",
 3 |   "files": [
 4 |     "index.html",
 5 |     "README.md",
 6 |     "style.css",
 7 |     "timer.riot"
 8 |   ]
 9 | }
10 | 


--------------------------------------------------------------------------------
/timer/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: 'myriad pro', sans-serif;
 3 |   font-size: 20px;
 4 |   border: 0;
 5 |   background: rgba(64, 139, 194, .2);
 6 |   margin: 0;
 7 |   padding: 100px;
 8 | }
 9 | 
10 | timer {
11 |   display: block;
12 |   max-width: 300px;
13 |   margin: 0 auto;
14 |   border: 1px solid rgba(64, 139, 194, .5);
15 |   border-radius: 6px;
16 |   color: rgba(64, 139, 194, 1);
17 |   height: 100px;
18 |   line-height: 100px;
19 |   text-align: center;
20 |   background: white;
21 | }
22 | p {
23 |   margin: 0;
24 | }
25 | 


--------------------------------------------------------------------------------
/timer/test/register.js:
--------------------------------------------------------------------------------
1 | import jsdomGlobal from 'jsdom-global'
2 | import register from '@riotjs/ssr/register'
3 | 
4 | jsdomGlobal()
5 | register()


--------------------------------------------------------------------------------
/timer/test/timer.spec.js:
--------------------------------------------------------------------------------
 1 | import Timer from '../timer.riot'
 2 | import {expect} from 'chai'
 3 | import {component} from 'riot'
 4 | 
 5 | describe('Application specs', function() {
 6 |   it('mounts the tag', function() {
 7 |     const tag = component(Timer)(document.createElement('div'))
 8 | 
 9 |     expect(tag.$('p').textContent).to.be.equal('Seconds Elapsed: 0')
10 | 
11 |     tag.unmount()
12 |   })
13 | 
14 |   it('mounts the tag with options', function() {
15 |     const tag = component(Timer)(document.createElement('div'), {
16 |       start: 100
17 |     })
18 | 
19 |     expect(tag.$('p').textContent).to.be.equal('Seconds Elapsed: 100')
20 | 
21 |     tag.unmount()
22 |   })
23 | 
24 |   it('counts up the timer', function(done) {
25 |     const tag = component(Timer)(document.createElement('div'))
26 |     setTimeout(function() {
27 |       expect(tag.$('p').textContent).to.be.equal('Seconds Elapsed: 1')
28 | 
29 |       tag.unmount()
30 |       done()
31 |     }, 1000)
32 |   })
33 | })
34 | 


--------------------------------------------------------------------------------
/timer/timer.riot:
--------------------------------------------------------------------------------
 1 | <timer>
 2 |   <p>Seconds Elapsed: { state.time }</p>
 3 | 
 4 |   <script>
 5 |     export default {
 6 |       tick() {
 7 |         this.update({ time: ++this.state.time })
 8 |       },
 9 |       onBeforeMount(props) {
10 |         // create the component initial state
11 |         this.state = {
12 |           time: props.start || 0
13 |         }
14 | 
15 |         this.timer = setInterval(this.tick, 1000)
16 |       },
17 |       onUnmounted() {
18 |         clearInterval(this.timer)
19 |       }
20 |     }
21 |   </script>
22 | </timer>
23 | 


--------------------------------------------------------------------------------
/todo-app-precompiled/README.md:
--------------------------------------------------------------------------------
 1 | # Todo App (pre-compiled)
 2 | 
 3 | This is a simple example with pre-compilation. It's basically equivalent to [the in-browser version](../todo-app).
 4 | 
 5 | ## How to try and edit
 6 | 
 7 | This demo is not available on Plunker.
 8 | 
 9 | ## How to try locally
10 | 
11 | Follow the instruction below.
12 | 
13 | Install `riot` and `superstatic` if you don't have.
14 | 
15 | ```bash
16 | $ npm install -g riot
17 | $ npm install -g superstatic
18 | ```
19 | 
20 | Download or clone this repo, then run the command.
21 | 
22 | ```bash
23 | $ cd to/this/dir
24 | $ superstatic
25 | ```
26 | 
27 | Open the URL shown in your browser.
28 | 
29 | ### Recompile the tag
30 | 
31 | If you modify the files, you need to recompile it.
32 | 
33 | ```bash
34 | $ riot todo.riot
35 | ```
36 | 
37 | Then reload the page on your browser.
38 | 


--------------------------------------------------------------------------------
/todo-app-precompiled/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <html>
 4 |   <head>
 5 |     <title>Riot todo (pre-compiled)</title>
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <link rel="stylesheet" href="todo.css">
 8 |   </head>
 9 | 
10 |   <body>
11 | 
12 |     <todo></todo>
13 | 
14 |     <script src="https://unpkg.com/riot@6/riot.min.js"></script>
15 | 
16 |     <script type="module">
17 |       import Todo from './todo.js'
18 | 
19 |       riot.component(Todo)(document.querySelector('todo'), {
20 |         title: 'I want to behave!',
21 |         items: [
22 |           { title: 'Avoid excessive caffeine', done: true },
23 |           { title: 'Be less provocative' },
24 |           { title: 'Be nice to people' }
25 |         ]
26 |       })
27 |     </script>
28 | 
29 |   </body>
30 | 
31 | </html>
32 | 


--------------------------------------------------------------------------------
/todo-app-precompiled/todo.css:
--------------------------------------------------------------------------------
 1 | 
 2 | body {
 3 |   font-family: 'myriad pro', sans-serif;
 4 |   font-size: 20px;
 5 |   border: 0;
 6 | }
 7 | 
 8 | todo {
 9 |   display: block;
10 |   max-width: 400px;
11 |   margin: 5% auto;
12 | }
13 | 
14 | form input {
15 |   font-size: 85%;
16 |   padding: .4em;
17 |   border: 1px solid #ccc;
18 |   border-radius: 2px;
19 | }
20 | 
21 | button {
22 |   background-color: #1FADC5;
23 |   border: 1px solid rgba(0,0,0,.2);
24 |   font-size: 75%;
25 |   color: #fff;
26 |   padding: .4em 1.2em;
27 |   border-radius: 2em;
28 |   cursor: pointer;
29 |   margin: 0 .23em;
30 |   outline: none;
31 | }
32 | 
33 | button[disabled] {
34 |   background-color: #ddd;
35 |   color: #aaa;
36 | }
37 | 
38 | ul {
39 |   padding: 0;
40 | }
41 | 
42 | li {
43 |   list-style-type: none;
44 |   padding: .2em 0;
45 | }
46 | 
47 | .completed {
48 |   text-decoration: line-through;
49 |   color: #ccc;
50 | }
51 | 
52 | label {
53 |   cursor: pointer;
54 | }
55 | 


--------------------------------------------------------------------------------
/todo-app-precompiled/todo.js:
--------------------------------------------------------------------------------
  1 | var todo = {
  2 |   'css': null,
  3 |   'exports': {
  4 |     onBeforeMount(props, state) {
  5 |       // initial state
  6 |       this.state = {
  7 |         items: props.items,
  8 |         text: ''
  9 |       };
 10 |     },
 11 | 
 12 |     edit(e) {
 13 |       // update only the text state
 14 |       this.update({
 15 |         text: e.target.value
 16 |       });
 17 |     },
 18 | 
 19 |     add(e) {
 20 |       e.preventDefault();
 21 | 
 22 |       if (this.state.text) {
 23 |         this.update({
 24 |           items: [...this.state.items, // add a new item
 25 |           {
 26 |             title: this.state.text
 27 |           }],
 28 |           text: ''
 29 |         });
 30 |       }
 31 |     },
 32 | 
 33 |     toggle(item) {
 34 |       item.done = !item.done; // trigger a component update
 35 | 
 36 |       this.update();
 37 |     }
 38 | 
 39 |   },
 40 |   'template': function (template, expressionTypes, bindingTypes, getComponent) {
 41 |     return template('<h3 expr0="expr0"> </h3><ul><li expr1="expr1"></li></ul><form expr4="expr4"><input expr5="expr5"/><button expr6="expr6"> </button></form>', [{
 42 |       'redundantAttribute': 'expr0',
 43 |       'selector': '[expr0]',
 44 |       'expressions': [{
 45 |         'type': expressionTypes.TEXT,
 46 |         'childNodeIndex': 0,
 47 |         'evaluate': function (_scope) {
 48 |           return _scope.props.title;
 49 |         }
 50 |       }]
 51 |     }, {
 52 |       'type': bindingTypes.EACH,
 53 |       'getKey': null,
 54 |       'condition': null,
 55 |       'template': template('<label expr2="expr2"><input expr3="expr3" type="checkbox"/> </label>', [{
 56 |         'expressions': [{
 57 |           'type': expressionTypes.ATTRIBUTE,
 58 |           'name': 'hidden',
 59 |           'evaluate': function (_scope) {
 60 |             return _scope.item.hidden;
 61 |           }
 62 |         }]
 63 |       }, {
 64 |         'redundantAttribute': 'expr2',
 65 |         'selector': '[expr2]',
 66 |         'expressions': [{
 67 |           'type': expressionTypes.TEXT,
 68 |           'childNodeIndex': 1,
 69 |           'evaluate': function (_scope) {
 70 |             return [_scope.item.title].join('');
 71 |           }
 72 |         }, {
 73 |           'type': expressionTypes.ATTRIBUTE,
 74 |           'name': 'class',
 75 |           'evaluate': function (_scope) {
 76 |             return _scope.item.done ? 'completed' : null;
 77 |           }
 78 |         }]
 79 |       }, {
 80 |         'redundantAttribute': 'expr3',
 81 |         'selector': '[expr3]',
 82 |         'expressions': [{
 83 |           'type': expressionTypes.ATTRIBUTE,
 84 |           'name': 'checked',
 85 |           'evaluate': function (_scope) {
 86 |             return _scope.item.done;
 87 |           }
 88 |         }, {
 89 |           'type': expressionTypes.EVENT,
 90 |           'name': 'onclick',
 91 |           'evaluate': function (_scope) {
 92 |             return () => _scope.toggle(_scope.item);
 93 |           }
 94 |         }]
 95 |       }]),
 96 |       'redundantAttribute': 'expr1',
 97 |       'selector': '[expr1]',
 98 |       'itemName': 'item',
 99 |       'indexName': null,
100 |       'evaluate': function (_scope) {
101 |         return _scope.state.items;
102 |       }
103 |     }, {
104 |       'redundantAttribute': 'expr4',
105 |       'selector': '[expr4]',
106 |       'expressions': [{
107 |         'type': expressionTypes.EVENT,
108 |         'name': 'onsubmit',
109 |         'evaluate': function (_scope) {
110 |           return _scope.add;
111 |         }
112 |       }]
113 |     }, {
114 |       'redundantAttribute': 'expr5',
115 |       'selector': '[expr5]',
116 |       'expressions': [{
117 |         'type': expressionTypes.EVENT,
118 |         'name': 'onkeyup',
119 |         'evaluate': function (_scope) {
120 |           return _scope.edit;
121 |         }
122 |       }]
123 |     }, {
124 |       'redundantAttribute': 'expr6',
125 |       'selector': '[expr6]',
126 |       'expressions': [{
127 |         'type': expressionTypes.TEXT,
128 |         'childNodeIndex': 0,
129 |         'evaluate': function (_scope) {
130 |           return ['Add #', _scope.state.items.length + 1].join('');
131 |         }
132 |       }, {
133 |         'type': expressionTypes.ATTRIBUTE,
134 |         'name': 'disabled',
135 |         'evaluate': function (_scope) {
136 |           return !_scope.state.text;
137 |         }
138 |       }]
139 |     }]);
140 |   },
141 |   'name': 'todo'
142 | };
143 | 
144 | export default todo;
145 | 


--------------------------------------------------------------------------------
/todo-app-precompiled/todo.riot:
--------------------------------------------------------------------------------
 1 | <todo>
 2 |   <h3>{ props.title }</h3>
 3 | 
 4 |   <ul>
 5 |     <li each={ item in state.items } hidden={ item.hidden }>
 6 |       <label class={ item.done ? 'completed' : null }>
 7 |         <input
 8 |           type="checkbox"
 9 |           checked={ item.done }
10 |           onclick={ () => toggle(item) } />
11 |         { item.title }
12 |       </label>
13 |     </li>
14 |   </ul>
15 | 
16 |   <form onsubmit={ add }>
17 |     <input onkeyup={ edit } />
18 |     <button disabled={ !state.text }>
19 |       Add #{ state.items.length + 1 }
20 |     </button>
21 |   </form>
22 | 
23 |   <script>
24 |     export default {
25 |       onBeforeMount(props, state) {
26 |         // initial state
27 |         this.state = {
28 |           items: props.items,
29 |           text: ''
30 |         }
31 |       },
32 |       edit(e) {
33 |         // update only the text state
34 |         this.update({
35 |           text: e.target.value
36 |         })
37 |       },
38 |       add(e) {
39 |         e.preventDefault()
40 | 
41 |         if (this.state.text) {
42 |           this.update({
43 |             items: [
44 |               ...this.state.items,
45 |               // add a new item
46 |               {title: this.state.text}
47 |             ],
48 |             text: ''
49 |           })
50 |         }
51 |       },
52 |       toggle(item) {
53 |         item.done = !item.done
54 |         // trigger a component update
55 |         this.update()
56 |       }
57 |     }
58 |   </script>
59 | </todo>
60 | 


--------------------------------------------------------------------------------
/todo-app/README.md:
--------------------------------------------------------------------------------
 1 | # Todo App
 2 | 
 3 | This is a simple example with in-browser compilation.
 4 | 
 5 | ## Have a play
 6 | 
 7 | [Open this example on Plunker](https://riot.js.org/examples/plunker/?app=todo-app)
 8 | 
 9 | ## Run locally
10 | 
11 | Install superstatic if you don't have.
12 | 
13 | ```bash
14 | $ npm install -g superstatic
15 | ```
16 | 
17 | Download or clone this repo, then run the command.
18 | 
19 | ```bash
20 | $ cd to/this/dir
21 | $ superstatic
22 | ```
23 | 
24 | Open the URL shown in your browser.
25 | 


--------------------------------------------------------------------------------
/todo-app/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <html>
 4 |   <head>
 5 |     <title>Riot todo</title>
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <link rel="stylesheet" href="todo.css">
 8 |   </head>
 9 | 
10 |   <body>
11 | 
12 |     <todo></todo>
13 | 
14 |     <script src="todo.riot" type="riot"></script>
15 |     <script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
16 | 
17 |     <script>
18 |       riot.compile().then(() => {
19 |         riot.mount('todo', {
20 |           title: 'I want to behave!',
21 |           items: [
22 |             { title: 'Avoid excessive caffeine', done: true },
23 |             { title: 'Be less provocative'  },
24 |             { title: 'Be nice to people' }
25 |           ]
26 |         })
27 |       })
28 |     </script>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/todo-app/plunker.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "title": "Todo App",
 3 |   "files": [
 4 |     "index.html",
 5 |     "README.md",
 6 |     "todo.css",
 7 |     "todo.riot"
 8 |   ]
 9 | }
10 | 


--------------------------------------------------------------------------------
/todo-app/todo.css:
--------------------------------------------------------------------------------
 1 | 
 2 | body {
 3 |   font-family: 'myriad pro', sans-serif;
 4 |   font-size: 20px;
 5 |   border: 0;
 6 | }
 7 | 
 8 | todo {
 9 |   display: block;
10 |   max-width: 400px;
11 |   margin: 5% auto;
12 | }
13 | 
14 | form input {
15 |   font-size: 85%;
16 |   padding: .4em;
17 |   border: 1px solid #ccc;
18 |   border-radius: 2px;
19 | }
20 | 
21 | button {
22 |   background-color: #1FADC5;
23 |   border: 1px solid rgba(0,0,0,.2);
24 |   font-size: 75%;
25 |   color: #fff;
26 |   padding: .4em 1.2em;
27 |   border-radius: 2em;
28 |   cursor: pointer;
29 |   margin: 0 .23em;
30 |   outline: none;
31 | }
32 | 
33 | button[disabled] {
34 |   background-color: #ddd;
35 |   color: #aaa;
36 | }
37 | 
38 | ul {
39 |   padding: 0;
40 | }
41 | 
42 | li {
43 |   list-style-type: none;
44 |   padding: .2em 0;
45 | }
46 | 
47 | .completed {
48 |   text-decoration: line-through;
49 |   color: #ccc;
50 | }
51 | 
52 | label {
53 |   cursor: pointer;
54 | }
55 | 


--------------------------------------------------------------------------------
/todo-app/todo.riot:
--------------------------------------------------------------------------------
 1 | <todo>
 2 |   <h3>{ props.title }</h3>
 3 | 
 4 |   <ul>
 5 |     <li each={ item in state.items } hidden={ item.hidden }>
 6 |       <label class={ item.done ? 'completed' : null }>
 7 |         <input
 8 |           type="checkbox"
 9 |           checked={ item.done }
10 |           onclick={ () => toggle(item) } />
11 |         { item.title }
12 |       </label>
13 |     </li>
14 |   </ul>
15 | 
16 |   <form onsubmit={ add }>
17 |     <input onkeyup={ edit } />
18 |     <button disabled={ !state.text }>
19 |       Add #{ state.items.length + 1 }
20 |     </button>
21 |   </form>
22 | 
23 |   <script>
24 |     export default {
25 |       onBeforeMount(props, state) {
26 |         // initial state
27 |         this.state = {
28 |           items: props.items,
29 |           text: ''
30 |         }
31 |       },
32 |       edit(e) {
33 |         // update only the text state
34 |         this.update({
35 |           text: e.target.value
36 |         })
37 |       },
38 |       add(e) {
39 |         e.preventDefault()
40 | 
41 |         if (this.state.text) {
42 |           this.update({
43 |             items: [
44 |               ...this.state.items,
45 |               // add a new item
46 |               {title: this.state.text}
47 |             ],
48 |             text: ''
49 |           })
50 |         }
51 |       },
52 |       toggle(item) {
53 |         item.done = !item.done
54 |         // trigger a component update
55 |         this.update()
56 |       }
57 |     }
58 |   </script>
59 | </todo>
60 | 


--------------------------------------------------------------------------------
/typescript/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "env": {
 3 |         "browser": true,
 4 |         "es6": true
 5 |     },
 6 |     "parser": "@typescript-eslint/parser",
 7 |     "extends": [
 8 |         "plugin:@typescript-eslint/recommended",
 9 |         "eslint-config-riot"
10 |     ],
11 |     "parserOptions": {
12 |         "ecmaVersion": 2018,
13 |         "sourceType": "module"
14 |     },
15 |     "rules": {
16 |         "indent": "off",
17 |         "@typescript-eslint/indent": ["error", 2]
18 |     }
19 | }
20 | 


--------------------------------------------------------------------------------
/typescript/.gitignore:
--------------------------------------------------------------------------------
1 | public/bundle.js
2 | public/bundle.js.LICENSE.txt
3 | 


--------------------------------------------------------------------------------
/typescript/README.md:
--------------------------------------------------------------------------------
 1 | # Typescript
 2 | 
 3 | This is a simple example of using webpack babel and typescript with riot.
 4 | 
 5 | ## Run locally
 6 | 
 7 | Download or clone this repo.
 8 | 
 9 | Install packages.
10 | 
11 | ```bash
12 | $ npm install
13 | ```
14 | And then run the server using `webpack-dev-server` or any possible way you know
15 | 
16 | ```bash
17 | $ npm start
18 | ```
19 | 
20 | Compile the source code enabling the type check 
21 | 
22 | ```bash
23 | $ npm run build
24 | ```
25 | 
26 | - Open [http://localhost:3000/](http://localhost:3000/)
27 | - Open [http://localhost:3000/webpack-dev-server/](http://localhost:3000/webpack-dev-server/) for dev server with hot reloading.
28 | 


--------------------------------------------------------------------------------
/typescript/app/RiotFile.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.riot' {
2 |   import {RiotComponentWrapper} from 'riot'
3 | 
4 |   const componentWrapper: RiotComponentWrapper
5 | 
6 |   export default componentWrapper
7 | }
8 | 


--------------------------------------------------------------------------------
/typescript/app/logs/logs.riot:
--------------------------------------------------------------------------------
 1 | <logs>
 2 |   <h4>{title}</h4>
 3 | 
 4 |   <button onclick={props.onclear}>
 5 |     Clear logs
 6 |   </button>
 7 | 
 8 |   <ul>
 9 |     <li each={ log in props.logs }>{ log.text }</li>
10 |   </ul>
11 | 
12 |   <script lang="ts">
13 |     import {RiotComponent, withTypes} from 'riot'
14 |     import {LogComponentProps} from './types'
15 | 
16 |     export type LogsComponent =
17 |       RiotComponent<LogComponentProps> &
18 |       { title: string } &
19 |       // notice that the code below is needed because the "log" key in the template doesn't belong the the component
20 |       // scope and it gets generated in runtime via Each binding
21 |       Record<string, any>
22 | 
23 |     export default withTypes<LogsComponent>({
24 |       title: 'Logs',
25 |     })
26 |   </script>
27 | </logs>
28 | 


--------------------------------------------------------------------------------
/typescript/app/logs/types.ts:
--------------------------------------------------------------------------------
1 | export interface Log {
2 |   text: string;
3 | }
4 | 
5 | export interface LogComponentProps {
6 |   logs: Log[];
7 |   onclear: () => void
8 | }
9 | 


--------------------------------------------------------------------------------
/typescript/app/main.ts:
--------------------------------------------------------------------------------
1 | import '@riotjs/hot-reload'
2 | import Random from './random/random.riot'
3 | import { component } from 'riot'
4 | 
5 | component(Random)(document.getElementById('app') || document.body, {
6 |   title: 'Hi there!'
7 | })
8 | 


--------------------------------------------------------------------------------
/typescript/app/random/random.riot:
--------------------------------------------------------------------------------
 1 | <random>
 2 |   <h3>{ props.title }</h3>
 3 | 
 4 |   <button onclick={ generate }>
 5 |     Generate
 6 |   </button>
 7 | 
 8 |   <h1>
 9 |     { state.number }
10 |   </h1>
11 | 
12 |   <logs logs={ state.logs } onclear={ clearLogs }/>
13 | 
14 |   <script lang="ts">
15 |     import {RiotComponent, withTypes} from 'riot';
16 |     import Logs from '../logs/logs.riot'
17 |     import {RandomComponentProps, RandomComponentState} from './types'
18 | 
19 |     export interface RandomComponent extends RiotComponent<RandomComponentProps, RandomComponentState> {
20 |       generate(event: MouseEvent): void
21 |       clearLogs(): void
22 |     }
23 | 
24 |     export default withTypes<RandomComponent>({
25 |       components: {
26 |         Logs
27 |       },
28 |       state: {
29 |         number: null,
30 |         logs: []
31 |       },
32 |       generate(event) {
33 |         this.update({
34 |           number: Math.floor(Math.random() * 10000),
35 |           logs: this.state.logs.concat({
36 |             text: `Generate button clicked. Event type is ${event.type}`
37 |           })
38 |         })
39 |       },
40 |       clearLogs() {
41 |         this.update({
42 |           logs: []
43 |         })
44 |       }
45 |     })
46 | 
47 |   </script>
48 | </random>
49 | 


--------------------------------------------------------------------------------
/typescript/app/random/types.ts:
--------------------------------------------------------------------------------
1 | export interface RandomComponentState {
2 |   number: number | null;
3 |   logs: { text: string }[];
4 | }
5 | 
6 | export interface RandomComponentProps {
7 |   title: string;
8 | }
9 | 


--------------------------------------------------------------------------------
/typescript/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "riot-typescript",
 3 |   "version": "1.0.0",
 4 |   "description": "Typescript and riot",
 5 |   "repository": "riot/examples",
 6 |   "main": "app/main.ts",
 7 |   "license": "MIT",
 8 |   "engines": {
 9 |     "node": ">=10.0.0"
10 |   },
11 |   "scripts": {
12 |     "start": "NODE_ENV=development webpack serve --mode development --hot",
13 |     "build": "webpack build --mode production"
14 |   },
15 |   "keywords": [
16 |     "riot",
17 |     "typescript"
18 |   ],
19 |   "devDependencies": {
20 |     "@riotjs/compiler": "^9.0.6",
21 |     "@riotjs/dom-bindings": "^9.0.3",
22 |     "@riotjs/hot-reload": "9.0.1",
23 |     "@riotjs/webpack-loader": "^9.0.1",
24 |     "@types/webpack-env": "^1.18.4",
25 |     "@typescript-eslint/eslint-plugin": "^6.13.2",
26 |     "@typescript-eslint/parser": "^6.13.2",
27 |     "eslint": "^8.55.0",
28 |     "eslint-config-riot": "^4.1.1",
29 |     "strip-indent": "^4.0.0",
30 |     "ts-loader": "^9.5.1",
31 |     "typescript": "^5.3.3",
32 |     "webpack": "^5.89.0",
33 |     "webpack-cli": "^5.1.4",
34 |     "webpack-dev-server": "^4.15.1"
35 |   },
36 |   "dependencies": {
37 |     "riot": "^9.1.2"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/typescript/public/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/riot/examples/47c377a0036d278a8b3e802a2fd2a08da3af33e1/typescript/public/.gitkeep


--------------------------------------------------------------------------------
/typescript/public/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <meta charset="UTF-8">
 4 |   <title>Riot app</title>
 5 | </head>
 6 | <body>
 7 | 
 8 |   <div id="app"></div>
 9 | 
10 |   <script src="public/bundle.js" charset="utf-8"></script>
11 | </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/typescript/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "es2015",
 5 |     "strict": true,
 6 |     "sourceMap": true,
 7 |     "noUnusedLocals": false,
 8 |     "moduleResolution": "node",
 9 |     "esModuleInterop": true,
10 |     "noImplicitThis": true
11 |   },
12 |   "include": [
13 |     "app"
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/typescript/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const {resolve} = require('path')
 2 | const isDevelopment = process.env.NODE_ENV === 'development'
 3 | 
 4 | module.exports = {
 5 |   entry: './app/main.ts',
 6 |   output: {
 7 |     path: resolve(__dirname, 'public'),
 8 |     publicPath: '/public',
 9 |     filename: 'bundle.js'
10 |   },
11 |   devServer: {
12 |     port: 3000
13 |   },
14 |   mode: 'development',
15 |   devtool: 'inline-source-map',
16 |   module: {
17 |     rules: [
18 |       {
19 |         test: /\.riot$/,
20 |         exclude: /node_modules/,
21 |         use: [{
22 |           loader: 'ts-loader',
23 |           options: {
24 |             transpileOnly: isDevelopment,
25 |             appendTsSuffixTo: [/\.riot$/]
26 |           }
27 |         }, {
28 |           loader: '@riotjs/webpack-loader',
29 |           options: {
30 |             hot: isDevelopment
31 |           }
32 |         }]
33 |       },
34 |       {
35 |         test: /\.ts$/,
36 |         use: [{
37 |           loader: 'ts-loader',
38 |           options: {
39 |             transpileOnly: isDevelopment
40 |           }
41 |         }]
42 |       }
43 |     ]
44 |   },
45 |   resolve: {
46 |     extensions: ['.ts', '.js', '.riot']
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------