@modern-js/app-tools 1.21.2 → 2.0.0-beta.0

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

@@ -3,7 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderFunction = exports.index = exports.html = exports.fileSystemRoutes = void 0;
+exports.routesForServer = exports.renderFunction = exports.index = exports.html = exports.fileSystemRoutes = void 0;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 const index = ({
   mountId,
@@ -89,18 +95,169 @@ const html = partials => `
 
 exports.html = html;
 
+const routesForServer = ({
+  routes,
+  alias
+}) => {
+  const {
+    name,
+    basename
+  } = alias;
+  const loaders = [];
+
+  const traverseRouteTree = route => {
+    let children;
+
+    if ('children' in route && route.children) {
+      var _route$children;
+
+      children = route === null || route === void 0 ? void 0 : (_route$children = route.children) === null || _route$children === void 0 ? void 0 : _route$children.map(traverseRouteTree);
+    }
+
+    let loader;
+
+    if (route.type === 'nested') {
+      if (route.loader) {
+        loaders.push(route.loader);
+        loader = `loader_${loaders.length - 1}`;
+      }
+    }
+
+    const finalRoute = _objectSpread(_objectSpread({}, route), {}, {
+      loader,
+      children
+    });
+
+    return finalRoute;
+  };
+
+  let routesCode = `
+  export const routes = [
+  `;
+
+  for (const route of routes) {
+    if ('type' in route) {
+      const newRoute = traverseRouteTree(route);
+      routesCode += `${JSON.stringify(newRoute, null, 2).replace(/"(loader_[^"])"/g, '$1')},`;
+    } else {
+      routesCode += `${JSON.stringify(route, null, 2)}`;
+    }
+  }
+
+  routesCode += `\n];`;
+  const importLoadersCode = loaders.map((loader, index) => {
+    const realLoaderPath = loader.replace(name, basename);
+    return `import loader_${index} from '${realLoaderPath}';\n`;
+  }).join('');
+  return `
+    ${importLoadersCode}
+    ${routesCode}
+  `;
+};
+
+exports.routesForServer = routesForServer;
+
 const fileSystemRoutes = ({
-  routes
-}) => `
-import loadable from '@modern-js/runtime/loadable';
+  routes,
+  ssrMode,
+  nestedRoutesEntry
+}) => {
+  const importLazyCode = ssrMode === 'stream' ? 'import { lazy } from "react";' : `import loadable from '@modern-js/runtime/loadable'`;
+  let dataLoaderPath = '';
 
-${routes.map(({
-  component,
-  _component
-}) => `const ${component} = loadable(() => import('${_component}'));`).join('\n\n')}
+  if (ssrMode) {
+    dataLoaderPath = require.resolve(`@modern-js/plugin-data-loader/loader`);
 
+    if (nestedRoutesEntry) {
+      dataLoaderPath = `${dataLoaderPath}?routesDir=${nestedRoutesEntry}!`;
+    }
+  }
 
-export const routes = ${JSON.stringify(routes, null, 2).replace(/"component"\s*:\s*"(\S+)"/g, '"component": $1')}
-`;
+  const loadings = [];
+  const errors = [];
+  const loaders = [];
+
+  const traverseRouteTree = route => {
+    let children;
+
+    if ('children' in route && route.children) {
+      var _route$children2;
+
+      children = route === null || route === void 0 ? void 0 : (_route$children2 = route.children) === null || _route$children2 === void 0 ? void 0 : _route$children2.map(traverseRouteTree);
+    }
+
+    let loading;
+    let error;
+    let loader;
+
+    if (route.type === 'nested') {
+      if (route.loading) {
+        loadings.push(route.loading);
+        loading = `loading_${loadings.length - 1}`;
+      }
+
+      if (route.error) {
+        errors.push(route.error);
+        error = `error_${errors.length - 1}`;
+      }
+
+      if (route.loader) {
+        loaders.push(route.loader);
+        loader = `loader_${loaders.length - 1}`;
+      }
+    }
+
+    const finalRoute = _objectSpread(_objectSpread({}, route), {}, {
+      loading,
+      loader,
+      error,
+      children
+    });
+
+    if (route._component) {
+      const component = ssrMode === 'stream' ? `lazy(() => import('${route._component}'))` : `loadable(() => import('${route._component}'))`;
+      finalRoute.component = component;
+    }
+
+    return finalRoute;
+  };
+
+  let routeComponentsCode = `
+    export const routes = [
+  `;
+
+  for (const route of routes) {
+    if ('type' in route) {
+      const newRoute = traverseRouteTree(route);
+      routeComponentsCode += `${JSON.stringify(newRoute, null, 2).replace(/"(loadable[^"]*)"/g, '$1').replace(/"(lazy[^"]*)"/g, '$1').replace(/"(loading_[^"])"/g, '$1').replace(/"(loader_[^"])"/g, '$1').replace(/"(error_[^"])"/g, '$1')},`;
+    } else {
+      const component = ssrMode === 'stream' ? `lazy(() => import('${route._component}'))` : `loadable(() => import('${route._component}'))`;
+
+      const finalRoute = _objectSpread(_objectSpread({}, route), {}, {
+        component
+      });
+
+      routeComponentsCode += `${JSON.stringify(finalRoute, null, 2).replace(/"(loadable[^"]*)"/g, '$1').replace(/"(lazy[^"]*)"/g, '$1')},`;
+    }
+  }
+
+  routeComponentsCode += `\n];`;
+  const importLoadingCode = loadings.map((loading, index) => {
+    return `import loading_${index} from '${loading}';\n`;
+  }).join('');
+  const importErrorComponentsCode = errors.map((error, index) => {
+    return `import error_${index} from '${error}';\n`;
+  }).join('');
+  const importLoaderComponentsCode = loaders.map((loader, index) => {
+    return `import loader_${index} from '${dataLoaderPath}${loader}';\n`;
+  }).join('');
+  return `
+    ${importLazyCode}
+    ${importLoadingCode}
+    ${importErrorComponentsCode}
+    ${importLoaderComponentsCode}
+    ${routeComponentsCode}
+  `;
+};
 
 exports.fileSystemRoutes = fileSystemRoutes;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.walkDirectory = exports.isRouteComponentFile = exports.getDefaultImports = void 0;
