sprae 6.1.1 → 6.1.2

package/test/events.js

@@ -1,138 +0,0 @@
-// 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/index.html

@@ -1,36 +0,0 @@
-<!doctype html>
-<meta charset=utf-8>
-<title>Test</title>
-
-<script defer src="../sprae.auto.js"></script>
-<div :with="{data:'autoinit works'}">
-  <span :text="data">autoinit is broken</span>
-</div>
-
-<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",
-    "signal-struct" : "../node_modules/signal-struct/signal-struct.js",
-    "element-props" : "../node_modules/element-props/element-props.js",
-    "swapdom" : "../node_modules/swapdom/swap-inflate.js",
-    "swapdom/swap-deflate" : "../node_modules/swapdom/swap-deflate.js",
-    "swapdom/swap-inflate" : "../node_modules/swapdom/swap-inflate.js",
-    "primitive-pool" : "../node_modules/primitive-pool/index.js",
-    "preact": "../node_modules/preact/dist/preact.mjs",
-    "preact/hooks": "../node_modules/preact/hooks/dist/hooks.mjs",
-    "@preact/signals-core": "../node_modules/@preact/signals-core/dist/signals-core.mjs",
-    "usignal/sync": "../node_modules/usignal/esm/sync.js",
-    "staet": "../node_modules/staet/staet.js"
-  }
-}
-</script>
-
-<script src="./test.js" type="module"></script>
-

package/test/register.cjs

@@ -1,20 +0,0 @@
-// provide DOM env for node tests
-let { JSDOM } = require('jsdom')
-
-const { window } = new JSDOM(`<!DOCTYPE html>`, {
-  url: "http://localhost/",
-  storageQuota: 10000000,
-  pretendToBeVisual: true,
-  FetchExternalResources: false,
-  ProcessExternalResources: false
-})
-
-let props = Object.getOwnPropertyNames(window)
-
-props.forEach(prop => {
-  if (prop in global) return
-  Object.defineProperty(global, prop, {
-    configurable: true,
-    get: () => window[prop]
-  })
-})

package/test/state.js

