@modern-js/app-tools 1.2.0 → 1.4.0

package/package.json

@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "1.2.0",
+  "version": "1.4.0",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/js/node/index.js",
@@ -20,13 +20,20 @@
   "exports": {
     ".": {
       "node": {
+        "jsnext:source": "./src/index.ts",
         "import": "./dist/js/modern/index.js",
         "require": "./dist/js/node/index.js"
       },
       "default": "./dist/js/treeshaking/index.js"
     },
-    "./cli": "./dist/js/node/index.js",
-    "./types": "./lib/types.d.ts"
+    "./cli": {
+      "jsnext:source": "./src/index.ts",
+      "default": "./dist/js/node/index.js"
+    },
+    "./type": {
+      "jsnext:source": "./lib/types.d.ts",
+      "default": "./lib/types.d.ts"
+    }
   },
   "typesVersions": {
     "*": {
@@ -43,18 +50,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7",
-    "@modern-js/core": "^1.1.4",
-    "@modern-js/types": "^1.1.5",
-    "@modern-js/i18n-cli-language-detector": "^1.1.1",
-    "@modern-js/new-action": "^1.2.1",
-    "@modern-js/plugin": "^1.1.2",
-    "@modern-js/plugin-analyze": "^1.1.1",
-    "@modern-js/plugin-fast-refresh": "^1.1.1",
-    "@modern-js/plugin-i18n": "^1.1.2",
-    "@modern-js/plugin-polyfill": "^1.1.1",
-    "@modern-js/server": "^1.2.1",
-    "@modern-js/utils": "^1.1.6",
-    "@modern-js/webpack": "^1.1.3",
+    "@modern-js/core": "^1.4.0",
+    "@modern-js/types": "^1.3.0",
+    "@modern-js/i18n-cli-language-detector": "^1.2.1",
+    "@modern-js/new-action": "^1.3.1",
+    "@modern-js/plugin": "^1.2.1",
+    "@modern-js/plugin-analyze": "^1.3.0",
+    "@modern-js/plugin-fast-refresh": "^1.2.1",
+    "@modern-js/plugin-i18n": "^1.2.1",
+    "@modern-js/server": "^1.4.0",
+    "@modern-js/utils": "^1.3.0",
+    "@modern-js/webpack": "^1.3.0",
     "webpack": "^5.54.0"
   },
   "devDependencies": {
@@ -63,8 +69,9 @@
     "@types/react": "^17",
     "@types/react-dom": "^17",
     "typescript": "^4",
-    "@modern-js/plugin-testing": "^1.2.2",
-    "@modern-js/module-tools": "^1.1.4"
+    "@scripts/build": "0.0.0",
+    "jest": "^27",
+    "@scripts/jest-config": "0.0.0"
   },
   "sideEffects": false,
   "modernConfig": {
@@ -74,12 +81,13 @@
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
-    "access": "public"
+    "access": "public",
+    "types": "./dist/types/index.d.ts"
   },
   "scripts": {
     "new": "modern new",
     "build": "modern build",
-    "test": "modern test --passWithNoTests"
+    "test": "jest --passWithNoTests"
   },
   "readme": "\n<p align=\"center\">\n  <a href=\"https://modernjs.dev\" target=\"blank\"><img src=\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ylaelkeh7nuhfnuhf/modernjs-cover.png\" width=\"300\" alt=\"Modern.js Logo\" /></a>\n</p>\n<p align=\"center\">\n现代 Web 工程体系\n  <br/>\n  <a href=\"https://modernjs.dev\" target=\"blank\">\n    modernjs.dev\n  </a>\n</p>\n<p align=\"center\">\n  The meta-framework suite designed from scratch for frontend-focused modern web development\n</p>\n\n# Introduction\n\n> The doc site ([modernjs.dev](https://modernjs.dev)) and articles are only available in Chinese for now, we are planning to add English versions soon.\n\n- [Modern.js: Hello, World!](https://zhuanlan.zhihu.com/p/426707646)\n\n## Getting Started\n\n- [Quick Start](https://modernjs.dev/docs/start)\n- [Guides](https://modernjs.dev/docs/guides)\n- [API References](https://modernjs.dev/docs/apis)\n\n## Contributing\n\n- [Contributing Guide](https://github.com/modern-js-dev/modern.js/blob/main/CONTRIBUTING.md)\n"
 }

package/tests/commands/build.test.ts

@@ -0,0 +1,37 @@
+import { build } from '../../src/commands/build';
+
+const mockBeforeBuild = jest.fn();
+const mockAfterBuild = jest.fn();
+const mockGenerateRoutes = jest.fn();
+
+jest.mock('@modern-js/core', () => ({
+  __esModule: true,
+  mountHook() {
+    return {
+      beforeBuild: mockBeforeBuild,
+      afterBuild: mockAfterBuild,
+    };
+  },
+  useAppContext: jest.fn(() => ({
+    existSrc: false,
+  })),
+  useResolvedConfigContext: jest.fn(),
+}));
+
+jest.mock('../../src/utils/routes', () => ({
+  __esModule: true,
+  generateRoutes: () => mockGenerateRoutes(),
+}));
+
+describe('command build', () => {
+  afterAll(() => {
+    jest.resetAllMocks();
+  });
+
+  test('existSrc is false', async () => {
+    await build();
+    expect(mockBeforeBuild).toBeCalled();
+    expect(mockGenerateRoutes).toBeCalled();
+    expect(mockAfterBuild).toBeCalled();
+  });
+});

