### Example: Listening to Single and All Events with `el.on`

Source: https://v3.riotjs.vercel.app/api/observable

Illustrates how to attach a callback to a specific event ('start') and how to use the wildcard '*' to listen for all events on an observable instance, capturing the event name and parameters.

```JavaScript
// listen to single event
el.on('start', function(args) {

})

// listen all the events of this observable
el.on('*', function(event, param1, param2) {
  // event will be the name of any event triggered
  // do something with the parameters
})
```

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

### Configuring and Using Babel 6 with Riot.js

Source: https://v3.riotjs.vercel.app/v2/zh/guide/compiler

This snippet details the steps to set up Babel 6 for Riot.js, including installing necessary presets and core Babel packages, configuring the .babelrc file, and using the Riot CLI with Babel. It also shows how to split the compilation process for ES6 and ES5 output and provides an example of Babel plugin configuration.

```Shell
npm install babel-preset-es2015-riot --save-dev
npm install babel-core --save-dev
```

```JSON
{ "presets": ["es2015-riot"] }
```

```Shell
riot --type babel source.tag
```

```JSON
{
  "plugins": [
    ["transform-es2015-modules-commonjs", { "allowTopLevelThis": true }]
  ]
}
```

```Shell
riot tags/folder dist/es6.tags.js
babel es6.tags.js --out-file tags.js
```

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

### Compile Riot.js Tags with TypeScript Preprocessor

Source: https://v3.riotjs.vercel.app/ja/guide/compiler

This snippet demonstrates how to use TypeScript for Riot.js tag compilation. It provides the command-line option, an example Riot.js tag with TypeScript syntax, and the necessary npm installation command for the `typescript-simple` package.

```Shell
riot --type typescript source.tag
```

```TypeScript
<test>

  <h3>{ test }</h3>

  const test: string = 'JavaScript';
  this.test = test;

</test>
```

```Shell
npm install typescript-simple
```

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

### Install Riot.js Command Line Interface

Source: https://v3.riotjs.vercel.app/guide/compiler

Instructions to install the Riot.js command-line executable globally using npm, which is required for server-side pre-compilation tasks.

```Shell
npm install riot -g
```

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

### Install Pug Globally via npm

Source: https://v3.riotjs.vercel.app/guide/compiler

This command installs the Pug templating engine globally using npm. A global installation makes the `pug` command-line interface available system-wide, which is necessary if you intend to use Pug directly or as a pre-processor for tools like Riot.js.

```shell
npm install pug -g
```

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

### Using LiveScript with Riot.js

Source: https://v3.riotjs.vercel.app/v2/zh/guide/compiler

This snippet illustrates how to use LiveScript as a pre-processor for Riot.js tags. It provides the command-line option to enable LiveScript processing for both tag content and expressions, an example of a Riot.js tag with LiveScript logic, and the npm command to install LiveScript globally.

```Shell
riot --type livescript --expr source.tag
```

```HTML
<kids>

<h3 each={ kids[1 .. 2] }>{ name }</h3>

# Here are the kids
this.kids =
* name: \Max
* name: \Ida
* name: \Joe

</kids>
```

```Shell
npm install LiveScript -g
```

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

### Install Jade Globally for Riot.js

Source: https://v3.riotjs.vercel.app/v2/guide/compiler

This command installs the Jade (now Pug) HTML pre-processor globally via npm. Installing Jade is necessary to enable its use with Riot.js for template compilation.

```Shell
npm install jade -g
```

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

### Using TypeScript with Riot.js

Source: https://v3.riotjs.vercel.app/v2/zh/guide/compiler

This snippet demonstrates how to compile Riot.js tags using TypeScript. It includes the command-line flag for the TypeScript pre-processor, an example of a custom tag written in TypeScript, and the npm command to install the required TypeScript simple package.

```Shell
riot --type typescript source.tag
```

```HTML
<test>

  <h3>{ test }</h3>

  var test: string = 'JavaScript';
  this.test = test;

</test>
```

```Shell
npm install typescript-simple
```

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

### Riot.js `mount` Method Usage Examples

Source: https://v3.riotjs.vercel.app/guide

Demonstrates various ways to use the `riot.mount()` method to initialize Riot.js components on a page. Examples include mounting all custom tags, a specific element by ID, or multiple selected elements by tag name.

```JavaScript
// mount all custom tags on the page
riot.mount('*')

// mount an element with a specific id
riot.mount('#my-element')

// mount selected elements
riot.mount('todo, forum, comments')
```

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

### Install Riot.js CLI for Pre-Compilation

Source: https://v3.riotjs.vercel.app/v2/guide/compiler

This command demonstrates how to install the Riot.js command-line interface (CLI) globally using npm. The CLI is essential for server-side pre-compilation of Riot.js tags, offering benefits like performance and universal application support.

```Shell
npm install riot -g
```

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

### Install TypeScript Simple via npm

Source: https://v3.riotjs.vercel.app/guide/compiler

This command installs the `typescript-simple` package, which is used by Riot.js for transforming TypeScript code within tags.

```Shell
npm install typescript-simple
```

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

### Install TypeScript Simple for Riot.js

Source: https://v3.riotjs.vercel.app/v2/guide/compiler

This command installs the `typescript-simple` package, which is used by Riot.js to perform the transformation of TypeScript code within tags.

```Shell
npm install typescript-simple
```

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

### Compile Riot.js Tags with LiveScript Preprocessor

Source: https://v3.riotjs.vercel.app/ja/guide/compiler

This section explains how to compile Riot.js tags using LiveScript, including support for expressions. It provides the command to enable the LiveScript preprocessor, an example Riot.js tag written in LiveScript, and the command to install LiveScript.

```Shell
riot --type livescript --expr source.tag
```

