sprae 10.0.1 → 10.1.1

package/core.js

@@ -1,90 +1,73 @@
-import { effect, untracked, use } from "./signal.js";
+import { use } from "./signal.js";
 import store, { _signals } from './store.js';
 
 // polyfill
 const _dispose = (Symbol.dispose ||= Symbol("dispose"));
 
-// mark
-const SPRAE = `∴`
-
 // reserved directives - order matters!
 export const directive = {};
 
 // sprae element: apply directives
 const memo = new WeakMap();
 
-export default function sprae(els, values) {
-  let state
+export default function sprae(el, values) {
+  // text nodes, comments etc - but collections are fine
+  if (!el?.children) return
 
-  // make multiple items
-  if (!els?.[Symbol.iterator]) els = [els]
+  // repeated call can be caused by :each with new objects with old keys needs an update
+  if (memo.has(el)) {
+    // we rewrite signals instead of update, because user should have what he provided
+    return Object.assign(memo.get(el), values)
+  }
 
-  for (let el of els) {
-    // text nodes, comments etc - but collections are fine
-    if (el?.children) {
-      // repeated call can be caused by :each with new objects with old keys needs an update
-      if (memo.has(el)) {
-        // we rewrite signals instead of update, because user should have what he provided
-        Object.assign(memo.get(el), values)
-      }
-      else {
-        // take over existing state instead of creating clone
-        state ||= store(values || {});
+  // take over existing state instead of creating clone
+  const state = store(values || {}), disposes = []
 
-        init(el, state);
+  init(el);
 
-        // if element was spraed by :with or :each instruction - skip, otherwise save
-        if (!memo.has(el)) memo.set(el, state);
-      }
-    }
-  };
+  // if element was spraed by :with or :each instruction - skip, otherwise save
+  if (!memo.has(el)) memo.set(el, state);
+
+  el[_dispose] = () => {
+    while (disposes.length) disposes.pop()();
+    memo.delete(el);
+  }
 
   return state;
-}
 
-// init directives on a single element
-function init(el, state, parent = el.parentNode, effects = []) {
-  if (el.attributes) {
-    // init generic-name attributes second
-    for (let i = 0; i < el.attributes.length;) {
-      let attr = el.attributes[i];
-
-      if (attr.name[0] === ':') {
-        el.removeAttribute(attr.name);
-
-        // multiple attributes like :id:for=""
-        let names = attr.name.slice(1).split(':')
-
-        // NOTE: secondary directives don't stop flow nor extend state, so no need to check
-        for (let name of names) {
-          let dir = directive[name] || directive.default
-          let evaluate = (dir.parse || parse)(attr.value, parse)
-          let dispose = dir(el, evaluate, state, name);
-          if (dispose) effects.push(dispose);
-        }
-
-        // stop if element was spraed by internal directive
-        if (memo.has(el)) return;
-
-        // stop if element is skipped (detached) like in case of :if or :each
-        if (el.parentNode !== parent) return;
-      } else i++;
+  function init(el, parent = el.parentNode) {
+    if (el.attributes) {
+      // init generic-name attributes second
+      for (let i = 0; i < el.attributes.length;) {
+        let attr = el.attributes[i];
+
+        if (attr.name[0] === ':') {
+          el.removeAttribute(attr.name);
+
+          // multiple attributes like :id:for=""
+          let names = attr.name.slice(1).split(':')
+
+          // NOTE: secondary directives don't stop flow nor extend state, so no need to check
+          for (let name of names) {
+            let dir = directive[name] || directive.default
+            let evaluate = (dir.parse || parse)(attr.value, parse)
+            let dispose = dir(el, evaluate, state, name);
+            if (dispose) disposes.push(dispose);
+          }
+
+          // stop if element was spraed by internal directive
+          if (memo.has(el)) return disposes.push(el[_dispose]);
+
+          // stop if element is skipped (detached) like in case of :if or :each
+          if (el.parentNode !== parent) return;
+        } else i++;
+      }
     }
-  }
 
-  for (let child of [...el.children]) init(child, state, el)
+    for (let child of [...el.children]) init(child, el)
+  };
+}
 
-  // mark spraed element
-  el.classList?.add(SPRAE);
-  el[_dispose] = () => {
-    while (effects.length) effects.pop()();
-    el.classList.remove(SPRAE);
-    memo.delete(el);
-    // NOTE: each child disposes own children etc.
-    let els = el.getElementsByClassName(SPRAE);
-    while (els.length) els[0][_dispose]?.()
-  }
-};
 
 // compiler
 const evalMemo = {};

package/directive/each.js

@@ -58,15 +58,18 @@ directive.each = (tpl, [itemVar, idxVar, evaluate], state) => {
               [itemVar]: { get() { return cur[idx] } },
               [idxVar]: { value: keys ? keys[idx] : idx },
             }),
-            el = (tpl.content || tpl).cloneNode(true), // single element or fragment
-            els = tpl.content ? [...el.childNodes] : [el] // total added elements
+            el = (tpl.content || tpl).cloneNode(true),
+            frag = tpl.content ?
+              // fake fragment to init sprae
+              { children: [...el.children], remove() { this.children.map(el => el.remove()) } } :
+              el;
 
           holder.before(el);
-          sprae(els, scope);
+          sprae(frag, scope);
 
           // signal/holder disposal removes element
           ((cur[_signals] ||= [])[i] ||= {})[Symbol.dispose] = () => {
-            for (let el of els) el[Symbol.dispose](), el.remove()
+            frag[Symbol.dispose](), frag.remove()
           };
         }
       }

package/directive/with.js

@@ -1,16 +1,24 @@
 import sprae, { directive } from "../core.js";
 import store, { _signals } from '../store.js';
 import { effect } from "../signal.js";
