sprae 1.0.0 → 2.0.0

package/test/test.js

@@ -1,4 +1,5 @@
-import { signal } from '@preact/signals'
+// import { signal } from 'usignal'
+import { signal } from '@preact/signals-core'
 import test, {is, any, throws} from 'tst'
 import {tick, time} from 'wait-please'
 import sprae from '../src/index.js'
@@ -21,34 +22,34 @@ test.skip('autoinit', async () => {
 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>`)
+  is(el.outerHTML, `<div hidden=""></div>`)
   params.hidden = false
-  is(el.outerHTML, `<div class="∴hidden"></div>`)
+  is(el.outerHTML, `<div></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>`)
+  is(el.outerHTML, `<div hidden=""></div>`)
   hidden.value = false
-  is(el.outerHTML, `<div class="∴hidden"></div>`)
+  is(el.outerHTML, `<div></div>`)
 })
 
 test('common: reactive', async () => {
   let el = h`<label :for="name" :text="name" ></label><input :id="name" :name="name" :type="name" :disabled="!name"/><a :href="url"></a><img :src="url"/>`
   let params = sprae(el, {name:'text', url:'//google.com'})
-  is(el.outerHTML, `<label class="∴text ∴for" for="text">text</label><input class="∴id ∴name ∴type ∴disabled" id="text" name="text" type="text"><a class="∴href" href="//google.com"></a><img class="∴src" src="//google.com">`)
+  is(el.outerHTML, `<label for="text">text</label><input id="text" name="text" type="text"><a href="//google.com"></a><img src="//google.com">`)
   params.name = 'email'
-  is(el.outerHTML, `<label class="∴text ∴for" for="email">email</label><input class="∴id ∴name ∴type ∴disabled" id="email" name="email" type="email"><a class="∴href" href="//google.com"></a><img class="∴src" src="//google.com">`)
+  is(el.outerHTML, `<label for="email">email</label><input id="email" name="email" type="email"><a href="//google.com"></a><img src="//google.com">`)
 })
 
 test('common: style', async () => {
   let el = h`<x :style="style"></x>`
   let params = sprae(el, {style: "top: 1px"})
-  is(el.outerHTML, `<x class="∴style" style="top: 1px"></x>`)
+  is(el.outerHTML, `<x style="top: 1px"></x>`)
   params.style = {top: '2px'}
-  is(el.outerHTML, `<x class="∴style" style="top: 2px"></x>`)
+  is(el.outerHTML, `<x style="top: 2px"></x>`)
 })
 
 test('common: class', async () => {
@@ -62,111 +63,111 @@ test('common: class', async () => {
   is(el.outerHTML, `<x class="x"></x><y class="y w"></y><z class="b c"></z>`);
 })
 
-test('props: base', async () => {
-  let el = h`<input :prop="{for:1, title:2, help:3, type:4, placeholder: 5}"/>`
+test('spread props: base', async () => {
+  let el = h`<input :id="0" :="{for:1, title:2, help:3, type:4, placeholder: 5, value: 6}" :value="7"/>`
   let params = sprae(el)
-  is(el.outerHTML, `<input class="∴prop" for="1" title="2" help="3" type="4" placeholder="5">`)
+  is(el.outerHTML, `<input id="0" for="1" title="2" help="3" type="4" placeholder="5" value="7">`)
 })
 
 test('data: base', async () => {
   let el = h`<input :data="{a:1, fooBar:2}"/>`
   let params = sprae(el)
-  is(el.outerHTML, `<input class="∴data" data-a="1" data-foo-bar="2">`)
+  is(el.outerHTML, `<input data-a="1" data-foo-bar="2">`)
 })
 
 test('aria: base', async () => {
-  let el = h`<input type="text" id="jokes" role="combobox" :aria="{controls:'joketypes', autocomplete:'list', expanded:false, activeOption:'item1', activedescendant:''}"/>`
+  let el = h`<input type="text" id="jokes" role="combobox" :aria="{controls:'joketypes', autocomplete:'list', expanded:false, activeOption:'item1', activedescendant:'', xxx:null}"/>`
   sprae(el)
-  is(el.outerHTML, `<input type="text" id="jokes" role="combobox" class="∴aria" aria-controls="joketypes" aria-autocomplete="list" aria-expanded="false" aria-active-option="item1" aria-activedescendant="">`)
+  is(el.outerHTML, `<input type="text" id="jokes" role="combobox" aria-controls="joketypes" aria-autocomplete="list" aria-expanded="false" aria-active-option="item1" aria-activedescendant="">`)
 })
 
-test('input: direct', async () => {
+test('value: direct', async () => {
   let el = h`<input :value="a" />`
   let state = sprae(el, {a:1})
   is(el.value, '1')
-  is(el.outerHTML, `<input class="∴value" value="1">`)
+  is(el.outerHTML, `<input value="1">`)
   state.a = 2
   is(el.value, '2')
-  is(el.outerHTML, `<input class="∴value" value="2">`)
+  is(el.outerHTML, `<input value="2">`)
 
   el.value = 3
-  el.dispatchEvent(new window.Event('change'))
-  is(state.a, '3')
+  // el.dispatchEvent(new window.Event('change'))
+  // is(state.a, '3')
 })
 
 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>`)
+  is(el.outerHTML, `<div>abc</div>`)
   params.text = null
-  is(el.outerHTML, `<div class="∴text"></div>`)
+  is(el.outerHTML, `<div></div>`)
 })
 
 test('conditions: base', async () => {
   let el = h`<p>
     <span :if="a==1">a</span>
-    <span :else-if="a==2">b</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>')
+  is(el.innerHTML, '<span>a</span>')
   params.a = 2
-  is(el.innerHTML, '<span class="∴else-if">b</span>')
+  is(el.innerHTML, '<span>b</span>')
   params.a = 3
-  is(el.innerHTML, '<span class="∴else">c</span>')
-
-  delete params.a
+  is(el.innerHTML, '<span>c</span>')
+  params.a = null
+  is(el.innerHTML, '<span>c</span>')
 })
 
 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 :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>')
+  is(el.innerHTML, '<span>1:1</span>')
   params.a = 2
-  is(el.innerHTML, '<span class="∴text ∴else-if">2:2</span>')
+  is(el.innerHTML, '<span>2:2</span>')
   params.a = 3
-  is(el.innerHTML, '<span class="∴text ∴else">3</span>')
+  is(el.innerHTML, '<span>3</span>')
   params.a = 4
-  is(el.innerHTML, '<span class="∴text ∴else">4</span>')
+  is(el.innerHTML, '<span>4</span>')
 
   params.a = 1
-  is(el.innerHTML, '<span class="∴text ∴if">1:1</span>')
+  is(el.innerHTML, '<span>1:1</span>')
   params.a = 4
-  is(el.innerHTML, '<span class="∴text ∴else">4</span>')
+  is(el.innerHTML, '<span>4</span>')
 
-  delete params.a
+  params.a = null
 })
 
 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 :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>')
+  is(el.innerHTML, '<span>1:1</span>')
   a.value = 2
-  is(el.innerHTML, '<span class="∴text ∴else-if">2:2</span>')
+  is(el.innerHTML, '<span>2:2</span>')
   a.value = 3
-  is(el.innerHTML, '<span class="∴text ∴else">3</span>')
+  is(el.innerHTML, '<span>3</span>')
   a.value = 4
-  is(el.innerHTML, '<span class="∴text ∴else">4</span>')
+  is(el.innerHTML, '<span>4</span>')
 
   a.value = 1
-  is(el.innerHTML, '<span class="∴text ∴if">1:1</span>')
+  is(el.innerHTML, '<span>1:1</span>')
   a.value = 4
-  is(el.innerHTML, '<span class="∴text ∴else">4</span>')
+  is(el.innerHTML, '<span>4</span>')
 })
 
 
@@ -179,12 +180,34 @@ test('each: base', async () => {
   const params = sprae(el, { b: [] })
 
   is(el.innerHTML, '')
+  console.log('set 1,2')
   params.b = [1,2]
-  is(el.innerHTML, '<span class="∴each ∴text">1</span><span class="∴each ∴text">2</span>')
+  is(el.innerHTML, '<span>1</span><span>2</span>')
   params.b = []
   is(el.innerHTML, '')
-  delete params.b
+  params.b = null
+  is(el.innerHTML, '')
+})
+
+test('each: loop within loop', async () => {
+  let el = h`<p>
+    <x :each="b in c"><y :each="a in b" :text="a"></y></x>
+  </p>`
+
+  const params = sprae(el, { c: [[1,2], [3,4]] })
+
+  is(el.innerHTML, '<x><y>1</y><y>2</y></x><x><y>3</y><y>4</y></x>')
+  // console.log('set 1,2')
+  params.c = [[5,6], [3,4]]
+  is(el.innerHTML, '<x><y>5</y><y>6</y></x><x><y>3</y><y>4</y></x>')
+  // params.c[1] = [7,8]
+  params.c = [params.c[0], [7,8]]
+  is(el.innerHTML, '<x><y>5</y><y>6</y></x><x><y>7</y><y>8</y></x>')
+  // is(el.innerHTML, '<span>1</span><span>2</span>')
+  params.c = []
   is(el.innerHTML, '')
+  // params.b = null
+  // is(el.innerHTML, '')
 })
 
 test('each: reactive values', async () => {
@@ -197,10 +220,10 @@ test('each: reactive values', async () => {
 
   is(el.innerHTML, '')
   b.value = [1,2]
-  is(el.innerHTML, '<span class="∴each ∴text">1</span><span class="∴each ∴text">2</span>')
+  is(el.innerHTML, '<span>1</span><span>2</span>')
   b.value = []
   is(el.innerHTML, '')
-  delete params.b
+  params.b = null
   is(el.innerHTML, '')
 })
 
@@ -209,28 +232,48 @@ test('each: loop with condition', async () => {
   <span :each="a in b" :text="a" :if="c"></span>
   </p>`
 
-  const params = sprae(el, { b: [1,2], c:false })
+  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>')
+  is(el.innerHTML, '<span>1</span><span>2</span>')
+  params.b = [1]
+  is(el.innerHTML, '<span>1</span>')
+  params.b = null
+  is(el.innerHTML, '')
+})
+
+test('each: condition with loop', async () => {
+  let el = h`<p>
+  <span :if="c" :each="a in b" :text="a"></span>
+  <span :else :text="c"></span>
+  </p>`
+
+  const params = sprae(el, { b: [1,2], c: false })
+
+  is(el.innerHTML, '<span>false</span>')
+  params.c = true
+  is(el.innerHTML, '<span>1</span><span>2</span>')
   params.b = [1]
-  is(el.innerHTML, '<span class="∴each ∴text ∴if">1</span>')
-  delete params.b
+  is(el.innerHTML, '<span>1</span>')
+  params.b = null
   is(el.innerHTML, '')
+  console.log('c=false')
+  params.c = false
+  is(el.innerHTML, '<span>false</span>')
 })
 
 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>
