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

I am the home page

3 | -------------------------------------------------------------------------------- /typescript/.gitignore: -------------------------------------------------------------------------------- 1 | public/bundle.js 2 | public/bundle.js.LICENSE.txt 3 | -------------------------------------------------------------------------------- /lazy-routes/app/about.riot: -------------------------------------------------------------------------------- 1 | 2 |

My name is {props.name}

3 | -------------------------------------------------------------------------------- /ssr/app/pages/not-found.riot: -------------------------------------------------------------------------------- 1 | 2 |

Page not found

3 | -------------------------------------------------------------------------------- /ssr/public/bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* Riot WIP, @license MIT */ 2 | 3 | /* Riot v10.0.1, @license MIT */ 4 | -------------------------------------------------------------------------------- /live-editor/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: 'myriad pro', 'Tahoma', 'sans-serif'; 4 | } 5 | -------------------------------------------------------------------------------- /animated-list-reordering/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 2rem; 4 | background: #9fdeff; 5 | } 6 | -------------------------------------------------------------------------------- /router-history-api/superstatic.json: -------------------------------------------------------------------------------- 1 | { 2 | "rewrites": [{ "source": "**/*", "destination": "index.html" }] 3 | } 4 | -------------------------------------------------------------------------------- /deno/import_map.json: -------------------------------------------------------------------------------- 1 | { 2 | "imports": { 3 | "@riotjs/ssr": "./node_modules/@riotjs/ssr/index.js" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | -------------------------------------------------------------------------------- /timer/plunker.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Timer", 3 | "files": ["index.html", "README.md", "style.css", "timer.riot"] 4 | } 5 | -------------------------------------------------------------------------------- /todo-app/plunker.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Todo App", 3 | "files": ["index.html", "README.md", "todo.css", "todo.riot"] 4 | } 5 | -------------------------------------------------------------------------------- /bug-reporter/plunker.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Riot Bug Reporter", 3 | "files": ["index.html", "my-tag.html", "README.md"] 4 | } 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "@riotjs/prettier-config": "^1.1.0", 4 | "prettier": "^3.6.2" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /riot-config/riot.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | sourcemap: 'inline', 3 | output: 'dist/main.js', 4 | format: 'esm', 5 | } 6 | -------------------------------------------------------------------------------- /hooks/plunker.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Riot.js hooks", 3 | "files": ["index.html", "with-hooks.js", "my-tag.html", "README.md"] 4 | } 5 | -------------------------------------------------------------------------------- /modal/plunker.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Riot Bug Reporter", 3 | "files": ["index.html", "modal.riot", "cool-modal.riot", "README.md"] 4 | } 5 | -------------------------------------------------------------------------------- /router-history-api/plunker.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Router - Page switcher", 3 | "files": ["index.html", "README.md", "app.riot"] 4 | } 5 | -------------------------------------------------------------------------------- /router-page-switcher/plunker.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Router - Page switcher", 3 | "files": ["index.html", "README.md", "app.riot"] 4 | } 5 | -------------------------------------------------------------------------------- /color-palette/plunker.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Color Palette", 3 | "files": ["index.html", "README.md", "app.riot", "color-palette.riot"] 4 | } 5 | -------------------------------------------------------------------------------- /animated-list-reordering/plunker.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Color Palette", 3 | "files": ["index.html", "README.md", "list.riot", "style.css"] 4 | } 5 | -------------------------------------------------------------------------------- /riot-config/src/main.js: -------------------------------------------------------------------------------- 1 | import { component } from 'riot' 2 | import App from './app.riot' 3 | 4 | component(App)(document.getElementById('root')) 5 | -------------------------------------------------------------------------------- /timer/test/register.js: -------------------------------------------------------------------------------- 1 | import jsdomGlobal from 'jsdom-global' 2 | import register from '@riotjs/ssr/register' 3 | 4 | jsdomGlobal() 5 | register() 6 | -------------------------------------------------------------------------------- /live-ajax-search/plunker.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Color Palette", 3 | "files": ["index.html", "README.md", "search.riot", "style.css", "puff.svg"] 4 | } 5 | -------------------------------------------------------------------------------- /deno/src/types/riot-file.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.riot' { 2 | import { RiotComponentWrapper } from 'riot' 3 | export default RiotComponentWrapper 4 | } 5 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /deno/src/pages/home.riot: -------------------------------------------------------------------------------- 1 | 2 |

Hello Deno :)

3 |

Did you know that Riot.js components can be rendered also by Deno?
4 | What a great news!

5 | -------------------------------------------------------------------------------- /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-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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /ssr/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "modules": false, 7 | "targets": ["last 2 versions"] 8 | } 9 | ] 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /bug-reporter/my-tag.html: -------------------------------------------------------------------------------- 1 | 2 |

{ state.message }

