@modern-js/app-tools 1.0.0-alpha.3

package/dist/types/locale/zh.d.ts

@@ -0,0 +1,21 @@
+export declare const ZH_LOCALE: {
+  command: {
+    dev: {
+      describe: string;
+      config: string;
+    };
+    build: {
+      describe: string;
+    };
+    start: {
+      describe: string;
+    };
+    new: {
+      describe: string;
+      debug: string;
+      config: string;
+      distTag: string;
+      registry: string;
+    };
+  };
+};

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

@@ -0,0 +1,11 @@
+import webpack, { Configuration } from 'webpack';
+import { IAppContext, NormalizedConfig } from '@modern-js/core';
+export declare const createCompiler: ({
+  webpackConfigs,
+  userConfig: _userConfig,
+  appContext
+}: {
+  webpackConfigs: Configuration[];
+  userConfig: NormalizedConfig;
+  appContext: IAppContext;
+}) => Promise<webpack.MultiCompiler>;

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

@@ -0,0 +1,2 @@
+import { Server, ModernServerOptions } from '@modern-js/server';
+export declare const createServer: (options: ModernServerOptions) => Promise<Server>;

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

@@ -0,0 +1 @@
+export declare function getLocaleLanguage(): string;

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

@@ -0,0 +1,2 @@
+import { IAppContext } from '@modern-js/core';
+export declare const printInstructions: (appContext: IAppContext) => Promise<void>;

package/lib/types.d.ts

@@ -0,0 +1,138 @@
+/// <reference types="node" />
+/// <reference types="react" />
+/// <reference types="react-dom" />
+/// <reference path="./dist/types/index.d.ts" />
+/// <reference types="@modern-js/plugin-express/types" />
+/// <reference types="@modern-js/plugin-koa/types" />
+/// <reference types="@modern-js/plugin-egg" />
+/// <reference types="@modern-js/plugin-nest" />
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    readonly NODE_ENV: 'development' | 'production' | 'test';
+    readonly PUBLIC_URL: string;
+  }
+}
+
+declare module '*.bmp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.ico' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.webp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.svg' {
+  import * as React from 'react';
+
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement>
+  >;
+
+  const src: string;
+  export default src;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.styl' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.styl' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.md' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.hbs' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.yaml' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.toml' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.xml' {
+  const src: string;
+  export default src;
+}
+
+declare module '@modern-js/runtime/*' {}

package/modern.config.js

@@ -0,0 +1,6 @@
+/** @type {import('@modern-js/module-tools').UserConfig} */
+module.exports = {
+  output: {
+    disableSourceMap: true,
+  },
+};

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@modern-js/app-tools",
+  "version": "1.0.0-alpha.3",
+  "jsnext:source": "./src/index.ts",
+  "types": "./lib/types.d.ts",
+  "main": "./dist/js/node/index.js",
+  "module": "./dist/js/treeshaking/index.js",
+  "jsnext:modern": "./dist/js/modern/index.js",
+  "exports": {
+    ".": {
+      "node": {
+        "import": "./dist/js/modern/index.js",
+        "require": "./dist/js/node/index.js"
+      },
+      "default": "./dist/js/treeshaking/index.js"
+    },
+    "./cli": "./dist/js/node/index.js"
+  },
+  "bin": {
+    "modern": "./bin/modern.js"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7",
+    "@modern-js/core": "^1.0.0-alpha.3",
+    "@modern-js/types": "^1.0.0-alpha.3",
+    "@modern-js/i18n-cli-language-detector": "^1.0.0-alpha.3",
+    "@modern-js/new-action": "^1.0.0-alpha.3",
+    "@modern-js/plugin": "^1.0.0-alpha.3",
+    "@modern-js/plugin-analyze": "^1.0.0-alpha.3",
+    "@modern-js/plugin-fast-refresh": "^1.0.0-alpha.3",
+    "@modern-js/plugin-i18n": "^1.0.0-alpha.3",
+    "@modern-js/plugin-polyfill": "^1.0.0-alpha.3",
+    "@modern-js/server": "^1.0.0-alpha.3",
+    "@modern-js/utils": "^1.0.0-alpha.3",
+    "@modern-js/webpack": "^1.0.0-alpha.3",
+    "webpack": "^5.54.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^26",
+    "@types/node": "^14",
+    "@types/react": "^17",
+    "@types/react-dom": "^17",
+    "typescript": "^4",
+    "@modern-js/plugin-testing": "^1.0.0-alpha.3",
+    "@modern-js/module-tools": "^1.0.0-alpha.3"
+  },
+  "sideEffects": false,
+  "modernConfig": {
+    "output": {
+      "packageMode": "node-js"
+    }
+  },
+  "scripts": {
+    "new": "modern new",
+    "build": "modern build",
+    "test": "modern test --passWithNoTests"
+  }
+}