package/tests/commands/dev.test.ts

@@ -0,0 +1,7 @@
+import { dev } from '../../src/commands/dev';
+
+describe('command', () => {
+  test('dev', () => {
+    expect(dev).toBeDefined();
+  });
+});

package/tests/index.test.ts

@@ -0,0 +1,7 @@
+import plugin from '../src';
+
+describe('app-tools', () => {
+  it('default', () => {
+    expect(plugin).toBeDefined();
+  });
+});

package/tests/routes.test.ts

@@ -0,0 +1,27 @@
+import { fs } from '@modern-js/utils';
+import { generateRoutes } from '../src/utils/routes';
+
+jest.mock('@modern-js/utils', () => {
+  const originalModule = jest.requireActual('@modern-js/utils');
+  return {
+    __esModule: true,
+    ...originalModule,
+    fs: {
+      outputFile: jest.fn((filename: string, output: string) => ({
+        filename,
+        output,
+      })),
+    },
+  };
+});
+
+describe('routes', () => {
+  test('generateRoutes', async () => {
+    const mockAppContext = {
+      serverRoutes: [],
+      distDirectory: './dist',
+    };
+    await generateRoutes(mockAppContext as any);
+    expect(fs.outputFile).toHaveBeenCalledTimes(1);
+  });
+});

package/tests/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "@modern-js/tsconfig/base",
+  "compilerOptions": {
+    "declaration": true,
+    "jsx": "preserve",
+    "baseUrl": "./",
+    "outDir": "./out",
+    "emitDeclarationOnly": true,
+    "isolatedModules": true,
+    "paths": {},
+    "types": ["node", "jest"]
+  }
+}

package/tsconfig.json

@@ -8,9 +8,7 @@
     "baseUrl": "./",
     "skipLibCheck": true,
     "isolatedModules": true,
-    "paths": {
-      "@/*": ["./src/*"]
-    }
+    "paths": {}
   },
   "include": ["src"]
 }

package/src/commands/build.ts

@@ -1,129 +0,0 @@
-import { Configuration, webpack } from 'webpack';
-import { WebpackConfigTarget, getWebpackConfig } from '@modern-js/webpack';
-import {
-  useAppContext,
-  useResolvedConfigContext,
-  mountHook,
-  ResolvedConfigContext,
-  manager,
-} 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;
-
-interface CliOptions {
-  analyze?: boolean;
-}
-
-export const build = async (options?: CliOptions) => {
-  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 resolvedConfig = useResolvedConfigContext();
-  const appContext = useAppContext();
-  /* eslint-enable react-hooks/rules-of-hooks */
-
-  manager.run(() => {
-    ResolvedConfigContext.set({ ...resolvedConfig, cliOptions: options });
-  });
-
-  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();
-};

package/src/commands/deploy.ts

@@ -1,6 +0,0 @@
-import { mountHook } from '@modern-js/core';
-
-export const deploy = async (options: any) => {
-  await (mountHook() as any).beforeDeploy(options);
-  await (mountHook() as any).afterDeploy(options);
-};

package/src/commands/dev.ts

@@ -1,80 +0,0 @@
-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 appContext = useAppContext();
-  const 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: {
-          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,
-        https: userConfig.dev.https,
-      },
-      ...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

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

package/src/commands/start.ts

@@ -1,30 +0,0 @@
-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 appContext = useAppContext();
-  const 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, userConfig);
-  });
-};

package/src/index.ts

@@ -1,100 +0,0 @@
-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))
-          .option('--analyze', i18n.t(localeKeys.command.build.analyze))
-          .action(async (options: any) => {
-            const { build } = await import('./commands/build');
-            await build(options);
-            // force exit after build.
-            // eslint-disable-next-line no-process-exit
-            process.exit(0);
-          });
-
-        program
-          .command('start')
-          .usage('[options]')
-          .description(i18n.t(localeKeys.command.start.describe))
-          .action(async () => {
-            await start();
-          });
-
-        program
-          .command('deploy')
-          .usage('[options]')
-          .description(i18n.t(localeKeys.command.deploy.describe))
-          .action(async (options: any) => {
-            const { build } = await import('./commands/build');
-            await build();
-            const { deploy } = await import('./commands/deploy');
-            await deploy(options);
-            // eslint-disable-next-line no-process-exit
-            process.exit(0);
-          });
-
-        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() {
-        await cli.restart();
-      },
-    };
-  }) 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

@@ -1,43 +0,0 @@
-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 beforeDeploy = createAsyncWorkflow<Record<string, any>>();
-
-export const afterDeploy = createAsyncWorkflow<Record<string, any>>();
-
-export const lifecycle = () => {
-  registerHook({
-    beforeDev,
-    afterDev,
-    beforeCreateCompiler,
-    afterCreateCompiler,
-    beforePrintInstructions,
-    beforeBuild,
-    afterBuild,
-    beforeDeploy,
-    afterDeploy,
-  });
-};

package/src/locale/en.ts

@@ -1,18 +0,0 @@
-export const EN_LOCALE = {
-  command: {
-    dev: {
-      describe: 'start dev server',
-      config: 'specify config file',
-    },
-    build: { describe: 'build application', analyze: 'analyze bundle' },
-    start: { describe: 'start server' },
-    deploy: { describe: 'deploy application' },
-    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

@@ -1,9 +0,0 @@
-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

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