Hyperscript gallery: one-per-file page migration (76 pages)
Migrates hyperscript demo/reference pages from grouped index files into one-per-page directory layout. Each gallery-<topic>/index.sx is a single defpage with its own demo, matching the one-per-file convention used elsewhere in sx/sx/applications/. Covers: control (call/go/if/log/repeat/settle), dom (add/append/empty/ focus/hide/measure/morph/put/remove/reset/scroll/set/show/swap/take/ toggle), events (asyncError/bootstrap/dialog/fetch/halt/init/on/pick/ send/socket/tell/wait/when), expressions (asExpression/attributeRef/ closest/collectionExpressions/comparisonOperator/default/in/increment/ logicalOperator/mathOperator/no/objectLiteral/queryRef/select/splitJoin), language (askAnswer/assignableElements/component/cookies/def/dom-scope/ evalStatically/js/parser/relativePositionalExpression/scoping), and reactivity (bind/live/liveTemplate/reactive-properties/resize/transition). Adds _islands/hs-test-card.sx — a shared island for hyperscript demos. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
269
sx/sx/applications/hyperscript/gallery-events-when/index.sx
Normal file
269
sx/sx/applications/hyperscript/gallery-events-when/index.sx
Normal file
@@ -0,0 +1,269 @@
|
||||
;; AUTO-GENERATED from spec/tests/hyperscript-upstream-tests.json
|
||||
;; DO NOT EDIT — regenerate with:
|
||||
;; python3 tests/playwright/generate-sx-tests.py --emit-pages
|
||||
|
||||
(defcomp ()
|
||||
(~docs/page :title "Hyperscript: when (41 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream when tests. 0 of 41 are reproducible in-browser; the remainder show their source for reference.")
|
||||
(p :style "color:#78716c;font-size:0.875rem;margin-bottom:1rem"
|
||||
"Theme: " (a :href "/sx/(applications.(hyperscript.gallery-events))"
|
||||
:style "color:#7c3aed" "events"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "provides access to `it` and syncs initial value"
|
||||
:html "<div _=\"when $global changes put it into me\"></div>"
|
||||
:action "await run(\"set $global to '; await run(\"set $global to '; await run(\"set $global to 42\""
|
||||
:check "toHaveText('initial'); toHaveText('hello world'); toHaveText('42')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "detects changes from $global variable"
|
||||
:html "<div _=\"when $global changes put it into me\"></div>"
|
||||
:action "await run(\"set $global to '"
|
||||
:check "toHaveText('Changed!')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "detects changes from :element variable"
|
||||
:html "<div _=\"init set :count to 0 end
|
||||
when :count changes put it into me end
|
||||
on click increment :count\">0</div>"
|
||||
:action "find('div').click(); find('div').click()"
|
||||
:check "toHaveText('0'); toHaveText('1'); toHaveText('2')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "triggers multiple elements watching same variable"
|
||||
:html "<div id=\"d1\" _=\"when $shared changes put 'first' into me\"></div><div id=\"d2\" _=\"when $shared changes put 'second' into me\"></div>"
|
||||
:action "await run(\"set $shared to '"
|
||||
:check "toHaveText('first'); toHaveText('second')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "executes multiple commands"
|
||||
:html "<div _=\"when $multi changes put 'first' into me then add .executed to me\"></div>"
|
||||
:action "await run(\"set $multi to '"
|
||||
:check "toHaveText('first'); toHaveClass(/executed/)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "does not execute when variable is undefined initially"
|
||||
:html "<div _=\"when $neverSet changes put 'synced' into me\">original</div>"
|
||||
:action ""
|
||||
:check "toHaveText('original')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "only triggers when variable actually changes value"
|
||||
:html "<div _=\"when $dedup changes increment :callCount then put :callCount into me\"></div>"
|
||||
:action "await run(\"set $dedup to '; await run(\"set $dedup to '; await run(\"set $dedup to '"
|
||||
:check "toHaveText('1'); toHaveText('1'); toHaveText('2')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "auto-tracks compound expressions"
|
||||
:html "<div _=\"when ($a + $b) changes put it into me\"></div>"
|
||||
:action "await run(\"set $a to 1\"; await run(\"set $b to 2\"; await run(\"set $a to 10\"; await run(\"set $b to 20\""
|
||||
:check "toHaveText('3'); toHaveText('12'); toHaveText('30')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "detects attribute changes"
|
||||
:html "<div data-title=\"original\" _=\"when @data-title changes put it into me\"></div>"
|
||||
:action ""
|
||||
:check "toHaveText('original')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "detects form input value changes via user interaction"
|
||||
:html "<input type=\"text\" id=\"reactive-input\" value=\"start\" /><span _=\"when #reactive-input.value changes put it into me\"></span>"
|
||||
:action "evaluate({...})"
|
||||
:check "toHaveText('start'); toHaveText('typed')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "detects property change via hyperscript set"
|
||||
:html "<input type=\"text\" id=\"prog-input\" value=\"initial\" /><span _=\"when #prog-input.value changes put it into me\"></span>"
|
||||
:action "await run(\"set #prog-input.value to '"
|
||||
:check "toHaveText('initial')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "disposes effect when element is removed from DOM"
|
||||
:html "<div _=\"when $dispose changes put it into me\"></div>"
|
||||
:action "await run(\"set $dispose to '; await run(\"set $dispose to '"
|
||||
:check "toHaveText('before'); toBe('before')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "batches multiple synchronous writes into one effect run"
|
||||
:html "<div _=\"when ($batchA + $batchB) changes increment :runCount then put :runCount into me\"></div>"
|
||||
:action "await run(\"set $batchA to 0\"; await run(\"set $batchB to 0\""
|
||||
:check "toHaveText('1'); toHaveText('2')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "handles chained reactivity across elements"
|
||||
:html "<div _=\"when $source changes set $derived to (it * 2)\"></div><div id=\"output\" _=\"when $derived changes put it into me\"></div>"
|
||||
:action "await run(\"set $source to 5\"; await run(\"set $source to 20\""
|
||||
:check "toHaveText('10'); toHaveText('40')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "supports multiple when features on the same element"
|
||||
:html "<div _=\"when $left changes put it into my @data-left end
|
||||
when $right changes put it into my @data-right\"></div>"
|
||||
:action "await run(\"set $left to '; await run(\"set $right to '; await run(\"set $left to '"
|
||||
:check "toHaveAttribute('data-left', 'L'); toHaveAttribute('data-right', 'R'); toHaveAttribute('data-left', 'newL'); toHaveAttribute('data-right', 'R')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "works with on handlers that modify the watched variable"
|
||||
:html "<div _=\"init set :label to 'initial' end
|
||||
when :label changes put it into me end
|
||||
on click set :label to 'clicked'\">initial</div>"
|
||||
:action "find('div').click()"
|
||||
:check "toHaveText('initial'); toHaveText('clicked')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "does not cross-trigger on unrelated variable writes"
|
||||
:html "<div _=\"when $trigger changes
|
||||
increment :count
|
||||
put :count into me
|
||||
set $other to 'side-effect'\"></div>"
|
||||
:action "await run(\"set $trigger to '"
|
||||
:check "toHaveText('1'); toHaveText('1')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "handles rapid successive changes correctly"
|
||||
:html "<div _=\"when $rapid changes put it into me\"></div>"
|
||||
:action "await run(\"set $rapid to \""
|
||||
:check "toHaveText('9')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "isolates element-scoped variables between elements"
|
||||
:html "<div id=\"d1\" _=\"init set :value to 'A' end
|
||||
when :value changes put it into me end
|
||||
on click set :value to 'A-clicked'\">A</div><div id=\"d2\" _=\"init set :value to 'B' end
|
||||
when :value changes put it into me end
|
||||
on click set :value to 'B-clicked'\">B</div>"
|
||||
:action "find('#d1').click(); find('#d2').click()"
|
||||
:check "toHaveText('A'); toHaveText('B'); toHaveText('A-clicked'); toHaveText('B'); toHaveText('B-clicked'); toHaveText('A-clicked')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "handles NaN without infinite re-firing"
|
||||
:html "<input type=\"text\" id=\"nan-input\" value=\"not a number\" /><span _=\"when (#nan-input.value * 1) changes put it into me\"></span>"
|
||||
:action "evaluate({...})"
|
||||
:check "toHaveText('NaN'); toHaveText('NaN')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "fires when either expression changes using or"
|
||||
:html "<div _=\"when $x or $y changes put it into me\"></div>"
|
||||
:action "await run(\"set $x to '; await run(\"set $y to '"
|
||||
:check "toHaveText('from-x'); toHaveText('from-y')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "supports three or more expressions with or"
|
||||
:html "<div _=\"when $r or $g or $b changes put it into me\"></div>"
|
||||
:action "await run(\"set $r to '; await run(\"set $g to '; await run(\"set $b to '"
|
||||
:check "toHaveText('red'); toHaveText('green'); toHaveText('blue')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "#element.checked is tracked"
|
||||
:html "<input type=\"checkbox\" id=\"cb-input\" /><span _=\"when #cb-input.checked changes put it into me\"></span>"
|
||||
:action ""
|
||||
:check "toHaveText('false')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "my @attr is tracked"
|
||||
:html "<div data-x=\"one\" _=\"when my @data-x changes put it into me\"></div>"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "value of #element is tracked"
|
||||
:html "<input type=\"text\" id=\"of-input\" value=\"init\" /><span _=\"when (value of #of-input) changes put it into me\"></span>"
|
||||
:action "find('#of-input').fill('changed')"
|
||||
:check "toHaveText('init')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "math on tracked symbols works"
|
||||
:html "<div _=\"when ($mA * $mB) changes put it into me\"></div>"
|
||||
:action "await run(\"set $mA to 3\"; await run(\"set $mB to 4\"; await run(\"set $mA to 10\""
|
||||
:check "toHaveText('12')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "comparison on tracked symbol works"
|
||||
:html "<div _=\"when ($cmpVal > 5) changes put it into me\"></div>"
|
||||
:action "await run(\"set $cmpVal to 3\"; await run(\"set $cmpVal to 10\""
|
||||
:check "toHaveText('false')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "string template with tracked symbol works"
|
||||
:html "<div _=\"when `hello ${$tplName}` changes put it into me\"></div>"
|
||||
:action "await run(\"set $tplName to '; await run(\"set $tplName to '"
|
||||
:check "toHaveText('hello world')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "function call on tracked value works (Math.round)"
|
||||
:html "<div _=\"when (Math.round($rawNum)) changes put it into me\"></div>"
|
||||
:action "await run(\"set $rawNum to 3.7\"; await run(\"set $rawNum to 9.2\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "inline style change via JS is NOT detected"
|
||||
:html "<div id=\"style-target\" style=\"opacity: 1\" _=\"when (*opacity) changes put it into me\">not fired</div>"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "reassigning whole array IS detected"
|
||||
:html "<div _=\"when $arrWhole changes put it.join(',') into me\"></div>"
|
||||
:action "await run(\"set $arrWhole to [1, 2, 3]\"; await run(\"set $arrWhole to [4, 5, 6]\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "mutating array element in place is NOT detected"
|
||||
:html "<div _=\"when $arrMut[0] changes put it into me\"></div>"
|
||||
:action "await run(\"set $arrMut to [1, 2, 3]\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "local variable in when expression produces a parse error"
|
||||
:html ""
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "attribute observers are persistent (not recreated on re-run)"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toBe(0)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "boolean short-circuit does not track unread branch"
|
||||
:html "<div _=\"when ($x and $y) changes put it into me\"></div>"
|
||||
:action "await run(\"set $x to false\"; await run(\"set $y to '; await run(\"set $y to '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "diamond: cascaded derived values produce correct final value"
|
||||
:html "<span id=\"d-b\" _=\"when $a changes set $b to (it * 2)\"></span><span id=\"d-c\" _=\"when $a changes set $c to (it * 3)\"></span><div _=\"live increment :runs then put ($ (runs:)' into me\"></div>"
|
||||
:action "await run(\"set $a to 1\"; await run(\"set $a to 10\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "error in one effect does not break other effects in the same batch"
|
||||
:html "<span id=\"err-a\" _=\"when $trigger changes put null.boom into me\"></span><span id=\"err-b\" _=\"when $trigger changes put 'ok:"
|
||||
:action "await run(\"set $trigger to 0\"; await run(\"set $trigger to 42\""
|
||||
:check "toHaveText('ok:42')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "circular guard resets after cascade settles"
|
||||
:html "<span _=\"when $ping changes set $ping to (i<div _=\"when $ping changes put it into me\"></div>"
|
||||
:action "await run(\"set $ping to 0\"; await run(\"set $ping to 1\"; await run(\"set $ping to 0\"; await run(\"set $ping to 999\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "cross-microtask ping-pong is caught by circular guard"
|
||||
:html "<span _=\"when $ping changes set $pong to (i<span _=\"when $pong changes set $ping to (i<div _=\"when $ping changes put it into me\"></div>"
|
||||
:action "await run(\"set $ping to 1\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "element moved in DOM retains reactivity"
|
||||
:html "<div id=\"container-a\"><span _=\"when $movable changes put it into me\"></span></div><div id=\"container-b\"></div>"
|
||||
:action "await run(\"set $movable to '; await run(\"set $movable to '"
|
||||
:check "toHaveText('start')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "rapid detach/reattach in same sync block does not kill effect"
|
||||
:html "<div id=\"thrash-parent\"></div>"
|
||||
:action "await run(\"set $thrash to '; await run(\"set $thrash to '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
Reference in New Issue
Block a user