### Basic Riot.js application structure
Source: https://riot.js.org/documentation/index
Example of a minimal Riot.js application setup, including an HTML file to mount the application and a Riot component file.
```html
Riot App
```
--------------------------------
### Riot.js Mount Method Examples
Source: https://riot.js.org/documentation/index
Provides examples of using the riot.mount method to mount components. This includes mounting a component by its specific ID, and mounting multiple components by listing their tag names separated by commas.
```javascript
// mount an element with a specific id
riot.mount('#my-element')
// mount selected elements
riot.mount('todo, forum, comments')
```
--------------------------------
### Install Riot.js with npm or yarn
Source: https://riot.js.org/documentation/index
Instructions for installing the Riot.js library using either npm or yarn package managers. These commands add Riot.js as a project dependency.
```bash
npm i riot
```
```bash
yarn add riot
```
--------------------------------
### Riot Plugin Installation
Source: https://riot.js.org/documentation/index
Shows how to extend Riot.js components using plugins. The `riot.install` method allows registering a function that will be executed for each component, enabling API enhancements like adding unique identifiers.
```javascript
// riot-observable.js
let id = 0
riot.install(function(component) {
// all components will pass through here
component.uid = id++
})
```
--------------------------------
### Riot.js Todo List component example
Source: https://riot.js.org/documentation/index
An extended Riot.js component demonstrating features like state management, event handling, and conditional rendering for a todo list.
```riot
{ props.title }
```
--------------------------------
### Creating Pure Components in Riot.js
Source: https://riot.js.org/documentation/index
Introduces `riot.pure` for creating components that bypass Riot.js's internal rendering logic, giving developers full control. The example shows a pure component with `mount`, `update`, and `unmount` lifecycle methods.
```riot
```
--------------------------------
### Riot.js component with pre-processor
Source: https://riot.js.org/documentation/index
Example of a Riot.js component using a pre-processor, specifically CoffeeScript, for its logic. The `type` attribute on the script tag specifies the pre-processor.
```riot
```
--------------------------------
### Using Native Event Listener Options in Riot.js
Source: https://riot.js.org/documentation/index
This example demonstrates how to pass native event listener options, such as `{ passive: true }`, to Riot.js event handlers. Instead of a single callback function, an array is provided, where the first element is the handler and subsequent elements are options.
```riot
```
--------------------------------
### Dynamic Event Handler Binding in Riot.js
Source: https://riot.js.org/documentation/index
This example shows how to dynamically bind event handlers in Riot.js using ternary operators or property access. This allows for conditional execution of different functions or calling functions stored as component properties.
```riot
```
--------------------------------
### Riot Text Attribute Rendering
Source: https://riot.js.org/documentation/index
Explains how Riot.js renders text, boolean, and number expression values for HTML attributes. It shows examples of valid renderings and how `null`, `undefined`, or non-renderable values are skipped.
```riot
```
--------------------------------
### Riot Component Using Plugin Data
Source: https://riot.js.org/documentation/index
A Riot.js component demonstrating the use of data added by a plugin. In this example, the `uid` property, added by the `riot-observable.js` plugin, is displayed within the component's template.
```riot
{ uid }
```
--------------------------------
### Conditional Fragments with '' in Riot.js
Source: https://riot.js.org/documentation/index
This example shows how to use the `` tag with the `if` directive in Riot.js (version 4.2.0 and above) to conditionally render HTML fragments without a wrapper element. This is useful for rendering multiple elements based on a condition.
```riot
```
--------------------------------
### Correct Usage of 'is' Attribute with HTML Elements in Riot.js
Source: https://riot.js.org/documentation/index
Highlights the case sensitivity requirement for the `is` attribute when referencing components. Tag names should be in lowercase, and Riot provides examples of correct and incorrect usage for clarity.
```riot
```
--------------------------------
### Riot.js DOM Access with the ref Attribute
Source: https://riot.js.org/documentation/index
Demonstrates using the `ref` attribute in Riot.js (version 9.4.0 and above) to get a reference to a DOM element. The `ref` attribute is assigned a function that receives the DOM element as an argument when it's rendered or removed. This allows for direct manipulation or access to the element's properties.
```riot
hello there
```
--------------------------------
### Initialize a Riot.js project with a template
Source: https://riot.js.org/documentation/index
Command to create a new Riot.js project using an official template. This command prompts the user to select a bundler and sets up the necessary project files.
```bash
npm init riot
```
--------------------------------
### Riot.js application entry point
Source: https://riot.js.org/documentation/index
JavaScript code to mount a Riot.js component to the DOM. It imports the component and initializes it with initial props.
```javascript
import * as riot from 'riot'
import App from './app.riot'
const mountApp = riot.component(App)
const app = mountApp(
document.getElementById('root'),
{ message: 'Hello World', items: [] }
)
```
--------------------------------
### Passing Initial Properties to Riot.js Components
Source: https://riot.js.org/documentation/index
Demonstrates how to pass initial properties to a Riot.js component when mounting it. Properties are passed as the second argument to the `riot.mount` method. Inside the component, these properties are accessible via `this.props` and are immutable.
```javascript
riot.mount('todo', { title: 'My TODO app', items: [ ... ] })
```
--------------------------------
### Server-Side Rendering with Node.js using Riot.js
Source: https://riot.js.org/documentation/index
Demonstrates how to use the `@riotjs/ssr` package to render Riot components on the server. This involves requiring the `render` function and your Riot component, then calling `render` with the component tag name, component definition, and props. The output is an HTML string.
```javascript
const { render } = require('@riotjs/ssr')
const Timer = require('timer.riot')
const html = render('timer', Timer, { start: 42 })
console.log(html) //
Seconds Elapsed: 42
```
--------------------------------
### Mounting Riot.js Components
Source: https://riot.js.org/documentation/index
Shows how to mount a Riot.js component into the HTML body. It includes including the riot.js library and using a script tag with type="module" to import and register the component before mounting it. Custom components require closing tags and do not support self-closing syntax.
```html
```
--------------------------------
### Looping Over Plain Objects with Object.entries in Riot.js
Source: https://riot.js.org/documentation/index
Shows how to iterate over plain JavaScript objects using `Object.entries` within the `each` directive. Each iteration provides an array containing the key and value of the object's property.
```riot
key = { element[0] }
value = { element[1] }
```
--------------------------------
### Scoped CSS with :host in Riot.js
Source: https://riot.js.org/documentation/index
Demonstrates how to use scoped CSS within a Riot.js component using the :host pseudo-class for styling. This approach ensures styles are encapsulated within the component and do not leak to other parts of the application. It relies on Riot.js's custom implementation and does not depend on browser-native scoped CSS.
```riot
{ props.title }
```
--------------------------------
### Fragment Loops with Template Tag in Riot.js (>=4.2.0)
Source: https://riot.js.org/documentation/index
Demonstrates how to use the `` tag for looping over items without introducing a wrapper element. This allows for cleaner HTML output by rendering only the content within the template.
```riot
{item.key}
{item.value}
```
--------------------------------
### Riot Component Lifecycle Callbacks
Source: https://riot.js.org/documentation/index
Illustrates the various lifecycle callbacks available in Riot.js components. These callbacks allow developers to hook into different stages of a component's life, from creation and mounting to updates and unmounting.
```riot
```
--------------------------------
### Using HTML Elements as Riot Components with 'is' Attribute
Source: https://riot.js.org/documentation/index
Shows how standard HTML elements can be treated as Riot components by adding the `is` attribute. This facilitates integration with CSS frameworks and provides an alternative to custom element tags. Riot's `mount` function can target these elements.
```riot
```
```javascript
riot.mount('[is="my-list"]')
```
--------------------------------
### Riot.js component with scoped styles
Source: https://riot.js.org/documentation/index
Demonstrates how to include styles directly within a Riot.js component using a `
```
--------------------------------
### Looping Over Non-Object Arrays and Iterables in Riot.js
Source: https://riot.js.org/documentation/index
Demonstrates how to use the `each` directive to loop over strings, Maps, and Sets containing primitive values. The `Array.from` method is used internally. The loop provides access to the item and its index.
```riot
{ index }: { name }
{ letter }
{ meal }
```
--------------------------------
### Optimizing Loops with Key Attribute in Riot.js
Source: https://riot.js.org/documentation/index
Explains the use of the `key` attribute within the `each` directive to provide a stable identifier for looped items. This improves performance, especially with immutable collections, by allowing Riot.js to efficiently track and update DOM elements.
```riot
{ user.name }
```
```riot
{ user.name }
```
--------------------------------
### Dynamic Component Rendering with 'is' Attribute in Riot.js
Source: https://riot.js.org/documentation/index
Demonstrates dynamic component rendering by using an expression in the `is` attribute. This allows Riot.js to switch between different components rendered on the same DOM node based on component state.
```riot
```
--------------------------------
### Riot Component with Complex Expression Logic
Source: https://riot.js.org/documentation/index
Demonstrates how to handle complex JavaScript expressions in Riot.js by moving the logic to the `onBeforeUpdate` callback. This keeps the HTML template clean and readable, calculating the value `val` before each update.
```riot
{ val }
```
--------------------------------
### Nested Components and Props in Riot.js
Source: https://riot.js.org/documentation/index
Illustrates how to define and use nested components in Riot.js. Parent component properties are passed via `riot.mount`, while child component properties are passed as tag attributes. Attribute names are converted from dash-case to camelCase.
```riot
```
```riot
{ props.plan.name }
```
```javascript
```
```riot
```
--------------------------------
### Looping Over Object Values with Object.values in Riot.js
Source: https://riot.js.org/documentation/index
Illustrates looping specifically over the values of a JavaScript object using `Object.values` within the `each` directive. This is useful when only the data values are needed for rendering.
```riot
The Event will start at:
```
--------------------------------
### Contexted DOM Queries in Riot.js
Source: https://riot.js.org/documentation/index
Shows how to perform contexted DOM queries within a Riot.js component, targeting elements relative to the component's root element. This is achieved using methods like `$('selector', this.root)` for jQuery-like queries or `this.root.querySelectorAll('selector')` for standard JavaScript queries. This ensures queries are scoped to the component's DOM.
```riot
Do I even Exist?
Is this real life?
Or just fantasy?
```
--------------------------------
### Looping Custom Components in Riot.js
Source: https://riot.js.org/documentation/index
This snippet shows how to use the `each` attribute to loop through custom Riot.js components. It iterates over an `items` array and renders a `` component for each item, passing the item's properties directly to the component using the spread syntax `{ ...item }`.
```riot
```
--------------------------------
### Riot.js component definition
Source: https://riot.js.org/documentation/index
A simple Riot.js component named 'app' that displays a message passed via props.
```riot
{ props.message }
```
--------------------------------
### Conditional Rendering with 'if' Directive in Riot.js
Source: https://riot.js.org/documentation/index
This Riot.js snippet demonstrates conditional rendering using the `if` directive. Elements or components are mounted or unmounted based on the truthiness of the provided expression. This allows for dynamic UI updates based on application state.
```riot
This is for premium users only
```
--------------------------------
### DOM Element Access Timing in Riot.js
Source: https://riot.js.org/documentation/index
Explains the correct timing for accessing DOM elements in Riot.js. Direct DOM manipulation using methods like `document.getElementById` will fail before the `mount` event fires. Access is reliable within lifecycle callbacks such as `onMounted` and `onUpdated`.
```riot
Do I even Exist?
```
--------------------------------
### Slots for Content Injection in Riot.js
Source: https://riot.js.org/documentation/index
Demonstrates the use of the `` tag in Riot.js for injecting HTML content from a parent component into a child component. The content within the child's `` tag is replaced by the content provided in the parent.
```riot
Hello
```
```riot
{ text }
```
--------------------------------
### Accessing and Using Props in Riot.js Components
Source: https://riot.js.org/documentation/index
Explains how to access and use properties passed to a Riot.js component. Properties are available in the HTML template using `{ props.propertyName }` and in the JavaScript part of the component using `this.props.propertyName`. It's important to note that `this.props` is frozen and immutable.
```riot
{ props.title }
```
--------------------------------
### Object Spread Attributes in Riot.js
Source: https://riot.js.org/documentation/index
Demonstrates using object spread syntax to pass multiple attributes to a component. The `attributes` object is spread onto the `
` tag, applying `id`, `role`, and `class`.
```riot
```
--------------------------------
### Looping through Data with 'each' Attribute in Riot.js
Source: https://riot.js.org/documentation/index
This Riot.js code demonstrates how to render lists using the `each` attribute. It iterates over an array of `items`, creating a list item for each. The `class` and `checked` attributes are dynamically bound based on item properties, and changes to the `items` array automatically update the DOM.
```riot
{ item.title }
```
--------------------------------
### Riot Component State Management
Source: https://riot.js.org/documentation/index
Demonstrates how to manage and update the internal state of a Riot.js component. The `this.state` object is mutable and can be updated directly or using the `this.update()` method to trigger DOM re-renders.
```riot
{ state.name } - { state.surname }
```
--------------------------------
### Render Unescaped HTML with Custom Tag in Riot.js
Source: https://riot.js.org/documentation/index
Provides a custom `` component to render HTML content directly. The `setInnerHTML` method updates the component's root with the provided `html` prop, and `onMounted`/`onUpdated` ensure it's rendered correctly.
```riot
```
```riot
Here is some raw content:
```
--------------------------------
### Accessing DOM Elements in Riot.js with this.$ and this.$$
Source: https://riot.js.org/documentation/index
Illustrates how to access DOM elements within a Riot.js component using the `this.$` and `this.$$` helper methods. `this.$` retrieves a single element, while `this.$$` retrieves a NodeList of multiple elements. These methods are typically used within lifecycle callbacks like `onMounted`.
```riot
My todo list
Learn Riot.js
Build something cool
```
--------------------------------
### Managing Input Field Values in Riot.js
Source: https://riot.js.org/documentation/index
This Riot.js code shows how to manage input field values using the `value` attribute. Riot.js normalizes this for input, select, and textarea elements. User input updates the field, but the component's state must be explicitly updated to synchronize the expression with the input value.
```riot
```
--------------------------------
### Riot JavaScript Expressions in HTML
Source: https://riot.js.org/documentation/index
Illustrates the use of JavaScript expressions within Riot.js HTML templates, enclosed in curly braces `{}`. These expressions can be used for text content, attribute values, and conditional rendering.
```riot
{ /* my_expression goes here */ }
```
```riot
{ /* nested_expression */ }
```
```riot
{ title || 'Untitled' }
{ results ? 'ready' : 'loading' }
{ new Date() }
{ message.length > 140 && 'Message is too long' }
{ Math.round(rating) }
```
--------------------------------
### Riot Boolean Attribute Handling
Source: https://riot.js.org/documentation/index
Details Riot.js's handling of boolean attributes like `checked` and `selected`. It clarifies how falsy expression values result in the attribute being omitted, while truthy values render the attribute correctly according to W3C specifications.
```riot
```
--------------------------------
### Define and Handle Form Submission Events in Riot.js
Source: https://riot.js.org/documentation/index
This snippet demonstrates how to define an event handler for form submissions in Riot.js. The `onsubmit` attribute is used to bind a JavaScript function to the submit event. The handler prevents the default form submission behavior and can be defined dynamically.
```riot
```
--------------------------------
### Escaping Brackets in Riot.js
Source: https://riot.js.org/documentation/index
Shows how to prevent Riot.js from evaluating expressions within curly braces by escaping the opening brace with a backslash. This is useful for literal strings or regular expressions.
```riot
```
```riot
```
--------------------------------
### Update Component State with Event Handlers in Riot.js
Source: https://riot.js.org/documentation/index
This Riot.js snippet illustrates how an event handler can trigger a component state update. The `onclick` event calls the `resetValue` function, which in turn uses `this.update()` to modify the component's state, causing the UI to re-render.
```riot
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.