diff --git a/docs/demo.mjs b/docs/demo.mjs index 1f041ff..ab26be0 100644 --- a/docs/demo.mjs +++ b/docs/demo.mjs @@ -62,7 +62,7 @@ function animate(node) { const t2 = `translateX(0) translateY(0)`; const c1 = "var(--c-e)"; - const c2 = "var(--c-a2)"; + const c2 = "var(--c-l)"; node.animate([ { transform: t1, color: c1 }, { transform: t2, color: c2 }, diff --git a/docs/docs.mjs b/docs/docs.mjs index c8cf747..3c41e2d 100644 --- a/docs/docs.mjs +++ b/docs/docs.mjs @@ -3,7 +3,7 @@ import { observable, createComputed } from "./computed-properties.mjs"; import parseMustache from "./mustache.mjs"; import "./demo.mjs"; -// s2.debug = true; +s2.debug = true; const computed = createComputed(mount, unmount); let i = 0; diff --git a/docs/index.html b/docs/index.html index a33c97e..b4b9eb9 100644 --- a/docs/index.html +++ b/docs/index.html @@ -17,13 +17,13 @@ +
+
+
+

+ ⚡︎² + Simplicity of logic-less templating,
Speed of a modern, optimized DOM library. +

+
+
-
+

- s2(object, template);

- Returns [proxy, documentFragment], a reactive view model and a fragment containing its elements. + function s2<T>(d: T, t: Element): [T, Node];

-
Optimized for granular re-rendering of complex, real-time user interfaces.
+
+ Optimized for granular re-rendering of complex, real-time user interfaces. +
-
A
-
B
-
C
-
D
-
E
-
F
-
G
-
H
-
I
+
一
+
二
+
三
+
四
+
五
+
六
@@ -256,11 +278,11 @@
Addendum

Rationale

-

s² enables developers to implement complex UI as data models, like a retained mode for the web. In more technical terms, s² is a single function that proxies mutable data to reflect in the DOM. s² has a few design goals:

+

s² is a bit like Mustache, but reactive. I built it because I wanted to bind mutable data to the DOM efficiently without Turing-completeness at the template level. Complex UIs are mostly about managing state, and s² has a very data-centric approach, versus component-centric. A few design goals:

    -
  • Enable separation of application logic from the presentation layer. For example, unlike React which combines hooks, templates (JSX), and arbitrary code in a render function, s² has data, functions that operate on the data, and declarative templates.
    • -
  • The entire API is built on top of its main function, which handles rendering and event listening. Advanced features such as computed properties are implemented as addons.
    • -
  • Templates are logic-less. This differs from prior art such as JSX where embedded JavaScript is allowed. Due to this constraint, logic-less templating maps well to s², and there is an addon for Mustache templates that is aware of HTML context.
    • +
  • Separation of application logic from the presentation layer. Unlike React which combines hooks, templates (JSX), and arbitrary code in a render function, s² has data, functions that operate on the data, and declarative templates.
    • +
  • The entire API is built on top of its main function, which handles rendering and event listening. Advanced features such as computed properties are implemented as modular addons.
    • +
  • Templates are logic-less, embedded JavaScript is not allowed. Due to this constraint, logic-less templating maps well to s², and there is an addon for Mustache templates that is aware of HTML context.

Here is a sample to-do app built with s²:

@@ -268,13 +290,13 @@

Rationale

-
+
JavaScript
HTML + Mustache