fix: modify the generated routes code, compatible with loadable and s…

…wc (#4833)
web-infra-dev · Oct 24, 2023 · a614227 · a614227
1 parent 17b9554
commit a614227
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 12 deletions.
diff --git a/.changeset/giant-suns-punch.md b/.changeset/giant-suns-punch.md
@@ -0,0 +1,6 @@
+---
+'@modern-js/app-tools': patch
+---
+
+fix: modify the generated routes code, compatible with loadable and swc
+fix: 修改生成的 routes 代码，兼容 loadable 和 swc
diff --git a/packages/solutions/app-tools/src/analyze/templates.ts b/packages/solutions/app-tools/src/analyze/templates.ts
@@ -342,19 +342,19 @@ export const fileSystemRoutes = async ({
       if (route._component) {
         if (splitRouteChunks) {
           if (route.isRoot) {
-            lazyImport = `async function(){const routeModule = await import('${route._component}'); if(typeof document !== "undefined") window.${ROUTE_MODULES}["${route.id}"] = routeModule;return routeModule;}`;
+            lazyImport = `() => import('${route._component}').then(routeModule => {if(typeof document !== "undefined") window.${ROUTE_MODULES}["${route.id}"] = routeModule; return routeModule; }) `;
             rootLayoutCode = `import RootLayout from '${route._component}'`;
             component = `RootLayout`;
           } else if (ssrMode === 'string') {
-            lazyImport = `async function(){const routeModule = await import(/* webpackChunkName: "${route.id}" */  '${route._component}'); if(typeof document !== "undefined") window.${ROUTE_MODULES}["${route.id}"] = routeModule;return routeModule;}`;
+            lazyImport = `() => import(/* webpackChunkName: "${route.id}" */  '${route._component}').then(routeModule => {if(typeof document !== "undefined") window.${ROUTE_MODULES}["${route.id}"] = routeModule; return routeModule; }) `;
             component = `loadable(${lazyImport})`;
           } else {
             // csr and streaming
-            lazyImport = `async function(){const routeModule = await import(/* webpackChunkName: "${route.id}" */  '${route._component}'); if(typeof document !== "undefined") window.${ROUTE_MODULES}["${route.id}"] = routeModule;return routeModule;}`;
+            lazyImport = `() => import(/* webpackChunkName: "${route.id}" */  '${route._component}').then(routeModule => {if(typeof document !== "undefined") window.${ROUTE_MODULES}["${route.id}"] = routeModule; return routeModule; }) `;
             component = `lazy(${lazyImport})`;
           }
         } else {
-          lazyImport = `async function(){const routeModule = await import(/* webpackMode: "eager" */ '${route._component}'); if(typeof document !== "undefined") window.${ROUTE_MODULES}["${route.id}"] = routeModule;return routeModule;}`;
+          lazyImport = `() => import(/* webpackMode: "eager" */  '${route._component}').then(routeModule => {if(typeof document !== "undefined") window.${ROUTE_MODULES}["${route.id}"] = routeModule; return routeModule; }) `;
           if (ssrMode === 'string') {
             component = `loadable(${lazyImport})`;
           } else {

diff --git a/packages/solutions/app-tools/tests/analyze/__snapshots__/templates.test.ts.snap b/packages/solutions/app-tools/tests/analyze/__snapshots__/templates.test.ts.snap
@@ -52,21 +52,21 @@ import loader_1 from "@_modern_js_src/routes/layout.loader.ts";
               "id": "user/[id]/page",
               "loader": loader_0,
               "type": "nested",
-              "lazyImport": async function(){const routeModule = await import(/* webpackChunkName: "user/[id]/page" */  '@_modern_js_src/routes/user/[id]/page.tsx'); if(typeof document !== "undefined") window._routeModules["user/[id]/page"] = routeModule;return routeModule;},
-              "component": lazy(async function(){const routeModule = await import(/* webpackChunkName: "user/[id]/page" */  '@_modern_js_src/routes/user/[id]/page.tsx'); if(typeof document !== "undefined") window._routeModules["user/[id]/page"] = routeModule;return routeModule;}),
+              "lazyImport": () => import(/* webpackChunkName: "user/[id]/page" */  '@_modern_js_src/routes/user/[id]/page.tsx').then(routeModule => {if(typeof document !== "undefined") window._routeModules["user/[id]/page"] = routeModule; return routeModule; }) ,
+              "component": lazy(() => import(/* webpackChunkName: "user/[id]/page" */  '@_modern_js_src/routes/user/[id]/page.tsx').then(routeModule => {if(typeof document !== "undefined") window._routeModules["user/[id]/page"] = routeModule; return routeModule; }) ),
               "shouldRevalidate": createShouldRevalidate("user/[id]/page")
             }
           ],
           "lazyImport": null
         }
       ],
-      "lazyImport": async function(){const routeModule = await import(/* webpackChunkName: "user/layout" */  '@_modern_js_src/routes/user/layout.tsx'); if(typeof document !== "undefined") window._routeModules["user/layout"] = routeModule;return routeModule;},
-      "component": lazy(async function(){const routeModule = await import(/* webpackChunkName: "user/layout" */  '@_modern_js_src/routes/user/layout.tsx'); if(typeof document !== "undefined") window._routeModules["user/layout"] = routeModule;return routeModule;}),
+      "lazyImport": () => import(/* webpackChunkName: "user/layout" */  '@_modern_js_src/routes/user/layout.tsx').then(routeModule => {if(typeof document !== "undefined") window._routeModules["user/layout"] = routeModule; return routeModule; }) ,
+      "component": lazy(() => import(/* webpackChunkName: "user/layout" */  '@_modern_js_src/routes/user/layout.tsx').then(routeModule => {if(typeof document !== "undefined") window._routeModules["user/layout"] = routeModule; return routeModule; }) ),
       "shouldRevalidate": createShouldRevalidate("user/layout")
     }
   ],