```LiveScript
<kids>

<h3 each={ kids[1 .. 2] }>{ name }</h3>

# Here are the kids
this.kids =
* name: \Max
* name: \Ida
* name: \Joe

</kids>
```

```Shell
npm install LiveScript -g
```

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

### Using Jade for HTML Pre-processing in Riot.js

Source: https://v3.riotjs.vercel.app/v2/zh/guide/compiler

This snippet shows how to use Jade (Pug) as an HTML pre-processor for Riot.js tags. It includes the command-line flag to specify Jade as the template engine, an example of a Riot.js tag using Jade syntax, and the npm command to install the Jade package.

```Shell
riot --template jade source.tag
```

```Jade
sample
  p test { value }
  script(type='text/coffee').
    @value = 'sample'
```

```Shell
npm install jade
```

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

### Install Riot.js via Package Managers

Source: https://v3.riotjs.vercel.app/download

These commands demonstrate how to install the Riot.js library using popular JavaScript package managers, Bower and NPM. This is the recommended way to include Riot.js in your web projects for dependency management.

```Shell
bower install riot
```

```Shell
npm install riot
```

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

### Start Riot.js Application with Configuration

Source: https://v3.riotjs.vercel.app/v1

This snippet shows how to initiate the Riot.js application by passing a configuration object to the `admin` function. This typically includes initial path and root element, triggering the application's 'ready' event and initializing all bound modules.

```JavaScript
admin({ page: location.hash.slice(2), root: $("body") })
```

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

### Install Babel Preset for Riot.js ES2015

Source: https://v3.riotjs.vercel.app/guide/compiler

This command installs the `babel-preset-es2015-riot` package as a development dependency, which is required to properly transpile ES6 code within Riot.js tags using Babel.

```Shell
npm install babel-preset-es2015-riot --save-dev
```

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

### Install LiveScript Globally via npm

Source: https://v3.riotjs.vercel.app/guide/compiler

This command installs the LiveScript compiler globally on your system using npm, making it available for use by the Riot.js CLI and other tools.

```Shell
npm install LiveScript -g
```

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

### Install Riot.js using npm

Source: https://v3.riotjs.vercel.app/v2/release-notes

This command installs the Riot.js library via npm, ensuring compatibility with various Node.js environments, including io.js and Node.js 0.11.

```Shell
npm install
```

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

### Install Riot.js using Package Managers

Source: https://v3.riotjs.vercel.app/v2/download

Install Riot.js v2.6.9 using popular JavaScript package managers like Bower, Component, or NPM. These commands fetch the Riot.js library and its dependencies, making it available for use in your project.

```Shell
bower install riot
```

```Shell
component install riot/riot
```

```Shell
npm install riot
```

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

### Riot.js Application Initialization with CommonJS (Node.js/Browserify)

Source: https://v3.riotjs.vercel.app/guide/compiler

This JavaScript code demonstrates how to initialize a Riot.js application in a CommonJS environment, commonly used in Node.js or with bundlers like Browserify. It uses `require()` to import the 'riot' library and 'tags' (compiled Riot.js components), then mounts all components (`*`) to start the application.

```javascript
var riot = require('riot')
var tags = require('tags')

riot.mount('*')
```

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

### Compile Riot.js Tags with CoffeeScript Preprocessor

Source: https://v3.riotjs.vercel.app/ja/guide/compiler

This snippet shows the command to compile Riot.js tags using the CoffeeScript preprocessor, enabling CoffeeScript expressions within templates. It also includes an example Riot.js tag written in CoffeeScript and the necessary installation command.

```Shell
riot --type coffee --expr source.tag
```

```CoffeeScript
<kids>

  <h3 each={ kids[1 .. 2] }>{ name }</h3>

  # Here are the kids
  this.kids = [
    { name: "Max" }
    { name: "Ida" }
    { name: "Joe" }
  ]

</kids>
```

```Shell
npm install coffee-script -g
```

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

### Install CoffeeScript Globally via npm

Source: https://v3.riotjs.vercel.app/guide/compiler

This command installs the CoffeeScript compiler globally on your system using npm, making it available for use by the Riot.js CLI and other tools.

```Shell
npm install coffee-script -g
```

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

### Install Babel Core Globally via npm

Source: https://v3.riotjs.vercel.app/guide/compiler

This command installs the `babel-core` package globally, providing the core Babel transpilation functionality necessary for processing ES6 code.

```Shell
npm install babel-core -g
```

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

### Riot.js Login API Observable

Source: https://v3.riotjs.vercel.app/v2/guide/application-design

This JavaScript snippet defines an observable `auth` object for handling login functionality. It includes a `login` method that makes an AJAX GET request to `/api` with provided parameters and triggers a 'login' event upon successful response, allowing other components to react.

```JavaScript
// Login API
var auth = riot.observable()

auth.login = function(params) {
  $.get('/api', params, function(json) {
    auth.trigger('login', json)
  })
}
```

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

### Riot.js Router Installation and Import

Source: https://v3.riotjs.vercel.app/ja/api/route

This snippet demonstrates how to include the `riot-route` library in your project, either by directly linking the script in HTML or by importing it using ES6 syntax (or CommonJS `require`).

```html
<script src="path/to/dist/route.js"></script>
```

```javascript
import route from 'riot-route' // var route = require('riot-route') is also ok
```

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

### Riot.js Application Mounting

Source: https://v3.riotjs.vercel.app/v2/guide/application-design

This HTML snippet shows how the Riot.js `<login>` component is mounted into the DOM. The `riot.mount` function initializes the 'login' tag and passes the `auth` observable as options, making it accessible within the component for shared state and event handling.

```HTML
<body>
  <login></login>
  <script>riot.mount('login', auth)</script>
</body>
```

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

