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

package/src/tasks/generator-dts.ts

@@ -0,0 +1,277 @@
+import type { ChildProcess } from 'child_process';
+import * as path from 'path';
+import * as os from 'os';
+import { Import, fs } from '@modern-js/utils';
+import type { NormalizedConfig } from '@modern-js/core';
+import type { ITsconfig } from '@/types';
+
+const tsPathsTransform: typeof import('../utils/tspaths-transform') =
+  Import.lazy('../utils/tspaths-transform', require);
+const babel: typeof import('../utils/babel') = Import.lazy(
+  '../utils/babel',
+  require,
+);
+const constants: typeof import('./constants') = Import.lazy(
+  './constants',
+  require,
+);
+
+const core: typeof import('@modern-js/core') = Import.lazy(
+  '@modern-js/core',
+  require,
+);
+const pluginNode: typeof import('@modern-js/plugin/node') = Import.lazy(
+  '@modern-js/plugin/node',
+  require,
+);
+const execa: typeof import('execa') = Import.lazy('execa', require);
+const JSON5: typeof import('json5') = Import.lazy('json5', require);
+const argv: typeof import('process.argv').default = Import.lazy(
+  'process.argv',
+  require,
+);
+const deepMerge: typeof import('lodash.merge') = Import.lazy(
+  'lodash.merge',
+  require,
+);
+const glob: typeof import('glob') = Import.lazy('glob', require);
+
+let removeTsconfigPath = '';
+
+const generatorTsConfig = (
+  projectTsconfig: ITsconfig,
+  {
+    appDirectory,
+    distDir,
+    sourceDir = 'src',
+  }: { appDirectory: string; distDir: string; sourceDir?: string },
+) => {
+  const tempPath = path.resolve(appDirectory, './node_modules');
+  const resolvePath = path.relative(tempPath, appDirectory);
+  // const rootDir = projectTsconfig.compilerOptions?.rootDir
+  //   ? path.join(resolvePath, projectTsconfig.compilerOptions?.rootDir)
+  //   : resolvePath;
+  // 目前限制 rootDir 的路径为 sourceDir
+  const rootDir = path.join(resolvePath, sourceDir);
+  const baseUrl = projectTsconfig.compilerOptions?.baseUrl
+    ? path.join(appDirectory, projectTsconfig.compilerOptions?.baseUrl)
+    : appDirectory;
+  // if include = ['src'], final include should be ['../src']
+  const include = projectTsconfig.include?.map(includePath =>
+    path.join(resolvePath, includePath),
+  );
+  const exclude = projectTsconfig.exclude?.map(excludePath =>
+    path.join(resolvePath, excludePath),
+  );
+
+  const resetConfig: ITsconfig = {
+    compilerOptions: {
+      rootDir,
+      baseUrl,
+      // Ensure that .d.ts files are created by tsc, but not .js files
+      declaration: true,
+      emitDeclarationOnly: true,
+      outDir: distDir,
+    },
+    include,
+    exclude,
+  };
+
+  const recommendOption = {
+    // Ensure that Babel can safely transpile files in the TypeScript project
+    compilerOptions: {
+      isolatedModules: true,
+    },
+  };
+
+  const tempTsconfigPath = path.join(tempPath, constants.tempTsconfigName);
+  fs.ensureFileSync(tempTsconfigPath);
+  fs.writeJSONSync(
+    tempTsconfigPath,
+    deepMerge(
+      recommendOption,
+      projectTsconfig,
+      // 此处是必须要覆盖用户默认配置
+      resetConfig,
+    ),
+  );
+  return tempTsconfigPath;
+};
+
+const getProjectTsconfig = (tsconfigPath: string | undefined): ITsconfig => {
+  if (!tsconfigPath || !fs.existsSync(tsconfigPath)) {
+    return {};
+  }
+
+  return JSON5.parse(fs.readFileSync(tsconfigPath, 'utf-8'));
+};
+
+const resolveLog = (
+  childProgress: ChildProcess,
+  { tsCheck = false, watch = false } = {},
+) => {
+  /**
+   * tsc 所有的log信息都是从stdout data 事件中获取
+   * 正常模式下，如果有报错信息，交给 resolveLog 后面的逻辑来处理
+   * watch 模式下，则使用这里的信息
+   */
+  childProgress.stdout?.on('data', data => {
+    if (!tsCheck) {
+      return;
+    }
+    if (watch) {
+      console.info(data.toString());
+    }
+  });
+  // 正常以下内容都不会触发，因为tsc 不会产生以下类型的log信息，不过防止意外情况
+  childProgress.stdout?.on('error', error => {
+    console.error(error.message);
+  });
+  childProgress.stderr?.on('data', chunk => {
+    console.error(chunk.toString());
+  });
+};
+
+interface IGeneratorConfig {
+  sourceDirName?: string;
+  srcDir: string;
+  distDir: string;
+  projectData: {
+    appDirectory: string;
+  };
+  tsconfigPath?: string;
+  tsCheck?: boolean;
+  watch?: boolean;
+}
+
+const generatorDts = async (_: NormalizedConfig, config: IGeneratorConfig) => {
+  const {
+    tsconfigPath,
+    distDir,
+    sourceDirName = 'src',
+    projectData: { appDirectory },
+    tsCheck = false,
+    watch = false,
+  } = config;
+
+  const userTsconfig = getProjectTsconfig(tsconfigPath);
+  const willDeleteTsconfigPath = generatorTsConfig(userTsconfig, {
+    appDirectory,
+    distDir,
+    sourceDir: sourceDirName,
+  });
+  removeTsconfigPath = willDeleteTsconfigPath;
+  const tscBinFile = path.join(appDirectory, './node_modules/.bin/tsc');
+  const watchParams = watch ? ['-w'] : [];
+  const childProgress = execa(
+    tscBinFile,
+    ['-p', willDeleteTsconfigPath, ...watchParams],
+    {
+      stdio: 'pipe',
+      cwd: appDirectory,
+    },
+  );
+  resolveLog(childProgress, { tsCheck, watch });
+  try {
+    await childProgress;
+    console.info('[Tsc Compiler]: Successfully');
+  } catch (e) {
+    if (!tsCheck) {
+      console.warn(
+        `There are some type issues, which can be checked by configuring 'source.enableTsChecker = true' ${os.EOL} in modern.config.js`,
+      );
+    } else {
+      const isRecord = (input: any): input is Record<string, any> =>
+        typeof input === 'object';
+      // 通过使用 execa，可以将tsc 的 data 类型的报错信息变为异常错误信息
+      if (isRecord(e)) {
+        console.error(e.stdout);
+      }
+    }
+  }
+  fs.removeSync(willDeleteTsconfigPath);
+};
+
+const resolveAlias = (
+  modernConfig: NormalizedConfig,
+  config: IGeneratorConfig,
+  watchFilenames: string[] = [],
+) => {
+  const { output } = modernConfig;
+  const defaultPaths = { '@': ['./src'] };
+  const dtsDistPath = `${config.distDir}/**/*.d.ts`;
+  const dtsFilenames =
+    watchFilenames.length > 0
+      ? watchFilenames
+      : glob.sync(dtsDistPath, { absolute: true });
+  const alias = babel.getFinalAlias(modernConfig, {
+    appDirectory: config.projectData.appDirectory,
+    tsconfigPath:
+      config.tsconfigPath ||
+      path.join(config.projectData.appDirectory, './tsconfig.json'),
+    sourceAbsDir: config.distDir,
+  });
+  const mergedPaths = alias.isTsPath
+    ? alias.paths || {}
+    : { ...defaultPaths, ...(alias.paths || {}) };
+  const result = tsPathsTransform.transformDtsAlias({
+    filenames: dtsFilenames,
+    baseUrl: path.join(config.projectData.appDirectory, output.path || 'dist'),
+    paths: mergedPaths,
+  });
+  for (const r of result) {
+    fs.writeFileSync(r.path, r.content);
+  }
+};
+
+interface ITaskConfig {
+  srcDir: string;
+  sourceDirName: string;
+  distDir: string;
+  appDirectory: string;
+  tsconfigPath?: string;
+  tsCheck?: boolean;
+  watch?: boolean;
+  debug?: boolean;
+}
+
+const taskMain = async ({
+  modernConfig,
+}: {
+  modernConfig: NormalizedConfig;
+}) => {
+  const processArgv = argv(process.argv.slice(2));
+  const config = processArgv<ITaskConfig>({
+    appDirectory: process.cwd(),
+    srcDir: 'src',
+    distDir: 'dist/types',
+    tsconfigPath: './tsconfig.json',
+    sourceDirName: 'src',
+  });
+
+  const option = {
+    srcDir: config.srcDir,
+    distDir: config.distDir,
+    projectData: { appDirectory: config.appDirectory },
+    tsconfigPath: config.tsconfigPath,
+    watch: config.watch,
+    tsCheck: config.tsCheck,
+    sourceDirName: config.sourceDirName,
+  };
+  await generatorDts(modernConfig, option);
+  // TODO: watch 模式下无法转换
+  resolveAlias(modernConfig, option);
+};
+
+(async () => {
+  pluginNode.enable();
+  const { resolved } = await core.cli.init();
+  await core.manager.run(async () => {
+    try {
+      await taskMain({ modernConfig: resolved });
+    } catch (e: any) {
+      console.error(e.message);
+      fs.removeSync(removeTsconfigPath);
+    }
+  });
+})();

