sprae 3.0.1 → 4.0.0

package/test/dom.js

@@ -25,6 +25,7 @@ test('hidden: core', async () => {
   let params = sprae(el, {hidden:true})
   is(el.outerHTML, `<div hidden=""></div>`)
   params.hidden = false
+  await tick()
   is(el.outerHTML, `<div></div>`)
 })
 
@@ -42,6 +43,7 @@ test('common: reactive', async () => {
   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'
+  await tick()
   is(el.outerHTML, `<label for="email">email</label><input id="email" name="email" type="email"><a href="//google.com"></a><img src="//google.com">`)
 })
 
@@ -76,17 +78,22 @@ test('style', async () => {
   let el = h`<x style="left: 1px" :style="style"></x>`
   let params = sprae(el, {style: "top: 1px"})
   is(el.outerHTML, `<x style="left: 1px; top: 1px"></x>`)
+
   params.style = {top: '2px'}
+  await tick()
   is(el.outerHTML, `<x style="left: 1px; top: 2px;"></x>`)
 
   params.style = {'--x': 123}
+  await tick()
   is(el.style.getPropertyValue('--x'), '123')
 
   params.style = {top:'1px', bottom:'2px'}
+  await tick()
   is(el.outerHTML, `<x style="left: 1px; top: 1px; bottom: 2px;"></x>`)
 
   params.style = {top:'2px', bottom: null}
   // FIXME
+  await tick()
   is(el.outerHTML, `<x style="left: 1px; top: 2px;"></x>`)
 })
 
