sprae 10.12.2 → 10.13.0

package/core.js

@@ -1,9 +1,10 @@
-import { use } from "./signal.js";
+import { use, effect } from "./signal.js";
 import store, { _signals } from './store.js';
 
 // polyfill
 const _dispose = (Symbol.dispose ||= Symbol("dispose"));
 
+
 // reserved directives - order matters!
 export const directive = {};
 
@@ -51,12 +52,12 @@ export default function sprae(el, values) {
         // 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)
-          let dispose = dir(el, evaluate, state, name);
-          if (dispose) disposes.push(dispose);
+          let fn = dir(el, evaluate, state, name);
+          if (fn) disposes.push(effect(fn))
+          disposes.push(() => el.setAttributeNode(attr)) // recover attribute
         }
 
         // stop if element was spraed by internal directive
@@ -72,7 +73,7 @@ export default function sprae(el, values) {
 }
 
 
-// compiler
+// parse expression into evaluator fn
 const evalMemo = {};
 export const parse = (expr, dir, fn) => {
   if (fn = evalMemo[expr = expr.trim()]) return fn
@@ -120,6 +121,7 @@ export const frag = (tpl) => {
       content.append(...childNodes)
     },
     attributes,
-    removeAttribute(name) { attributes.splice(attributes.findIndex(a => a.name === name), 1) }
+    removeAttribute(name) { attributes.splice(attributes.findIndex(a => a.name === name), 1) },
+    setAttributeNode() { }
   }
 }

package/directive/aria.js

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

package/directive/class.js

@@ -1,9 +1,8 @@
 import { directive } from "../core.js";
-import { effect } from "../signal.js";
 
 directive.class = (el, evaluate, state) => {
   let cur = new Set
-  return effect(() => {
+  return () => {
     let v = evaluate(state);
     let clsx = new Set;
     if (v) {
@@ -13,5 +12,5 @@ directive.class = (el, evaluate, state) => {
     }
     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)
-  });
+  };
 };

package/directive/data.js

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

package/directive/default.js

@@ -1,14 +1,13 @@
 import { directive, err } from "../core.js";
-import { effect } from "../signal.js";
 
 // set generic property directive
 directive.default = (target, evaluate, state, name) => {
   // simple prop
-  if (!name.startsWith('on')) return effect(() => {
+  if (!name.startsWith('on')) return () => {
     let value = evaluate(state);
     if (name) attr(target, name, value)
     else for (let key in value) attr(target, dashcase(key), value[key]);
-  });
+  };
 
   // bind event to a target
   // NOTE: if you decide to remove chain of events, thing again - that's unique feature of sprae, don't diminish your own value.
@@ -22,7 +21,7 @@ directive.default = (target, evaluate, state, name) => {
   });
 
   // single event
-  if (ctxs.length == 1) return effect(() => addListener(evaluate(state), ctxs[0]))
+  if (ctxs.length == 1) return () => addListener(evaluate(state), ctxs[0])
 
   // events cycler
   let startFn, nextFn, off, idx = 0
@@ -32,11 +31,11 @@ directive.default = (target, evaluate, state, name) => {
     ), ctxs[idx]);
   }
 
-  return effect(() => (
+  return () => (
     startFn = evaluate(state),
     !off && nextListener(startFn),
     () => startFn = null // nil startFn to autodispose chain
-  ))
+  )
 
   // add listener with the context
   function addListener(fn, { evt, target, test, defer, stop, prevent, immediate, ...opts }) {
@@ -69,6 +68,7 @@ const mods = {
   // target
   window(ctx) { ctx.target = window; },
   document(ctx) { ctx.target = document; },
+  parent(ctx) { ctx.target = ctx.target.parentNode; },
 
   throttle(ctx, limit) { ctx.defer = (fn) => throttle(fn, limit ? Number(limit) || 0 : 108); },
   debounce(ctx, wait) { ctx.defer = (fn) => debounce(fn, wait ? Number(wait) || 0 : 108); },
@@ -153,5 +153,5 @@ const debounce = (fn, wait) => {
 };
 
 export const dashcase = (str) => {
-  return str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match, i) => (i?'-':'') + match.toLowerCase());
+  return str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match, i) => (i ? '-' : '') + match.toLowerCase());
 }

package/directive/each.js

@@ -1,6 +1,6 @@
 import sprae, { directive, frag, parse } from "../core.js";
 import store, { _change, _signals } from "../store.js";
-import { effect, untracked, computed } from '../signal.js';
+import { untracked, computed } from '../signal.js';
 
 
 directive.each = (tpl, [itemVar, idxVar, evaluate], state) => {
@@ -73,7 +73,7 @@ directive.each = (tpl, [itemVar, idxVar, evaluate], state) => {
   }
 
   let planned = 0
-  return effect(() => {
+  return () => {
     // subscribe to items change (.length) - we do it every time (not just on init) since preact unsubscribes unused signals
     items.value[_change]?.value
 
@@ -82,7 +82,7 @@ directive.each = (tpl, [itemVar, idxVar, evaluate], state) => {
       update()
       queueMicrotask(() => (planned && update(), planned = 0))
     } else planned++
-  })
+  }
 }
 
 

