sprae 0.0.0 → 0.1.0

package/package.json

@@ -1,17 +1,18 @@
 {
   "name": "sprae",
   "description": "Reactive directives with expressions for DOM microtemplating.",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "main": "sprae.js",
   "dependencies": {
-    "sube": "^2.2.1",
     "element-props": "^2.0.4",
     "htm": "^3.1.1",
-    "swapdom": "^1.1.1",
-    "preact": "^10.11.2"
+    "preact": "^10.11.2",
+    "sube": "^2.2.1",
+    "swapdom": "^1.1.1"
   },
   "devDependencies": {
     "@preact/signals": "^1.1.2",
+    "es-module-shims": "^1.6.2",
     "hyperf": "^1.4.0",
     "tst": "^7.1.1",
     "value-ref": "^2.1.0",
@@ -22,7 +23,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/dy/sporae.git"
+    "url": "git+https://github.com/dy/sprae.git"
   },
   "keywords": [
     "preact",

package/readme.md

@@ -1,27 +1,13 @@
 # ∴ spræ
 
-Reactive directives for DOM microtemplating: moisturize tree without trasplanting to JSX.<br/>
+> Reactive directives for DOM microtemplating: moisturize tree without trasplanting to JSX.
+
 A lightweight essential alternative to [alpine](https://github.com/alpinejs/alpine), [petite-vue](https://github.com/vuejs/petite-vue) and [templize](https://github.com/dy/templize) with better ergonomics[*](#justification).
 
 
 ## Usage
 
-```html
-<script src="./sprae.js" defer init></script>
-
-<div :scope="{ count: 0 }">
-  <span :text="count">
-  <button :on="{ click: e => count++ }">inc</button>
-</div>
-```
-
-* `:scope` marks regions on the tree that should be controlled by sprae.
-* `init` attribute tells sprae to automatically initialize all elements that have `:scope`.
-* any attribute starting with `:` is considered a sprae directive.
-
-## Manual init
-
-The more direct case is initializing sprae via JS.
+Sprae enables directives as attributes starting with `:`.
 
 ```html
 <div id="element" :if="user">
@@ -44,66 +30,62 @@ The more direct case is initializing sprae via JS.
 * `update` can be used for bulk-updating multiple props.
 * `data` is the initial state to render the template. It can include reactive values, see [reactivity](#reactivity).
 
+<details>
+<summary><h3>Autoinit</h3></summary>
 
-## Directives
-
-* `:scope="data"` – autoinit subtree.
-* `:if="condition"`, `:else-if="condition"`, `:else` - controls flow of elements.
-* `:each="item, idx? in list"` - map list to instances of an element.
-* `:text="value"` - set text content of an element.
-* `:value="value"` – bind value to input or textarea.
-* `:id`, `:name`, `:for`, `:type`, `:hidden`, `:disabled`, `:href`, `:src` – common attributes setters.
-* `:class="[ foo, 'bar' ]"` – set element class from an array, object or a string.
-* `:style="{ top:1, position:'absolute' }"` – set element style from a string or an object.
-* `:prop="{ alt:'foo', title:'bar' }"` – set any attribute / property.
-* `:on="{ click:e=>{}, touch:e=>{} }"` – add event listeners.
-* `:data="{ foo:1, bar:2 }"` – set [data-*](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*) attributes.
-* `:aria="{ role:'progressbar' }"` – set [aria-role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes.
-* `:item="{ id: 1 }"` – set [item*](https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata) microdata attribute.
-
-<!--
-### Loops
-
-Iterating over set of items can be done with `:each` directive:
+Sprae can be used without build step or JS, autoinitializing HTML:
 
 ```html
-<ul>
-  <li :each="item, index in items" :id="'item-' + item.id" :data="{value:item.value}" :text="item.label"></li>
-</ul>
+<script src="./sprae.js" defer init></script>
 
-<li :each="{{ item, index in array }}">
-<li :each="{{ key, value, index in object }}">
-<li :each="{{ value in object }}">
+<div :scope="{ count: 0 }">
+  <span :text="count">
+  <button :on="{ click: e => count++ }">inc</button>
+</div>
 ```
 
-### Conditions
+* `:scope` marks regions on the tree that should be controlled by sprae.
+* `init` attribute tells sprae to automatically initialize all elements that have `:scope`.
 
-To optionally display an element, there are `if`, `else-if`, `else` directives.
+</details>
 
-```html
-<span :if="status == 0">Inactive</span>
-<span :else-if="status == 1">Active</span>
-<span :else>Finished</span>
-```
--->
 
-### Adding directives
+## Directives
+
+* [x] `:if="condition"`, `:else-if="condition"`, `:else` - controls flow of elements.
+* [x] `:each="item, i? in list"`,`:each="i in number"` - create multiple instances of element by mapping list or number.
+* [x] `:text="value"` - set text content of an element.
+* [ ] `:value="value"` – bind value to input or textarea.
+* [ ]`:id`, `:name`, `:for`, `:type`, `:hidden`, `:disabled`, `:href`, `:src` – common attributes setters.
+* [ ] `:class="[ foo, 'bar' ]"` – set element class from an array, object or a string.
+* [ ] `:style="{ top:1, position:'absolute' }"` – set element style from a string or an object.
+* [ ] `:prop="{ alt:'foo', title:'bar' }"` – set any attribute / property.
+* [ ] `:on="{ click:e=>{}, touch:e=>{} }"` – add event listeners.
+* [ ] `:data="{ foo:1, bar:2 }"` – set [data-*](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*) attributes.
+* [ ] `:aria="{ role:'progressbar' }"` – set [aria-role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes.
+* [ ] `:item="{ id: 1 }"` – set [item*](https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata) microdata attribute.
+* [ ] `:scope="data"` – autoinit subtree.
+
+<details>
+<summary><h3>Adding directives</h3></summary>
 
 Directives can be added by registering them via `directive(name, initializer)`:
 
 ```js
-import init, { directive } from 'sprae'
+import init, { directive } from 'sprae';
 
-directive(':html', (el, expr) => {
+directive(':html', (el) => {
   // ...initialize here
-  const evaluate = parseExpression(expr)
+  const evaluate = parseExpression(el.getAttribute(':html'));
   return (state) => {
     // ...update here
-    el.innerHTML = evaluate(state)
+    el.innerHTML = evaluate(state);
   }
-})
+});
 ```
 
+</details>
+
 
 ## Reactivity
 
@@ -128,8 +110,8 @@ Update happens when any value changes:
 
   // <div id="done">...</div>
 
-  const loading = signal(true),
-        result = signal(false);
+  const loading = signal(true), result = signal(false);
+
   spores(done, { loading, result })
 
   // <div id="done">loading</div>
@@ -144,11 +126,10 @@ Update happens when any value changes:
 Note: observers don't require disposal, since they're connected in weak fashion. Once element is disposed, observables are disconnected.
 
 
-
 ## Justification
 
-* [Template-parts](https://github.com/dy/template-parts) / [templize](https://github.com/dy/templize) is progressive, but is stuck with native HTML quirks (parsing table case, svg attributes, conflict with liquid syntax etc). Besides ergonomics of `attr="{{}}"` is inferior to `:attr=""` since it creates flash of uninitialized values.
-* [Alpine](https://github.com/alpinejs/alpine) / [vue](https://github.com/vuejs/petite-vue) / [lit](https://github.com/lit/lit/tree/main/packages/lit-html) escapes native HTML quirks, but the syntax is a bit scattered: `:attr`, `v-*`,`x-*`, `@evt`, `{{}}` can be expressed with single convention. Besides, functionality is too broad and can be reduced to essence.
+* [Template-parts](https://github.com/dy/template-parts) / [templize](https://github.com/dy/templize) is progressive, but 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). Also ergonomics of `attr="{{}}"` is inferior to `:attr=""` since it creates flash of uninitialized values.
+* [Alpine](https://github.com/alpinejs/alpine) / [vue](https://github.com/vuejs/petite-vue) / [lit](https://github.com/lit/lit/tree/main/packages/lit-html) escapes native HTML quirks, but the syntax is a bit scattered: `:attr`, `v-*`,`x-*`, `@evt`, `{{}}` can be expressed with single convention. Besides, functionality is too broad and can be reduced to essence. Also they tend to [self-encapsulate](https://github.com/alpinejs/alpine/discussions/3223), making interop hard.
 * [preact](https://ghub.io/preact) with HTML as JSX is a nice way to wire JS to templates, but it doesn't really support reactive fields (needs render call). Also migrating HTML to JS is an extreme with unwanted side-effects.
 
 _Sprae_ takes elegant syntax convention of _alpine_ and method of _templize_ to connect any reactive values (like [@preact/signals](https://ghub.io/@preact/signals) or observables) to static HTML.

package/src/core.js

@@ -1,3 +1,5 @@
+import sube, { observable } from 'sube';
+
 // autoinit
 const s = document.currentScript
 if (s && s.hasAttribute('init')) {
@@ -5,46 +7,104 @@ if (s && s.hasAttribute('init')) {
 }
 
 // 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)
+  for (let dir in directives) updates[dir] = directives[dir](el);
 
-  const update = (diff=scope) => {
-    if (diff !== scope) Object.assign(scope, diff);
-    for (let dir in updates) updates[dir].forEach(update => update(scope))
-  }
+  const update = (values) => { for (let dir in updates) updates[dir].forEach(update => update(values)); };
+
+  // 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])) 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);
+  update(values);
+  ready = true;
 
   // 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 = {}, store = new WeakSet
 
 // register a directive
-export const directive = (name, initializer) => (
-  directives[name] = (container) => {
-    const els = container.querySelectorAll(`[${name}]`)
-    const updates = []
+export const directive = (name, initializer) => {
+  const attr = `\\:${name}`, sel = `[${attr}]`
+
+  return directives[name] = (container) => {
+    const els = [...container.querySelectorAll(sel)];
+    if (container.matches(sel)) els.unshift(container);
+
+    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)))
-      }
+    for (let el of els) {
+      if (!el.classList.contains(`∴${name}`))
+        el.classList.add(`∴${name}`), updates.push(initializer(el));
     }
 
     return updates
   }
-)
+}
+
+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, el) {
+    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, el)
+      }
+    }
+
+    return evaluatorMemo[expression] = safeFunction()
+}
+
+export function exprError(error, expression, el) {
+  Object.assign( error, { el, expression } )
+  console.warn(`∴ Expression Error: ${error.message}\n\n${ expression ? 'Expression: \"' + expression + '\"\n\n' : '' }`, el)
+  setTimeout(() => { throw error }, 0)
+  return Promise.resolve()
+}

package/src/directives/each.js

@@ -0,0 +1,56 @@
+import sprae, { directive, exprError, parseExpr } from '../core.js'
+
+directive('each', (el) => {
+  let expr = el.getAttribute(':each');
+  el.removeAttribute(':each');
+
+  let each = parseForExpression(expr);
+  if (!each) return exprError(new Error, expr, el);
+
+  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/hidden.js

@@ -0,0 +1,14 @@
+import { directive, parseExpr } from '../core.js'
+
+// hidden attribute directive example
+directive('hidden', (el) => {
+  let expr = el.getAttribute(':hidden');
+  el.removeAttribute(':hidden');
+  let evaluate = parseExpr(expr);
+  return (state) => {
+    let value = evaluate(state);
+    if (value || value === '') el.setAttribute('hidden', '')
+    else el.removeAttribute('hidden')
+  }
+})
+

package/src/directives/if.js

@@ -0,0 +1,34 @@
+import { directive, parseExpr } from '../core.js'
+
+directive('if', (el) => {
+  let expr = el.getAttribute(':if');
+  el.removeAttribute(':if');
+
+  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,5 @@
+// order defines precedence
+import './each.js'
+import './hidden.js'
+import './text.js'
+import './if.js' // if must go last, after other directives are initialized, since it removes :else, :else-if from tree

package/src/directives/text.js

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

package/src/index.js

@@ -1,2 +1,2 @@
-export { directives } from './dirs.js';
-export { default } from './core.js';
+export { default, directive } from './core.js';
+import './directives/index.js';

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",
+    "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>

package/test/test.js

@@ -0,0 +1,183 @@
+import v from 'value-ref'
+import { signal } from '@preact/signals'
+import test, {is, any, throws} from 'tst'
+import {tick, time} from 'wait-please'
+import sprae from 'sprae'
+import h from 'hyperf'
+
+test('hidden: core', async () => {
+  let el = h`<div :hidden="hidden"></div>`
+  let params = sprae(el, {hidden:true})
+  is(el.outerHTML, `<div class="∴hidden" hidden=""></div>`)
+  params.hidden = false
+  is(el.outerHTML, `<div class="∴hidden"></div>`)
+})
+
+test('hidden: reactive', async () => {
+  const hidden = signal(true)
+  let el = h`<div :hidden="hidden"></div>`
+  sprae(el, {hidden})
+  is(el.outerHTML, `<div class="∴hidden" hidden=""></div>`)
+  hidden.value = false
+  is(el.outerHTML, `<div class="∴hidden"></div>`)
+})
+
+test('text: core', async () => {
+  let el = h`<div :text="text"></div>`
+  let params = sprae(el, {text:'abc'})
+  is(el.outerHTML, `<div class="∴text">abc</div>`)
+  params.text = null
+  is(el.outerHTML, `<div class="∴text"></div>`)
+})
+
+test('conditions: base', async () => {
+  let el = h`<p>
+    <span :if="a==1">a</span>
+    <span :else-if="a==2">b</span>
+    <span :else >c</span>
+  </p>`
+
+  const params = sprae(el, { a: 1 })
+
+  is(el.innerHTML, '<span class="∴if">a</span>')
+  params.a = 2
+  is(el.innerHTML, '<span class="∴else-if">b</span>')
+  params.a = 3
+  is(el.innerHTML, '<span class="∴else">c</span>')
+
+  delete params.a
+})
+
+test('conditions: short with insertions', async () => {
+  let el = h`<p>
+    <span :if="a==1" :text="'1:'+a"></span>
+    <span :else-if="a==2" :text="'2:'+a"></span>
+    <span :else :text="a"></span>
+  </p>`
+
+  const params = sprae(el, { a: 1 })
+
+  is(el.innerHTML, '<span class="∴text ∴if">1:1</span>')
+  params.a = 2
+  is(el.innerHTML, '<span class="∴text ∴else-if">2:2</span>')
+  params.a = 3
+  is(el.innerHTML, '<span class="∴text ∴else">3</span>')
+  params.a = 4
+  is(el.innerHTML, '<span class="∴text ∴else">4</span>')
+
+  params.a = 1
+  is(el.innerHTML, '<span class="∴text ∴if">1:1</span>')
+  params.a = 4
+  is(el.innerHTML, '<span class="∴text ∴else">4</span>')
+
+  delete params.a
+})
+
+test('conditions: reactive values', async () => {
+  let el = h`<p>
+    <span :if="a==1" :text="'1:'+a"></span>
+    <span :else-if="a==2" :text="'2:'+a"></span>
+    <span :else :text="a"></span>
+  </p>`
+
+  const a = signal(1)
+  sprae(el, { a })
+
+  is(el.innerHTML, '<span class="∴text ∴if">1:1</span>')
+  a.value = 2
+  is(el.innerHTML, '<span class="∴text ∴else-if">2:2</span>')
+  a.value = 3
+  is(el.innerHTML, '<span class="∴text ∴else">3</span>')
+  a.value = 4
+  is(el.innerHTML, '<span class="∴text ∴else">4</span>')
+
+  a.value = 1
+  is(el.innerHTML, '<span class="∴text ∴if">1:1</span>')
+  a.value = 4
+  is(el.innerHTML, '<span class="∴text ∴else">4</span>')
+})
+
+
+test('each: base', async () => {
+  // FIXME: in some conspicuous reason jsdom fails to update text nodes somehow
+  let el = h`<p>
+    <span :each="a in b" :text="a"></span>
+  </p>`
+
+  const params = sprae(el, { b: [] })
+
+  is(el.innerHTML, '')
+  params.b = [1,2]
+  is(el.innerHTML, '<span class="∴each ∴text">1</span><span class="∴each ∴text">2</span>')
+  params.b = []
+  is(el.innerHTML, '')
+  delete params.b
+  is(el.innerHTML, '')
+})
+
+test('each: reactive values', async () => {
+  let el = h`<p>
+    <span :each="a in b" :text="a"></span>
+  </p>`
+
+  const b = signal([])
+  const params = sprae(el, { b })
+
+  is(el.innerHTML, '')
+  b.value = [1,2]
+  is(el.innerHTML, '<span class="∴each ∴text">1</span><span class="∴each ∴text">2</span>')
+  b.value = []
+  is(el.innerHTML, '')
+  delete params.b
+  is(el.innerHTML, '')
+})
+
+test('each: loop with condition', async () => {
+  let el = h`<p>
+  <span :each="a in b" :text="a" :if="c"></span>
+  </p>`
+
+  const params = sprae(el, { b: [1,2], c:false })
+
+  is(el.innerHTML, '')
+  params.c = true
+  is(el.innerHTML, '<span class="∴each ∴text ∴if">1</span><span class="∴each ∴text ∴if">2</span>')
+  params.b = [1]
+  is(el.innerHTML, '<span class="∴each ∴text ∴if">1</span>')
+  delete params.b
+  is(el.innerHTML, '')
+})
+
+test('each: loop within condition', async () => {
+  let el = h`<p>
+    <x :if="a==1"><y :each="i in a" :text="i"></y></x>
+    <x :else-if="a==2"><y :each="i in a" :text="-i"></y></x>
+  </p>`
+
+  const params = sprae(el, { a: 1 })
+
+  is(el.innerHTML, '<x class="∴if"><y class="∴each ∴text">1</y></x>')
+  params.a = 2
+  is(el.innerHTML, '<x class="∴else-if"><y class="∴each ∴text">-1</y><y class="∴each ∴text">-2</y></x>')
+  params.a = 0
+  is(el.innerHTML, '')
+})
+
+test('each: condition within loop', async () => {
+  let el = h`<p>
+    <x :each="a in b">
+      <y :if="a==1" :text="'1:'+a"></y>
+      <y :else-if="a==2" :text="'2:'+a"></y>
+      <y :else :text="a"></y>
+    </x>
+  </p>`
+
+  const params = sprae(el, { b: [1,2,3] })
+
+  is(el.innerHTML, '<x class="∴each"><y class="∴text ∴if">1:1</y></x><x class="∴each"><y class="∴text ∴else-if">2:2</y></x><x class="∴each"><y class="∴text ∴else">3</y></x>')
+  params.b = [2]
+  is(el.innerHTML, '<x class="∴each"><y class="∴text ∴else-if">2:2</y></x>')
+  delete params.b
+  is(el.innerHTML, '')
+})
+

package/src/dirs.js

@@ -1,43 +0,0 @@
-import { directive } from './core'
-import { parseExpr } from './eval'
-
-// hidden attribute directive example
-directive(':hidden', (el, expr) => {
-  let evaluate = parseExpr(expr)
-  return (state) => {
-    let value = evaluate(state)
-    prop(el, 'hidden', value)
-  }
-})
-
-
-// directive(':if', (el, expr, stash) => {
-//   stasj
-//   let stash = {els: [el], clauses:[parse(expr)], holder:new Text}, current = el
-//   ifStash.set(el, stash)
-//   return state => {
-//     let idx = stash.clauses.findIndex(match => match(state))
-//     if (idx >= 0) current.replaceWith(current = els[idx])
-//     else current.replaceWith(current = holder)
-//   }
-// })
-// directive(':else-if', (el, expr) => {
-//   const ifNode = prev('text-with-if')
-//   const stash = ifStash.get(ifNode)
-//   stash.els.push(el)
-//   stash.els.
-//   return
-// })
-// directive(':else', (el, expr) => {
-
-// })
-
-// directive(':each', (instance, part) => {
-//   let evalLoop = part.eval
-//   part.eval = state => {
-//     let [itemId, items] = evalLoop(state), list=[]
-//     // FIXME: cache els instead of recreating. Causes difficulties tracking el children
-//     for (let item of items) list.push(new TemplateInstance(part.template, {...state,[itemId]:item}, processor))
-//     return list
-//   }
-// })

package/src/eval.js

@@ -1,33 +0,0 @@
-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, el) {
-    if (evaluatorMemo[expression]) return evaluatorMemo[expression]
-
-    let AsyncFunction = Object.getPrototypeOf(async function(){}).constructor
-
-    // 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 safeAsyncFunction = () => {
-      try {
-        return new AsyncFunction(['scope'], `let result; with (scope) { result = ${rightSideSafeExpression} }; return result;`)
-      } catch ( error ) {
-        Object.assign( error, { el, expression } )
-        console.warn(`∴ Expression Error: ${error.message}\n\n${ expression ? 'Expression: \"' + expression + '\"\n\n' : '' }`, el)
-        setTimeout(() => { throw error }, 0)
-        return Promise.resolve()
-      }
-    }
-
-    return evaluatorMemo[expression] = safeAsyncFunction()
-}

package/test.js

@@ -1,84 +0,0 @@
-import v from 'value-ref'
-import { signal } from '@preact/signals'
-import test, {is, throws} from 'tst'
-import {tick, time} from 'wait-please'
-import sprae from '../sprae.js'
-import h from 'hyperf'
-
-
-test.only('hidden', async () => {
-  let el = `<div :hidden="hidden"></div>`
-  let params = sprae
-})
-
-test('conditions: short', async () => {
-  let el = h`<p>
-    <span :if="a==1">a</span>
-    <span :else-if="a==2">b</span>
-    <span :else >c</span>
-  </p>`
-
-  const params = sprae(el, { a: 1 })
-
-  is(el.innerHTML, '<span>a</span>')
-  params.a = 2
-  is(el.innerHTML, '<span>b</span>')
-  params.a = 3
-  is(el.innerHTML, '<span>c</span>')
-
-  delete params.a
-})
-
-test('conditions: short with insertions', async () => {
-  let el = h`<p>
-    <span :if="a==1" :text="['1:',a]"></span>
-    <span :else-if="a==2" :text="['2:',a]"></span>
-    <span :else :text="a"></span>
-  </p>`
-
-  const params = templize(el, { a: 1 }, exprProcessor)
-
-  is(el.innerHTML, '<span>1:1</span>')
-  params.a = 2
-  is(el.innerHTML, '<span>2:2</span>')
-  params.a = 3
-  is(el.innerHTML, '<span>3</span>')
-  params.a = 4
-  is(el.innerHTML, '<span>4</span>')
-
-  params.a = 1
-  is(el.innerHTML, '<span>1:1</span>')
-  params.a = 4
-  is(el.innerHTML, '<span>4</span>')
-
-  delete params.a
-})
-
-test.todo('conditions: reactive values', async () => {
-
-})
-
-
-test('loops: short', async () => {
-  // FIXME: in some conspicuous reason jsdom fails to update text nodes somehow
-  let el = h`<p>
-    <span :each="item in items" :text="item"></span>
-  </p>`
-
-  const params = sprae(el, { items: [] })
-
-  is(el.innerHTML, '')
-  params.items = [1,2]
-  is(el.innerHTML, '<span>1</span><span>2</span>')
-  params.items = []
-  is(el.innerHTML, '')
-
-  delete params.items
-})
-
-test.todo('loops: reactive values', async () => {
-})
-
-test.todo('loops: condition within loop')
-
-test.todo('loops: loop within condition')