@@ -96,6 +103,7 @@ test('class', async () => {
   let params = sprae(el, {a:'x', b:'y', c, d:false});
   is(el.outerHTML, `<x class="base x"></x><y class="y z"></y><z class="b"></z>`);
   params.d = true;
+  await tick()
   is(el.outerHTML, `<x class="base x"></x><y class="y z"></y><z class="b c"></z>`);
   // c.value = 'w'
   // is(el.outerHTML, `<x class="base x"></x><y class="y w"></y><z class="b c"></z>`);
@@ -126,6 +134,7 @@ test('props: calculation', async () => {
   let state = sprae(el, {x:3});
   is(el.outerHTML, `<x x="012"></x>`)
   state.x = 4
+  await tick()
   is(el.outerHTML, `<x x="0123"></x>`)
 })
 
@@ -138,13 +147,13 @@ test.todo('props: semicols in expression', async () => {
 })
 
 
-test('data: base', async () => {
+test.skip('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 () => {
+test.skip('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="">`)
@@ -156,6 +165,7 @@ test('value: direct', async () => {
   is(el.value, '1')
   is(el.outerHTML, `<input value="1">`)
   state.a = 2
+  await tick()
   is(el.value, '2')
   is(el.outerHTML, `<input value="2">`)
 
@@ -182,6 +192,7 @@ test('text: core', async () => {
   let params = sprae(el, {text:'abc'})
   is(el.outerHTML, `<div>abc</div>`)
   params.text = null
+  await tick()
   is(el.outerHTML, `<div></div>`)
 })
 
@@ -196,10 +207,13 @@ test('if: base', async () => {
 
   is(el.innerHTML, '<span>a</span>')
   params.a = 2
+  await tick()
   is(el.innerHTML, '<span>b</span>')
   params.a = 3
+  await tick()
   is(el.innerHTML, '<span>c</span>')
   params.a = null
+  await tick()
   is(el.innerHTML, '<span>c</span>')
 })
 
@@ -214,15 +228,20 @@ test('if: short with insertions', async () => {
 
   is(el.innerHTML, '<span>1:1</span>')
   params.a = 2
+  await tick()
   is(el.innerHTML, '<span>2:2</span>')
   params.a = 3
+  await tick()
   is(el.innerHTML, '<span>3</span>')
   params.a = 4
+  await tick()
   is(el.innerHTML, '<span>4</span>')
 
   params.a = 1
+  await tick()
   is(el.innerHTML, '<span>1:1</span>')
   params.a = 4
+  await tick()
   is(el.innerHTML, '<span>4</span>')
 
   params.a = null
@@ -258,15 +277,16 @@ test('if: (#3) subsequent content is not abandoned', async () => {
   is(x.outerHTML, `<x><z>123</z></x>`)
 })
 
-test('if: + :with doesnt prevent secondary effects from happening', () => {
-  let el = h`<div><x :if="x" :with="{}" :text="x"></x></div>`
+test('if: + :scope doesnt prevent secondary effects from happening', async () => {
+  let el = h`<div><x :if="x" :scope="{}" :text="x"></x></div>`
   let state = sprae(el, {x:''})
   is(el.innerHTML, ``)
   state.x = '123'
+  await tick()
   is(el.innerHTML, `<x>123</x>`)
 
   // NOTE: we ignore this case
-  // let el2 = h`<div><x :if="x" :with="{x:cond}" :text="x"></x></div>`
+  // let el2 = h`<div><x :if="x" :scope="{x:cond}" :text="x"></x></div>`
   // let state2 = sprae(el, {cond:''})
   // is(el2.innerHTML, ``)
   // state2.cond = '123'
@@ -284,10 +304,13 @@ test('each: array', async () => {
   is(el.innerHTML, '')
   console.log('set 1,2')
   params.b = [1,2]
+  await tick()
   is(el.innerHTML, '<span>1</span><span>2</span>')
   params.b = []
+  await tick()
   is(el.innerHTML, '')
   params.b = null
+  await tick()
   is(el.innerHTML, '')
 })
 
@@ -302,10 +325,13 @@ test('each: object', async () => {
   is(el.innerHTML, '')
   console.log('set 1,2')
   params.b = { x:1, y:2 }
+  await tick()
   is(el.innerHTML, '<span>x,1</span><span>y,2</span>')
   params.b = []
+  await tick()
   is(el.innerHTML, '')
   params.b = null
+  await tick()
   is(el.innerHTML, '')
 })
 
@@ -318,12 +344,15 @@ test('each: loop within loop', async () => {
 
   is(el.innerHTML, '<x><y>1</y><y>2</y></x><x><y>3</y><y>4</y></x>')
   params.c = [[5,6], [3,4]]
+  await tick()
   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]]
+  await tick()
   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 = []
+  await tick()
   is(el.innerHTML, '')
   // params.b = null
   // is(el.innerHTML, '')
@@ -358,10 +387,13 @@ test('each: loop with condition', async () => {
 
   is(el.innerHTML, '')
   params.c = true
+  await tick()
   is(el.innerHTML, '<span>1</span><span>2</span>')
   params.b = [1]
+  await tick()
   is(el.innerHTML, '<span>1</span>')
   params.b = null
+  await tick()
   is(el.innerHTML, '')
 })
 
@@ -375,13 +407,17 @@ test('each: condition with loop', async () => {
 
   is(el.innerHTML, '<span>false</span>')
   params.c = true
+  await tick()
   is(el.innerHTML, '<span>1</span><span>2</span>')
   params.b = [1]
+  await tick()
   is(el.innerHTML, '<span>1</span>')
   params.b = null
+  await tick()
   is(el.innerHTML, '')
   console.log('c=false')
   params.c = false
+  await tick()
   is(el.innerHTML, '<span>false</span>')
 })
 
@@ -395,8 +431,10 @@ test('each: loop within condition', async () => {
 
   is(el.innerHTML, '<x><y>1</y></x>')
   params.a = 2
+  await tick()
   is(el.innerHTML, '<x><y>-1</y><y>-2</y></x>')
   params.a = 0
+  await tick()
   is(el.innerHTML, '')
 })
 
@@ -413,14 +451,16 @@ test('each: condition within loop', async () => {
 
   is(el.innerHTML, '<x><y>1:1</y></x><x><y>2:2</y></x><x><y>3</y></x>')
   params.b = [2]
+  await tick()
   is(el.innerHTML, '<x><y>2:2</y></x>')
   params.b = null
+  await tick()
   is(el.innerHTML, '')
 })
 
 test('each: next items have own "this", not single one', async () => {
   // FIXME: let el = h`<x :each="x in 3"></x>`
-  let el = h`<div><x :each="x in 3" :data="{x}" :x="log.push(x, this.dataset.x)"></x></div>`
+  let el = h`<div><x :each="x in 3" :data-x="x" :x="log.push(x, this.dataset.x)"></x></div>`
   let log = []
   let state = sprae(el, {log})
   is(state.log, [1,'1',2,'2',3,'3'])
@@ -433,9 +473,11 @@ test('each: unkeyed', async () => {
   is(el.textContent, '123')
   // let first = el.firstChild
   state.xs = [1,3,2]
+  await tick()
   // is(el.firstChild, first)
   is(el.textContent, '132')
   state.xs = [3,3,3]
+  await tick()
   is(el.textContent, '333')
   // is(el.firstChild, first)
 })
@@ -448,9 +490,11 @@ test('each: keyed', async () => {
   is(el.textContent, '123')
   let first = el.firstChild
   state.xs = [1,3,2]
+  await tick()
   is(el.firstChild, first)
   is(el.textContent, '132')
   state.xs = [3,3,3]
+  await tick()
   is(el.textContent, '3')
   // is(el.firstChild, first)
 })
@@ -465,18 +509,21 @@ test('each: unmounted elements remove listeners', async () => {
   // let's hope they get removed without memory leaks :')
 })
 
-test('each: internal children get updated by state update, also: update by running again', () => {
+test('each: internal children get updated by state update, also: update by running again', async () => {
   let el = h`<><x :each="item, idx in items" :text="item" :key="idx"></x></>`
   let state = sprae(el, { items: [1,2,3] })
   is(el.textContent, '123')
   state.items = [2, 2, 3]
+  await tick()
   is(el.textContent, '223')
   state = sprae(el, { items: [0,2,3] })
+  await tick()
   is(el.textContent, '023')
   // NOTE: this doesn't update items, since they're new array
   console.log('set items')
   state.items[0] = 1
-  state.items = [...state.items]
+  // state.items = [...state.items]
+  await tick()
   is(el.textContent, '123')
 })
 
@@ -499,7 +546,7 @@ test('each: key-based caching is in-sync with direct elements', () => {
   is(el.outerHTML, el2.outerHTML)
 })
 
-test('on: base', () => {
+test('on: base', async () => {
   let el = h`<div :on="{click(e){log.push('click')}, x}"></div>`
   let log = []
   let params = sprae(el, {x(){log.push('x')}, log})
@@ -511,11 +558,13 @@ test('on: base', () => {
   is(log, ['click','x'])
 
   params.x = function(){log.push('xx')}
+  await tick()
   el.dispatchEvent(new window.Event('x'));
   is(log, ['click','x','xx']);
 
   console.log('make null')
   params.x = null;
+  await tick()
   el.dispatchEvent(new window.Event('x'));
   is(log, ['click','x','xx']);
 })
@@ -632,7 +681,7 @@ test('on: parallel chains', e => {
   is(state.log, ['x','x','y','y','z','z','x']);
 })
 
-test('on: state changes between chain of events', e => {
+test('on: state changes between chain of events', async e => {
   let el = h`<x :on="{'x..y':fn}"></x>`
   let log = []
   let state = sprae(el, {log, fn: () => (log.push('x1'), ()=>log.push('y1'))})
@@ -641,6 +690,7 @@ test('on: state changes between chain of events', e => {
   is(log, ['x1'])
   console.log('update fn')
   state.fn = () => (log.push('x2'), () => log.push('y2'))
+  await tick()
   is(log, ['x1'])
   // console.log('xx')
   // NOTE: state update registers new chain listener before finishing prev chain
@@ -808,16 +858,17 @@ test('on: modifiers chain', async e => {
   is(state.log,['x', 'x'])
 })
 
-test('with: inline', () => {
-  let el = h`<x :with="{foo:'bar'}"><y :text="foo + baz"></y></x>`
+test('with: inline', async () => {
+  let el = h`<x :scope="{foo:'bar'}"><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'
+  await tick()
   is(el.innerHTML, `<y>barquux</y>`)
 })
 test.skip('with: inline reactive', () => {
-  let el = h`<x :with="{foo:'bar'}"><y :text="foo + baz"></y></x>`
+  let el = h`<x :scope="{foo:'bar'}"><y :text="foo + baz"></y></x>`
   let baz = signal('qux')
   sprae(el, {baz})
   // FIXME: this doesn't inherit root scope baz property and instead uses hard-initialized one
@@ -825,48 +876,53 @@ test.skip('with: inline reactive', () => {
   baz.value = 'quux'
   is(el.innerHTML, `<y>barquux</y>`)
 })
-test('with: data', () => {
-  let el = h`<x :with="x"><y :text="foo"></y></x>`
+test('with: data', async () => {
+  let el = h`<x :scope="x"><y :text="foo"></y></x>`
   let state = sprae(el, {x: {foo:'bar'}})
   is(el.innerHTML, `<y>bar</y>`)
   console.log('update', state.x)
   state.x.foo = 'baz'
+  await tick()
   // Object.assign(state, {x:{foo:'baz'}})
   is(el.innerHTML, `<y>baz</y>`)
 })
-test('with: transparency', () => {
+test('with: transparency', async () => {
   // 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 el = h`<x :scope="{foo:'foo'}"><y :scope="b" :text="foo+bar"></y></x>`
   let params = sprae(el, {b:{bar:'bar'}})
   is(el.innerHTML, `<y>foobar</y>`)
   params.b.bar = 'baz'
+  await tick()
   is(el.innerHTML, `<y>foobaz</y>`)
 })
 test.skip('with: reactive transparency', () => {
-  let el = h`<x :with="{foo:1}"><y :with="b.c" :text="foo+bar"></y></x>`
+  let el = h`<x :scope="{foo:1}"><y :scope="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>`
+test('with: writes to state', async () => {
+  let a = h`<x :scope="{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'))
+  await tick()
   is(a.innerHTML, `<y>2</y>`)
   a.firstChild.dispatchEvent(new window.Event('x'))
+  await tick()
   is(a.innerHTML, `<y>3</y>`)
 })
 
-test('ref: base', () => {
+test('ref: base', async () => {
   let a = h`<a :ref="a" :init="log.push(a), null" :text="b"></a>`
   let state = sprae(a, {log:[], b:1})
   is(state.log[0], a)
   is(a.outerHTML, `<a>1</a>`)
   state.b = 2
+  await tick()
   is(a.outerHTML, `<a>2</a>`)
   is(state.a, a, 'Exposes to the state');
 })
@@ -903,7 +959,7 @@ test(':: scope refers to current element', async () => {
 
 test(':: scope directives must come first', async () => {
   // NOTE: we init attributes in order of definition
-  let a = h`<x :text="y" :with="{y:1}" :ref="x"></x>`
+  let a = h`<x :text="y" :scope="{y:1}" :ref="x"></x>`
   sprae(a, {})
   is(a.outerHTML, `<x>1</x>`)
 })

package/test/index.html

@@ -2,6 +2,11 @@
 <meta charset=utf-8>
 <title>Test</title>
 
+<script defer src="../sprae.auto.js"></script>
+<div :scope="{data:1}">
+  <span :text="data"></span>
+</div>
+
 <script async src="../node_modules/es-module-shims/dist/es-module-shims.js"></script>
 <script type="importmap">
 {
@@ -27,4 +32,4 @@
 }
 </script>
 
-<script src="./test.js" type="module"></script>
+<script src="./test.js" type="module"></script>

package/test/state.js

@@ -1,9 +1,10 @@
-import {state, fx, batch} from '../src/state.js'
+import {state, fx} from '../src/state.js'
 import t, {is, ok} from 'tst'
 import signalStruct from 'signal-struct'
 import { effect } from '@preact/signals-core'
+import {tick} from 'wait-please'
 
-t('state: basic', t => {
+t('state: basic', async t => {
   let s = state({x:0, y:1})
 
   let xy; fx(() => xy = s.x + s.y)
@@ -12,12 +13,14 @@ t('state: basic', t => {
   s.x = 2
   console.log('set 3')
   s.y = 3
+  await tick()
   is(xy, 5, 'Eq')
   s.y = 4
+  await tick()
   is(xy, 6, 'Eq')
 })
 
-t('state: signal-struct basics', t => {
+t('state: signal-struct basics', async t => {
   let s = state({
     x: 0,
     y: 1,
@@ -39,8 +42,10 @@ t('state: signal-struct basics', t => {
   is(xy, 1)
   s.x = 2
   s.y = 3
+  await tick()
   is(xy, 5)
   s.y = 4
+  await tick()
   is(xy, 6)
 
   // getters are computed
@@ -51,7 +56,7 @@ t('state: signal-struct basics', t => {
   is(s.xy, 6)
 })
 
-t('state: deep props', () => {
+t('state: deep props', async () => {
   let s = state({
     z: { r: 2, i: 3 }
   })
@@ -60,17 +65,20 @@ t('state: deep props', () => {
   let len; fx(() => (len = (s.z.r**2 + s.z.i**2)**0.5))
   s.z.r = 3
   s.z.i = 4
+  await tick()
   is(len, 5)
   s.z.r = 4
   s.z.i = 3
+  await tick()
   is(len, 5)
 
   // updating internal objects/arrays turns them into signals too
   s.z = { r: 5, i: 12}
+  await tick()
   is(len, 13)
 })
 
-t('state: array', () => {
+t('state: array', async () => {
   let s = state({
     w: [1,2]
   })
@@ -79,23 +87,27 @@ t('state: array', () => {
   let mult; fx(() => mult = s.w?.[0] * s.w?.[1] || 0)
   is(mult, 2)
   s.w = [3,4]
+  await tick()
   is(mult,12)
 
   // nullifying is fine
   s.w = null
+  await tick()
   is(mult, 0)
 
   // delete is fine
   delete s.w
 
+  await tick()
   is(mult, 0)
 
   console.log('set w')
   s.w = [1,2]
+  await tick()
   is(mult, 2)
 })
 
-t('state: bulk-update', () => {
+t('state: bulk-update', async () => {
   let s = state({
     x: 0,
     y: 1,
@@ -114,6 +126,7 @@ t('state: bulk-update', () => {
   // let [signals, update] = s
   // update({ x: 1, y: 1, z: { r: 3, i: 4 } })
   Object.assign(s, { x: 1, y: 1, z: { r: 3, i: 4 } })
+  await tick()
   is(xy, 2)
   is(len, 5, 'len after update')
 })
@@ -178,31 +191,37 @@ t('state: inheritance', () => {
   // })
 })
 
-t('state: inheritance: updating values in chain', () => {
+t('state: inheritance: updating values in chain', async () => {
   let s1 = {x:1}
   let s = state(s1, {y:2})
-  console.group('fx')
+  // console.group('fx')
   let xy = 0; fx(() => xy = s.x + s.y);
-  console.groupEnd('fx')
+  // console.groupEnd('fx')
+  await tick()
   is(xy, 3)
   s.x++
+  await tick()
   is(xy, 4)
   console.log('y++')
   s.y++
+  await tick()
   is(xy, 5)
 })
 
-t('state: array items', () => {
+t('state: array items', async () => {
   // arrays get each item converted to signal struct
   let s5 = state({list: [{x:1}, {x:2}]})
   let sum; fx(()=> sum = s5.list.reduce((sum, item)=>item.x + sum, 0))
   is(sum, 3)
   s5.list[0].x = 2
+  await tick()
   is(sum, 4)
   console.log('set array value')
   s5.list = [{x:3}, {x:3}]
+  await tick()
   is(sum, 6)
   s5.list = [{x:3}, {x:3}, {x:4}]
+  await tick()
   is(sum, 10)
 })
 
@@ -214,14 +233,17 @@ t('state: arrays retain reference', () => {
   is(list,[1,4,3])
 })
 
-t('state: direct list', () => {
+t('state: direct list', async () => {
   // works with arrays as well
   let list = state([{x:1}, {x:2}])
   let sum; fx(()=> sum = list.reduce((sum, item)=>item.x + sum, 0))
   is(sum, 3)
   list[0].x = 2
+  is(list[0].x, 2)
+  await tick()
   is(sum, 4)
   list.splice(0, 2, {x:3}, {x:3})
+  await tick()
   console.log(list)
   is(sum, 6)
 })
@@ -240,7 +262,7 @@ t('state: circular?', () => {
   is (a, [1, 2])
 })
 
-t('state: batch', () => {
+t.skip('state: batch', () => {
   let s = state({x:1, y:2})
   let log = []; fx(() => log.push(s.x + s.y))
   is(log, [3])

package/todo.md

@@ -8,7 +8,7 @@
 * [x] combinations: :else :if
 * [x] :each :if, :if :each
 * [x] :each :each
-* [x] :with must be able to write state value as well
+* [x] :scope must be able to write state value as well
 * [x] docs: give example to each directive
 * [x] initialize per-element: <x :each><y :if></y><x> - tree-dependent (:each comes first).
 * [x] generalize common attributes :prop="xyz"
@@ -22,7 +22,7 @@
 * [x] bulk events :ona:onb
 * [x] multiprop setter :a:b="c"
 * [x] make `this` in expression an element
-  * ~~[x] replace :ref with :with="this as x"~~
+  * ~~[x] replace :ref with :scope="this as x"~~
 * [x] :ref creates instance in current state, not creates a new state
   * [x] to avoid extending signal-struct, we must collect state data before, and call updates after for extended state
 * [x] optimization: replace element-props with direct (better) setters
@@ -31,11 +31,11 @@
 * ~~[x] report usignal problem~~ author is not really interested
 * [x] `this` doesn't refer to element/scope in event handlers
 * [x] :text="" empty values shouldn't throw
-* [x] implement :with
+* [x] implement :scope
 * [x] update :value without losing focus / position
 * ~~[x] run tiredown if element got removed from condition or loop (free memory)~~ no need just make sure no refs to elements stored
 * [x] `sprae(el, newState)` can update element's state directly (as batch!?) -> must be tested against repeats in directives
-* [x] :if :ref, :if :with -> context setters must come first always
+* [x] :if :ref, :if :scope -> context setters must come first always
 * [x] :style="{'--x':value}"
 * [x] :onkeydown.ctrl-alt-D
 * [ ] frameworks benchmark
@@ -46,4 +46,6 @@
   * [x] once, capture, passive
   * [x] ...rest
 * [x] parallel chains
-* [x] Sandbox
+* [x] Sandbox
+* [x] Autorun
+* [ ] There's some weird bug with attaching event listeners to document, hmmm. Need test case.