@modern-js/app-tools 2.30.1-alpha.0 → 2.31.0

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

@@ -1,9 +1,12 @@
-import path from "path";
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { createHash } from "crypto";
 import { mergeWith } from "@modern-js/utils/lodash";
 import { ROUTE_MANIFEST_FILE } from "@modern-js/utils";
 import { ROUTE_MANIFEST } from "@modern-js/utils/universal/constants";
-import { transform } from "esbuild";
 const PLUGIN_NAME = "ModernjsRoutePlugin";
+const generateContentHash = (content) => {
+  return createHash("md5").update(content).digest("hex").slice(0, 8);
+};
 export class RouterPlugin {
   isTargetNodeOrWebWorker(target) {
     if (target === "node" || Array.isArray(target) && target.includes("node")) {
@@ -37,76 +40,23 @@ export class RouterPlugin {
     }
     const { webpack } = compiler;
     const { Compilation, sources } = webpack;
-    const { RawSource, SourceMapSource } = sources;
-    const normalizePath = (path2) => {
-      if (!path2.endsWith("/")) {
-        return `${path2}/`;
+    const { RawSource } = sources;
+    const normalizePath = (path) => {
+      if (!path.endsWith("/")) {
+        return `${path}/`;
       }
-      return path2;
+      return path;
     };
-    const chunkToSource = /* @__PURE__ */ new Map();
-    const chunkToMap = /* @__PURE__ */ new Map();
-    const { minimize } = compiler.options.optimization;
+    const chunksToHtmlName = /* @__PURE__ */ new Map();
+    const ROUTE_MANIFEST_HOLDER = `route-manifest`;
+    const placeholder = `<!--<?- ${ROUTE_MANIFEST_HOLDER} ?>-->`;
     compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
-      compilation.hooks.processAssets.tapPromise({
-        name: PLUGIN_NAME,
-        stage: Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING
-      }, async () => {
-        const stats = compilation.getStats().toJson({
-          all: false,
-          chunkGroups: true,
-          chunks: true,
-          ids: true
-        });
-        const { chunks = [], namedChunkGroups } = stats;
-        if (!namedChunkGroups) {
-          return;
-        }
-        const entryChunks = this.getEntryChunks(compilation, chunks);
-        const entryChunkFiles = entryChunks.map((chunk) => [
-          ...chunk.files || []
-        ].find((fname) => fname.includes(".js")));
-        const entryChunkFileIds = entryChunks.map((chunk) => chunk.id);
-        for (let i = 0; i <= entryChunkFiles.length - 1; i++) {
-          const file = entryChunkFiles[i];
-          const chunkId = entryChunkFileIds[i];
-          const asset = compilation.assets[file];
-          if (!asset) {
-            continue;
-          }
-          const { map } = asset.sourceAndMap();
-          chunkToMap.set(chunkId, map);
-        }
-      });
-      compilation.hooks.processAssets.tapPromise({
-        name: PLUGIN_NAME,
-        stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER
-      }, async () => {
-        const stats = compilation.getStats().toJson({
-          all: false,
-          chunkGroups: true,
-          chunks: true,
-          ids: true
-        });
-        const { chunks = [], namedChunkGroups } = stats;
-        if (!namedChunkGroups) {
-          return;
-        }
-        const entryChunks = this.getEntryChunks(compilation, chunks);
-        const entryChunkFiles = entryChunks.map((chunk) => [
-          ...chunk.files || []
-        ].find((fname) => fname.includes(".js")));
-        const entryChunkFileIds = entryChunks.map((chunk) => chunk.id);
-        for (let i = 0; i <= entryChunkFiles.length - 1; i++) {
-          const file = entryChunkFiles[i];
-          const chunkId = entryChunkFileIds[i];
-          const asset = compilation.assets[file];
-          if (!asset) {
-            continue;
-          }
-          const { source } = asset.sourceAndMap();
-          chunkToSource.set(chunkId, source);
-        }
+      this.HtmlBundlerPlugin.getHooks(compilation).beforeEmit.tapAsync("RouterManifestPlugin", (data, callback) => {
+        const { outputName } = data;
+        const { chunks } = data.plugin.options;
+        chunksToHtmlName.set(chunks, outputName);
+        data.html = data.html.replace("</script>", `</script>${placeholder}`);
+        callback(null, data);
       });
       compilation.hooks.processAssets.tapPromise({
         name: PLUGIN_NAME,
@@ -153,11 +103,12 @@ export class RouterPlugin {
         const manifest = {
           routeAssets
         };
+        const entryNames = Array.from(compilation.entrypoints.keys());
         const entryChunks = this.getEntryChunks(compilation, chunks);
         const entryChunkFiles = this.getEntryChunkFiles(entryChunks);
         const entryChunkFileIds = entryChunks.map((chunk) => chunk.id);
         for (let i = 0; i < entryChunkFiles.length; i++) {
-          var _source, _source1;
+          const entryName = entryNames[i];
           const file = entryChunkFiles[i];
           const chunkNames = entryChunks[i].names;
           const chunkId = entryChunkFileIds[i];
@@ -193,21 +144,39 @@ export class RouterPlugin {
           })};
             })();
           `;
-          const source = chunkToSource.get(chunkId);
-          const map = chunkToMap.get(chunkId);
-          const newContent = `${injectedContent}${(_source = source) === null || _source === void 0 ? void 0 : _source.toString()}`;
-          const result = await transform(newContent, {
-            loader: path.extname(file).slice(1),
-            sourcemap: true,
-            minify: minimize
-          });
-          const newSource = new SourceMapSource(result.code, file, result.map, (_source1 = source) === null || _source1 === void 0 ? void 0 : _source1.toString(), map);
-          compilation.updateAsset(
-            file,
-            newSource,
-            // FIXME: The arguments third of updatgeAsset is a optional function in webpack.
-            void 0
-          );
+          let htmlName;
+          for (const [chunks2, name] of chunksToHtmlName.entries()) {
+            if (Array.isArray(chunkNames) && Array.isArray(chunks2) && chunkNames.every((value, index) => value === chunks2[index])) {
+              htmlName = name;
+              break;
+            }
+          }
+          const oldHtml = compilation.assets[htmlName];
+          const { enableInlineRouteManifests, disableFilenameHash, staticJsDir, scriptLoading, nonce } = this;
+          const nonceAttr = nonce ? `nonce="${nonce}"` : "";
+          if (enableInlineRouteManifests) {
+            compilation.updateAsset(
+              htmlName,
+              new RawSource(oldHtml.source().toString().replace(placeholder, `<script ${nonceAttr}>${injectedContent}</script>`)),
+              // FIXME: The arguments third of updatgeAsset is a optional function in webpack.
+              void 0
+            );
+          } else {
+            const scriptPath = `${staticJsDir}/${ROUTE_MANIFEST_HOLDER}-${entryName}${disableFilenameHash ? ".js" : `.${generateContentHash(injectedContent)}.js`}`;
+            const scriptUrl = `${publicPath}${scriptPath}`;
+            const scriptLoadingAttr = (
+              // eslint-disable-next-line no-nested-ternary
+              scriptLoading === "defer" ? scriptLoading : scriptLoading === "module" ? `type="module"` : ""
+            );
+            const script = `<script ${scriptLoadingAttr} ${nonceAttr} src="${scriptUrl}"></script>`;
+            compilation.updateAsset(
+              htmlName,
+              new RawSource(oldHtml.source().toString().replace(placeholder, script)),
+              // FIXME: The arguments third of updatgeAsset is a optional function in webpack.
+              void 0
+            );
+            compilation.emitAsset(scriptPath, new RawSource(injectedContent));
+          }
         }
         if (prevManifestAsset) {
           compilation.updateAsset(
@@ -222,4 +191,18 @@ export class RouterPlugin {
       });
     });
   }
+  constructor({ staticJsDir = "static/js", HtmlBundlerPlugin, enableInlineRouteManifests, disableFilenameHash = false, scriptLoading = "defer", nonce }) {
+    _define_property(this, "HtmlBundlerPlugin", void 0);
+    _define_property(this, "enableInlineRouteManifests", void 0);
+    _define_property(this, "staticJsDir", void 0);
+    _define_property(this, "disableFilenameHash", void 0);
+    _define_property(this, "scriptLoading", void 0);
+    _define_property(this, "nonce", void 0);
+    this.HtmlBundlerPlugin = HtmlBundlerPlugin;
+    this.enableInlineRouteManifests = enableInlineRouteManifests;
+    this.staticJsDir = staticJsDir;
+    this.disableFilenameHash = disableFilenameHash;
+    this.scriptLoading = scriptLoading;
+    this.nonce = nonce;
+  }
 }

package/dist/esm-node/config/default.js

@@ -11,7 +11,8 @@ export function createDefaultConfig(appContext, bundler) {
   };
   const output = {
     ...defaultBuilderConfig.output,
-    disableNodePolyfill: true
+    disableNodePolyfill: true,
+    enableInlineRouteManifests: true
   };
   const source = {
     ...defaultBuilderConfig.source,

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

@@ -87,6 +87,9 @@ const output = {
   },
   disableNodePolyfill: {
     type: "boolean"
+  },
+  enableInlineRouteManifests: {
+    type: "boolean"
   }
 };
 const dev = {};

package/dist/esm-node/types/config/testing.js

@@ -0,0 +1 @@
+export {};

package/dist/esm-node/types/legacyConfig/testing.js

@@ -0,0 +1 @@
+export {};

package/dist/types/builder/shared/bundlerPlugins/RouterPlugin.d.ts

@@ -1,5 +1,7 @@
 import type { webpack } from '@modern-js/builder-webpack-provider';
 import type { Rspack } from '@modern-js/builder-rspack-provider';
+import type HtmlWebpackPlugin from '@modern-js/builder-webpack-provider/html-webpack-plugin';
+import type { ScriptLoading } from '@modern-js/builder-shared';
 export interface RouteAssets {
   [routeId: string]: {
     chunkIds?: (string | number)[];
@@ -8,7 +10,29 @@ export interface RouteAssets {
   };
 }
 type Compiler = webpack.Compiler | Rspack.Compiler;
+type Options = {
+  HtmlBundlerPlugin: typeof HtmlWebpackPlugin;
+  staticJsDir: string;
+  enableInlineRouteManifests: boolean;
+  disableFilenameHash?: boolean;
+  scriptLoading?: ScriptLoading;
+  nonce?: string;
+};
 export declare class RouterPlugin {
+  private HtmlBundlerPlugin;
+  private enableInlineRouteManifests;
+  private staticJsDir;
+  private disableFilenameHash?;
+  private scriptLoading?;
+  private nonce?;
+  constructor({
+    staticJsDir,
+    HtmlBundlerPlugin,
+    enableInlineRouteManifests,
+    disableFilenameHash,
+    scriptLoading,
+    nonce
+  }: Options);
   private isTargetNodeOrWebWorker;
   private getEntryChunks;
   private getEntryChunkFiles;

package/dist/types/types/config/index.d.ts

@@ -2,10 +2,11 @@ import type { ServerUserConfig, BffUserConfig } from '@modern-js/server-core';
 import type { BuilderPlugin } from '@modern-js/builder-webpack-provider';
 import type { OutputUserConfig, RsOutputUserConfig, SharedOutputConfig } from './output';
 import type { RsSourceUserConfig, SharedSourceConfig, SourceUserConfig } from './source';
+import type { TestingUserConfig } from './testing';
 import type { DevUserConfig } from './dev';
 import type { RsToolsUserConfig, SharedToolsConfig, ToolsUserConfig } from './tools';
 import type { HtmlUserConfig, RsHtmlUserConfig, SharedHtmlConfig } from './html';
-import type { RsSecurityConfig, SecurityUserConfig } from './security';
+import type { RsSecurityConfig, SecurityUserConfig, SharedSecurityConfig } from './security';
 import type { DeployUserConfig } from './deploy';
 import type { ExperimentsUserConfig } from './experiments';
 import type { PerformanceUserConfig, RsPerformanceConfig, SharedPerformanceConfig } from './performance';
@@ -32,6 +33,8 @@ export type SharedUserConfig = {
   runtimeByEntries?: RuntimeByEntriesUserConfig;
   html?: SharedHtmlConfig;
   tools?: SharedToolsConfig;
+  security?: SharedSecurityConfig;
+  testing?: TestingUserConfig;
   builderPlugins?: BuilderPlugin[];
   performance?: SharedPerformanceConfig;
 };

package/dist/types/types/config/output.d.ts

@@ -8,6 +8,7 @@ export interface SharedOutputConfig extends BuilderSharedOutputConfig {
   ssg?: SSGConfig;
   splitRouteChunks?: boolean;
   disableNodePolyfill?: boolean;
+  enableInlineRouteManifests?: boolean;
   tempDir?: string;
 }
 export interface OutputUserConfig extends BuilderOutputConfig, SharedOutputConfig {}

package/dist/types/types/config/security.d.ts

@@ -1,5 +1,7 @@
+import type { SharedSecurityConfig } from '@modern-js/builder-shared';
 import type { WebpackBuilderConfig, RspackBuilderConfig } from '../../builder/shared';
 import { UnwrapBuilderConfig } from '../utils';
 export type BuilderSecurityConfig = UnwrapBuilderConfig<WebpackBuilderConfig, 'security'>;
 export type RsSecurityConfig = UnwrapBuilderConfig<RspackBuilderConfig, 'security'>;
-export type SecurityUserConfig = BuilderSecurityConfig;
+export type SecurityUserConfig = BuilderSecurityConfig;
+export type { SharedSecurityConfig };

package/dist/types/types/config/testing.d.ts

@@ -0,0 +1,8 @@
+import type { TestConfig } from '@modern-js/types';
+export interface TestingUserConfig {
+  /**
+   * Decide which transformer will be used to compile file
+   * Default: babel-jest
+   */
+  transformer?: TestConfig['transformer'];
+}

package/dist/types/types/config/tools.d.ts

@@ -1,4 +1,4 @@
-import type { JestConfig } from '@modern-js/core';
+import type { JestConfig } from '@modern-js/types';
 import type { PluginSwcOptions } from '@modern-js/builder-plugin-swc';
 import type { PluginEsbuildOptions } from '@modern-js/builder-plugin-esbuild';
 import type { SharedToolsConfig as BuilderSharedToolsConfig } from '@modern-js/builder-shared';

package/dist/types/types/legacyConfig/index.d.ts

@@ -4,6 +4,7 @@ import type { OutputLegacyUserConfig } from './output';
 import type { SourceLegacyUserConfig } from './source';
 import type { DeployLegacyUserConfig } from './deploy';
 import type { ToolsLegacyUserConfig } from './tools';
+import type { TestingLegacyUserConfig } from './testing';
 export type { DevUserLegacyConfig } from './dev';
 export type { OutputLegacyUserConfig } from './output';
 export type { DeployLegacyUserConfig } from './deploy';
@@ -25,6 +26,7 @@ export type AppToolsLegacyUserConfig = {
   runtime?: RuntimeLegacyConfig;
   runtimeByEntries?: RuntimeByEntriesLegacyConfig;
   bff?: LegacyBffUserConfig;
+  testing?: TestingLegacyUserConfig;
   legacy?: boolean;
 };
 export interface AppToolsLegacyNormalizedConfig extends Required<AppToolsLegacyUserConfig> {

package/dist/types/types/legacyConfig/testing.d.ts

@@ -0,0 +1,8 @@
+import type { TestConfig } from '@modern-js/types';
+export interface TestingLegacyUserConfig {
+  /**
+   * Decide which transformer will be used to compile file
+   * Default: babel-jest
+   */
+  transformer?: TestConfig['transformer'];
+}

package/dist/types/types/legacyConfig/tools.d.ts

@@ -1,6 +1,5 @@
-import type { DevServerOptions } from '@modern-js/types';
+import type { JestConfig, DevServerOptions } from '@modern-js/types';
 import type { BuilderConfig } from '@modern-js/builder-webpack-provider';
-import type { JestConfig } from '@modern-js/core';
 type BuilderToolsConfig = Required<BuilderConfig>['tools'];
 export type ToolsLegacyUserConfig = BuilderToolsConfig & {
   esbuild?: Record<string, unknown>;

package/package.json

@@ -15,7 +15,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.30.1-alpha.0",
+  "version": "2.31.0",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/cjs/index.js",
@@ -71,26 +71,26 @@
     "@babel/types": "^7.21.5",
     "es-module-lexer": "^1.1.0",
     "esbuild": "0.17.19",
-    "rspack-plugin-virtual-module": "0.1.0",
+    "rspack-plugin-virtual-module": "0.1.7",
     "@swc/helpers": "0.5.1",
-    "@modern-js/builder": "2.30.0",
-    "@modern-js/builder-shared": "2.30.0",
-    "@modern-js/builder-webpack-provider": "2.30.0",
-    "@modern-js/core": "2.30.0",
-    "@modern-js/node-bundle-require": "2.30.0",
-    "@modern-js/plugin-data-loader": "2.30.0",
-    "@modern-js/plugin": "2.30.0",
-    "@modern-js/builder-plugin-esbuild": "2.30.0",
-    "@modern-js/new-action": "2.30.0",
-    "@modern-js/plugin-i18n": "2.30.0",
-    "@modern-js/builder-plugin-node-polyfill": "2.30.0",
-    "@modern-js/types": "2.30.0",
-    "@modern-js/prod-server": "2.30.0",
-    "@modern-js/upgrade": "2.30.0",
-    "@modern-js/server-core": "2.30.0",
-    "@modern-js/utils": "2.30.0",
-    "@modern-js/plugin-lint": "2.30.0",
-    "@modern-js/server": "2.30.0"
+    "@modern-js/builder": "2.31.0",
+    "@modern-js/builder-plugin-esbuild": "2.31.0",
+    "@modern-js/builder-plugin-node-polyfill": "2.31.0",
+    "@modern-js/builder-webpack-provider": "2.31.0",
+    "@modern-js/core": "2.31.0",
+    "@modern-js/builder-shared": "2.31.0",
+    "@modern-js/new-action": "2.31.0",
+    "@modern-js/node-bundle-require": "2.31.0",
+    "@modern-js/plugin": "2.31.0",
+    "@modern-js/plugin-data-loader": "2.31.0",
+    "@modern-js/plugin-i18n": "2.31.0",
+    "@modern-js/plugin-lint": "2.31.0",
+    "@modern-js/prod-server": "2.31.0",
+    "@modern-js/server": "2.31.0",
+    "@modern-js/types": "2.31.0",
+    "@modern-js/upgrade": "2.31.0",
+    "@modern-js/server-core": "2.31.0",
+    "@modern-js/utils": "2.31.0"
   },
   "devDependencies": {
     "@types/babel__traverse": "^7.14.2",
@@ -99,13 +99,13 @@
     "jest": "^29",
     "typescript": "^5",
     "webpack": "^5.88.1",
-    "@scripts/jest-config": "2.30.0",
-    "@scripts/build": "2.30.0",
-    "@modern-js/builder-rspack-provider": "2.30.0",
-    "@modern-js/builder-plugin-swc": "2.30.0"
+    "@modern-js/builder-plugin-swc": "2.31.0",
+    "@modern-js/builder-rspack-provider": "2.31.0",
+    "@scripts/jest-config": "2.31.0",
+    "@scripts/build": "2.31.0"
   },
   "peerDependencies": {
-    "@modern-js/builder-rspack-provider": "^2.30.0"
+    "@modern-js/builder-rspack-provider": "^2.31.0"
   },
   "peerDependenciesMeta": {
     "@modern-js/builder-rspack-provider": {

package/dist/js/modern/analyze/constants.js

@@ -1,54 +0,0 @@
-const JS_EXTENSIONS = [".js", ".ts", ".jsx", ".tsx"];
-const INDEX_FILE_NAME = "index";
-const APP_FILE_NAME = "App";
-const PAGES_DIR_NAME = "pages";
-const NESTED_ROUTES_DIR = "routes";
-const FILE_SYSTEM_ROUTES_FILE_NAME = "routes.js";
-const LOADER_EXPORT_NAME = "loader";
-const TEMP_LOADERS_DIR = "__loaders__";
-const ENTRY_POINT_FILE_NAME = "index.js";
-const ENTRY_BOOTSTRAP_FILE_NAME = "bootstrap.js";
-const FILE_SYSTEM_ROUTES_DYNAMIC_REGEXP = /^\[(\S+)\]([*+?]?)$/;
-const FILE_SYSTEM_ROUTES_LAYOUT = "_layout";
-const FILE_SYSTEM_ROUTES_GLOBAL_LAYOUT = "_app";
-const FILE_SYSTEM_ROUTES_INDEX = "index";
-const FILE_SYSTEM_ROUTES_IGNORED_REGEX = /\.(d|test|spec|e2e)\.(js|jsx|ts|tsx)$/;
-const HTML_PARTIALS_FOLDER = "html";
-const HTML_PARTIALS_EXTENSIONS = [".htm", ".html", ".ejs"];
-const FILE_SYSTEM_ROUTES_COMPONENTS_DIR = "internal_components";
-const NESTED_ROUTE = {
-  LAYOUT_FILE: "layout",
-  LAYOUT_LOADER_FILE: "layout.loader",
-  PAGE_FILE: "page",
-  PAGE_LOADER_FILE: "page.loader",
-  LOADING_FILE: "loading",
-  ERROR_FILE: "error",
-  LOADER_FILE: "loader"
-};
-const APP_CONFIG_NAME = "config";
-const APP_INIT_EXPORTED = "init";
-const APP_INIT_IMPORTED = "appInit";
-export {
-  APP_CONFIG_NAME,
-  APP_FILE_NAME,
-  APP_INIT_EXPORTED,
-  APP_INIT_IMPORTED,
-  ENTRY_BOOTSTRAP_FILE_NAME,
-  ENTRY_POINT_FILE_NAME,
-  FILE_SYSTEM_ROUTES_COMPONENTS_DIR,
-  FILE_SYSTEM_ROUTES_DYNAMIC_REGEXP,
-  FILE_SYSTEM_ROUTES_FILE_NAME,
-  FILE_SYSTEM_ROUTES_GLOBAL_LAYOUT,
-  FILE_SYSTEM_ROUTES_IGNORED_REGEX,
-  FILE_SYSTEM_ROUTES_INDEX,
-  FILE_SYSTEM_ROUTES_LAYOUT,
-  HTML_PARTIALS_EXTENSIONS,
-  HTML_PARTIALS_FOLDER,
-  INDEX_FILE_NAME,
-  JS_EXTENSIONS,
-  LOADER_EXPORT_NAME,
-  NESTED_ROUTE,
-  NESTED_ROUTES_DIR,
-  PAGES_DIR_NAME,
-  TEMP_LOADERS_DIR
-};