giles
1a9c8d61b5
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>
190 lines
11 KiB
Plaintext
190 lines
11 KiB
Plaintext
;; 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: dom-scope (25 tests — 0 runnable)"
|
|
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream dom-scope tests. 0 of 25 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-language))"
|
|
:style "color:#7c3aed" "language"))
|
|
(div :style "display:flex;flex-direction:column"
|
|
(~hyperscript/hs-test-card
|
|
:name "isolated stops ^var resolution"
|
|
:html "
|
|
<div _=\"init set ^color to 'red'\">
|
|
<div dom-scope=\"isolated\">
|
|
<span _=\"init if ^color is not undefined put 'leaked' into me else put 'blocked' into me\">waiting</span>
|
|
</div>
|
|
</div>
|
|
"
|
|
:action ""
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "closest jumps to matching ancestor"
|
|
:html "
|
|
<div class=\"outer\" _=\"init set ^val to 'from-outer'\">
|
|
<div dom-scope=\"isolated\" _=\"init set ^val to 'from-inner'\">
|
|
<span dom-scope=\"closest .outer\" _=\"init put ^val into me\">none</span>
|
|
</div>
|
|
</div>
|
|
"
|
|
:action ""
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "closest with no match stops resolution"
|
|
:html "
|
|
<div _=\"init set ^val to 'found'\">
|
|
<span dom-scope=\"closest .nonexistent\" _=\"init if ^val is not undefined put 'leaked' into me else put 'blocked' into me\">waiting</span>
|
|
</div>
|
|
"
|
|
:action ""
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "parent of jumps past matching ancestor to its parent"
|
|
:html "
|
|
<div class=\"outer\" _=\"init set ^val to 'from-outer'\">
|
|
<div class=\"middle\" dom-scope=\"isolated\" _=\"init set ^val to 'from-middle'\">
|
|
<span dom-scope=\"parent of .middle\" _=\"init put ^val into me\">none</span>
|
|
</div>
|
|
</div>
|
|
"
|
|
:action ""
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "isolated allows setting ^var on the isolated element itself"
|
|
:html "
|
|
<div _=\"init set ^outer to 'leaked'\">
|
|
<div dom-scope=\"isolated\" _=\"init set ^inner to 'contained'\">
|
|
<span _=\"init put ^inner into me\">none</span>
|
|
</div>
|
|
</div>
|
|
"
|
|
:action ""
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "child reads ^var set by parent"
|
|
:html "<div _=\"init set ^count to 42\"> <span _=\"on click put ^count into me\">0</span></div>"
|
|
:action "find('span').click()"
|
|
:check "toHaveText('42')"
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "child writes ^var and parent sees it"
|
|
:html "<div _=\"init set ^count to 0\"> <button _=\"on click set ^count to 99\">set</button> <span _=\"on click put ^count into me\">0</span></div>"
|
|
:action "find('button').click(); find('span').click()"
|
|
:check "toHaveText('99')"
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "deeply nested child reads ^var from grandparent"
|
|
:html "<div _=\"init set ^name to 'alice'\"> <div> <div> <span _=\"on click put ^name into me\">empty</span> </div> </div></div>"
|
|
:action "find('span').click()"
|
|
:check "toHaveText('alice')"
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "closest ancestor wins (shadowing)"
|
|
:html "<div _=\"init set ^color to 'red'\"> <div _=\"init set ^color to 'blue'\"> <span _=\"on click put ^color into me\">empty</span> </div></div>"
|
|
:action "find('span').click()"
|
|
:check "toHaveText('blue')"
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "sibling subtrees have independent ^vars"
|
|
:html "<div id=\"a\" _=\"init set ^val to 'A'\"> <span _=\"on click put ^val into me\">empty</span></div><div id=\"b\" _=\"init set ^val to 'B'\"> <span _=\"on click put ^val into me\">empty</span></div>"
|
|
:action "find('#a span').click(); find('#b span').click()"
|
|
:check "toHaveText('A'); toHaveText('B')"
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "write to ^var not found anywhere creates on current element"
|
|
:html "<div> <button _=\"on click set ^newvar to 'created' then put ^newvar into next <span/>\">go</button> <span>empty</span></div>"
|
|
:action "find('button').click()"
|
|
:check "toHaveText('created')"
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "child write updates the ancestor, not a local copy"
|
|
:html "<div _=\"init set ^shared to 0\"> <button _=\"on click set ^shared to 10\">set</button> <span _=\"on click put ^shared into me\">0</span></div>"
|
|
:action "find('button').click(); find('span').click()"
|
|
:check "toHaveText('10')"
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "increment works on inherited var"
|
|
:html "<div _=\"init set ^count to 0\"> <button _=\"on click increment ^count\" <span _=\"on click put ^count into me\">0</span></div>"
|
|
:action "find('button').click(); find('button').click(); find('button').click(); find('span').click()"
|
|
:check "toHaveText('3')"
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "dom keyword works as scope modifier"
|
|
:html "<div _=\"init set dom count to 42\"> <span _=\"on click put dom count into me\">0</span></div>"
|
|
:action "find('span').click()"
|
|
:check "toHaveText('42')"
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "set ^var on explicit element"
|
|
:html "<div class=\"store\"> <button _=\"on click set ^data on closest .store to 'hello'\">set</button> <span _=\"on click put ^data on closest .store into me\">read</span></div>"
|
|
:action "find('button').click(); find('span').click()"
|
|
:check "toHaveText('hello')"
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "on clause targets a specific ancestor"
|
|
:html "<div class=\"outer\" _=\"init set ^outerVal to 'outer'\"> <div class=\"inner\" _=\"init set ^innerVal to 'inner'\"> <span _=\"on click put ^outerVal on closest .outer into me\">read</span> </div></div>"
|
|
:action "find('span').click()"
|
|
:check "toHaveText('outer')"
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "on clause with id reference"
|
|
:html "<div id=\"state-holder\"></div><button _=\"on click set ^count on #state-holder to 99\">set</button><span _=\"on click put ^count on #state-holder into me\">read</span>"
|
|
:action "find('button').click(); find('span').click()"
|
|
:check "toHaveText('99')"
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "when reacts to ^var changes"
|
|
:html "<div _=\"init set ^count to 0\"> <button _=\"on click increment ^count\" <output _=\"when ^count changes put it into me\">0</output></div>"
|
|
:action "find('button').click(); find('button').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 "always reacts to ^var changes"
|
|
:html "<div _=\"init set ^name to 'alice'\"> <button _=\"on click set ^name to 'bob'\">rename</button> <output _=\"live put 'Hello </div>"
|
|
:action "find('button').click()"
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "multiple children react to same ^var"
|
|
:html "<div _=\"init set ^color to 'red'\"> <button _=\"on click set ^color to 'blue'\">change</button> <span id=\"a\" _=\"when ^color changes put it into me\"></span> <span id=\"b\" _=\"when ^color changes put it into me\"></span></div>"
|
|
:action "find('button').click()"
|
|
:check "toHaveText('red'); toHaveText('red'); toHaveText('blue'); toHaveText('blue')"
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "sibling subtrees react independently with ^var"
|
|
:html "<div id=\"a\" _=\"init set ^val to 0\"> <button _=\"on click increment ^val\" <output _=\"when ^val changes put it into me\">0</output></div><div id=\"b\" _=\"init set ^val to 0\"> <button _=\"on click increment ^val\" <output _=\"when ^val changes put it into me\">0</output></div>"
|
|
:action "find('#a button').click(); find('#a button').click(); find('#b button').click()"
|
|
:check "toHaveText('0'); toHaveText('0'); toHaveText('2'); toHaveText('0'); toHaveText('1'); toHaveText('2')"
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "bind works with ^var"
|
|
:html "<div _=\"init set ^search to ''\"> <input type=\"text\" _=\"bind ^search and my value\" /> <output _=\"when ^search changes put it into me\"></output></div>"
|
|
:action "find('input').fill('hello')"
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "derived ^var chains reactively"
|
|
:html "<div _=\"init set ^price to 10 then set ^qty to 2 then set ^total to 20\"> <span _=\"when ^price changes set ^total to (^price * ^qty)\"></span> <span _=\"when ^qty changes set ^total to (^price * ^qty)\"></span> <output _=\"when ^total changes put it into me\"></output> <button id=\"price-btn\" _=\"on click set ^price to 25\">set price</button> <button id=\"qty-btn\" _=\"on click set ^qty to 5\">set qty</button></div>"
|
|
:action "find('#price-btn').click(); find('#qty-btn').click()"
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "effect stops when element is removed"
|
|
:html "<div _=\"init set ^msg to 'hello'\"> <output _=\"when ^msg changes put it into me\"></output> <button _=\"on click set ^msg to 'updated'\">update</button></div>"
|
|
:action "find('button').click()"
|
|
:check "toHaveText('hello')"
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "dedup prevents re-fire on same ^var value"
|
|
:html "<div _=\"init set ^val to 'same'\"> <output _=\"when ^val changes increment :runs then put :runs into me\"></output> <button _=\"on click set ^val to 'same'\">same</button> <button id=\"diff\" _=\"on click set ^val to 'different'\">diff</button></div>"
|
|
:action "find('#diff').click()"
|
|
:check "toHaveText('1'); toHaveText('1'); toHaveText('2')"
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|