sprae 9.0.1 → 9.1.0

package/core.js

@@ -1,7 +1,3 @@
-import swapdom from 'swapdom'
-import * as signals from 'ulive'
-import justin from 'subscript/justin'
-
 // polyfill
 const _dispose = (Symbol.dispose ||= Symbol("dispose"));
 
@@ -9,7 +5,7 @@ const _dispose = (Symbol.dispose ||= Symbol("dispose"));
 const SPRAE = `∴`
 
 // signals impl
-export let { signal, effect, batch, computed, untracked } = signals;
+export let signal, effect, batch, computed, untracked
 
 // reserved directives - order matters!
 export const directive = {};
@@ -49,7 +45,9 @@ export default function sprae(container, values) {
 
           // NOTE: secondary directives don't stop flow nor extend state, so no need to check
           for (let name of names) {
-            let update = (directive[name] || directive.default)(el, attr.value, state, name);
+            let dir = directive[name] || directive.default
+            let evaluate = (dir.parse || parse)(attr.value, parse)
+            let update = dir(el, evaluate, state, name);
             if (update) {
               update[_dispose] = effect(update);
               effects.push(update);
@@ -83,6 +81,7 @@ export default function sprae(container, values) {
     while (effects.length) effects.pop()[_dispose]();
     container.classList.remove(SPRAE)
     memo.delete(container);
+    // NOTE: each child disposes own children etc.
     let els = container.getElementsByClassName(SPRAE);
     while (els.length) els[0][_dispose]?.()
   }
@@ -93,29 +92,31 @@ export default function sprae(container, values) {
 // default compiler
 const evalMemo = {};
 
-export let compile = (expr, dir, evaluate) => {
-  if (evaluate = evalMemo[expr = expr.trim()]) return evaluate
+const parse = (expr, dir, fn) => {
+  if (fn = evalMemo[expr = expr.trim()]) return fn
 
   // static-time errors
-  try {
-    // evaluate = new Function(`__scope`, `with (__scope) { return ${expr} };`);
-    evaluate = justin(expr);
-  }
-  catch (e) { throw Object.assign(e, { message: `${SPRAE} ${e.message}\n\n${dir}${expr ? `="${expr}"\n\n` : ""}`, expr }) }
+  try { fn = compile(expr); }
+  catch (e) { throw Object.assign(e, { message: `∴ ${e.message}\n\n${dir}${expr ? `="${expr}"\n\n` : ""}`, expr }) }
+
+  fn.expr = expr
 
   // runtime errors
-  return evalMemo[expr] = evaluate
+  return evalMemo[expr] = fn
 }
 
+// default compiler is simple new Function (tiny obfuscation against direct new Function detection)
+export let compile
+
 // DOM swapper
-export let swap = swapdom
+export let swap
 
 // interpolate a$<b> fields from context
 export const ipol = (v, state) => {
   return v?.replace ? v.replace(/\$<([^>]+)>/g, (match, field) => state[field]?.valueOf?.() ?? '') : v
 };
 
-// configure signals/compiler/differ
+// configure signals/compile/differ
 // it's more compact than using sprae.signal = signal etc.
 sprae.use = s => {
   s.signal && (
@@ -126,4 +127,5 @@ sprae.use = s => {
     untracked = s.untracked || batch
   );
   s.swap && (swap = s.swap)
+  s.compile && (compile = s.compile)
 }

package/directive/aria.js

@@ -1,8 +1,7 @@
-import { directive, compile } from "../core.js";
+import { directive } from "../core.js";
 import { attr, dashcase } from './default.js'
 
-directive['aria'] = (el, expr, state) => {
-  let evaluate = compile(expr, 'aria')
+directive['aria'] = (el, evaluate, state) => {
   const update = (value) => {
     for (let key in value) attr(el, 'aria-' + dashcase(key), value[key] == null ? null : value[key] + '');
   }

package/directive/class.js

@@ -1,7 +1,6 @@
-import { directive, compile, ipol } from "../core.js";
+import { directive, ipol } from "../core.js";
 
-directive.class = (el, expr, state) => {
-  let evaluate = compile(expr, 'class');
+directive.class = (el, evaluate, state) => {
   let cur = new Set
   return () => {
     let v = evaluate(state);

package/directive/data.js

@@ -1,8 +1,6 @@
-import { directive, compile } from "../core.js";
-
-directive['data'] = (el, expr, state) => {
-  let evaluate = compile(expr, 'data')
+import { directive } from "../core.js";
 
+directive['data'] = (el, evaluate, state) => {
   return () => {
     let value = evaluate(state)?.valueOf()
     for (let key in value) el.dataset[key] = value[key];

package/directive/default.js

@@ -1,15 +1,14 @@
-import { directive, compile, ipol } from "../core.js";
+import { directive, ipol } from "../core.js";
 
 // set generic property directive
-directive.default = (el, expr, state, name) => {
+directive.default = (el, evaluate, state, name) => {
   let evt = name.startsWith("on") && name.slice(2);
-  let evaluate = compile(expr, name);
 
   if (evt) {
     let off
     return () => (
       off?.(), // intermediate teardown
-      off = on(el, evt, evaluate(state))
+      off = on(el, evt, evaluate(state)?.valueOf())
     );
   }
 

package/directive/each.js

@@ -1,61 +1,61 @@
-import sprae, { directive, compile, swap } from "../core.js";
+import sprae, { directive, swap } from "../core.js";
 
 export const _each = Symbol(":each");
 
-const keys = {}; // boxed primitives pool
+const keys = {}, _key = Symbol('key');
 
 // :each must init before :ref, :id or any others, since it defines scope
-directive.each = (tpl, expr, state, name) => {
-  let [leftSide, itemsExpr] = expr.split(/\s+in\s+/);
-  let [itemVar, idxVar = "_$"] = leftSide.split(/\s*,\s*/);
-
+(directive.each = (tpl, [itemVar, idxVar, evaluate], state) => {
   // we need :if to be able to replace holder instead of tpl for :if :each case
-  const holder = (tpl[_each] = document.createTextNode(""));
+  const holder = (tpl[_each] = document.createTextNode("")), parent = tpl.parentNode;
   tpl.replaceWith(holder);
 
-  const evaluate = compile(itemsExpr, name);
-  const memo = new WeakMap;
-
-  tpl.removeAttribute(':key')
+  // key -> el
+  const elCache = new WeakMap, stateCache = new WeakMap
 
   let cur = [];
 
+  const remove = el => {
+    el.remove()
+    el[Symbol.dispose]?.()
+    if (el[_key]) {
+      elCache.delete(el[_key])
+      stateCache.delete(el[_key])
+    }
+  }, { insert, replace } = swap
+
+  const options = { remove, insert, replace }
+
+  // naive approach: whenever items change we replace full list
   return () => {
-    // naive approach: whenever items change we replace full list
     let items = evaluate(state)?.valueOf(), els = [];
-    if (typeof items === "number") items = Array.from({ length: items }, (_, i) => i);
 
-    const count = new WeakSet
-    for (let idx in items) {
-      let item = items[idx]
-      // creating via prototype is faster in both creation time & reading time
-      let substate = Object.create(state, { [idxVar]: { value: idx } });
-      substate[itemVar] = item; // can be changed by subsequent updates, need to be writable
-      let el, key = (item.key ?? item.id ?? item); // NOTE: no need to unwrap singnal, since item fallback covers it
+    if (typeof items === "number") items = Array.from({ length: items }, (_, i) => i)
 
-      if (key == null) el = tpl.cloneNode(true)
-      else {
-        // make sure key is object
-        if (Object(key) !== key) key = (keys[key] ||= Object(key));
+    // let c = 0, inc = () => { if (c++ > 100) throw 'Inf recursion' }
+    const count = new WeakMap
+    for (let idx in items) {
+      let el, item = items[idx], key = item?.key ?? item?.id ?? item ?? idx
+      key = (Object(key) !== key) ? (keys[key] ||= Object(key)) : item
 
-        if (count.has(key)) {
-          console.warn('Duplicate key', key), el = tpl.cloneNode(true);
-        }
-        else {
-          count.add(key);
-          el = memo.get(key) || memo.set(key, tpl.cloneNode(true)).get(key);
-        }
-      }
+      if (key == null || count.has(key) || tpl.content) el = (tpl.content || tpl).cloneNode(true)
+      else count.set(key, 1), (el = elCache.get(key) || (elCache.set(key, tpl.cloneNode(true)), elCache.get(key)))[_key] = key;
 
-      if (el.content) el = el.content.cloneNode(true) // <template>
+      // creating via prototype is faster in both creation time & reading time
+      let substate = stateCache.get(key) || (stateCache.set(key, Object.create(state, { [idxVar]: { value: idx } })), stateCache.get(key));
+      substate[itemVar] = item; // can be changed by subsequent updates, need to be writable
 
-      sprae(el, substate)
+      sprae(el, substate);
 
       // document fragment
-      if (el.nodeType === 11) els.push(...el.childNodes);
-      else els.push(el);
+      if (el.nodeType === 11) els.push(...el.childNodes); else els.push(el);
     }
 
-    swap(holder.parentNode, cur, cur = els, holder);
-  };
-};
+    swap(parent, cur, cur = els, holder, options);
+  }
+}).parse = (expr, parse) => {
+  let [leftSide, itemsExpr] = expr.split(/\s+in\s+/);
+  let [itemVar, idxVar = "$"] = leftSide.split(/\s*,\s*/);
+
+  return [itemVar, idxVar, parse(itemsExpr)]
+}

package/directive/fx.js

@@ -1,6 +1,5 @@
-import { directive, compile } from "../core.js";
+import { directive } from "../core.js";
 
-directive.fx = (el, expr, state, name) => {
-  let evaluate = compile(expr, name);
+directive.fx = (el, evaluate, state) => {
   return () => evaluate(state);
 };

package/directive/html.js

@@ -1,7 +1,7 @@
-import sprae, { directive, compile } from "../core.js";
+import sprae, { directive } from "../core.js";
 
-directive.html = (el, expr, state, name) => {
-  let evaluate = compile(expr, name), tpl = evaluate(state);
+directive.html = (el, evaluate, state) => {
+  let tpl = evaluate(state);
 
   if (!tpl) return
 

package/directive/if.js

@@ -1,17 +1,15 @@
-import sprae, { compile, directive, swap } from "../core.js";
+import sprae, { directive, swap } from "../core.js";
 import { _each } from './each.js';
 
 // :if is interchangeable with :each depending on order, :if :each or :each :if have different meanings
 // as for :if :scope - :if must init first, since it is lazy, to avoid initializing component ahead of time by :scope
 // we consider :scope={x} :if={x} case insignificant
 const _prevIf = Symbol("if");
-directive.if = (ifEl, expr, state, name) => {
+directive.if = (ifEl, evaluate, state) => {
   let parent = ifEl.parentNode,
     next = ifEl.nextElementSibling,
     holder = document.createTextNode(''),
 
-    evaluate = compile(expr, name),
-
     // actual replaceable els (takes <template>)
     cur, ifs, elses, none = [];
 

package/directive/ref.js

@@ -1,10 +1,10 @@
 import { directive, ipol } from "../core.js";
 
 // ref must be last within primaries, since that must be skipped by :each, but before secondaries
-directive.ref = (el, expr, state) => {
+(directive.ref = (el, expr, state) => {
   let prev;
   return () => {
     if (prev) delete state[prev]
     state[prev = ipol(expr, state)] = el;
   }
-};
+}).parse = expr => expr

package/directive/scope.js

@@ -1,9 +1,8 @@
-import sprae, { directive, compile } from "../core.js";
+import sprae, { directive } from "../core.js";
 
 // `:each` can redefine scope as `:each="a in {myScope}"`,
 // same time per-item scope as `:each="..." :scope="{collapsed:true}"` is useful
-directive.scope = (el, expr, rootState, name) => {
-  let evaluate = compile(expr, name);
+directive.scope = (el, evaluate, rootState) => {
   // local state may contain signals that update, so we take them over
   return () => {
     sprae(el, { ...rootState, ...(evaluate(rootState)?.valueOf?.() || {}) });

package/directive/style.js

@@ -1,7 +1,6 @@
-import { directive, compile, ipol } from "../core.js";
+import { directive, ipol } from "../core.js";
 
-directive.style = (el, expr, state) => {
-  let evaluate = compile(expr, 'style');
+directive.style = (el, evaluate, state) => {
   let initStyle = el.getAttribute("style") || "";
   if (!initStyle.endsWith(";")) initStyle += "; ";
 

package/directive/text.js

@@ -1,8 +1,7 @@
-import { directive, compile } from "../core.js";
+import { directive } from "../core.js";
 
 // set text content
-directive.text = (el, expr, state) => {
-  let evaluate = compile(expr, 'text');
+directive.text = (el, evaluate, state) => {
   if (el.content) el.replaceWith(el = document.createTextNode('')) // <template :text="abc"/>
 
   return () => {

package/directive/value.js

@@ -1,10 +1,8 @@
-import { directive, compile } from "../core.js";
+import { directive } from "../core.js";
 import { attr } from './default.js';
 
 // connect expr to element value
-directive.value = (el, expr, state) => {
-  let evaluate = compile(expr, 'value');
-
+directive.value = (el, evaluate, state) => {
   let from, to;
   let update = el.type === "text" || el.type === ""
     ? (value) => el.setAttribute("value", (el.value = value == null ? "" : value))

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprae",
   "description": "DOM microhydration.",
-  "version": "9.0.1",
+  "version": "9.1.0",
   "main": "./sprae.js",
   "module": "./sprae.js",
   "type": "module",
@@ -12,9 +12,8 @@
     "dist"
   ],
   "dependencies": {
-    "subscript": "^8.3.4",
-    "swapdom": "^1.1.1",
-    "ulive": "^1.0.1"
+    "signal-polyfill": "^0.1.0",
+    "swapdom": "^1.2.1"
   },
   "devDependencies": {
     "@preact/signals": "^1.1.3",
@@ -23,8 +22,10 @@
     "esbuild": "^0.15.14",
     "hyperf": "^1.6.2",
     "jsdom": "^21.1.0",
+    "subscript": "^8.3.4",
     "terser": "^5.15.1",
     "tst": "^7.1.1",
+    "ulive": "^1.0.1",
     "usignal": "^0.9.0",
     "wait-please": "^3.1.0"
   },

package/readme.md

@@ -3,7 +3,7 @@
 > DOM tree microhydration
 
 _Sprae_ is a compact & ergonomic progressive enhancement framework.<br/>
-It provides `:`-attributes for inline markup logic with _signals_-based reactivity.<br/>
+It provides `:`-attributes for inline markup logic with [_signals_](https://github.com/proposal-signals/proposal-signals) reactivity.<br/>
 Perfect for small-scale websites, prototypes, or lightweight UI.<br/>
 
 
@@ -121,7 +121,7 @@ Set value of an input, textarea or select. Takes handle of `checked` and `select
 </select>
 ```
 
-#### `:*="value"`, `:="values"`
+#### `:[prop]="value"`, `:="values"`
 
 Set any attribute(s).
 
@@ -170,7 +170,7 @@ Run effect, not changing any attribute.<br/>Optional cleanup is called in-betwee
 <div :fx="id = setInterval(tick, interval), () => clearInterval(tick)" />
 ```
 
-#### `:on*="handler"`
+#### `:on[event]="handler"`
 
 Attach event(s) listener with possible modifiers.
 
@@ -265,10 +265,43 @@ Trigger when element is connected / disconnected from DOM.
 ```
 -->
 
+## Customization
+
+_Sprae_ can be reconfigured to use alternative signals provider, expressions evaluator or directives.
+
+### Signals
+
+Sprae uses [standard signals](https://github.com/proposal-signals/proposal-signals) for reactivity, but can be switched to any preact-flavored signals library:
+
+```js
+import sprae, { signal, computed, effect, batch, untracked } from 'sprae';
+import * as signals from '@preact/signals-core';
+
+sprae.use(signals);
 
-## Expressions
+sprae(el, { name: signal('Kitty') });
+```
 
-Expressions use [_justin_](https://github.com/dy/subscript?tab=readme-ov-file#justin), a minimal JS subset. It avoids "unsafe-eval" CSP and provides sandboxing. Also it's _fast_.
+Provider | Size | Feature
+:---|:---|:---
+[`ulive`](https://ghub.io/ulive) | 350b | Minimal implementation, basic performance, good for small states
+[`@webreflection/signal`](https://ghib.io/@webreflection/signal) | 531b | Class-based, better performance, good for small-medium states
+[`usignal`](https://ghib.io/usignal) | 850b | Class-based with optimizations, good for medium states
+[`@preact/signals-core`](https://ghub.io/@preact/signals-core) | 1.47kb | Best performance, good for any states
+
+
+### Evaluator
+
+Expressions use _new Function_ as default evaluator, which is fast & compact way, but violates "unsafe-eval" CSP. To make eval stricter & safer, an alternative evaluator can be configured, eg. _justin_:
+
+```js
+import sprae from 'sprae'
+import justin from 'subscript/justin'
+
+sprae.use({compile: justin}) // set up justin as default compiler
+```
+
+[_Justin_](https://github.com/dy/subscript?tab=readme-ov-file#justin) is minimal JS subset. It avoids "unsafe-eval" CSP and provides sandboxing.
 
 ###### Operators:
 
@@ -283,42 +316,29 @@ Expressions use [_justin_](https://github.com/dy/subscript?tab=readme-ov-file#ju
 `true false null undefined NaN`
 
 
-## Signals
-
-Sprae uses minimal signals based on [`ulive`](https://ghub.io/ulive). It can be switched to [`@preact/signals-core`](https://ghub.io/@preact/signals-core), [`@webreflection/signal`](https://ghib.io/@webreflection/signal), [`usignal`](https://ghib.io/usignal), which are better for complex states:
-
-```js
-import sprae, { signal, computed, effect, batch, untracked } from 'sprae';
-import * as signals from '@preact/signals-core';
-
-sprae.use(signals);
-
-sprae(el, { name: signal('Kitty') });
-```
-
-
-## Customization
+## Directives
 
-Sprae build can be tailored to project needs via `sprae/core` and `sprae/directive/*`:
+Sprae build can be tailored to project needs via `sprae/core`:
 
 ```js
-import sprae, { directive, compile } from 'sprae/core.js'
+import sprae, { directive } from 'sprae/core.js'
 
 // include directives
-import 'sprae/directive/if.js';
-import 'sprae/directive/text.js';
+import 'sprae/directive/if.js'
+import 'sprae/directive/text.js'
 
 // define custom directive
-directive.id = (el, expr, state) => {
-  const evaluate = compile(state, 'id') // expression string -> evaluator
+directive.id = (el, evaluate, state) => {
   return () => el.id = evaluate(state)  // return update function
 }
 ```
 
+See [`sprae.js`](./sprae.js) for example.
+
 <!--
 ### DOM diffing
 
-DOM differ uses [swapdom](https://github.com/dy/swapdom), can be reconfigured to [list-difference](https://github.com/paldepind/list-difference/), [udomdiff](https://github.com/WebReflection/udomdiff), [domdiff](https://github.com/WebReflection/domdiff), [etc](https://github.com/luwes/js-diff-benchmark):
+DOM diffing uses [swapdom](https://github.com/dy/swapdom), but can be reconfigured to [list-difference](https://github.com/paldepind/list-difference/), [udomdiff](https://github.com/WebReflection/udomdiff), [domdiff](https://github.com/WebReflection/domdiff), or any other ([benchmark](https://github.com/luwes/js-diff-benchmark)):
 
 ```js
 import sprae from 'sprae';
@@ -329,26 +349,13 @@ sprae.use({ swap: domdiff });
 ```
 -->
 
-<!--
-### Custom Build
-
-`sprae/core` exports bare-bones engine without directives, which allows tailoring build to project needs:
-
-```js
-import sprae, { directive, effect } from 'sprae/core'
-
-// include required directives
-import 'sprae/directive/if'
-import 'sprae/directive/text'
-```
--->
-
 
 <!-- ## Dispose
 
 To destroy state and detach sprae handlers, call `element[Symbol.dispose]()`. -->
 
 
+<!--
 ## v9 changes
 
 * No autoinit → use manual init via `import sprae from 'sprae'; sprae(document.body, state)`.
@@ -361,7 +368,7 @@ To destroy state and detach sprae handlers, call `element[Symbol.dispose]()`. --
 * Async props / events are not supported, pass async functions via state.
 * Directives order matters, eg. `<a :if :each :scope />` !== `<a :scope :each :if />`
 * Only one directive per `<template>`, eg. `<template :each />`, not `<template :if :each/>`
-
+ -->
 
 ## Justification
 

package/sprae.js

@@ -1,6 +1,9 @@
-export * from './core.js'
-export { default } from './core.js'
+import sprae from './core.js'
 
+import * as signals from './signal.js'
+import swap from 'swapdom/inflate'
+
+// default directives
 import './directive/if.js'
 import './directive/each.js'
 import './directive/ref.js'
@@ -12,3 +15,15 @@ import './directive/style.js'
 import './directive/value.js'
 import './directive/fx.js'
 import './directive/default.js'
+
+// default signals
+sprae.use(signals)
+
+// default compiler (indirect new Function to avoid detector)
+sprae.use({ compile: expr => sprae.constructor(`__scope`, `with (__scope) { return ${expr} };`) })
+
+// defaul dom swapper
+sprae.use({ swap })
+
+export default sprae
+export { signal, computed, effect, batch, untracked } from './core.js'