package/src/commands/build.ts

@@ -0,0 +1,123 @@
+import { Configuration, webpack } from 'webpack';
+import { WebpackConfigTarget, getWebpackConfig } from '@modern-js/webpack';
+import {
+  useAppContext,
+  useResolvedConfigContext,
+  mountHook,
+} from '@modern-js/core';
+import {
+  fs,
+  formatWebpackMessages,
+  measureFileSizesBeforeBuild,
+  printFileSizesAfterBuild,
+  printBuildError,
+  logger,
+  isUseSSRBundle,
+} from '@modern-js/utils';
+
+// These sizes are pretty large. We'll warn for bundles exceeding them.
+const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
+const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
+
+export const build = async () => {
+  const webpackBuild = async (webpackConfig: Configuration, type?: string) => {
+    const compiler = webpack(webpackConfig);
+
+    return new Promise((resolve, reject) => {
+      let label = process.env.NODE_ENV || '';
+      if (type && type !== 'legacy') {
+        label += ` ${type}`;
+      }
+      logger.info(`Creating a ${label} build...`);
+
+      compiler.run((err, stats) => {
+        let messages: {
+          errors: any;
+          warnings: any;
+        };
+        if (!err) {
+          messages = formatWebpackMessages(
+            stats!.toJson({ all: false, warnings: true, errors: true }),
+          );
+
+          if (messages.errors.length === 0) {
+            logger.info(`File sizes after ${label} build:\n`);
+            printFileSizesAfterBuild(
+              stats,
+              previousFileSizes,
+              outputPath,
+              WARN_AFTER_BUNDLE_GZIP_SIZE,
+              WARN_AFTER_CHUNK_GZIP_SIZE,
+            );
+            logger.log();
+          }
+        }
+
+        // When using run or watch, call close and wait for it to finish before calling run or watch again.
+        // Concurrent compilations will corrupt the output files.
+        compiler.close(closeErr => {
+          if (closeErr) {
+            logger.error(closeErr);
+          }
+          if (err) {
+            reject(err);
+          } else {
+            if (messages.errors.length) {
+              reject(new Error(messages.errors.join('\n\n')));
+              return;
+            }
+            resolve({ warnings: messages.warnings });
+          }
+        });
+      });
+    });
+  };
+
+  /* eslint-disable react-hooks/rules-of-hooks */
+  const { value: resolvedConfig } = useResolvedConfigContext();
+  const { value: appContext } = useAppContext();
+  /* eslint-enable react-hooks/rules-of-hooks */
+
+  const outputPath = appContext.distDirectory;
+  const previousFileSizes = await measureFileSizesBeforeBuild(outputPath);
+  fs.emptyDirSync(outputPath);
+
+  const buildConfigs = [];
+
+  buildConfigs.push({
+    type: 'legacy',
+    config: getWebpackConfig(WebpackConfigTarget.CLIENT)!,
+  });
+
+  if (resolvedConfig.output.enableModernMode) {
+    buildConfigs.push({
+      type: 'modern',
+      config: getWebpackConfig(WebpackConfigTarget.MODERN)!,
+    });
+  }
+
+  if (isUseSSRBundle(resolvedConfig)) {
+    buildConfigs.push({
+      type: 'ssr',
+      config: getWebpackConfig(WebpackConfigTarget.NODE)!,
+    });
+  }
+
+  await (mountHook() as any).beforeBuild({
+    webpackConfigs: buildConfigs.map(({ config }) => config),
+  });
+
+  for (const buildConfig of buildConfigs) {
+    const { type: buildType, config } = buildConfig;
+    try {
+      await webpackBuild(config, buildType);
+    } catch (error) {
+      printBuildError(error as Error);
+    }
+  }
+  await (mountHook() as any).afterBuild();
+
+  // force exit after build.
+  // eslint-disable-next-line no-process-exit
+  process.exit(0);
+};

package/src/commands/dev.ts

