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>
254 lines
8.8 KiB
Plaintext
254 lines
8.8 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: component (19 tests — 0 runnable)"
|
|
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream component tests. 0 of 19 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 "registers a custom element from a template"
|
|
:html "
|
|
<template component=\"test-hello\">
|
|
<span>Hello World</span>
|
|
</template>
|
|
<test-hello></test-hello>
|
|
"
|
|
:action ""
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "renders template expressions"
|
|
:html "
|
|
<template component=\"test-greet\">
|
|
<span>Hello ${\"\\x24\"}{$name}!</span>
|
|
</template>
|
|
<test-greet></test-greet>
|
|
"
|
|
:action "await run(\"set $name to '"
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "applies _ hyperscript to component instance"
|
|
:html "
|
|
<template component=\"test-init\" _=\"init set ^msg to 'initialized'\">
|
|
<span>${\"\\x24\"}{^msg}</span>
|
|
</template>
|
|
<test-init></test-init>
|
|
"
|
|
:action ""
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "processes _ on inner elements"
|
|
:html "
|
|
<template component=\"test-inner\" _=\"init set ^count to 0\">
|
|
<button _=\"on click increment ^count then put ^count into the next <span/>\">+</button>
|
|
<span>0</span>
|
|
</template>
|
|
<test-inner></test-inner>
|
|
"
|
|
:action "find('test-inner button').click()"
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "reactively updates template expressions"
|
|
:html "
|
|
<template component=\"test-reactive\" _=\"init set ^count to 0\">
|
|
<button _=\"on click increment ^count\">+</button>
|
|
<span>Count: ${\"\\x24\"}{^count}</span>
|
|
</template>
|
|
<test-reactive></test-reactive>
|
|
"
|
|
:action "find('test-reactive button').click()"
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "supports multiple independent instances"
|
|
:html "
|
|
<template component=\"test-multi\" _=\"init set ^count to 0\">
|
|
<button _=\"on click increment ^count then put ^count into the next <span/>\">+</button>
|
|
<span>0</span>
|
|
</template>
|
|
<test-multi id=\"a\"></test-multi>
|
|
<test-multi id=\"b\"></test-multi>
|
|
"
|
|
:action "find('#a button').click()"
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "reads attributes via @"
|
|
:html "
|
|
<template component=\"test-attrs\" _=\"init set ^val to @data-start as Int\">
|
|
<span>${\"\\x24\"}{^val}</span>
|
|
</template>
|
|
<test-attrs data-start=\"42\"></test-attrs>
|
|
"
|
|
:action ""
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "supports #for loops in template"
|
|
:html "
|
|
<template component=\"test-loop\" _=\"init set ^items to ['a', 'b', 'c']\">
|
|
<ul>
|
|
#for item in ^items
|
|
<li>${\"\\x24\"}{item}</li>
|
|
#end
|
|
</ul>
|
|
</template>
|
|
<test-loop></test-loop>
|
|
"
|
|
:action ""
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "supports #if conditionals in template"
|
|
:html "
|
|
<template component=\"test-cond\" _=\"init set ^show to true\">
|
|
#if ^show
|
|
<span>visible</span>
|
|
#end
|
|
</template>
|
|
<test-cond></test-cond>
|
|
"
|
|
:action ""
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "substitutes slot content into template"
|
|
:html "
|
|
<template component=\"test-card\">
|
|
<div class=\"card\"><slot/></div>
|
|
</template>
|
|
<test-card><p>Hello from slot</p></test-card>
|
|
"
|
|
:action ""
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "blocks processing of inner hyperscript until render"
|
|
:html "
|
|
<template component=\"test-block\" _=\"init set ^msg to 'ready'\">
|
|
<span _=\"on click put ^msg into me\">click me</span>
|
|
</template>
|
|
<test-block></test-block>
|
|
"
|
|
:action "find('test-block span').click()"
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "supports named slots"
|
|
:html "
|
|
<template component=\"test-named-slot\">
|
|
<header><slot name=\"title\"></slot></header>
|
|
<main><slot/></main>
|
|
<footer><slot name=\"footer\"></slot></footer>
|
|
</template>
|
|
<test-named-slot>
|
|
<h1 slot=\"title\">My Title</h1>
|
|
<p>Default content</p>
|
|
<span slot=\"footer\">Footer text</span>
|
|
</test-named-slot>
|
|
"
|
|
:action ""
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "does not process slotted _ attributes prematurely"
|
|
:html "
|
|
<div _=\"init set ^x to 42\">
|
|
<template component=\"test-slot-hs\">
|
|
<div class=\"wrap\"><slot/></div>
|
|
</template>
|
|
<test-slot-hs>
|
|
<span _=\"on click put ^x into me\">before</span>
|
|
</test-slot-hs>
|
|
</div>
|
|
"
|
|
:action "find('test-slot-hs span').click()"
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "slotted content resolves ^var from outer scope, not component scope"
|
|
:html "
|
|
<div _=\"init set ^outer to 'from-outside'\">
|
|
<template component=\"test-scope-slot\" _=\"init set ^outer to 'from-component'\">
|
|
<div class=\"inner\"><slot/></div>
|
|
</template>
|
|
<test-scope-slot>
|
|
<span _=\"init put ^outer into me\">waiting</span>
|
|
</test-scope-slot>
|
|
</div>
|
|
"
|
|
:action ""
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "component isolation prevents ^var leaking inward"
|
|
:html "
|
|
<div _=\"init set ^leaked to 'should-not-see'\">
|
|
<template component=\"test-isolated\" _=\"init set ^internal to 'component-only'\">
|
|
<span _=\"init if ^leaked is not undefined put 'leaked!' into me else put ^internal into me\">waiting</span>
|
|
</template>
|
|
<test-isolated></test-isolated>
|
|
</div>
|
|
"
|
|
:action ""
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "bind keeps ^var in sync with attribute changes"
|
|
:html "
|
|
<template component=\"test-bind-attr\" _=\"bind ^count to @data-count\">
|
|
<span>${\"\\x24\"}{^count}</span>
|
|
</template>
|
|
<test-bind-attr data-count=\"5\"></test-bind-attr>
|
|
"
|
|
:action ""
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "attrs evaluates attribute as hyperscript in parent scope"
|
|
:html "
|
|
<template component=\"test-args\" _=\"init set ^list to attrs.items\">
|
|
<ul>
|
|
#for item in ^list
|
|
<li>${\"\\x24\"}{item}</li>
|
|
#end
|
|
</ul>
|
|
</template>
|
|
<test-args items=\"$stuff\"></test-args>
|
|
"
|
|
:action "await run(\"set $stuff to ['"
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "attrs works with bind for reactive pass-through"
|
|
:html "
|
|
<template component=\"test-args-bind\" _=\"bind ^val to attrs.count\">
|
|
<span>${\"\\x24\"}{^val}</span>
|
|
</template>
|
|
<test-args-bind count=\"$count\"></test-args-bind>
|
|
<button _=\"on click increment $count\">+</button>
|
|
"
|
|
:action "find('button').click(); await run(\"set $count to 10\""
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
|
(~hyperscript/hs-test-card
|
|
:name "attrs bind is bidirectional — inner changes flow outward"
|
|
:html "
|
|
<template component=\"test-args-bidir\" _=\"bind ^count to attrs.count\">
|
|
<span>${\"\\x24\"}{^count}</span>
|
|
<button _=\"on click increment ^count\">+</button>
|
|
</template>
|
|
<test-args-bidir count=\"$count\"></test-args-bidir>
|
|
<p _=\"live put $count into me\"></p>
|
|
"
|
|
:action "find('test-args-bidir button').click(); await run(\"set $count to 10\""
|
|
:check ""
|
|
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|