@modern-js/app-tools 2.4.0 → 2.5.0-alpha.0

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

@@ -0,0 +1,51 @@
+import {
+  builderWebpackProvider
+} from "@modern-js/builder-webpack-provider";
+import { applyOptionsChain } from "@modern-js/utils";
+import { createCopyPattern } from "../shared";
+import { generateBuilder } from "../generator";
+import { PluginCompatModern } from "./builderPlugins/compatModern";
+function createWebpackBuilderForModern(options) {
+  return generateBuilder(options, builderWebpackProvider, {
+    modifyBuilderConfig(config) {
+      modifyOutputConfig(config, options.appContext);
+    },
+    async modifyBuilderInstance(builder) {
+      await applyBuilderPlugins(builder, options);
+    }
+  });
+}
+function modifyOutputConfig(config, appContext) {
+  config.output = createOutputConfig(config, appContext);
+  function createOutputConfig(config2, appContext2) {
+    const defaultCopyPattern = createCopyPattern(appContext2, config2, "upload");
+    const { copy } = config2.output;
+    const copyOptions = Array.isArray(copy) ? copy : copy == null ? void 0 : copy.patterns;
+    const builderCopy = [...copyOptions || [], defaultCopyPattern];
+    return {
+      ...config2.output,
+      copy: builderCopy
+    };
+  }
+}
+async function applyBuilderPlugins(builder, options) {
+  const { normalizedConfig } = options;
+  if (!normalizedConfig.output.disableNodePolyfill) {
+    const { PluginNodePolyfill } = await import("@modern-js/builder-plugin-node-polyfill");
+    builder.addPlugins([PluginNodePolyfill()]);
+  }
+  if (normalizedConfig.tools.esbuild) {
+    const { esbuild: esbuildOptions } = normalizedConfig.tools;
+    const { PluginEsbuild } = await import("@modern-js/builder-plugin-esbuild");
+    builder.addPlugins([
+      PluginEsbuild({
+        loader: false,
+        minimize: applyOptionsChain({}, esbuildOptions)
+      })
+    ]);
+  }
+  builder.addPlugins([PluginCompatModern(options)]);
+}
+export {
+  createWebpackBuilderForModern
+};

package/dist/esm-node/builder/builder-webpack/webpackPlugins/RouterPlugin.js

@@ -0,0 +1,96 @@
+import path from "path";
+import {
+  fs,
+  ROUTE_MANIFEST,
+  logger,
+  ROUTE_MINIFEST_FILE
+} from "@modern-js/utils";
+const PLUGIN_NAME = "ModernjsRoutePlugin";
+class RouterPlugin {
+  apply(compiler) {
+    const { target } = compiler.options;
+    if (target === "node" || Array.isArray(target) && target.includes("node")) {
+      return;
+    }
+    if (target === "webworker" || Array.isArray(target) && target.includes("webworker")) {
+      return;
+    }
+    const { webpack } = compiler;
+    const { Compilation, sources } = webpack;
+    const { RawSource } = sources;
+    const { PROCESS_ASSETS_STAGE_REPORT } = Compilation;
+    const outputPath = compiler.options.output.path;
+    const newAssetsMap = /* @__PURE__ */ new Map();
+    const normalizePath = (path2) => {
+      if (!path2.endsWith("/")) {
+        return `${path2}/`;
+      }
+      return path2;
+    };
+    compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+      compilation.hooks.processAssets.tapPromise(
+        {
+          name: PLUGIN_NAME,
+          stage: PROCESS_ASSETS_STAGE_REPORT
+        },
+        async () => {
+          const stats = compilation.getStats().toJson({
+            chunkGroups: true,
+            chunks: true
+          });
+          const { publicPath } = stats;
+          const routeAssets = {};
+          const { namedChunkGroups, assetsByChunkName } = stats;
+          if (!namedChunkGroups || !assetsByChunkName) {
+            logger.warn(
+              "Route manifest does not exist, performance will be affected"
+            );
+            return;
+          }
+          for (const [name, chunkGroup] of Object.entries(namedChunkGroups)) {
+            if (assetsByChunkName[name]) {
+              routeAssets[name] = {
+                chunkIds: chunkGroup.chunks,
+                assets: assetsByChunkName[name].map(
+                  (item) => publicPath ? normalizePath(publicPath) + item : item
+                )
+              };
+            }
+          }
+          const manifest = {
+            routeAssets
+          };
+          const injectedContent = `
+            ;(function(){
+              window.${ROUTE_MANIFEST} = ${JSON.stringify(manifest)};
+            })();
+          `;
+          const entrypointsArray = Array.from(
+            compilation.entrypoints.entries()
+          );
+          const entryChunkIds = entrypointsArray.map(
+            (entrypoint) => entrypoint[0]
+          );
+          const entryChunks = [...compilation.chunks].filter((chunk) => {
+            return entryChunkIds.includes(chunk.name);
+          });
+          const entryChunkFiles = entryChunks.map(
+            (chunk) => [...chunk.files].find((fname) => fname.includes(".js"))
+          );
+          for (const file of entryChunkFiles) {
+            const asset = compilation.assets[file];
+            const newContent = `${injectedContent}${asset.source().toString()}`;
+            newAssetsMap.set(path.join(outputPath, file), newContent);
+            compilation.updateAsset(file, new RawSource(newContent));
+          }
+          const filename = path.join(outputPath, ROUTE_MINIFEST_FILE);
+          await fs.ensureFile(filename);
+          await fs.writeFile(filename, JSON.stringify(manifest, null, 2));
+        }
+      );
+    });
+  }
+}
+export {
+  RouterPlugin
+};

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

