fix(unplugin): sanitize named view in definePage import (#2809)

* fix(unplugin): sanitize named view in definePage import

A named view whose name is not a valid identifier (e.g.
`index@side-bar.vue`) that uses definePage() with runtime properties
generated `import _definePage_side-bar_0 from ...`, which fails to parse.

* refactor: handle more cases

---------

Co-authored-by: Eduardo San Martin Morote <posva13@gmail.com>

Author: giaBaoJS

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

@@ -94,6 +94,27 @@ describe('generateRouteRecord', () => {
     expect(generateRouteRecordSimple(tree)).toMatchSnapshot()
   })
 
+  it('generates valid definePage imports for any named view name', () => {
+    const tree = new PrefixTree(DEFAULT_OPTIONS)
+    tree.insert('foo', 'foo.vue')
+    tree.insert('foo@side-bar', 'foo@side-bar.vue')
+    const node = tree.insert('foo@nav.top', 'foo@nav.top.vue')
+    node.setDefinePageImport('foo@side-bar.vue', true)
+    node.setDefinePageImport('foo@nav.top.vue', true)
+
+    const importsMap = new ImportsMap()
+    const routes = generateRouteRecords(tree, DEFAULT_OPTIONS, importsMap)
+
+    expect(importsMap.toString()).toMatchInlineSnapshot(`
+      "import _definePage_side_2d_bar_0 from 'foo@side-bar.vue?definePage&vue&lang.tsx'
+      import _definePage_nav_2e_top_1 from 'foo@nav.top.vue?definePage&vue&lang.tsx'
+      import { _mergeRouteRecord } from 'vue-router/experimental'
+      "
+    `)
+    expect(routes).toContain('_definePage_side_2d_bar_0,\n')
+    expect(routes).toContain('_definePage_nav_2e_top_1\n')
+  })
+
   it('nested children', () => {
     const tree = new PrefixTree(DEFAULT_OPTIONS)
     tree.insert('a/a', 'a/a.vue')

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

@@ -2,7 +2,7 @@ import { getLang } from '@vue-macros/common'
 import type { TreeNode } from '../core/tree'
 import type { ImportsMap } from '../core/utils'
 import { type ResolvedOptions } from '../options'
-import { pad, toStringLiteral } from '../utils'
+import { encodeImportIdentifierPart, pad, toStringLiteral } from '../utils'
 
 /**
  * Generate the route records for the given node.
@@ -39,7 +39,7 @@ ${node
   if (node.needsDefinePageImport) {
     for (const [name, filePath] of node.value.components) {
       if (!node.fileNeedsDefinePageImport(filePath)) continue
-      const pageDataImport = `_definePage_${name}_${importsMap.size}`
+      const pageDataImport = `_definePage_${encodeImportIdentifierPart(name)}_${importsMap.size}`
       definePageDataList.push(pageDataImport)
       const lang = getLang(filePath)
       importsMap.addDefault(

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

@@ -1297,6 +1297,29 @@ describe('generateRouteResolver', () => {
     expect(resolver).not.toContain('_definePage_sidebar_')
   })
 
+  it('generates valid definePage imports for any named view name', () => {
+    const tree = new PrefixTree(DEFAULT_OPTIONS)
+    tree.insert('dashboard', 'dashboard.vue')
+    const dashboardNode = tree.insert(
+      'dashboard@side-bar',
+      'dashboard@side-bar.vue'
+    )
+    dashboardNode.setDefinePageImport('dashboard@side-bar.vue', true)
+
+    const importsMap = new ImportsMap()
+    const resolver = generateRouteResolver(
+      tree,
+      DEFAULT_OPTIONS,
+      importsMap,
+      new Map()
+    )
+
+    expect(importsMap.toString()).toContain(
+      `import _definePage_side_2d_bar_0 from 'dashboard@side-bar.vue?definePage&vue&lang.tsx'`
+    )
+    expect(resolver).toContain('_definePage_side_2d_bar_0\n')
+  })
+
   it('includes query property in route records with query params', () => {
     const tree = new PrefixTree(DEFAULT_OPTIONS)
     tree.insert('search', 'search.vue')

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 type { ImportsMap } from '../core/utils'
 import { type ResolvedOptions } from '../options'
-import { toStringLiteral, ts } from '../utils'
+import { encodeImportIdentifierPart, toStringLiteral, ts } from '../utils'
 import type { ParamParsersMap } from './generateParamParsers'
 import {
   generatePathParamsOptions,
@@ -164,7 +164,7 @@ export function generateRouteRecord({
   if (node.needsDefinePageImport) {
     for (const [name, filePath] of node.value.components) {
       if (!node.fileNeedsDefinePageImport(filePath)) continue
-      const pageDataImport = `_definePage_${name}_${importsMap.size}`
+      const pageDataImport = `_definePage_${encodeImportIdentifierPart(name)}_${importsMap.size}`
       definePageDataList.push(pageDataImport)
       const lang = getLang(filePath)
       importsMap.addDefault(

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

@@ -67,3 +67,10 @@ export function formatMultilineUnion(items: string[], spaces: number): string {
 export function toStringLiteral(str: string): string {
   return `'${str.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`
 }
+
+export function encodeImportIdentifierPart(str: string): string {
+  return str.replace(
+    /[^A-Za-z0-9]/gu,
+    char => `_${char.codePointAt(0)!.toString(16)}_`
+  )
+}