### Riot.js Router Listener Setup

Source: https://v3.riotjs.vercel.app/api/route

Defines methods for registering callbacks to handle URL changes, supporting both general callbacks that receive URL segments as arguments and filtered callbacks with wildcard matching for specific routes.

```APIDOC
route(callback)
  - Executes the given `callback` when the URL changes.
  - Parameters:
    - callback: Function (collection, id, action, ...) - The function to execute. Arguments are URL segments parsed from the path.
  - Example:
    route(function(collection, id, action) {

    })
    // For URL 'customers/987987/edit', arguments would be: collection = 'customers', id = '987987', action = 'edit'

route(filter, callback)
  - Executes the given `callback` when the URL changes and it matches the `filter`.
  - Parameters:
    - filter: String - The URL pattern to match. Supports wildcards:
      - `*`: Matches any single URL segment (e.g., `/fruit/*` matches `/fruit/apple`). Internally converted to `([^/?#]+?)`.
      - `..`: Matches any remaining part of the URL, including slashes (e.g., `/old..` matches `/old/and/anything`). Internally converted to `.*`.
    - callback: Function (arg1, arg2, ...) - The function to execute. Arguments are captured wildcard values.
  - Examples:
    // matches to just `/fruit`
    route('/fruit', function(name) {
      console.log('The list of fruits')
    })

    // if the url change to `/fruit/apple`, this will match and catch 'apple' as `name`
    route('/fruit/*', function(name) {
      console.log('The detail of ' + name)
    })

    // if the url change to `/blog/2015-09/01`, this will match and catch '2015', '09' and '01'
    route('/blog/*-*/*', function(year, month, date) {
      console.log('The page of ' + year + '-' + month + '-' + date)
    })

    // if the url includes search queries, e.g., `/search?keyword=Apple`
    route('/search..', function() {
      var q = route.query()
      console.log('Search keyword: ' + q.keyword)
    })

    // alternative for search queries, but `*` matches only alphanumerics and underscore
    route('/search?keyword=*', function(keyword) {
      console.log('Search keyword: ' + keyword)
    })
```

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

### Riot Router: Start and Stop Router Lifecycle

Source: https://v3.riotjs.vercel.app/v2/api/route

Manages the lifecycle of the Riot Router. `riot.route.start()` begins listening for URL changes, while `riot.route.stop()` halts all routing, clearing listeners and callbacks. `riot.route.start(true)` is a shorthand to start the router and immediately execute routing for the current URL. `subRoute.stop()` allows stopping specific routing contexts.

```APIDOC
riot.route.start()
  - >= v2.3
  - Starts listening for URL changes. Riot.js does not start its router automatically; this method must be called explicitly.
  - Example:
    riot.route.start()

riot.route.start(autoExec)
  - >= v2.3
  - Starts listening for URL changes and immediately executes routing for the current URL.
  - Parameters:
    - autoExec: A boolean. If `true`, `riot.route.exec()` is called after starting.
  - Example:
    riot.route.start(true)

riot.route.stop()
  - Stops all active routings. This removes listeners and clears all registered callbacks.
  - Example:
    riot.route.stop() // clear all the old router callbacks
    riot.route.start() // start again

subRoute.stop()
  - >= v2.3
  - Stops routings only for a specific sub-route context, removing its listeners and clearing its callbacks.
  - Example:
    var subRoute = riot.route.create()
    subRoute('/fruit/apple', function() { /* */ })
    subRoute.stop()
```

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

### Riot.js Compiler and Settings Configuration

Source: https://v3.riotjs.vercel.app/v2/release-notes

Provides examples for configuring the Riot.js compiler, including setting custom file extensions and defining custom bracket syntax for expressions. It also shows how to check the Riot.js version.

```Shell
riot --ext html
```

```JavaScript
riot.settings.brackets = '${ }'
```

```Shell
riot --version
```

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

### Install Babel 6 Preset for Riot.js

Source: https://v3.riotjs.vercel.app/v2/guide/compiler

This command installs the `babel-preset-es2015-riot` package as a development dependency, which is required for using Babel 6 with Riot.js to transpile ES2015 (ES6) features.

```Shell
npm install babel-preset-es2015-riot --save-dev
```

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

### Riot.js CLI Configuration File Example (riot.config.js)

Source: https://v3.riotjs.vercel.app/v2/guide/compiler

This JavaScript configuration file defines paths for source and distribution, file extensions, and custom parsers for HTML, CSS, and JavaScript. It also allows extending default parser options, enabling advanced pre-processing workflows for Riot.js tags.

```JavaScript
export default {
  from: 'tags/src',
  to: 'tags/dist',
  // files extension
  ext: 'foo',
  // html parser
  template: 'foo',
  // js parser
  type: 'baz',
  // css parser
  style: 'bar',
  parsers: {
    html: {
      foo: (html, opts, url) => require('foo').compile(html),
    },
    css: {
      bar: (tagName, css, opts, url) => require('bar').compile(css),
    },
    js: {
      baz: (js, opts, url) => require('baz').compile(js),
    },
  },
  // special options that may be used to extend
  // the default riot parsers options
  parserOptions: {
    js: {},
    template: {},
    style: {}
  }
};
```

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

### Install CoffeeScript Globally for Riot.js

Source: https://v3.riotjs.vercel.app/v2/guide/compiler

This command installs the CoffeeScript compiler globally via npm, making it available for Riot.js to use as a pre-processor for compiling tags written in CoffeeScript.

```Shell
npm install coffee-script -g
```

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

### Server-Side Rendering with Riot.js

Source: https://v3.riotjs.vercel.app/v2/api

Provides examples for server-side rendering of Riot.js tags. It demonstrates synchronous rendering using `riot.render()` and asynchronous rendering using `riot.renderAsync()`, showing how to handle the promise for async operations and how to trigger the 'ready' event within a tag.

```JavaScript
// render "my-tag" to html
var mytag = require('my-tag')
riot.render(mytag, { foo: 'bar' })
```

```JavaScript
riot.renderAsync(tagName, opts)
  .then(function(html) {
    // do something with your html
  })
  .catch(function(e) {
    // it took too much time!
  })