package/src/type.d.ts

@@ -0,0 +1 @@
+/// <reference types="@modern-js/module-tools-hooks" />

package/src/types.ts

@@ -0,0 +1,63 @@
+import type { OutputConfig, SourceConfig } from '@modern-js/core/config';
+import type { ImportStyleType } from '@modern-js/babel-preset-module';
+import type { NormalizedConfig } from '@modern-js/core';
+import type { LoggerText } from './features/build/logger/logText';
+import type { Platform } from './features/build/build-platform';
+
+export type { Platform } from './features/build/build-platform';
+export type { ITsconfig } from './utils/tsconfig';
+
+export interface ITaskMapper {
+  logger: LoggerText | null;
+  taskPath: string;
+  params?: string[];
+}
+
+export type PackageModeType =
+  | 'universal-js'
+  | 'universal-js-lite'
+  | 'browser-js'
+  | 'browser-js-lite'
+  | 'node-js';
+
+export type JsSyntaxType = 'CJS+ES6' | 'ESM+ES5' | 'ESM+ES6';
+
+export interface IPackageFields {
+  main?: JsSyntaxType;
+  modern?: JsSyntaxType;
+  module?: JsSyntaxType;
+}
+
+export interface IBuildConfig {
+  platform: boolean | Exclude<Platform, 'all'>;
+  enableTscCompiler: boolean;
+  enableWatchMode?: boolean;
+  isTsProject: boolean;
+  sourceDir: string;
+  tsconfigName?: string;
+}
+
+export interface IPackageModeValue {
+  type: 'module' | 'commonjs';
+  syntax: 'es5' | 'es6+';
+  outDir: 'node' | 'treeshaking' | 'modern';
+  copyDirs?: ('node' | 'treeshaking' | 'modern')[];
+}
+
+export interface ModuleToolsOutput extends OutputConfig {
+  assetsPath: string;
+  disableTsChecker: boolean;
+  enableSourceMap: boolean;
+  packageMode: PackageModeType;
+  packageFields: IPackageFields;
+  importStyle: ImportStyleType;
+}
+
+export interface ModuleToolsSource extends SourceConfig {
+  jsxTransformRuntime: 'automatic' | 'classic';
+}
+
+export type ModuleToolsConfig = NormalizedConfig & {
+  output: OutputConfig & ModuleToolsOutput;
+  source: NormalizedConfig['source'] & ModuleToolsSource;
+};

