Built with OtoReact
OtoReact is a library that brings reactivity straight into your HTML file.
The tiny application above left is the result of this piece of Reactive HTML (RHTML):
The Reactive HTML is placed in an HTML document that loads the OtoReact library, e.g. like this:
This code is served to the browser and that's all.
Full framework functionality, offered by a library.
Nothing to install, nothing to compile, nothing to configure.
Runs like a charm.
'Reactive web applications', or 'Single Page Applications', are web applications that, when possible, react immediately on user input, timer events etc, or the receival of server data requested by the application, instead of having the web server generate and send a new HTML page.
This results in both a much better user experience and much less server load.
Two tiny examples you see above; please enter some data.
Reactivity is attained by means of JavaScript programming code running inside the web browser. The JavaScript code has to manipulate the so-called "DOM" ("Document Object Model"), which is the internal object model of a web page ("document").
Writing such JavaScript by hand can get quite complicated and might result in very cluttered programming code. A framework makes it much easier to create reactive web applications.
OtoReact is a small and fast framework library to attain reactivity by loading so-called Reactive HTML, or RHTML, straight into the browser:
Let's return to the tiny example above left. You can modify the source code below and the modified application will be reloaded immediately.
Explanation:
yourName, that can contain state information of the application.
yourName.V denotes the value of the variable.store='sessionStorage', which makes the value persist when the application is reloaded.@value="yourName.V" binds the value of the reactive variable to the value of the input element. Whenever the input element receives input, OtoReact will update the reactive variable and all document content that reacts on it.
yourName.V is non-empty, then the body of the conditional is rendered.
\{yourName.V\} and \{yourName.V.length\} are embedded expressions. The rendered document will contain the value of the expression between the braces.
Explanation:
maxY with initial value 10, to persist in sessionStorage.
y iterate through the values of range(1,maxY.V), which are the numbers 1 to maxY.V.
Here is an example of dynamically building a table based on server data, with a bit of animation as well:
There exist quite a number of alternative libraries and frameworks to make it easier to build reactive web applications. I distinguish two main categories:
Reactive HTML combines features of both approaches, giving you the advantages of describing the desired reactive layout by a HTML template, separate from your programming code, but without the hassle of installing and using a compiler and managing quite a number of configuration files, and you need just a basic understanding of JavaScript.
This document for example changes its layout when being printed or viewed on a narrow screen: the table of contents moves to the top, and on a mobile device font sizes are adapted.
Responsiveness is usually attained by using CSS media queries, which is perfectly possible in Reactive HTML.
When you get stuck with media queries, then reactivity may come to the rescue, to make responsive adaptations to your document or style definitions not possible with media queries.
Using ".rhtml" might also cause confusion with Ruby on Rails HTML files, that are to be processed by the server-side Ruby on Rails engine.
<{}script type=module src="OtoReact.js"><{}/script>
type="rhtml":
<{}body type="rhtml">
, then OtoReact will implicitly compile and render the document body at the first event cycle.
<{}body type="rhtml" hidden>.
RCompile function:
<{}script type=module>
import \{RCompile, RVAR} from './OtoReact.js';
RCompile(document.body);
<{}/pre>
This allows one to compile one or more parts of your document, instead of the whole document body, and it allows one to specify additional options
That's all!
1 + 1 = \{1 + 1}, which results in the text "1 + 1 = {1 + 1}".
The expressions are evaluated, converted to string, and inserted as text; there is absolutely no risk of code injection.
To include a normal pair of braces in RHTML, at least one of them must be escaped with a backslash.
Within JavaScript, you can of course use the JavaScript syntax for template literals, using backquotes and dollar signs:
let x = `Some text ${expression} et cetera`;
If you prefer, you may add a dollar sign in RHTML as well, like 1 + 1 = $\{1 + 1}.
* If you set the option 'bDollarRequired', then the dollar sign becomes compulsory, and you can write normal braces without a backslash.
Expression values null and undefined are not shown. This is unlike JavaScript template literals, where `$\{null}` yields "null".
You may omit the expression, like \{}, which comes in handy if you want the parser to not recognize an HTML tag:
RHTML defines a number of new constructs, which dynamically build your HTML page:
reacton does the same thing.
RCompile(HTMLElement, options?) compiles and builds the given HTMLElement as RHTML, using the given options.
RVAR(name?, initialValue?, store?) creates a reactive variable.
reroute() and docLocation are used with URL routing.
range(start?, count, step?) yields an iterable range of count numerical values: start, start+step, …, start+(count-1) * step.
RFetch(resource, init?) is the same as fetch(resource, init?), except that it throws an error when an HTTP error status is received.
All of these are exported by the OtoReact module. TypeScript type declarations are available on the download page.
\{ … \} of JavaScript code
RHTML adds another kind of variable: RHTML local variables; these are visible in all inline JavaScript code within a block of RHTML code.
These are introduced by the following RHTML constructs:
RHTML local variable names obey strict lexical scoping rules, see
RHTML local variables are not visible within other
Global variables are created:
globalThis:
globalThis.varName = value;In web browsers, the global object is commonly named "
window", but in other JavaScript environments it is named otherwise, and using "window" causes confusion with real window properties. Hence ECMAScript 2020 introduced the new cross-platform name globalThis to refer to the global object, and we suggest you use this rather than window.
defines attribute of
Reactive variables (RVAR's) are objects containing variable data on which RHTML elements may react.
Anytime the value of an RVAR changes, the reacting elements will be updated.
RVAR's are created:
RVAR(name?, initialValue?, store?, subscriber?, storename = `RVAR_$\{name\}`) from JavaScript,namename, the RVAR will be registered in the global environment under that name and will be visible anywhere.
<{}script type=module>
const x = RVAR('X');
…
, then it will be available as x just inside this module, and also as X anywhere (though normally one shouldn't use different local and global names).
initialValueinitialValue is a Promise, then the value of the RVAR will initially be undefined, and when the promise resolves to a value, then the RVAR will be set to that value.
store*subscriber*x.Subscribe(subscriber).
storename*
You may or must inform OtoReact which fragments of RHTML should react on which RVAR's, by using the reacton attribute, see below.
For RVAR's created by calling RVAR(), this is necessary.
For RVAR's created by
An RVAR x is an object, distinct from the value of the variable. It has the following properties and methods:
x.Vx, one writes x.V.
x.V is set to a different value than it had before, then the RVAR is marked as dirty, and all RHTML code that reacts on it will be updated.
x.Ux.U to get the value of the RVAR.
E.g., if x.V is an array, you can write x.U.push(e) or x.U[i] = e to add an or modify an array element, and the DOM will react on the modified array. So you don't have to assign to x.V to trigger a reaction.
Exception: within an HTML attribute or property definition, accessing x.U does not mark the RVAR as dirty. This is so that one can use x.U within RHTML two-way bindings, and the RVAR will only be marked dirty when the property is modified by an event, not when it is being set by the RHTML engine.
Setting x.U sets the value of x and marks it as dirty even when the value is equal to the previous value.
x.SetDirty()x.SetDirty().
x.Subscribe(subs, bImmediate?, bInit = bImmediate) *subs is registered as a subscriber to x, so it will be called whenever x has been set dirty.
bImmediate is truthy, subs will be called immediately every time x is being set dirty; otherwise it will be called once at the next event cycle.
bInit is truthy, then subs will initially be called when it is registered. The default value for bInit is the value of bImmediate.
x.UnSubscribe(subs) *subs previously registered as a subscriber to x.
x.Set(value) *x.V either synchronously, or asynchronously when value is a Promise.
When it is a Promise, then x.V will initially be undefined, and when the promise resolves to a value, then x.V will be set to that value.
x.Set *x, i.e. v => x.Set(v).
This is handy to create an errorhandler. E.g., if errMsg is an RVAR that should receive error messages, then you can write doSomething().catch(errMsg.Set) to catch the errors of some asynchronous routine, or you can add an attribute #onerror="errMsg.Set" to catch all errors within a block of RHTML.
x.Clear *x.
You can e.g. add an attribute #onsuccess="errMsg.Clear" to clear any error message when any event handler succeeds without error.
store parameter to RVAR() or to store can be:
sessionStorage, meaning that the value will be restored when the user reloads the page, or leaves it and returns again while staying in the same browser windowlocalStorage, meaning that the value will be preserved in local browser storage and restored when the user returns to the same site in the same browser on the same machinesetItem and getItem methods of the Storage interface.
The RVAR must have a unique storename; the default is `RVAR_$\{name\}`.
An example using sessionStorage can be found in the Multiplication demo: modify the numbers; then either reload the page or modify the source code, which triggers a reload too, and see that the modified numbers have persisted.
Scripts can be included anywhere using the
Depending on the script type, they are either executed just once, or every time the surrounding element is being instantiated (built).
Scripts in OtoReact can export variables, so that these variables are either globally defined or locally visible in RHTML code.
See <{}SCRIPT> for details about
Styles sheets have global effect, except inside an 'isolated' component or inside
There is no provision yet for style sheets with local scope. To use local styling, just add local class names to each styling rule.
Style sheets inserted with
To build up dynamic style sheets using string interpolation and other OtoReact features, you can use
RCompile does not, as one might perhaps expect, translate the whole chunk of RHTML into one large string of JavaScript.
eval function (in global scope, of course).
a+b is compiled by calling eval("([a,b]) => (a+b)").
OtoReact does not itself parse and analyse the JavaScript, so it is unaware which variables are actually used and which are not.
setTimeout) all reacting DOM tree parts to get updated by their registered builder routine in its registered environment.
x being undefined.
#class:someclass="someBoolean"), which will only work for class names in lowercase.I imagine Reactive HTML one day being natively supported by the browser. In that case, these limitations can be lifted.
// RCompile(…)reacton attribute.
bAbortOnError.
debugger statement, to get a breakpoint at that point when the browser development tool is opened.
All source elements that are not RHTML or user-defined constructs, build HTML elements.
All trailing dots in the tag name are removed.
Source attributes are compiled as described below.
All source attributes that do not fall in any of the categories below, are compiled as HTML attributes.
They may use string interpolation, and trailing dots are removed.
Attributes starting withan underscore _ are ignored. You can use this to insert comments within HTML tags, or to outcomment any attribute.
Trailing dots are removed, so you can use error.="..." to set an HTML onerror handler, whereas onerror="..." would set the RHTML onerror handler.
The browser translates attributes specified in HTML elements to properties of the corresponding DOM objects.
Rather than setting attributes, RHTML allows you to directly set the DOM properties, by prepending the property name with a hash mark and specifying a JavaScript expression: #propertyName="expression"
Note that while attributes always have string values, even when the content of the string is numeric, properties can have any type.
So by setting a property rather than an attribute, you avoid unnecessary type conversions, and you spare an attribute node in the created DOM tree.
Furthermore, there are some DOM properties that are not available as HTML attributes at all.
Documentation of all properties can be found at MDN or partly at W3schools.
When the expression yields value null or undefined and the property had a string value, then the property is set to the empty string, because otherwise the DOM would turn the value into string "null" or "undefined".
* OtoReact will discover the proper casing of propertyName the first time it is being set.
* There are two special cases:
class corresponds not to DOM property class (because that's a reserved word in JavaScript), but rather to property className.
#class, which translates to #classname.
valueAsNumber returns the numeric value of an #valueasnumber, which translates to setting #value for this element, so one can use two-way binding on this property.
#name="expr" has usually the same effect as name="\{expr\}".onname="script" is completely the same as onname="(event) => \{ script }".
In HTML, attributes whose name starts with "on" are not normal attributes but event handlers: pieces of JavaScript that will be executed when some event happens.
They may contain the name event which represents an object containing more information about the event.
In RHTML, this is exactly the same, see onclick="x.V += 1" in the demo above.
this in all RHTML event handlers is bound to the current HTMLElement object.
event.target or event.currentTarget.)
return the resulting Promise. If such a Promise fails, the error will be caught by an RHTML onerror handler.
onclick, there is a corresponding DOM property that can be set with #onclick:
onclick="Statements" is the same as #onclick="(event) => \{ Statements \}"
#onclick="handlerFunction" is the same as onclick="return (handlerFunction)(event);"
reacton="RVAR-list" or reactson="RVAR-list"
For RVAR's created by calling RVAR(), this is compulsory.
For RVAR's created by
The items in RVAR-list may be expressions rather than just names.
Samples of using reacton are in the Tic-Tac-Toe demo.
thisreactson="RVAR-list"#if="condition" or if="condition"oncreate, aftercreateonupdate, afterupdateondestroy, afterdestroyoncreateupdatebeforecreate, beforeupdate, beforedestroy, and combinations of theseevent is not available in handlers for these pseudo-events, but this is available and will be bound to the HTMLElement the handler is attached to.
These pseudo-events may be attached to RHTML constructs too. In that case this will be bound to the nearest parent HTMLElement.
As with DOM events, one can write on…="…" to specify a function to be called, instead of a block of statements to be executed.
RHTML allows you to set an error handler for all error cases at once, as follows.
onerrorPromise returned by a DOM event handler, i.e. when the Promise is rejected.
doSomething, then it must return the resulting promise, in order for asynchronous errors to be caught, e.g.: onclick="return doSomething()" or #onclick="doSomething"
event is bound to the error value (usually a string).
onerror-onerror, so not while creating or updating an element.
onsuccessPromise, then onsuccess is executed only after the promise succeeds ("is fulfilled").onerror to assign errormessages to an RVAR to be shown in your document,
then you can use onsuccess to reset that message.
window.onerror global event handler of the DOM API.
If you want to handle the DOM event onerror of e.g. an
"Class names" are used in HTML to select CSS styling rules from a stylesheet, and can of course be set with the class attribute or the #className DOM property.
Besides these, RHTML recognizes the following attributes:
#class="stringExpression"#className property.
The expression may yield a list of class names, separated by spaces.
#class:name="booleanExpression"#class.name="booleanExpression"+class="expression"style global attribute. These are called "inline styles".
style DOM property yields the inline style as an object, but can't be set.
style.name="string"string, applying string interpolation.
#style.name="expression"expression.
When the value is null, empty, or undefined, then the style property will be reset.
When the value is false, then the style property will also be reset.
This allows you to abbreviate a conditional style setting like #style.name="cond ? expr : null" to #style.name="cond && expr"
+style="objectExpression"*, +, ! and !!.
*propertyName="assignmentTarget"oncreate="assignmentTarget = this.propertyName"
+propertyName="assignmentTarget"onupdate="assignmentTarget = this.propertyName"
!propertyName="assignmentTarget"oninput="assignmentTarget = this.propertyName"
For elements which allow text input, an input event happens at every keystroke. You see the effect in several samples on this page.
!!propertyName="assignmentTarget"
Note that only
For elements which allow text input, a change event happens when the user presses ‹Enter› or when the element looses focus, so less often than input events.
#propertyName to get two-way bindings, for example:
#!propertyName="assignmentTarget"is the same as
#propertyName="assignmentTarget" !propertyName="assignmentTarget".
Last but not least, there are two abbreviations:
@propertyName="assignmentTarget"#!propertyName="assignmentTarget".
@@propertyName="assignmentTarget"#!!propertyName="assignmentTarget".
These bindings are especially useful for the value or checked property of input elements, or the textContent, innerText, or innerHTML properties of elements with contentEditable=true.
See the example in the Persistence paragraph.
Or you can use them to capture the innerHTML or outerHTML of an element:
cond and of, may optionally be prefixed with a hash mark: cond, of.
Any attribute starting with an underscore "_" is ignored. So one can use this to insert a comment right between attributes (_="Some comment") or to comment out some attribute.
Otherwise, it is an error when a construct instance has unknown attributes.
DEFINE var=name #value="expression" /DEFINE
introduces a local immutable variable name, with a value computed by expression.
Alternatively, one can give an interpolated string: value="string".
So for an expression, the '#' is required.
The variable is visible in all local expressions from the
It cannot be assigned to, but when its value is an RVAR or some other object, then one can of course modify its properties.
The expression is, by default, evaluated only once, when the respective DOM-trunk is built, not when it is updated.
When you add an attribute updating or reacting (without value), then the expression is re-evaluated at every update.
DEFINE rvar=name #value?="expression" store?=storage async? /DEFINE
introduces a local reactive variable name, with a value computed by expression.
This is equivalent to
When store is specified, then the rvar value is stored in the given storage, see Persistence.
When async is specified, then expression must yield a Promise.
The value of the rvar wil initially be undefined, and when the promise resolves to a value, then the rvar will be set to that value.
Local variable names (including loop variables and component parameters) obey strict lexical scoping rules:
<{}CASE hiding?>
<{}WHEN cond="expr"> WhenPart <{}/WHEN>
…
[<{}ELSE> ElsePart <{}/ELSE>]
<{}/CASE>
is a conditional piece of RHTML.
hiding is specified, then all alternatives will be included in the DOM tree, but the unwanted ones will be hidden.
thisreactson).
Substrings of the value can be captured into new local variables.
There are three variants of patterns:
<{}CASE #value="expr">
<{}WHEN match="pattern"> … <{}/WHEN>
<{}WHEN urlmatch="pattern"> … <{}/WHEN>
<{}WHEN regmatch="regExp" captures?="nameList"> … <{}/WHEN>
…
[<{}ELSE> ElsePart <{}/ELSE>]
<{}/CASE>
All three variants are case-insensitive, and all can be combined with a simple condition cond.
match="pattern"? matches any single character* matches any string of characters[charString] matches any character in charString, where all rules for JavaScript character classes apply\{ varName \} matches non-greedily any string of characters, and
\ followed by any character matches just that characterurlmatch="pattern"regmatch="regExp" captures?="nameList"The match succeeds when a substring of the string value matches against regExp.
When captures="nameList" is specified, then the values captured by any capturing groups in the pattern will be stored in local variables with the specified names, in order of appearance. Use empty names to skip unneeded capturing groups.
hiding, as no DOM-tree can be built when the variable values are unknown.
<{}IF cond="expr">
ThenPart
[<{}ELSE> ElsePart <{}/ELSE>]
<{}/IF>
or
<{}IF cond="expr">
<{}THEN> ThenPart <{}/THEN>
[<{}ELSE> ElsePart <{}/ELSE>]
<{}/IF>
is the same as:
<{}CASE>
<{}WHEN cond="expr"> ThenPart <{}/WHEN>
[<{}ELSE> ElsePart <{}/ELSE>]
<{}/CASE>
All hiding and pattern-matching features of
<{}FOR let=name of="iterableExpression">
BodyPart
<{}/FOR>
The normal FOR-construct repeats its BodyPart for each item yielded by the value of iterableExpression.
The value of iterableExpression must be an iterable object, e.g. an Array, or the result of the RHTML range function, if you want a numeric repetition.
Attribute let=name (or var=name) is compulsory, but name may be missing or empty. When nonempty, name becomes a local (immutable) variable bound to the respective item.
index=indexNameindex is present but indexName omitted, then index='index' is assumed.
previous=prevNameundefined for the first item.
'previous' is assumed.
next=nextNamekey="keyExpression"
You may however specify a keyExpression, which may refer to name and indexName and should compute a unique "key" value for each item in the iteration.
In that case OtoReact will use this to identify old and new items. When an item in a new iteration has the same key value as an item in the previous iteration, then OtoReact won't rebuild its DOM-tree, but will move its previous DOM-tree to its (possibly) new position and will update it in-place.
This has the following effects:
oncreate handlers won be executed again
When items in the iteration are always distinct, then the key may be the item itself: key=name.
When items in the iteration always remain in place, then the key may be the index number: key=indexName
hash="hashExpressionList"If, however, you specify a hashExpressionList, then OtoReact will assume an item (identified by its key) has not changed when the values of the expressions in hashExpressionList haven't changed, and it won't spend time on updating its DOM subtree.
The hash expression need not be a real hash function; it could be a possibly long string.
If, e.g., items are read from an external source and parsed using JSON.parse, then one could preserve the unparsed string and use it as the hash value.
reacting (or reactive)reacting (or reactive) to make name reactive.
When reacting is present, then name gets a property name.U, which yields the value of name and marks it as dirty, just as with reactive variables.
Name does not become a full RVAR: one cannot get or set name.V. One could call it an RVAR-light.
Note that just name is marked dirty, not the source (array) of the iteration. If you need elements of your application outside the local subtree to react on changes, then you can use the updates attribute described below.
updates="rvarList"updates="rvarList".
When present, then name becomes reacting as above, and whenever name is marked dirty (by a reference to name.U), then all RVAR's in rvarList> will be marked dirty too.
You can find an example of this in the todo-list below: whenever an item is (un)marked as done, then both lists that depend on TODO are updated.
Scripts can be included almost anywhere in your application, either embedded or through an external src reference.
External scripts may be written in TypeScript, of course.
You have to be aware that scripts included in the main document, except those tagged with nomodule, are automatically executed by the browser before OtoReact has had any opportunity to intervene.
You have also to be aware that scripts in browser-based JavaScript come in two flavours: classic JavaScript and JavaScript modules, see MDN, and that OtoReact is imported as a JavaScript module.
Outside the main document, both classic and module scripts will be executed by OtoReact, and OtoReact add a number of extra options.
Together, you have the following alternatives:
RVAR.
"use strict"; or 'use strict'; (including the quotes) at the beginning of the script.
async or defer as described on MDN.
type="module", or switch to async, fetching and executing is done asynchronously, and awaited for when the respective DOM tree is being built.
defer, execution is postponed till the first time the DOM tree is being built.
window.name = … or better: globalThis.name = … before they are available in RHTML code.
defines="nameList" telling which names should be put in global scope.
So when this type of script is used inside, e.g., a component, then the script is executed just once, the values of the listed names are internally remembered, and visible as local variables just inside the component.
updating, the script is executed every time the surrounding RHTML is being built or updated.
So when this type of script is used inside a component template, then each instance of the component will have its own set of data.
specifies that the given content should react on changes to any of the listed RVAR's. So whenever one or more of the RVAR's have changed, the content will be updated.REACT on=RVARlist Content/REACT
With attribute
With attribute renew, the given content will never be updated, but will be removed and rebuilt on every update request.
A oncreate or onupdate handlers in between elements.
We start with a gentle introduction into components, which is followed by a full descripion of all concepts and features, and some more examples.
Suppose one wishes to insert a single multiplication table (or 'times table') on multiple places within one application.
Then one could want to define a construct (1):
R and F are JavaScript variables representing the values of the construct properties #rows and #factor.
HTML expression (1) is called the component 'signature', RHTML code (2) is called its 'template', and #rows and #factor are called its 'parameters'.
The construct can be defined by writing:
The new construct can subsequently be used like:
This is called an 'instance' of the construct.Instances are fully reactive:
In all cases, parameters represent data.
Slots represent not data, but a small or large document part
, including document markup, or even a reactive sub-application.
A component slot is like a placeholder, to be filled by the user of the component. So an instance of the component must provide definitions of the actual values of the component slots. These definitions are actually templates just like component templates.
Slots can have parameters and slots themselves ('subslots'). So a slot is itself characterized by a signature, just as a component.
Inside a component, slots can be instantiated just like used-defined constructs. So in OtoReact, we have three types of constructs:
Now note:
For example, to define a construct target="_blank" attribute, one writes:
A component definition consists of a component signature, optionally one or more style sheets, scripts, local definitions etc., and finally a component template:
<{}COMPONENT recursive? encapsulate?>
<{}SIGNATURE> Signature <{}/SIGNATURE>
or just:
Signature
<{}STYLE …> … <{}/STYLE>…
<{}SCRIPT …> … <{}/SCRIPT>…
<{}DEFINE …> … <{}/DEFINE>…
<{}TEMPLATE …> Template <{}/TEMPLATE>
<{}/COMPONENT>
recursive, the component can be recursive: the template may contain instances of the component itself. Also see Mutual recursion.
encapsulate, the generated content will be encapsulated, meaning mainly that the component can contain its own styling rules, independent of the main document.
See encapsulate for details.
Note: RHTML component templates and slots are not the same as HTML web component templates and slots. It's the same idea but a different syntax and implementation, both simpler and more powerful.
The first element inside
It is optionally surrounded by
E.g.:
name, #name, or @name of the signature element define the parameters of the component.
There are special cases:
name? or with a nonempty default value name="string" or #name="expression" define optional parameters.
undefined when there is no default.
An empty string name="" is not recognized as a default value, because the HTML parser does not distinguish between a missing value and the empty string.
To specify the empty string as default value, one must use an empty string expression, like: #name=" '' ".
The default default value is undefined.
name where name starts with "on" represent event handlers.
@name define two-way parameters.
...name is a rest parameter. It must be the last parameter.
For each slot, component instances may have one or more child elements that should match the slot signature.
The slots are available as constructs within the component template.
When building a component instance, the content of any instance child element that matches a slot name becomes the (slot) template for the slot instances within the component template
As slots have signatures, they can have parameters and slots themselves.
count) are available as local variables inside the template.
@name will be a new RVAR for each created instance of the component.
name.V will be the value of the assignment target provided in the instance, and whenever a new value is assigned to the RVAR, that value will be assigned to the assignment target as well.
name="string"#name="expression"name="statements"
function(event) \{ statements \}.
@name must be a valid assignment target.
When the component has a rest parameter, then the values specified by any remaining attributes are collected into that rest parameter. Otherwise it is an error when there are remaining attributes.
#count=7 and the #num.
Putting it all together, we get:
recursive, the component template may contain instances of the component itself. There is an example below.
Mutual recursion between components means a series of multiple component definitions that may contain instances of each other.
Mutual recursion is possible by combining multiple signatures and multiple templates within a single
encapsulate.
encapsulate, instances of the component are replaced by the output of the component template.
Any styling rules of the surrounding document apply to the component output as well, and vice versa.
To make styling rules apply only to the component content, use CSS class names.
encapsulate,
Any styling rules of the surrounding document do not apply to the encapsulated content, and vice versa. The component can have its own style sheet(s), independent of the main document.
Styling rules and inline styles specifically targeted at the custom element, however, are inherited by the encapsulated content.
The internally generated custom element name is required to contain a hyphen.
If the component name does not already contain a hyphen, then a prefix 'rhtml-' is prepended.
This concerns the generated output only, component instances use just the component name, but styling rules targeted at the custom element must use the prefix.
Components may be recursive, i.e. refer to themselve, when the attribute recursive is specified.
Here is a recursive component, which images a JavaScript nested list of lists:
Components may redefine HTML elements. To refer to the original element, add a dot to the tag name.
Here is a component that redefines target='_blank' attribute:
As there are no restrictions on slot signatures, slots can have slots themselves (subslots). So when a component template instantiates a slot, it may provide templates for its subslots, and these subslots can be instantiated within the slot templates of a component instance.
This is particularly useful for components with a
This documentation website uses such subslots to redefine
For a reactive application, using
The following custom component does a much better job; it allows one to bind an RVAR, or any other object property, directly to the selected radio button value, without needing a
<{}FOR of=slot>
Body
<{}/FOR>
When this template is instantiated, Body will be repeated for each provided slot template, and slot instances inside Body will be replaced by the output of just that template, rather than by the concatenation of all slot templates.
Here is a component which allows one to define tables column by column:
INCLUDE src="URL" /INCLUDE To speed things up, you can insert a preload link in the main document header:
<{}link rel=preload href="URL" as=fetch crossorigin>
("crossorigin" seems incorrect, but Google Chrome requires it.)
A drawback of using
Some engines, including Google, do execute JavaScript and will see the full document as it is built by OtoReact, while others won't.
So if you want all search engines to see the content of your document, then do not use
An alternative might be to use server-side technology like Server Side Includes (SSI) to include your file, if your server supports it.
It is possible to use both types of inclusion at once, if you have e.g. a production server that supports SSI and a development environment that does not:
A
It may even be concatenated to the main file; the HTML parser will insert it inside the document body.
<{}IMPORT async? src="src" defines?="nameList" include?>
Signatures
<{}/IMPORT>
imports a number of components defined in a The module may reside either:
id being exactly equal to srcasync option, the
The listed signature need not be identical to the external signature, but must be 'compatible'. E.g., the order of parameters and slots may differ, and the external signature may have optional parameters and slots missing in the listed signature.
Default values may be different too; Otoreact will use the values listed in the
async option, the defines="nameList", then the names in the list, which must be defined as local variables in the module, are made available as local variables in the importing RHTML code.
include is specified, then all content is instantiated at the place of the This is mainly useful for invisible content, like the definition of pop-up windows and datalists.
preload link in the main document header.
Braces \{ \} inside \$\{ \}.
Here is a sample style sheet template that, upon pressing the button, gives all
Some points of attention:
reacton.
@import cannot use string interpolation.
<{}RSTYLE>
<{}INCLUDE src="yourDynamicStyleSheet.css">
<{}/RSTYLE>
\\{ \\}.
The tagname may not be empty, and updates to the tagname of a created element are ignored.
When the value is null or empty, no attribute is added.
Updates to the attribute name are handled accordingly.
RHTML #srctext="sourceExpr" /RHTML After each build or update, when the text value of sourceExpr has changed, then this text is compiled as RHTML, built, encapsulated using Shadow DOM, and shown.
The demo component on this page uses
Here you have an
You can use this e.g. to set a dynamic document title or to add dynamic links, or to specify header content for documents created by
<{}DOCUMENT name=docName params?="nameList" window?=windowVar encapsulate?>
content
<{}/DOCUMENT>
allows you to define a separate document or form, that remains part of the same RHTML application.
When params is specified, then the given parameter names are available within content as local variables.
When window is specified, then the given windowVar is available within content as a local variable, and will be bound to the created window.
Note that global variable window refers to the main application window, but may be hidden by the local variable by specifying window="window".
The available methods are:
docName.open(target?, windowFeatures?, ...args)Window.open(), and parameter names bound to the given args.
onkeydown handler that closes the window when the escape key is pressed.
docName.print(...args)docName.closeAll()docName.open.
You could for example use this in an ondestroy handler, to close all child windows when the document definition is removed from the DOM-tree:
encapsulate no rules are copied.
Here a summary of the OtoReact routing features:
docLocationdocLocation.V is always equal to location.href (currently "{docLocation.V}").
It allows applications to react on changes in the URL, and you can set its value to navigate to a different URL while staying within the application.
It has four additional properties and methods:
docLocation.basepathdocLocation.subpathAn application can use pattern matching on this value to decode encoded special characters, capture parameters into variables, and show the correct page.
docLocation.searchParamsnew URLSearchParams(location.search).
docLocation.search(key, value)null.
rerouteControl-clicks are not intercepted and will open in a new browser tab.
reroute(href)docLocation.V = href.
\{basePattern: …\}The default basePattern is "/".
E.g., if an OtoReact application is loaded from URL "https://mydomain.org/myapplication/myroutedpage?query" and basePattern is not explicitly set, then BasePath is set equal to the initial part of pathname "/myapplication/myroutedpage" up to and including the last slash, which is "/myapplication/".
RCompile(HTMLElement, options?), the options object may contain the following settings.
| Name | Default | Description |
|---|---|---|
| bTiming | false | When true, OtoReact will write timing information to the JavaScript console for each compile, build or update action. |
| bAbortOnError | false |
When true, building or updating the DOM will be aborted when any error occurs.
An error message will be written to the console and shown in an alert box. Compile time errors will always cause an abort, except within |
| bShowErrors | true | When true, errors while building or updating the DOM will be included in the DOM output, besides being written to the console. |
| bDollarRequired | false | When true, a dollar sign is required before string interpolation braces, and no backslash is needed before other braces within interpolated text. |
| bSetPointer | true | When true, OtoReact will add style 'cursor: pointer' to any element that has a non-null onclick handler and is not disabled. |
| basePattern | "/" |
Regular expression to identify the part of the URL that constitutes the base path, see basePattern.
Relevant only for applications that use URL routing. |
| preformatted | [ ] |
By default, OtoReact may skip white space when it reckons it is irrelevant for the visual appearance of the page. Only within the preformatted With the 'preformatted' option, you can set an array of other (case insensitive) element names that should have all white space preserved in the DOM. You may need to use this when you have set the |
| bKeepWhiteSpace | false | When true, all white space will be preserved in the DOM output. |
| bKeepComments | false | When true, comments in the RHTML code will be included in the DOM output. |
RCompile(document.body, \{bTiming: true, preformatted: ['quote'], } );
Static content in an OtoReact main file, on the other hand, is just HTML and can be indexed by any search engine. This is an advantage over frameworks like Angular and Svelte, where all content is generated by JavaScript.
Static content in included files can only be loaded throught JavaScript, and can only be indexed by search engines executing JavaScript.
If you want your static content be split over multiple files ánd want it to be indexable by any search engine, you could think of the following solutions:
All code you enter will be saved by your browser in localStorage, and should be available when you return to this page.
Built with OtoReact