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

package/dist/js/modern/commands/build.js

@@ -1,22 +1,21 @@
 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; }
-
 import { ResolvedConfigContext } from '@modern-js/core';
-import { logger, isUseSSRBundle, printBuildError } from '@modern-js/utils';
+import { logger, printBuildError } from '@modern-js/utils';
 import { generateRoutes } from "../utils/routes";
-import { buildServerConfig, emitResolvedConfig } from "../utils/config";
-import createBuilder from "../builder";
+import { buildServerConfig } from "../utils/config";
 export const build = async (api, options) => {
+  if (options !== null && options !== void 0 && options.analyze) {
+    // Builder will read this env var to enable bundle analyzer
+    process.env.BUNDLE_ANALYZE = 'true';
+  }
   let resolvedConfig = api.useResolvedConfigContext();
   const appContext = api.useAppContext();
   const hookRunners = api.useHookRunners();
   const {
     apiOnly
   } = appContext;
-
   if (apiOnly) {
     const {
       appDirectory,
@@ -39,7 +38,6 @@ export const build = async (api, options) => {
     });
     return;
   }
-
   resolvedConfig = _objectSpread(_objectSpread({}, resolvedConfig), {}, {
     cliOptions: options
   });
@@ -54,47 +52,15 @@ export const build = async (api, options) => {
     distDirectory,
     configFile: serverConfigFile
   });
-  const targets = ['web'];
-
-  if (resolvedConfig.output.enableModernMode) {
-    targets.push('modern-web');
-  }
-
-  if (isUseSSRBundle(resolvedConfig)) {
-    targets.push('node');
-  }
-
   try {
-    const builder = await createBuilder({
-      target: targets,
-      appContext,
-      normalizedConfig: resolvedConfig,
-      compatPluginConfig: {
-        async onBeforeBuild({
-          bundlerConfigs
-        }) {
-          await generateRoutes(appContext);
-          await hookRunners.beforeBuild({
-            bundlerConfigs
-          });
-        },
-
-        async onAfterBuild({
-          stats
-        }) {
-          await hookRunners.afterBuild({
-            stats
-          });
-          await emitResolvedConfig(appDirectory, resolvedConfig);
-        }
-
-      }
-    });
     logger.info('Create a production build...\n');
-    await builder.build();
+    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); // eslint-disable-next-line no-process-exit
-
+    printBuildError(error);
+    // eslint-disable-next-line no-process-exit
     process.exit(1);
   }
 };

package/dist/js/modern/commands/dev.js

@@ -1,25 +1,27 @@
 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; }
-
-import { logger, isSSR } from '@modern-js/utils';
+import { logger } from '@modern-js/utils';
 import { ResolvedConfigContext } from '@modern-js/core';
+import { createFileWatcher } from "../utils/createFileWatcher";
 import { printInstructions } from "../utils/printInstructions";
