@modern-js/app-tools 2.7.1-alpha.0 → 2.8.1-alpha.0

package/dist/esm-node/analyze/templates.js

@@ -1,6 +1,7 @@
 import path from "path";
-import { fs, slash } from "@modern-js/utils";
+import { fs, getEntryOptions, isSSGEntry, slash } from "@modern-js/utils";
 import { APP_CONFIG_NAME, TEMP_LOADERS_DIR } from "./constants";
+import { getServerLoadersFile } from "./utils";
 const index = ({
   mountId,
   imports,
@@ -147,11 +148,11 @@ const fileSystemRoutes = async ({
   internalDirectory,
   splitRoutesChunks = true
 }) => {
+  const components = [];
   const loadings = [];
   const errors = [];
   const loaders = [];
   const loadersMap = {};
-  const webpackMode = splitRoutesChunks ? "lazy" : "eager";
   const loadersMapFile = path.join(
     internalDirectory,
     entryName,
@@ -206,20 +207,30 @@ const fileSystemRoutes = async ({
         };
       }
       if (route._component) {
-        if (route.isRoot) {
-          rootLayoutCode = `import RootLayout from '${route._component}'`;
-          component = `RootLayout`;
-        } else if (ssrMode === "string") {
-          lazyImport = `() => import(/* webpackChunkName: "${route.id}" */ /* webpackMode: "${webpackMode}" */  '${route._component}')`;
-          component = `loadable(${lazyImport})`;
+        if (splitRoutesChunks) {
+          if (route.isRoot) {
+            rootLayoutCode = `import RootLayout from '${route._component}'`;
+            component = `RootLayout`;
+          } else if (ssrMode === "string") {
+            lazyImport = `() => import(/* webpackChunkName: "${route.id}" */  '${route._component}')`;
+            component = `loadable(${lazyImport})`;
+          } else {
+            lazyImport = `() => import(/* webpackChunkName: "${route.id}" */  '${route._component}')`;
+            component = `lazy(${lazyImport})`;
+          }
         } else {
-          lazyImport = `() => import(/* webpackChunkName: "${route.id}" */ /* webpackMode: "${webpackMode}" */  '${route._component}')`;
-          component = `lazy(${lazyImport})`;
+          components.push(route._component);
+          component = `component_${components.length - 1}`;
         }
       }
     } else if (route._component) {
-      lazyImport = `() => import( /* webpackMode: "${webpackMode}" */ '${route._component}')`;
-      component = `loadable(${lazyImport})`;
+      if (splitRoutesChunks) {
+        lazyImport = `() => import('${route._component}')`;
+        component = `loadable(${lazyImport})`;
+      } else {
+        components.push(route._component);
+        component = `component_${components.length - 1}`;
+      }
     }
     const finalRoute = {
       ...route,
@@ -240,20 +251,24 @@ const fileSystemRoutes = async ({
   for (const route of routes) {
     if ("type" in route) {
       const newRoute = traverseRouteTree(route);
-      routeComponentsCode += `${JSON.stringify(newRoute, null, 2).replace(/"(loadable.*\))"/g, "$1").replace(/"(loadableLazy.*\))"/g, "$1").replace(/"(\(\)[^,]+)",/g, "$1,").replace(/"(lazy\(.*\))"/g, "$1").replace(/"(loading_[^"])"/g, "$1").replace(/"(loader_[^"])"/g, "$1").replace(/"(RootLayout)"/g, "$1").replace(/"(error_[^"])"/g, "$1").replace(/\\"/g, '"')},`;
+      routeComponentsCode += `${JSON.stringify(newRoute, null, 2).replace(/"(loadable.*\))"/g, "$1").replace(/"(loadableLazy.*\))"/g, "$1").replace(/"(\(\)[^,]+)",/g, "$1,").replace(/("component":\s)"([^"]+)"/g, "$1$2").replace(/"(lazy\(.*\))"/g, "$1").replace(/"(loading_[^"])"/g, "$1").replace(/"(loader_[^"])"/g, "$1").replace(/"(RootLayout)"/g, "$1").replace(/"(error_[^"])"/g, "$1").replace(/\\"/g, '"')},`;
     } else {
       const component = `loadable(() => import('${route._component}'))`;
       const finalRoute = {
         ...route,
         component
       };
-      routeComponentsCode += `${JSON.stringify(finalRoute, null, 2).replace(/"(loadable[^"]*)"/g, "$1").replace(/"(lazy[^"]*)"/g, "$1")},`;
+      routeComponentsCode += `${JSON.stringify(finalRoute, null, 2).replace(/"(loadable[^"]*)"/g, "$1").replace(/"(\(\)[^,]+)",/g, "$1,").replace(/"(lazy[^"]*)"/g, "$2")},`;
     }
   }
   routeComponentsCode += `
 ];`;
   const importLoadingCode = loadings.map((loading, index2) => {
     return `import loading_${index2} from '${loading}';
+`;
+  }).join("");
+  const importComponentsCode = components.map((component, index2) => {
+    return `import component_${index2} from '${component}';
 `;
   }).join("");
   const importErrorComponentsCode = errors.map((error, index2) => {
@@ -278,6 +293,7 @@ const fileSystemRoutes = async ({
   await fs.writeJSON(loadersMapFile, loadersMap);
   return `
     ${importLazyCode}
+    ${importComponentsCode}
     ${rootLayoutCode}
     ${importLoadingCode}
     ${importErrorComponentsCode}
@@ -285,10 +301,34 @@ const fileSystemRoutes = async ({
     ${routeComponentsCode}
   `;
 };
+function ssrLoaderCombinedModule(entrypoints, entrypoint, config, appContext) {
+  const { entryName } = entrypoint;
+  const { packageName, internalDirectory } = appContext;
+  const ssr = getEntryOptions(
+    entryName,
+    config.server.ssr,
+    config.server.ssrByEntries,
+    packageName
+  );
+  const ssg = isSSGEntry(config, entryName, entrypoints);
+  if (entrypoint.nestedRoutesEntry && (ssr || ssg)) {
+    const serverLoaderRuntime = require.resolve("@modern-js/plugin-data-loader/runtime");
+    const serverLoadersFile = getServerLoadersFile(
+      internalDirectory,
+      entryName
+    );
+    const combinedModule = `export * from "${slash(
+      serverLoaderRuntime
+    )}"; export * from "${slash(serverLoadersFile)}"`;
+    return combinedModule;
+  }
+  return null;
+}
 export {
   fileSystemRoutes,
   html,
   index,
   renderFunction,
-  routesForServer
+  routesForServer,
+  ssrLoaderCombinedModule
 };

package/dist/esm-node/analyze/utils.js

@@ -84,7 +84,15 @@ const isPageComponentFile = (filePath) => {
   }
   return false;
 };
-const replaceWithAlias = (base, filePath, alias) => normalizeToPosixPath(path.join(alias, path.relative(base, filePath)));
+const replaceWithAlias = (base, filePath, alias) => {
+  if (filePath.includes(base)) {
+    return normalizeToPosixPath(
+      path.join(alias, path.relative(base, filePath))
+    );
+  } else {
+    return filePath;
+  }
+};
 const parseModule = async ({
   source,
   filename
@@ -110,8 +118,12 @@ const hasLoader = async (filename) => {
 const getServerLoadersFile = (internalDirectory, entryName) => {
   return path.join(internalDirectory, entryName, "route-server-loaders.js");
 };
+const getServerCombinedModueFile = (internalDirectory, entryName) => {
+  return path.join(internalDirectory, entryName, "server-loader-combined.js");
+};
 export {
   getDefaultImports,
+  getServerCombinedModueFile,
   getServerLoadersFile,
   hasLoader,
   isPageComponentFile,

package/dist/esm-node/builder/index.js

@@ -5,7 +5,7 @@ async function createBuilderGenerator(bundler) {
       return createRspackBuilderForModern;
     } catch (_) {
       throw new Error(
-        "Failed to use rspack, please check if you have `@modern-js/builder-rspack-provider` installed"
+        "Failed to use Rspack, please check if you have `@modern-js/builder-rspack-provider` installed"
       );
     }
   }

package/dist/esm-node/builder/shared/builderPlugins/adapterSSR.js

@@ -1,7 +1,9 @@
 import {
   mergeBuilderConfig
 } from "@modern-js/builder-shared";
+import { fs } from "@modern-js/utils";
 import { HtmlAsyncChunkPlugin, RouterPlugin } from "../bundlerPlugins";
+import { getServerCombinedModueFile } from "../../../analyze/utils";
 import { isHtmlEnabled } from "./adapterHtml";
 const builderPluginAdapterSSR = (options) => ({
   name: "builder-plugin-adapter-modern-ssr",
@@ -18,9 +20,10 @@ const builderPluginAdapterSSR = (options) => ({
       return config;
     });
     api.modifyBundlerChain(
-      (chain, { target, CHAIN_ID, isProd, HtmlPlugin: HtmlBundlerPlugin }) => {
+      async (chain, { target, CHAIN_ID, isProd, HtmlPlugin: HtmlBundlerPlugin, isServer }) => {
         const builderConfig = api.getNormalizedConfig();
         applyRouterPlugin(chain, options);
+        await applySSRLoaderEntry(chain, options, isServer);
         if (["node", "service-worker"].includes(target)) {
           applyFilterEntriesBySSRConfig({
             isProd,
@@ -114,6 +117,27 @@ function applyFilterEntriesBySSRConfig({
     }
   });
 }
+async function applySSRLoaderEntry(chain, optinos, isServer) {
+  const { appContext } = optinos;
+  const { internalDirectory } = appContext;
+  const { entrypoints } = appContext;
+  await Promise.all(
+    entrypoints.map(async (entrypoint) => {
+      const { entryName } = entrypoint;
+      const serverLoadersFile = getServerCombinedModueFile(
+        internalDirectory,
+        entryName
+      );
+      if (isServer) {
+        try {
+          await fs.access(serverLoadersFile, fs.constants.F_OK);
+          chain.entry(`${entryName}-server-loaders`).add(serverLoadersFile);
+        } catch (err) {
+        }
+      }
+    })
+  );
+}
 export {
   builderPluginAdapterSSR
 };

package/dist/esm-node/builder/shared/bundlerPlugins/RouterPlugin.js

@@ -80,6 +80,9 @@ class RouterPlugin {
           );
           for (const file of entryChunkFiles) {
             const asset = compilation.assets[file];
+            if (!asset) {
+              continue;
+            }
             const newContent = `${injectedContent}${asset.source().toString()}`;
             newAssetsMap.set(path.join(outputPath, file), newContent);
             compilation.updateAsset(

package/dist/types/analyze/templates.d.ts

@@ -1,5 +1,5 @@
 import type { Entrypoint, NestedRoute, PageRoute, RouteLegacy, SSRMode } from '@modern-js/types';
-import type { RuntimePlugin } from '../types';
+import type { AppNormalizedConfig, IAppContext, RuntimePlugin } from '../types';
 export declare const index: ({
   mountId,
   imports,
@@ -44,4 +44,5 @@ export declare const fileSystemRoutes: ({
   entryName: string;
   internalDirectory: string;
   splitRoutesChunks?: boolean | undefined;
-}) => Promise<string>;
+}) => Promise<string>;
+export declare function ssrLoaderCombinedModule(entrypoints: Entrypoint[], entrypoint: Entrypoint, config: AppNormalizedConfig<'shared'>, appContext: IAppContext): string | null;

package/dist/types/analyze/utils.d.ts

@@ -24,4 +24,5 @@ export declare const parseModule: ({
   filename: string;
 }) => Promise<readonly [imports: readonly import("es-module-lexer").ImportSpecifier[], exports: readonly import("es-module-lexer").ExportSpecifier[], facade: boolean]>;
 export declare const hasLoader: (filename: string) => Promise<boolean>;
-export declare const getServerLoadersFile: (internalDirectory: string, entryName: string) => string;
+export declare const getServerLoadersFile: (internalDirectory: string, entryName: string) => string;
+export declare const getServerCombinedModueFile: (internalDirectory: string, entryName: string) => string;

package/package.json

@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.7.1-alpha.0",
+  "version": "2.8.1-alpha.0",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/cjs/index.js",
@@ -62,41 +62,41 @@
     "@babel/runtime": "^7.18.0",
     "@babel/traverse": "^7.18.0",
     "@babel/types": "^7.18.0",
-    "@modern-js/builder": "2.7.0",
-    "@modern-js/builder-plugin-esbuild": "2.7.0",
-    "@modern-js/builder-plugin-node-polyfill": "2.7.0",
-    "@modern-js/builder-shared": "2.7.0",
-    "@modern-js/builder-webpack-provider": "2.7.0",
-    "@modern-js/core": "2.7.0",
-    "@modern-js/new-action": "2.7.0",
-    "@modern-js/node-bundle-require": "2.7.0",
-    "@modern-js/plugin": "2.7.0",
-    "@modern-js/plugin-data-loader": "2.7.0",
-    "@modern-js/plugin-i18n": "2.7.0",
-    "@modern-js/plugin-lint": "2.7.0",
-    "@modern-js/prod-server": "2.7.0",
-    "@modern-js/server": "2.7.0",
-    "@modern-js/types": "2.7.0",
-    "@modern-js/upgrade": "2.7.0",
-    "@modern-js/utils": "2.7.0",
     "es-module-lexer": "^1.1.0",
-    "esbuild": "0.15.7"
+    "esbuild": "0.15.7",
+    "@modern-js/builder": "2.8.0",
+    "@modern-js/builder-shared": "2.8.0",
+    "@modern-js/builder-webpack-provider": "2.8.0",
+    "@modern-js/builder-plugin-node-polyfill": "2.8.0",
+    "@modern-js/core": "2.8.0",
+    "@modern-js/new-action": "2.8.0",
+    "@modern-js/plugin": "2.8.0",
+    "@modern-js/plugin-data-loader": "2.8.0",
+    "@modern-js/plugin-lint": "2.8.0",
+    "@modern-js/prod-server": "2.8.0",
+    "@modern-js/node-bundle-require": "2.8.0",
+    "@modern-js/builder-plugin-esbuild": "2.8.0",
+    "@modern-js/types": "2.8.0",
+    "@modern-js/upgrade": "2.8.0",
+    "@modern-js/server": "2.8.0",
+    "@modern-js/utils": "2.8.0",
+    "@modern-js/plugin-i18n": "2.8.0"
   },
   "devDependencies": {
-    "@modern-js/builder-plugin-swc": "2.7.0",
-    "@modern-js/builder-rspack-provider": "2.7.0",
-    "@modern-js/server-core": "2.7.0",
-    "@scripts/build": "2.7.0",
-    "@scripts/jest-config": "2.7.0",
     "@types/babel__traverse": "^7.14.2",
     "@types/jest": "^27",
     "@types/node": "^14",
     "jest": "^27",
     "typescript": "^4",
-    "webpack": "^5.75.0"
+    "webpack": "^5.75.0",
+    "@modern-js/server-core": "2.8.0",
+    "@modern-js/builder-rspack-provider": "2.8.0",
+    "@scripts/build": "2.8.0",
+    "@scripts/jest-config": "2.8.0",
+    "@modern-js/builder-plugin-swc": "2.8.0"
   },
   "peerDependencies": {
-    "@modern-js/builder-rspack-provider": "^2.7.0"
+    "@modern-js/builder-rspack-provider": "^2.8.0"
   },
   "peerDependenciesMeta": {
     "@modern-js/builder-rspack-provider": {