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

package/src/features/build/constants.ts

@@ -0,0 +1,52 @@
+import type { IPackageModeValue } from '../../types';
+
+// Universal JS 的默认选择，三份构建产物，支持 Node.js，对现代浏览器有优化
+const universalJs: IPackageModeValue[] = [
+  { type: 'module', syntax: 'es5', outDir: 'treeshaking' },
+  { type: 'commonjs', syntax: 'es6+', outDir: 'node' },
+  { type: 'module', syntax: 'es6+', outDir: 'modern' },
+];
+
+// Universal JS 的优化选择，两份构建产物，对现代浏览器无优化
+const universalJsLite: IPackageModeValue[] = [
+  { type: 'module', syntax: 'es5', outDir: 'treeshaking' },
+  { type: 'commonjs', syntax: 'es6+', outDir: 'node', copyDirs: ['modern'] },
+];
+
+// 纯前端代码的默认选择，两份构建产物
+const browserJs: IPackageModeValue[] = [
+  { type: 'module', syntax: 'es5', outDir: 'treeshaking', copyDirs: ['node'] },
+  { type: 'module', syntax: 'es6+', outDir: 'modern' },
+];
+
+// 纯前端代码的优化选择，单份构建产物，对现代浏览器无优化
+const browserJsLite: IPackageModeValue[] = [
+  {
+    type: 'module',
+    syntax: 'es5',
+    outDir: 'treeshaking',
+    copyDirs: ['modern', 'node'],
+  },
+];
+
+// 纯 Node.js 代码的默认选择，两份构建产物
+const nodeJs: IPackageModeValue[] = [
+  { type: 'commonjs', syntax: 'es6+', outDir: 'node' },
+  { type: 'module', syntax: 'es6+', outDir: 'modern' },
+];
+
+export const DEFAULT_PACKAGE_MODE = 'universal-js';
+
+export const PACKAGE_MODES = {
+  'universal-js': universalJs,
+  'universal-js-lite': universalJsLite,
+  'browser-js': browserJs,
+  'browser-js-lite': browserJsLite,
+  'node-js': nodeJs,
+};
+
+export const runBabelCompilerTitle = 'Run babel compiler code log';
+export const runTscWatchTitle = 'Run `tsc -w` log';
+export const runTscTitle = 'Run `tsc` log';
+export const runStyleCompilerTitle = 'Run style compiler code log';
+export const clearFlag = '\x1Bc';

package/src/features/build/index.ts

@@ -0,0 +1,36 @@
+import { Import } from '@modern-js/utils';
+import type { NormalizedConfig } from '@modern-js/core';
+import type { IBuildConfig } from '../../types';
+
+const buildFeature: typeof import('./build') = Import.lazy('./build', require);
+const buildWatchFeature: typeof import('./build-watch') = Import.lazy(
+  './build-watch',
+  require,
+);
+// const bp: typeof import('./build-platform') = Import.lazy(
+//   './build-platform',
+//   require,
+// );
+
+export const build = async (
+  config: IBuildConfig,
+  modernConfig: NormalizedConfig,
+) => {
+  const { enableWatchMode, platform } = config;
+  // TODO: maybe need watch mode in build platform
+  if (typeof platform === 'boolean' && platform) {
+    // await bp.buildPlatform({ platform: 'all', isTsProject });
+    return;
+  }
+
+  if (typeof platform === 'string') {
+    // await bp.buildPlatform({ platform, isTsProject });
+    return;
+  }
+
+  if (enableWatchMode) {
+    await buildWatchFeature.buildInWatchMode(config, modernConfig);
+  } else {
+    await buildFeature.buildSourceCode(config, modernConfig);
+  }
+};

package/src/features/build/logger/index.ts

@@ -0,0 +1,2 @@
+export * from './logText';
+export * from './loggerManager';

package/src/features/build/logger/logText.ts

