2e:null 2f:["$","title",null,{"children":"Hello Solid | senritsu | Observable"}] 34:[] 32:{"id":"ffab55ef8cce7294","slug":"hello-solid","title":"Hello Solid","thumbnail":"808c6dc6b3cb5b64baa30de2c1a0e28268e8c383dcbd29bf0c2fb184cb39ff84","access_level":"public","create_time":"$D2021-07-26T18:54:27.830Z","update_time":"$D2021-07-26T20:58:14.219Z","view_time":null,"first_public_time":"$D2021-07-26T20:48:27.743Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"c62aba2ac21021cb","login":"senritsu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2702f8a42e439426df2d134af708f1c3c3bdfa1a8434dfbeec26dfd7ce6bdcec","tier":"starter_2024"},"version":204,"publish_version":204,"role":null,"authored":false,"authors":[{"type":"individual","id":"cc9712af774c2953","login":"senritsu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2702f8a42e439426df2d134af708f1c3c3bdfa1a8434dfbeec26dfd7ce6bdcec","tier":null}],"members":[{"type":"individual","id":"cc9712af774c2953","login":"senritsu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2702f8a42e439426df2d134af708f1c3c3bdfa1a8434dfbeec26dfd7ce6bdcec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Hello Solid","cells":[{"id":0,"value":"# Hello Solid\n\nThis notebook demonstrates how the [Solid](https://www.solidjs.com/) reactive library can be used within ObservableHQ. A simple `mount` function encapsulates the minimal boilerplate required to wire up proper disposal of the Solid root to the notebook cell `invalidation`. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"## Simple counter component\n\nPretty much the example from the [docs](https://www.solidjs.com/docs)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"mount(HelloCounter, invalidation)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"HelloCounter = props => {\n const {createSignal, onCleanup} = Solid\n \n const [getCount, setCount] = createSignal(0)\n \n const timer = setInterval(() => {\n setCount(getCount() + (props?.step || 1))\n }, 1000)\n \n onCleanup(() => clearInterval(timer))\n \n return html`

${getCount}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"## Composing the counter component\n\nUsing the previously defined component inside another component, with different prop values in a loop.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"mount(HelloMultiCounter, invalidation)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"HelloMultiCounter = () => {\n const {For} = Solid\n \n return html`

\n <${For} each=${[1, 2, -3]}>\n ${x => html`Counter with step ${x}<${HelloCounter} step=${x} />`}\n \n

`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"# Public API","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"While the setup to use Solid is really simple, for convenience this notebook provides a few helper functions and exports to make it even simpler.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"In your own notebook you can import the `mount` function as\n```js\nimport {mount} from '@senritsu/hello-solid@202'\n```\nand in another cell use\n```js\nmount(YourComponent, invalidation)\n```\nto mount your component","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"function mount(component, invalidationPromise) {\n if (!invalidationPromise) throw new Error('mount function needs the `invalidation` promise from the mounting cell, to properly dispose the app root')\n \n const root = document.createElement('div')\n\n invalidationPromise.then(render(component, root))\n\n return root\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"To use other parts of Solid you can import\n```js\nimport {Solid, html} from '@senritsu/hello-solid@202'\n```\nand in another cell use it to define a component\n```js\nYourComponent = () => {\n const {createSignal, ...whateverElseYouNeed} = Solid\n\n const buildSomeContent = () => {\n // ...\n }\n\n return html`

\\${buildSomeContent()}

`\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"## Note\n\nCurrently this notebook imports/exports a pinned version of Solid (${solidVersion}). If you pin the notebook import as well, any breaking changes in Solid will not break your notebooks.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"solidVersion = '1.0.5'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"render = {\n const {render} = await import(`https://cdn.skypack.dev/solid-js@${solidVersion}/web`)\n return render\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"Solid = import(`https://cdn.skypack.dev/solid-js@${solidVersion}`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"html = (await import(`https://cdn.skypack.dev/solid-js@${solidVersion}/html`)).default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"