2b:null 2c:["$","title",null,{"children":"Vue Components in Notebook | UnluckyNinja | Observable"}] 31:[] 2f:{"id":"53b92343f9084d61","slug":null,"title":"Vue Components in Notebook","thumbnail":"e770f756b1b565af68e1e0555b27f18192df0151f4c57ff6ec3c8d94a6f3062e","access_level":"public","create_time":"$D2022-11-23T08:26:30.431Z","update_time":"$D2023-02-28T17:07:15.039Z","view_time":null,"first_public_time":"$D2022-11-23T08:26:30.431Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"ebb6118c9a990a2c","login":"unluckyninja","name":"UnluckyNinja","avatar_url":"https://avatars-next.observableusercontent.com/95d8d23bafa30b0b30e2ead4a72666d02cc17899c3c958c22c65fc0fc09afe3d","tier":"starter_2024"},"version":478,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4df1f6fd87aa7295","login":"unluckyninja","name":"UnluckyNinja","avatar_url":"https://avatars-next.observableusercontent.com/95d8d23bafa30b0b30e2ead4a72666d02cc17899c3c958c22c65fc0fc09afe3d","tier":null}],"members":[{"type":"individual","id":"4df1f6fd87aa7295","login":"unluckyninja","name":"UnluckyNinja","avatar_url":"https://avatars-next.observableusercontent.com/95d8d23bafa30b0b30e2ead4a72666d02cc17899c3c958c22c65fc0fc09afe3d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"5a53e6506aee92a4","slug":"vue","title":"Vue","owner":{"id":"ebb6118c9a990a2c","login":"unluckyninja","name":"UnluckyNinja"}},"type":"notebook","body":{"title":"Vue Components in Notebook","cells":[{"id":0,"value":"# Vue Components in Notebook","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"working in progress","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"toc({\n headers: 'h2,h3,h4'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## Import Vue","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"import {Vue} from \"@unluckyninja/vue\" ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"Vue","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"## Create Components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"You can create a Vue instance per cell. \nAnd it's okay to do so. [Official document](https://vuejs.org/guide/essentials/application.html#multiple-application-instances)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"view1 = {\n const ele = htl.html`

` // document.createElement('div')\n Vue.createApp({\n template: '

\"Hello, world!\"

',\n }).mount(ele)\n return ele\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"view1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"But it has a lot of cons in this way.\n- When reference value/cell changed. The code block will be rerun, a new app instance will be created. But the old one is still running, so are all the bound watchers, listeners, and timers.\n- Vue's reactivity doesn't work well with Notebook's. If a `ref.value` changed, it will not automatically reflected to referencing cells as written in [my article about Vue's reactivity in Notebook](/@unluckyninja/vue).\n- You have to write html in a way that editing an inline string, which is not convenient.\n\nWe need to do some additional work.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"## Deal with Notebook Reactivity","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"### How to know when a cell rerun\nThere are several ways for a cell to know when it get rerun\n- Use `invalidation`\n- Use `Generators`\n- Use generator-like object as return\n\nIf you are already familiar with stuff above, you can skip to next section.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"Consider a unix time value and a function to update it:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"mutable time = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"updateTime = ()=>{\n mutable time = Date.now()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"#### The invalidation way\nIt's easy to understand and use. `invalidation` is a promise that will be resolved when a cell rerun.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":127,"value":"{\n invalidation.then(()=>{\n updateTime()\n })\n return md`Click run button on this cell will trigger it.`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"But this method has a drawback: `invalidation` only works in its own cell scope.\nReferencing cell has their own `invalidation`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":183,"value":"time","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"invalInOtherCell = (text)=>{\n invalidation.then(()=>{\n updateTime()\n })\n return text || md`Click run button on this cell will trigger it.`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"invalInOtherCell(md`Notice \\`time\\` doesn\\'t change if you rerun this cell`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"#### The `Generators` way","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":138,"value":"{\n return Generators.observe(notify=>{\n notify(md`Click run button on this cell will trigger it.
This works in referencing cell`) // value that should be returned by the cell\n return ()=>{ updateTime() } // invalidation hook\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"time","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"generatorsInOtherCell = (text)=>{\n return Generators.observe(notify=>{\n notify(text || md`Click run button on this cell will trigger it.
This works in referencing cell`) // value that should be returned by the cell\n return ()=>{ updateTime() } // invalidation hook\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"generatorsInOtherCell(md`Notice \\`time\\` changed.`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"#### The hand-made generator object way\nJust an alternative way that works the same as above","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":229,"value":"time","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"generatorObject(md`Rerun this cell.`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"generatorObject = (text)=>{\n let done = false\n return {\n next(){\n if (done) return {done: true};\n done = true;\n return {done: false, value: text};\n },\n return(){\n updateTime()\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"### Combine it with Vue","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":265,"value":"For convenience, let's choose the generators way.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":286,"value":"testVueApp('Check your browser console. No matter how many time you run this cell, it should be only one logger at a time')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"testVueApp = (text)=>{\n const ele = htl.html`

`\n let app = Vue.createApp({\n template: `

${text}

`,\n setup(){\n const handle = setInterval(()=>{\n console.log('Beep')\n }, 1000)\n return {\n handle\n }\n },\n unmounted(){\n console.log('Unmounted!')\n clearInterval(this.handle)\n }\n })\n app.mount(ele)\n return Generators.observe(notify=>{\n notify(ele)\n return ()=>{ app.unmount() }\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"Note: \nIn a cell, if it's automatically rerun, `this` points to previously returned value. If it's rerun manually, it will be `undefined`. However, for a Vue instance, after it has been created, there seems no way you can change it except unmounting it and mounting a new one. \nThere is a feature called \"Hot Module Reload\" in official build tool Vite. But in-browser, I think that's it for now.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"## Use Library","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":301,"value":"Usually a lib can be load into notebook if it's UMD or IIFE. (Check: [How to: require stubborn modules](/@observablehq/how-to-require-stubborn-modules)) \nYou can also use a tool to check if you can use a lib in notebook: https://observablehq.com/@observablehq/module-require-debugger","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":409,"value":"### Using a utility css lib\nImport Unocss, and it just works. 🤩","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":382,"value":"unocss = import('https://cdn.jsdelivr.net/npm/@unocss/runtime/uno.global.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"

123123

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"## Web Components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":440,"value":"Web components only support primitives as attribute.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":299,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":437,"value":"createVueApp = (componentOptions, callback)=>{\n const ele = htl.html`

`\n let oldInstance = typeof callback === 'function' ? callback() : callback\n let app = typeof componentOptions === 'function' ? Vue.createApp(componentOptions(oldInstance)) : Vue.createApp(componentOptions)\n app.mount(ele)\n return Generators.observe(notify=>{\n notify(ele)\n return ()=>{ app.unmount() }\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"