```

```JavaScript
<async-rendering>
  <p>{ message }</p>

  this.message = 'hi'

  setTimeout(function() {
    // triggering the "ready" event will resolve the promise
    this.trigger('ready')
  }.bind(this), 500)

</async-rendering>
```

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

### Riot.js Tag Example in LiveScript

Source: https://v3.riotjs.vercel.app/v2/guide/compiler

This Riot.js tag demonstrates using LiveScript for tag logic and expressions, including the `each` attribute for iteration. It showcases how to define data and render it within a tag using LiveScript syntax.

```LiveScript
<kids>

<h3 each={ kids[1 .. 2] }>{ name }</h3>


```

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

### Clone Riot.js Repository from GitHub

Source: https://v3.riotjs.vercel.app/v2/download

Clone the official Riot.js source code repository from GitHub using Git. This provides access to the full project, including development files and history, for contributions or advanced usage.

```Git
git clone git@github.com:riot/riot.git
```

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

### Riot.js Custom Tag Definition Example

Source: https://v3.riotjs.vercel.app/index

This code defines a Riot.js custom tag named 'todo', demonstrating how to encapsulate HTML structure, CSS styling, and JavaScript logic within a single reusable component. It includes examples of data iteration (`each`), event handling (`onsubmit`), and referencing DOM elements (`ref`) for interactive functionality.

```HTML
<todo>

  <!-- layout -->
  <h3>{ opts.title }</h3>

  <ul>
    <li each={ item, i in items }>{ item }</li>
  </ul>

  <form onsubmit={ add }>
    <input ref="input">
    <button>Add #{ items.length + 1 }</button>
  </form>

  <!-- style -->
  <style>
    h3 {
      font-size: 14px;
    }
  </style>

  <!-- logic -->
  <script>
    this.items = []

    add(e) {
      e.preventDefault()
      var input = this.refs.input
      this.items.push(input.value)
      input.value = ''
    }
  </script>

</todo>
```

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

### Example: Making an Object Observable and Triggering Events

Source: https://v3.riotjs.vercel.app/api/observable

Demonstrates how to use `riot.observable(this)` within a constructor function to make instances observable, and then how to listen to and trigger events on that instance.

```JavaScript
function Car() {

  // Make Car instances observable
  riot.observable(this)

  // listen to 'start' event
  this.on('start', function() {
    // engine started
  })

}

// make a new Car instance
var car = new Car()

// trigger 'start' event
car.trigger('start')
```

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

### Riot.js CLI Pre-compilation Commands

Source: https://v3.riotjs.vercel.app/guide/compiler

Provides various command-line examples for using the `riot` executable to compile tag files. It covers compiling single files, compiling to specific folders or paths, and compiling multiple files from a source folder into a target folder or a single concatenated file.

```Shell
# compile a file to current folder
riot some.tag

# compile file to target folder
riot some.tag some_folder

# compile file to target path
riot some.tag some_folder/some.js

# compile all files from source folder to target folder
riot some/folder path/to/dist

# compile all files from source folder to a single concatenated file
riot some/folder all-my-tags.js
```

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

### Install LiveScript Globally for Riot.js

Source: https://v3.riotjs.vercel.app/v2/guide/compiler

This command installs LiveScript globally using npm, which is required for processing Riot.js tags that utilize LiveScript attributes or syntax.

```Shell
npm install LiveScript -g
```

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

### Install Babel Core Globally for Riot.js

Source: https://v3.riotjs.vercel.app/v2/guide/compiler

This command installs the `babel-core` package globally via npm, which is the core library for Babel 6 transformations, necessary for Riot.js to utilize Babel as a pre-processor.

```Shell
npm install babel-core -g
```

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

### Riot.js Tag Example in CoffeeScript

Source: https://v3.riotjs.vercel.app/v2/guide/compiler

This Riot.js tag demonstrates using CoffeeScript for tag logic and expressions, including the `each` attribute for iteration. It showcases how to define data and render it within a tag using CoffeeScript syntax.

```CoffeeScript
<kids>

  <h3 each={ kids[1 .. 2] }>{ name }</h3>

  # Here are the kids
  this.kids = [
    { name: "Max" }
    { name: "Ida" }
    { name: "Joe" }
  ]

</kids>
```

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

### Example: Triggering Events with and without Arguments using `el.trigger`

Source: https://v3.riotjs.vercel.app/api/observable

Illustrates how to trigger events on an observable instance, showing both simple event triggering and passing multiple arguments to the event's callback functions.

```JavaScript
el.trigger('start')
el.trigger('render')

// listen to 'start' event and expect extra arguments
el.on('start', function(engine_details, is_rainy_day) {

})

// trigger start event with extra parameters
el.trigger('start', { fuel: 89 }, true)
```

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

### Mounting Custom Tags with riot.mount

Source: https://v3.riotjs.vercel.app/ja/api

Examples demonstrating various ways to mount custom tags using `riot.mount`. This includes mounting by selector, mounting all tags, and mounting a specific tag onto a designated DOM node.

```JavaScript
// <pricing>要素に、カスタムタグをマウントする
var tags = riot.mount('pricing')

// .customerクラスが指定された要素にカスタムタグをマウントする
var tags = riot.mount('.customer')