3 | 4 | 11 | 12 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | } 13 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /lazy-routes/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Riot app 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /typescript/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Riot app 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /deno/src/types/globals.d.ts: -------------------------------------------------------------------------------- 1 | interface Window { 2 | __INITIAL_STATE__: { 3 | initialRoute: string 4 | base: string 5 | routes: Record< 6 | string, 7 | { 8 | path: string 9 | label: string 10 | component: string 11 | } 12 | > 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /router-complex/app.riot: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | -------------------------------------------------------------------------------- /deno/src/pages/about.riot: -------------------------------------------------------------------------------- 1 | 2 |

A modern runtime for JavaScript and TypeScript.

3 |

Deno is a simple, modern and secure runtime for JavaScript, TypeScript, and WebAssembly that uses V8 and is built in Rust.

4 |

Read More

5 | -------------------------------------------------------------------------------- /typescript/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "strict": true, 6 | "sourceMap": true, 7 | "noUnusedLocals": false, 8 | "moduleResolution": "bundler", 9 | "esModuleInterop": true, 10 | "noImplicitThis": true 11 | }, 12 | "include": ["app"] 13 | } 14 | -------------------------------------------------------------------------------- /deno/src/types/riot-hydrate.d.ts: -------------------------------------------------------------------------------- 1 | declare module '@riotjs/hydrate' { 2 | import { RiotComponent, RiotComponentWrapper } from 'riot' 3 | export default function < 4 | Props, 5 | State, 6 | Component = RiotComponent, 7 | >( 8 | wrapper: RiotComponentWrapper, 9 | ): (el: Element, initialProps?: Props) => Component 10 | } 11 | -------------------------------------------------------------------------------- /deno/src/pages/not-found.riot: -------------------------------------------------------------------------------- 1 | 2 |

Page not found

3 |