@@ -0,0 +1,80 @@
+import {
+  Configuration,
+  getWebpackConfig,
+  WebpackConfigTarget,
+} from '@modern-js/webpack';
+import {
+  fs,
+  logger,
+  HMR_SOCK_PATH,
+  clearConsole,
+  chalk,
+  isSSR,
+} from '@modern-js/utils';
+import {
+  useAppContext,
+  useResolvedConfigContext,
+  mountHook,
+} from '@modern-js/core';
+import { createCompiler } from '../utils/createCompiler';
+import { createServer } from '../utils/createServer';
+
+export const dev = async () => {
+  /* eslint-disable react-hooks/rules-of-hooks */
+  const { value: appContext } = useAppContext();
+  const { value: userConfig } = useResolvedConfigContext();
+  /* eslint-enable react-hooks/rules-of-hooks */
+
+  const { appDirectory, distDirectory, port } = appContext;
+
+  fs.emptyDirSync(distDirectory);
+
+  await (mountHook() as any).beforeDev();
+
+  const webpackConfigs = [
+    isSSR(userConfig) && getWebpackConfig(WebpackConfigTarget.NODE),
+    getWebpackConfig(WebpackConfigTarget.CLIENT),
+  ].filter(Boolean) as Configuration[];
+
+  const compiler = await createCompiler({
+    webpackConfigs,
+    userConfig,
+    appContext,
+  });
+
+  const app = await createServer({
+    dev: {
+      ...{
+        client: {
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+          port: port!.toString(),
+          overlay: false,
+          logging: 'none',
+          path: HMR_SOCK_PATH,
+          host: 'localhost',
+        },
+        dev: { writeToDisk: (file: string) => !file.includes('.hot-update.') },
+        hot: true,
+        liveReload: true,
+        port,
+      },
+      ...userConfig.tools.devServer,
+    },
+    compiler,
+    pwd: appDirectory,
+    config: userConfig as any,
+    plugins: appContext.plugins
+      .filter((p: any) => p.server)
+      .map((p: any) => p.server),
+  });
+
+  app.listen(port, (err: Error) => {
+    if (err) {
+      throw err;
+    }
+
+    clearConsole();
+
+    logger.log(chalk.cyan(`Starting the development server...`));
+  });
+};

package/src/commands/index.ts

@@ -0,0 +1,3 @@
+export * from './dev';
+export * from './build';
+export * from './start';

package/src/commands/start.ts

@@ -0,0 +1,30 @@
+import { logger, chalk } from '@modern-js/utils';
+import { useAppContext, useResolvedConfigContext } from '@modern-js/core';
+import server from '@modern-js/server';
+import { printInstructions } from '../utils/printInstructions';
+
+export const start = async () => {
+  /* eslint-disable react-hooks/rules-of-hooks */
+  const { value: appContext } = useAppContext();
+  const { value: userConfig } = useResolvedConfigContext();
+  /* eslint-enable react-hooks/rules-of-hooks */
+
+  const { appDirectory, port } = appContext;
+
+  logger.log(chalk.cyan(`Starting the modern server...`));
+
+  const app = await server({
+    pwd: appDirectory,
+    config: userConfig as any,
+    plugins: appContext.plugins
+      .filter((p: any) => p.server)
+      .map((p: any) => p.server),
+  });
+
+  app.listen(port, async (err: Error) => {
+    if (err) {
+      throw err;
+    }
+    await printInstructions(appContext);
+  });
+};

package/src/index.ts