// <account>をマウントし、APIオブジェクトをオプションとして渡す
var tags = riot.mount('account', api)
```

```JavaScript
riot.mount('my-tag', function() {
  return {
    custom: 'option'
  }
})
```

```JavaScript
riot.mount('*')
```

```JavaScript
// カスタムタグ"my-tag"をdiv#mainにマウントして、オプションとしてapiを渡す
var tags = riot.mount('div#main', 'my-tag', api)
```

```JavaScript
// #slideノードに"users"タグをマウントし、オプションとしてapiを渡す
riot.mount(document.getElementById('slide'), 'users', api)
```

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

### Riot.js Tag Mixin Example

Source: https://v3.riotjs.vercel.app/api

Illustrates how to define and use a mixin object to extend a Riot.js tag's functionality. The example shows an `init` method for mixin initialization and custom methods like `getOpts` and `setOpts` that interact with the tag's options.

```Riot.js
var OptsMixin = {
  // init method is a special one which can initialize
  // the mixin when it's loaded to the tag and is not
  // accessible from the tag its mixed in
  // `opts` here is the option object received by the tag as well
  init: function(opts) {
    this.on('updated', function() { console.log('Updated!') })
  },

  getOpts: function() {
    return this.opts
  },

  setOpts: function(opts, update) {
    this.opts = opts
    if (!update) this.update()
    return this
  }
}

<my-tag>
  <h1>{ opts.title }</h1>

  this.mixin(OptsMixin)
</my-tag>
```

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

### Riot.js Integration with AMD and CommonJS Loaders

Source: https://v3.riotjs.vercel.app/v2/guide/compiler

These JavaScript examples demonstrate how to integrate compiled Riot.js tags with AMD (e.g., RequireJS) and CommonJS (e.g., Browserify) module loaders. Both examples show how to define or require the 'riot' library and then mount all compiled tags using `riot.mount('*')`.

```JavaScript
define(['riot', 'tags'], function (riot) {
  riot.mount('*')
})
```

```JavaScript
var riot = require('riot')
var tags = require('tags')

riot.mount('*')
```

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

### Compile Riot.js Tags with Jade Pre-processor

Source: https://v3.riotjs.vercel.app/v2/guide/compiler

This shell command demonstrates how to use the Riot.js CLI to compile a tag file (`source.tag`) by specifying Jade as the HTML pre-processor. Ensure Jade is installed globally for this command to function correctly.

```Shell
riot --template jade source.tag
```

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

### Example: Listening to an Event Only Once with `el.one`

Source: https://v3.riotjs.vercel.app/api/observable

Shows how to use `el.one` to ensure a callback function runs only a single time, even if the 'start' event is triggered multiple times subsequently.

```JavaScript
// run the function once, even if 'start' is triggered multiple times
el.one('start', function() {

})
```

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

### Server-side Tag Loading with riot.require

Source: https://v3.riotjs.vercel.app/ja/api

Example of loading and compiling Riot.js tags at runtime on the server-side using `riot.require`. This allows specifying compiler options, such as using a preprocessor.

```JavaScript
var tag = riot.require('./my-tag.jade', { template: 'jade' })
```

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

### Sample Riot.js Tag with Embedded LiveScript Logic

Source: https://v3.riotjs.vercel.app/guide/compiler

A complete Riot.js tag example demonstrating the use of LiveScript for defining component logic and data. It showcases how to define an array and iterate over it using the `each` attribute, which also supports LiveScript syntax.

```LiveScript
<kids>

<h3 each={ kids[1 .. 2] }>{ name }</h3>

# Here are the kids
this.kids =
* name: \Max
* name: \Ida
* name: \Joe

</kids>
```

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

### Riot.js Customizing Expression Brackets

Source: https://v3.riotjs.vercel.app/v2/guide

Provides JavaScript examples for customizing the delimiters used for Riot.js expressions. The `riot.settings.brackets` property can be set to a string containing the desired start and end delimiters separated by a space.

```JavaScript
riot.settings.brackets = '${ }'
```

```JavaScript
riot.settings.brackets = '{{ }}'
```

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

### Mount a Riot.js Component on a Web Page

Source: https://v3.riotjs.vercel.app/v2/guide

This snippet illustrates the complete setup for mounting a Riot.js component (`<todo>`) within an HTML document. It includes the necessary script tags for Riot.js and the compiled component, followed by a JavaScript call to `riot.mount()` to render the component on the page.

```HTML
<body>

  <!-- place the custom tag anywhere inside the body -->
  <todo></todo>

  <!-- include riot.js -->
  <script src="riot.min.js"></script>

  <!-- include the tag -->
  <script src="todo.js" type="riot/tag"></script>

  <!-- mount the tag -->
  <script>riot.mount('todo')</script>

</body>
```

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

### Riot.js Pre-compiled Tag Integration

Source: https://v3.riotjs.vercel.app/guide/compiler

Illustrates the HTML structure for integrating pre-compiled Riot.js tags into a web application. This setup requires only the Riot.js runtime in the browser, as tags are included as standard JavaScript files.

```HTML
<!-- mount point -->
<my-tag></my-tag>

<!-- include riot.js only -->
<script src="https://cdn.jsdelivr.net/npm/riot@3.13/riot.min.js"></script>

<!-- include pre-compiled tags (normal javascript) -->
<script src="path/to/javascript/with-tags.js"></script>

<!-- mount the same way -->
<script>
riot.mount('*')
</script>
```

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

### Example Riot.js Tag with Jade and CoffeeScript

Source: https://v3.riotjs.vercel.app/v2/guide/compiler

This snippet illustrates a Riot.js tag written using Jade syntax for the HTML structure and CoffeeScript for the script block. It defines a simple paragraph with a bound value and initializes that value within the script section.

```Jade
sample
  p test { value }
  script(type='text/coffee').
    @value = 'sample'