Opsi, wrong page. Go back to {HOME.label} :(

4 | 5 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /ssr/app/pages/home.riot: -------------------------------------------------------------------------------- 1 | 2 |

I am the home page

3 |

Welcome

4 | 5 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ssr/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Riot app 5 | 8 | 9 | 10 | <%= html %> 11 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /ssr/app/pages/about.riot: -------------------------------------------------------------------------------- 1 | 2 |

Something about me

3 |

Here I describe who I am and what I do

4 | 5 | 18 | 19 | -------------------------------------------------------------------------------- /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 | 15 | And then run the koa server using 16 | 17 | ```bash 18 | $ npm start 19 | ``` 20 | 21 | - Open [http://localhost:3000/](http://localhost:3000/) 22 | -------------------------------------------------------------------------------- /typescript/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true 5 | }, 6 | "parser": "@typescript-eslint/parser", 7 | "extends": ["plugin:@typescript-eslint/recommended", "eslint-config-riot"], 8 | "parserOptions": { 9 | "ecmaVersion": 2018, 10 | "sourceType": "module" 11 | }, 12 | "rules": { 13 | "indent": "off", 14 | "@typescript-eslint/indent": ["error", 2] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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( 8 | ellipse farthest-corner at top, 9 | #661141, 10 | #000000 11 | ); 12 | background-image: radial-gradient( 13 | ellipse farthest-corner at top, 14 | #661141, 15 | #000000 16 | ); 17 | color: white; 18 | } 19 | -------------------------------------------------------------------------------- /bug-reporter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /riot-config/src/app.riot: -------------------------------------------------------------------------------- 1 | 2 |

{ title }

3 |

This example shows how to use the riot.config.js:

4 | 5 | 12 | 13 | 23 | 24 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | 15 | And then run the server using `webpack-dev-server` or any possible way you know 16 | 17 | ```bash 18 | $ npm start 19 | ``` 20 | 21 | - Open [http://localhost:3000/](http://localhost:3000/) 22 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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, 0.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, 0.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 | -------------------------------------------------------------------------------- /live-editor/sample.riot: -------------------------------------------------------------------------------- 1 | 2 |

{ message }

3 |
    4 |
  • 5 | { tech.name } 6 |
    • 7 |
8 | 9 | 20 | 21 | 26 | 27 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /deno/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Riot Deno App 5 | 9 | 12 | 13 | 14 | <%= html %> 15 | 18 | 19 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /timer/timer.riot: -------------------------------------------------------------------------------- 1 | 2 |

Seconds Elapsed: { state.time }

3 | 4 | 22 | 23 | -------------------------------------------------------------------------------- /animated-list-reordering/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /riot-config/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Riot with next standards 5 | 6 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /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-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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /plunker/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Opening Plunker... 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /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 `` 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 | 2 | 3 | 4 | 5 |

Click the color.

6 | 7 | 19 | 20 | 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 | -------------------------------------------------------------------------------- /timer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Riot Example: Timer 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | 15 | And then run the server using `webpack-dev-server` or any possible way you know 16 | 17 | ```bash 18 | $ npm start 19 | ``` 20 | 21 | Compile the source code enabling the type check 22 | 23 | ```bash 24 | $ npm run build 25 | ``` 26 | 27 | - Open [http://localhost:3000/](http://localhost:3000/) 28 | - Open [http://localhost:3000/webpack-dev-server/](http://localhost:3000/webpack-dev-server/) for dev server with hot reloading. 29 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /router-history-api/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Riot Router Example: History API 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /router-page-switcher/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Riot Router Example: Page Switching 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /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 | { 23 | loader: '@riotjs/webpack-loader', 24 | options: { 25 | hot: true, 26 | }, 27 | }, 28 | ], 29 | }, 30 | ], 31 | }, 32 | } 33 | -------------------------------------------------------------------------------- /live-editor/stage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Riot live editor 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /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 | 15 | And then run the oak server using 16 | 17 | ```bash 18 | $ npm start 19 | ``` 20 | 21 | Use the following command to watch the frontend files and update 22 | 23 | ```bash 24 | $ npm watch 25 | ``` 26 | 27 | Notice that Deno dosn't support (hmr) livereload yet 28 | 29 | - Open [http://localhost:3000/](http://localhost:3000/) 30 | -------------------------------------------------------------------------------- /color-palette/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Color Palette 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 25 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /live-editor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Riot live editor 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /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": ["index.html", "README.md", "todo.css", "todo.tag"] 20 | } 21 | ``` 22 | 23 | ## Run locally 24 | 25 | Install superstatic if you don't already have it. 26 | 27 | ```bash 28 | $ npm install -g superstatic 29 | ``` 30 | 31 | Download or clone this repo, then run the command. 32 | 33 | ```bash 34 | $ cd to/parent/dir 35 | $ superstatic 36 | ``` 37 | 38 | Open the URL shown in your browser. 39 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /todo-app-precompiled/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Riot todo (pre-compiled) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /typescript/app/logs/logs.riot: -------------------------------------------------------------------------------- 1 | 2 |

{title}

3 | 4 | 7 | 8 |
    9 |
  • { log.text }
    • 10 |
11 | 12 | 27 | 28 | -------------------------------------------------------------------------------- /todo-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Riot todo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /ssr/webpack.config.js: -------------------------------------------------------------------------------- 1 | import { fileURLToPath } from 'node:url' 2 | import { dirname, resolve } from 'path' 3 | const __dirname = dirname(fileURLToPath(import.meta.url)) 4 | 5 | export default { 6 | entry: './app/main.js', 7 | mode: 'production', 8 | devtool: 'inline-source-map', 9 | externals: { 10 | url: 'URL', 11 | }, 12 | performance: { 13 | hints: false, 14 | }, 15 | output: { 16 | path: resolve(__dirname, 'public'), 17 | publicPath: '/public/', 18 | filename: 'bundle.js', 19 | }, 20 | module: { 21 | rules: [ 22 | { 23 | test: /\.riot$/, 24 | exclude: /node_modules/, 25 | use: [ 26 | { 27 | loader: '@riotjs/webpack-loader', 28 | options: { 29 | hot: true, 30 | }, 31 | }, 32 | ], 33 | }, 34 | ], 35 | }, 36 | } 37 | -------------------------------------------------------------------------------- /modal/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 14 | 15 | 16 | 17 | 18 | 22 | 23 | 24 | 25 | 26 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /todo-app/todo.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'myriad pro', sans-serif; 3 | font-size: 20px; 4 | border: 0; 5 | } 6 | 7 | todo { 8 | display: block; 9 | max-width: 400px; 10 | margin: 5% auto; 11 | } 12 | 13 | form input { 14 | font-size: 85%; 15 | padding: 0.4em; 16 | border: 1px solid #ccc; 17 | border-radius: 2px; 18 | } 19 | 20 | button { 21 | background-color: #1fadc5; 22 | border: 1px solid rgba(0, 0, 0, 0.2); 23 | font-size: 75%; 24 | color: #fff; 25 | padding: 0.4em 1.2em; 26 | border-radius: 2em; 27 | cursor: pointer; 28 | margin: 0 0.23em; 29 | outline: none; 30 | } 31 | 32 | button[disabled] { 33 | background-color: #ddd; 34 | color: #aaa; 35 | } 36 | 37 | ul { 38 | padding: 0; 39 | } 40 | 41 | li { 42 | list-style-type: none; 43 | padding: 0.2em 0; 44 | } 45 | 46 | .completed { 47 | text-decoration: line-through; 48 | color: #ccc; 49 | } 50 | 51 | label { 52 | cursor: pointer; 53 | } 54 | -------------------------------------------------------------------------------- /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 | "scripts": { 9 | "start": "NODE_ENV=development webpack serve --mode development --hot", 10 | "build": "webpack build --mode production" 11 | }, 12 | "keywords": [ 13 | "riot", 14 | "typescript" 15 | ], 16 | "devDependencies": { 17 | "@riotjs/compiler": "^10.0.1", 18 | "@riotjs/dom-bindings": "^10.0.3", 19 | "@riotjs/hot-reload": "10.0.0", 20 | "@riotjs/webpack-loader": "^10.0.0", 21 | "@types/webpack-env": "^1.18.8", 22 | "strip-indent": "^4.1.0", 23 | "ts-loader": "^9.5.4", 24 | "typescript": "^5.9.2", 25 | "webpack": "^5.101.3", 26 | "webpack-cli": "^6.0.1", 27 | "webpack-dev-server": "^5.2.2" 28 | }, 29 | "dependencies": { 30 | "riot": "^10.0.1" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /todo-app-precompiled/todo.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'myriad pro', sans-serif; 3 | font-size: 20px; 4 | border: 0; 5 | } 6 | 7 | todo { 8 | display: block; 9 | max-width: 400px; 10 | margin: 5% auto; 11 | } 12 | 13 | form input { 14 | font-size: 85%; 15 | padding: 0.4em; 16 | border: 1px solid #ccc; 17 | border-radius: 2px; 18 | } 19 | 20 | button { 21 | background-color: #1fadc5; 22 | border: 1px solid rgba(0, 0, 0, 0.2); 23 | font-size: 75%; 24 | color: #fff; 25 | padding: 0.4em 1.2em; 26 | border-radius: 2em; 27 | cursor: pointer; 28 | margin: 0 0.23em; 29 | outline: none; 30 | } 31 | 32 | button[disabled] { 33 | background-color: #ddd; 34 | color: #aaa; 35 | } 36 | 37 | ul { 38 | padding: 0; 39 | } 40 | 41 | li { 42 | list-style-type: none; 43 | padding: 0.2em 0; 44 | } 45 | 46 | .completed { 47 | text-decoration: line-through; 48 | color: #ccc; 49 | } 50 | 51 | label { 52 | cursor: pointer; 53 | } 54 | -------------------------------------------------------------------------------- /hooks/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | 17 | 18 | 22 | 26 | 27 | 28 | 29 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /live-ajax-search/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /router-complex/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Riot Router: Complex example 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 29 | 30 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /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 | "type": "module", 9 | "license": "MIT", 10 | "engines": { 11 | "node": ">=10.0.0" 12 | }, 13 | "scripts": { 14 | "start": "npm run build && node index", 15 | "build": "webpack -c webpack.config.js", 16 | "dev": "webpack -w -c webpack.config.js --mode=development" 17 | }, 18 | "keywords": [ 19 | "riot", 20 | "webpack" 21 | ], 22 | "devDependencies": { 23 | "@riotjs/compiler": "^10.0.1", 24 | "@riotjs/hot-reload": "10.0.0", 25 | "@riotjs/webpack-loader": "^10.0.0", 26 | "koa": "^3.0.1", 27 | "koa-static": "^5.0.0", 28 | "lodash-es": "^4.17.21", 29 | "riot": "^10.0.1", 30 | "webpack": "^5.101.3", 31 | "webpack-cli": "^6.0.1" 32 | }, 33 | "dependencies": { 34 | "@riotjs/hydrate": "^10.0.0", 35 | "@riotjs/register": "^10.0.0", 36 | "@riotjs/route": "^10.0.0", 37 | "@riotjs/ssr": "^10.0.0", 38 | "erre": "^3.0.1" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /live-ajax-search/puff.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /lazy-routes/app/app.riot: -------------------------------------------------------------------------------- 1 | 2 |

{props.message}

3 | 4 | 5 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 33 | 34 | 51 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /modal/cool-modal.riot: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

{ state.modal.message }

5 |
6 | 7 | 8 |
9 | 10 | 11 | 31 | 32 | 45 | 46 | -------------------------------------------------------------------------------- /modal/modal.riot: -------------------------------------------------------------------------------- 1 | 2 |
3 |

{ props.title }

4 | 5 |
6 | 7 |
8 |
9 | 10 | 28 | 29 | 30 | 53 | 54 | -------------------------------------------------------------------------------- /router-complex/app-help.riot: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Help

4 |

5 | { getHelpText(route) } 6 |

7 | 8 | 23 | 24 | 52 | 53 | -------------------------------------------------------------------------------- /ssr/index.js: -------------------------------------------------------------------------------- 1 | import Koa from 'koa' 2 | import { readFileSync } from 'node:fs' 3 | import { template } from 'lodash-es' 4 | import KoaStatic from 'koa-static' 5 | import { renderAsyncFragments } from '@riotjs/ssr' 6 | import { pathToFileURL } from 'node:url' 7 | import { register } from 'node:module' 8 | 9 | register('@riotjs/register', pathToFileURL('./')) 10 | 11 | const page = readFileSync('./index.html', 'utf8') 12 | const app = new Koa() 13 | const pages = [ 14 | { 15 | path: '/', 16 | label: 'Home', 17 | component: 'home', 18 | }, 19 | { 20 | path: '/about', 21 | label: 'About', 22 | component: 'about', 23 | }, 24 | ] 25 | 26 | app.use(KoaStatic('./public')) 27 | 28 | app.use(async (ctx) => { 29 | const initialState = { 30 | initialRoute: ctx.request.url, 31 | base: 'http://localhost:3000', 32 | pages, 33 | } 34 | 35 | const { default: App } = await import('./app/app.riot') 36 | const { html, css } = await renderAsyncFragments('app', App, initialState) 37 | 38 | ctx.body = template(page)({ 39 | html, 40 | initialState: JSON.stringify(initialState), 41 | css, 42 | }) 43 | }) 44 | 45 | app.listen(3000) 46 | 47 | console.log('App running on: http://localhost:3000') 48 | -------------------------------------------------------------------------------- /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 -A 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": "^10.0.0", 27 | "@riotjs/compiler": "^10.0.0", 28 | "@rollup/plugin-commonjs": "^28.0.6", 29 | "@rollup/plugin-node-resolve": "^16.0.1", 30 | "@rollup/plugin-typescript": "^12.1.4", 31 | "rollup-plugin-riot": "^10.0.0" 32 | }, 33 | "dependencies": { 34 | "@riotjs/hydrate": "^10.0.0", 35 | "@riotjs/route": "^10.0.0", 36 | "@riotjs/ssr": "^10.0.0", 37 | "erre": "^3.0.1", 38 | "riot": "^10.0.0" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /typescript/app/random/random.riot: -------------------------------------------------------------------------------- 1 | 2 |

{ props.title }

3 | 4 | 7 | 8 |

9 | { state.number } 10 |

11 | 12 | 13 | 14 | 49 | 50 | -------------------------------------------------------------------------------- /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 | { 23 | loader: 'ts-loader', 24 | options: { 25 | transpileOnly: isDevelopment, 26 | appendTsSuffixTo: [/\.riot$/], 27 | }, 28 | }, 29 | { 30 | loader: '@riotjs/webpack-loader', 31 | options: { 32 | hot: isDevelopment, 33 | }, 34 | }, 35 | ], 36 | }, 37 | { 38 | test: /\.ts$/, 39 | use: [ 40 | { 41 | loader: 'ts-loader', 42 | options: { 43 | transpileOnly: isDevelopment, 44 | }, 45 | }, 46 | ], 47 | }, 48 | ], 49 | }, 50 | resolve: { 51 | extensions: ['.ts', '.js', '.riot'], 52 | }, 53 | } 54 | -------------------------------------------------------------------------------- /router-history-api/app.riot: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 |