@@ -0,0 +1 @@
+export * from "./RouterPlugin";

package/dist/esm-node/builder/generator/createBuilderOptions.js

@@ -0,0 +1,24 @@
+function createBuilderOptions(target, appContext) {
+  const entries = {};
+  const { entrypoints = [], checkedEntries } = appContext;
+  for (const { entryName, entry } of entrypoints) {
+    if (checkedEntries && !checkedEntries.includes(entryName)) {
+      continue;
+    }
+    if (entryName in entries) {
+      entries[entryName].push(entry);
+    } else {
+      entries[entryName] = [entry];
+    }
+  }
+  return {
+    cwd: appContext.appDirectory,
+    target,
+    configPath: appContext.configFile || void 0,
+    entry: entries,
+    framework: appContext.metaName
+  };
+}
+export {
+  createBuilderOptions
+};

package/dist/esm-node/builder/generator/createBuilderProviderConfig.js

@@ -0,0 +1,26 @@
+function createBuilderProviderConfig(resolveConfig, appContext, modifyBuilderConfig) {
+  const htmlConfig = { ...resolveConfig.html };
+  if (!htmlConfig.template) {
+    htmlConfig.templateByEntries = {
+      ...htmlConfig.templateByEntries,
+      ...appContext.htmlTemplates
+    };
+  }
+  const config = {
+    ...resolveConfig,
+    dev: {
+      ...resolveConfig.dev,
+      port: appContext.port
+    },
+    html: htmlConfig,
+    output: {
+      ...resolveConfig.output,
+      cleanDistPath: false
+    }
+  };
+  modifyBuilderConfig == null ? void 0 : modifyBuilderConfig(config);
+  return config;
+}
+export {
+  createBuilderProviderConfig
+};

package/dist/esm-node/builder/generator/getBuilderTargets.js

@@ -0,0 +1,21 @@
+import {
+  isProd,
+  isServiceWorker,
+  isSSR,
+  isUseSSRBundle
+} from "@modern-js/utils";
+function getBuilderTargets(normalizedConfig) {
+  const targets = ["web"];
+  const useNodeTarget = isProd() ? isUseSSRBundle(normalizedConfig) : isSSR(normalizedConfig);
+  if (useNodeTarget) {
+    targets.push("node");
+  }
+  const useWorkerTarget = isProd() ? isServiceWorker(normalizedConfig) : false;
+  if (useWorkerTarget) {
+    targets.push("service-worker");
+  }
+  return targets;
+}
+export {
+  getBuilderTargets
+};

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