+import { signal } from "ulive";
 
 directive.with = (el, evaluate, rootState) => {
-  let state, values
+  let state
   return effect(() => {
-    values = evaluate(rootState);
-    Object.assign(state ||= sprae(el,
-      store(
-        values,
-        Object.create(rootState[_signals])
-      )
-    ), values)
+    let values = evaluate(rootState);
+
+    if (!state) {
+      state = store({});
+      // inherit root signals
+      Object.assign(state[_signals], rootState[_signals]);
+      // create local scope signals
+      for (let key in values) state[_signals][key] = null, state[key] = values[key]
+
+      sprae(el, state)
+    }
+    else {
+      Object.assign(state, values)
+    }
   })
 };

package/dist/sprae.js

@@ -21,17 +21,16 @@ function use(s) {
 // store.js
 var _signals = Symbol("signals");
 var _change = Symbol("length");
-function store(values, signals) {
+function store(values) {
   if (!values)
     return values;
-  if (values[_signals] && !signals)
+  if (values[_signals])
     return values;
   if (Array.isArray(values))
     return list(values);
   if (values.constructor !== Object)
     return values;
-  let _len = signal(Object.values(values).length);
-  signals ||= {};
+  let signals = {}, _len = signal(Object.values(values).length);
   const 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),
@@ -41,19 +40,15 @@ function store(values, signals) {
       return Reflect.ownKeys(signals);
     }
   });