@@ -1,296 +0,0 @@
-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', async t => {
-  let s = state({x:0, y:1})
-
-  let xy; fx(() => xy = s.x + s.y)
-  is(xy, 1, 'Eq')
-  console.log('set 2')
-  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', async t => {
-  let s = state({
-    x: 0,
-    y: 1,
-    z: { r: 2, i: 3 },
-    v: function(){return 1},
-    w: [1,2],
-    get xy () { return this.x + this.y },
-    set xy ([x,y]) { return this.x = x, this.y = y }
-  })
-
-  // functions are signals too
-  is(s.v(), 1)
-  // subscribes to only x and y without need for .value access
-  const zilog = []
-  fx(() => zilog.push(s.z.i))
-  is(zilog, [3])
-
-  let xy; fx(() => xy = s.x + s.y)
-  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
-  is(s.xy, 6)
-  s.xy = [4,2]
-  is(s.x, 4)
-  is(s.y, 2)
-  is(s.xy, 6)
-})
-
-t('state: deep props', async () => {
-  let s = state({
-    z: { r: 2, i: 3 }
-  })
-
-  // subscribes to deep values too: only z.r and z.i update result
-  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', async () => {
-  let s = state({
-    w: [1,2]
-  })
-
-  // updating array is fine
-  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', async () => {
-  let s = state({
-    x: 0,
-    y: 1,
-    z: { r: 2, i: 3 },
-    v: function(){return 1},
-    w: [1,2],
-    get xy () { return this.x + this.y },
-    set xy ([x,y]) { return this.x = x, this.y = y }
-  })
-
-  // FIXME: number of invocations must be minimized
-  let xy; fx(() => xy = s.x + s.y)
-  let len; fx(() => (len = (s.z.r**2 + s.z.i**2)**0.5))
-
-  // bulk-update is deep
-  // 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')
-})
-
-t('state: type consistency', () => {
-  let s = state({})
-
-  // signals retain same type as init data
-  is(s.constructor, Object)
-
-  // re-initializing returns itself
-  let s1 = state(s)
-  is(s, s1)
-})
-
-t('state: iteration is safe', () => {
-  // it is not enumerable
-  let s2 = state([])
-  let log = []
-  for (let i of s2) log.push(i)
-  is(log, [], 'doesn\'t iterate')
-})
-
-t('state: state from same instance', () => {
-  // NOTE: I guess we may wan to have multiple proxies for same target, don't we?
-  let s = {x:1}
-  let s1 = state(s)
-  let s2 = state(s)
-  ok(s1 === s2)
-})
-
-t('state: state from state', () => {
-  let s = {x:1}
-  let s1 = state(s)
-  let s2 = state(s1)
-  ok(s1 === s2)
-})
-
-t('state: inheritance', () => {
-  let s = state({ x: 0 })
-  let s1 = state({ y: 2 }, s)
-  is(s1.x, 0)
-  is(s1.y, 2)
-
-  // descendants are detected as instances
-  // let s3 = Object.create(s1), s3s = state(s3)
-  // is(s3, s3s)
-
-  // can subscribe to reactive sources too
-  // let s4 = state({
-  //   p: new Promise(ok => setTimeout(() => ok(123)))
-  // })
-  // is(s4.p, undefined)
-  // setTimeout(() => {
-  //   is(s4.p, 123)
-  // })
-
-  // let s43 = Object.create(s4, s3)
-  // setTimeout(() => {
-  //   is(s43.p,123)
-  //   is(s43.y,1)
-  // })
-})
-
-t('state: inheritance: updating values in chain', async () => {
-  let s1 = {x:1}
-  let s = state(s1, {y:2})
-  // console.group('fx')
-  let xy = 0; fx(() => xy = s.x + s.y);
-  // 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', 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)
-})
-
-t('state: arrays retain reference', () => {
-  // arrays retain reference
-  let list = [1,2,3]
-  let s6 = state({list})
-  s6.list[1] = 4
-  is(list,[1,4,3])
-})
-
-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)
-})
-
-t('state: array methods', () => {
-  // FIXME: somehow sprae was falling with something like this
-  let a = state({a:[1]})
-  let b = a['a']['map'](x => x * 2)
-  is(b, [2])
-})
-
-t('state: circular?', () => {
-  let a = state([])
-  fx(() => a.push(1))
-  a.push(2)
-  is (a, [1, 2])
-})
-
-t.skip('state: batch', () => {
-  let s = state({x:1, y:2})
-  let log = []; fx(() => log.push(s.x + s.y))
-  is(log, [3])
-  batch(() => (s.x++, s.y++))
-  is(log, [3, 5])
-  batch(() => (
-    batch(() => s.x++)
-    ))
-  is(log, [3, 5, 6])
-})
-
-t('state: bench', () => {
-  const N = 100000
-
-  let s2 = signalStruct({x:1, y:2}), xy2
-  effect(() => xy2 = s2.x * s2.y)
-  console.time('signalStruct')
-  for (let i = 0; i < N; i++) {
-    s2.x++, s2.y++
-  }
-  console.timeEnd('signalStruct')
-
-
-  let s1 = state({x:1, y:2}), xy
-  fx(() => xy = s1.x * s1.y)
-  console.time('fxs')
-  for (let i = 0; i < N; i++) {
-    s1.x++, s1.y++
-  }
-  console.timeEnd('fxs')
-})

package/test/test.js

@@ -1,13 +0,0 @@
-import './state.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

@@ -1,54 +0,0 @@
-* [x] finish directives
-* [x] better list diffing
-* [x] ordered directives init (:each + :if vs :if + :each) -> find out if really needed and which is faster
-  -> yes, needed and solve many init issues.
-* [?] autoinit -> too much maintenance burden
-* [x] node tests
-* [x] better deps updating -> cumulative signal
-* [x] combinations: :else :if
-* [x] :each :if, :if :each
-* [x] :each :each
-* [x] :with 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"
-* [x] spread props
-* [x] optimization: arrays with multiple elements can be slow on creation. Maybe signal-struct must ignore arrays.
-  -> yep: arrays are rarely changed as `a[i]=newItem` and regularly they're mapped.
-* [x] expand to any subscribables: both as state vars
-* [x] :ref
-* [x] :ref + :each
-* [x] event chains :ona-onb
-* [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] :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
-  * [x] Make sure `false` gets serialized, not removes attr
-* [x] Sandbox expressions: no global, no "scope" object name, no "arguments"
-* ~~[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] 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] :style="{'--x':value}"
-* [x] :onkeydown.ctrl-alt-D
-* [x] examples
-  * [x] todomvc
-  * [x] waveplay
-* [x] evt modifiers
-  * [x] once, capture, passive
-  * [x] ...rest
-* [x] parallel chains
-* [x] Sandbox
-* [x] Autorun
-* [x] There's some bug with prostogreen not triggering effect. (caused by special array.length case)
-* [x] Getters must become evaluable
-* [x] `<li :each="item in items" :with="{collapsed:true}"><button :onclick='e=>collapsed=false'></li>`
-* [ ] `:with="{likes:[], like(){ /* likes should not be undefined here */ }}"`
-* [ ] frameworks benchmark