package/src/utils/babel.ts

@@ -0,0 +1,100 @@
+import {
+  getBabelConfig,
+  getModuleBabelChain,
+} from '@modern-js/babel-preset-module';
+import { TransformOptions } from '@babel/core';
+import { applyOptionsChain, getAlias } from '@modern-js/utils';
+import { NormalizedConfig } from '@modern-js/core';
+import type { BabelChain } from '@modern-js/babel-chain';
+import { IPackageModeValue, ModuleToolsConfig } from '../types';
+
+export const getFinalAlias: any = (
+  modernConfig: NormalizedConfig,
+  option: { appDirectory: string; tsconfigPath: string; sourceAbsDir: string },
+) => {
+  const aliasConfig = getAlias(modernConfig.source.alias, option);
+  // 排除内部别名，因为不需要处理
+  const finalPaths: Record<string, string | string[]> = {};
+  const internalAliasPrefix = '@modern-js/runtime';
+  if (aliasConfig.paths && typeof aliasConfig.paths === 'object') {
+    const pathsKey = Object.keys(aliasConfig.paths);
+    for (const key of pathsKey) {
+      if (!key.includes(internalAliasPrefix)) {
+        finalPaths[key] = aliasConfig.paths[key];
+      }
+    }
+  }
+
+  aliasConfig.paths = finalPaths;
+  return aliasConfig;
+};
+
+export const resolveBabelConfig = (
+  appDirectory: string,
+  modernConfig: NormalizedConfig,
+  option: Pick<IPackageModeValue, 'syntax' | 'type'> & {
+    sourceAbsDir: string;
+    tsconfigPath: string;
+  },
+) => {
+  const {
+    source: { envVars, globalVars, jsxTransformRuntime = 'automatic' },
+    output: { importStyle },
+    tools: { lodash: userLodashOption },
+  } = modernConfig as ModuleToolsConfig;
+
+  // alias config
+  const aliasConfig = getFinalAlias(modernConfig, {
+    appDirectory,
+    ...option,
+  });
+
+  // lodash config
+  const lodashOptions = applyOptionsChain(
+    { id: ['lodash', 'ramda'] },
+    // TODO: 需要处理类型问题
+    userLodashOption as any,
+  );
+  // babel config
+  const internalBabelConfig = getBabelConfig(
+    {
+      appDirectory,
+      enableReactPreset: true,
+      enableTypescriptPreset: true,
+      alias: aliasConfig,
+      envVars,
+      globalVars,
+      lodashOptions,
+      jsxTransformRuntime,
+      importStyle,
+    },
+    {
+      type: option.type,
+      syntax: option.syntax,
+    },
+  );
+  const babelChain = getModuleBabelChain(
+    {
+      appDirectory,
+      enableReactPreset: true,
+      enableTypescriptPreset: true,
+      alias: aliasConfig,
+      envVars,
+      globalVars,
+      lodashOptions,
+      jsxTransformRuntime,
+      importStyle,
+    },
+    {
+      type: option.type,
+      syntax: option.syntax,
+    },
+  );
+  const userBabelConfig = modernConfig.tools.babel;
+  return applyOptionsChain<TransformOptions, { chain: BabelChain }>(
+    internalBabelConfig,
+    // TODO: 感觉 userBabelConfig 的类型应该是TransformOptions
+    userBabelConfig as any,
+    { chain: babelChain },
+  );
+};

