fix: import identifier is invalid in route config (#6265)

* fix: import identifier is invalid in route config * chore: changeset
alibaba · May 24, 2023 · f652be7 · f652be7
1 parent a4b8514
commit f652be7
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 3 deletions.
diff --git a/.changeset/long-tomatoes-drum.md b/.changeset/long-tomatoes-drum.md
@@ -0,0 +1,5 @@
+---
+'@ice/app': patch
+---
+
+fix: import identifier is invalid in route config
diff --git a/examples/routes-generate/ice.config.mts b/examples/routes-generate/ice.config.mts
@@ -6,6 +6,7 @@ export default defineConfig(() => ({
     ignoreFiles: ['about.tsx', 'products.tsx'],
     defineRoutes: (route) => {
       route('/about-me', 'about.tsx');
+      route('/about.html', 'about.tsx');
 
       route('/', 'layout.tsx', () => {
         route('/product', 'products.tsx');

diff --git a/examples/routes-generate/src/pages/about.tsx b/examples/routes-generate/src/pages/about.tsx
@@ -1,6 +1,10 @@
 import * as React from 'react';
-import { Link } from 'ice';
+import { Link, definePageConfig } from 'ice';
 
 export default function About() {
   return <><h2>About</h2><Link to="/">home</Link></>;
 }
+
+export const pageConfig = definePageConfig(() => ({
+
+}));
diff --git a/packages/ice/src/routes.ts b/packages/ice/src/routes.ts
@@ -66,7 +66,7 @@ export function getRoutesDefinition(nestRouteManifest: NestedRouteManifest[], la
     if (lazy) {
       loadStatement = `import(/* webpackChunkName: "p_${componentName}" */ '${formatPath(componentPath)}')`;
     } else {
-      const routeSpecifier = id.replace(/[./-]/g, '_').replace(/[:*]/g, '$');
+      const routeSpecifier = formatRouteSpecifier(id);
       routeImports.push(`import * as ${routeSpecifier} from '${formatPath(componentPath)}';`);
       loadStatement = routeSpecifier;
     }
@@ -145,7 +145,7 @@ function generateRouteConfig(
         const componentFile = file.replace(new RegExp(`${fileExtname}$`), '');
         const componentPath = path.isAbsolute(componentFile) ? componentFile : `@/pages/${componentFile}`;
 
-        const loaderName = `${exportKey}_${id}`.replace(/[-/]/g, '_');
+        const loaderName = formatRouteSpecifier(`${exportKey}_${id}`);
         const fullPath = path.join(parentPath, routePath);
         imports.push([id, loaderName, fullPath]);
         str = `import { ${exportKey} as ${loaderName} } from '${componentPath}';\n`;
@@ -162,3 +162,7 @@ function generateRouteConfig(
   }
   return template(importConfig(routes, ''), imports);
 }
+
+function formatRouteSpecifier(routeId: string) {
+  return routeId.replace(/[./-]/g, '_').replace(/[:*]/g, '$');
+}