package/directive/fx.js

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

package/directive/if.js

@@ -1,5 +1,4 @@
 import sprae, { directive, memo, frag } from "../core.js";
-import { effect } from "../signal.js";
 
 // :if is interchangeable with :each depending on order, :if :each or :each :if have different meanings
 // as for :if :with - :if must init first, since it is lazy, to avoid initializing component ahead of time by :with
@@ -21,17 +20,17 @@ directive.if = (el, evaluate, state) => {
     if (!next.hasAttribute(":if")) next.remove(), elseEl = next.content ? frag(next) : next, memo.set(elseEl, null)
   }
 
-  return effect(() => {
+  return () => {
     const newEl = evaluate(state) ? ifEl : el[_prevIf] ? null : elseEl;
     if (next) next[_prevIf] = newEl === ifEl
     if (curEl != newEl) {
-      // disable effects on removed elements to avoid internal effects from triggering on possibly null values
-      if (curEl) curEl.remove(), curEl[Symbol.dispose]?.()
+      // disable effects on child elements to avoid internal effects from triggering on value changes when element's not matched
+      if (curEl) curEl.remove(), curEl[Symbol.dispose]?.();
       if (curEl = newEl) {
         holder.before(curEl.content || curEl)
         memo.get(curEl) === null && memo.delete(curEl) // remove fake memo to sprae as new
         sprae(curEl, state)
       }
     }
-  });
+  };
 };

package/directive/style.js

@@ -1,15 +1,14 @@
 import { directive } from "../core.js";
-import { effect } from "../signal.js";
 
 directive.style = (el, evaluate, state) => {
   let initStyle = el.getAttribute("style");
 
-  return effect(() => {
+  return () => {
     let v = evaluate(state);
     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]
     }
-  });
+  };
 };

package/directive/text.js

@@ -1,13 +1,12 @@
 import { directive, frag } from "../core.js";
-import { effect } from "../signal.js";
 
 // set text content
 directive.text = (el, evaluate, state) => {
   // <template :text="a"/> or previously initialized template
   if (el.content) el.replaceWith(el = frag(el).childNodes[0])
 
-  return effect(() => {
+  return () => {
     let value = evaluate(state);
     el.textContent = value == null ? "" : value;
-  });
+  };
 };

package/directive/value.js

@@ -1,7 +1,6 @@
 import sprae from "../core.js";
 import { directive, parse } from "../core.js";
 import { attr } from './default.js';
-import { effect } from "../signal.js";
 
 // connect expr to element value
 directive.value = (el, [getValue, setValue], state) => {
@@ -38,7 +37,7 @@ directive.value = (el, [getValue, setValue], state) => {
 
   el.oninput = el.onchange = handleChange; // hope user doesn't redefine these manually - it saves 5 loc
 
-  return effect(() => update(getValue(state)));
+  return () => update(getValue(state));
 };
 
 directive.value.parse = expr => {

package/directive/with.js

@@ -1,11 +1,10 @@
 import sprae, { directive } from "../core.js";
 import store, { _signals } from '../store.js';
-import { effect } from "../signal.js";
 
 directive.with = (el, evaluate, rootState) => {
   let state
-  return effect(() => {
+  return () => {
     let values = evaluate(rootState);
     sprae(el, state ? values : state = store(values, rootState))
-  })
+  }
 };

package/dist/sprae.js

@@ -171,8 +171,9 @@ function sprae(el, values) {
         for (let name of names) {
           let dir = directive[name] || directive.default;
           let evaluate = (dir.parse || parse)(attr2.value);
-          let dispose = dir(el2, evaluate, state, name);
-          if (dispose) disposes.push(dispose);
+          let fn = dir(el2, evaluate, state, name);
+          if (fn) disposes.push(effect(fn));
+          disposes.push(() => el2.setAttributeNode(attr2));
         }
         if (memo.has(el2)) return el2[_dispose] && disposes.push(el2[_dispose]);
         if (el2.parentNode !== parent) return;
@@ -219,6 +220,8 @@ var frag = (tpl) => {
     attributes,
     removeAttribute(name) {
       attributes.splice(attributes.findIndex((a) => a.name === name), 1);
+    },
+    setAttributeNode() {
     }
   };
 };
@@ -234,7 +237,7 @@ directive.if = (el, evaluate, state) => {
     next.removeAttribute(":else");
     if (!next.hasAttribute(":if")) next.remove(), elseEl = next.content ? frag(next) : next, memo.set(elseEl, null);
   }
-  return effect(() => {
+  return () => {
     const newEl = evaluate(state) ? ifEl : el[_prevIf] ? null : elseEl;
     if (next) next[_prevIf] = newEl === ifEl;
     if (curEl != newEl) {
@@ -245,7 +248,7 @@ directive.if = (el, evaluate, state) => {
         sprae(curEl, state);
       }
     }
-  });
+  };
 };
 
 // directive/each.js
@@ -297,13 +300,13 @@ directive.each = (tpl, [itemVar, idxVar, evaluate], state) => {
     });
   };
   let planned = 0;