-  if (values[_signals])
-    for (let key in values)
-      signals[key] = values[_signals][key];
-  else
-    for (let key in values) {
-      const desc = Object.getOwnPropertyDescriptor(values, key);
-      if (desc?.get) {
-        (signals[key] = computed(desc.get.bind(state)))._set = desc.set?.bind(state);
-      } else {
-        signals[key] = null;
-        set(signals, key, values[key]);
-      }
+  for (let key in values) {
+    const desc = Object.getOwnPropertyDescriptor(values, key);
+    if (desc?.get) {
+      (signals[key] = computed(desc.get.bind(state)))._set = desc.set?.bind(state);
+    } else {
+      signals[key] = null;
+      set(signals, key, values[key]);
     }
+  }
   return state;
 }
 function list(values) {
@@ -63,10 +58,8 @@ function list(values) {
   let _len = signal(values.length), signals = Array(values.length).fill(null);
   const state = new Proxy(signals, {
     get(_, key) {
-      if (key === _change)
-        return _len;
-      if (key === _signals)
-        return signals;
+      if (typeof key === "symbol")
+        return key === _change ? _len : key === _signals ? signals : signals[key];
       if (key === "length")
         return Array.prototype[lastProp] ? _len.peek() : _len.value;
       lastProp = key;
@@ -131,62 +124,50 @@ function del(signals, key) {
 
 // core.js
 var _dispose = Symbol.dispose ||= Symbol("dispose");
-var SPRAE = `\u2234`;
 var directive = {};
 var memo = /* @__PURE__ */ new WeakMap();
-function sprae(els, values) {
-  let state;
-  if (!els?.[Symbol.iterator])
-    els = [els];
-  for (let el of els) {
-    if (el?.children) {
-      if (memo.has(el)) {
-        Object.assign(memo.get(el), values);
-      } else {
-        state ||= store(values || {});
-        init(el, state);
-        if (!memo.has(el))
-          memo.set(el, state);
-      }
-    }
-  }
-  ;
-  return state;
-}
-function init(el, state, parent = el.parentNode, effects = []) {
-  if (el.attributes) {
-    for (let i = 0; i < el.attributes.length; ) {
-      let attr2 = el.attributes[i];
-      if (attr2.name[0] === ":") {
-        el.removeAttribute(attr2.name);
-        let names = attr2.name.slice(1).split(":");
-        for (let name of names) {
-          let dir = directive[name] || directive.default;
-          let evaluate = (dir.parse || parse)(attr2.value, parse);
-          let dispose = dir(el, evaluate, state, name);
-          if (dispose)
-            effects.push(dispose);
-        }
-        if (memo.has(el))
-          return;
-        if (el.parentNode !== parent)
-          return;
-      } else
-        i++;
-    }
+function sprae(el, values) {
+  if (!el?.children)
+    return;
+  if (memo.has(el)) {
+    return Object.assign(memo.get(el), values);
   }
-  for (let child of [...el.children])
-    init(child, state, el);
-  el.classList?.add(SPRAE);
+  const state = store(values || {}), disposes = [];
+  init(el);
+  if (!memo.has(el))
+    memo.set(el, state);
   el[_dispose] = () => {
-    while (effects.length)
-      effects.pop()();
-    el.classList.remove(SPRAE);
+    while (disposes.length)
+      disposes.pop()();
     memo.delete(el);
-    let els = el.getElementsByClassName(SPRAE);
-    while (els.length)
-      els[0][_dispose]?.();
   };
+  return state;
+  function init(el2, parent = el2.parentNode) {
+    if (el2.attributes) {
+      for (let i = 0; i < el2.attributes.length; ) {
+        let attr2 = el2.attributes[i];
+        if (attr2.name[0] === ":") {
+          el2.removeAttribute(attr2.name);
+          let names = attr2.name.slice(1).split(":");
+          for (let name of names) {
+            let dir = directive[name] || directive.default;
+            let evaluate = (dir.parse || parse)(attr2.value, parse);
+            let dispose = dir(el2, evaluate, state, name);
+            if (dispose)
+              disposes.push(dispose);
+          }
+          if (memo.has(el2))
+            return disposes.push(el2[_dispose]);
+          if (el2.parentNode !== parent)
+            return;
+        } else
+          i++;
+      }
+    }
+    for (let child of [...el2.children])
+      init(child, el2);
+  }
+  ;
 }
 var evalMemo = {};
 var parse = (expr, dir, fn) => {
@@ -273,28 +254,6 @@ var batch2 = (fn) => {
 };
 var untracked2 = (fn, prev, v) => (prev = current, current = null, v = fn(), current = prev, v);
 
-// node_modules/swapdom/deflate.js
-var swap = (parent, a, b, end = null, { remove, insert } = swap) => {
-  let i = 0, cur, next, bi, bidx = new Set(b);
-  while (bi = a[i++])
-    !bidx.has(bi) ? remove(bi, parent) : cur = cur || bi;
-  cur = cur || end, i = 0;
-  while (bi = b[i++]) {
-    next = cur ? cur.nextSibling : end;
-    if (cur === bi)
-      cur = next;
-    else {
-      if (b[i] === next)
-        cur = next;
-      insert(bi, cur, parent);
-    }
-  }
-  return b;
-};
-swap.insert = (a, b, parent) => parent.insertBefore(a, b);
-swap.remove = (a, parent) => parent.removeChild(a);
-var deflate_default = swap;
-
 // directive/each.js
 var _each = Symbol(":each");
 directive.each = (tpl, [itemVar, idxVar, evaluate], state) => {
@@ -336,12 +295,13 @@ directive.each = (tpl, [itemVar, idxVar, evaluate], state) => {
               return cur[idx];
             } },
             [idxVar]: { value: keys2 ? keys2[idx] : idx }
-          }), el = (tpl.content || tpl).cloneNode(true), els = tpl.content ? [...el.childNodes] : [el];
+          }), el = (tpl.content || tpl).cloneNode(true), frag = tpl.content ? { children: [...el.children], remove() {
+            this.children.map((el2) => el2.remove());
+          } } : el;
           holder.before(el);
-          sprae(els, scope);
+          sprae(frag, scope);
           ((cur[_signals] ||= [])[i] ||= {})[Symbol.dispose] = () => {
-            for (let el2 of els)
-              el2[Symbol.dispose](), el2.remove();
+            frag[Symbol.dispose](), frag.remove();
           };
         }
       }
@@ -543,16 +503,18 @@ directive.ref.parse = (expr) => expr;
 
 // directive/with.js
 directive.with = (el, evaluate, rootState) => {
-  let state, values;
+  let state;
   return effect(() => {
-    values = evaluate(rootState);
-    Object.assign(state ||= sprae(
-      el,
-      store(
-        values,
-        Object.create(rootState[_signals])
-      )
-    ), values);
+    let values = evaluate(rootState);
+    if (!state) {
+      state = store({});
+      Object.assign(state[_signals], rootState[_signals]);
+      for (let key in values)
+        state[_signals][key] = null, state[key] = values[key];
+      sprae(el, state);
+    } else {
+      Object.assign(state, values);
+    }
   });
 };
 
@@ -637,7 +599,6 @@ directive.fx = (el, evaluate, state) => {
 // sprae.js
 sprae.use(ulive_es_exports);
 sprae.use({ compile: (expr) => sprae.constructor(`__scope`, `with (__scope) { return ${expr} };`) });
-sprae.use({ swap: deflate_default });
 var sprae_default = sprae;
 export {
   sprae_default as default

package/dist/sprae.min.js

@@ -1 +1 @@
-var e,t,r,l,n,s=Object.defineProperty,a=Symbol("signals"),o=Symbol("length");function i(t,r){if(!t)return t;if(t[a]&&!r)return t;if(Array.isArray(t))return function(t){let r;if(t[a])return t;let l=e(t.length),n=Array(t.length).fill(null);const s=new Proxy(n,{get:(s,c)=>c===o?l:c===a?n:"length"===c?Array.prototype[r]?l.peek():l.value:(r=c,n[c]?n[c].valueOf():c<n.length?(n[c]=e(i(t[c]))).value:void 0),set(e,t,r){if("length"===t){for(let e=r,t=n.length;e<t;e++)delete s[e];return l.value=n.length=r,!0}return c(n,t,r),t>=l.peek()&&(l.value=n.length=Number(t)+1),!0},deleteProperty:(e,t)=>(u(n,t),!0)});return s}(t);if(t.constructor!==Object)return t;let l=e(Object.values(t).length);r||={};const s=new Proxy(r,{get:(e,t)=>t===o?l:t===a?r:r[t]?.valueOf(),set:(e,t,n,s)=>(s=r[t],c(r,t,n),s||++l.value),deleteProperty:(e,t)=>u(r,t)&&l.value--,ownKeys:()=>(l.value,Reflect.ownKeys(r))});if(t[a])for(let e in t)r[e]=t[a][e];else for(let e in t){const l=Object.getOwnPropertyDescriptor(t,e);l?.get?(r[e]=n(l.get.bind(s)))._set=l.set?.bind(s):(r[e]=null,c(r,e,t[e]))}return s}function c(t,n,s){let a=t[n];if(a)if(s===a.peek());else if(a._set)a._set(s);else if(Array.isArray(s)&&Array.isArray(a.peek())){const e=a.peek();e[o]?r((()=>{l((()=>{let t=0,r=s.length;for(;t<r;t++)e[t]=s[t];e.length=r}))})):a.value=s}else a.value=i(s);else t[n]=a=s?.peek?s:e(i(s))}function u(e,t){const r=e[t];if(r){const l=r[Symbol.dispose];return l&&delete r[Symbol.dispose],delete e[t],l?.(),!0}}var f=Symbol.dispose||=Symbol("dispose"),p={},d=new WeakMap;function y(e,t){let r;e?.[Symbol.iterator]||(e=[e]);for(let l of e)l?.children&&(d.has(l)?Object.assign(d.get(l),t):(r||=i(t||{}),v(l,r),d.has(l)||d.set(l,r)));return r}function v(e,t,r=e.parentNode,l=[]){if(e.attributes)for(let n=0;n<e.attributes.length;){let s=e.attributes[n];if(":"===s.name[0]){e.removeAttribute(s.name);let n=s.name.slice(1).split(":");for(let r of n){let n=p[r]||p.default,a=(n.parse||g)(s.value,g),o=n(e,a,t,r);o&&l.push(o)}if(d.has(e))return;if(e.parentNode!==r)return}else n++}for(let r of[...e.children])v(r,t,e);e.classList?.add("∴"),e[f]=()=>{for(;l.length;)l.pop()();e.classList.remove("∴"),d.delete(e);let t=e.getElementsByClassName("∴");for(;t.length;)t[0][f]?.()}}var h,m={},g=(e,t,r)=>{if(r=m[e=e.trim()])return r;try{r=h(e)}catch(r){throw Object.assign(r,{message:`∴ ${r.message}\n\n${t}${e?`="${e}"\n\n`:""}`,expr:e})}return m[e]=r};y.use=s=>{s.signal&&function(s){e=s.signal,t=s.effect,n=s.computed,l=s.batch||(e=>e()),r=s.untracked||l}(s),s.compile&&(h=s.compile)};var b,k,A={};((e,t)=>{for(var r in t)s(e,r,{get:t[r],enumerable:!0})})(A,{batch:()=>N,computed:()=>O,effect:()=>w,signal:()=>S,untracked:()=>x});var S=(e,t,r=new Set)=>((t={get value(){return b?.deps.push(r.add(b)),e},set value(t){if(t!==e){e=t;for(let e of r)k?k.add(e):e()}},peek:()=>e}).toJSON=t.then=t.toString=t.valueOf=()=>t.value,t),w=(e,t,r,l)=>(l=(r=l=>{t?.call?.(),l=b,b=r;try{t=e()}finally{b=l}}).deps=[],r(),e=>{for(t?.call?.();e=l.pop();)e.delete(r)}),O=(e,t=S(),r,l)=>((r={get value(){return l||=w((()=>t.value=e())),t.value},peek:t.peek}).toJSON=r.then=r.toString=r.valueOf=()=>r.value,r),N=e=>{let t=k;t||(k=new Set);try{e()}finally{if(!t){t=k,k=null;for(const e of t)e()}}},x=(e,t,r)=>(t=b,b=null,r=e(),b=t,r),j=(e,t,r,l=null,{remove:n,insert:s}=j)=>{let a,o,i,c=0,u=new Set(r);for(;i=t[c++];)u.has(i)?a=a||i:n(i,e);for(a=a||l,c=0;i=r[c++];)o=a?a.nextSibling:l,a===i?a=o:(r[c]===o&&(a=o),s(i,a,e));return r};j.insert=(e,t,r)=>r.insertBefore(e,t),j.remove=(e,t)=>t.removeChild(e);var C=j,E=Symbol(":each");p.each=(e,[l,s,i],c)=>{const u=e[E]=document.createTextNode("");e.replaceWith(u);let f,p,d=0;const v=n((()=>{p=null;let e=i(c);return"number"==typeof e&&(e=Array.from({length:e},((e,t)=>t+1))),e?.constructor===Object&&(p=Object.keys(e),e=Object.values(e)),e||[]})),h=()=>{r((()=>{let t=0,r=v.value,n=r.length;if(f&&!f[o]){for(let e of f[a]||[])e[Symbol.dispose]();f=null,d=0}if(n<d)f.length=n;else{if(f)for(;t<d;t++)f[t]=r[t];else f=r;for(;t<n;t++){f[t]=r[t];let n=t,o=Object.create(c,{[l]:{get:()=>f[n]},[s]:{value:p?p[n]:n}}),i=(e.content||e).cloneNode(!0),d=e.content?[...i.childNodes]:[i];u.before(i),y(d,o),((f[a]||=[])[t]||={})[Symbol.dispose]=()=>{for(let e of d)e[Symbol.dispose](),e.remove()}}}d=n}))};let m=0;return t((()=>{f||v.value[o]?.value,m?m++:(h(),queueMicrotask((()=>(m&&h(),m=0))))}))},p.each.parse=(e,t)=>{let[r,l]=e.split(/\s+in\s+/),[n,s="$"]=r.split(/\s*,\s*/);return[n,s,t(l)]};var $=Symbol("if");p.if=(e,r,l)=>{let n,s,a,o=e.parentNode,i=e.nextElementSibling,c=document.createTextNode(""),u=[];return e.after(c),e.content?(n=u,e.remove(),s=[...e.content.childNodes]):s=n=[e],i?.hasAttribute(":else")?(i.removeAttribute(":else"),i.hasAttribute(":if")?a=u:(i.remove(),a=i.content?[...i.content.childNodes]:[i])):a=u,t((()=>{const t=r(l)?s:e[$]?u:a;if(i&&(i[$]=t===s),n!=t){n[0]?.[E]&&(n=[n[0][E]]);for(let e of n)e.remove();n=t;for(let e of n)o.insertBefore(e,c),y(e,l)}}))},p.default=(e,r,l,n)=>{let s,a=n.startsWith("on")&&n.slice(2);return t(a?()=>(s?.(),s=P(e,a,r(l))):()=>{let t=r(l);if(n)L(e,n,B(t,l));else for(let r in t)L(e,K(r),B(t[r],l))})};var P=(e,t,r=(()=>{}))=>{const l={evt:"",target:e,test:()=>!0};l.evt=t.replace(/\.(\w+)?-?([-\w]+)?/g,((e,t,r="")=>(l.test=T[t]?.(l,...r.split("-"))||l.test,"")));const{evt:n,target:s,test:a,defer:o,stop:i,prevent:c,...u}=l;o&&(r=o(r));const f=e=>a(e)&&(i&&e.stopPropagation(),c&&e.preventDefault(),r.call(s,e));return s.addEventListener(n,f,u),()=>s.removeEventListener(n,f,u)},T={prevent(e){e.prevent=!0},stop(e){e.stop=!0},once(e){e.once=!0},passive(e){e.passive=!0},capture(e){e.capture=!0},window(e){e.target=window},document(e){e.target=document},throttle(e,t){e.defer=e=>_(e,t?Number(t)||0:108)},debounce(e,t){e.defer=e=>D(e,t?Number(t)||0:108)},outside:e=>t=>{let r=e.target;return!(r.contains(t.target)||!1===t.target.isConnected||r.offsetWidth<1&&r.offsetHeight<1)},self:e=>t=>t.target===e.target,ctrl:(e,...t)=>e=>W.ctrl(e)&&t.every((t=>W[t]?W[t](e):e.key===t)),shift:(e,...t)=>e=>W.shift(e)&&t.every((t=>W[t]?W[t](e):e.key===t)),alt:(e,...t)=>e=>W.alt(e)&&t.every((t=>W[t]?W[t](e):e.key===t)),meta:(e,...t)=>e=>W.meta(e)&&t.every((t=>W[t]?W[t](e):e.key===t)),arrow:()=>W.arrow,enter:()=>W.enter,escape:()=>W.escape,tab:()=>W.tab,space:()=>W.space,backspace:()=>W.backspace,delete:()=>W.delete,digit:()=>W.digit,letter:()=>W.letter,character:()=>W.character},W={ctrl:e=>e.ctrlKey||"Control"===e.key||"Ctrl"===e.key,shift:e=>e.shiftKey||"Shift"===e.key,alt:e=>e.altKey||"Alt"===e.key,meta:e=>e.metaKey||"Meta"===e.key||"Command"===e.key,arrow:e=>e.key.startsWith("Arrow"),enter:e=>"Enter"===e.key,escape:e=>e.key.startsWith("Esc"),tab:e=>"Tab"===e.key,space:e=>" "===e.key||"Space"===e.key||" "===e.key,backspace:e=>"Backspace"===e.key,delete:e=>"Delete"===e.key,digit:e=>/^\d$/.test(e.key),letter:e=>/^[a-zA-Z]$/.test(e.key),character:e=>/^\S$/.test(e.key)},L=(e,t,r)=>{null==r||!1===r?e.removeAttribute(t):e.setAttribute(t,!0===r?"":"number"==typeof r||"string"==typeof r?r:"")},_=(e,t)=>{let r,l,n=s=>{r=!0,setTimeout((()=>{if(r=!1,l)return l=!1,n(s),e(s)}),t)};return t=>r?l=!0:(n(t),e(t))},D=(e,t)=>{let r;return l=>{clearTimeout(r),r=setTimeout((()=>{r=null,e(l)}),t)}},K=e=>e.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(e=>"-"+e.toLowerCase())),B=(e,t)=>e?.replace?e.replace(/\$<([^>]+)>/g,((e,r)=>t[r]??"")):e;p.ref=(e,t,r)=>{Object.defineProperty(r,B(t,r),{value:e})},p.ref.parse=e=>e,p.with=(e,r,l)=>{let n,s;return t((()=>{s=r(l),Object.assign(n||=y(e,i(s,Object.create(l[a]))),s)}))},p.html=(e,t,r)=>{let l=t(r);if(!l)return;let n=(l.content||l).cloneNode(!0);e.replaceChildren(n),y(e,r)},p.text=(e,r,l)=>(e.content&&e.replaceWith(e=document.createTextNode("")),t((()=>{let t=r(l);e.textContent=null==t?"":t}))),p.class=(e,r,l)=>{let n=new Set;return t((()=>{let t=r(l),s=new Set;t&&("string"==typeof t?B(t,l).split(" ").map((e=>s.add(e))):Array.isArray(t)?t.map((e=>(e=B(e,l))&&s.add(e))):Object.entries(t).map((([e,t])=>t&&s.add(e))));for(let t of n)s.has(t)?s.delete(t):e.classList.remove(t);for(let t of n=s)e.classList.add(t)}))},p.style=(e,r,l)=>{let n=e.getAttribute("style")||"";return n.endsWith(";")||(n+="; "),t((()=>{let t=r(l);if("string"==typeof t)e.setAttribute("style",n+B(t,l));else{e.setAttribute("style",n);for(let r in t)e.style.setProperty(r,B(t[r],l))}}))},p.value=(e,r,l)=>{let n,s,a="text"===e.type||""===e.type?t=>e.setAttribute("value",e.value=null==t?"":t):"TEXTAREA"===e.tagName||"text"===e.type||""===e.type?t=>(n=e.selectionStart,s=e.selectionEnd,e.setAttribute("value",e.value=null==t?"":t),n&&e.setSelectionRange(n,s)):"checkbox"===e.type?t=>(e.checked=t,L(e,"checked",t)):"select-one"===e.type?t=>{for(let t in e.options)t.removeAttribute("selected");e.value=t,e.selectedOptions[0]?.setAttribute("selected","")}:t=>e.value=t;return t((()=>a(r(l))))},p.fx=(e,r,l)=>t((()=>r(l))),y.use(A),y.use({compile:e=>y.constructor("__scope",`with (__scope) { return ${e} };`)}),y.use({swap:C});var M=y;export{M as default};
+var e,t,r,l,n,s=Object.defineProperty,a=Symbol("signals"),o=Symbol("length");function i(t){if(!t)return t;if(t[a])return t;if(Array.isArray(t))return function(t){let r;if(t[a])return t;let l=e(t.length),n=Array(t.length).fill(null);const s=new Proxy(n,{get:(s,c)=>"symbol"==typeof c?c===o?l:c===a?n:n[c]:"length"===c?Array.prototype[r]?l.peek():l.value:(r=c,n[c]?n[c].valueOf():c<n.length?(n[c]=e(i(t[c]))).value:void 0),set(e,t,r){if("length"===t){for(let e=r,t=n.length;e<t;e++)delete s[e];return l.value=n.length=r,!0}return c(n,t,r),t>=l.peek()&&(l.value=n.length=Number(t)+1),!0},deleteProperty:(e,t)=>(u(n,t),!0)});return s}(t);if(t.constructor!==Object)return t;let r={},l=e(Object.values(t).length);const s=new Proxy(r,{get:(e,t)=>t===o?l:t===a?r:r[t]?.valueOf(),set:(e,t,n,s)=>(s=r[t],c(r,t,n),s||++l.value),deleteProperty:(e,t)=>u(r,t)&&l.value--,ownKeys:()=>(l.value,Reflect.ownKeys(r))});for(let e in t){const l=Object.getOwnPropertyDescriptor(t,e);l?.get?(r[e]=n(l.get.bind(s)))._set=l.set?.bind(s):(r[e]=null,c(r,e,t[e]))}return s}function c(t,n,s){let a=t[n];if(a)if(s===a.peek());else if(a._set)a._set(s);else if(Array.isArray(s)&&Array.isArray(a.peek())){const e=a.peek();e[o]?r((()=>{l((()=>{let t=0,r=s.length;for(;t<r;t++)e[t]=s[t];e.length=r}))})):a.value=s}else a.value=i(s);else t[n]=a=s?.peek?s:e(i(s))}function u(e,t){const r=e[t];if(r){const l=r[Symbol.dispose];return l&&delete r[Symbol.dispose],delete e[t],l?.(),!0}}var f=Symbol.dispose||=Symbol("dispose"),p={},d=new WeakMap;function y(e,t){if(!e?.children)return;if(d.has(e))return Object.assign(d.get(e),t);const r=i(t||{}),l=[];return function e(t,n=t.parentNode){if(t.attributes)for(let e=0;e<t.attributes.length;){let s=t.attributes[e];if(":"===s.name[0]){t.removeAttribute(s.name);let e=s.name.slice(1).split(":");for(let n of e){let e=p[n]||p.default,a=e(t,(e.parse||b)(s.value,b),r,n);a&&l.push(a)}if(d.has(t))return l.push(t[f]);if(t.parentNode!==n)return}else e++}for(let r of[...t.children])e(r,t)}(e),d.has(e)||d.set(e,r),e[f]=()=>{for(;l.length;)l.pop()();d.delete(e)},r}var v,h={},b=(e,t,r)=>{if(r=h[e=e.trim()])return r;try{r=v(e)}catch(r){throw Object.assign(r,{message:`∴ ${r.message}\n\n${t}${e?`="${e}"\n\n`:""}`,expr:e})}return h[e]=r};y.use=s=>{s.signal&&function(s){e=s.signal,t=s.effect,n=s.computed,l=s.batch||(e=>e()),r=s.untracked||l}(s),s.compile&&(v=s.compile)};var g,m,k={};((e,t)=>{for(var r in t)s(e,r,{get:t[r],enumerable:!0})})(k,{batch:()=>O,computed:()=>w,effect:()=>S,signal:()=>A,untracked:()=>N});var A=(e,t,r=new Set)=>((t={get value(){return g?.deps.push(r.add(g)),e},set value(t){if(t!==e){e=t;for(let e of r)m?m.add(e):e()}},peek:()=>e}).toJSON=t.then=t.toString=t.valueOf=()=>t.value,t),S=(e,t,r,l)=>(l=(r=l=>{t?.call?.(),l=g,g=r;try{t=e()}finally{g=l}}).deps=[],r(),e=>{for(t?.call?.();e=l.pop();)e.delete(r)}),w=(e,t=A(),r,l)=>((r={get value(){return l||=S((()=>t.value=e())),t.value},peek:t.peek}).toJSON=r.then=r.toString=r.valueOf=()=>r.value,r),O=e=>{let t=m;t||(m=new Set);try{e()}finally{if(!t){t=m,m=null;for(const e of t)e()}}},N=(e,t,r)=>(t=g,g=null,r=e(),g=t,r),j=Symbol(":each");p.each=(e,[l,s,i],c)=>{const u=e[j]=document.createTextNode("");e.replaceWith(u);let f,p,d=0;const v=n((()=>{p=null;let e=i(c);return"number"==typeof e&&(e=Array.from({length:e},((e,t)=>t+1))),e?.constructor===Object&&(p=Object.keys(e),e=Object.values(e)),e||[]})),h=()=>{r((()=>{let t=0,r=v.value,n=r.length;if(f&&!f[o]){for(let e of f[a]||[])e[Symbol.dispose]();f=null,d=0}if(n<d)f.length=n;else{if(f)for(;t<d;t++)f[t]=r[t];else f=r;for(;t<n;t++){f[t]=r[t];let n=t,o=Object.create(c,{[l]:{get:()=>f[n]},[s]:{value:p?p[n]:n}}),i=(e.content||e).cloneNode(!0),d=e.content?{children:[...i.children],remove(){this.children.map((e=>e.remove()))}}:i;u.before(i),y(d,o),((f[a]||=[])[t]||={})[Symbol.dispose]=()=>{d[Symbol.dispose](),d.remove()}}}d=n}))};let b=0;return t((()=>{f||v.value[o]?.value,b?b++:(h(),queueMicrotask((()=>(b&&h(),b=0))))}))},p.each.parse=(e,t)=>{let[r,l]=e.split(/\s+in\s+/),[n,s="$"]=r.split(/\s*,\s*/);return[n,s,t(l)]};var x=Symbol("if");p.if=(e,r,l)=>{let n,s,a,o=e.parentNode,i=e.nextElementSibling,c=document.createTextNode(""),u=[];return e.after(c),e.content?(n=u,e.remove(),s=[...e.content.childNodes]):s=n=[e],i?.hasAttribute(":else")?(i.removeAttribute(":else"),i.hasAttribute(":if")?a=u:(i.remove(),a=i.content?[...i.content.childNodes]:[i])):a=u,t((()=>{const t=r(l)?s:e[x]?u:a;if(i&&(i[x]=t===s),n!=t){n[0]?.[j]&&(n=[n[0][j]]);for(let e of n)e.remove();n=t;for(let e of n)o.insertBefore(e,c),y(e,l)}}))},p.default=(e,r,l,n)=>{let s,a=n.startsWith("on")&&n.slice(2);return t(a?()=>(s?.(),s=$(e,a,r(l))):()=>{let t=r(l);if(n)T(e,n,D(t,l));else for(let r in t)T(e,_(r),D(t[r],l))})};var $=(e,t,r=(()=>{}))=>{const l={evt:"",target:e,test:()=>!0};l.evt=t.replace(/\.(\w+)?-?([-\w]+)?/g,((e,t,r="")=>(l.test=E[t]?.(l,...r.split("-"))||l.test,"")));const{evt:n,target:s,test:a,defer:o,stop:i,prevent:c,...u}=l;o&&(r=o(r));const f=e=>a(e)&&(i&&e.stopPropagation(),c&&e.preventDefault(),r.call(s,e));return s.addEventListener(n,f,u),()=>s.removeEventListener(n,f,u)},E={prevent(e){e.prevent=!0},stop(e){e.stop=!0},once(e){e.once=!0},passive(e){e.passive=!0},capture(e){e.capture=!0},window(e){e.target=window},document(e){e.target=document},throttle(e,t){e.defer=e=>C(e,t?Number(t)||0:108)},debounce(e,t){e.defer=e=>W(e,t?Number(t)||0:108)},outside:e=>t=>{let r=e.target;return!(r.contains(t.target)||!1===t.target.isConnected||r.offsetWidth<1&&r.offsetHeight<1)},self:e=>t=>t.target===e.target,ctrl:(e,...t)=>e=>P.ctrl(e)&&t.every((t=>P[t]?P[t](e):e.key===t)),shift:(e,...t)=>e=>P.shift(e)&&t.every((t=>P[t]?P[t](e):e.key===t)),alt:(e,...t)=>e=>P.alt(e)&&t.every((t=>P[t]?P[t](e):e.key===t)),meta:(e,...t)=>e=>P.meta(e)&&t.every((t=>P[t]?P[t](e):e.key===t)),arrow:()=>P.arrow,enter:()=>P.enter,escape:()=>P.escape,tab:()=>P.tab,space:()=>P.space,backspace:()=>P.backspace,delete:()=>P.delete,digit:()=>P.digit,letter:()=>P.letter,character:()=>P.character},P={ctrl:e=>e.ctrlKey||"Control"===e.key||"Ctrl"===e.key,shift:e=>e.shiftKey||"Shift"===e.key,alt:e=>e.altKey||"Alt"===e.key,meta:e=>e.metaKey||"Meta"===e.key||"Command"===e.key,arrow:e=>e.key.startsWith("Arrow"),enter:e=>"Enter"===e.key,escape:e=>e.key.startsWith("Esc"),tab:e=>"Tab"===e.key,space:e=>" "===e.key||"Space"===e.key||" "===e.key,backspace:e=>"Backspace"===e.key,delete:e=>"Delete"===e.key,digit:e=>/^\d$/.test(e.key),letter:e=>/^[a-zA-Z]$/.test(e.key),character:e=>/^\S$/.test(e.key)},T=(e,t,r)=>{null==r||!1===r?e.removeAttribute(t):e.setAttribute(t,!0===r?"":"number"==typeof r||"string"==typeof r?r:"")},C=(e,t)=>{let r,l,n=s=>{r=!0,setTimeout((()=>{if(r=!1,l)return l=!1,n(s),e(s)}),t)};return t=>r?l=!0:(n(t),e(t))},W=(e,t)=>{let r;return l=>{clearTimeout(r),r=setTimeout((()=>{r=null,e(l)}),t)}},_=e=>e.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(e=>"-"+e.toLowerCase())),D=(e,t)=>e?.replace?e.replace(/\$<([^>]+)>/g,((e,r)=>t[r]??"")):e;p.ref=(e,t,r)=>{Object.defineProperty(r,D(t,r),{value:e})},p.ref.parse=e=>e,p.with=(e,r,l)=>{let n;return t((()=>{let t=r(l);if(n)Object.assign(n,t);else{n=i({}),Object.assign(n[a],l[a]);for(let e in t)n[a][e]=null,n[e]=t[e];y(e,n)}}))},p.html=(e,t,r)=>{let l=t(r);if(!l)return;let n=(l.content||l).cloneNode(!0);e.replaceChildren(n),y(e,r)},p.text=(e,r,l)=>(e.content&&e.replaceWith(e=document.createTextNode("")),t((()=>{let t=r(l);e.textContent=null==t?"":t}))),p.class=(e,r,l)=>{let n=new Set;return t((()=>{let t=r(l),s=new Set;t&&("string"==typeof t?D(t,l).split(" ").map((e=>s.add(e))):Array.isArray(t)?t.map((e=>(e=D(e,l))&&s.add(e))):Object.entries(t).map((([e,t])=>t&&s.add(e))));for(let t of n)s.has(t)?s.delete(t):e.classList.remove(t);for(let t of n=s)e.classList.add(t)}))},p.style=(e,r,l)=>{let n=e.getAttribute("style")||"";return n.endsWith(";")||(n+="; "),t((()=>{let t=r(l);if("string"==typeof t)e.setAttribute("style",n+D(t,l));else{e.setAttribute("style",n);for(let r in t)e.style.setProperty(r,D(t[r],l))}}))},p.value=(e,r,l)=>{let n,s,a="text"===e.type||""===e.type?t=>e.setAttribute("value",e.value=null==t?"":t):"TEXTAREA"===e.tagName||"text"===e.type||""===e.type?t=>(n=e.selectionStart,s=e.selectionEnd,e.setAttribute("value",e.value=null==t?"":t),n&&e.setSelectionRange(n,s)):"checkbox"===e.type?t=>(e.checked=t,T(e,"checked",t)):"select-one"===e.type?t=>{for(let t in e.options)t.removeAttribute("selected");e.value=t,e.selectedOptions[0]?.setAttribute("selected","")}:t=>e.value=t;return t((()=>a(r(l))))},p.fx=(e,r,l)=>t((()=>r(l))),y.use(k),y.use({compile:e=>y.constructor("__scope",`with (__scope) { return ${e} };`)});var K=y;export{K as default};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprae",
   "description": "DOM microhydration.",
-  "version": "10.0.1",
+  "version": "10.1.1",
   "main": "./sprae.js",
   "module": "./sprae.js",
   "type": "module",

package/readme.md

@@ -144,7 +144,7 @@ Set any attribute(s).
 Define values for a subtree.
 
 ```html
-<x :with="{ foo: signal('bar') }">
+<x :with="{ foo: 'bar' }">
   <y :with="{ baz: 'qux' }" :text="foo + baz"></y>
 </x>
 ```
@@ -335,7 +335,7 @@ import { effect } from 'sprae/signal'
 import * as signals from '@preact/signals'
 import compile from 'subscript'
 
-// include directives
+// standard directives
 import 'sprae/directive/if.js'
 import 'sprae/directive/text.js'
 
@@ -358,9 +358,10 @@ To destroy state and detach sprae handlers, call `element[Symbol.dispose]()`. --
 
 ## Justification
 
-[Template-parts](https://github.com/dy/template-parts) is stuck with native HTML quirks ([parsing table](https://github.com/github/template-parts/issues/24), [SVG attributes](https://github.com/github/template-parts/issues/25), [liquid syntax](https://shopify.github.io/liquid/tags/template/#raw) conflict etc). [Alpine](https://github.com/alpinejs/alpine) / [petite-vue](https://github.com/vuejs/petite-vue) / [lucia](https://github.com/aidenyabi/lucia) escape native HTML quirks, but have excessive API (`:`, `x-`, `{}`, `@`, `$`) and tend to [self-encapsulate](https://github.com/alpinejs/alpine/discussions/3223).
+[Template-parts](https://github.com/dy/template-parts) is stuck with native HTML quirks ([parsing table](https://github.com/github/template-parts/issues/24), [SVG attributes](https://github.com/github/template-parts/issues/25), [liquid syntax](https://shopify.github.io/liquid/tags/template/#raw) conflict etc).<br/>
+[Alpine](https://github.com/alpinejs/alpine) / [petite-vue](https://github.com/vuejs/petite-vue) / [lucia](https://github.com/aidenyabi/lucia) escape native HTML quirks, but have excessive API (`:`, `x-`, `{}`, `@`, `$`) and tend to [self-encapsulate](https://github.com/alpinejs/alpine/discussions/3223).
 
-_Sprae_ holds open & minimalistic philosophy, combining _`:`-directives_ with emerging _signals_.
+_Sprae_ holds open & minimalistic philosophy, combining _`:`-directives_ with _signals_.
 
 <!--
 |                       | [AlpineJS](https://github.com/alpinejs/alpine)          | [Petite-Vue](https://github.com/vuejs/petite-vue)        | Sprae            |
@@ -406,14 +407,14 @@ npm ci
 npm run build-prod
 
 # bench
-cd ../../../webdriver-ts
+[cd ../../../webdriver-ts
 npm ci
-npm run compile
+npm run compile]
 npm run bench keyed/sprae
 
 # show results
-cd ../webdriver-ts-results
-npm ci
+[cd ../webdriver-ts-results
+npm ci]
 cd ../webdriver-ts
 npm run results
 ```

package/sprae.js

@@ -1,7 +1,6 @@
 import sprae from './core.js'
 
 import * as signals from 'ulive'
-import swap from 'swapdom/deflate'
 
 // default directives
 import './directive/if.js'
@@ -22,7 +21,4 @@ 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

package/store.js

@@ -4,11 +4,11 @@ import { signal, computed, effect, batch, untracked } from './signal.js'
 export const _signals = Symbol('signals'), _change = Symbol('length');
 
 // object store is not lazy
-export default function store(values, signals) {
+export default function store(values) {
   if (!values) return values
 
   // ignore existing state as argument
-  if (values[_signals] && !signals) return values;
+  if (values[_signals]) return values;
 
   // redirect for optimized array store
   if (Array.isArray(values)) return list(values)
@@ -17,9 +17,8 @@ export default function store(values, signals) {
   if (values.constructor !== Object) return values;
 
   // NOTE: if you decide to unlazy values, think about large arrays - init upfront can be costly
-  let _len = signal(Object.values(values).length)
+  let signals = {}, _len = signal(Object.values(values).length)
 
-  signals ||= {}
   // proxy conducts prop access to signals
   const state = new Proxy(signals, {
     get: (_, key) => key === _change ? _len : key === _signals ? signals : signals[key]?.valueOf(),
@@ -32,9 +31,8 @@ export default function store(values, signals) {
     },
   })
 
-  // take over existing store signals instead of creating new ones
-  if (values[_signals]) for (let key in values) signals[key] = values[_signals][key];
-  else for (let key in values) {
+  // init signals for values
+  for (let key in values) {
     const desc = Object.getOwnPropertyDescriptor(values, key)
 
     // getter turns into computed
@@ -69,8 +67,8 @@ export function list(values) {
   // proxy conducts prop access to signals
   const state = new Proxy(signals, {
     get(_, key) {
-      if (key === _change) return _len
-      if (key === _signals) return signals
+      // covers Symbol.isConcatSpreadable etc.
+      if (typeof key === 'symbol') return key === _change ? _len : key === _signals ? signals : signals[key]
 
       // console.log('get', key)
       // if .length is read within .push/etc - peek signal to avoid recursive subscription