2c:null 2d:["$","title",null,{"children":"Hello, petite-vue | Fil | Observable"}] 32:[] 30:{"id":"758ae1b94238c84e","slug":"hello-petite-vue","title":"Hello, petite-vue","thumbnail":"0c552d1841c19297e94bcc8f01f929f3e35064272226fd0ebc4488be217f111b","access_level":"public","create_time":"$D2023-04-08T17:42:57.708Z","update_time":"$D2023-04-08T17:54:26.276Z","view_time":null,"first_public_time":"$D2023-04-08T17:55:09.696Z","fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"da2a32154638c457","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":"starter_2024"},"version":60,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"8f63dd563b5b3433","slug":"hello","title":"Hello","owner":{"id":"da2a32154638c457","login":"fil","name":"Fil"}},"type":"notebook","body":{"title":"Hello, petite-vue","cells":[{"id":0,"value":"# Hello, petite-vue\n\n> _**[petite-vue](https://github.com/vuejs/petite-vue)** is an alternative distribution of [Vue](https://github.com/vuejs) optimized for progressive enhancement. It provides the same template syntax and reactivity mental model as standard Vue. Only 6kB!_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3,"value":"PetiteVue = import(\"petite-vue\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"---\nFirst example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"

\n {{ count }}\n \n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":11,"value":"(template1, PetiteVue.createApp().mount())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"---\n\nSecond, and more complex, example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":24,"value":"

\n \n

vuejs/vue@{{ currentBranch }}

\n {{ sha.slice(0, 7) }}\n - {{ truncate(commit.message) }}
\n by\n {{ commit.author.name }}\n at {{ formatDate(commit.author.date) }}\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":28,"value":"{\n template2;\n\n const { createApp, reactive } = PetiteVue;\n\n const API_URL = `https://api.github.com/repos/vuejs/vue-next/commits?per_page=3&sha=`;\n\n createApp({\n branches: [\"main\", \"v2-compat\"],\n currentBranch: \"main\",\n commits: null,\n\n truncate(v) {\n const newline = v.indexOf(\"\\n\");\n return newline > 0 ? v.slice(0, newline) : v;\n },\n\n formatDate(v) {\n return v.replace(/T|Z/g, \" \");\n },\n\n fetchData() {\n fetch(`${API_URL}${this.currentBranch}`)\n .then((res) => res.json())\n .then((data) => {\n this.commits = data;\n });\n }\n }).mount();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 31:"$30:body"