Core API

riot.mount

riot.mount(selector: string, props?: object, componentName?: string): [RiotComponent]

• selector selects elements from the page and mounts them with a custom components. The selected elements’ name must match the custom tag name. DOM nodes having the is attribute can also be automounted

• props optional object is passed for the component to consume. This can be anything, ranging from a simple object to a full application API. Or it can be a Flux- store. Really depends on how you want to structure your client-side applications. Also note that attributes you set on your tags will take precedence over ones specified with same names via props argument.

• componentName optional component name in case the node to mount can’t be automounted by riot

@returns: an array of the mounted component objects

Examples:

// selects and mounts all <pricing> tags on the page
const components = riot.mount('pricing')
// mount all tags with a class name .customer
const components = riot.mount('.customer')
// mount <account> tag and pass an API object as options
const components = riot.mount('account', api)
// mount <div id="root"> tag passing the API object using the previously registered `app` component
const components = riot.mount('#root', api, 'app')

Note: users of In-browser compilation will need to wait the components compilation before calling the riot.mount method.

(async function main() {
  await riot.compile()
  const components = riot.mount('user')
}())

The props argument can be also a function in order to avoid sharing the same object across several tag instances riot/2613

riot.mount('my-component', () => ({
  custom: 'option'
}))

riot.unmount

riot.unmount(selector: string, keepRootElement?: boolean): [HTMLElement]

• selector selects elements from the page and unmounts them if they were mounted before.
• keepRootElement boolean optional parameter that can be used to avoid removing the root nodes from the DOM >=4.3.0

// Select all the <user> tags and unmount them
riot.unmount('user')

If the keepRootElement parameter will be true the root nodes will be left into the DOM

// Select all the <user> tags, unmount them but leave their root nodes into the DOM
riot.unmount('user', true)

@returns: an array of the mounted component objects

riot.component

riot.component(component: RiotComponentShell): function

• component - a component shell object@returns: a function to create component objects

The riot.component method can be used to create and mount component without registering them globally:

import * as riot from 'riot'
import App from './app.riot'
const createApp = riot.component(App)
const app = createApp(document.getElementById('root'), {
  name: 'This is a custom property'
})

riot.install

riot.install(plugin: function): Set

• plugin - function receiving a component objects for any component created@returns: a javascript Set containing all the plugin functions installed

Once installed a plugin function will be called for any Riot.js component created

import { install } from 'riot'
let id = 0
// this plugin adds the uid attribute on any riot component created
install(function(component) {
  component.uid = id++
  return component
})

riot.uninstall

riot.uninstall(plugin: function): Set

• plugin - function plugin already installed before@returns: a javascript Set containing all the plugin remaining functions installed

A plugin can be installe and uninstalled:

import { install, uninstall } from 'riot'
import uid from './riot-uid.js'
install(uid)
// uninstall the plugin if it's not needed anymore
uninstall(uid)

riot.register

riot.register(name: string, component: RiotComponentShell): Map

• name - the component name
• component - a component shell object@returns: a javascript Map containing all registered components factory functions

import { register, mount } from 'riot'
import MyComponent from './my-component.riot'
// register the my-component as global component
register('my-component', MyComponent)
// find all the DOM nodes called `<my-component>` and
// mount them with the component previously registered
mount('my-component')

riot.unregister

riot.unregister(name: string): Map

• name - the component name@returns: a javascript Map containing the remaining registered components factory functions

Unregistering a tag previously created via compiler or via riot.register()This method could be handy in case you need to test your app and you want to create multiple tags using the same name for example

import { register, unregister } from 'riot'
import TestComponent from './test-component.riot'
import TestComponent2 from './test-component2.riot'
// create a test component
register('test-component', TestComponent)
// mount it
const [component] = mount(document.createElement('div'), 'test-component')
expect(component.root.querySelector('p')).to.be.ok
// unregister the tag
unregister('test-component')
// recreate the same component using a different template
register('test-component', TestComponent2)

riot.version

riot.version(): string

@returns: the current riot version in use as string