sprae 0.1.0 → 2.0.0

package/test/test.js

@@ -1,100 +1,173 @@
-import v from 'value-ref'
-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 'sprae'
+import sprae from '../src/index.js'
 import h from 'hyperf'
 
+Object.defineProperty(DocumentFragment.prototype, 'outerHTML', {
+  get() {
+    let s = ''
+    this.childNodes.forEach(n => {
+      s += n.nodeType === 3 ? n.textContent : n.outerHTML != null ? n.outerHTML : ''
+    })
+    return s
+  }
+})
+
+test.skip('autoinit', async () => {
+  is(window.x.innerHTML, '1')
+})
+
 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 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 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 style="top: 1px"></x>`)
+  params.style = {top: '2px'}
+  is(el.outerHTML, `<x style="top: 2px"></x>`)
+})
+
+test('common: class', async () => {
+  let el = h`<x :class="a"></x><y :class="[b, c]"></y><z :class="{b:true, c:d}"></z>`
+  const c = signal('z')
+  let params = sprae(el, {a:'x', b:'y', c, d:false});
+  is(el.outerHTML, `<x class="x"></x><y class="y z"></y><z class="b"></z>`);
+  params.d = true;
+  is(el.outerHTML, `<x class="x"></x><y class="y z"></y><z class="b c"></z>`);
+  c.value = 'w'
+  is(el.outerHTML, `<x class="x"></x><y class="y w"></y><z class="b c"></z>`);
+})
+
+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 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 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:'', xxx:null}"/>`
+  sprae(el)
+  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('value: direct', async () => {
+  let el = h`<input :value="a" />`
+  let state = sprae(el, {a:1})
+  is(el.value, '1')
+  is(el.outerHTML, `<input value="1">`)
+  state.a = 2
+  is(el.value, '2')
+  is(el.outerHTML, `<input value="2">`)
+
+  el.value = 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>')
 })
 
 
@@ -107,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 () => {
@@ -125,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, '')
 })
 
@@ -137,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, '')
 })
@@ -167,17 +282,99 @@ 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, '')
 })
 
+test('on: base', () => {
+  let el = h`<div :on="{click(e){log.push('click')},x}"></div>`
+  let log = signal([])
+  let params = sprae(el, {x(){log.value.push('x')}, log})
+
+  is(el.outerHTML, `<div></div>`);
+  el.dispatchEvent(new window.Event('click'));
+  is(log.value, ['click'])
+  el.dispatchEvent(new window.Event('x'));
+  is(log.value, ['click','x'])
+
+  params.x = function(){log.value.push('xx')}
+  el.dispatchEvent(new window.Event('x'));
+  is(log.value, ['click','x','xx']);
+
+  params.x = null;
+  el.dispatchEvent(new window.Event('x'));
+  is(log.value, ['click','x','xx']);
+})
+
+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>barqux</y>`)
+  state.baz = 'quux'
+  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 = 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: 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>`
+  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 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>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/hidden.js

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

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

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

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