Usage highlights
State Attributes
<div
is="reactive-div"
ref="todo-item"
class="todo-item"
completed="$completed"
editing="$editMode"
title="$title">
</div>
Might be rendered to:
<div
is="reactive-div"
ref="todo-item"
class="todo-item"
completed
title="The value of the title State property here">
</div>
completed, editing, and title attributes becomes State Attributes when their values start with a Dollar sign ($).
Now they are reactively bound to the State properties: completed, editing and title respectively. Their values will always
automatically reflect the values of those properties within an associated State object; changing the values in the State object - will automatically change the values in the attributes.
In this specific example, they are both boolean values, Sprout knows how to handle that accordingly, e.g. if editing is true it will simply appear
on the element as editing, where if it's false it will not be included as an attribute on the element.
The title value in the example is a string, and will auto reflect the value of the State property title.
Notice the usage of the is="reactive-div" attribute. Specifying the attribute is, is what enables the reactive behavior on the element.
The is attribute is part of the Web Components / Custom Elements API.
(* For browsers which still doesn't support this feature, like Safari, a Polyfill is automatically added as part of the framework's runtime).
The ref attribute is a Sprout attribute that is used to create associations between elements and event handlers.
Special operators in State Attributes
<div is="reactive-div" hidden="$!editMode"></div>
If the result of the value of hidden resolves to true then the div element will be hidden.
the ! operator is used as a negation operator ("not editMode"). The value will be true if editMode if falsy
and false if it's truthy. The hidden attribute is a native built-in attribute in HTML, but using a State value on it, also turns it to a
State attribute. This is an example for how you can easily control the visibility of an element via State.
Command attributes
These are attribute names starting with an underscore (_map
<ul is="reactive-ul" class="todo-list" _map="todos:todo-item"></ul>
Might render to:
<ul is="reactive-ul" class="todo-list" _map="todos:todo-item">
<li><todo-item> <!-- Shadow DOM of the todo-item component instance here --< </todo-item></li>
<li><todo-item> <!-- Shadow DOM of the todo-item component instance here --< </todo-item></li>
...
</ul>
The _map command will "map" the objects inside the array assigned to the State property todos to <todo-item>
custom element components. Each of the array items - an object - will be used as the State Object for the <todo-item> component.
_text
<span is="reactive-span" _text="$todo-title"></span>
Might be rendered as:
<span is="reactive-span" _text="$todo-title">The value of toto-title property as the text content here</span>
The _text command controls the textual content of an element, associating it to a state property, reactively binding them.
This is just the tip of the iceberg. Sprout also offers a powerful development environment and compiler, where you can define "components",
by creating folders containing the 3 aspects of a component: a style.css to
describe its visual styling (scoped to the component), and a runtime.js file describing the component logic: defining State, and Event Handlers.
Demos
Several demos were built and included in the repo, to showcase Sprout. You can see live versions of them:
- A Tic-Tac-Toe game with history and undos, based on the one in the React website tutorial.
- A Todo List app, based on the one built in MDN's React tutorial.
- A Todo List app, based on TodoMVC.
Go to the Github repo to read the full documentation.