-import { createDevCompiler } from "../utils/createCompiler";
 import { createServer, injectDataLoaderPlugin } from "../utils/createServer";
 import { generateRoutes } from "../utils/routes";
 import { getSpecifiedEntries } from "../utils/getSpecifiedEntries";
 import { buildServerConfig } from "../utils/config";
 export const dev = async (api, options) => {
-  let userConfig = api.useResolvedConfigContext();
+  var _normalizedConfig$too;
+  if (options.analyze) {
+    // Builder will read this env var to enable bundle analyzer
+    process.env.BUNDLE_ANALYZE = 'true';
+  }
+  let normalizedConfig = api.useResolvedConfigContext();
   const appContext = api.useAppContext();
   const hookRunners = api.useHookRunners();
-  userConfig = _objectSpread(_objectSpread({}, userConfig), {}, {
+  normalizedConfig = _objectSpread(_objectSpread({}, normalizedConfig), {}, {
     cliOptions: options
   });
-  ResolvedConfigContext.set(userConfig);
+  ResolvedConfigContext.set(normalizedConfig);
   const {
     appDirectory,
     distDirectory,
@@ -46,17 +48,12 @@ export const dev = async (api, options) => {
   });
   await hookRunners.beforeDev();
   let compiler = null;
-
   if (!apiOnly) {
-    const target = isSSR(userConfig) ? ['web', 'node'] : ['web'];
-    compiler = await createDevCompiler({
-      target,
-      api,
-      normalizedConfig: userConfig,
-      appContext
-    });
+    if (!appContext.builder) {
+      throw new Error('Expect the Builder to have been initialized, But the appContext.builder received `undefined`');
+    }
+    compiler = await appContext.builder.createCompiler();
   }
-
   await generateRoutes(appContext);
   const app = await createServer({
     dev: _objectSpread(_objectSpread({}, {
@@ -69,11 +66,11 @@ export const dev = async (api, options) => {
       hot: true,
       liveReload: true,
       port,
-      https: userConfig.dev.https
-    }), userConfig.tools.devServer),
+      https: normalizedConfig.dev.https
+    }), (_normalizedConfig$too = normalizedConfig.tools) === null || _normalizedConfig$too === void 0 ? void 0 : _normalizedConfig$too.devServer),
     compiler,
     pwd: appDirectory,
-    config: userConfig,
+    config: normalizedConfig,
     serverConfigFile,
     internalPlugins: injectDataLoaderPlugin(serverInternalPlugins)
   });
@@ -81,11 +78,11 @@ export const dev = async (api, options) => {
     if (err) {
       throw err;
     }
-
     if (!apiOnly) {
-      logger.info(`Starting dev server...`);
+      logger.info(`Starting dev server...\n`);
     } else {
-      printInstructions(hookRunners, appContext, userConfig);
+      printInstructions(hookRunners, appContext, normalizedConfig);
     }
   });
+  await createFileWatcher(appContext, normalizedConfig.source.configDir, hookRunners);
 };

package/dist/js/modern/commands/inspect.js

@@ -1,28 +1,13 @@
 import { join } from 'path';