@@ -0,0 +1,29 @@
+import { createBuilder } from "@modern-js/builder";
+import { createBuilderProviderConfig } from "./createBuilderProviderConfig";
+import { getBuilderTargets } from "./getBuilderTargets";
+import { createBuilderOptions } from "./createBuilderOptions";
+async function generateBuilder(options, generateProvider, utils) {
+  const { normalizedConfig, appContext } = options;
+  const { modifyBuilderConfig, modifyBuilderInstance } = utils || {};
+  const builderConfig = createBuilderProviderConfig(
+    normalizedConfig,
+    appContext,
+    modifyBuilderConfig
+  );
+  const provider = generateProvider({
+    builderConfig
+  });
+  const target = getBuilderTargets(normalizedConfig);
+  const builderOptions = createBuilderOptions(target, appContext);
+  const builder = await createBuilder(provider, builderOptions);
+  await applyBuilderPlugins(builder, options);
+  await (modifyBuilderInstance == null ? void 0 : modifyBuilderInstance(builder));
+  return builder;
+}
+async function applyBuilderPlugins(builder, options) {
+  const { builderPluginAdapterModern } = await import("../shared/builderPlugins/adapterModern");
+  builder.addPlugins([builderPluginAdapterModern(options)]);
+}
+export {
+  generateBuilder
+};

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

@@ -0,0 +1,17 @@
+async function createBuilderGenerator(bundler) {
+  if (bundler === "rspack") {
+    try {
+      const { createRspackBuilderForModern } = await import("./builder-rspack");
+      return createRspackBuilderForModern;
+    } catch (_) {
+      throw new Error(
+        "Failed to use rspack, please check if you have `@modern-js/builder-rspack-provider` installed"
+      );
+    }
+  }
+  const { createWebpackBuilderForModern } = await import("./builder-webpack");
+  return createWebpackBuilderForModern;
+}
+export {
+  createBuilderGenerator
+};

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