{getPageById(route).title}

11 |

{getPageById(route).body}

12 | 13 | 14 | 35 | 36 | 58 | 59 | -------------------------------------------------------------------------------- /todo-app/todo.riot: -------------------------------------------------------------------------------- 1 | 2 |

{ props.title }

3 | 4 |
    5 | 14 |
15 | 16 |
17 | 18 | 21 |
22 | 23 | 59 | 60 | -------------------------------------------------------------------------------- /todo-app-precompiled/todo.riot: -------------------------------------------------------------------------------- 1 | 2 |

{ props.title }

3 | 4 |
    5 | 14 |
15 | 16 |
17 | 18 | 21 |
22 | 23 | 59 | 60 | -------------------------------------------------------------------------------- /hooks/my-tag.html: -------------------------------------------------------------------------------- 1 | 2 |

Counter

3 |

{ count }

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

{getPageById(route).title}

11 |

{getPageById(route).body}

12 | 13 | 14 | 39 | 40 | 62 | 63 | -------------------------------------------------------------------------------- /plunker/app.riot: -------------------------------------------------------------------------------- 1 | 2 |

Now opening Plunker...

3 | 4 |
5 | 6 | 7 | 8 | 9 | 13 |
14 | 15 | 50 | 51 | 64 | 65 | -------------------------------------------------------------------------------- /live-editor/live-editor.riot: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 47 | 48 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /router-complex/app-main.riot: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 | 10 | 11 | 12 |
13 | 14 | 15 |

