feat: basic show solutions feature

Author: antfu

Diff for: README.md

@@ -41,14 +41,16 @@ The development server will be running at [http://localhost:3000](http://localho
 ## Todolist
 
 - [ ] Content
-  - [x] Switch playgrounds on different guides
-  - [x] Allow each guide to toggle features
   - [ ] Allow each guide to configure file filter
-  - [ ] Solution for each guide
-  - [x] A button of "Edit this page"
+  - [ ] 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] Switch playgrounds on different guides
+  - [x] Allow each guide to toggle features
+  - [x] Solution for each guide
+  - [x] A button of "Edit this page"
 - [ ] Command K System
 - [ ] About Page
 - [ ] Welcome Screen

Diff for: components/PanelEditor.vue

@@ -18,7 +18,7 @@ watch(
 )
 
 watch(
-  () => play.mountedGuide,
+  () => [play.mountedGuide, play.showingSolution],
   () => {
     input.value = play.fileSelected?.read() || ''
   },

Diff for: components/TheNav.vue

@@ -15,6 +15,12 @@ const timeAgo = useTimeAgo(buildTime)
     </NuxtLink>
 
     <div flex-auto />
+    <button
+      v-if="play.mountedGuide?.solutions"
+      @click="play.mountGuide(play.mountedGuide, !play.showingSolution)"
+    >
+      Toggle Solution
+    </button>
     <button
       v-if="play.status === 'ready' && play.features.download !== false"
       rounded p2

Diff for: content/.template/solutions/app.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const msg = 'This is the solution!'
+</script>
+
+<template>
+  <div>{{ msg.toUpperCase() }}</div>
+</template>

Diff for: modules/template-loader.ts

@@ -45,29 +45,48 @@ export default defineNuxtModule({
         if (!id.match(/\/\.template\/index\.ts/))
           return
 
-        const filesDirs = resolve(id, '../files')
-        const files = await fg('**/*.*', {
-          ignore: [
-            '**/node_modules/**',
-            '**/.git/**',
-            '**/.nuxt/**',
-          ],
-          dot: true,
-          cwd: filesDirs,
-          onlyFiles: true,
-          absolute: false,
-        })
+        async function getFileMap(dir: string) {
+          const files = await fg('**/*.*', {
+            ignore: [
+              '**/node_modules/**',
+              '**/.git/**',
+              '**/.nuxt/**',
+            ],
+            dot: true,
+            cwd: dir,
+            onlyFiles: true,
+            absolute: false,
+          })
 
-        const filesMap: Record<string, string> = {}
+          if (!files.length)
+            return undefined
 
-        await Promise.all(
-          files.sort().map(async (filename) => {
-            const content = await fs.readFile(resolve(filesDirs, filename), 'utf-8')
-            filesMap[filename] = content
-          }),
-        )
+          const filesMap: Record<string, string> = {}
+
+          await Promise.all(
+            files.sort().map(async (filename) => {
+              const content = await fs.readFile(resolve(dir, filename), 'utf-8')
+              filesMap[filename] = content
+            }),
+          )
+
+          return filesMap
+        }
+
+        const [
+          files,
+          solutions,
+        ] = await Promise.all([
+          getFileMap(resolve(id, '../files')),
+          getFileMap(resolve(id, '../solutions')),
+        ])
 
-        return `${code}\nmeta.files = ${JSON.stringify(filesMap)}\n`
+        return [
+          code,
+          `meta.files = ${JSON.stringify(files)}`,
+          `meta.solutions = ${JSON.stringify(solutions)}`,
+          '',
+        ].join('\n')
       },
     })
   },

Diff for: stores/playground.ts

@@ -30,6 +30,7 @@ export const usePlaygroundStore = defineStore('playground', () => {
   const clientInfo = ref<ClientInfo>()
   const fileSelected = shallowRef<Raw<VirtualFile>>()
   const mountedGuide = shallowRef<Raw<GuideMeta>>()
+  const showingSolution = ref(false)
   const features = ref<PlaygroundFeatures>({})
 
   const previewLocation = ref({
@@ -248,9 +249,43 @@ export const usePlaygroundStore = defineStore('playground', () => {
 
   const guideDispose: (() => void | Promise<void>)[] = []
 
-  async function mountGuide(guide?: GuideMeta) {
+  async function _mountFiles(overrides: Record<string, string>) {
+    await Promise.all(
+      Object.entries(overrides)
+        .map(async ([filepath, content]) => {
+          await webcontainer.value?.fs.mkdir(dirname(filepath), { recursive: true })
+          await updateOrCreateFile(filepath, content)
+        }),
+    )
+
+    async function updateOrCreateFile(filepath: string, content: string) {
+      const file = files.get(filepath)
+      if (file) {
+        const oldContent = file.read()
+        await file.write(content)
+        guideDispose.push(async () => {
+          await file.write(oldContent)
+        })
+        return file
+      }
+      else {
+        const newFile = new VirtualFile(filepath, content)
+        newFile.wc = webcontainer.value
+        await newFile.write(content)
+        files.set(filepath, newFile)
+        guideDispose.push(async () => {
+          files.delete(filepath)
+          await webcontainer.value!.fs.rm(filepath)
+        })
+        return newFile
+      }
+    }
+  }
+
+  async function mountGuide(guide?: GuideMeta, withSolution = false) {
     await mountPromise
 
+    // TODO: only make necessary changes
     // Unmount the previous guide
     await Promise.all(guideDispose.map(dispose => dispose()))
     guideDispose.length = 0
@@ -259,13 +294,12 @@ export const usePlaygroundStore = defineStore('playground', () => {
       // eslint-disable-next-line no-console
       console.log('mounting guide', guide)
 
-      await Promise.all(
-        Object.entries(guide?.files || {})
-          .map(async ([filepath, content]) => {
-            await webcontainer.value?.fs.mkdir(dirname(filepath), { recursive: true })
-            await updateOrCreateFile(filepath, content)
-          }),
-      )
+      const overrides = {
+        ...guide.files,
+        ...withSolution ? guide.solutions : {},
+      }
+
+      await _mountFiles(overrides)
 
       features.value = guide?.features || {}
     }
@@ -278,31 +312,9 @@ export const usePlaygroundStore = defineStore('playground', () => {
     updatePreviewUrl()
 
     mountedGuide.value = guide
+    showingSolution.value = withSolution
 
     return undefined
-
-    async function updateOrCreateFile(filepath: string, content: string) {
-      const file = files.get(filepath)
-      if (file) {
-        const oldContent = file.read()
-        await file.write(content)
-        guideDispose.push(async () => {
-          await file.write(oldContent)
-        })
-        return file
-      }
-      else {
-        const newFile = new VirtualFile(filepath, content)
-        newFile.wc = webcontainer.value
-        await newFile.write(content)
-        files.set(filepath, newFile)
-        guideDispose.push(async () => {
-          files.delete(filepath)
-          await webcontainer.value!.fs.rm(filepath)
-        })
-        return newFile
-      }
-    }
   }
 
   return {
@@ -314,6 +326,7 @@ export const usePlaygroundStore = defineStore('playground', () => {
     fileSelected,
     mountedGuide,
     mountGuide,
+    showingSolution,
     previewLocation,
     previewUrl,
     features,