-import { isUseSSRBundle } from '@modern-js/utils';
-import createBuilder from "../builder";
 export const inspect = async (api, options) => {
-  const resolvedConfig = api.useResolvedConfigContext();
   const appContext = api.useAppContext();
-  const targets = ['web'];
-
-  if (resolvedConfig.output.enableModernMode) {
-    targets.push('modern-web');
+  if (!appContext.builder) {
+    throw new Error('Expect the Builder to have been initialized, But the appContext.builder received `undefined`');
   }
-
-  if (isUseSSRBundle(resolvedConfig)) {
-    targets.push('node');
-  }
-
-  const builder = await createBuilder({
-    target: targets,
-    appContext,
-    normalizedConfig: resolvedConfig
-  });
-  return builder.inspectConfig({
+  return appContext.builder.inspectConfig({
     env: options.env,
     verbose: options.verbose,
-    outputPath: join(builder.context.distPath, options.output),
+    outputPath: join(appContext === null || appContext === void 0 ? void 0 : appContext.builder.context.distPath, options.output),
     writeToDisk: true
   });
 };

package/dist/js/modern/commands/start.js

@@ -4,7 +4,6 @@ import { printInstructions } from "../utils/printInstructions";
 import { injectDataLoaderPlugin } from "../utils/createServer";
 export const start = async api => {
   var _userConfig$source;
-
   const appContext = api.useAppContext();
   const userConfig = api.useResolvedConfigContext();
   const hookRunners = api.useHookRunners();
@@ -17,6 +16,7 @@ export const start = async api => {
   const apiOnly = await isApiOnly(appContext.appDirectory, userConfig === null || userConfig === void 0 ? void 0 : (_userConfig$source = userConfig.source) === null || _userConfig$source === void 0 ? void 0 : _userConfig$source.entriesDir);
   const app = await server({
     pwd: appDirectory,
+    // FIXME: remove the `any` type
     config: userConfig,
     serverConfigFile,
     internalPlugins: injectDataLoaderPlugin(appContext.serverInternalPlugins),
@@ -26,7 +26,6 @@ export const start = async api => {
     if (err) {
       throw err;
     }
-
     await printInstructions(hookRunners, appContext, userConfig);
   });
 };

package/dist/js/modern/config/default.js

@@ -0,0 +1,207 @@
+export function createDefaultConfig(appContext) {
+  const defaultAlias = appContext ? {
+    [appContext.internalDirAlias]: appContext.internalDirectory,
+    [appContext.internalSrcAlias]: appContext.srcDirectory,
+    '@': appContext.srcDirectory,
+    '@shared': appContext.sharedDirectory
+  } : {};
+  const source = {
+    entries: undefined,
+    enableAsyncEntry: false,
+    disableDefaultEntries: false,
+    entriesDir: './src',
+    configDir: './config',
+    globalVars: undefined,
+    moduleScopes: undefined,
+    include: [],
+    alias: defaultAlias
+  };
+  const output = {
+    assetPrefix: '/',
+    distPath: {
+      html: 'html',
+      js: 'static/js',
+      css: 'static/css',
+      media: 'static/media',
+      root: 'dist'
+    },
+    copy: undefined,
+    disableCssModuleExtension: false,
+    enableCssModuleTSDeclaration: false,
+    disableMinimize: false,
+    enableInlineStyles: false,
+    enableInlineScripts: false,
+    disableSourceMap: false,
+    disableInlineRuntimeChunk: false,
+    disableFilenameHash: false,
+    enableLatestDecorators: false,
+    polyfill: 'entry',
+    dataUriLimit: 10000,
+    cssModuleLocalIdentName: undefined
+  };
+  const html = {
+    title: '',
+    titleByEntries: undefined,
+    meta: {
+      charset: {
+        charset: 'utf-8'
+      },
+      viewport: 'width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no',
+      'http-equiv': {
+        'http-equiv': 'x-ua-compatible',
+        content: 'ie=edge'
+      },
+      renderer: 'webkit',
+      layoutmode: 'standard',
+      imagemode: 'force',
+      'wap-font-scale': 'no',
+      'format-detection': 'telephone=no'
+    },
+    metaByEntries: undefined,
+    inject: 'head',
+    injectByEntries: undefined,
+    mountId: 'root',
+    favicon: '',
+    faviconByEntries: undefined,
+    disableHtmlFolder: false,
+    templateParameters: {},
+    templateParametersByEntries: undefined
+  };
+  const server = {
+    routes: undefined,
+    publicRoutes: undefined,
+    ssr: undefined,
+    ssrByEntries: undefined,
+    baseUrl: '/',
+    port: 8080
+  };
+  const dev = {
+    assetPrefix: false,
+    https: false
+  };
+  const tools = {
+    webpack: undefined,
+    babel: undefined,
+    postcss: undefined,
+    autoprefixer: undefined,
+    devServer: undefined,
+    tsLoader: undefined,
+    terser: undefined,
+    minifyCss: undefined
+  };
+  return {
+    source,
+    output,
+    server,
+    dev,
+    html,
+    tools,
+    plugins: [],
+    runtime: {},
+    runtimeByEntries: {}
+  };
+}
+export function createLegacyDefaultConfig(appContext) {
+  const defaultAlias = appContext ? {
+    [appContext.internalDirAlias]: appContext.internalDirectory,
+    [appContext.internalSrcAlias]: appContext.srcDirectory,
+    '@': appContext.srcDirectory,
+    '@shared': appContext.sharedDirectory
+  } : {};
+  const sourceDefaults = {
+    entries: undefined,
+    enableAsyncEntry: false,
+    disableDefaultEntries: false,
+    entriesDir: './src',
+    configDir: './config',
+    apiDir: './api',
+    envVars: [],
+    globalVars: undefined,
+    alias: defaultAlias,
+    moduleScopes: undefined,
+    include: []
+  };
+  const outputDefaults = {
+    assetPrefix: '/',
+    htmlPath: 'html',
+    jsPath: 'static/js',
+    cssPath: 'static/css',
+    mediaPath: 'static/media',
+    path: 'dist',
+    title: '',
+    titleByEntries: undefined,
+    meta: {
+      charset: {
+        charset: 'utf-8'
+      },
+      viewport: 'width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no',
+      'http-equiv': {
+        'http-equiv': 'x-ua-compatible',
+        content: 'ie=edge'
+      },
+      renderer: 'webkit',
+      layoutmode: 'standard',
+      imagemode: 'force',
+      'wap-font-scale': 'no',
+      'format-detection': 'telephone=no'
+    },
+    metaByEntries: undefined,
+    inject: 'head',
+    injectByEntries: undefined,
+    mountId: 'root',
+    favicon: '',
+    faviconByEntries: undefined,
+    copy: undefined,
+    disableHtmlFolder: false,
+    disableCssModuleExtension: false,
+    disableCssExtract: false,
+    enableCssModuleTSDeclaration: false,
+    disableMinimize: false,
+    enableInlineStyles: false,
+    enableInlineScripts: false,
+    disableSourceMap: false,
+    disableInlineRuntimeChunk: false,
+    disableAssetsCache: false,
+    enableLatestDecorators: false,
+    polyfill: 'entry',
+    dataUriLimit: 10000,
+    templateParameters: {},
+    templateParametersByEntries: undefined,
+    cssModuleLocalIdentName: undefined,
+    enableModernMode: false,
+    disableNodePolyfill: false,
+    enableTsLoader: false
+  };
+  const serverDefaults = {
+    routes: undefined,
+    publicRoutes: undefined,
+    ssr: undefined,
+    ssrByEntries: undefined,
+    baseUrl: '/',
+    port: 8080
+  };
+  const devDefaults = {
+    assetPrefix: false,
+    https: false
+  };
+  const toolsDefaults = {
+    webpack: undefined,
+    babel: undefined,
+    postcss: undefined,
+    autoprefixer: undefined,
+    lodash: undefined,
+    devServer: undefined,
+    tsLoader: undefined,
+    terser: undefined,
+    minifyCss: undefined
+  };
+  return {
+    source: sourceDefaults,
+    output: outputDefaults,
+    server: serverDefaults,
+    dev: devDefaults,
+    tools: toolsDefaults,
+    runtime: {},
+    runtimeByEntries: {}
+  };
+}

package/dist/js/modern/config/index.js

@@ -0,0 +1,2 @@
+export { createDefaultConfig, createLegacyDefaultConfig } from "./default";
+export { initialNormalizedConfig, checkIsLegacyConfig } from "./initial";

package/dist/js/modern/config/initial/createHtmlConfig.js

@@ -0,0 +1,32 @@
+export function createHtmlConfig(config) {
+  const {
+    disableHtmlFolder,
+    favicon,
+    faviconByEntries,
+    inject,
+    injectByEntries,
+    meta,
+    metaByEntries,
+    mountId,
+    title,
+    titleByEntries,
+    templateParameters,
+    templateParametersByEntries,
+    crossorigin
+  } = config.output;
+  return {
+    disableHtmlFolder,
+    favicon,
+    faviconByEntries,
+    inject,
+    injectByEntries,
+    meta,
+    metaByEntries,
+    mountId,
+    title,
+    titleByEntries,
+    crossorigin,
+    templateParameters,
+    templateParametersByEntries
+  };
+}

package/dist/js/modern/{builder → config/initial}/createOutputConfig.js

@@ -1,6 +1,4 @@
-import { createCopyPattern } from "./share";
-export function createOutputConfig(normalizedConfig, appContext) {
-  // TODO: add `externals` options in Modern.
+export function createOutputConfig(config) {
   const {
     assetPrefix,
     copy,
@@ -9,10 +7,13 @@ export function createOutputConfig(normalizedConfig, appContext) {
     jsPath,
     htmlPath,
     mediaPath,
+    enableTsLoader,
     path,
     disableInlineRuntimeChunk,
+    disableCssExtract,
     disableMinimize,
     disableSourceMap,
+    disableTsChecker,
     enableCssModuleTSDeclaration,
     enableInlineScripts,
     enableInlineStyles,
@@ -20,23 +21,24 @@ export function createOutputConfig(normalizedConfig, appContext) {
     dataUriLimit,
     disableAssetsCache,
     enableLatestDecorators,
-    disableCssModuleExtension
-  } = normalizedConfig.output;
-  const defaultCopyPattern = createCopyPattern(appContext, normalizedConfig, 'upload');
-  const builderCopy = copy ? [...copy, defaultCopyPattern] : [defaultCopyPattern];
+    disableCssModuleExtension,
+    ssg,
+    enableModernMode,
+    disableNodePolyfill
+  } = config.output;
   return {
     assetPrefix,
-    copy: builderCopy,
+    copy,
     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'
+      svg: mediaPath || 'media',
+      image: mediaPath || 'media',
+      font: mediaPath || 'media',
+      media: mediaPath || 'media'
     },
     dataUriLimit: {
       svg: dataUriLimit,
@@ -44,24 +46,23 @@ export function createOutputConfig(normalizedConfig, appContext) {
       font: dataUriLimit,
       media: dataUriLimit
     },
+    disableCssExtract,
     disableCssModuleExtension,
     disableInlineRuntimeChunk,
     disableMinimize,
     disableSourceMap,
+    disableTsChecker: disableTsChecker || enableTsLoader,
     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
+    ssg,
+    enableModernMode,
+    disableNodePolyfill
   };
 }

package/dist/js/modern/config/initial/createSourceConfig.js

@@ -0,0 +1,32 @@
+export function createSourceConfig(config) {
+  const {
+    alias,
+    envVars,
+    globalVars,
+    include,
+    moduleScopes,
+    preEntry,
+    entries,
+    enableAsyncEntry,
+    disableDefaultEntries,
+    entriesDir,
+    configDir
+  } = config.source;
+  const builderGlobalVars = globalVars || {};
+  for (const envVar of envVars || []) {
+    const envVarValue = process.env[envVar];
+    envVarValue && (builderGlobalVars[`process.env.${envVar}`] = envVarValue);
+  }
+  return {
+    alias,
+    moduleScopes,
+    globalVars: builderGlobalVars,
+    include,
+    preEntry,
+    entries,
+    enableAsyncEntry,
+    disableDefaultEntries,
+    entriesDir,
+    configDir
+  };
+}

package/dist/js/modern/config/initial/createToolsConfig.js

@@ -0,0 +1,41 @@
+export function createToolsConfig(config) {
+  const {
+    autoprefixer,
+    babel,
+    minifyCss,
+    terser,
+    webpack,
+    webpackChain,
+    tsLoader,
+    styledComponents,
+    sass,
+    postcss,
+    less,
+    htmlPlugin,
+    devServer,
+    tailwindcss,
+    jest,
+    esbuild
+  } = config.tools;
+  const {
+    enableTsLoader
+  } = config.output;
+  return {
+    tsLoader: enableTsLoader ? tsLoader : undefined,
+    autoprefixer,
+    babel,
+    minifyCss,
+    terser,
+    webpack,
+    webpackChain,
+    styledComponents,
+    sass,
+    postcss,
+    less,
+    htmlPlugin,
+    devServer,
+    tailwindcss,
+    jest,
+    esbuild
+  };
+}

package/dist/js/modern/config/initial/index.js

@@ -0,0 +1,11 @@
+import { initHtmlConfig, initSourceConfig, initToolsConfig } from "./inits";
+export { transformNormalizedConfig } from "./transformNormalizedConfig";
+export function checkIsLegacyConfig(config) {
+  return Boolean(config.legacy);
+}
+export function initialNormalizedConfig(config, appContext) {
+  initHtmlConfig(config, appContext);
+  initSourceConfig(config, appContext);
+  initToolsConfig(config);
+  return config;
+}