sprae 7.0.0 → 8.0.1

package/src/core.js

@@ -1,16 +1,20 @@
-import createState, { fx, sandbox, batch } from './state.signals-proxy.js';
-import defaultDirective, { primary, secondary, on } from './directives.js';
+import createState, { batch, sandbox, _dispose } from './state.signals-proxy.js';
+import defaultDirective, { primary, secondary } from './directives.js';
 
+
+// default root sandbox
 sprae.globals = sandbox
 
 // sprae element: apply directives
 const memo = new WeakMap
 export default function sprae(container, values) {
-  if (!container.children) return
+  if (!container.children) return // ignore what?
+
   if (memo.has(container)) return batch(() => Object.assign(memo.get(container), values))
 
+  // take over existing state instead of creating clone
   const state = createState(values || {});
-  const updates = []
+  const disposes = []
 
   // init directives on element
   const init = (el, parent = el.parentNode) => {
@@ -21,9 +25,9 @@ export default function sprae(container, values) {
         let expr = el.getAttribute(attrName)
         el.removeAttribute(attrName)
 
-        updates.push(primary[name](el, expr, state, name))
+        disposes.push(primary[name](el, expr, state, name))
 
-        // stop if element was spraed by directive or skipped (detached)
+        // stop if element was spraed by directive or skipped (detached) like in case of :if or :each
         if (memo.has(el)) return
         if (el.parentNode !== parent) return false
       }
@@ -44,7 +48,7 @@ export default function sprae(container, values) {
             // @click forwards to :onclick=event=>{...inline}
             if (prefix === '@') name = `on` + name
             let dir = secondary[name] || defaultDirective;
-            updates.push(dir(el, expr, state, name));
+            disposes.push(dir(el, expr, state, name));
             // NOTE: secondary directives don't stop flow nor extend state, so no need to check
           }
         }
@@ -60,17 +64,19 @@ export default function sprae(container, values) {
 
   init(container);
 
-  // call updates: subscribes directives to state;
-  // state is created after inits because directives can extend init values (expose refs etc)
-  for (let update of updates) if (update) {
-    let teardown
-    fx(() => {
-      if (typeof teardown === 'function') teardown()
-      teardown = update(state)
-    });
-  }
+  // if element was spraed by :with or :each instruction - skip
+  if (memo.has(container)) return state //memo.get(container)
 
+  // save
   memo.set(container, state);
 
+  // expose dispose
+  if (disposes.length) Object.defineProperty(container, _dispose, {
+    value: () => {
+      while (disposes.length) disposes.shift()?.();
+      memo.delete(container);
+    }
+  });
+
   return state;
 }

package/src/directives.js

@@ -1,9 +1,7 @@
 // directives & parsing
 import sprae from './core.js'
-import swap from './domdiff.js'
-// import swap from 'swapdom'
-import createState from './state.signals-proxy.js'
-import { queueMicrotask, WeakishMap } from './util.js'
+import createState, { effect, computed, untracked, batch, _dispose, _signals } from './state.signals-proxy.js'
+import { queueMicrotask } from './util.js'
 
 // reserved directives - order matters!
 // primary initialized first by selector, secondary initialized by iterating attributes
@@ -12,11 +10,12 @@ export const primary = {}, secondary = {}
 // :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
 // we consider :with={x} :if={x} case insignificant
-primary['if'] = (el, expr) => {
+primary['if'] = (el, expr, state) => {
   let holder = document.createTextNode(''),
     clauses = [parseExpr(el, expr, ':if')],
     els = [el], cur = el
 
+  // consume all following siblings with :else, :if into a single group
   while (cur = el.nextElementSibling) {
     if (cur.hasAttribute(':else')) {
       cur.removeAttribute(':else');
@@ -33,7 +32,8 @@ primary['if'] = (el, expr) => {
 
   el.replaceWith(cur = holder)
 
-  return (state) => {
+  const dispose = effect(() => {
+    // find matched clause (re-evaluates any time any clause updates)
     let i = clauses.findIndex(f => f(state))
     if (els[i] != cur) {
       ; (cur[_each] || cur).replaceWith(cur = els[i] || holder);
@@ -41,74 +41,91 @@ primary['if'] = (el, expr) => {
       // but :if must come first to avoid preliminary caching
       sprae(cur, state);
     }
+  })
+
+  return () => {
+    for (const el of els) el[_dispose]?.() // dispose all internal spraes
+    dispose() // dispose subscription
   }
 }
 
 const _each = Symbol(':each')
 
 // :each must init before :ref, :id or any others, since it defines scope
-primary['each'] = (tpl, expr) => {
+primary['each'] = (tpl, expr, state) => {
   let each = parseForExpression(expr);
   if (!each) return exprError(new Error, tpl, expr, ':each');
 
-  // FIXME: make sure no memory leak here
+  const [itemVar, idxVar, itemsExpr] = each;
+
   // we need :if to be able to replace holder instead of tpl for :if :each case
   const holder = tpl[_each] = document.createTextNode('')
   tpl.replaceWith(holder)
 
-  const evaluate = parseExpr(tpl, each[2], ':each');
-
-  const keyExpr = tpl.getAttribute(':key');
-  const itemKey = keyExpr ? parseExpr(null, keyExpr, ':each') : null;
-  tpl.removeAttribute(':key')
-
-  const refExpr = tpl.getAttribute(':ref');
-
-  const scopes = new WeakishMap() // stores scope per data item
-  const itemEls = new WeakishMap() // element per data item
-  let curEls = []
-
-  return (state) => {
-    // get items
-    let list = evaluate(state)
-
-    if (!list) list = []
-    else if (typeof list === 'number') list = Array.from({ length: list }, (_, i) => [i + 1, i])
-    else if (Array.isArray(list)) list = list.map((item, i) => [i + 1, item])
-    else if (typeof list === 'object') list = Object.entries(list)
-    else exprError(Error('Bad list value'), tpl, expr, ':each', list)
+  const evaluate = parseExpr(tpl, itemsExpr, ':each');
 
-    // collect elements/scopes for items
-    let newEls = [], elScopes = []
+  // we re-create items any time new items are produced
+  let items, prevl = 0, keys
+  effect(() => {
+    let newItems = evaluate(state)
 
-    for (let [idx, item] of list) {
-      let el, scope, key = itemKey?.({ [each[0]]: item, [each[1]]: idx })
-
-      // we consider if data items are primitive, then nodes needn't be cached
-      // since likely they're very simple to create
-      if (key == null) el = tpl.cloneNode(true);
-      else (el = itemEls.get(key)) || itemEls.set(key, el = tpl.cloneNode(true));
-
-      newEls.push(el)
-
-      if (key == null || !(scope = scopes.get(key))) {
-        scope = createState({ [each[0]]: item, [refExpr || '']: null, [each[1]]: idx }, state)
-        if (key != null) scopes.set(key, scope)
-      }
-      // need to explicitly set item to update existing children's values
-      else scope[each[0]] = item
-
-      elScopes.push(scope)
+    // convert items to array
+    if (!newItems) newItems = []
+    else if (typeof newItems === 'number') {
+      newItems = Array.from({ length: newItems }, (_, i) => i)
+    }
+    else if (Array.isArray(newItems));
+    else if (typeof newItems === 'object') {
+      keys = Object.keys(newItems);
+      newItems = Object.values(newItems);
+    }
+    else {
+      exprError(Error('Bad items value'), tpl, expr, ':each', newItems)
     }
 
-    swap(holder.parentNode, curEls, newEls, holder)
-    curEls = newEls
+    untracked(() => batch(() => {
+      // init items
+      if (!items?.[_signals][0]?.peek) {
+        // manual dispose for plain arrays (not states) - _signals here is just fake holder for destructors
+        for (let i = 0, signals = items?.[_signals]; i < prevl; i++) signals[i]?._del()
+        // NOTE: new items are initialized in length effect below
+        items = newItems, items[_signals] ||= {}
+      }
+      // patch existing items and insert new items - init happens in length effect
+      else {
+        let newl = newItems.length, i = 0
+        for (; i < newl; i++) items[i] = newItems[i]
+        items.length = newl // dispose tail (done internally in state)
+      }
+    }))
+
+    // length change effect
+    return effect(() => {
+      let newl = newItems.length // indicate that we track it
+      if (prevl !== newl) untracked(() => batch(() => {
+        // init new items
+        const signals = items[_signals]
+        for (let i = prevl; i < newl; i++) {
+          items[i]; // touch item to create signal
+          const el = tpl.cloneNode(true),
+            scope = createState({
+              [itemVar]: signals[i] ?? items[i],
+              [idxVar]: keys?.[i] ?? i
+            }, state)
+          holder.before(el)
+          sprae(el, scope)
+          const { _del } = (signals[i] ||= {});
+          signals[i]._del = () => { delete signals[i]; _del?.(); el[_dispose](), el.remove(), delete items[i] }
+        }
+        prevl = newl
+      }))
+    })
+  })
 
-    // init new elements
-    for (let i = 0; i < newEls.length; i++) {
-      sprae(newEls[i], elScopes[i])
-    }
-  }
+  return () => batch(() => {
+    for (let _i of items[_signals]) _i?._del()
+    items.length = 0
+  })
 }
 
 // `:each` can redefine scope as `:each="a in {myScope}"`,
@@ -117,7 +134,8 @@ primary['with'] = (el, expr, rootState) => {
   let evaluate = parseExpr(el, expr, ':with')
   const localState = evaluate(rootState)
   let state = createState(localState, rootState)
-  sprae(el, state);
+  sprae(el, state)
+  return el[_dispose];
 }
 
 // ref must be last within primaries, since that must be skipped by :each, but before secondaries
@@ -148,7 +166,6 @@ function parseForExpression(expression) {
     items
   ]
 
-  // FIXME: it can possibly return index as second param
   return [item, '', items]
 }
 
@@ -161,18 +178,19 @@ secondary['render'] = (el, expr, state) => {
   let content = tpl.content.cloneNode(true);
   el.replaceChildren(content)
   sprae(el, state)
+  return el[_dispose]
 }
 
-secondary['id'] = (el, expr) => {
+secondary['id'] = (el, expr, state) => {
   let evaluate = parseExpr(el, expr, ':id')
   const update = v => el.id = v || v === 0 ? v : ''
-  return (state) => update(evaluate(state))
+  return effect(() => update(evaluate(state)))
 }
 
-secondary['class'] = (el, expr) => {
+secondary['class'] = (el, expr, state) => {
   let evaluate = parseExpr(el, expr, ':class')
   let initClassName = el.getAttribute('class')
-  return (state) => {
+  return effect(() => {
     let v = evaluate(state)
     let className = [initClassName]
     if (v) {
@@ -182,42 +200,44 @@ secondary['class'] = (el, expr) => {
     }
     if (className = className.filter(Boolean).join(' ')) el.setAttribute('class', className);
     else el.removeAttribute('class')
-  }
+  })
 }
 
-secondary['style'] = (el, expr) => {
+secondary['style'] = (el, expr, state) => {
   let evaluate = parseExpr(el, expr, ':style')
   let initStyle = el.getAttribute('style') || ''
   if (!initStyle.endsWith(';')) initStyle += '; '
-  return (state) => {
+  return effect(() => {
     let v = evaluate(state)
     if (typeof v === 'string') el.setAttribute('style', initStyle + v)
     else {
-      el.setAttribute('style', initStyle)
-      for (let k in v) el.style.setProperty(k, v[k])
+      untracked(() => {
+        el.setAttribute('style', initStyle)
+        for (let k in v) if (typeof v[k] !== 'symbol') el.style.setProperty(k, v[k])
+      })
     }
-  }
+  })
 }
 
-secondary['text'] = (el, expr) => {
+secondary['text'] = (el, expr, state) => {
   let evaluate = parseExpr(el, expr, ':text')
-  return (state) => {
+  return effect(() => {
     let value = evaluate(state)
     el.textContent = value == null ? '' : value;
-  }
+  })
 }
 
 // set props in-bulk or run effect
-secondary[''] = (el, expr) => {
+secondary[''] = (el, expr, state) => {
   let evaluate = parseExpr(el, expr, ':')
-  if (evaluate) return (state) => {
+  if (evaluate) return effect(() => {
     let value = evaluate(state)
     for (let key in value) attr(el, dashcase(key), value[key]);
-  }
+  })
 }
 
 // connect expr to element value
-secondary['value'] = (el, expr) => {
+secondary['value'] = (el, expr, state) => {
   let evaluate = parseExpr(el, expr, ':value')
 
   let from, to
@@ -238,7 +258,7 @@ secondary['value'] = (el, expr) => {
             value => el.value = value
   )
 
-  return (state) => update(evaluate(state))
+  return effect(() => { update(evaluate(state)) })
 }
 
 // any unknown directive
@@ -248,17 +268,21 @@ export default (el, expr, state, name) => {
 
   if (!evaluate) return
 
-  if (evt) return (state => {
-    // we need anonymous callback to enable modifiers like prevent
-    let value = evaluate(state) || (() => { })
-    return on(el, evt, value)
-  })
+  if (evt) {
+    let off, dispose = effect(() => {
+      if (off) off(), off = null
+      // we need anonymous callback to enable modifiers like prevent
+      let value = evaluate(state)
+      if (value) off = on(el, evt, value)
+    })
+    return () => (off?.(), dispose())
+  }
 
-  return state => attr(el, name, evaluate(state))
+  return effect(() => { attr(el, name, evaluate(state)) })
 }
 
 // bind event to a target
-export const on = (el, e, fn) => {
+const on = (el, e, fn) => {
   if (!fn) return
 
   const ctx = { evt: '', target: el, test: () => true };
@@ -280,7 +304,9 @@ export const on = (el, e, fn) => {
   )
 
   target.addEventListener(evt, cb, opts)
-  return () => target.removeEventListener(evt, cb, opts)
+
+  // return off
+  return () => (target.removeEventListener(evt, cb, opts))
 }
 
 // event modifiers
@@ -386,7 +412,7 @@ function parseExpr(el, expression, dir) {
 
   if (!evaluate) {
     try {
-      evaluate = evaluatorMemo[expression] = new Function(`__scope`, `with (__scope) { return ${expression.trim()} };`)
+      evaluate = evaluatorMemo[expression] = new Function(`__scope`, `with (__scope) { let __; return ${expression.trim()} };`)
     } catch (e) {
       return exprError(e, el, expression, dir)
     }

package/src/domdiff.js

@@ -1,23 +1,26 @@
 // https://github.com/luwes/js-diff-benchmark/blob/master/libs/list-difference.js
 // this implementation is more persistent in terms of preserving in-between nodes
+// also it handles _dispose
 
 // a is old list, b is the new
-export default function(parent, a, b, before) {
+export default function (parent, a, b, before) {
   const aIdx = new Map();
   const bIdx = new Map();
   let i;
   let j;
 
-  // Create a mapping from keys to their position in the old list
-  for (i = 0; i < a.length; i++) {
-    aIdx.set(a[i], i);
-  }
-
   // Create a mapping from keys to their position in the new list
   for (i = 0; i < b.length; i++) {
     bIdx.set(b[i], i);
   }
 
+  // Create a mapping from keys to their position in the old list
+  for (i = 0; i < a.length; i++) {
+    aIdx.set(a[i], i);
+    // dispose a[i] if is going to disappear
+    if (!bIdx.has(a[i])) a[i][Symbol.dispose]?.()
+  }
+
   for (i = j = 0; i !== a.length || j !== b.length;) {
     var aElm = a[i], bElm = b[j];
     if (aElm === null) {
@@ -65,4 +68,4 @@ export default function(parent, a, b, before) {
     }
   }
   return b;
-};
+};

package/src/state.proxy.js

@@ -122,7 +122,7 @@ export default function state(obj, parent) {
   return proxy
 }
 
-export const fx = (fn) => {
+const fx = (fn) => {
   const call = () => {
     let prev = currentFx
     currentFx = call
@@ -136,7 +136,7 @@ export const fx = (fn) => {
   return call
 }
 
-export const planUpdate = () => {
+const planUpdate = () => {
   // if (!pendingUpdate) {
   //   pendingUpdate = true
   //   queueMicrotask(() => {
@@ -146,3 +146,5 @@ export const planUpdate = () => {
   //   })
   // }
 }
+
+export { fx as effect };

package/src/state.signals-proxy.js

@@ -7,11 +7,15 @@
 // + it's just robust
 // ? must it modify initial store
 
-import { signal, computed, effect, batch } from '@preact/signals-core'
+import { signal, computed, effect, batch, untracked } from '@preact/signals-core'
 // import { signal, computed } from 'usignal/sync'
 // import { signal, computed } from '@webreflection/signal'
 
-export { effect as fx, batch }
+export { effect, computed, batch, untracked }
+
+export const _dispose = (Symbol.dispose ||= Symbol('dispose'));
+export const _signals = Symbol('signals');
+
 
 // default root sandbox
 export const sandbox = {
@@ -22,59 +26,87 @@ export const sandbox = {
 }
 
 const isObject = v => v?.constructor === Object
-const memo = new WeakMap
+const isPrimitive = (value) => value !== Object(value);
 
 // track last accessed property to figure out if .length was directly accessed from expression or via .push/etc method
 let lastProp
 
 export default function createState(values, parent) {
   if (!isObject(values) && !Array.isArray(values)) return values;
-  if (memo.has(values) && !parent) return values;
+  // ignore existing state as argument
+  if (values[_signals] && !parent) return values;
+  const initSignals = values[_signals]
+
   // .length signal is stored outside, since cannot be replaced
-  const _len = Array.isArray(values) && signal(values.length),
+  const _len = Array.isArray(values) && signal((initSignals || values).length),
     // dict with signals storing values
-    signals = parent ? Object.create(memo.get(parent = createState(parent))) : Array.isArray(values) ? [] : {},
-    // proxy conducts prop access to signals
-    state = new Proxy(signals, {
-      // sandbox everything
-      has() { return true },
-      get(signals, key) {
-        // console.log('get', key)
-        let v
-        // if .length is read within .push/etc - peek signal (don't subscribe)
-        if (_len && key === 'length') v = Array.prototype[lastProp] ? _len.peek() : _len.value;
-        else v = (signals[key] || initSignal(key))?.valueOf()
-        if (_len) lastProp = key
-        return v
-      },
-      set(signals, key, v) {
+    signals = parent ? Object.create((parent = createState(parent))[_signals]) : Array.isArray(values) ? [] : {},
+    proto = signals.constructor.prototype;
+
+  // proxy conducts prop access to signals
+  const state = new Proxy(values, {
+    // sandbox everything
+    has() { return true },
+    get(values, key) {
+      // if .length is read within .push/etc - peek signal (don't subscribe)
+      if (_len)
+        if (key === 'length') return (proto[lastProp]) ? _len.peek() : _len.value;
+        else lastProp = key;
+      if (proto[key]) return proto[key]
+      if (key === _signals) return signals
+      const s = signals[key] || initSignal(key)
+      if (s) return s.value // existing property
+      if (parent) return parent[key]; // touch parent
+      return sandbox[key] // Array, window etc
+    },
+    set(values, key, v) {
+      if (_len) {
         // .length
-        if (_len && key === 'length') _len.value = signals.length = v;
-
-        else {
-          const s = signals[key] || initSignal(key)
-
-          // new unknown property
-          if (!s) signals[key] = signal(createState(v?.valueOf()))
-          // stashed _set for values with getter/setter
-          else if (s._set) s._set(v)
-          // FIXME: is there meaningful way to update same-signature object?
-          // else if (isObject(v) && isObject(s.value)) Object.assign(s.value, v)
-          // .x = y
-          else s.value = createState(v?.valueOf())
+        if (key === 'length') {
+          batch(() => {
+            // force cleaning up tail
+            for (let i = v, l = signals.length; i < l; i++) delete state[i]
+            _len.value = signals.length = values.length = v;
+          })
+          return true
         }
+      }
+
+      const s = signals[key] || initSignal(key, v) || signal()
+      const cur = s.peek()
 
-        if (_len) lastProp = null
-        return true
+      // skip unchanged (although can be handled by last condition - we skip a few checks this way)
+      if (v === cur);
+      // stashed _set for values with getter/setter
+      else if (s._set) s._set(v)
+      // patch array
+      else if (Array.isArray(v) && Array.isArray(cur)) {
+        untracked(() => batch(() => {
+          let i = 0, l = v.length, vals = values[key];
+          for (; i < l; i++) cur[i] = vals[i] = v[i]
+          cur.length = l // forces deleting tail signals
+        }))
+      }
+      // .x = y
+      else {
+        // reflect change in values
+        s.value = createState(values[key] = v)
       }
-    })
+
+      // force changing length, if eg. a=[]; a[1]=1 - need to come after setting the item
+      if (_len && key >= _len.peek()) _len.value = signals.length = values.length = Number(key) + 1
+
+      return true
+    },
+    deleteProperty(values, key) {
+      signals[key]?._del?.(), delete signals[key], delete values[key]
+      return true
+    }
+  })
 
   // init signals placeholders (instead of ownKeys & getOwnPropertyDescriptor handlers)
-  for (let key in values) {
-    // FIXME: make lazy signals actually work (breaks 2 tests)
-    // signals[key] = null // make placeholder
-    signals[key] = initSignal(key)
-  }
+  // if values are existing proxy (in case of extending parent) - take its signals instead of creating new ones
+  for (let key in values) signals[key] = initSignals?.[key] ?? initSignal(key);
 
   // initialize signal for provided key
   function initSignal(key) {
@@ -88,17 +120,10 @@ export default function createState(values, parent) {
         (signals[key] = computed(desc.get.bind(state)))._set = desc.set?.bind(state);
         return signals[key]
       }
+      // take over existing signal or create new signal
       return signals[key] = desc.value?.peek ? desc.value : signal(createState(desc.value))
     }
-
-    // touch parent
-    if (parent) return parent[key]
-
-    // Array, window etc
-    if (sandbox.hasOwnProperty(key)) return sandbox[key]
   }
 
-  memo.set(state, signals)
-
   return state
 }

package/src/state.signals.js

@@ -1,5 +1,5 @@
 // signals-based store implementation
-import { signal, computed, effect } from '@preact/signals-core'
+import { signal, computed, effect, batch } from '@preact/signals-core'
 // import { signal, computed } from 'usignal/sync'
 // import { signal, computed } from '@webreflection/signal'
 
@@ -9,7 +9,7 @@ const isObject = v => v?.constructor === Object
 
 const _st = Symbol('state')
 
-export { effect as fx }
+export { effect, batch }
 
 export default function createState(values, proto) {
   if (isState(values) && !proto) return values;