Satori
Satori is a minimalistic JavaScript reactive view library that uses ES6 Proxies for data binding (browser support).
Key features:
- Unobtrusive — you can keep your model intact. In contrast to non-Proxy solutions, even property additions do not need any special treatment
- Pure JavaScript DSL makes code reuse more straightforward
- Expressive — TodoMVC is only 75 SLOC (including most of the markup)
- It doesn’t dictate you anything — it’s not a framework
- Tiny — core library is ~700 SLOC, 5 KB gzipped
- Server-side rendering
- No dependencies
- Undo/redo
- Fast
These qualities also make it useful for quick prototyping — it won’t interfere with your model code, requires almost zero boilerplate and helps you create and reorganize ad hoc components very quickly.
Getting started
Install the library:
npm i satorijs
Hello, World:
; const view = ;const h = viewh;const HelloView = ;view;
But this is just a static element. To make something reactive, first make sure that the root object of your model is wrapped in a proxy:
const user = view;
Then just wrap the reactive part in a function:
const HelloView = ;view;// The content of the <span> will be updated automatically;
Reactivity is based primarily on registering property accesses via proxies, so the properties you want observed have to be accessed inside the wrapper function. This means you can’t just write () => name
— that would be static. Also, you can’t make reactive text nodes — you must have an element. This is why we added a <span>
here.
Documentation
Element factory
DOM elements are created using the element factory method:
: Element
Element content
There are multiple ways to specify the element content:
- Text:
- One child element:
- Array of elements and/or strings:
The view.setElementContent()
method is called under the hood and supports all of the above:
view
Modifiers
Element modifiers are passed as the second argument to the element factory:
Modifiers are view object methods and can also be applied to any existing DOM elements:
viewcontentview usernameview
You also can use assign()
method to apply multiple modifiers at once to an existing element:
view;
All available modifiers are listed below.
content
Content: Content passed to the element factory is handled as content
modifier internally.
content: string|Node|string|Node | string|Node|string|Node
Examples:
show
Visibility: Adds display: none
style property when the value is false and removes it, when the value is true.
show: bool | bool
class
CSS classes: Presence of CSS classes is specified using booleans:
class: string | string | string: bool | bool …
Single static class:
Static:
Reactive:
attr
Attributes: attr: string: string | string …
prop
Element properties: prop: string: any | any …
prop: checked: trueprop: value: ''
data
Element data-attributes (dataset): data: string: string | string …
css
Element style properties: css: string: string | string …
on
Event handlers: Simply calls addEventHandler()
for each key.
on: {…} …
onCapture
Capturing event handlers: For capturing handlers use onCapture
modifier instead of on
:
onCapture: {…} …
keydown
, keyup
Keyboard event handler: keydown: viewKey*: … …keyup: viewKey*: … …
bind
Two-way data binding: The value of the to
element property gets assigned to the model[key]
on every event specified in on
. The opposite happens on every change of model[key]
. Parameter to
defaults to 'checked'
for checkboxes or 'value'
for anything else, and on
defaults to ['change']
.
bind: model: proxy key: string to: string on: string|string
Examples
- Component TodoMVC
- MVVM TodoMVC (75 SLOC)
Performance
Satori is very fast. It was built with performance in mind and tries to do only what is essential, so there’s actually not much room left for further optimization of typical operations. It updates the UI asynchronously to make bulk updates faster and reflects array modifications with minimal DOM changes. It shows very good results on the TodoMVC benchmark, but I won’t provide you with them due to its controversial nature. In particular, libraries based on virtual DOM, despite performing well in this benchmark, tend to have poor responsiveness when the number of rendered elements is large enough. For instance, simple editing of text in an input field can become irritating because of the delays introduced by rerendering and diffing performed by those libraries on each keystroke.
Helper functions
qs(selector, scope = document)
— alias forscope.querySelector(selector)
qsa(selector, scope = document)
— alias forscope.querySelectorAll(selector)
each(selector, scope = document, func)
— callfunc
for each element inquerySelectorAll()
resultsortCompare(a, b)
— comparer for sorting numbers and strings, for example:['b', 'a'].sort(sortCompare)
arrayRemove(array, value)
— remove first occurrence ofvalue
fromarray
Debugging
Enable logging of all flushes and affected observers in console:
viewlogFlushes = true;
Enable logging of all proxy events:
viewlogEvents = true;
Highlight all affected DOM elements:
viewhighlightUpdates = true;
To inspect registered object observers, just explore the [Symbol(proxyInternals)].observers
property of the proxy object in the developer tools of your browser. Most interesting observer fields are element
and name
. When you hover the element
value, the actual element will usually be highlighted if it is visible.
License
Apache 2.0.