{ page.title }

16 |

{ page.body }

17 | 18 | 19 | 20 | 21 |

{getSubPageDataById(route).title}

22 |

{getSubPageDataById(route).body}

23 | 24 |
25 |
26 | 27 | 54 | 55 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /ssr/app/app.riot: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 74 | 75 | 92 | 93 | -------------------------------------------------------------------------------- /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 | [license-image]: http://img.shields.io/badge/license-MIT-000000.svg?style=flat-square 47 | [license-url]: LICENSE 48 | -------------------------------------------------------------------------------- /live-ajax-search/search.riot: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 |
8 | 9 |
10 | 11 |

{ state.error }

12 | 13 | 19 | 20 | 65 | 66 | 144 | 145 | 146 | -------------------------------------------------------------------------------- /animated-list-reordering/list.riot: -------------------------------------------------------------------------------- 1 | 2 |

Sorting options

3 | 6 | 9 | 12 | 15 | 16 |

People Collection

17 |
    18 |
  1. 19 |
    20 | { person.name } - { person.age } 21 |
    22 | 25 |
    2. 26 |
27 | 28 | 118 | 119 | 175 | 176 | -------------------------------------------------------------------------------- /deno/src/app.riot: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 |
10 | Riot.js Logo 11 | 🚀 12 | Deno Logo 13 |
14 | 15 | 16 | 17 |
18 | 19 |
20 | 21 |
22 | 23 | 24 | 95 | 96 | 169 | 170 | -------------------------------------------------------------------------------- /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: [ 25 | ...this.state.items, // add a new item 26 | { 27 | title: this.state.text, 28 | }, 29 | ], 30 | text: '', 31 | }) 32 | } 33 | }, 34 | 35 | toggle(item) { 36 | item.done = !item.done // trigger a component update 37 | 38 | this.update() 39 | }, 40 | }, 41 | template: function (template, expressionTypes, bindingTypes, getComponent) { 42 | return template( 43 | '

', 44 | [ 45 | { 46 | redundantAttribute: 'expr0', 47 | selector: '[expr0]', 48 | expressions: [ 49 | { 50 | type: expressionTypes.TEXT, 51 | childNodeIndex: 0, 52 | evaluate: function (_scope) { 53 | return _scope.props.title 54 | }, 55 | }, 56 | ], 57 | }, 58 | { 59 | type: bindingTypes.EACH, 60 | getKey: null, 61 | condition: null, 62 | template: template( 63 | '', 64 | [ 65 | { 66 | expressions: [ 67 | { 68 | type: expressionTypes.ATTRIBUTE, 69 | name: 'hidden', 70 | evaluate: function (_scope) { 71 | return _scope.item.hidden 72 | }, 73 | }, 74 | ], 75 | }, 76 | { 77 | redundantAttribute: 'expr2', 78 | selector: '[expr2]', 79 | expressions: [ 80 | { 81 | type: expressionTypes.TEXT, 82 | childNodeIndex: 1, 83 | evaluate: function (_scope) { 84 | return [_scope.item.title].join('') 85 | }, 86 | }, 87 | { 88 | type: expressionTypes.ATTRIBUTE, 89 | name: 'class', 90 | evaluate: function (_scope) { 91 | return _scope.item.done ? 'completed' : null 92 | }, 93 | }, 94 | ], 95 | }, 96 | { 97 | redundantAttribute: 'expr3', 98 | selector: '[expr3]', 99 | expressions: [ 100 | { 101 | type: expressionTypes.ATTRIBUTE, 102 | name: 'checked', 103 | evaluate: function (_scope) { 104 | return _scope.item.done 105 | }, 106 | }, 107 | { 108 | type: expressionTypes.EVENT, 109 | name: 'onclick', 110 | evaluate: function (_scope) { 111 | return () => _scope.toggle(_scope.item) 112 | }, 113 | }, 114 | ], 115 | }, 116 | ], 117 | ), 118 | redundantAttribute: 'expr1', 119 | selector: '[expr1]', 120 | itemName: 'item', 121 | indexName: null, 122 | evaluate: function (_scope) { 123 | return _scope.state.items 124 | }, 125 | }, 126 | { 127 | redundantAttribute: 'expr4', 128 | selector: '[expr4]', 129 | expressions: [ 130 | { 131 | type: expressionTypes.EVENT, 132 | name: 'onsubmit', 133 | evaluate: function (_scope) { 134 | return _scope.add 135 | }, 136 | }, 137 | ], 138 | }, 139 | { 140 | redundantAttribute: 'expr5', 141 | selector: '[expr5]', 142 | expressions: [ 143 | { 144 | type: expressionTypes.EVENT, 145 | name: 'onkeyup', 146 | evaluate: function (_scope) { 147 | return _scope.edit 148 | }, 149 | }, 150 | ], 151 | }, 152 | { 153 | redundantAttribute: 'expr6', 154 | selector: '[expr6]', 155 | expressions: [ 156 | { 157 | type: expressionTypes.TEXT, 158 | childNodeIndex: 0, 159 | evaluate: function (_scope) { 160 | return ['Add #', _scope.state.items.length + 1].join('') 161 | }, 162 | }, 163 | { 164 | type: expressionTypes.ATTRIBUTE, 165 | name: 'disabled', 166 | evaluate: function (_scope) { 167 | return !_scope.state.text 168 | }, 169 | }, 170 | ], 171 | }, 172 | ], 173 | ) 174 | }, 175 | name: 'todo', 176 | } 177 | 178 | export default todo 179 | -------------------------------------------------------------------------------- /deno/deno.lock: -------------------------------------------------------------------------------- 1 | { 2 | "version": "5", 3 | "specifiers": { 4 | "jsr:@oak/commons@1": "1.0.1", 5 | "jsr:@std/assert@1": "1.0.14", 6 | "jsr:@std/bytes@1": "1.0.6", 7 | "jsr:@std/crypto@1": "1.0.5", 8 | "jsr:@std/encoding@1": "1.0.10", 9 | "jsr:@std/encoding@^1.0.10": "1.0.10", 10 | "jsr:@std/http@1": "1.0.20", 11 | "jsr:@std/internal@^1.0.10": "1.0.10", 12 | "jsr:@std/media-types@1": "1.1.0", 13 | "jsr:@std/path@1": "1.1.2" 14 | }, 15 | "jsr": { 16 | "@oak/commons@1.0.1": { 17 | "integrity": "889ff210f0b4292591721be07244ecb1b5c118742f5273c70cf30d7cd4184d0c", 18 | "dependencies": [ 19 | "jsr:@std/assert", 20 | "jsr:@std/bytes", 21 | "jsr:@std/crypto", 22 | "jsr:@std/encoding@1", 23 | "jsr:@std/http", 24 | "jsr:@std/media-types" 25 | ] 26 | }, 27 | "@std/assert@1.0.14": { 28 | "integrity": "68d0d4a43b365abc927f45a9b85c639ea18a9fab96ad92281e493e4ed84abaa4" 29 | }, 30 | "@std/bytes@1.0.6": { 31 | "integrity": "f6ac6adbd8ccd99314045f5703e23af0a68d7f7e58364b47d2c7f408aeb5820a" 32 | }, 33 | "@std/crypto@1.0.5": { 34 | "integrity": "0dcfbb319fe0bba1bd3af904ceb4f948cde1b92979ec1614528380ed308a3b40" 35 | }, 36 | "@std/encoding@1.0.10": { 37 | "integrity": "8783c6384a2d13abd5e9e87a7ae0520a30e9f56aeeaa3bdf910a3eaaf5c811a1" 38 | }, 39 | "@std/http@1.0.20": { 40 | "integrity": "b5cc33fc001bccce65ed4c51815668c9891c69ccd908295997e983d8f56070a1", 41 | "dependencies": [ 42 | "jsr:@std/encoding@^1.0.10" 43 | ] 44 | }, 45 | "@std/internal@1.0.10": { 46 | "integrity": "e3be62ce42cab0e177c27698e5d9800122f67b766a0bea6ca4867886cbde8cf7" 47 | }, 48 | "@std/media-types@1.1.0": { 49 | "integrity": "c9d093f0c05c3512932b330e3cc1fe1d627b301db33a4c2c2185c02471d6eaa4" 50 | }, 51 | "@std/path@1.1.2": { 52 | "integrity": "c0b13b97dfe06546d5e16bf3966b1cadf92e1cc83e56ba5476ad8b498d9e3038", 53 | "dependencies": [ 54 | "jsr:@std/internal" 55 | ] 56 | } 57 | }, 58 | "redirects": { 59 | "https://cdn.pika.dev/lodash-es": "https://cdn.skypack.dev/lodash-es" 60 | }, 61 | "remote": { 62 | "https://cdn.skypack.dev/-/lodash-es@v4.17.21-Toh2DxDo3SDNcOZcXzc1/dist=es2019,mode=imports/optimized/lodash-es.js": "4a1b35d34b5e0d3ae68aa46ddaabb9700ccecb75b830974db7c46a271f10daa8", 63 | "https://cdn.skypack.dev/lodash-es": "d59c89cfa22b7512b8da88fda322bad35a6a40f2fb6ba7c2c0295105e393451b", 64 | "https://deno.land/x/oak@v17.1.6/application.ts": "69fb6462eed013562ee61239e60ea77e5df3abb2b0df34568593b9774d72e98f", 65 | "https://deno.land/x/oak@v17.1.6/body.ts": "f91d8e0298abbabe6acb543d1090e2a41aa665375918a575d72bd6b98b538e40", 66 | "https://deno.land/x/oak@v17.1.6/context.ts": "e04c3d67d68ee01a279aeded457b0d66255450593dacab22251e7eb0cf6a92e5", 67 | "https://deno.land/x/oak@v17.1.6/deps.ts": "c71a9421d2ead7803468cd40559cf122ee91d4e81e8a3a98706956f6654e2550", 68 | "https://deno.land/x/oak@v17.1.6/http_server_bun.ts": "c7f3eb6464d4f047fcc9335e632ffb6bfc24e5ef7dc9a53017a6e453d4197e4b", 69 | "https://deno.land/x/oak@v17.1.6/http_server_native.ts": "34bab402cc9b6fdf53706699ac2c2ab88faf5c14be2ae18aa105bdc4fd6a8471", 70 | "https://deno.land/x/oak@v17.1.6/http_server_native_request.ts": "aa98a2f4bbf6f7651c62eb0332a95a1b0faff1d76f7a07fa8bd600766eb24488", 71 | "https://deno.land/x/oak@v17.1.6/http_server_node.ts": "bfbf7585fcda5a1464cd0f904ec97cbb4d67367757f3ed8cdc99a590a94b34e1", 72 | "https://deno.land/x/oak@v17.1.6/middleware.ts": "a701caf9d872b93d26759f77c7ad545cb29bc3d197c8375b79b2fbe7e9e60958", 73 | "https://deno.land/x/oak@v17.1.6/middleware/etag.ts": "f5cf8eb2a7c99ae7e11a4e31dc60beda398aec7a08be343e0de6b632f8064e4d", 74 | "https://deno.land/x/oak@v17.1.6/middleware/proxy.ts": "e611b7d45f58a1b2caa1cb6c435774822d7b56aa136b8dbb8691fb52d07c5182", 75 | "https://deno.land/x/oak@v17.1.6/middleware/serve.ts": "66f1e405ac006bfa863e8852092e03951b93dd4ba8381996a719d93d00aa62fe", 76 | "https://deno.land/x/oak@v17.1.6/mod.ts": "1f42341a6138310eceaf7b8e9b72be4d2a913817d1e823090dee4e7d27c68e98", 77 | "https://deno.land/x/oak@v17.1.6/node_shims.ts": "e411aef698dca26dfc577d8581ddab678f528bd52bf681337f3c3bcc73845a0a", 78 | "https://deno.land/x/oak@v17.1.6/request.ts": "eb3cdbb761c04ffc82267b6104c7534662d265054ed3d16b25078dbd00654005", 79 | "https://deno.land/x/oak@v17.1.6/response.ts": "483f8ddd7618325e6ac28f88a3ea9926a09b3c90fa53b481a7a5202d23a0755f", 80 | "https://deno.land/x/oak@v17.1.6/router.ts": "e8eb2f88806dfdd303f3a663fefb7d9e614342bf40738692e9ef4b2243e1bccd", 81 | "https://deno.land/x/oak@v17.1.6/send.ts": "42faed583f218ed85d5da7704f36b385537947ec4de6125e20ad8acbfe8d8f68", 82 | "https://deno.land/x/oak@v17.1.6/testing.ts": "d6489e78d689da08b9896cd0b9b9add243466b407ce6fd63d38e29f8c0a19f5c", 83 | "https://deno.land/x/oak@v17.1.6/types.ts": "0e74c6c46e0fcfddd87e90fe0216c4ae50c73b113e06d3bdc4283afc7b2570d6", 84 | "https://deno.land/x/oak@v17.1.6/utils/clone_state.ts": "5a0784d802b86cc3dbf415dfd286025f03a261b3a8f9b3b6fd671be8e51ff027", 85 | "https://deno.land/x/oak@v17.1.6/utils/consts.ts": "9e14324837558d7af3d4bfc8ba5f13216a0b5d2f8dac14a3a782bc1bbfb756ef", 86 | "https://deno.land/x/oak@v17.1.6/utils/create_promise_with_resolvers.ts": "f7eeaf65ffa7b6cef03b8dc3fa3a3e35ae5553c6abf1a2260d7797e076acd63a", 87 | "https://deno.land/x/oak@v17.1.6/utils/decode.ts": "434802a09534a26cc8b8cd009ecc422b4695d22859021fe34f8093784b2483b7", 88 | "https://deno.land/x/oak@v17.1.6/utils/decode_component.ts": "d68e6da33bf6e733d218c0b7ce7112520640e836f4cfa2760c4aee8facf1c581", 89 | "https://deno.land/x/oak@v17.1.6/utils/encode_url.ts": "16b213d70f5e211fb3633f97c704f9613d2f8033669d59e0c9ca4fc26551fad6", 90 | "https://deno.land/x/oak@v17.1.6/utils/resolve_path.ts": "aa39d54a003b38fee55f340a0cba3f93a7af85b8ddd5fbfb049a98fc0109b36d", 91 | "https://deno.land/x/oak@v17.1.6/utils/streams.ts": "c85ae197f5046d58d5a3e42221254a6c8e63172f9f01b77631e480e1dcc90e05", 92 | "https://deno.land/x/oak@v17.1.6/utils/type_guards.ts": "766b94850c9058a41ad8beac5b6df5a55cd5445bf77a356b520b6cb47f488697" 93 | }, 94 | "workspace": { 95 | "packageJson": { 96 | "dependencies": [ 97 | "npm:@riotjs/cli@10", 98 | "npm:@riotjs/compiler@10", 99 | "npm:@riotjs/hydrate@10", 100 | "npm:@riotjs/route@10", 101 | "npm:@riotjs/ssr@10", 102 | "npm:@rollup/plugin-commonjs@^28.0.6", 103 | "npm:@rollup/plugin-node-resolve@^16.0.1", 104 | "npm:@rollup/plugin-typescript@^12.1.4", 105 | "npm:erre@^3.0.1", 106 | "npm:riot@10", 107 | "npm:rollup-plugin-riot@10" 108 | ] 109 | } 110 | } 111 | } 112 | --------------------------------------------------------------------------------