```

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

### Riot.js Application Structure with Custom Tags

Source: https://v3.riotjs.vercel.app/v2/es

This example illustrates how a Riot.js application's main HTML structure can be composed entirely of custom tags, making the layout highly readable and modular. It also shows the 'riot.mount' call to initialize components across the application.

```HTML (Riot.js)
<body>

  <h1>Comunidad Acme</h1>

  <forum-header/>

  <forum-content>
    <forum-threads/>
    <forum-sidebar/>
  </forum-content>

  <forum-footer/>

  <script>riot.mount('*', { api: forum_api })</script>
</body>
```

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

### Sample Riot.js Tag with Embedded CoffeeScript Logic

Source: https://v3.riotjs.vercel.app/guide/compiler

A complete Riot.js tag example demonstrating the use of CoffeeScript for defining component logic and data. It showcases how to define an array and iterate over it using the `each` attribute, which also supports CoffeeScript syntax.

```CoffeeScript
<kids>

  <h3 each={ kids[1 .. 2] }>{ name }</h3>

  # Here are the kids
  this.kids = [
    { name: "Max" }
    { name: "Ida" }
    { name: "Joe" }
  ]

</kids>
```

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

### Riot.js Application Lifecycle: Data Loading and Module Initialization

Source: https://v3.riotjs.vercel.app/v1

This JavaScript code illustrates a typical application startup flow. It covers loading initial data from a backend, constructing the application's API (e.g., a User object), triggering a 'ready' event for module loading, and a 'load' event with view data. It also includes error handling for failed initialization and re-triggering 'load' after a successful user login.

```JavaScript
// 1. load initial data from server
backend.call("init", conf.page).always(function(data) {

  // 2. construct API, we only create a User object on this demo
  self.user = new User(self, data ? data.user : {}, backend)

  // 3. all ready --> modules are loaded
  self.trigger("ready")

// init was successful
}).done(function(data) {

  // 4. load event
  self.trigger("load", data.view)

// init failed
}).fail(function() {

  // listen once when user logs in
  self.user.one("login", function(data) {
    $.extend(self.user, data.user)

    // 4b. fire a load event after successful login
    self.trigger("load", data.view)

  })

})
```

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

### Clone Riot.js GitHub Repository

Source: https://v3.riotjs.vercel.app/download

This command allows developers to clone the official Riot.js source code repository from GitHub. Cloning the repository provides access to the full source code, development branches, and contribution opportunities.

```Shell
git clone git@github.com:riot/riot.git
```

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

### Riot.js Application Initialization with AMD (RequireJS)

Source: https://v3.riotjs.vercel.app/guide/compiler

This JavaScript snippet shows how to initialize a Riot.js application within an AMD environment, typically using RequireJS. It defines a module that depends on 'riot' and 'tags', then mounts all Riot.js components (`*`) once these dependencies are loaded, making the application ready for use.

```javascript
define(['riot', 'tags'], function (riot) {
  riot.mount('*')
})
```

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

### Compile Riot.js Tags with Pug (Jade) HTML Preprocessor

Source: https://v3.riotjs.vercel.app/ja/guide/compiler

This snippet shows how to use Pug (formerly Jade) as an HTML preprocessor for Riot.js tags. It includes the compilation command, an example Riot.js tag with Pug syntax for both HTML and script sections, and the installation command for the Pug package.

```Shell
riot --template pug source.tag
```

```Pug
todo
  h3 Todo
  ul
    li(each="{ items }")
      label(class="{ completed:done }")
        input(type="checkbox", checked="{ done }", onclick="{ parent.toggle }")
        = "{ title }"

  form(onsubmit="{add}")
    input(name="input", onkeyup="{edit}")
    button(disabled="{!text}")= "Add { items.length + 1 }"

  script.
    var self = this
    self.items = []
    self.disabled = true

    edit(e) {
      self.text = e.target.value
    }

    add(e) {
      if (this.text) {
        self.items.push({ title: this.text })
        this.text = this.input.value = ''
      }
    }

    toggle(e) {
      var item = e.item
      item.done = !item.done
      return true
    }
```

```Shell
npm install pug -g
```

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

### Bind Modules to Riot.js Admin Interface

Source: https://v3.riotjs.vercel.app/v1

These examples demonstrate how to register new modules with the `admin` interface. Each module is a function that receives the application's API as an argument, allowing for isolated and loosely-coupled application components.

```JavaScript
admin(function(api) {
  // module #1 logic, API is given as argument
})

admin(function(api) {
  // module #2 logic
})
```

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

### Mounting a Single Riot.js Component on a Page

Source: https://v3.riotjs.vercel.app/guide

Provides the basic HTML structure and JavaScript calls necessary to include Riot.js, a compiled tag's JavaScript output, and then mount a specific component (`<todo>`) onto the webpage. It outlines the typical setup for a Riot.js application.

```HTML
<body>

  <!-- place the custom tag anywhere inside the body -->
  <todo></todo>

  <!-- include riot.js -->
  <script src="riot.min.js"></script>

  <!-- include the tag javascript output generated with the riot compiler -->
  <script src="todo.js"></script>

  <!-- mount the tag -->
  <script>riot.mount('todo')</script>

</body>
```

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

### Mount Riot.js Components Using Various Selectors

Source: https://v3.riotjs.vercel.app/v2/guide

This example demonstrates the flexibility of the `riot.mount()` method, showing how to mount components using different selector types. It covers mounting all custom tags on the page, mounting a specific element by its ID, and mounting multiple components by providing a comma-separated list of tag names.

```JavaScript
// mount all custom tags on the page
riot.mount('*')