@@ -0,0 +1,87 @@
+import { createPlugin, defineConfig, usePlugins, cli } from '@modern-js/core';
+import { lifecycle } from './lifecycle';
+import { i18n, localeKeys } from './locale';
+import { getLocaleLanguage } from './utils/language';
+import { start } from './commands/start';
+import { dev } from './commands/dev';
+
+export { defineConfig };
+
+// eslint-disable-next-line react-hooks/rules-of-hooks
+usePlugins([
+  require.resolve('@modern-js/plugin-analyze/cli'),
+  require.resolve('@modern-js/plugin-fast-refresh/cli'),
+  require.resolve('@modern-js/plugin-polyfill/cli'),
+]);
+
+export default createPlugin(
+  (() => {
+    const locale = getLocaleLanguage();
+    i18n.changeLanguage({ locale });
+
+    lifecycle();
+
+    return {
+      commands({ program }: any) {
+        program
+          .command('dev')
+          .usage('[options]')
+          .description(i18n.t(localeKeys.command.dev.describe))
+          .option('-c --config <config>', i18n.t(localeKeys.command.dev.config))
+          .action(async () => {
+            await dev();
+          });
+
+        program
+          .command('build')
+          .usage('[options]')
+          .description(i18n.t(localeKeys.command.build.describe))
+          .action(async () => {
+            const { build } = await import('./commands/build');
+            await build();
+          });
+
+        program
+          .command('start')
+          .usage('[options]')
+          .description(i18n.t(localeKeys.command.start.describe))
+          .action(async () => {
+            await start();
+          });
+
+        program
+          .command('new')
+          .usage('[options]')
+          .description(i18n.t(localeKeys.command.new.describe))
+          .option('-d, --debug', i18n.t(localeKeys.command.new.debug), false)
+          .option(
+            '-c, --config <config>',
+            i18n.t(localeKeys.command.new.config),
+          )
+          .option('--dist-tag <tag>', i18n.t(localeKeys.command.new.distTag))
+          .option('--registry', i18n.t(localeKeys.command.new.registry))
+          .action(async (options: any) => {
+            const { MWANewAction } = await import('@modern-js/new-action');
+            await MWANewAction({ ...options, locale });
+          });
+      },
+      async fileChange() {
+        // restart cli.
+        const shouldRestart = await cli.restart();
+        if (shouldRestart) {
+          await dev();
+        }
+      },
+    };
+  }) as any,
+  {
+    post: [
+      '@modern-js/plugin-analyze',
+      '@modern-js/plugin-fast-refresh',
+      '@modern-js/plugin-ssr',
+      '@modern-js/plugin-state',
+      '@modern-js/plugin-router',
+      '@modern-js/plugin-polyfill',
+    ],
+  },
+);

package/src/lifecycle.ts

@@ -0,0 +1,37 @@
+import { createAsyncWaterfall, createAsyncWorkflow } from '@modern-js/plugin';
+import { registerHook } from '@modern-js/core';
+
+import type { Compiler, Configuration, MultiCompiler } from '@modern-js/types';
+
+export const beforeDev = createAsyncWorkflow();
+
+export const afterDev = createAsyncWorkflow();
+
+export const beforeCreateCompiler = createAsyncWorkflow<{
+  webpackConfigs: Configuration[];
+}>();
+
+export const afterCreateCompiler = createAsyncWorkflow<{
+  compiler: Compiler | MultiCompiler | undefined;
+}>();
+
+export const beforePrintInstructions =
+  createAsyncWaterfall<{ instructions: string }>();
+
+export const beforeBuild = createAsyncWorkflow<{
+  webpackConfigs: Configuration[];
+}>();
+
+export const afterBuild = createAsyncWorkflow();
+
+export const lifecycle = () => {
+  registerHook({
+    beforeDev,
+    afterDev,
+    beforeCreateCompiler,
+    afterCreateCompiler,
+    beforePrintInstructions,
+    beforeBuild,
+    afterBuild,
+  });
+};

package/src/locale/en.ts

@@ -0,0 +1,17 @@
+export const EN_LOCALE = {
+  command: {
+    dev: {
+      describe: 'start dev server',
+      config: 'specify config file',
+    },
+    build: { describe: 'build application' },
+    start: { describe: 'start server' },
+    new: {
+      describe: 'generator runner for MWA project',
+      debug: 'using debug mode to log something',
+      config: 'set default generator config(json string)',
+      distTag: `use specified tag version for it's generator`,
+      registry: 'set npm registry url to run npm command',
+    },
+  },
+};

package/src/locale/index.ts

@@ -0,0 +1,9 @@
+import { I18n } from '@modern-js/plugin-i18n';
+import { ZH_LOCALE } from './zh';
+import { EN_LOCALE } from './en';
+
+const i18n = new I18n();
+
+const localeKeys = i18n.init('zh', { zh: ZH_LOCALE, en: EN_LOCALE });
+
+export { i18n, localeKeys };

package/src/locale/zh.ts

@@ -0,0 +1,17 @@
+export const ZH_LOCALE = {
+  command: {
+    dev: {
+      describe: '本地开发命令',
+      config: '制定配置文件路径',
+    },
+    build: { describe: '构建应用命令' },
+    start: { describe: '应用启动命令' },
+    new: {
+      describe: 'MWA 项目中中执行生成器',
+      debug: '开启 Debug 模式，打印调试日志信息',
+      config: '生成器运行默认配置(JSON 字符串)',
+      distTag: '生成器使用特殊的 npm Tag 版本',
+      registry: '生成器运行过程中定制 npm Registry',
+    },
+  },
+};