refactor: breakdown stores/playground

Author: antfu

README.md

@@ -43,14 +43,19 @@ The development server will be running at [http://localhost:3000](http://localho
 - [ ] Content
   - [ ] Allow each guide to configure file filter
   - [ ] Persist user changes when toggling solutions
-  - [ ] Only make necessary changes when navigating between guides
   - [ ] Verification for tutorial tasks
   - [ ] Search feature
   - [ ] Embedded Nuxt Docs (update CORS headers)
+  - [x] Only make necessary changes when navigating between guides
   - [x] Switch playgrounds on different guides
   - [x] Allow each guide to toggle features
   - [x] Solution for each guide
   - [x] A button of "Edit this page"
+- [ ] SEO
+  - [ ] OG Image
+  - [ ] Meta tags
+  - [ ] Sitemap
+  - [ ] RSS
 - [ ] Command K System
 - [ ] About Page
 - [ ] Welcome Screen

components/PanelEditor.vue

@@ -4,21 +4,15 @@ import { filesToVirtualFsTree } from '~/templates/utils'
 
 const play = usePlaygroundStore()
 const ui = useUiState()
+const guide = useGuideStore()
 
 const files = computed(() => Array.from(play.files.values()).filter(file => !isFileIgnored(file.filepath)))
 const directory = computed(() => filesToVirtualFsTree(files.value))
 
 const input = ref<string>('')
 
 watch(
-  () => play.fileSelected,
-  () => {
-    input.value = play.fileSelected?.read() || ''
-  },
-)
-
-watch(
-  () => [play.mountedGuide, play.showingSolution],
+  () => [play.fileSelected, guide.currentGuide, guide.showingSolution],
   () => {
     input.value = play.fileSelected?.read() || ''
   },

components/PanelPreview.vue

@@ -1,17 +1,22 @@
 <script setup lang="ts">
 const play = usePlaygroundStore()
+const preview = usePreviewStore()
 
 const inputUrl = ref<string>('')
 const inner = ref<{ iframe?: HTMLIFrameElement | undefined }>()
 
 // auto update inputUrl when location value changed
-syncRef(computed(() => play.previewLocation.fullPath), inputUrl, { direction: 'ltr' })
+syncRef(
+  computed(() => preview.location.fullPath),
+  inputUrl,
+  { direction: 'ltr' },
+)
 
 function refreshIframe() {
-  play.updatePreviewUrl()
-  if (play.previewUrl && inner.value?.iframe) {
-    inner.value.iframe.src = play.previewUrl
-    inputUrl.value = play.previewLocation.fullPath
+  preview.updateUrl()
+  if (preview.url && inner.value?.iframe) {
+    inner.value.iframe.src = preview.url
+    inputUrl.value = preview.location.fullPath
   }
 }
 
@@ -25,8 +30,8 @@ watch(
 )
 
 function navigate() {
-  play.previewLocation.fullPath = inputUrl.value
-  play.updatePreviewUrl()
+  preview.location.fullPath = inputUrl.value
+  preview.updateUrl()
   const activeElement = document.activeElement
   if (activeElement instanceof HTMLElement)
     activeElement.blur()
@@ -50,7 +55,7 @@ function navigate() {
           mx-auto min-w-100 w-full rounded bg-faded px2 text-sm
           border="base 1 hover:gray-500/30"
           :class="{
-            'pointer-events-none': !play.previewUrl,
+            'pointer-events-none': !preview.url,
           }"
         >
           <form w-full @submit.prevent="navigate">
@@ -61,7 +66,7 @@ function navigate() {
           </form>
           <div flex="~ items-center justify-end">
             <button
-              v-if="play.previewUrl"
+              v-if="preview.url"
               mx1 op-75 hover:op-100
               @click="refreshIframe"
             >
@@ -85,22 +90,22 @@ function navigate() {
             <div flex="~ gap-2 items-center">
               Vue version:
               <div
-                v-if="!play.clientInfo?.versionVue"
+                v-if="!preview.clientInfo?.versionVue"
                 i-svg-spinners-90-ring-with-bg
               />
               <code v-else>
-                v{{ play.clientInfo.versionVue }}
+                v{{ preview.clientInfo.versionVue }}
               </code>
             </div>
             <div i-simple-icons-nuxtdotjs text-xl />
             <div flex="~ gap-2 items-center">
               Nuxt version:
               <div
-                v-if="!play.clientInfo?.versionNuxt"
+                v-if="!preview.clientInfo?.versionNuxt"
                 i-svg-spinners-90-ring-with-bg
               />
               <code v-else>
-                v{{ play.clientInfo.versionNuxt }}
+                v{{ preview.clientInfo.versionNuxt }}
               </code>
             </div>
           </div>

components/PanelPreviewClient.client.vue

@@ -5,16 +5,17 @@ import type { FrameFunctions, ParentFunctions } from '~/types/rpc'
 const ui = useUiState()
 const play = usePlaygroundStore()
 const colorMode = useColorMode()
+const preview = usePreviewStore()
 
 const iframe = ref<HTMLIFrameElement>()
 
 const rpc = createBirpc<FrameFunctions, ParentFunctions>({
   onNavigate(path) {
-    play.previewLocation.fullPath = path
+    preview.location.fullPath = path
   },
   async onReady(info) {
     play.status = 'ready'
-    play.clientInfo = info
+    preview.clientInfo = info
     syncColorMode()
   },
 }, {
@@ -52,9 +53,9 @@ defineExpose({
 
 <template>
   <iframe
-    v-if="play.previewUrl"
+    v-if="preview.url"
     ref="iframe"
-    :src="play.previewUrl"
+    :src="preview.url"
     :style="play.status === 'ready' ? '' : 'opacity: 0.001; pointer-events: none;'"
     :class="{ 'pointer-events-none': ui.isPanelDragging }"
     absolute inset-0 h-full w-full bg-transparent allow="geolocation; microphone; camera; payment; autoplay; serial; cross-origin-isolated"

components/TheNav.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const ui = useUiState()
 const play = usePlaygroundStore()
+const guide = useGuideStore()
 const runtime = useRuntimeConfig()
 
 const repo = 'https://github.com/nuxt/learn.nuxt.com'
@@ -16,17 +17,17 @@ const timeAgo = useTimeAgo(buildTime)
 
     <div flex-auto />
     <button
-      v-if="play.mountedGuide?.solutions"
-      @click="play.mountGuide(play.mountedGuide, !play.showingSolution)"
+      v-if="guide.currentGuide?.solutions"
+      @click="guide.toggleSolutions()"
     >
       Toggle Solution
     </button>
     <button
-      v-if="play.status === 'ready' && play.features.download !== false"
+      v-if="play.status === 'ready' && guide.features.download !== false"
       rounded p2
       hover="bg-active"
       title="Download as ZIP"
-      @click="play.downloadZip()"
+      @click="downloadZip(play.webcontainer!)"
     >
       <div i-ph-download-duotone text-2xl />
     </button>
@@ -50,7 +51,6 @@ const timeAgo = useTimeAgo(buildTime)
       </template>
     </VDropdown>
     <button
-      v-if="play.features.terminal !== false"
       rounded p2
       title="Toggle terminal"
       hover="bg-active"

composables/download.ts

@@ -0,0 +1,46 @@
+import type { WebContainer } from '@webcontainer/api'
+
+export async function downloadZip(wc: WebContainer) {
+  if (!import.meta.client)
+    return
+
+  const { default: JSZip } = await import('jszip')
+  const zip = new JSZip()
+
+    type Zip = typeof zip
+
+    const crawlFiles = async (dir: string, zip: Zip) => {
+      const files = await wc.fs.readdir(dir, { withFileTypes: true })
+
+      await Promise.all(
+        files.map(async (file) => {
+          if (isFileIgnored(file.name))
+            return
+
+          if (file.isFile()) {
+            // TODO: If it's package.json, we modify to remove some fields
+            const content = await wc.fs.readFile(`${dir}/${file.name}`, 'utf8')
+            zip.file(file.name, content)
+          }
+          else if (file.isDirectory()) {
+            const folder = zip.folder(file.name)!
+            return crawlFiles(`${dir}/${file.name}`, folder)
+          }
+        }),
+      )
+    }
+
+    await crawlFiles('.', zip)
+
+    const blob = await zip.generateAsync({ type: 'blob' })
+    const url = URL.createObjectURL(blob)
+    const date = new Date()
+    const dateString = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}-${date.getHours()}-${date.getMinutes()}-${date.getSeconds()}`
+    const link = document.createElement('a')
+    link.href = url
+    // TODO: have a better name with the current tutorial name
+    link.download = `nuxt-playground-${dateString}.zip`
+    link.click()
+    link.remove()
+    URL.revokeObjectURL(url)
+}

package.json

@@ -59,12 +59,12 @@
     "typescript": "^5.3.3",
     "vue-tsc": "^1.8.27"
   },
-  "resolutions": {
-    "shikiji": "^0.9.12"
-  },
   "pnpm": {
     "patchedDependencies": {
       "[email protected]": "patches/[email protected]"
     }
+  },
+  "resolutions": {
+    "shikiji": "^0.9.12"
   }
 }

pages/[...slug].vue

@@ -1,28 +1,24 @@
 <script setup lang="ts">
 const router = useRouter()
-const play = usePlaygroundStore()
+const guide = useGuideStore()
 
 const templatesMap = Object.fromEntries(
   Object.entries(import.meta.glob('~/content/**/.template/index.ts'))
     .map(([key, loader]) => [
       key
         .replace(/^\/content/, '')
         .replace(/\/\.template\/index\.ts$/, '')
-        .replace(/\/\d+\./g, '/') || '',
+        .replace(/\/\d+\./g, '/'),
       loader,
     ]),
 )
 
-if (process.dev)
-  // eslint-disable-next-line no-console
-  console.log('templates', Object.keys(templatesMap))
-
 async function mount(path: string) {
-  path = path.replace(/\/$/, '')
-  if (templatesMap[path])
-    play.mountGuide(await templatesMap[path]().then((m: any) => m.meta))
-  else
-    play.mountGuide() // unmount previous guide
+  path = path.replace(/\/$/, '') // remove trailing slash
+  await guide.mount(
+    await templatesMap[path]?.().then((m: any) => m.meta),
+    false,
+  )
 }
 
 router.afterEach(async (to) => {

stores/guide.ts

@@ -0,0 +1,64 @@
+import type { Raw } from 'vue'
+import type { GuideMeta, PlaygroundFeatures } from '~/types/guides'
+
+export const useGuideStore = defineStore('guide', () => {
+  const play = usePlaygroundStore()
+  const ui = useUiState()
+  const preview = usePreviewStore()
+
+  const features = ref<PlaygroundFeatures>({})
+  const currentGuide = shallowRef<Raw<GuideMeta>>()
+  const showingSolution = ref(false)
+
+  watch(features, () => {
+    if (features.value.fileTree === true) {
+      if (ui.panelFileTree <= 0)
+        ui.panelFileTree = 20
+    }
+    else if (features.value.fileTree === false) {
+      ui.panelFileTree = 0
+    }
+
+    if (features.value.terminal === true)
+      ui.showTerminal = true
+    else if (features.value.terminal === false)
+      ui.showTerminal = false
+  })
+
+  async function mount(guide?: GuideMeta, withSolution = false) {
+    await play.init
+
+    // eslint-disable-next-line no-console
+    console.log('mounting guide', guide)
+
+    await play.mount({
+      ...guide?.files,
+      ...withSolution ? guide?.solutions : {},
+    })
+
+    play.fileSelected = play.files.get(guide?.startingFile || 'app.vue')
+    preview.location.fullPath = guide?.startingUrl || '/'
+    preview.updateUrl()
+
+    features.value = guide?.features || {}
+    currentGuide.value = guide
+    showingSolution.value = withSolution
+
+    return undefined
+  }
+
+  async function toggleSolutions() {
+    await mount(currentGuide.value, !showingSolution.value)
+  }
+
+  return {
+    mount,
+    toggleSolutions,
+    features,
+    currentGuide,
+    showingSolution,
+  }
+})
+
+if (import.meta.hot)
+  import.meta.hot.accept(acceptHMRUpdate(useGuideStore, import.meta.hot))