2b:null 2c:["$","title",null,{"children":"Svelte Experiments | Adam Bouhenguel | Observable"}] 31:T5ba,function compile(strings, ...values) { // Replace values with random strings... and then preprocess to either replace them with properties OR values in require // TODO(adamb) Choose a gensymPrefix that doesn't exist ANYWHERE in strings const genSymPrefix = "gensym_923wedsojasjq_" const rawSyms = [] const symVals = {} let ix = 0 for (const value of values) { const sym = genSymPrefix + ix++ rawSyms.push(`"${sym}"`) symVals[sym] = value } const s = strings.reduce((prev, next, i) => `${prev}${next}${rawSyms[i] || ''}`, '') let name const nameMatch = s.match(/^\s*\n\n\n\n\n\n\n`)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":791,"value":"getComponent(m).refresh()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":152,"value":"nested = svelte`

...don't affect this element

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":137,"value":"render(svelte`\n\n\n\n

These styles...

\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":380,"value":"md `### More advanced`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":383,"value":"function* exampleTicker() {\n yield Promise.resolve(new Date())\n while (true) {\n yield Promises.delay(1000, new Date());\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":516,"value":"exampleInput = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":393,"value":"render(svelte`\nThe time is now {$now}
\nThe value is {$value}`, {\n now: generatedPromises(exampleTicker),\n value: readableInput(exampleInput),\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":340,"value":"md `## Under the hood`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":346,"value":"compile`\n\n\n\n

These styles...

\n`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":349,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":848,"value":"svelteInternal = await import(\"svelte@3.6.7/internal/index.mjs\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":825,"value":"CSSTag = Symbol(\"css\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"svelteCompiler = require(\"svelte@3.6.7/compiler\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":854,"value":"// There seems to be a bug in 3.4.4+ that prevents us from loading store.mjs directly\nsvelteStore = require('https://bundle.run/svelte@3.6.7/store/index.js').catch(() => ({\n get: svelteInternal.get_store_value, \n readable: window['readable'],\n writable: window['writable'],\n derived: window['derived'],\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":351,"value":"md`## API`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"function render(component, props, target) {\n let t = target || DOM.element('div')\n const css = component[CSSTag]\n let style\n if (css !== undefined) {\n const head = document.getElementsByTagName('head')[0]\n style = DOM.element('style')\n head.appendChild(style)\n style.innerHTML = css.code\n }\n \n let c = new component.default({target: t, props})\n t[componentTag] = c\n return Generators.disposable(t, () => {\n c.$destroy()\n if (t[componentTag] === c) {\n delete t[componentTag]\n }\n t = undefined\n c = undefined\n if (style !== undefined && style.parentNode) {\n style.parentNode.removeChild(style)\n }\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":799,"value":"componentTag = Symbol(\"svelte-component\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":802,"value":"function getComponent(element) {\n return element[componentTag]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"function svelte(strings, ...values) {\n return load(compile(strings, ...values))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":584,"value":"readable = svelteStore.readable","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":585,"value":"writable = svelteStore.writable","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":587,"value":"derived = svelteStore.derived","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":591,"value":"get = svelteStore.get","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":608,"value":"function generatedPromises(gen, initialValue) {\n return svelteStore.readable(initialValue, set => {\n const g = gen()\n function afn({value, done}) {\n if (done) {\n return\n }\n value.then(v => {\n set(v)\n afn(g.next())\n })\n }\n afn(g.next())\n\n return () => g.return()\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":611,"value":"function readableInput(input) {\n return generatedPromises(() => Generators.input(input), input.value)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":594,"value":"function observe(observable) {\n return readable(observable.value, set => {\n const inputted = () => set(observable.value)\n observable.addEventListener('input', inputted)\n return () => observable.removeEventListener('input', inputted)\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":361,"value":"Stores = ({\n input: readableInput,\n resolvePromises: generatedPromises,\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"