Rioct

Rioct is a HTML templating language for React, built on top of react-templates, of which it extends the syntax and adds new features.

Notable features

Compared to react-templates

• easier syntax: if, each without the rt- prefix
• develop mode: a lot easier to debug with errors no longer "swallowed" by React. Expressions are checked for type integrity.
• accepts .html file extension (so to make HTML syntax highlight work in editors)
• can use <kebab-case> tag identifiers (turned into PascalCase)
• can make use of the <style> tag
• can use lower case names for events or attributes (e.g. onclick instead of onClick)
• automatically binds event handlers to this
• content yielding with <yield />, <yield from=""/> and <yield to=""/>
• show and hide attributes
• unified class attributes
• supports custom brackets like {{ }} or {% %}.

Compared to Riot

• templates are compiled to pure JavaScript code, no runtime is required other than React
• early catching of errors with expressions syntax checked at compile time
• expressions are statically compiled, no bracket processing of any kind at runtime
• can extend native elements (li, input, etc..) with the is keyword
• has variable scoping scope=
• element is bound to this even in child nodes
• expressions need explicit this, no ambiguity between window and local
• no parent.parent hell
• no node inheritances in loops
• true <virtual> node (does not create an element)
• true if attribute (does not create child element when false)
• import dependencies with <import> tag
• builtin dynamic styles, can simulate scoped sytles with _this_
• byte-saving option that normalizes Html Whitespaces

List of npm packages

• rioct-cli is the command line compiler tool that turns .html templates into actual React JavaScript code.
• rioct is a TypeScript-friendly library to help consume compiled templates. The package is optional and it's needed only for some advanced features. To use this package, TypeScript is not required (but recommended).
• rioct-loader is a webpack loader for Rioct templates, so that you can require() directly template files from JavaScript.

Topics

• rioct-cli
• rioct
• template language reference