package/src/utils/color.ts

@@ -0,0 +1,3 @@
+import { chalk } from '@modern-js/utils';
+
+export const devMenuTitle = chalk.rgb(255, 153, 0);

package/src/utils/copy.ts

@@ -0,0 +1,70 @@
+import * as path from 'path';
+import { fs, Import } from '@modern-js/utils';
+import type { NormalizedConfig, IAppContext } from '@modern-js/core';
+
+const globby: typeof import('globby') = Import.lazy('globby', require);
+const fastGlob: typeof import('fast-glob') = Import.lazy('fast-glob', require);
+const normalizePath: typeof import('normalize-path') = Import.lazy(
+  'normalize-path',
+  require,
+);
+
+// eslint-disable-next-line max-statements
+export const copyTask = async (option: {
+  modernConfig: NormalizedConfig;
+  appContext: IAppContext;
+}) => {
+  const { modernConfig, appContext } = option;
+  const { appDirectory } = appContext;
+  const {
+    output: { copy, path: outputPath = 'dist' },
+  } = modernConfig;
+
+  if (!copy) {
+    return;
+  }
+  try {
+    // 类型暂时这样处理，待之后优化copy的逻辑
+    for (const copyOption of copy as any) {
+      // 在原来的基础上，引入了类似于 copy-webpck-plugin 的 context 属性，可以设置项目根路径
+      const {
+        context = appDirectory,
+        from,
+        globOptions,
+        to: toOrigin,
+      } = copyOption;
+      let fromOrigin = from;
+      // 获取 glob 规则
+      let glob = '';
+      let options = {};
+      if (fromOrigin !== null && typeof fromOrigin === 'object') {
+        ({ glob, ...options } = fromOrigin);
+        fromOrigin = glob;
+      } else if (globOptions && typeof globOptions === 'object') {
+        options = globOptions;
+      }
+      glob = path.isAbsolute(fromOrigin)
+        ? fromOrigin
+        : path.posix.join(
+            fastGlob.escapePath(normalizePath(path.resolve(context))),
+            fromOrigin,
+          );
+      // 计算 glob，获取目标文件
+      const paths = await globby(glob, options);
+      if (!paths.length) {
+        return;
+      }
+      const to = path.normalize(toOrigin ? toOrigin : '');
+      const isToDirectory = path.extname(to) === '';
+      paths.forEach(item => {
+        const relativeFrom = path.relative(context, item);
+        // 如果 to 是目录，通过相对路径计算完整的产物路径；如果 to 是文件，直接作为最终产物路径
+        const fileName = isToDirectory ? path.join(to, relativeFrom) : to;
+        const finalToPath = path.resolve(outputPath, fileName);
+        fs.copySync(item, finalToPath);
+      });
+    }
+  } catch (e: any) {
+    console.error(`copy error: ${e.message}`);
+  }
+};