// mount an element with a specific id
riot.mount('#my-element')

// mount selected elements
riot.mount('todo, forum, comments')
```

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

### React Todo Application Example

Source: https://v3.riotjs.vercel.app/v2/ru/compare

This JavaScript code demonstrates a simple Todo application built with React. It showcases the use of `React.createClass` for component definition, state management with `getInitialState` and `setState`, event handling for input changes and form submission, and rendering with JSX, which mixes HTML directly within JavaScript.

```JavaScript
var TodoList = React.createClass({
  render: function() {
    var createItem = function(itemText) {
      return <li>{itemText}</li>;
    };
    return <ul>{this.props.items.map(createItem)}</ul>;
  }
});
var TodoApp = React.createClass({
  getInitialState: function() {
    return {items: [], text: ''};
  },
  onChange: function(e) {
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([this.state.text]);
    var nextText = '';
    this.setState({items: nextItems, text: nextText});
  },
  render: function() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.onChange} value={this.state.text} />
          <button>{'Add #' + (this.state.items.length + 1)}</button>
        </form>
      </div>
    );
  }
});

React.render(<TodoApp />, mountNode);
```

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

### Riot.js Custom Tag Indentation Rules

Source: https://v3.riotjs.vercel.app/v2/guide

This snippet illustrates the critical indentation rules for defining Riot.js custom tags within tag files. It shows that tags must start at the beginning of the line without any leading whitespace for proper compilation, contrasting working and failing examples.

```Riot.js
<!-- works -->
<my-tag>

</my-tag>

<!-- also works -->
<my-tag></my-tag>

  <!-- this fails, because of indentation -->
  <my-tag>

  </my-tag>
```

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

### Configure and Compile Riot.js Tags with ECMAScript 6 (ES6) Preprocessor

Source: https://v3.riotjs.vercel.app/ja/guide/compiler

This section details how to enable ES6 (Babel) as a preprocessor for Riot.js tags. It includes an example ES6 tag, installation commands for Babel presets and core, the required .babelrc configuration, and various compilation commands for ES6 and ES5 output.

```JavaScript
<test>

  <h3>{ test }</h3>

  const type = 'JavaScript'
  this.test = `This is ${type}`

</test>
```

```Shell
npm install babel-preset-es2015-riot --save-dev
```

```Shell
npm install babel-core -g
```

```JSON
{ "presets": ["es2015-riot"] }
```

```Shell
riot --type es6 source.tag
```

```Shell
riot tags/folder dist/es6.tags.js
```

```Shell
babel es6.tags.js --out-file tags.js
```

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

### Riot.js Custom Tag Definition Example

Source: https://v3.riotjs.vercel.app/v2/es

This snippet demonstrates how to define a custom component in Riot.js using a single file. It combines HTML for structure, scoped CSS for styling, and JavaScript for logic, showcasing a 'todo' component with an input form and a list.

```Riot.js
<todo>

  <!-- diseño -->
  <h3>{ opts.title }</h3>

  <ul>
    <li each={ item, i in items }>{ item }</li>
  </ul>

  <form onsubmit={ add }>
    <input>
    <button>Agregar #{ items.length + 1 }</button>
  </form>

  <!-- estilos -->
  <style scoped>
    h3 {
      font-size: 14px;
    }
  </style>

  <!-- lógica -->
  <script>
    this.items = []

    add(e) {
      var input = e.target[0]
      this.items.push(input.value)
      input.value = ''
    }
  </script>

</todo>
```

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

### Riot.js: Handling Multiple Events with `riot.observable` After Spaced Events Removal

Source: https://v3.riotjs.vercel.app/guide/migration-from-riot2

To achieve significant performance improvements, Riot.js 3's `riot.observable` no longer supports spaced event names (e.g., 'start stop') for binding multiple events simultaneously. Instead, developers must bind each event individually using separate `.on()` calls. Listening to `*` for all events remains supported.

```javascript
var el = riot.observable()

// not supported
el.on('start stop', function() { /* */ })
el.trigger('start stop')

// use this instead
function cb() {}
el
  .on('start', cb)
  .on('stop', cb)

el
  .trigger('start')
  .trigger('stop')
```

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

### Riot.js API Documentation

Source: https://v3.riotjs.vercel.app/v2/zh/api

Comprehensive API documentation for manually creating Riot.js tag instances using `riot.tag()` and the experimental `riot.Tag` class. It details parameters, usage, and important limitations for each method.

```APIDOC
riot.tag(tagName, html, [css], [attrs], [constructor])
  - Manually defines a new custom tag without using the compiler.
  - Parameters:
    - `tagName`: (string) The name of the tag.
    - `html`: (string) The page layout with expressions.
    - `css`: (string, optional) The tag's CSS.
    - `attrs`: (string, optional) String of tag attributes.
    - `constructor`: (function, optional) Initialization function called before tag expressions are evaluated and before the tag is loaded.
  - Limitations (due to bypassing compiler):
    1. Self-closing tags are not supported.
    2. Unquoted expressions are not supported (e.g., must be `value="{ val }"` not `value={ val }`).
    3. Boolean attributes are not supported (e.g., must be `__checked="{ flag }"` not `checked={ flag }`).
    4. ES6 method shorthand forms are not supported.
    5. Image sources must use `riot-src` (e.g., `<img riot-src={ src }>`) to avoid illegal server requests.
    6. Inline styles must use `riot-style` (e.g., `riot-style="color: { color }"`) for IE support.

