feat: allow each guide to configure file filter (#101)

Author: xrexy

components/PanelEditor.vue

@@ -6,7 +6,11 @@ const play = usePlaygroundStore()
 const ui = useUiState()
 const guide = useGuideStore()
 
-const files = computed(() => Array.from(play.files.values()).filter(file => !isFileIgnored(file.filepath)))
+const files = computed(() => Array
+  .from(play.files.values())
+  .filter(file => !isFileIgnored(file.filepath, guide.ignoredFiles)),
+)
+
 const directory = computed(() => filesToVirtualFsTree(files.value))
 
 const input = ref<string>('')

components/TheNav.vue

@@ -9,6 +9,19 @@ const repo = 'https://github.com/nuxt/learn.nuxt.com'
 const buildTime = new Date(runtime.public.buildTime)
 const timeAgo = useTimeAgo(buildTime)
 
+function downloadCurrentGuide() {
+  if (!play.webcontainer)
+    throw new Error('No webcontainer found')
+
+  if (play.status !== 'ready')
+    throw new Error('Playground is not ready')
+
+  if (!guide.features.download)
+    throw new Error(`Download feature is disabled for guide ${guide.currentGuide}`)
+
+  downloadZip(play.webcontainer, guide.ignoredFiles)
+}
+
 addCommands(
   {
     id: 'download-zip',
@@ -17,7 +30,7 @@ addCommands(
       return play.status === 'ready' && guide.features.download !== false
     },
     handler: () => {
-      downloadZip(play.webcontainer!)
+      downloadCurrentGuide()
     },
     icon: 'i-ph-download-duotone',
   },
@@ -62,11 +75,11 @@ addCommands(
         <div i-ph-magnifying-glass-duotone text-2xl />
       </button>
       <button
-        v-if="play.status === 'ready' && guide.features.download !== false"
+        v-if="play.status === 'ready' && !!guide.features.download"
         rounded p2
         hover="bg-active"
         title="Download as ZIP"
-        @click="downloadZip(play.webcontainer!)"
+        @click="downloadCurrentGuide()"
       >
         <div i-ph-download-duotone text-2xl />
       </button>

composables/download.ts

@@ -1,20 +1,20 @@
 import type { WebContainer } from '@webcontainer/api'
+import type { StringOrRegExp } from '~/types/guides'
 
-export async function downloadZip(wc: WebContainer) {
+export async function downloadZip(wc: WebContainer, ignoredFiles?: StringOrRegExp[]) {
   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))
+          if (isFileIgnored(file.name, ignoredFiles))
             return
 
           if (file.isFile()) {

composables/files-ignore.ts

@@ -1,13 +1,41 @@
-const INGORE_FILES: (string | RegExp)[] = [
+import type { GuideIgnoredFiles, GuideMeta, StringOrRegExp } from '~/types/guides'
+
+const DEFAULT_IGNORED_FILES: StringOrRegExp[] = [
   'pnpm-lock.yaml',
   'pnpm-workspace.yaml',
   'node_modules',
   /tsconfig\.json$/,
   /^\./,
 ]
 
-export function isFileIgnored(filepath: string) {
-  return INGORE_FILES.some(pattern => typeof pattern === 'string'
+function normalizeGuideIgnoredFiles(input: GuideMeta['ignoredFiles']): GuideIgnoredFiles {
+  if (!input)
+    return { overwrite: false, patterns: [] }
+
+  if (Array.isArray(input))
+    return { overwrite: false, patterns: input }
+
+  if (typeof input === 'object') {
+    return {
+      overwrite: input.overwrite || false,
+      patterns: input.patterns || [],
+    }
+  }
+
+  throw new Error('Invalid ignoredFiles', input)
+}
+
+export function transformGuideIgnoredFiles(input: GuideMeta['ignoredFiles']): StringOrRegExp[] {
+  const { overwrite, patterns } = normalizeGuideIgnoredFiles(input)
+
+  return overwrite
+    ? patterns
+    : DEFAULT_IGNORED_FILES.concat(patterns)
+}
+
+export function isFileIgnored(filepath: string, ignoredFiles?: GuideMeta['ignoredFiles']) {
+  const patterns = transformGuideIgnoredFiles(ignoredFiles)
+  return patterns.some(pattern => typeof pattern === 'string'
     ? filepath === pattern
     : pattern.test(filepath),
   )

content/2.concepts/2.app-vue/.template/index.ts

@@ -6,4 +6,5 @@ export const meta: GuideMeta = {
     fileTree: true,
     navigation: false,
   },
+  ignoredFiles: ['package.json', 'server'],
 }

content/2.concepts/3.routing/.template/index.ts

@@ -5,4 +5,5 @@ export const meta: GuideMeta = {
   features: {
     fileTree: true,
   },
+  ignoredFiles: ['server'],
 }

stores/guide.ts

@@ -5,6 +5,7 @@ const defaultFeatures = Object.freeze(<PlaygroundFeatures>{
   fileTree: false,
   terminal: false,
   navigation: true,
+  download: true,
 })
 
 export const useGuideStore = defineStore('guide', () => {
@@ -17,6 +18,8 @@ export const useGuideStore = defineStore('guide', () => {
   const showingSolution = ref(false)
   const embeddedDocs = ref('')
 
+  const ignoredFiles = computed(() => transformGuideIgnoredFiles(currentGuide.value?.ignoredFiles))
+
   watch(features, () => {
     if (features.value.fileTree === true) {
       if (ui.panelFileTree <= 0)
@@ -73,6 +76,7 @@ export const useGuideStore = defineStore('guide', () => {
     showingSolution,
     embeddedDocs,
     openEmbeddedDocs,
+    ignoredFiles,
   }
 })
 

types/guides.ts

@@ -1,3 +1,7 @@
+export type StringOrRegExp = string | RegExp
+
+export interface GuideIgnoredFiles { overwrite: boolean, patterns: StringOrRegExp[] }
+
 export interface GuideMeta {
   features?: PlaygroundFeatures
   startingFile?: string
@@ -10,6 +14,20 @@ export interface GuideMeta {
   files?: Record<string, string>
   // TODO:
   solutions?: Record<string, string>
+
+  /**
+   * Ignored file patterns.
+   * Can be a list of strings or regex.
+   *
+   * @example
+   * // add to default patterns
+   * ignoredFiles: ['pnpm-lock.yaml']
+   *
+   * @example
+   * // overwrite default patterns
+   * ignoredFiles: { overwrite: true, patterns: ['pnpm-lock.yaml'] }
+   */
+  ignoredFiles?: StringOrRegExp[] | GuideIgnoredFiles
 }
 
 export interface PlaygroundFeatures {