fix(create-project): improve templates

vitejs · Feb 19, 2024 · 016cf6f · 016cf6f
1 parent 708440c
commit 016cf6f
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 24 deletions.
diff --git a/packages/create-project/package.json b/packages/create-project/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-vite-pages",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "keywords": [
     "vite",
     "react",

diff --git a/packages/create-project/template-lib-monorepo/packages/demos/vite.config.ts b/packages/create-project/template-lib-monorepo/packages/demos/vite.config.ts
@@ -19,17 +19,24 @@ export default defineConfig({
               basePath,
               '*/demos/**/*.{[tj]sx,md?(x)}',
               async function fileHandler(file, api) {
-                const { relative, path: absolute } = file
+                const { relative, path: demoFilePath } = file
                 const match = relative.match(
                   /(.*)\/demos\/(.*)\.([tj]sx|mdx?)$/
                 )
-                if (!match) throw new Error('unexpected file: ' + absolute)
+                if (!match) throw new Error('unexpected file: ' + demoFilePath)
                 const [_, componentName, demoName] = match
                 const pageId = `/components/demos/${componentName}`
-                // set page data
-                const runtimeDataPaths = api.getRuntimeData(pageId)
-                // the ?demo query will wrap the module with useful demoInfo
-                runtimeDataPaths[demoName] = `${absolute}?demo`
+                // register page data
+                api.addPageData({
+                  pageId,
+                  key: demoName,
+                  // register demo runtime data path
+                  // it will be consumed by theme-doc
+                  // the ?demo query will wrap the module with useful demoInfo
+                  dataPath: `${demoFilePath}?demo`,
+                  // register demo static data
+                  staticData: await helpers.extractStaticData(file),
+                })
               }
             )
           }
@@ -39,17 +46,28 @@ export default defineConfig({
             basePath,
             '*/README.md?(x)',
             async function fileHandler(file, api) {
-              const { relative, path: absolute } = file
+              const { relative, path: markdownFilePath } = file
               const match = relative.match(/(.*)\/README\.mdx?$/)
-              if (!match) throw new Error('unexpected file: ' + absolute)
+              if (!match)
+                throw new Error('unexpected file: ' + markdownFilePath)
               const [_, componentName] = match
               const pageId = `/components/${componentName}`
-              // set page data
-              const runtimeDataPaths = api.getRuntimeData(pageId)
-              runtimeDataPaths.main = absolute
-              // set page staticData
-              const staticData = api.getStaticData(pageId)
-              staticData.main = await helpers.extractStaticData(file)
+              // register page data
+              api.addPageData({
+                pageId,
+                // register page component
+                dataPath: markdownFilePath,
+                // register static data
+                staticData: await helpers.extractStaticData(file),
+              })
+              // register outlineInfo data
+              // it will be consumed by theme-doc
+              api.addPageData({
+                pageId,
+                key: 'outlineInfo',
+                // the ?outlineInfo query will extract title info from the markdown file and return the data as a js module
+                dataPath: `${markdownFilePath}?outlineInfo`,
+              })
             }
           )
         },

diff --git a/packages/create-project/template-lib/docs/vite.config.ts b/packages/create-project/template-lib/docs/vite.config.ts
@@ -18,21 +18,21 @@ export default defineConfig({
               srcPath,
               '*/demos/**/*.{[tj]sx,md?(x)}',
               async function fileHandler(file, api) {
-                const { relative, path: absolute } = file
+                const { relative, path: demoFilePath } = file
                 const match = relative.match(
                   /(.*)\/demos\/(.*)\.([tj]sx|mdx?)$/
                 )
-                if (!match) throw new Error('unexpected file: ' + absolute)
+                if (!match) throw new Error('unexpected file: ' + demoFilePath)
                 const [_, componentName, demoName] = match
                 const pageId = `/components/demos/${componentName}`
                 // register page data
                 api.addPageData({
                   pageId,
                   key: demoName,
                   // register demo runtime data path
+                  // it will be consumed by theme-doc
                   // the ?demo query will wrap the module with useful demoInfo
-                  // that will be consumed by theme-doc
-                  dataPath: `${absolute}?demo`,
+                  dataPath: `${demoFilePath}?demo`,
                   // register demo static data
                   staticData: await helpers.extractStaticData(file),
                 })
@@ -45,19 +45,28 @@ export default defineConfig({
             srcPath,
             '*/README.md?(x)',
             async function fileHandler(file, api) {
-              const { relative, path: absolute } = file
+              const { relative, path: markdownFilePath } = file
               const match = relative.match(/(.*)\/README\.mdx?$/)
-              if (!match) throw new Error('unexpected file: ' + absolute)
+              if (!match)
+                throw new Error('unexpected file: ' + markdownFilePath)
               const [_, componentName] = match
               const pageId = `/components/${componentName}`
               // register page data
               api.addPageData({
                 pageId,
-                // register demo runtime data path
-                dataPath: absolute,
-                // register demo static data
+                // register page component
+                dataPath: markdownFilePath,
+                // register static data
                 staticData: await helpers.extractStaticData(file),
               })
+              // register outlineInfo data
+              // it will be consumed by theme-doc
+              api.addPageData({
+                pageId,
+                key: 'outlineInfo',
+                // the ?outlineInfo query will extract title info from the markdown file and return the data as a js module
+                dataPath: `${markdownFilePath}?outlineInfo`,
+              })
             }
           )
         },