sprae 5.2.0 → 6.0.0

package/test/{dom.js → attrs.js}

@@ -6,16 +6,6 @@ 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')
 })
@@ -447,10 +437,10 @@ test('each: loop within condition', async () => {
 
   const params = sprae(el, { a: 1 })
 
-  is(el.innerHTML, '<x><y>1</y></x>')
+  is(el.innerHTML, '<x><y>0</y></x>')
   params.a = 2
   await tick()
-  is(el.innerHTML, '<x><y>-1</y><y>-2</y></x>')
+  is(el.innerHTML, '<x><y>0</y><y>-1</y></x>')
   params.a = 0
   await tick()
   is(el.innerHTML, '')
@@ -481,7 +471,7 @@ test('each: next items have own "this", not single one', async () => {
   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'])
+  is(state.log, [0,'0',1,'1',2,'2'])
 })
 
 test('each: unkeyed', async () => {
@@ -520,7 +510,7 @@ test('each: keyed', async () => {
 test('each: wrapped source', async () => {
   let el = h`<div><x :each="i in (x || 2)" :text="i"></x></div>`
   sprae(el, {x:0})
-  is(el.innerHTML, `<x>1</x><x>2</x>`)
+  is(el.innerHTML, `<x>0</x><x>1</x>`)
 })
 
 test('each: unmounted elements remove listeners', async () => {
@@ -564,316 +554,10 @@ test('each: key-based caching is in-sync with direct elements', () => {
   is(el.outerHTML, el2.outerHTML)
 })
 
-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})
-
-  is(el.outerHTML, `<div></div>`);
-  el.dispatchEvent(new window.Event('click'));
-  is(log, ['click'])
-  el.dispatchEvent(new window.Event('x'));
-  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']);
-})
-
-test('onevt: this context', e => {
-  let el = h`<div :onx="function(){log.push(this)}"></div>`
-  let state = sprae(el, {log: []})
-  el.dispatchEvent(new window.Event('x'));
-  is(state.log, [el])
-})
-
-test('on: this in chains refers to el', () => {
-  let el = h`<div :ona..onb="function(e){x=this; log.push(1); return () => log.push(2)}"></div>`
-  let state = sprae(el, {log:[], x:null})
-  el.dispatchEvent(new window.Event('a'));
-  is(state.log, [1])
-})
-
-test('on: multiple events', e => {
-  let el = h`<div :onscroll:onclick:onx="e=>log.push(e.type)"></div>`
-  let state = sprae(el, {log:[]})
-
-  el.dispatchEvent(new window.Event('click'));
-  is(state.log, ['click'])
-  el.dispatchEvent(new window.Event('scroll'));
-  is(state.log, ['click','scroll'])
-  el.dispatchEvent(new window.Event('x'));
-  is(state.log, ['click','scroll','x'])
-})
-
-test('on: in-out events', e => {
-  // let el = document.createElement('x');
-  // el.setAttribute(':onmousedown..onmouseup', 'e=>(log.push(e.type),e=>log.push(e.type))')
-  let el = h`<x :onmousedown..onmouseup="(e) => { x=this; log.push(e.type); return e=>log.push(e.type); }"></x>`
-
-  let state = sprae(el, {log:[],x:null})
-  el.dispatchEvent(new window.Event('mousedown'));
-  is(state.x, el);
-  is(state.log, ['mousedown'])
-  el.dispatchEvent(new window.Event('mouseup'));
-  is(state.log, ['mousedown','mouseup'])
-})
-
-test('on: in-out side-effects', e => {
-  let log = []
-
-  // 1. skip in event and do directly out
-  let el = h`<x :onin..onout="io"></x>`
-  sprae(el, { io(e) {
-    log.push(e.type)
-    return (e) => (log.push(e.type), [1,2,3])
-  } })
-
-  el.dispatchEvent(new window.Event('out'));
-  is(log, [])
-
-  // 2. Some nonsensical return is fine
-  el.dispatchEvent(new window.Event('in'));
-  is(log, ['in'])
-  el.dispatchEvent(new window.Event('out'));
-  is(log, ['in','out'], 'out triggers right')
-  el.dispatchEvent(new window.Event('out'));
-  is(log, ['in','out'])
-  el.dispatchEvent(new window.Event('in'));
-  is(log, ['in','out','in'])
-  el.dispatchEvent(new window.Event('in'));
-  is(log, ['in','out','in', 'in'])
-  el.dispatchEvent(new window.Event('out'));
-  is(log, ['in','out','in','in','out','out'])
-  el.dispatchEvent(new window.Event('out'));
-  is(log, ['in','out','in','in','out','out'])
-})
-
-test('on: chain of events', e => {
-  let el = h`<div :onmousedown..onmousemove..onmouseup="e=>(log.push(e.type),e=>(log.push(e.type),e=>log.push(e.type)))"></div>`
-  let state = sprae(el, {log:[]})
-
-  el.dispatchEvent(new window.Event('mousedown'));
-  is(state.log, ['mousedown'])
-  el.dispatchEvent(new window.Event('mousemove'));
-  is(state.log, ['mousedown','mousemove'])
-  el.dispatchEvent(new window.Event('mouseup'));
-  is(state.log, ['mousedown','mousemove','mouseup'])
-  el.dispatchEvent(new window.Event('mouseup'));
-  is(state.log, ['mousedown','mousemove','mouseup'])
-  el.dispatchEvent(new window.Event('mousedown'));
-  is(state.log, ['mousedown','mousemove','mouseup','mousedown'])
-})
-
-test('on: parallel chains', e => {
-  let el = h`<div :onx..ony..onz="e=>('x',log.push(e.type),e=>('y',log.push(e.type),e=>('z',log.push(e.type))))"></div>`
-  let state = sprae(el, {log:[]})
-
-  console.log('emit x')
-  el.dispatchEvent(new window.Event('x'));
-  is(state.log, ['x'])
-  console.log('emit x')
-  el.dispatchEvent(new window.Event('x'));
-  is(state.log, ['x','x'])
-  console.log('emit y')
-  el.dispatchEvent(new window.Event('y'));
-  is(state.log, ['x','x','y','y'])
-  console.log('emit y')
-  el.dispatchEvent(new window.Event('y'));
-  is(state.log, ['x','x','y','y'])
-  console.log('emit z')
-  el.dispatchEvent(new window.Event('z'));
-  console.log('emit y')
-  el.dispatchEvent(new window.Event('y'));
-  is(state.log, ['x','x','y','y','z','z'])
-  el.dispatchEvent(new window.Event('z'));
-  is(state.log, ['x','x','y','y','z','z']);
-  el.dispatchEvent(new window.Event('x'));
-  is(state.log, ['x','x','y','y','z','z','x']);
-})
-
-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'))})
-  console.log('emit x')
-  el.dispatchEvent(new window.Event('x'));
-  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
-  // el.dispatchEvent(new window.Event('x'));
-  // el.dispatchEvent(new window.Event('x'));
-  // is(log, [1])
-  console.log('emit y, y')
-  el.dispatchEvent(new window.Event('y'));
-  el.dispatchEvent(new window.Event('y'));
-  is(log, ['x1', 'y1'])
-  console.log('emit x')
-  el.dispatchEvent(new window.Event('x'));
-  is(log, ['x1','y1','x2'])
-  console.log('emit y, y')
-  el.dispatchEvent(new window.Event('y'));
-  el.dispatchEvent(new window.Event('y'));
-  is(log, ['x1','y1','x2','y2'])
-})
-
-test('on: once', e => {
-  // NOTE: if callback updates it's still rebound
-  let el = h`<x :onx.once="(e=>x&&log.push(this))" ></x>`
-  let log = []
-  let state = sprae(el, {log, x:1})
-  el.dispatchEvent(new window.Event('x'));
-  is(log, [el])
-  el.dispatchEvent(new window.Event('x'));
-  is(log, [el])
-  state.x = 2
-  el.dispatchEvent(new window.Event('x'));
-  el.dispatchEvent(new window.Event('x'));
-  is(log, [el])
-})
-
-test('on: capture, stop, prevent', e => {
-  let el = h`<x :onx.capture="e=>log.push(1)"><y :onx="e=>log.push(2)"></y></x>`
-  let state = sprae(el, {log:[]})
-  el.firstChild.dispatchEvent(new window.Event('x', {bubbles:true}));
-  is(state.log, [1,2])
-
-  let el2 = h`<x :onx="e=>log.push(1)"><y :onx.stop="e=>log.push(2)"></y></x>`
-  let state2 = sprae(el2, {log:[]})
-  el2.firstChild.dispatchEvent(new window.Event('x', {bubbles:true}));
-  is(state2.log, [2])
-})
-
-test('on: window, self', e => {
-  let el = h`<x :onx.self="e=>log.push(1)"><y :onx.window="e=>log.push(2)"></y></x>`
-  let state = sprae(el, {log:[]})
-  el.firstChild.dispatchEvent(new window.Event('x', {bubbles:true}));
-  is(state.log, [])
-  el.dispatchEvent(new window.Event('x', {bubbles:true}));
-  is(state.log, [1])
-  window.dispatchEvent(new window.Event('x', {bubbles:true}));
-  is(state.log, [1,2])
-})
-
-test('on: keys', e => {
-  let el = h`<x :onkeydown.enter="e=>log.push(1)"></x>`
-  let state = {log:[]}
-  sprae(el, state)
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: '' }));
-  is(state.log,[])
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter' }));
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: '' }));
-  is(state.log,[1])
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter' }));
-  is(state.log,[1,1])
-})
-
-test('on: key combinations', e => {
-  let el = h`<x :onkeydown.ctrl-enter="e=>log.push(1)"></x>`
-  let state = {log:[]}
-  sprae(el, state)
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: '' }));
-  is(state.log,[])
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter' }));
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: '' }));
-  is(state.log,[])
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter', ctrlKey: true }));
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter' }));
-  is(state.log,[1])
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter' }));
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter', ctrlKey: true }));
-  is(state.log,[1,1])
-  let el2 = h`<x :onkeydown.ctrl-alt-enter="e=>log.push(1)"></x>`
-})
-
-test('on: keys with prevent', e => {
-  let el = h`<y :onkeydown="e=>log.push(e.key)"><x :ref="x" :onkeydown.enter.stop></x></y>`
-  let state = sprae(el, {log:[]})
-  state.x.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
-  console.log('enter')
-  state.x.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
-  is(state.log,['x'])
-})
-
-test('on: debounce', async e => {
-  let el = h`<x :onkeydown.debounce-1="e=>log.push(e.key)"></x>`
-  let state = sprae(el, {log:[]})
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
-  is(state.log, [])
-  await time(2)
-  is(state.log, ['x'])
-})
-
-test('on: debounce 0', async e => {
-  let el = h`<x :onkeydown.debounce-0="e=>log.push(e.key)"></x>`
-  let state = sprae(el, {log:[]})
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
-  is(state.log, [])
-  await time(2)
-  is(state.log, ['x'])
-})
-
-test('on: throttle', async e => {
-  let el = h`<x :onkeydown.throttle-10="e=>log.push(e.key)"></x>`
-  let state = sprae(el, {log:[]})
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
-  is(state.log, ['x'])
-  await time(5)
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
-  is(state.log, ['x'])
-  await time(10)
-  is(state.log, ['x', 'x'])
-  await time(10)
-  is(state.log, ['x', 'x'])
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
-  is(state.log, ['x', 'x', 'x'])
-})
-
-test('on: toggle', async e => {
-  let el = h`<x :onx.toggle="e=>(log.push(1),e=>log.push(2))"></x>`
-  let state = sprae(el, {log:[]})
-  el.dispatchEvent(new window.KeyboardEvent('x'));
-  is(state.log, [1])
-  el.dispatchEvent(new window.KeyboardEvent('x'));
-  is(state.log, [1,2])
-  el.dispatchEvent(new window.KeyboardEvent('x'));
-  is(state.log, [1,2,1])
-  el.dispatchEvent(new window.KeyboardEvent('x'));
-  is(state.log, [1,2,1,2])
-})
-
-test.skip('on: nexttick', async e => {
-  let el = h`<x :onkeydown.nexttick="e=>log.push(e.key)"></x>`
-  let state = sprae(el, {log:[]})
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
-  is(state.log, [])
-  await time()
-  is(state.log, ['x', 'x'])
-})
-
-test('on: modifiers chain', async e => {
-  let el = h`<x :onkeydown.letter..onkeyup.letter="e=>(log.push(e.key),(e)=>log.push(e.key))"></x>`
-  let state = sprae(el, {log:[]})
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
-  is(state.log,['x'])
-  el.dispatchEvent(new window.KeyboardEvent('keyup', { key: 'Enter', bubbles: true }));
-  is(state.log,['x'])
-  el.dispatchEvent(new window.KeyboardEvent('keyup', { key: 'x', bubbles: true }));
-  is(state.log,['x', 'x'])
+test('each: with :with', () => {
+  let el = h`<ul><li :each="i in 3" :with="{x:i}" :text="x"></li></ul>`
+  sprae(el)
+  is(el.outerHTML, `<ul><li>0</li><li>1</li><li>2</li></ul>`)
 })
 
 test('with: inline', async () => {
@@ -923,7 +607,7 @@ test.skip('with: reactive transparency', () => {
   is(el.innerHTML, `<y>13</y>`)
 })
 test('with: writes to state', async () => {
-  let a = h`<x :with="{a:1}"><y :on="{x(){a++}}" :text="a"></y></x>`
+  let a = h`<x :with="{a:1}"><y :onx="e=>a++" :text="a"></y></x>`
   sprae(a)
   is(a.innerHTML, `<y>1</y>`)
   a.firstChild.dispatchEvent(new window.Event('x'))

package/test/events.js

@@ -0,0 +1,138 @@
+// import { signal } from 'usignal/sync'
+import test, {is, any, throws} from 'tst'
+import {tick, time} from 'wait-please'
+import sprae from '../src/index.js'
+import h from 'hyperf'
+
+
+test('events: this context', e => {
+  let el = h`<div @x="log.push(this)"></div>`
+  let state = sprae(el, {log: []})
+  el.dispatchEvent(new window.Event('x'));
+  is(state.log, [el])
+})
+
+test('events: multiple events', e => {
+  let el = h`<div @scroll@click@x="log.push(event.type)"></div>`
+  let state = sprae(el, {log:[]})
+
+  el.dispatchEvent(new window.Event('click'));
+  is(state.log, ['click'])
+  el.dispatchEvent(new window.Event('scroll'));
+  is(state.log, ['click','scroll'])
+  el.dispatchEvent(new window.Event('x'));
+  is(state.log, ['click','scroll','x'])
+})
+
+test('events: once', e => {
+  // NOTE: if callback updates it's still rebound
+  let el = h`<x @x.once="(x&&log.push(this))" ></x>`
+  let log = []
+  let state = sprae(el, {log, x:1})
+  el.dispatchEvent(new window.Event('x'));
+  is(log, [el])
+  el.dispatchEvent(new window.Event('x'));
+  is(log, [el])
+  state.x = 2
+  el.dispatchEvent(new window.Event('x'));
+  el.dispatchEvent(new window.Event('x'));
+  is(log, [el])
+})
+
+test('events: capture, stop, prevent', e => {
+  let el = h`<x @x.capture="log.push(1)"><y @x="log.push(2)"></y></x>`
+  let state = sprae(el, {log:[]})
+  el.firstChild.dispatchEvent(new window.Event('x', {bubbles:true}));
+  is(state.log, [1,2])
+
+  let el2 = h`<x @x="log.push(1)"><y @x.stop="log.push(2)"></y></x>`
+  let state2 = sprae(el2, {log:[]})
+  el2.firstChild.dispatchEvent(new window.Event('x', {bubbles:true}));
+  is(state2.log, [2])
+})
+
+test('events: window, self', e => {
+  let el = h`<x @x.self="log.push(1)"><y @x.window="log.push(2)"></y></x>`
+  let state = sprae(el, {log:[]})
+  el.firstChild.dispatchEvent(new window.Event('x', {bubbles:true}));
+  is(state.log, [])
+  el.dispatchEvent(new window.Event('x', {bubbles:true}));
+  is(state.log, [1])
+  window.dispatchEvent(new window.Event('x', {bubbles:true}));
+  is(state.log, [1,2])
+})
+
+test('events: keys', e => {
+  let el = h`<x @keydown.enter="log.push(1)"></x>`
+  let state = {log:[]}
+  sprae(el, state)
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: '' }));
+  is(state.log,[])
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter' }));
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: '' }));
+  is(state.log,[1])
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter' }));
+  is(state.log,[1,1])
+})
+
+test('events: key combinations', e => {
+  let el = h`<x @keydown.ctrl-enter="log.push(1)"></x>`
+  let state = {log:[]}
+  sprae(el, state)
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: '' }));
+  is(state.log,[])
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter' }));
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: '' }));
+  is(state.log,[])
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter', ctrlKey: true }));
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter' }));
+  is(state.log,[1])
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter' }));
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter', ctrlKey: true }));
+  is(state.log,[1,1])
+  let el2 = h`<x @keydown.ctrl-alt-enter="log.push(1)"></x>`
+})
+
+test('events: keys with prevent', e => {
+  let el = h`<y @keydown="log.push(event.key)"><x :ref="x" @keydown.enter.stop></x></y>`
+  let state = sprae(el, {log:[]})
+  state.x.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
+  console.log('enter')
+  state.x.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+  is(state.log,['x'])
+})
+
+test('events: debounce', async e => {
+  let el = h`<x @keydown.debounce-1="log.push(event.key)"></x>`
+  let state = sprae(el, {log:[]})
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
+  is(state.log, [])
+  await time(2)
+  is(state.log, ['x'])
+})
+
+test('events: debounce 0', async e => {
+  let el = h`<x @keydown.debounce-0="log.push(event.key)"></x>`
+  let state = sprae(el, {log:[]})
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
+  is(state.log, [])
+  await time(2)
+  is(state.log, ['x'])
+})
+
+test('events: throttle', async e => {
+  let el = h`<x @keydown.throttle-10="log.push(event.key)"></x>`
+  let state = sprae(el, {log:[]})
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
+  is(state.log, ['x'])
+  await time(5)
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
+  is(state.log, ['x'])
+  await time(10)
+  is(state.log, ['x', 'x'])
+  await time(10)
+  is(state.log, ['x', 'x'])
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
+  is(state.log, ['x', 'x', 'x'])
+})

package/test/test.js

@@ -1,2 +1,13 @@
 import './state.js'
-import './dom.js'
+import './attrs.js'
+import './events.js'
+
+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
+  }
+})

package/todo.md

@@ -50,4 +50,5 @@
 * [x] Autorun
 * [x] There's some bug with prostogreen not triggering effect. (caused by special array.length case)
 * [x] Getters must become evaluable
-* [ ] `:with="{likes:[], like(){ /* likes should not be undefined here */ }}"`
+* [ ] `:with="{likes:[], like(){ /* likes should not be undefined here */ }}"`
+* [ ] `<li :each="item in items" :with="{collapsed:true}"><button :onclick='e=>collapsed=false'></li>`