+exports.walkDirectory = exports.replaceWithAlias = exports.isRouteComponentFile = exports.getDefaultImports = void 0;
 
 var _fs = _interopRequireDefault(require("fs"));
 
@@ -110,4 +110,8 @@ const isRouteComponentFile = filePath => {
   return false;
 };
 
-exports.isRouteComponentFile = isRouteComponentFile;
+exports.isRouteComponentFile = isRouteComponentFile;
+
+const replaceWithAlias = (base, filePath, alias) => (0, _utils.normalizeToPosixPath)(_path.default.join(alias, _path.default.relative(base, filePath)));
+
+exports.replaceWithAlias = replaceWithAlias;

package/dist/js/node/builder/builderPlugins/compatModern.js

@@ -0,0 +1,245 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PluginCompatModern = void 0;
+
+var _path = require("path");
+
+var _builderShared = require("@modern-js/builder-shared");
+
+var _lodash = require("@modern-js/utils/lodash");
+
+var _htmlWebpackPlugin = _interopRequireDefault(require("@modern-js/builder-webpack-provider/html-webpack-plugin"));
+
+var _utils = require("@modern-js/utils");
+
+var _htmlBottomTemplate = require("../webpackPlugins/htmlBottomTemplate");
+
+var _htmlAsyncChunkPlugin = require("../webpackPlugins/htmlAsyncChunkPlugin");
+
+var _share = require("../share");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/**
+ * Provides default configuration consistent with `@modern-js/webpack`
+ */
+const PluginCompatModern = (appContext, modernConfig, options) => ({
+  name: 'builder-plugin-compat-modern',
+
+  setup(api) {
+    api.modifyBuilderConfig(config => {
+      if (isStreamingSSR(modernConfig)) {
+        return (0, _builderShared.mergeBuilderConfig)(config, {
+          html: {
+            inject: 'body'
+          }
+        });
+      }
+
+      return config;
+    });
+    api.modifyWebpackChain((chain, {
+      target,
+      CHAIN_ID,
+      isProd
+    }) => {
+      const builderNormalizedConfig = api.getNormalizedConfig(); // set webpack config name
+
+      if (target === 'node') {
+        chain.name('server');
+      } else if (target === 'modern-web') {
+        chain.name('modern');
+      } else {
+        chain.name('client');
+      }
+
+      chain.resolve.modules.add('node_modules').add((0, _path.join)(api.context.rootPath, 'node_modules')); // apply node compat
+
+      if (target === 'node') {
+        applyNodeCompat(chain, modernConfig, isProd);
+      }
+
+      if (isHtmlEnabled(builderNormalizedConfig, target)) {
+        applyBottomHtmlWebpackPlugin({
+          api,
+          chain,
+          CHAIN_ID,
+          appContext,
+          modernConfig
+        });
+        applyAsyncChunkHtmlPlugin({
+          chain,
+          CHAIN_ID,
+          modernConfig
+        });
+      } // apply copy plugin
+      // const copyPatterns = createCopyPatterns(chain, appContext, modernConfig);
+
+
+      const defaultCopyPattern = (0, _share.createCopyPattern)(appContext, modernConfig, 'public', chain);
+      chain.plugin(CHAIN_ID.PLUGIN.COPY).tap(args => {
+        var _args$;
+
+        return [{
+          patterns: [...(((_args$ = args[0]) === null || _args$ === void 0 ? void 0 : _args$.patterns) || []), defaultCopyPattern]
+        }];
+      });
+
+      function isHtmlEnabled(config, target) {
+        var _config$tools;
+
+        return ((_config$tools = config.tools) === null || _config$tools === void 0 ? void 0 : _config$tools.htmlPlugin) !== false && target !== 'node' && target !== 'web-worker';
+      }
+    });
+
+    if (options) {
+      applyCallbacks(api, options);
+    }
+  }
+
+});
+/**
+ * register builder hooks callback
+ */
+
+
+exports.PluginCompatModern = PluginCompatModern;
+
+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);
+}
+/**
+ * compat some config, if target is `node`
+ */
+
+
+function applyNodeCompat(chain, modernConfig, isProd) {
+  // apply node resolve extensions
+  for (const ext of ['.node.js', '.node.jsx', '.node.ts', '.node.tsx']) {
+    chain.resolve.extensions.prepend(ext);
+  } // apply filterEntriesBySSRConfig
+
+
+  filterEntriesBySSRConfig(isProd, chain, modernConfig.server, modernConfig.output);
+
+  function filterEntriesBySSRConfig(isProd, chain, serverConfig, outputConfig) {
+    var _outputConfig$ssg;
+
+    const entries = chain.entryPoints.entries(); // if prod and ssg config is true or function
+
+    if (isProd && ((outputConfig === null || outputConfig === void 0 ? void 0 : outputConfig.ssg) === true || typeof (outputConfig === null || outputConfig === void 0 ? void 0 : (_outputConfig$ssg = outputConfig.ssg) === null || _outputConfig$ssg === void 0 ? void 0 : _outputConfig$ssg[0]) === 'function')) {
+      return;
+    } // if single entry has ssg config
+    // `ssg: {}` is not allowed if multi entry
+
+
+    const entryNames = Object.keys(entries);
+
+    if (isProd && entryNames.length === 1 && outputConfig !== null && outputConfig !== void 0 && outputConfig.ssg) {
+      return;
+    } // collect all ssg entries
+
+
+    const ssgEntries = [];
+
+    if (isProd && outputConfig !== null && outputConfig !== 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 || ssrByEntries === void 0 ? void 0 : ssrByEntries[name]) === false || !ssr && !(ssrByEntries !== null && ssrByEntries !== void 0 && ssrByEntries[name]))) {
+        chain.entryPoints.delete(name);
+      }
+    });
+  }
+}
+/**
+ * inject bottom template
+ */
+
+
+function applyBottomHtmlWebpackPlugin({
+  api,
+  chain,
+  modernConfig,
+  appContext,
+  CHAIN_ID
+}) {
+  // inject bottomTemplate into html-webpack-plugin
+  for (const entryName of Object.keys(api.context.entry)) {
+    // FIXME: the only need necessary
+    const baseTemplateParams = _objectSpread({
+      entryName,
+      title: (0, _utils.getEntryOptions)(entryName, modernConfig.output.title, modernConfig.output.titleByEntries, appContext.packageName),
+      mountId: modernConfig.output.mountId
+    }, (0, _utils.getEntryOptions)(entryName, modernConfig.output.templateParameters, modernConfig.output.templateParametersByEntries, appContext.packageName));
+
+    chain.plugin(`${CHAIN_ID.PLUGIN.HTML}-${entryName}`).tap(args => [_objectSpread(_objectSpread({}, args[0] || {}), {}, {
+      __internal__: true,
+      bottomTemplate: appContext.htmlTemplates[`__${entryName}-bottom__`] && (0, _lodash.template)(appContext.htmlTemplates[`__${entryName}-bottom__`])(baseTemplateParams)
+    })]);
+  }
+
+  chain.plugin(CHAIN_ID.PLUGIN.BOTTOM_TEMPLATE).use(_htmlBottomTemplate.BottomTemplatePlugin, [_htmlWebpackPlugin.default]);
+}
+
+const isStreamingSSR = userConfig => {
+  const isStreaming = ssr => ssr && typeof ssr === 'object' && ssr.mode === 'stream';
+
+  const {
+    server
+  } = userConfig;
+
+  if (isStreaming(server.ssr)) {
+    return true;
+  } // Since we cannot apply different plugins for different entries,
+  // we regard the whole app as streaming ssr only if one entry meets the requirement.
+
+
+  if (server !== null && server !== 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;
+};
+
+function applyAsyncChunkHtmlPlugin({
+  chain,
+  modernConfig,
+  CHAIN_ID
+}) {
+  if (isStreamingSSR(modernConfig)) {
+    chain.plugin(CHAIN_ID.PLUGIN.HTML_ASYNC_CHUNK).use(_htmlAsyncChunkPlugin.HtmlAsyncChunkPlugin, [_htmlWebpackPlugin.default]);
+  }
+}

package/dist/js/node/builder/createHtmlConfig.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createBuilderAppIcon = createBuilderAppIcon;
+exports.createBuilderCrossorigin = createBuilderCrossorigin;
+exports.createBuilderFavicon = createBuilderFavicon;
+exports.createHtmlConfig = createHtmlConfig;
+
+var _path = _interopRequireDefault(require("path"));
+
+var _utils = require("@modern-js/utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function createHtmlConfig(normalizedConfig, appContext) {
+  const {
+    disableHtmlFolder,
+    favicon,
+    faviconByEntries,
+    inject,
+    injectByEntries,
+    meta,
+    metaByEntries,
+    mountId,
+    title,
+    titleByEntries,
+    scriptExt,
+    templateParameters,
+    templateParametersByEntries
+  } = normalizedConfig.output;
+  const {
+    configDir
+  } = normalizedConfig.source; // transform Modernjs `output.scriptExt` to Builder `html.crossorigin`  configuration
+
+  const builderCrossorigin = createBuilderCrossorigin(scriptExt);
+  const builderAppIcon = createBuilderAppIcon(configDir, appContext);
+  const builderFavicon = createBuilderFavicon(favicon, configDir, appContext);
+  return {
+    appIcon: builderAppIcon,
+    disableHtmlFolder,
+    favicon: builderFavicon,
+    faviconByEntries,
+    inject,
+    injectByEntries,
+    meta,
+    metaByEntries,
+    mountId,
+    title,
+    titleByEntries,
+    crossorigin: builderCrossorigin,
+    templateByEntries: appContext.htmlTemplates,
+    templateParameters,
+    templateParametersByEntries: templateParametersByEntries
+  };
+}
+
+const ICON_EXTENSIONS = ['png', 'jpg', 'jpeg', 'svg', 'ico'];
+
+function createBuilderAppIcon(configDir, appContext) {
+  const appIcon = (0, _utils.findExists)(ICON_EXTENSIONS.map(ext => _path.default.resolve(appContext.appDirectory, configDir, `icon.${ext}`)));
+  return typeof appIcon === 'string' ? appIcon : undefined;
+}
+
+function createBuilderCrossorigin(scriptExt) {
+  var _scriptExtCustomConfi;
+
+  const scriptExtCustomConfig = scriptExt === null || scriptExt === void 0 ? void 0 : scriptExt.custom;
+  return scriptExtCustomConfig !== null && scriptExtCustomConfig !== void 0 && (_scriptExtCustomConfi = scriptExtCustomConfig.test) !== null && _scriptExtCustomConfi !== void 0 && _scriptExtCustomConfi.test('.js') && (scriptExtCustomConfig === null || scriptExtCustomConfig === void 0 ? void 0 : scriptExtCustomConfig.attribute) === 'crossorigin' ? scriptExtCustomConfig.value : undefined;
+}
+
+function createBuilderFavicon(favicon, configDir, appContext) {
+  const defaultFavicon = (0, _utils.findExists)(ICON_EXTENSIONS.map(ext => _path.default.resolve(appContext.appDirectory, configDir, `favicon.${ext}`)));
+  return favicon || defaultFavicon || undefined;
+}

package/dist/js/node/builder/createOutputConfig.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createOutputConfig = createOutputConfig;
+
+var _share = require("./share");
+
+function createOutputConfig(normalizedConfig, appContext) {
+  // TODO: add `externals` options in Modern.
+  const {
+    assetPrefix,
+    copy,
+    cssModuleLocalIdentName,
+    cssPath,
+    jsPath,
+    htmlPath,
+    mediaPath,
+    path,
+    disableInlineRuntimeChunk,
+    disableMinimize,
+    disableSourceMap,
+    enableCssModuleTSDeclaration,
+    enableInlineScripts,
+    enableInlineStyles,
+    polyfill,
+    dataUriLimit,
+    disableAssetsCache,
+    enableLatestDecorators,
+    disableCssModuleExtension
+  } = normalizedConfig.output;
+  const defaultCopyPattern = (0, _share.createCopyPattern)(appContext, normalizedConfig, 'upload');
+  const builderCopy = copy ? [...copy, defaultCopyPattern] : [defaultCopyPattern];
+  return {
+    assetPrefix,
+    copy: builderCopy,
+    distPath: {
+      root: path,
+      css: cssPath,
+      js: jsPath,
+      html: htmlPath,
+      // `@modern-js/webpack` output all media files to `dist/media` by default
+      svg: mediaPath || 'midia',
+      image: mediaPath || 'midia',
+      font: mediaPath || 'midia',
+      media: mediaPath || 'midia'
+    },
+    dataUriLimit: {
+      svg: dataUriLimit,
+      image: dataUriLimit,
+      font: dataUriLimit,
+      media: dataUriLimit
+    },
+    disableCssModuleExtension,
+    disableInlineRuntimeChunk,
+    disableMinimize,
+    disableSourceMap,
+    enableCssModuleTSDeclaration,
+    enableInlineScripts,
+    enableInlineStyles,
+    polyfill,
+    // We need to do this in the app-tools prepare hook because some files will be generated into the dist directory in the analyze process
+    cleanDistPath: false,
+    disableFilenameHash: disableAssetsCache,
+    enableLatestDecorators,
+    filename: {
+      css: cssModuleLocalIdentName
+    },
+    // `@modern-js/webpack` used to generate asset manifest by default
+    enableAssetManifest: true,
+    // compatible the modern-js with fallback behavior
+    enableAssetFallback: true
+  };
+}