sprae 11.5.1 → 11.5.3

package/core.js

@@ -1,5 +1,5 @@
-import { use, effect } from "./signal.js";
-import { store, _signals } from './store.js';
+import { use, effect, untracked } from "./signal.js";
+import { store } from './store.js';
 
 // polyfill
 export const _dispose = (Symbol.dispose ||= Symbol("dispose"));
@@ -16,8 +16,8 @@ export const directive = {}
  * @param {(expr: string) => (state: Object) => any} [p=parse] - Create evaluator from expression string.
  */
 export const dir = (name, create, p = parse) => directive[name] = (el, expr, state, name, update, evaluate) => (
+  update = create(el, state, expr, name),
   evaluate = p(expr),
-  update = create(el, state, expr, name, evaluate),
   () => update(evaluate(state))
 )
 
@@ -33,9 +33,9 @@ export const sprae = (el=document.body, values) => {
   if (el[_state]) return Object.assign(el[_state], values)
 
   // take over existing state instead of creating a clone
-  let state = store(values || {}), offs = [], fx = [],
+  let state = store(values || {}), offs = [], fx = []
 
-    init = (el, attrs = el.attributes) => {
+  let init = (el, attrs = el.attributes) => {
       // we iterate live collection (subsprae can init args)
       if (attrs) for (let i = 0; i < attrs.length;) {
         let { name, value } = attrs[i], update, dir
@@ -49,7 +49,9 @@ export const sprae = (el=document.body, values) => {
             update = (directive[dir] || directive.default)(el, value, state, dir)
 
             // save & start effect
-            fx.push(update), offs.push(effect(update))
+            fx.push(update)
+            // FIXME: since effect can have async start, we can just use el[_on]
+            offs.push(effect(update))
 
             // stop after :each, :if, :with etc.
             if (el[_state] === null) return
@@ -96,11 +98,15 @@ sprae.use = s => (
 export const parse = (expr, dir, fn) => {
   if (fn = memo[expr = expr.trim()]) return fn
 
-  // static-time errors
+  // static time errors
   try { fn = compile(expr) }
   catch (e) { err(e, dir, expr) }
 
-  return memo[expr] = fn
+  // run time errors
+  return memo[expr] = s => {
+    try { return fn(s) }
+    catch(e) { err(e, dir, expr) }
+  }
 }
 const memo = {};
 

package/directive/class.js

@@ -1,4 +1,4 @@
-import { dir } from "../core.js";
+import { dir, directive } from "../core.js";
 
 dir('class', (el, cur) => (
   cur = new Set,
@@ -13,3 +13,5 @@ dir('class', (el, cur) => (
     for (let cls of cur = clsx) el.classList.add(cls)
   })
 )
+
+directive.className = directive.class // JSX alias

package/directive/each.js

@@ -35,10 +35,14 @@ dir('each', (tpl, state, expr) => {
         for (; i < newl; i++) {
           cur[i] = newItems[i]
           let idx = i,
+            // FIXME: inherited state is cheaper in terms of memory and faster in terms of performance
+            // compared to cloning all parent signals and creating a proxy
+            // FIXME: besides try to avoid _signals access: we can optimize store then not checking for _signals key
             scope = store({
               [itemVar]: cur[_signals]?.[idx] || cur[idx],
               [idxVar]: keys ? keys[idx] : idx
             }, state),
+
             el = tpl.content ? frag(tpl) : tpl.cloneNode(true);
 
           holder.before(el.content || el);

package/directive/ref.js

@@ -1,9 +1,10 @@
 import { dir, parse } from "../core.js";
-import { setter, ensure } from "./value.js";
+import { untracked } from "../signal.js";
+import { setter } from "../store.js";
 
-dir('ref', (el, state, expr, _, ev) => (
-  ensure(state, expr),
-  ev(state) == null ?
-    (setter(expr)(state, el), _ => _) :
-    v => v.call(null, el)
+dir('ref', (el, state, expr) => (
+  // FIXME: ideally we don't use untracked here, but ev may have internal refs that will subscribe root effect
+  untracked(() => typeof parse(expr)(state) == 'function') ?
+    v => v.call(null, el) :
+    (setter(expr)(state, el), _ => _)
 ))

package/directive/value.js

@@ -1,5 +1,7 @@
-import sprae from "../core.js";
-import { dir, parse } from "../core.js";
+import sprae, { parse } from "../core.js";
+import { dir } from "../core.js";
+import { untracked } from "../signal.js";
+import { setter } from "../store.js";
 import { attr } from './default.js';
 
 
@@ -29,9 +31,6 @@ dir('value', (el, state, expr) => {
             } :
               (value) => (el.value = value);
 
-  // make sure value exists in state
-  ensure(state, expr)
-
   // bind back to value, but some values can be not bindable, eg. `:value="7"`
   try {
     const set = setter(expr)
@@ -48,20 +47,10 @@ dir('value', (el, state, expr) => {
       // select options must be initialized before calling an update
       sprae(el, state)
     }
+
+    // initial state value
+    untracked(()=>parse(expr)(state)) ?? handleChange()
   } catch {}
 
   return update
 })
-
-// create expression setter, reflecting value back to state
-export const setter = (expr, set = parse(`${expr}=__`)) => (
-  // FIXME: if there's a simpler way to set value in justin?
-  (state, value) => (
-    state.__ = value,
-    set(state, value),
-    delete state.__
-  )
-)
-
-// make sure state contains first element of path, eg. `a` from `a.b[c]`
-export const ensure = (state, expr, name = expr.match(/^\w+(?=\s*(?:\.|\[|$))/)) => name && (state[name[0]] ??= null)

package/directive/with.js

@@ -1,4 +1,10 @@
 import sprae, { dir } from "../core.js";
+import { untracked } from "../signal.js";
 import store, { _signals } from '../store.js';
 
-dir('with', (el, rootState, state) => (state=null, values => sprae(el, state ? values : state = store(values, rootState))))
+dir('with', (el, rootState, state) => (
+  state=null,
+  values => //untracked(() => (
+    sprae(el, state ? values : state = store(values, rootState))
+  //))
+))

package/dist/sprae.auto.js

@@ -64,60 +64,64 @@ var init_signal = __esm({
 });
 
 // store.js
-var _signals, _change, store, list, mut, set, store_default;
+var _signals, _change, _stash, store, list, mut, set, setter, store_default;
 var init_store = __esm({
   "store.js"() {
     init_signal();
+    init_core();
     _signals = Symbol("signals");
     _change = Symbol("change");
+    _stash = "__";
     store = (values, parent) => {
       if (!values) return values;
       if (values[_signals] || values[Symbol.toStringTag]) return values;
       if (values.constructor !== Object) return Array.isArray(values) ? list(values) : values;
-      let signals = { ...parent?.[_signals] }, _len = signal(Object.values(values).length), state = new Proxy(signals, {
-        get: (_, key) => key === _change ? _len : key === _signals ? signals : signals[key]?.valueOf(),
-        set: (_, key, v, s) => (s = signals[key], set(signals, key, v), s ?? ++_len.value, 1),
+      let signals = Object.create(parent?.[_signals] || {}), _len = signal(Object.keys(values).length), stash;
+      let state = new Proxy(signals, {
+        get: (_, k) => k === _change ? _len : k === _signals ? signals : k === _stash ? stash : k in signals ? signals[k]?.valueOf() : globalThis[k],
+        set: (_, k, v, s) => k === _stash ? (stash = v, 1) : (s = k in signals, set(signals, k, v), s || ++_len.value),
         // bump length for new signal
-        deleteProperty: (_, key) => (signals[key] && (signals[key][Symbol.dispose]?.(), delete signals[key], _len.value--), 1),
+        deleteProperty: (_, k) => (signals[k] && (signals[k][Symbol.dispose]?.(), delete signals[k], _len.value--), 1),
         // subscribe to length when object is spread
-        ownKeys: () => (_len.value, Reflect.ownKeys(signals))
-      }), descs = Object.getOwnPropertyDescriptors(values), desc;
-      for (let key in values) {
-        if ((desc = descs[key])?.get)
-          (signals[key] = computed(desc.get.bind(state)))._set = desc.set?.bind(state);
+        ownKeys: () => (_len.value, Reflect.ownKeys(signals)),
+        has: (_) => true
+        // sandbox prevents writing to global
+      }), descs = Object.getOwnPropertyDescriptors(values);
+      for (let k in values) {
+        if (descs[k]?.get)
+          (signals[k] = computed(descs[k].get.bind(state)))._set = descs[k].set?.bind(state);
         else
-          signals[key] = null, set(signals, key, values[key]);
+          signals[k] = null, set(signals, k, values[k]);
       }
       return state;
     };
     list = (values) => {
       let lastProp, _len = signal(values.length), signals = Array(values.length).fill(), state = new Proxy(signals, {
-        get(_, key) {
-          if (typeof key === "symbol") return key === _change ? _len : key === _signals ? signals : signals[key];
-          if (key === "length") return mut.includes(lastProp) ? _len.peek() : _len.value;
-          lastProp = key;
-          if (signals[key]) return signals[key].valueOf();
-          if (key < signals.length) return (signals[key] = signal(store(values[key]))).value;
+        get(_, k) {
+          if (typeof k === "symbol") return k === _change ? _len : k === _signals ? signals : signals[k];
+          if (k === "length") return mut.includes(lastProp) ? _len.peek() : _len.value;
+          lastProp = k;
+          return (signals[k] ?? (signals[k] = signal(store(values[k])))).valueOf();
         },
-        set(_, key, v) {
-          if (key === "length") {
+        set(_, k, v) {
+          if (k === "length") {
             for (let i = v; i < signals.length; i++) delete state[i];
             _len.value = signals.length = v;
           } else {
-            set(signals, key, v);
-            if (key >= _len.peek()) _len.value = signals.length = +key + 1;
+            set(signals, k, v);
+            if (k >= _len.peek()) _len.value = signals.length = +k + 1;
           }
           return 1;
         },
-        deleteProperty: (_, key) => (signals[key]?.[Symbol.dispose]?.(), delete signals[key], 1)
+        deleteProperty: (_, k) => (signals[k]?.[Symbol.dispose]?.(), delete signals[k], 1)
       });
       return state;
     };
     mut = ["push", "pop", "shift", "unshift", "splice"];
-    set = (signals, key, v) => {
-      let s = signals[key], cur;
-      if (key[0] === "_") signals[key] = v;
-      else if (!s) signals[key] = s = v?.peek ? v : signal(store(v));
+    set = (signals, k, v) => {
+      let s = signals[k], cur;
+      if (k[0] === "_") signals[k] = v;
+      else if (!s) signals[k] = s = v?.peek ? v : signal(store(v));
       else if (v === (cur = s.peek())) ;
       else if (s._set) s._set(v);
       else if (Array.isArray(v) && Array.isArray(cur)) {
@@ -128,6 +132,8 @@ var init_store = __esm({
         else s.value = v;
       } else s.value = store(v);
     };
+    setter = (expr, set2 = parse(`${expr}=${_stash}`)) => (state, value) => (state[_stash] = value, // save value to stash
+    set2(state));
     store_default = store;
   }
 });
@@ -143,17 +149,19 @@ var init_core = __esm({
     _on = Symbol("on");
     _off = Symbol("off");
     directive = {};
-    dir = (name, create, p = parse) => directive[name] = (el, expr, state, name2, update, evaluate) => (evaluate = p(expr), update = create(el, state, expr, name2, evaluate), () => update(evaluate(state)));
+    dir = (name, create, p = parse) => directive[name] = (el, expr, state, name2, update, evaluate) => (update = create(el, state, expr, name2), evaluate = p(expr), () => update(evaluate(state)));
     sprae = (el = document.body, values) => {
       if (el[_state]) return Object.assign(el[_state], values);
-      let state = store(values || {}), offs = [], fx = [], init = (el2, attrs = el2.attributes) => {
+      let state = store(values || {}), offs = [], fx = [];
+      let init = (el2, attrs = el2.attributes) => {
         if (attrs) for (let i = 0; i < attrs.length; ) {
           let { name, value } = attrs[i], update, dir2;
           if (name.startsWith(prefix)) {
             el2.removeAttribute(name);
             for (dir2 of name.slice(prefix.length).split(":")) {
               update = (directive[dir2] || directive.default)(el2, value, state, dir2);
-              fx.push(update), offs.push(effect(update));
+              fx.push(update);
+              offs.push(effect(update));
               if (el2[_state] === null) return;
             }
           } else i++;
@@ -177,7 +185,13 @@ var init_core = __esm({
       } catch (e) {
         err(e, dir2, expr);
       }
-      return memo[expr] = fn;
+      return memo[expr] = (s) => {
+        try {
+          return fn(s);
+        } catch (e) {
+          err(e, dir2, expr);
+        }
+      };
     };
     memo = {};
     err = (e, dir2 = "", expr = "") => {
@@ -300,6 +314,82 @@ var init_each = __esm({
   }
 });
 
+// directive/ref.js
+var init_ref = __esm({
+  "directive/ref.js"() {
+    init_core();
+    init_signal();
+    init_store();
+    dir("ref", (el, state, expr) => (
+      // FIXME: ideally we don't use untracked here, but ev may have internal refs that will subscribe root effect
+      untracked(() => typeof parse(expr)(state) == "function") ? (v) => v.call(null, el) : (setter(expr)(state, el), (_) => _)
+    ));
+  }
+});
+
+// directive/with.js
+var init_with = __esm({
+  "directive/with.js"() {
+    init_core();
+    init_signal();
+    init_store();
+    dir("with", (el, rootState, state) => (state = null, (values) => (
+      //untracked(() => (
+      core_default(el, state ? values : state = store_default(values, rootState))
+    )));
+  }
+});
+
+// directive/text.js
+var init_text = __esm({
+  "directive/text.js"() {
+    init_core();
+    dir("text", (el) => (
+      // <template :text="a"/> or previously initialized template
+      (el.content && el.replaceWith(el = frag(el).childNodes[0]), (value) => el.textContent = value == null ? "" : value)
+    ));
+  }
+});
+
+// directive/class.js
+var init_class = __esm({
+  "directive/class.js"() {
+    init_core();
+    dir(
+      "class",
+      (el, cur) => (cur = /* @__PURE__ */ new Set(), (v) => {
+        let clsx = /* @__PURE__ */ new Set();
+        if (v) {
+          if (typeof v === "string") v.split(" ").map((cls) => clsx.add(cls));
+          else if (Array.isArray(v)) v.map((v2) => v2 && clsx.add(v2));
+          else Object.entries(v).map(([k, v2]) => v2 && clsx.add(k));
+        }
+        for (let cls of cur) if (clsx.has(cls)) clsx.delete(cls);
+        else el.classList.remove(cls);
+        for (let cls of cur = clsx) el.classList.add(cls);
+      })
+    );
+    directive.className = directive.class;
+  }
+});
+
+// directive/style.js
+var init_style = __esm({
+  "directive/style.js"() {
+    init_core();
+    dir(
+      "style",
+      (el, initStyle) => (initStyle = el.getAttribute("style"), (v) => {
+        if (typeof v === "string") el.setAttribute("style", initStyle + (initStyle.endsWith(";") ? "" : "; ") + v);
+        else {
+          if (initStyle) el.setAttribute("style", initStyle);
+          for (let k in v) k[0] == "-" ? el.style.setProperty(k, v[k]) : el.style[k] = v[k];
+        }
+      })
+    );
+  }
+});
+
 // directive/default.js
 var mods, keys, throttle, debounce, attr, dashcase;
 var init_default = __esm({
@@ -449,11 +539,12 @@ var init_default = __esm({
 });
 
 // directive/value.js
-var setter, ensure;
 var init_value = __esm({
   "directive/value.js"() {
     init_core();
     init_core();
+    init_signal();
+    init_store();
     init_default();
     dir("value", (el, state, expr) => {
       const update = el.type === "text" || el.type === "" ? (value) => el.setAttribute("value", el.value = value == null ? "" : value) : el.tagName === "TEXTAREA" || el.type === "text" || el.type === "" ? (value, from, to) => (
@@ -467,7 +558,6 @@ var init_value = __esm({
         for (let o of el.options) o.removeAttribute("selected");
         for (let v of value) el.querySelector(`[value="${v}"]`).setAttribute("selected", "");
       } : (value) => el.value = value;
-      ensure(state, expr);
       try {
         const set2 = setter(expr);
         const handleChange = el.type === "checkbox" ? () => set2(state, el.checked) : el.type === "select-multiple" ? () => set2(state, [...el.selectedOptions].map((o) => o.value)) : () => set2(state, el.selectedIndex < 0 ? null : el.value);
@@ -476,85 +566,11 @@ var init_value = __esm({
           new MutationObserver(handleChange).observe(el, { childList: true, subtree: true, attributes: true });
           core_default(el, state);
         }
+        untracked(() => parse(expr)(state)) ?? handleChange();
       } catch {
       }
       return update;
     });
-    setter = (expr, set2 = parse(`${expr}=__`)) => (
-      // FIXME: if there's a simpler way to set value in justin?
-      (state, value) => (state.__ = value, set2(state, value), delete state.__)
-    );
-    ensure = (state, expr, name = expr.match(/^\w+(?=\s*(?:\.|\[|$))/)) => {
-      var _a;
-      return name && (state[_a = name[0]] ?? (state[_a] = null));
-    };
-  }
-});
-
-// directive/ref.js
-var init_ref = __esm({
-  "directive/ref.js"() {
-    init_core();
-    init_value();
-    dir("ref", (el, state, expr, _, ev) => (ensure(state, expr), ev(state) == null ? (setter(expr)(state, el), (_2) => _2) : (v) => v.call(null, el)));
-  }
-});
-
-// directive/with.js
-var init_with = __esm({
-  "directive/with.js"() {
-    init_core();
-    init_store();
-    dir("with", (el, rootState, state) => (state = null, (values) => core_default(el, state ? values : state = store_default(values, rootState))));
-  }
-});
-
-// directive/text.js
-var init_text = __esm({
-  "directive/text.js"() {
-    init_core();
-    dir("text", (el) => (
-      // <template :text="a"/> or previously initialized template
-      (el.content && el.replaceWith(el = frag(el).childNodes[0]), (value) => el.textContent = value == null ? "" : value)
-    ));
-  }
-});
-
-// directive/class.js
-var init_class = __esm({
-  "directive/class.js"() {
-    init_core();
-    dir(
-      "class",
-      (el, cur) => (cur = /* @__PURE__ */ new Set(), (v) => {
-        let clsx = /* @__PURE__ */ new Set();
-        if (v) {
-          if (typeof v === "string") v.split(" ").map((cls) => clsx.add(cls));
-          else if (Array.isArray(v)) v.map((v2) => v2 && clsx.add(v2));
-          else Object.entries(v).map(([k, v2]) => v2 && clsx.add(k));
-        }
-        for (let cls of cur) if (clsx.has(cls)) clsx.delete(cls);
-        else el.classList.remove(cls);
-        for (let cls of cur = clsx) el.classList.add(cls);
-      })
-    );
-  }
-});
-
-// directive/style.js
-var init_style = __esm({
-  "directive/style.js"() {
-    init_core();
-    dir(
-      "style",
-      (el, initStyle) => (initStyle = el.getAttribute("style"), (v) => {
-        if (typeof v === "string") el.setAttribute("style", initStyle + (initStyle.endsWith(";") ? "" : "; ") + v);
-        else {
-          if (initStyle) el.setAttribute("style", initStyle);
-          for (let k in v) k[0] == "-" ? el.style.setProperty(k, v[k]) : el.style[k] = v[k];
-        }
-      })
-    );
   }
 });
 
@@ -590,7 +606,19 @@ var init_data = __esm({
 // sprae.js
 var sprae_exports = {};
 __export(sprae_exports, {
-  default: () => sprae_default
+  _change: () => _change,
+  _signals: () => _signals,
+  _stash: () => _stash,
+  batch: () => batch,
+  computed: () => computed,
+  default: () => sprae_default,
+  effect: () => effect,
+  list: () => list,
+  setter: () => setter,
+  signal: () => signal,
+  store: () => store,
+  untracked: () => untracked,
+  use: () => use
 });
 var sprae_default;
 var init_sprae = __esm({
@@ -608,6 +636,8 @@ var init_sprae = __esm({
     init_default();
     init_aria();
     init_data();
+    init_store();
+    init_signal();
     core_default.use({ compile: (expr) => core_default.constructor(`with (arguments[0]) { return ${expr} };`) });
     sprae_default = core_default;
   }