@@ -0,0 +1,80 @@
+import { chalk } from '@modern-js/utils';
+
+export const colors = { title: chalk.rgb(218, 152, 92) };
+
+export const clearFlag = '\x1Bc';
+
+export const logTemplate = (
+  title: string,
+  messageStack: string[],
+  {
+    noBottomBorder = false,
+    bottomBorderText = '',
+    noLeftBorder = false,
+    leftBorder = '',
+    contentColor = (s: string) => s,
+  } = {},
+) => {
+  const maxLength = Infinity; // TODO: 考虑后面是否提供该参数
+  const leftBorderFlag = noLeftBorder ? '' : leftBorder;
+  const messageFragments = messageStack
+    .map(p => {
+      p.trim();
+
+      return `${leftBorderFlag}${p.replace(clearFlag, '')}`;
+    }) // 移除 clearFlag
+    .filter(s => s !== leftBorderFlag) // 过滤空字符串
+    .slice(0, maxLength); // 控制长度
+  const template = `${colors.title(title)}:
+${contentColor(messageFragments.join(''))}${
+    noBottomBorder ? '' : `\n${bottomBorderText}`
+  }`;
+  return template;
+};
+
+export interface LoggerTextOption {
+  title: string;
+  contentConfig?: {
+    noBottomBorder?: boolean;
+    bottomBorderText?: string;
+    noLeftBorder?: boolean;
+    leftBorder?: string;
+    contentColor?: (s: string) => string;
+    replace?: string[];
+  };
+}
+// 处理Log内容如何展示
+export class LoggerText {
+  messages: string[];
+
+  hasErrorMessage: boolean;
+
+  option: LoggerTextOption;
+
+  constructor(option: LoggerTextOption) {
+    this.messages = [];
+    this.option = option;
+    this.hasErrorMessage = false;
+  }
+
+  append(message: string) {
+    if (message.includes(clearFlag)) {
+      this.messages = [];
+    }
+    this.messages.push(message);
+  }
+
+  errorHappen() {
+    this.hasErrorMessage = true;
+  }
+
+  hasMessages() {
+    return this.messages.length > 0;
+  }
+
+  get value() {
+    const { title, contentConfig } = this.option;
+    const messages = [...new Set(this.messages)];
+    return logTemplate(title, messages, contentConfig);
+  }
+}

package/src/features/build/logger/loggerManager.ts

@@ -0,0 +1,132 @@
+/**
+ * 1. 注册构建任务
+ * 2. 监听各个构建任务进程中的信息：process.stdout.on('data' | 'error')
+ * 3. 分别输出内容
+ */
+import type { ChildProcess } from 'child_process';
+import EventEmitter from 'events';
+import { chalk, Import } from '@modern-js/utils';
+import type { LoggerTextOption, LoggerText } from './logText';
+
+const logText: typeof import('./logText') = Import.lazy('./logText', require);
+const readline: typeof import('../../../utils/readline') = Import.lazy(
+  '../../../utils/readline',
+  require,
+);
+
+export type STDOUT =
+  | ChildProcess['stdout']
+  | (NodeJS.WriteStream & {
+      fd: 1;
+    });
+export type STDERR =
+  | ChildProcess['stderr']
+  | (NodeJS.WriteStream & {
+      fd: 2;
+    });
+
+interface IAddStdoutConfig {
+  event?: { data?: boolean; error?: boolean };
+  colors?: {
+    data?: (s: string) => string;
+    error?: (s: string) => string;
+    warning?: (s: string) => string;
+  };
+}
+
+export class LoggerManager extends EventEmitter {
+  private _compilering: boolean;
+
+  private readonly _listeners: STDOUT[];
+
+  constructor() {
+    super();
+    this._compilering = false;
+    this._listeners = [];
+  }
+
+  createLoggerText(option: LoggerTextOption) {
+    return new logText.LoggerText(option);
+  }
+
+  addStdout(
+    loggerText: LoggerText,
+    stdout: STDOUT,
+    config: IAddStdoutConfig = {},
+  ) {
+    const {
+      event = { data: true, error: true },
+      colors = {
+        data: chalk.green,
+        error: chalk.red,
+        warning: chalk.yellow,
+      },
+    } = config;
+    if (event.data) {
+      stdout?.on('data', chunk => {
+        const data = chunk.toString();
+        const content = colors.data ? colors.data(data) : chalk.green(data);
+        loggerText.append(content);
+        this.emit('data');
+      });
+    }
+
+    if (event.error) {
+      stdout?.on('error', error => {
+        console.info('error');
+        const data = error.message;
+        const content = colors.error ? colors.error(data) : chalk.red(data);
+        loggerText.append(content);
+        loggerText.errorHappen();
+        this.emit('data');
+      });
+    }
+
+    this._listeners.push(stdout);
+  }
+
+  addStderr(
+    loggerText: LoggerText,
+    stderr: STDERR,
+    color: (s: string) => string = chalk.red,
+  ) {
+    stderr?.on('data', chunk => {
+      const data = chunk.toString();
+      loggerText.append(color(data));
+      loggerText.errorHappen();
+      this.emit('data');
+    });
+  }
+
+  showCompiling() {
+    if (!this._compilering) {
+      this._compilering = true;
+      console.info(chalk.green`Compiling in progress...`);
+    }
+  }
+
+  disappearCompiling() {
+    if (this._compilering) {
+      readline.ReadlineUtils.clearLine(process.stdout);
+      this._compilering = false;
+    }
+  }
+
+  listenDateAndShow(
+    logTexts: LoggerText[],
+    // stdout: NodeJS.WriteStream & {
+    //   fd: 1;
+    // } = process.stdout,
+  ) {
+    this.on('data', () => {
+      this.disappearCompiling();
+      const content = logTexts.map(logtext => logtext.value).join('');
+      // 每次更新，使用新的内容覆盖旧的内容，有几率出现内容错乱问题
+      console.info(content);
+    });
+    return () => {
+      // eslint-disable-next-line no-process-exit
+      process.exit(0);
+    };
+  }
+}

