fix(build): better align server and client side filename sanitization (vuejs#1488)

Author: brc-dd

src/client/app/utils.ts

@@ -1,5 +1,5 @@
 import { siteDataRef } from './data.js'
-import { inBrowser, EXTERNAL_URL_RE } from '../shared.js'
+import { inBrowser, EXTERNAL_URL_RE, sanitizeFileName } from '../shared.js'
 
 export { inBrowser }
 
@@ -36,14 +36,18 @@ export function pathToFile(path: string): string {
     if (inBrowser) {
       const base = import.meta.env.BASE_URL
       pagePath =
-        (pagePath.slice(base.length).replace(/\//g, '_') || 'index') + '.md'
+        sanitizeFileName(
+          pagePath.slice(base.length).replace(/\//g, '_') || 'index'
+        ) + '.md'
       // client production build needs to account for page hash, which is
       // injected directly in the page's html
       const pageHash = __VP_HASH_MAP__[pagePath.toLowerCase()]
       pagePath = `${base}assets/${pagePath}.${pageHash}.js`
     } else {
       // ssr build uses much simpler name mapping
-      pagePath = `./${pagePath.slice(1).replace(/\//g, '_')}.md.js`
+      pagePath = `./${sanitizeFileName(
+        pagePath.slice(1).replace(/\//g, '_')
+      )}.md.js`
     }
   }
 

src/node/build/bundle.ts

@@ -7,6 +7,7 @@ import { slash } from '../utils/slash'
 import { SiteConfig } from '../config'
 import { APP_PATH } from '../alias'
 import { createVitePressPlugin } from '../plugin'
+import { sanitizeFileName } from '../shared'
 import { buildMPAClient } from './buildMPAClient'
 
 export const okMark = '\x1b[32m✓\x1b[0m'
@@ -68,6 +69,7 @@ export async function bundle(
         // other
         preserveEntrySignatures: 'allow-extension',
         output: {
+          sanitizeFileName,
           ...rollupOptions?.output,
           ...(ssr
             ? {

src/node/build/render.ts

@@ -10,7 +10,8 @@ import {
   createTitle,
   notFoundPageData,
   mergeHead,
-  EXTERNAL_URL_RE
+  EXTERNAL_URL_RE,
+  sanitizeFileName
 } from '../shared'
 import { slash } from '../utils/slash'
 import { SiteConfig, resolveSiteDataByRoute } from '../config'
@@ -31,7 +32,7 @@ export async function renderPage(
   // render page
   const content = await render(routePath)
 
-  const pageName = page.replace(/\//g, '_')
+  const pageName = sanitizeFileName(page.replace(/\//g, '_'))
   // server build doesn't need hash
   const pageServerJsFileName = pageName + '.js'
   // for any initial page load, we only need the lean version of the page js

src/shared/shared.ts

@@ -161,3 +161,21 @@ function hasTag(head: HeadConfig[], tag: HeadConfig) {
 export function mergeHead(prev: HeadConfig[], curr: HeadConfig[]) {
   return [...prev.filter((tagAttrs) => !hasTag(curr, tagAttrs)), ...curr]
 }
+
+// https://github.com/rollup/rollup/blob/fec513270c6ac350072425cc045db367656c623b/src/utils/sanitizeFileName.ts
+
+const INVALID_CHAR_REGEX = /[\u0000-\u001F"#$&*+,:;<=>?[\]^`{|}\u007F]/g
+const DRIVE_LETTER_REGEX = /^[a-z]:/i
+
+export function sanitizeFileName(name: string): string {
+  const match = DRIVE_LETTER_REGEX.exec(name)
+  const driveLetter = match ? match[0] : ''
+
+  return (
+    driveLetter +
+    name
+      .slice(driveLetter.length)
+      .replace(INVALID_CHAR_REGEX, '_')
+      .replace(/(^|\/)_+(?=[^/]*$)/, '$1')
+  )
+}