+    <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>')
+  is(el.innerHTML, '<x><y>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>')
+  is(el.innerHTML, '<x><y>-1</y><y>-2</y></x>')
   params.a = 0
   is(el.innerHTML, '')
 })
@@ -239,17 +282,17 @@ 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 :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>')
+  is(el.innerHTML, '<x><y>1:1</y></x><x><y>2:2</y></x><x><y>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, '<x><y>2:2</y></x>')
+  params.b = null
   is(el.innerHTML, '')
 })
 
@@ -258,7 +301,7 @@ test('on: base', () => {
   let log = signal([])
   let params = sprae(el, {x(){log.value.push('x')}, log})
 
-  is(el.outerHTML, `<div class="∴on"></div>`);
+  is(el.outerHTML, `<div></div>`);
   el.dispatchEvent(new window.Event('click'));
   is(log.value, ['click'])
   el.dispatchEvent(new window.Event('x'));
@@ -268,7 +311,7 @@ test('on: base', () => {
   el.dispatchEvent(new window.Event('x'));
   is(log.value, ['click','x','xx']);
 
-  delete params.x;
+  params.x = null;
   el.dispatchEvent(new window.Event('x'));
   is(log.value, ['click','x','xx']);
 })
@@ -277,27 +320,61 @@ test('with: inline', () => {
   let el = h`<x :with="{foo:'bar', baz}"><y :text="foo + baz"></y></x>`
   let state = sprae(el, {baz: 'qux'})
   // FIXME: this doesn't inherit root scope baz property and instead uses hard-initialized one
-  is(el.innerHTML, `<y class="∴text">barqux</y>`)
+  is(el.innerHTML, `<y>barqux</y>`)
   state.baz = 'quux'
-  is(el.innerHTML, `<y class="∴text">barquux</y>`)
+  is(el.innerHTML, `<y>barquux</y>`)
+})
+test('with: inline reactive', () => {
+  let el = h`<x :with="{foo:'bar', baz}"><y :text="foo + baz"></y></x>`
+  let baz = signal('qux')
+  let state = sprae(el, {baz})
+  // FIXME: this doesn't inherit root scope baz property and instead uses hard-initialized one
+  is(el.innerHTML, `<y>barqux</y>`)
+  baz.value = 'quux'
+  is(el.innerHTML, `<y>barquux</y>`)
 })
 test('with: data', () => {
   let el = h`<x :with="x"><y :text="foo"></y></x>`
-  let [state, update] = sprae(el, {x:{foo:'bar'}})
-  is(el.innerHTML, `<y class="∴text">bar</y>`)
-  update({x:{foo:'baz'}})
-  is(el.innerHTML, `<y class="∴text">baz</y>`)
+  let state = sprae(el, {x:{foo:'bar'}})
+  is(el.innerHTML, `<y>bar</y>`)
+  console.log('update')
+  Object.assign(state, {x:{foo:'baz'}})
+  is(el.innerHTML, `<y>baz</y>`)
 })
-test('with: inheritance', () => {
+test('with: transparency', () => {
   // NOTE: y:text initializes through directive, not through parent
   // therefore by default :text uses parent's state, not defined by element itself
   let el = h`<x :with="{foo:'foo'}"><y :with="b" :text="foo+bar"></y></x>`
-  sprae(el, {b:{bar:'bar'}})
-  is(el.innerHTML, `<y class="∴with ∴text">foobar</y>`)
+  let params = sprae(el, {b:{bar:'bar'}})
+  is(el.innerHTML, `<y>foobar</y>`)
+  params.b.bar = 'baz'
+  is(el.innerHTML, `<y>foobaz</y>`)
 })
-test('with: reactive inheritance', () => {
+test('with: reactive transparency', () => {
   let el = h`<x :with="{foo:1}"><y :with="b.c" :text="foo+bar"></y></x>`
   const bar = signal('2')
   sprae(el, {b:{c:{bar}}})
-  is(el.innerHTML, `<y class="∴with ∴text">12</y>`)
+  is(el.innerHTML, `<y>12</y>`)
+  bar.value = '3'
+  is(el.innerHTML, `<y>13</y>`)
+})
+test('with: writes to state', () => {
+  let a = h`<x :with="{a:1}"><y :on="{x(){a++}}" :text="a"></y></x>`
+  sprae(a)
+  is(a.innerHTML, `<y>1</y>`)
+  a.firstChild.dispatchEvent(new window.Event('x'))
+  is(a.innerHTML, `<y>2</y>`)
+  a.firstChild.dispatchEvent(new window.Event('x'))
+  is(a.innerHTML, `<y>3</y>`)
+})
+
+test('reactives', async () => {
+  let a = new Promise((ok) => setTimeout(() => ok(2), 10))
+
+  let el = h`<x :text="a">1</x>`
+  sprae(el, {a})
+  is(el.outerHTML, `<x></x>`)
+
+  await time(20)
+  is(el.outerHTML, `<x>2</x>`)
 })

package/src/directives/aria.js

@@ -1,10 +0,0 @@
-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

@@ -1,15 +0,0 @@
-// 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

@@ -1,10 +0,0 @@
-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/if.js

@@ -1,31 +0,0 @@
-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

@@ -1,11 +0,0 @@
-// 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

@@ -1,12 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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)
-  }
-})
-