30:T505,function list({value: initialValue = [], invalidation: invalidated = invalidation} = {}) { const {html, createRoot, createEffect, createSignal, Index, For} = S; const {createStore} = solid_store; const [state, setState] = createStore({ items: Array.from(initialValue, d => ({value: `${d}`})) }); console.log(state.items.map(d => d.value)) return createRoot(dispose => { invalidated.then(dispose); const Item = (props) => { return html`

`; }; const root = html`

`; let value; 0&&createEffect(() => { value = state().map(d => d.value); root.dispatchEvent(new Event('input', {bubbles: true})); console.log('updated', value); }); return Object.defineProperty(root, 'value', {get: () => Array.from(state)}); }); }31:[] 2e:{"title":"Hello, SolidJS!","cells":[{"id":0,"value":"# Hello, SolidJS!\n\nCombines SolidJS core, web and html into a single object for import.\n\n~~~js\nimport {S} from '@mootari/solid-js'\n~~~\n\nFor more examples see the notebook [SolidJS Examples](https://observablehq.com/@mootari/solid-js-examples).\n\nTodos:\n- fix list example\n- investigate why reactivity occasionally stops\n- add store example\n- explain: root, computation, owner, tracking scope\n","pinned":false,"hidden":false,"mode":"md"},{"id":360,"value":"---\n## Examples (work in progress)\n","pinned":false,"hidden":false,"mode":"md"},{"id":521,"value":"### Timer","pinned":false,"hidden":false,"mode":"md"},{"id":470,"value":"function timer({value = 0, invalidation: invalidated = invalidation} = {}) {\n const { html, createRoot, createSignal, createEffect, onCleanup } = S;\n\n return createRoot(dispose => {\n invalidated.then(dispose);\n\n const [count, setCount] = createSignal(value);\n createEffect(() => {\n count(), root.dispatchEvent(new Event('input', {bubbles: true}));\n });\n \n const timer = setInterval(() => setCount(count() + 1), 1000);\n onCleanup(() => clearInterval(timer));\n \n const root = html`

Seconds passed: ${count}

`;\n return Object.defineProperty(root, 'value', {get: count});\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":476,"value":"viewof time = timer({invalidation})","pinned":true,"hidden":false,"mode":"ojs"},{"id":483,"value":"time","pinned":true,"hidden":false,"mode":"ojs"},{"id":523,"value":"### Counter","pinned":false,"hidden":false,"mode":"md"},{"id":450,"value":"function number({\n value = 0,\n min = -Infinity,\n max = Infinity,\n invalidation: invalidated = invalidation\n} = {}) {\n const {html, createRoot, createEffect, createSignal} = S;\n\n return createRoot(dispose => {\n invalidated.then(dispose);\n \n const [count, setCount] = createSignal(value);\n createEffect(() => {\n count(), root.dispatchEvent(new Event('input', {bubbles: true}));\n });\n const root = html`

\n \n ${count}\n `;\n return Object.defineProperty(root, 'value', {get: count});\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":452,"value":"viewof count = number({min: 0, max: 10, invalidation})","pinned":true,"hidden":false,"mode":"ojs"},{"id":544,"value":"count","pinned":true,"hidden":false,"mode":"ojs"},{"id":530,"value":"### List (WIP)","pinned":false,"hidden":false,"mode":"md"},{"id":362,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"viewof myList = list({value: [\"foo\", \"bar\"], invalidation})","pinned":true,"hidden":false,"mode":"ojs"},{"id":702,"value":"html`

${viewof myList.outerHTML}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":407,"value":"myList","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"---\n## Packages","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"mutable version = '1.9.12'","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"pkg = 'https://esm.run/solid-js'","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"S = Object.freeze({\n  ...solid_core,\n  ...solid_web,\n  html: solid_html\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"solid_core = stripDefault(await import(`${pkg}@${version}`))","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"solid_web = stripDefault(await import(`${pkg}@${version}/web`))","pinned":false,"hidden":false,"mode":"ojs"},{"id":623,"value":"solid_store = import(`${pkg}@${version}/store`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"solid_html = (await import(`${pkg}/html`)).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"---\n## Properties","pinned":false,"hidden":false,"mode":"md"},{"id":115,"value":"{\n  const form = Inputs.radio(versions, {label: 'Version', value: mutable version});\n  form.id = DOM.uid().id;\n  form.appendChild(htl.html`<style>#${form.id} div label {width:14ch}`);\n  form.addEventListener('input', e => {\n    e.stopPropagation();\n    mutable version = form.value;\n  });\n  return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"<span style=\"font:14px var(--sans-serif)\">Solid's documentation is not versioned, and not every link may lead to a result. Click the magnifying glass in front of an entry to search on GitHub instead.","pinned":false,"hidden":false,"mode":"html"},{"id":101,"value":"{\n  const headers = Object.entries(keys).map(([n, d]) => htl.html`<th>${n} (${d.length})`);\n  const cells = Object.values(keys).map(d => htl.html`<td>${d.sort((a, b) => a.localeCompare(b)).map(\n    n => htl.html`<span><a title=\"Search on GitHub\" href=${searchUrl(n)}>🔍</a> <a href=${docUrl(n)}>${components.has(n) ? `<${n}>` : n}</a><br>`)}`);\n  const scope = DOM.uid().id;\n  \n  return htl.html`<table class=${scope}>\n    <style>\n      .${scope} {layout:fixed; max-width:100%}\n      .${scope} a[href] { font-weight: bold }\n      .${scope} a:not([href]) { color: #888 }\n      .${scope} td { font-family:var(--monospace); line-height: 1.5em; }\n    </style>\n    <tr>${headers}</tr>\n    <tr>${cells}</tr>`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"---\n## Further Reading\n\n- [5 Places SolidJS is not the Best](https://dev.to/this-is-learning/5-places-solidjs-is-not-the-best-5019) *(by Solid's author Ryan Carniato)*\n- Rendering sources: [dom-expressions/src/client.js](https://github.com/ryansolid/dom-expressions/blob/main/packages/dom-expressions/src/client.js)\n- \"`mapArray` is a tool to effectively maintain collection of side-effects\" ([source](https://github.com/solidjs/solid/discussions/428#discussioncomment-681673))\n- \"a root is like a memo that's not re-executed and that's not disposed automatically, other than that they are basically the same\" ([source](https://discord.com/channels/722131463138705510/1025000227909943307/1025006482070179860))\n  - \"a root isn't what tracks, they're called computations, a root is just a means to manage the tree\nand computations are also owners\"\n  - \"root is just an owner that manages computations which are also owners with tracking\"","pinned":false,"hidden":false,"mode":"md"},{"id":265,"value":"---\n\n### Data","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"versions = fetch('https://registry.npmjs.org/solid-js', {\n  headers: {\n    Accept: 'application/vnd.npm.install-v1+json'\n  }\n})\n.then(r => r.json())\n.then(d => Object.keys(d.versions).filter(d => minVersion(d, '1.5')).reverse())","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"keys = ({\n  common: compare(solid_core, solid_web, 'both'),\n  core: compare(solid_core, solid_web, 'left'),\n  web: compare(solid_core, solid_web, 'right'),\n  store: Object.keys(solid_store),\n\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"docIds = fetch('https://raw.githubusercontent.com/solidjs/solid-docs/main/langs/en/api/api.md')\n.then(r => r.text())\n.then(s => {\n  const dom = md`${s}`;\n  return new Set(Array.from(\n    dom.querySelectorAll('h1>code,h2>code,h3>code'),\n    // todo: match actual ID conversion\n    n => toID(n.textContent)\n  ));\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"customDocs = ({\n  //DOMElements: 'https://github.com/solidjs/solid/discussions/1036'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"// Copied from https://www.solidjs.com/docs/latest/api (sidebar)\ncomponents = new Set(`\n\n<For>\n<Show>\n<Switch>/<Match>\n<Index>\n<ErrorBoundary>\n<Suspense>\n<SuspenseList> (Experimental)\n<Dynamic>\n<Portal>\n\n`.match(/<[A-Za-z]+>/g).map(d => d.slice(1, -1)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"### Helpers","pinned":false,"hidden":false,"mode":"md"},{"id":163,"value":"docUrl = {\n  // Docs aren't really versioned, it seems. No point in using anything other than \"latest\" here.\n  const url = name => `https://www.solidjs.com/docs/latest/api#${toID(name)}`;\n  return name => customDocs[name] ?? docIds.has(toID(name)) ? url(name) : null;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"searchUrl = (q, type = 'discussions') => `https://github.com/search?${\n  new URLSearchParams({q: `org:solidjs ${q}`, type})\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"toID = s => s.toLowerCase().replace(/[^a-z_]/g, '')","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"compare = (a, b, side) => {\n  const ka = Object.keys(a), sa = new Set(ka);\n  const kb = Object.keys(b), sb = new Set(kb);\n  return {\n    left: () => ka.filter(d => !sb.has(d)),\n    right: () => kb.filter(d => !sa.has(d)),\n    both: () => ka.filter(d => sb.has(d))\n  }[side]();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"minVersion = (testVersion, minVersion) => {\n  const pattern = /^(\\d+)(?:\\.(\\d+))?(?:\\.(\\d+))?/;\n  const test = testVersion.match(pattern)?.slice(1);\n  const min = minVersion.match(pattern)?.slice(1);\n  if(!min || !test) return false;\n  for(let i = 0; i < min.length; i++) {\n    if((min[i] ??= 0) != test[i]) return min[i] < test[i];\n  }\n  return true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"stripDefault = ({default: _, ...obj}) => obj","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}
</article></body></html>