fix: escape tildes in paths

Fix posva/unplugin-vue-router#785

Author: posva

packages/playground-file-based/src/pages/it's-fine/(lol).vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+</script>
+
+<template>
+  <h2>{{ route.path }}</h2>
+</template>

packages/playground-file-based/src/routes.d.ts

@@ -120,6 +120,13 @@ declare module 'vue-router/auto-routes' {
       { when: Extract<Param_date, unknown[]> },
       | never
     >,
+    '/it\'s-fine/(lol)': RouteRecordInfo<
+      '/it\'s-fine/(lol)',
+      '/it\'s-fine',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
     '/nested/': RouteRecordInfo<
       '/nested/',
       '/nested',
@@ -296,6 +303,12 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
+    'src/pages/it's-fine/(lol).vue': {
+      routes:
+        | '/it\'s-fine/(lol)'
+      views:
+        | never
+    }
     'src/pages/nested.vue': {
       routes:
         | '/nested/'

packages/router/src/unplugin/codegen/__snapshots__/generateRouteRecords.spec.ts.snap

@@ -82,9 +82,9 @@ exports[`generateRouteRecord > does not encode RFC 3986 valid path characters 1`
     /* no children */
   },
   {
-    path: '/it's-fine',
-    name: '/it's-fine',
-    component: () => import('it's-fine.vue'),
+    path: '/it\\'s-fine',
+    name: '/it\\'s-fine',
+    component: () => import('it\\'s-fine.vue'),
     /* no children */
   },
   {

packages/router/src/unplugin/codegen/__snapshots__/generateRouteResolver.spec.ts.snap

@@ -27,10 +27,10 @@ const __route_2 = normalizeRouteRecord({
 })
 
 const __route_3 = normalizeRouteRecord({
-  name: '/it's-fine',
-  path: new MatcherPatternPathStatic('/it's-fine'),
+  name: '/it\\'s-fine',
+  path: new MatcherPatternPathStatic('/it\\'s-fine'),
   components: {
-    'default': () => import('it's-fine.vue')
+    'default': () => import('it\\'s-fine.vue')
   },
 })
 

packages/router/src/unplugin/codegen/generateRouteFileInfoMap.ts

@@ -1,6 +1,6 @@
 import { relative } from 'pathe'
 import type { PrefixTree, TreeNode } from '../core/tree'
-import { formatMultilineUnion, stringToStringType } from '../utils'
+import { formatMultilineUnion, toStringLiteral } from '../utils'
 
 export function generateRouteFileInfoMap(
   node: PrefixTree,
@@ -44,9 +44,9 @@ export function generateRouteFileInfoMap(
         `
   '${file}': {
     routes:
-      ${formatMultilineUnion(routes.sort().map(stringToStringType), 6)}
+      ${formatMultilineUnion(routes.sort().map(toStringLiteral), 6)}
     views:
-      ${formatMultilineUnion(views.sort().map(stringToStringType), 6)}
+      ${formatMultilineUnion(views.sort().map(toStringLiteral), 6)}
   }`
     )
     .join('\n')

packages/router/src/unplugin/codegen/generateRouteMap.ts

@@ -5,7 +5,7 @@ import {
   EXPERIMENTAL_generateRouteParams,
   generateRouteParams,
 } from './generateRouteParams'
-import { pad, formatMultilineUnion, stringToStringType } from '../utils'
+import { pad, formatMultilineUnion, toStringLiteral } from '../utils'
 
 export function generateRouteNamedMap(
   node: TreeNode,
@@ -26,7 +26,7 @@ ${node
     (node.value.components.size && node.isNamed()
       ? pad(
           2,
-          `${stringToStringType(node.name)}: ${generateRouteRecordInfo(node, options, paramParsersMap)},\n`
+          `${toStringLiteral(node.name)}: ${generateRouteRecordInfo(node, options, paramParsersMap)},\n`
         )
       : '') +
     (node.children.size > 0
@@ -49,8 +49,8 @@ export function generateRouteRecordInfo(
   }
 
   const typeParams = [
-    stringToStringType(node.name),
-    stringToStringType(node.fullPath),
+    toStringLiteral(node.name),
+    toStringLiteral(node.fullPath),
     options.experimental.paramParsers
       ? EXPERIMENTAL_generateRouteParams(node, paramParsers, true)
       : generateRouteParams(node, true),
@@ -73,9 +73,7 @@ export function generateRouteRecordInfo(
           .sort()
       : []
 
-  typeParams.push(
-    formatMultilineUnion(childRouteNames.map(stringToStringType), 4)
-  )
+  typeParams.push(formatMultilineUnion(childRouteNames.map(toStringLiteral), 4))
 
   return `RouteRecordInfo<
 ${typeParams.map(line => pad(4, line)).join(',\n')}

packages/router/src/unplugin/codegen/generateRouteRecords.ts

@@ -2,7 +2,7 @@ import { getLang } from '@vue-macros/common'
 import type { TreeNode } from '../core/tree'
 import { ImportsMap } from '../core/utils'
 import { type ResolvedOptions } from '../options'
-import { pad, stringToStringType } from '../utils'
+import { pad, toStringLiteral } from '../utils'
 
 /**
  * Generate the route records for the given node.
@@ -57,14 +57,14 @@ ${node
 
   // path
   const routeRecord = `${startIndent}{
-${indentStr}path: '${node.path}',
+${indentStr}path: ${toStringLiteral(node.path)},
 ${indentStr}${
     node.value.components.size
       ? node.isNamed()
-        ? `name: ${stringToStringType(node.name)},`
+        ? `name: ${toStringLiteral(node.name)},`
         : `/* no name */`
       : // node.name can still be false and we don't want that to result in string literal 'false'
-        `/* internal name: ${typeof node.name === 'string' ? stringToStringType(node.name) : node.name} */`
+        `/* internal name: ${typeof node.name === 'string' ? toStringLiteral(node.name) : node.name} */`
   }
 ${
   // component
@@ -126,7 +126,7 @@ function generateRouteRecordComponent(
 ${files
   .map(
     ([key, path]) =>
-      `${indentStr + '  '}'${key}': ${generatePageImport(path, importMode, importsMap)}`
+      `${indentStr + '  '}${toStringLiteral(key)}: ${generatePageImport(path, importMode, importsMap)}`
   )
   .join(',\n')}
 ${indentStr}},`
@@ -148,7 +148,7 @@ export function generatePageImport(
   const mode =
     typeof importMode === 'function' ? importMode(filepath) : importMode
   if (mode === 'async') {
-    return `() => import('${filepath}')`
+    return `() => import(${toStringLiteral(filepath)})`
   }
   // mode === 'sync'
   // return the name of the import e.g. `_page_0` for `import _page_0 from '...'`

packages/router/src/unplugin/codegen/generateRouteResolver.ts

@@ -2,7 +2,7 @@ import { getLang } from '@vue-macros/common'
 import { PrefixTree, type TreeNode } from '../core/tree'
 import { ImportsMap } from '../core/utils'
 import { type ResolvedOptions } from '../options'
-import { ts } from '../utils'
+import { toStringLiteral, ts } from '../utils'
 import {
   generatePathParamsOptions,
   generateParamParserOptions,
@@ -167,10 +167,10 @@ export function generateRouteRecord({
         varName,
         score: node.score,
       })
-      recordName = `name: '${node.name}',`
+      recordName = `name: ${toStringLiteral(node.name)},`
     } else {
       recordName = node.name
-        ? `/* (internal) name: '${node.name}' */`
+        ? `/* (internal) name: ${toStringLiteral(node.name)} */`
         : `/* (removed) name: false */`
     }
 
@@ -242,7 +242,7 @@ function generateRouteRecordComponent(
 ${files
   .map(
     ([key, path]) =>
-      `${indentStr + '  '}'${key}': ${generatePageImport(path, importMode, importsMap)}`
+      `${indentStr + '  '}${toStringLiteral(key)}: ${generatePageImport(path, importMode, importsMap)}`
   )
   .join(',\n')}
 ${indentStr}},`
@@ -286,7 +286,7 @@ export function generateRouteRecordPath({
     ${node.isSplat ? 'null,' : '/* trailingSlash */'}
   ),`
   } else {
-    return `path: new MatcherPatternPathStatic('${node.fullPath}'),`
+    return `path: new MatcherPatternPathStatic(${toStringLiteral(node.fullPath)}),`
   }
 }
 

packages/router/src/unplugin/core/utils.ts

@@ -6,6 +6,7 @@ import {
   RoutesFolderOptionResolved,
   _OverridableOption,
 } from '../options'
+import { toStringLiteral } from '../utils'
 
 export function warn(
   msg: string,
@@ -366,6 +367,8 @@ export class ImportsMap {
     for (const [path, imports] of this.map) {
       if (!imports.size) continue
 
+      const fromImportPath = toStringLiteral(path)
+
       // only one import and it's the default one
       if (imports.size === 1) {
         // we extract the first and only entry
@@ -374,13 +377,13 @@ export class ImportsMap {
         ]
         // we only care if this is the default import
         if (maybeDefault === 'default') {
-          importStatements += `import ${importName} from '${path}'\n`
+          importStatements += `import ${importName} from ${fromImportPath}\n`
           continue
         }
       }
       importStatements += `import { ${Array.from(imports)
         .map(([as, name]) => (as === name ? name : `${name} as ${as}`))
-        .join(', ')} } from '${path}'\n`
+        .join(', ')} } from ${fromImportPath}\n`
     }
 
     return importStatements

packages/router/src/unplugin/utils/index.ts

@@ -55,15 +55,16 @@ export function formatMultilineUnion(items: string[], spaces: number): string {
 }
 
 /**
- * Converts a string value to a TS string literal type.
+ * Converts a string value to a string literal, escaping as necessary.
  *
  * @internal
  *
  * @param str the string to convert to a string type
- * @returns The string wrapped in single quotes.
+ * @returns The string wrapped in single quotes and escaped.
  * @example
- * stringToStringType('hello') // returns "'hello'"
+ * toStringLiteral('hello') // returns "'hello'"
+ * toStringLiteral("it's fine") // returns "'it\'s fine'"
  */
-export function stringToStringType(str: string): string {
-  return `'${str}'`
+export function toStringLiteral(str: string): string {
+  return `'${str.replace(/'/g, "\\'")}'`
 }