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 theis
attribute can also be automountedprops
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 viaprops
argument.componentName
optional component name in case the node to mount can’t be automounted by riot
@returns: an array of the mounted
Examples:
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')
}())
riot.mount('my-component', () => ({
}))
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
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
@returns: an array of the mounted component objects
riot.component(component: RiotComponentShell): function
component
- @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 javascriptSet
containing all the plugin functions installed
riot.uninstall(plugin: function): Set
plugin
- function plugin already installed before@returns: a javascriptSet
containing all the plugin remaining functions installed
A plugin can be installe and uninstalled:
import { install, uninstall } from 'riot'
// uninstall the plugin if it's not needed anymore
uninstall(uid)
riot.register
riot.register(name: string, component: RiotComponentShell): Map
name
- the component namecomponent
- a component shell object@returns: a javascriptMap
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(name: string): Map
name
- the component name@returns: a javascriptMap
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