SproutJS - A Javascript client-side frame work that adds reactivity and State management to native HTML elements

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 (_) character. Commands can be used to influence the UI according to State properties.

`_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 template.html file for describing its UI, 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.

Conditional Rendering

<slot is="reactive-slot" _condition="isShown">
    <div _if="true">
        I'm visible!
    </div>
    <div _if="false">
        He's hidden!
    </div>
    <div _if="true">
        I'm visible too!
    </div>
</slot>

<button ref="btn"
    <span is="reactive-span" hidden="$!isShown">hide</span>
    <span is="reactive-span" hidden="$isShown">show</span>
    It!
</button<

Might be rendered as:

<slot is="reactive-slot" _condition="isShown">
    <div _if="true">
    I'm visible!
    </div>
    <div _if="true">
        I'm visible too!
    </div>
</slot>

<button ref="btn"
    <span is="reactive-span">hide</span>
    <span is="reactive-span" hidden>show</span>
    It!
</button<

If the value of isShown State property, which is passed to the _condition Command attribute resolves to true, then all the elements, inside the <slot> having _if="true" will be rendered, and those with _if="false" will not.

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.
A simple demo demonstrating conditional rendering.

Go to the Github repo to read the full documentation.