package/src/utils/json.ts

@@ -0,0 +1,13 @@
+export const safeParse = (jsonString: string) => {
+  try {
+    return {
+      code: 0,
+      value: JSON.parse(jsonString),
+    };
+  } catch (e) {
+    return {
+      code: 1,
+      value: jsonString,
+    };
+  }
+};

package/src/utils/language.ts

@@ -0,0 +1,9 @@
+import { Import } from '@modern-js/utils';
+
+const i18n: typeof import('@modern-js/i18n-cli-language-detector') =
+  Import.lazy('@modern-js/i18n-cli-language-detector', require);
+
+export function getLocaleLanguage() {
+  const detector = new i18n.I18CLILanguageDetector();
+  return detector.detect();
+}

package/src/utils/logger.ts

@@ -0,0 +1,144 @@
+/* eslint-disable max-classes-per-file */
+import type { ChildProcess } from 'child_process';
+import EventEmitter from 'events';
+import { Import } from '@modern-js/utils';
+
+const chalk: typeof import('chalk') = Import.lazy('chalk', require);
+
+export const clearFlag = '\x1Bc';
+
+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(clearFlag, '')}`;
+    }) // 移除 clearFlag
+    .filter(s => s !== leftBorderFlag) // 过滤空字符串
+    .slice(0, maxLength) // 控制长度
+    .reverse(); // 调换顺序，最新的消息在最后面
+  messageFragments[messageFragments.length - 1] =
+    messageFragments[messageFragments.length - 1].trim();
+  const template = `${title}:
+${contentColor(messageFragments.join(''))}${
+    noBottomBorder ? '' : `\n${bottomBorderText}`
+  }`;
+  console.info('template', messageFragments);
+  return template;
+};
+
+export type STDOUT = ChildProcess['stdout'] | NodeJS.ReadStream;
+export type STDERR = ChildProcess['stdout'] | NodeJS.ReadStream;
+
+export interface LoggerTextOption {
+  title: string;
+  maxLength: number;
+  contentConfig?: {
+    noBottomBorder?: boolean;
+    bottomBorderText?: string;
+    noLeftBorder?: boolean;
+    leftBorder?: string;
+    contentColor?: (s: string) => string;
+    replace?: string[];
+  };
+}
+
+export class LoggerText {
+  messages: string[];
+
+  option: LoggerTextOption;
+
+  constructor(option: LoggerTextOption) {
+    this.messages = [];
+    this.option = option;
+  }
+
+  append(message: string) {
+    const replace = this.option.contentConfig?.replace || [];
+    let content = message;
+    for (const r of replace) {
+      content = content.replace(new RegExp(r, 'g'), '');
+    }
+    this.messages.push(content);
+  }
+
+  get value() {
+    const { title, maxLength, contentConfig } = this.option;
+    const messages = [...new Set(this.messages)];
+    return logTemplate(title, messages, maxLength, contentConfig);
+  }
+}
+
+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 {
+  // constructor() {}
+
+  createLoggerText(option: LoggerTextOption) {
+    return new 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 => {
+        const data = error.message;
+        const content = colors.error ? colors.error(data) : chalk.red(data);
+        loggerText.append(content);
+        this.emit('data');
+      });
+    }
+  }
+
+  addStderr(loggerText: LoggerText, stderr: STDERR) {
+    stderr?.on('data', chunk => {
+      const data = chunk.toString();
+      loggerText.append(data);
+    });
+  }
+
+  show(loggerText: LoggerText) {
+    console.info(loggerText.value);
+  }
+}
+
+/* eslint-enable max-classes-per-file */