sprae 0.0.0 → 1.0.0

package/src/core.js

@@ -1,50 +1,110 @@
-// autoinit
-const s = document.currentScript
-if (s && s.hasAttribute('init')) {
-  sprae(document.documentElement)
-}
+import sube, { observable } from 'sube';
 
+let curEl, curDir;
 // sprae element: apply directives
-export default function sprae(el, scope) {
-  scope ||= {}
+export default function sprae(el, initScope) {
+  initScope ||= {};
 
-  let params, updates=[]
+  let updates=[], // all spray directive updators
+      ready=false;
 
-  // prepare directives
-  for (let dir in directives) updates[dir] = directives[dir](el, scope)
+  const update = (values) => { updates.forEach(update => update(values)); };
 
-  const update = (diff=scope) => {
-    if (diff !== scope) Object.assign(scope, diff);
-    for (let dir in updates) updates[dir].forEach(update => update(scope))
-  }
+  // hook up observables (deeply, to include item.text etc)
+  // that's least evil compared to dlv/dset or proxies
+  // returns dynamic values snapshot
+  const rsube = (scope) => {
+    let values = {}
+    for (let k in scope) {
+      let v = scope[k];
+      if (observable(v = scope[k])) values[k] = null, registry.register(v, sube(v, v => (values[k] = v, ready && update(values))));
+      // FIXME: add []
+      else if (v?.constructor === Object) values[k] = rsube(v);
+      else values[k] = v;
+    }
+    return values;
+  };
+  const values = rsube(initScope);
+  ready = true;
+
+  // prepare directives - need to be after subscribing to values to get init state here
+  for (let name in directives) {
+    // updates[dir] = directives[dir](el)
+    const sel = `[${name.replace(':','\\:')}]`,
+          initDirective = directives[name]
+
+    // FIXME: possibly linear init of directives is better, who knows
+    const els = [...el.querySelectorAll(sel)];
+    if (el.matches?.(sel)) els.unshift(el);
+
+    let update
+    for (let el of els) if (update = initDirective(el, values)) updates.push(update);
+  };
+
+  update(values);
 
   // return update via destructuring of result to allow batch-update
-  scope[Symbol.iterator] = function*(){ yield params; yield update; }
+  values[Symbol.iterator] = function*(){ yield proxy; yield (diff) => update(Object.assign(values, diff)); };
+
+  const proxy = new Proxy(values,  {
+    set: (s, k, v) => (values[k]=v, update(values), 1),
+    deleteProperty: (s, k) => (values[k]=undefined, update(values), 1)
+  });
 
-  return params = new Proxy(scope,  {
-    set: (s, k, v) => (scope[k]=v, update(), 1),
-    deleteProperty: (s,k) => (delete scope[k], update(), 1)
-  })
+  return proxy
 }
 
 // dict of directives
-const directives = {}, store = new WeakMap
+const directives = {}
 
 // register a directive
-export const directive = (name, initializer) => (
-  directives[name] = (container) => {
-    const els = container.querySelectorAll(`[${name}]`)
-    const updates = []
-
-    // replace all shortcuts with inner templates
-    for (el of els) {
-      // FIXME: make sure no leak is introduced here
-      if (!store.has(el)) {
-        store.add(el)
-        updates.push(initializer(el, el.getAttribute(name)))
-      }
-    }
+export const directive = (name, initializer) => {
+  const className = name.replace(':','∴')
 
-    return updates
+  // create initializer of a directive on an element
+  return directives[name] = (el, initValues) => {
+    if (el.classList.contains(className)) return
+    el.classList.add(className)
+    let expr = el.getAttribute(name)
+    el.removeAttribute(name)
+    return initializer(el, expr, initValues);
   }
-)
+}
+
+const registry = new FinalizationRegistry(unsub => unsub?.call?.())
+
+let evaluatorMemo = {}
+
+// borrowed from alpine: https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/evaluator.js#L61
+// it seems to be more robust than subscript
+export function parseExpr(expression) {
+  if (evaluatorMemo[expression]) return evaluatorMemo[expression]
+
+  // Some expressions that are useful in Alpine are not valid as the right side of an expression.
+  // Here we'll detect if the expression isn't valid for an assignement and wrap it in a self-
+  // calling function so that we don't throw an error AND a "return" statement can b e used.
+  let rightSideSafeExpression = 0
+    // Support expressions starting with "if" statements like: "if (...) doSomething()"
+    || /^[\n\s]*if.*\(.*\)/.test(expression)
+    // Support expressions starting with "let/const" like: "let foo = 'bar'"
+    || /^(let|const)\s/.test(expression)
+        ? `(() => { ${expression} })()`
+        : expression
+
+  const safeFunction = () => {
+    try {
+      return new Function(['scope'], `let result; with (scope) { result = ${rightSideSafeExpression} }; return result;`)
+    } catch ( e ) {
+      return exprError(e, expression)
+    }
+  }
+
+  return evaluatorMemo[expression] = safeFunction()
+}
+
+export function exprError(error, expression) {
+  Object.assign( error, { expression } )
+  console.warn(`∴ ${error.message}\n\n${curDir}=${ expression ? `"${expression}"\n\n` : '' }`, curEl)
+  setTimeout(() => { throw error }, 0)
+  return Promise.resolve()
+}

package/src/directives/aria.js

@@ -0,0 +1,10 @@
+import { directive, parseExpr } from '../core.js'
+import { prop } from 'element-props'
+
+directive(':aria', (el, expr) => {
+  let evaluate = parseExpr(expr);
+  return (state) => {
+    let value = evaluate(state);
+    for (let key in value) prop(el, 'aria'+key[0].toUpperCase()+key.slice(1), value[key]);
+  }
+})

package/src/directives/common.js

@@ -0,0 +1,15 @@
+// common directives just set/map value as is
+import { directive, parseExpr } from '../core.js'
+import {prop} from 'element-props'
+
+common(`id`), common(`name`), common(`for`), common(`type`), common(`hidden`), common(`disabled`), common(`href`), common(`src`), common(`style`), common(`class`)
+
+function common(name) {
+  directive(':'+name, (el,expr) => {
+    let evaluate = parseExpr(expr)
+    return state => {
+      let value = evaluate(state);
+      prop(el, name, value)
+    }
+  })
+}

package/src/directives/data.js

@@ -0,0 +1,10 @@
+import { directive, parseExpr } from '../core.js'
+import { prop } from 'element-props'
+
+directive(':data', (el, expr) => {
+  let evaluate = parseExpr(expr);
+  return (state) => {
+    let value = evaluate(state);
+    for (let key in value) el.dataset[key] = value[key];
+  }
+})

package/src/directives/each.js

@@ -0,0 +1,53 @@
+import sprae, { directive, exprError, parseExpr } from '../core.js'
+
+directive(':each', (el, expr) => {
+  let each = parseForExpression(expr);
+  if (!each) return exprError(new Error, expr);
+
+  const getItems = parseExpr(each.items);
+
+  const holder = new Text
+  el.replaceWith(holder)
+
+  // FIXME: make sure no memory leak here
+  // FIXME: there can DOM swapper be used instead
+  let els = [];
+  return state => {
+    els.forEach(el => el.remove()); els = [];
+    let items = getItems(state);
+    if (typeof items === 'number') items = Array.from({length: items}, (item, i)=>i+1)
+    items?.forEach((item,i) => {
+      const scope = {...state};
+      scope[each.item] = item;
+      if (each.index) scope[each.index] = i;
+      let itemEl = el.cloneNode(true);
+      els.push(itemEl);
+      holder.before(itemEl);
+      sprae(itemEl, scope);
+    });
+  }
+})
+
+// This was taken AlpineJS, former VueJS 2.* core. Thanks Alpine & Vue!
+function parseForExpression(expression) {
+  let forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/
+  let stripParensRE = /^\s*\(|\)\s*$/g
+  let forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/
+  let inMatch = expression.match(forAliasRE)
+
+  if (!inMatch) return
+
+  let res = {}
+  res.items = inMatch[2].trim()
+  let item = inMatch[1].replace(stripParensRE, '').trim()
+  let iteratorMatch = item.match(forIteratorRE)
+
+  if (iteratorMatch) {
+      res.item = item.replace(forIteratorRE, '').trim()
+      res.index = iteratorMatch[1].trim()
+  } else {
+      res.item = item
+  }
+
+  return res
+}

package/src/directives/if.js

@@ -0,0 +1,31 @@
+import { directive, parseExpr } from '../core.js'
+
+directive(':if', (el, expr) => {
+  let cur = el, els = [el], clauses = [parseExpr(expr)], holder = new Text
+
+  // collect clauses
+  while (cur = el.nextElementSibling) {
+    if (expr = cur.getAttribute(':else-if')) {
+      cur.removeAttribute(':else-if');
+      cur.classList.add('∴else-if')
+      cur.remove();
+      els.push(cur); clauses.push(parseExpr(expr));
+      continue
+    }
+    if (cur.hasAttribute(':else')) {
+      cur.removeAttribute(':else');
+      cur.classList.add('∴else')
+      cur.remove();
+      els.push(cur); clauses.push(() => 1);
+    }
+    break;
+  }
+
+  cur = els[0]
+
+  return state => {
+    let idx = clauses.findIndex(match => match(state));
+    if (idx >= 0) cur.replaceWith(cur = els[idx]);
+    else cur.replaceWith(cur = holder);
+  }
+})

package/src/directives/index.js

@@ -0,0 +1,11 @@
+// order defines precedence
+import './with.js'
+import './each.js'
+import './text.js'
+import './if.js' // if must go last, after other directives are initialized, since it removes :else, :else-if from tree
+import './common.js'
+import './prop.js'
+import './data.js'
+import './aria.js'
+import './value.js'
+import './on.js'

package/src/directives/on.js

@@ -0,0 +1,12 @@
+import { directive, parseExpr } from '../core.js'
+
+directive(':on', (el, expr) => {
+  let evaluate = parseExpr(expr);
+  let listeners = {}
+  return (state) => {
+    for (let evt in listeners) el.removeEventListener(evt, listeners[evt]);
+    listeners = evaluate(state);
+    for (let evt in listeners) el.addEventListener(evt, listeners[evt]);
+  }
+})
+

package/src/directives/prop.js

@@ -0,0 +1,10 @@
+import { directive, parseExpr } from '../core.js'
+import { prop } from 'element-props'
+
+directive(':prop', (el, expr) => {
+  let evaluate = parseExpr(expr);
+  return (state) => {
+    let value = evaluate(state);
+    for (let key in value) prop(el, key, value[key]);
+  }
+})

package/src/directives/text.js

@@ -0,0 +1,10 @@
+import { directive, parseExpr } from '../core.js'
+
+directive(':text', (el, expr) => {
+  let evaluate = parseExpr(expr);
+  return (state) => {
+    let value = evaluate(state);
+    el.textContent = value == null ? '' : value;
+  }
+})
+

package/src/directives/value.js

@@ -0,0 +1,26 @@
+import { input, prop } from "element-props";
+import { directive, parseExpr } from '../core.js';
+
+// connect expr to element value
+directive(':value', (el, expr) => {
+  let evaluateGet = parseExpr(expr);
+  let [get, set] = input(el);
+  let evaluateSet = parseSetter(expr);
+  let curState, onchange = e => evaluateSet(curState, get(el));
+  el.addEventListener('input', onchange);
+  el.addEventListener('change', onchange);
+  return (state) => {
+    let value = evaluateGet(curState = state);
+    prop(el, 'value', value)
+    set(value);
+  }
+})
+
+const memo = {}
+function parseSetter(expr) {
+  if (memo[expr]) return memo[expr]
+  return memo[expr] = new Function(
+    ['scope', 'value'],
+    `with (scope) { ${expr} = value };`
+  )
+}

package/src/directives/with.js

@@ -0,0 +1,21 @@
+import sprae, { directive, parseExpr } from '../core.js'
+
+directive(':with', (el, expr, rootValues) => {
+  let evaluate = parseExpr(expr);
+
+  // it subsprays with shadowed values
+  // rootValues get updated by parent directives
+  // subscope doesn't contain reactive values
+  let subscope = Object.create(rootValues)
+
+  // FIXME: wonder if we better pass initial state rather than values snapshot, to let subtree subscribe to more complete set
+  // FIXME: likely initial set can be reactive itself then
+  Object.assign(subscope, evaluate(rootValues))
+  let [subvalues, subupdate] = sprae(el, subscope)
+
+  return (values) => {
+    let withValues = evaluate(values);
+    subupdate(withValues)
+  }
+})
+

package/src/index.js

@@ -1,2 +1,12 @@
-export { directives } from './dirs.js';
-export { default } from './core.js';
+import sprae from './core.js';
+import './directives/index.js';
+
+export default sprae;
+export * from './core.js';
+
+// autoinit
+// NOTE: abandoning for now, since requires a separate non-module JS entry, until use-case appears
+// const s = document.currentScript
+// if (s && s.hasAttribute('init')) {
+//   sprae(document.documentElement)
+// }

package/test/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test</title>
+
+<script async src="../node_modules/es-module-shims/dist/es-module-shims.js"></script>
+<script type="importmap">
+{
+  "imports": {
+    "sprae" : "../src/index.js",
+    "tst" : "../node_modules/tst/tst.js",
+    "wait-please" : "../node_modules/wait-please/index.js",
+    "value-ref" : "../node_modules/value-ref/value-ref.js",
+    "hyperf" : "../node_modules/hyperf/hyperf.js",
+    "sube" : "../node_modules/sube/sube.js",
+    "element-props" : "../node_modules/element-props/element-props.js",
+    "preact": "../node_modules/preact/dist/preact.mjs",
+    "preact/hooks": "../node_modules/preact/hooks/dist/hooks.mjs",
+    "@preact/signals": "../node_modules/@preact/signals/dist/signals.mjs",
+    "@preact/signals-core": "../node_modules/@preact/signals-core/dist/signals-core.mjs"
+  }
+}
+</script>
+
+<script src="./test.js" type="module"></script>