-  return effect(() => {
+  return () => {
     items.value[_change]?.value;
     if (!planned) {
       update();
       queueMicrotask(() => (planned && update(), planned = 0));
     } else planned++;
-  });
+  };
 };
 directive.each.parse = (expr) => {
   let [leftSide, itemsExpr] = expr.split(/\s+in\s+/);
@@ -320,10 +323,10 @@ directive.ref.parse = (expr) => expr;
 // directive/with.js
 directive.with = (el, evaluate, rootState) => {
   let state;
-  return effect(() => {
+  return () => {
     let values = evaluate(rootState);
     sprae(el, state ? values : state = store(values, rootState));
-  });
+  };
 };
 
 // directive/html.js
@@ -338,16 +341,16 @@ directive.html = (el, evaluate, state) => {
 // directive/text.js
 directive.text = (el, evaluate, state) => {
   if (el.content) el.replaceWith(el = frag(el).childNodes[0]);
-  return effect(() => {
+  return () => {
     let value = evaluate(state);
     el.textContent = value == null ? "" : value;
-  });
+  };
 };
 
 // directive/class.js
 directive.class = (el, evaluate, state) => {
   let cur = /* @__PURE__ */ new Set();
-  return effect(() => {
+  return () => {
     let v = evaluate(state);
     let clsx = /* @__PURE__ */ new Set();
     if (v) {
@@ -358,29 +361,29 @@ directive.class = (el, evaluate, state) => {
     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
 directive.style = (el, evaluate, state) => {
   let initStyle = el.getAttribute("style");
-  return effect(() => {
+  return () => {
     let v = evaluate(state);
     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
 directive.default = (target, evaluate, state, name) => {
-  if (!name.startsWith("on")) return effect(() => {
+  if (!name.startsWith("on")) return () => {
     let value = evaluate(state);
     if (name) attr(target, name, value);
     else for (let key in value) attr(target, dashcase(key), value[key]);
-  });
+  };
   const ctxs = name.split("..").map((e) => {
     let ctx = { evt: "", target, test: () => true };
     ctx.evt = (e.startsWith("on") ? e.slice(2) : e).replace(
@@ -389,12 +392,12 @@ directive.default = (target, evaluate, state, name) => {
     );
     return ctx;
   });
-  if (ctxs.length == 1) return effect(() => addListener(evaluate(state), ctxs[0]));
+  if (ctxs.length == 1) return () => addListener(evaluate(state), ctxs[0]);
   let startFn, nextFn, off, idx = 0;
   const nextListener = (fn) => {
     off = addListener((e) => (off(), nextFn = fn?.(e), (idx = ++idx % ctxs.length) ? nextListener(nextFn) : startFn && nextListener(startFn)), ctxs[idx]);
   };
-  return effect(() => (startFn = evaluate(state), !off && nextListener(startFn), () => startFn = null));
+  return () => (startFn = evaluate(state), !off && nextListener(startFn), () => startFn = null);
   function addListener(fn, { evt, target: target2, test, defer, stop, prevent, immediate, ...opts }) {
     if (defer) fn = defer(fn);
     const cb = (e) => {
@@ -437,6 +440,9 @@ var mods = {
   document(ctx) {
     ctx.target = document;
   },
+  parent(ctx) {
+    ctx.target = ctx.target.parentNode;
+  },
   throttle(ctx, limit) {
     ctx.defer = (fn) => throttle(fn, limit ? Number(limit) || 0 : 108);
   },
@@ -531,7 +537,7 @@ directive.value = (el, [getValue, setValue], state) => {
   if (el.type?.startsWith("select")) sprae(el, state);
   const handleChange = el.type === "checkbox" ? (e) => setValue(state, el.checked) : el.type === "select-multiple" ? (e) => setValue(state, [...el.selectedOptions].map((o) => o.value)) : (e) => setValue(state, el.value);
   el.oninput = el.onchange = handleChange;
-  return effect(() => update(getValue(state)));
+  return () => update(getValue(state));
 };
 directive.value.parse = (expr) => {
   let evaluate = [parse(expr)];
@@ -550,7 +556,7 @@ directive.value.parse = (expr) => {
 
 // directive/fx.js
 directive.fx = (el, evaluate, state) => {
-  return effect(() => evaluate(state));
+  return () => evaluate(state);
 };
 
 // sprae.js