package/src/features/build/utils.ts

@@ -0,0 +1,250 @@
+/* eslint-disable max-classes-per-file */
+import * as path from 'path';
+import * as os from 'os';
+import { Import, chalk } from '@modern-js/utils';
+import type {
+  IBuildConfig,
+  IPackageModeValue,
+  JsSyntaxType,
+  ITaskMapper,
+  ModuleToolsConfig,
+} from '../../types';
+import type { LoggerText } from './logger';
+
+const constants: typeof import('./constants') = Import.lazy(
+  './constants',
+  require,
+);
+const core: typeof import('@modern-js/core') = Import.lazy(
+  '@modern-js/core',
+  require,
+);
+
+// 硬解字符串返回相应格式的对象
+const updateMapper = (
+  packageFieldValue: JsSyntaxType,
+  outDir: IPackageModeValue['outDir'],
+  mapper: IPackageModeValue[],
+): IPackageModeValue[] => {
+  if (packageFieldValue === 'CJS+ES6') {
+    return [...mapper, { type: 'commonjs', syntax: 'es6+', outDir }];
+  } else if (packageFieldValue === 'ESM+ES5') {
+    return [...mapper, { type: 'module', syntax: 'es5', outDir }];
+  } else if (packageFieldValue === 'ESM+ES6') {
+    return [...mapper, { type: 'module', syntax: 'es6+', outDir }];
+  } else {
+    return [...mapper];
+  }
+};
+
+export const getCodeInitMapper = (_: IBuildConfig) => {
+  const {
+    output: { packageFields, packageMode },
+  } = core.useResolvedConfigContext().value as ModuleToolsConfig;
+  let initMapper: IPackageModeValue[] = [];
+
+  // 如果不存在packageFields配置或者packageFields为空对象，则使用 packageMode
+  if (
+    !packageFields ||
+    (typeof packageFields === 'object' &&
+      Object.keys(packageFields).length === 0)
+  ) {
+    initMapper =
+      constants.PACKAGE_MODES[packageMode || constants.DEFAULT_PACKAGE_MODE];
+  } else if (packageFields && Object.keys(packageFields).length > 0) {
+    if (packageFields['modern']) {
+      initMapper = updateMapper(
+        packageFields['modern'],
+        'modern',
+        initMapper,
+      );
+    }
+
+    if (packageFields.main) {
+      initMapper = updateMapper(packageFields.main, 'node', initMapper);
+    }
+
+    if (packageFields.module) {
+      initMapper = updateMapper(
+        packageFields.module,
+        'treeshaking',
+        initMapper,
+      );
+    }
+
+    // TODO: 如果存在其他配置，需要提示
+    if (
+      !packageFields['modern'] &&
+      !packageFields.main &&
+      !packageFields.module
+    ) {
+      console.error(
+        chalk.red(
+          `Unrecognized ${JSON.stringify(
+            packageFields,
+          )} configuration, please use keys: 'modern, main, jupiter:modern' and use values: 'CJS+ES6, ESM+ES5, ESM+ES6'`,
+        ),
+      );
+
+      // eslint-disable-next-line no-process-exit
+      process.exit(1);
+    }
+  }
+
+  return initMapper;
+};
+
+// 获取执行构建源码的参数
+export const getCodeMapper = ({
+  logger,
+  taskPath,
+  config,
+  initMapper,
+  srcRootDir,
+  willCompilerDirOrFile,
+}: ITaskMapper & {
+  config: IBuildConfig;
+  initMapper: IPackageModeValue[];
+  srcRootDir: string;
+  willCompilerDirOrFile: string;
+}) => {
+  const {
+    value: { appDirectory },
+  } = core.useAppContext();
+  const modernConfig = core.useResolvedConfigContext().value;
+  const {
+    output: { enableSourceMap, jsPath = 'js', path: distDir = 'dist' },
+  } = modernConfig as ModuleToolsConfig;
+
+  const { tsconfigName = 'tsconfig.json' } = config;
+  const tsconfigPath = path.join(appDirectory, tsconfigName);
+
+  return initMapper.map(option => {
+    // 不是output.copy配置，而是内部的js copy逻辑
+    const copyDirs = option.copyDirs?.map(copyDir =>
+      path.join(appDirectory, `./${distDir}/${jsPath}/${copyDir}`),
+    );
+    return {
+      logger,
+      taskPath,
+      params: [
+        `--syntax=${option.syntax}`,
+        `--type=${option.type}`,
+        `--srcRootDir=${srcRootDir}`,
+        `--willCompilerDirOrFile=${willCompilerDirOrFile}`,
+        copyDirs ? `--copyDirs=${copyDirs.join(',')}` : '',
+        `--distDir=${path.join(
+          appDirectory,
+          `./${distDir}/${jsPath}/${option.outDir}`,
+        )}`,
+        `--appDirectory=${appDirectory}`,
+        enableSourceMap ? '--sourceMaps' : '',
+        `--tsconfigPath=${tsconfigPath}`,
+      ],
+    };
+  });
+};
+
+// 获取执行生成 d.ts 的参数
+export const getDtsMapper = (config: IBuildConfig, logger: LoggerText) => {
+  const {
+    value: { appDirectory },
+  } = core.useAppContext();
+  const modernConfig = core.useResolvedConfigContext().value;
+  const {
+    output: { disableTsChecker, path: outputPath = 'dist' },
+  } = modernConfig as ModuleToolsConfig;
+  const { tsconfigName = 'tsconfig.json', enableWatchMode, sourceDir } = config;
+  const srcDir = path.join(appDirectory, './src');
+  const tsconfigPath = path.join(appDirectory, tsconfigName);
+  return [
+    {
+      logger,
+      taskPath: require.resolve('../../tasks/generator-dts'),
+      params: [
+        `--srcDir=${srcDir}`,
+        `--distDir=${path.join(appDirectory, `./${outputPath}/types`)}`,
+        `--appDirectory=${appDirectory}`,
+        `--tsconfigPath=${tsconfigPath}`,
+        `--sourceDirName=${sourceDir}`,
+        enableWatchMode ? `--watch` : '',
+        disableTsChecker ? '' : `--tsCheck`,
+      ],
+    },
+  ];
+};
+
+/**
+ * 处理日志信息
+ */
+export class LogStack {
+  private _codeLogStack: string[];
+
+  constructor() {
+    this._codeLogStack = [];
+  }
+
+  update(latestLog: string, { splitEOL = false } = {}) {
+    if (splitEOL) {
+      latestLog.split(os.EOL).forEach(log => {
+        this._codeLogStack.unshift(log.trim());
+      });
+      return;
+    }
+
+    this._codeLogStack.unshift(latestLog.trim());
+  }
+
+  clear() {
+    this._codeLogStack = [];
+  }
+
+  get value() {
+    return [...new Set(this._codeLogStack)];
+  }
+}
+
+export const logTemplate = (
+  title: string,
+  messageStack: string[],
+  maxLength: number,
+  {
+    noBottomBorder = false,
+    bottomBorderText = '',
+    noLeftBorder = false,
+    leftBorder = '│',
+    contentColor = (s: string) => s,
+  } = {},
+) => {
+  const leftBorderFlag = noLeftBorder ? '' : leftBorder;
+  const messageFragments = messageStack
+    .map(p => {
+      p.trim();
+
+      return `${leftBorderFlag}${p.replace(constants.clearFlag, '')}`;
+    }) // 移除 clearFlag
+    .slice(0, maxLength) // 控制长度
+    .filter(s => s !== leftBorderFlag) // 过滤空字符串
+    .reverse(); // 调换顺序，最新的消息在最后面
+  const template = `${title}:
+${contentColor(messageFragments.join(os.EOL))}${
+    noBottomBorder ? '' : `\n${bottomBorderText}`
+  }`;
+  return template;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class
+export class TimeCounter {
+  static _now: number;
+
+  static time() {
+    this._now = Date.now();
+  }
+
+  static timeEnd() {
+    const span = Date.now() - this._now;
+    return span < 1000 ? `${span}ms` : `${(span / 1000).toFixed(2)}s`;
+  }
+}
+
+/* eslint-enable max-classes-per-file */

package/src/features/dev/index.ts

@@ -0,0 +1,62 @@
+import { Import } from '@modern-js/utils';
+import chalk from 'chalk';
+
+const core: typeof import('@modern-js/core') = Import.lazy(
+  '@modern-js/core',
+  require,
+);
+const inquirer: typeof import('inquirer') = Import.lazy('inquirer', require);
+const color: typeof import('../../utils/color') = Import.lazy(
+  '../../utils/color',
+  require,
+);
+
+export interface IDevConfig {
+  appDirectory: string;
+  isTsProject: boolean;
+}
+
+export type DevTaskType = 'storybook' | 'docsite' | 'unknow';
+
+export const showMenu = async (config: IDevConfig) => {
+  const metas = await (core.mountHook() as any).moduleToolsMenu(undefined);
+  if (metas.length <= 0) {
+    console.info(
+      chalk.yellow(
+        'No runnable development features found.\nYou can use the `new` command to enable the development features',
+      ),
+    );
+    // eslint-disable-next-line no-process-exit
+    process.exit(0);
+  }
+  const menuMessage = color.devMenuTitle('Select the debug mode:');
+  const { type } = await inquirer.prompt([
+    {
+      name: 'type',
+      message: menuMessage,
+      type: 'list',
+      choices: metas,
+    },
+  ]);
+
+  const devMeta = metas.find((meta: any) => meta.value === type);
+  if (devMeta) {
+    await devMeta.runTask(config);
+  }
+};
+
+export const devStorybook = async (config: IDevConfig) => {
+  const metas = await (core.mountHook() as any).moduleToolsMenu(undefined);
+  const findStorybook = metas.find((meta: any) => meta.value === 'storybook');
+  if (findStorybook) {
+    await findStorybook.runTask(config);
+  } else {
+    console.info(
+      chalk.yellow(
+        'You need to enable storybook functionality with the `new` script or `modern new` or install @modern-js/plugin-storybook',
+      ),
+    );
+    // eslint-disable-next-line no-process-exit
+    process.exit(0);
+  }
+};

package/src/index.ts

@@ -0,0 +1,55 @@
+import { Import } from '@modern-js/utils';
+
+const core: typeof import('@modern-js/core') = Import.lazy(
+  '@modern-js/core',
+  require,
+);
+// const { createPlugin, usePlugins, defineConfig } = core;
+const hooks: typeof import('@modern-js/module-tools-hooks') = Import.lazy(
+  '@modern-js/module-tools-hooks',
+  require,
+);
+const cli: typeof import('./cli') = Import.lazy('./cli', require);
+const local: typeof import('./locale') = Import.lazy('./locale', require);
+const schema: typeof import('./schema') = Import.lazy('./schema', require);
+const lang: typeof import('./utils/language') = Import.lazy(
+  './utils/language',
+  require,
+);
+
+export const { defineConfig } = core;
+
+core.usePlugins([
+  require.resolve('@modern-js/plugin-changeset/cli'),
+  require.resolve('@modern-js/plugin-analyze/cli'),
+]);
+
+export default core.createPlugin(
+  (() => {
+    const locale = lang.getLocaleLanguage();
+    local.i18n.changeLanguage({ locale });
+    hooks.lifecycle();
+
+    return {
+      validateSchema() {
+        return schema.addSchema();
+      },
+      config() {
+        return {
+          output: {
+            enableSourceMap: false,
+            jsPath: 'js',
+          },
+        };
+      },
+      commands({ program }: any) {
+        cli.devCli(program);
+        cli.buildCli(program);
+        cli.newCli(program, locale);
+        // 便于其他插件辨别
+        program.$$libraryName = 'module-tools';
+      },
+    };
+  }) as any,
+  { post: ['@modern-js/plugin-analyze', '@modern-js/plugin-changeset'] },
+);

package/src/locale/en.ts

@@ -0,0 +1,21 @@
+export const EN_LOCALE = {
+  command: {
+    build: {
+      describe: 'command for building module',
+      watch: 'building module in watch mode',
+      tsconfig: 'Specify a path to the tsconfig.json file',
+      style_only: 'only build style',
+      platform: 'building for other platforms',
+      no_tsc: 'close tsc compiler to emit d.ts',
+      no_clear: 'disable auto clear dist dir',
+    },
+    dev: { describe: 'start dev server' },
+    new: {
+      describe: 'generator runner for modern 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',
+    },
+  },
+};