25:["$","title",null,{"children":"SolidJS Examples | Fabian Iwand | Observable"}] 4b:T41f,render = { const {createRoot, children} = S; return (invalidation, root, autorun = false) => { let dispose; const start = () => { btnStart.replaceWith(btnStop); body.appendChild(createRoot(_dispose => { dispose = _dispose; return children(root)(); })); }; const stop = () => { btnStop.replaceWith(btnStart); dispose && dispose(); while(body.lastElementChild) body.lastElementChild.remove(); }; const scope = DOM.uid().id; const btnStart = jsx``;\n }\n \n return render(invalidation, () => jsx`<${Counter} />`);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"### [Introduction / Derived Signals](https://www.solidjs.com/tutorial/introduction_derived)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"introduction_derived","database":"$undefined"},{"id":127,"value":"// https://www.solidjs.com/tutorial/introduction_derived?solved\n{\n const { createSignal } = S;\n \n function Counter() {\n const [count, setCount] = createSignal(0);\n const doubleCount = () => count() * 2;\n \n setInterval(() => setCount(count() + 1), 1000);\n \n return jsx`

Count: ${doubleCount}

`;\n }\n \n return render(invalidation, () => jsx`<${Counter} />`);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"### [Introduction / Memos](https://www.solidjs.com/tutorial/introduction_memos)\n\n**Important:** Solid's `html` (here called `jsx`) collapses whitespace between placeholders.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"introduction_memos","database":"$undefined"},{"id":133,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"### [Control Flow / Show](https://www.solidjs.com/tutorial/flow_show)\n\n**Important:** `` does not inject a parent element, and must thus be wrapped itself.\n\n**Important:** How you name the closing tag for `` is irrelevant (`` works just as well). Don't use `` though.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"flow_show","database":"$undefined"},{"id":144,"value":"{\n const { createSignal, Show } = S;\n \n function App() {\n const [loggedIn, setLoggedIn] = createSignal(false);\n const toggle = () => setLoggedIn(!loggedIn());\n \n return jsx`

\n <${Show}\n when=${loggedIn}\n fallback=${() => jsx``}\n >\n \n \n `;\n }\n \n return render(invalidation, () => jsx`<${App} />`);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"### [Control Flow / For](https://www.solidjs.com/tutorial/flow_for)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"flow_for","database":"$undefined"},{"id":173,"value":"{\n const { createSignal, For } = S;\n \n function App() {\n const [cats, setCats] = createSignal([\n { id: 'J---aiyznGQ', name: 'Keyboard Cat' },\n { id: 'z_AbfPXTKms', name: 'Maru' },\n { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }\n ]);\n \n return jsx`\n

\n \n ${i() + 1}: ${cat.name}\n \n

\n `;\n }\n \n return render(invalidation, () => jsx`<${App} />`);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"### [Control Flow / Index](https://www.solidjs.com/tutorial/flow_index)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"flow_index","database":"$undefined"},{"id":191,"value":"{\n const { createSignal, Index } = S;\n \n function App() {\n const [cats, setCats] = createSignal([\n { id: 'J---aiyznGQ', name: 'Keyboard Cat' },\n { id: 'z_AbfPXTKms', name: 'Maru' },\n { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }\n ]);\n \n return jsx`\n

\n \n ${i + 1}: ${cat().name}\n \n

\n `;\n }\n \n return render(invalidation, () => jsx`<${App} />`);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"### [Control Flow / Switch](https://www.solidjs.com/tutorial/flow_switch)\n\n**Important:** `` does not inject a parent element, and must thus be wrapped itself.\n\n**Important:** The value for `when` does not have to be a callback.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"flow_switch","database":"$undefined"},{"id":201,"value":"{\n const { createSignal, Switch, Match } = S;\n \n function App() {\n const [x] = createSignal(7);\n \n return jsx`

\n <${Switch} fallback=${() => jsx`

${x} is between 5 and 10

`}>\n <${Match} when=${() => x() > 10} >\n

${x()} is greater than 10

\n \n <${Match} when=${() => 5 > x()}>\n

${x()} is less than 5

\n \n \n `;\n }\n \n return render(invalidation, () => jsx`<${App} />`);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"### [Control Flow / Dynamic](https://www.solidjs.com/tutorial/flow_dynamic)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"flow_dynamic","database":"$undefined"},{"id":211,"value":"{\n const { Dynamic, createSignal, For } = S;\n \n const RedThing = () => jsx`Red Thing`;\n const GreenThing = () => jsx`Green Thing`;\n const BlueThing = () => jsx`Blue Thing`;\n \n const options = {\n red: RedThing,\n green: GreenThing,\n blue: BlueThing\n }\n \n function App() {\n const [selected, setSelected] = createSignal(\"red\");\n \n return jsx`

\n <>\n \n <${Dynamic} component=${() => options[selected()]} />\n \n

`;\n }\n \n return render(invalidation, () => jsx`<${App} />`);\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"### [Control Flow / Portal](https://www.solidjs.com/tutorial/flow_portal)\n\nNote that we've inlined the CSS, and instead of Solid's default mount point `document.body` we use an element within the same cell (highlighted by the red glow).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"flow_portal","database":"$undefined"},{"id":216,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"### [Control Flow / Error Boundary](https://www.solidjs.com/tutorial/flow_error_boundary)\n\n**Important:** The error object has to be stringified. Passing the object won't produce any output.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"flow_error_boundary","database":"$undefined"},{"id":239,"value":"{\n const { ErrorBoundary } = S;\n \n const Broken = (props) => {\n throw new Error(\"Oh No\");\n return jsx`<>Never Getting Here`;\n }\n \n function App() {\n return jsx`

Before

\n <${ErrorBoundary} fallback=${err => err.toString()}>\n <${Broken} />\n \n

After

\n `;\n }\n \n return render(invalidation, () => jsx`<${App} />`);\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"### [Lifecycles / onMount](https://www.solidjs.com/tutorial/lifecycles_onmount)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"lifecycles_onmount","database":"$undefined"},{"id":244,"value":"{\n const { createSignal, onMount, For } = S;\n \n function App() {\n const [photos, setPhotos] = createSignal([]);\n \n onMount(async () => {\n const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);\n setPhotos(await res.json());\n });\n \n return jsx`

Photo album

\n <${Style} />\n

\n <${For} each=${photos} fallback=${() => jsx`

`}>${ photo => jsx`\n

\n `}\n

`;\n }\n \n return render(invalidation, () => jsx`<${App} />`);\n\n function Style() {\n return jsx``;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"### [Lifecycles / onCleanup](https://www.solidjs.com/tutorial/lifecycles_oncleanup)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"lifecycles_oncleanup","database":"$undefined"},{"id":270,"value":"{\n const { createSignal, onCleanup } = S;\n \n function Counter() {\n const [count, setCount] = createSignal(0);\n \n const timer = setInterval(() => setCount(count() + 1), 1000);\n onCleanup(() => clearInterval(timer));\n \n return jsx`

Count: ${count}

\n The mouse position is ${() => pos().x} x ${() => pos().y}\n

\n `;\n }\n \n return render(invalidation, () => jsx`<${App} />`);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"### [Bindings / Style](https://www.solidjs.com/tutorial/bindings_style)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"bindings_style","database":"$undefined"},{"id":303,"value":"{\n const { createSignal, onCleanup } = S;\n \n function App() {\n const [num, setNum] = createSignal(0);\n const id = setInterval(() => setNum((num() + 1) % 255), 30);\n onCleanup(() => clearInterval(id));\n \n return jsx`\n

({\n color: `rgb(${num()}, 180, ${num()})`,\n \"font-weight\": 800,\n \"font-size\": `${num() / 2}px`})}\n >\n Some Text\n

\n `;\n }\n \n return render(invalidation, () => jsx`<${App} />`);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"### [Bindings / ClassList](https://www.solidjs.com/tutorial/bindings_classlist)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"bindings_classlist","database":"$undefined"},{"id":367,"value":"{\n const { createSignal } = S;\n \n //import \"./style.css\";\n \n function App() {\n const [current, setCurrent] = createSignal(\"foo\");\n \n return jsx`

<>\n ({selected: current() === 'foo'})}\n onClick=${() => setCurrent('foo')}\n >foo\n ({selected: current() === 'bar'})}\n onClick=${() => setCurrent('bar')}\n >bar\n ({selected: current() === 'baz'})}\n onClick=${() => setCurrent('baz')}\n >baz\n <${Style} />\n

`;\n }\n \n return render(invalidation, () => jsx`<${App} />`);\n\n function Style() {\n return jsx`

This is a Header

Photo album