@@ -0,0 +1,202 @@
+import {
+  mergeBuilderConfig
+} from "@modern-js/builder-shared";
+import { getEntryOptions } from "@modern-js/utils";
+import HtmlWebpackPlugin from "@modern-js/builder-webpack-provider/html-webpack-plugin";
+import { template as lodashTemplate } from "@modern-js/utils/lodash";
+import { HtmlAsyncChunkPlugin } from "../bundlerPlugins/HtmlAsyncChunkPlugin";
+import { BottomTemplatePlugin } from "../bundlerPlugins/HtmlBottomTemplate";
+const isStreamingSSR = (userConfig) => {
+  const isStreaming = (ssr) => ssr && typeof ssr === "object" && ssr.mode === "stream";
+  const { server } = userConfig;
+  if (isStreaming(server.ssr)) {
+    return true;
+  }
+  if ((server == null ? void 0 : server.ssrByEntries) && typeof server.ssrByEntries === "object") {
+    for (const name of Object.keys(server.ssrByEntries)) {
+      if (isStreaming(server.ssrByEntries[name])) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+const builderPluginAdapterModern = (options) => ({
+  name: "builder-plugin-adapter-modern",
+  setup(api) {
+    const { normalizedConfig, appContext } = options;
+    api.modifyBuilderConfig((config) => {
+      if (isStreamingSSR(normalizedConfig)) {
+        return mergeBuilderConfig(config, {
+          html: {
+            inject: "body"
+          }
+        });
+      }
+      return config;
+    });
+    api.modifyBundlerChain((chain, { target, CHAIN_ID, isProd }) => {
+      const builderConfig = api.getNormalizedConfig();
+      if (target === "node") {
+        chain.name("server");
+      } else if (target === "service-worker") {
+        chain.name("service-worker");
+      } else if (target === "web-worker") {
+        chain.name("worker");
+      } else if (target === "modern-web") {
+        chain.name("modern");
+      } else {
+        chain.name("client");
+      }
+      if (target === "node" || target === "service-worker") {
+        applyNodeCompat(target, chain, normalizedConfig, isProd);
+      }
+      if (isHtmlEnabled(builderConfig, target)) {
+        applyBottomHtmlPlugin({
+          api,
+          chain,
+          modernConfig: normalizedConfig,
+          appContext,
+          CHAIN_ID
+        });
+        applyAsyncChunkHtmlPlugin({
+          chain,
+          modernConfig: normalizedConfig,
+          CHAIN_ID
+        });
+      }
+      if (target !== "node" && target !== "web-worker" && target !== "service-worker") {
+        const bareServerModuleReg = /\.(server|node)\.[tj]sx?$/;
+        chain.module.rule(CHAIN_ID.RULE.JS).exclude.add(bareServerModuleReg);
+        chain.module.rule("bare-server-module").test(bareServerModuleReg).use("server-module-loader").loader(require.resolve("../loaders/serverModuleLoader"));
+      }
+    });
+    applyCallbacks(api, options);
+    function isHtmlEnabled(config, target) {
+      var _a;
+      return ((_a = config.tools) == null ? void 0 : _a.htmlPlugin) !== false && target !== "node" && target !== "service-worker" && target !== "web-worker";
+    }
+  }
+});
+function applyCallbacks(api, options) {
+  options.onAfterBuild && api.onAfterBuild(options.onAfterBuild);
+  options.onAfterCreateCompiler && api.onAfterCreateCompiler(options.onAfterCreateCompiler);
+  options.onAfterStartDevServer && api.onAfterStartDevServer(options.onAfterStartDevServer);
+  options.onBeforeBuild && api.onBeforeBuild(options.onBeforeBuild);
+  options.onBeforeCreateCompiler && api.onBeforeCreateCompiler(options.onBeforeCreateCompiler);
+  options.onBeforeStartDevServer && api.onBeforeStartDevServer(options.onBeforeStartDevServer);
+  options.onDevCompileDone && api.onDevCompileDone(options.onDevCompileDone);
+  options.onExit && api.onExit(options.onExit);
+}
+function applyBottomHtmlPlugin({
+  api,
+  chain,
+  modernConfig,
+  appContext,
+  CHAIN_ID
+}) {
+  for (const entryName of Object.keys(api.context.entry)) {
+    const baseTemplateParams = {
+      entryName,
+      title: getEntryOptions(
+        entryName,
+        modernConfig.html.title,
+        modernConfig.html.titleByEntries,
+        appContext.packageName
+      ),
+      mountId: modernConfig.html.mountId,
+      ...getEntryOptions(
+        entryName,
+        modernConfig.html.templateParameters,
+        modernConfig.html.templateParametersByEntries,
+        appContext.packageName
+      )
+    };
+    chain.plugin(`${CHAIN_ID.PLUGIN.HTML}-${entryName}`).tap((args) => [
+      {
+        ...args[0] || {},
+        __internal__: true,
+        bottomTemplate: appContext.htmlTemplates[`__${entryName}-bottom__`] && lodashTemplate(appContext.htmlTemplates[`__${entryName}-bottom__`])(
+          baseTemplateParams
+        )
+      }
+    ]);
+  }
+  chain.plugin(CHAIN_ID.PLUGIN.BOTTOM_TEMPLATE).use(BottomTemplatePlugin, [HtmlWebpackPlugin]);
+}
+function applyAsyncChunkHtmlPlugin({
+  chain,
+  modernConfig,
+  CHAIN_ID
+}) {
+  if (isStreamingSSR(modernConfig)) {
+    chain.plugin(CHAIN_ID.PLUGIN.HTML_ASYNC_CHUNK).use(HtmlAsyncChunkPlugin, [HtmlWebpackPlugin]);
+  }
+}
+function applyNodeCompat(target, chain, modernConfig, isProd) {
+  const nodeExts = [
+    ".node.js",
+    ".node.jsx",
+    ".node.ts",
+    ".node.tsx",
+    ".server.js",
+    ".server.ts",
+    ".server.ts",
+    ".server.tsx"
+  ];
+  const webWorkerExts = [
+    ".worker.js",
+    ".worker.jsx",
+    ".worker.ts",
+    ".worker.tsx"
+  ];
+  for (const ext of nodeExts) {
+    chain.resolve.extensions.prepend(ext);
+  }
+  if (target === "service-worker") {
+    for (const ext of webWorkerExts) {
+      chain.resolve.extensions.prepend(ext);
+    }
+  }
+  filterEntriesBySSRConfig(
+    isProd,
+    chain,
+    modernConfig.server,
+    modernConfig.output
+  );
+  function filterEntriesBySSRConfig(isProd2, chain2, serverConfig, outputConfig) {
+    var _a;
+    const entries = chain2.entryPoints.entries();
+    if (isProd2 && ((outputConfig == null ? void 0 : outputConfig.ssg) === true || typeof ((_a = outputConfig == null ? void 0 : outputConfig.ssg) == null ? void 0 : _a[0]) === "function")) {
+      return;
+    }
+    if (typeof entries === "undefined") {
+      throw new Error(
+        "No entry found, one of src/routes/layout.tsx, src/App.tsx, src/index.tsx is required"
+      );
+    }
+    const entryNames = Object.keys(entries);
+    if (isProd2 && entryNames.length === 1 && (outputConfig == null ? void 0 : outputConfig.ssg)) {
+      return;
+    }
+    const ssgEntries = [];
+    if (isProd2 && (outputConfig == null ? void 0 : outputConfig.ssg)) {
+      const { ssg } = outputConfig;
+      entryNames.forEach((name) => {
+        if (ssg[name]) {
+          ssgEntries.push(name);
+        }
+      });
+    }
+    const { ssr, ssrByEntries } = serverConfig || {};
+    entryNames.forEach((name) => {
+      if (!ssgEntries.includes(name) && (ssr && (ssrByEntries == null ? void 0 : ssrByEntries[name]) === false || !ssr && !(ssrByEntries == null ? void 0 : ssrByEntries[name]))) {
+        chain2.entryPoints.delete(name);
+      }
+    });
+  }
+}
+export {
+  applyCallbacks,
+  builderPluginAdapterModern
+};

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

@@ -0,0 +1,27 @@
+class HtmlAsyncChunkPlugin {
+  constructor(htmlWebpackPlugin) {
+    this.name = "HtmlAsyncChunkPlugin";
+    this.htmlWebpackPlugin = htmlWebpackPlugin;
+  }
+  apply(compiler) {
+    compiler.hooks.compilation.tap(this.name, (compilation) => {
+      const hooks = this.htmlWebpackPlugin.getHooks(compilation);
+      hooks.alterAssetTagGroups.tap(this.name, (assets) => {
+        const tags = [...assets.headTags, ...assets.bodyTags];
+        for (const tag of tags) {
+          if (tag.tagName === "script") {
+            const { attributes } = tag;
+            if (attributes && attributes.defer === true) {
+              attributes.async = true;
+              delete attributes.defer;
+            }
+          }
+        }
+        return assets;
+      });
+    });
+  }
+}
+export {
+  HtmlAsyncChunkPlugin
+};

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

@@ -0,0 +1,34 @@
+class BottomTemplatePlugin {
+  constructor(htmlWebpackPlugin) {
+    this.bottomTemplateReg = /<!--<\?-\s*bottomTemplate\s*\?>-->/;
+    this.bodyRegExp = /(<\/\s*body\s*>)/i;
+    this.htmlWebpackPlugin = htmlWebpackPlugin;
+    this.name = "bottom-template";
+  }
+  apply(compiler) {
+    compiler.hooks.compilation.tap(this.name, (compilation) => {
+      this.htmlWebpackPlugin.getHooks(compilation).beforeEmit.tap(this.name, (data) => {
+        var _a;
+        if (!((_a = data.plugin.options) == null ? void 0 : _a.__internal__)) {
+          return data;
+        }
+        if (this.bottomTemplateReg.test(data.html)) {
+          data.html = data.html.replace(this.bottomTemplateReg, "");
+          const { bottomTemplate } = data.plugin.options;
+          if (bottomTemplate) {
+            data.html = data.html.replace(
+              this.bodyRegExp,
+              (match) => `
+${bottomTemplate}
+${match}`
+            );
+          }
+        }
+        return data;
+      });
+    });
+  }
+}
+export {
+  BottomTemplatePlugin
+};

package/dist/esm-node/builder/shared/createCopyPattern.js

@@ -0,0 +1,46 @@
+import path from "path";
+import { removeTailSlash } from "@modern-js/utils";
+function createCopyPattern(appContext, config, patternsType, chain) {
+  const configDir = path.resolve(
+    appContext.appDirectory,
+    config.source.configDir || "./config"
+  );
+  const uploadDir = path.posix.join(configDir.replace(/\\/g, "/"), "upload");
+  const publicDir = path.posix.join(configDir.replace(/\\/g, "/"), "public");
+  const minifiedJsRexExp = /\.min\.js/;
+  const info = (file) => ({
+    minimized: minifiedJsRexExp.test(file.sourceFilename)
+  });
+  if (patternsType === "public") {
+    if (!chain) {
+      throw new Error("expect get a webpackChain, but receive 'undefined'");
+    }
+    return {
+      info,
+      from: "**/*",
+      to: "public",
+      context: publicDir,
+      noErrorOnMissing: true,
+      transform: (content, absoluteFrom) => {
+        if (!/\.html?$/.test(absoluteFrom)) {
+          return content;
+        }
+        return content.toString("utf8").replace(
+          /<%=\s*assetPrefix\s*%>/g,
+          removeTailSlash(chain.output.get("publicPath"))
+        );
+      }
+    };
+  } else {
+    return {
+      info,
+      from: "**/*",
+      to: "upload",
+      context: uploadDir,
+      noErrorOnMissing: true
+    };
+  }
+}
+export {
+  createCopyPattern
+};

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

@@ -0,0 +1,3 @@
+export * from "./createCopyPattern";
+export * from "./types";
+export * from "./builderPlugins/adapterModern";

package/dist/esm-node/builder/shared/loaders/serverModuleLoader.js

@@ -0,0 +1,7 @@
+function loader() {
+  return `module.exports = {}`;
+}
+var serverModuleLoader_default = loader;
+export {
+  serverModuleLoader_default as default
+};

package/dist/esm-node/commands/build.js

@@ -0,0 +1,52 @@
+import { ResolvedConfigContext } from "@modern-js/core";
+import { logger, printBuildError } from "@modern-js/utils";
+import { generateRoutes } from "../utils/routes";
+import { buildServerConfig } from "../utils/config";
+const build = async (api, options) => {
+  if (options == null ? void 0 : options.analyze) {
+    process.env.BUNDLE_ANALYZE = "true";
+  }
+  let resolvedConfig = api.useResolvedConfigContext();
+  const appContext = api.useAppContext();
+  const hookRunners = api.useHookRunners();
+  const { apiOnly } = appContext;
+  if (apiOnly) {
+    const { appDirectory: appDirectory2, distDirectory: distDirectory2, serverConfigFile: serverConfigFile2 } = appContext;
+    await hookRunners.beforeBuild({
+      bundlerConfigs: void 0
+    });
+    await buildServerConfig({
+      appDirectory: appDirectory2,
+      distDirectory: distDirectory2,
+      configFile: serverConfigFile2
+    });
+    await generateRoutes(appContext);
+    await hookRunners.afterBuild({
+      stats: void 0
+    });
+    return;
+  }
+  resolvedConfig = { ...resolvedConfig, cliOptions: options };
+  ResolvedConfigContext.set(resolvedConfig);
+  const { distDirectory, appDirectory, serverConfigFile } = appContext;
+  await buildServerConfig({
+    appDirectory,
+    distDirectory,
+    configFile: serverConfigFile
+  });
+  try {
+    logger.info("Create a production build...\n");
+    if (!appContext.builder) {
+      throw new Error(
+        "Expect the Builder to have been initialized, But the appContext.builder received `undefined`"
+      );
+    }
+    await appContext.builder.build();
+  } catch (error) {
+    printBuildError(error);
+    process.exit(1);
+  }
+};
+export {
+  build
+};

package/dist/esm-node/commands/deploy.js

@@ -0,0 +1,8 @@
+const deploy = async (api, options) => {
+  const hookRunners = api.useHookRunners();
+  await hookRunners.beforeDeploy(options);
+  await hookRunners.afterDeploy(options);
+};
+export {
+  deploy
+};