-  "lazyImport": async function(){const routeModule = await import(/* webpackChunkName: "layout" */  '@_modern_js_src/routes/layout.tsx'); if(typeof document !== "undefined") window._routeModules["layout"] = routeModule;return routeModule;},
-  "component": lazy(async function(){const routeModule = await import(/* webpackChunkName: "layout" */  '@_modern_js_src/routes/layout.tsx'); if(typeof document !== "undefined") window._routeModules["layout"] = routeModule;return routeModule;})
+  "lazyImport": () => import(/* webpackChunkName: "layout" */  '@_modern_js_src/routes/layout.tsx').then(routeModule => {if(typeof document !== "undefined") window._routeModules["layout"] = routeModule; return routeModule; }) ,
+  "component": lazy(() => import(/* webpackChunkName: "layout" */  '@_modern_js_src/routes/layout.tsx').then(routeModule => {if(typeof document !== "undefined") window._routeModules["layout"] = routeModule; return routeModule; }) )
 },
 ];
   

diff --git a/tests/integration/routes/src/three/routes/user/[id]/page.tsx b/tests/integration/routes/src/three/routes/user/[id]/page.tsx
@@ -9,7 +9,7 @@ export const shouldRevalidate: ShouldRevalidateFunction = ({
 }) => {
   const revalidate = nextUrl.searchParams.get('revalidate');
   const flag = revalidate !== 'false';
-  if (revalidate) {
+  if (typeof revalidate === 'string') {
     return flag;
   }
   return defaultShouldRevalidate;

diff --git a/tests/integration/routes/tests/index.test.ts b/tests/integration/routes/tests/index.test.ts
@@ -555,9 +555,11 @@ const supportShouldRevalidateInSSR = async (
   appPort: number,
 ) => {
   expect(errors.length).toBe(0);
-  await page.goto(`http://localhost:${appPort}/three/user/111`, {
+  await page.goto(`http://localhost:${appPort}/three`, {
     waitUntil: ['networkidle0'],
   });
+  await page.click('.should-revalidate');
+  await new Promise(resolve => setTimeout(resolve, 300));
   const rootElm = await page.$('#root');
   const text = await page.evaluate(el => el?.textContent, rootElm);
   expect(text?.includes('param is 111')).toBeTruthy();