riot.Tag(impl, conf, innerHTML)
  - Experimental API allowing developers to access internal Tag instances for advanced custom tag creation.
  - Parameters:
    - `impl`: (object) An object containing tag implementation details.
      - `tmpl`: (string) The tag template.
      - `fn(opts)`: (function) Callback function called when the mount event occurs.
      - `attrs`: (object) A key-value container object with HTML attributes for the root tag.
    - `conf`: (object) Configuration options for the tag instance.
      - `root`: (DOM node) The DOM node where the tag template will be loaded.
      - `opts`: (object) Tag parameters.
      - `isLoop`: (boolean) Whether used in a loop tag.
      - `hasImpl`: (boolean) Whether already registered with `riot.tag`.
      - `item`: (any) The loop item bound to this instance in a loop.
    - `innerHTML`: (string) HTML content used to replace embedded `yield` tags in the template.
  - Usage Note: Generally not recommended unless `riot.tag` or other Riot methods cannot meet specific requirements.
```

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

### Riot.js In-Browser Tag Compilation Setup

Source: https://v3.riotjs.vercel.app/v2/guide/compiler

This snippet demonstrates how to define and mount Riot.js custom tags directly within an HTML page. It uses `type="riot/tag"` for inlined and external tag definitions, includes the Riot.js compiler, and mounts all tags using `riot.mount('*')`.

```HTML
<!-- mount point -->
<my-tag></my-tag>

<!-- inlined tag definition -->
<script type="riot/tag">
  <my-tag>
    <h3>Tag layout</h3>
    <inner-tag />
  </my-tag>
</script>

<!-- <inner-tag/> is specified on external file -->
<script src="path/to/javascript/with-tags.js" type="riot/tag"></script>

<!-- include riot.js and the compiler -->
<script src="https://cdn.jsdelivr.net/riot/2.6/riot+compiler.min.js"></script>

<!-- mount normally -->
<script>
riot.mount('*')
</script>
```

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

### Initialize Global Riot.js Admin Module Interface

Source: https://v3.riotjs.vercel.app/v1

This JavaScript snippet sets up a single global 'admin' variable using `riot.observable`. It acts as the core interface for the application, allowing functions to be bound as new modules or a configuration object to start the application, returning the API instance when called without arguments.

```JavaScript
var global = is_node ? exports : window,
  instance

global.admin = riot.observable(function(arg) {

  if (!arg) return instance

  if ($.isFunction(arg)) {
    admin.on("ready", arg)

  } else {
    instance = new Admin(arg)

    instance.on("ready", function() {
      admin.trigger("ready", instance)
    })

  }

})
```

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

### Riot.js Application Structure with Custom Tags

Source: https://v3.riotjs.vercel.app/index

This snippet illustrates how to assemble a Riot.js application by embedding custom tags directly into the HTML body. It also shows the `riot.mount` function used to initialize and mount all custom tags (`*`) on the page, passing an optional `api` object for global data or services.

```HTML
<body>

  <h1>Acme community</h1>

  <forum-header/>

  <div class="content">
    <forum-threads/>
    <forum-sidebar/>
  </div>

  <forum-footer/>

  <script>riot.mount('*', { api: forum_api })</script>
</body>
```

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

### Mounting All Riot.js Custom Tags

Source: https://v3.riotjs.vercel.app/v2/api

Illustrates the use of the special '*' selector with `riot.mount()` to automatically mount all custom tags present on the page. This is a convenient way to initialize all Riot.js components without specifying each one individually.

```JavaScript
riot.mount('*')
```

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

### Run Riot.js CLI with Custom Configuration File

Source: https://v3.riotjs.vercel.app/guide/compiler

This command demonstrates how to execute the Riot.js command-line interface, explicitly pointing it to a custom configuration file named `riot.config.js`. This allows for overriding default settings and defining custom build behaviors.

```Shell
riot --config riot.config
```

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

### Install Babel 5 Globally for Riot.js ES6

Source: https://v3.riotjs.vercel.app/v2/guide/compiler

This command installs Babel version 5.8 globally via npm, which is used by Riot.js to transform ECMAScript 6 (ES6) code into compatible JavaScript for broader browser support.

```Shell
npm install babel@5.8 -g
```

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

### Server-side Rendering with riot.render

Source: https://v3.riotjs.vercel.app/ja/api

Example of rendering a Riot.js tag to HTML on the server-side using `riot.render`. This method is synchronous and returns the rendered HTML.

```JavaScript
// "my-tag"をHTMLにレンダリング
var mytag = require('my-tag')
riot.render(mytag, { foo: 'bar' })
```

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

### Riot.js Mounting Tags with Options

Source: https://v3.riotjs.vercel.app/guide

Illustrates how to mount a Riot.js tag to the page using `riot.mount()`, passing initial configuration options to the parent tag.

```JavaScript
<body>
  <account></account>
</body>

<script>
riot.mount('account', { plan: { name: 'small', term: 'monthly' } })
</script>
```

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

### Riot.js CLI: New Component Creation Option

Source: https://v3.riotjs.vercel.app/v2/release-notes

This snippet documents the `--new` option available in the Riot.js command-line interface (CLI). This option simplifies the process of creating new Riot.js components by providing a quick way to scaffold the necessary files and structure.

```APIDOC
riot --new [componentName]
  - Purpose: Creates a new Riot.js component.
  - Parameters:
    - --new: Flag to initiate new component creation.
    - [componentName]: (Optional) The name of the component to create. If omitted, the CLI might prompt for a name or create a default structure.
  - Usage: Streamlines the initial setup for new Riot.js components, improving developer workflow.
```

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

### Server-Side Rendering with `riot.render`

Source: https://v3.riotjs.vercel.app/api

An example of using `riot.render` on the server-side to convert a Riot.js tag into an HTML string. This is useful for server-side rendering (SSR) applications.

```JavaScript
// render "my-tag" to html
var mytag = require('my-tag')
riot.render(mytag, { foo: 'bar' })
```