feat(cli): 新增tamgic-cli,用于runtime 依赖生成

.gitignore

@@ -2,6 +2,9 @@
 node_modules
 dist
 
+.temp
+.cache
+
 # local env files
 .env.local
 .env.*.local

packages/cli/.gitignore

@@ -0,0 +1,24 @@
+.DS_Store
+node_modules
+lib
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+coverage

packages/cli/bin/tmagic.js

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+
+const { cli } = require('../lib');
+
+cli({
+  source: process.cwd(),
+  packages: {},
+  componentFileAffix: '',
+  cleanTemp: true,
+});

packages/cli/package.json

@@ -0,0 +1,37 @@
+{
+  "version": "1.1.0-beta.5",
+  "name": "@tmagic/cli",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "tsc -b tsconfig.build.json",
+    "clean": "rimraf lib *.tsbuildinfo"
+  },
+  "bin": {
+    "tmagic": "bin/tmagic.js"
+  },
+  "files": [
+    "bin",
+    "lib"
+  ],
+  "engines": {
+    "node": ">=14"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "dependencies": {
+    "@vuepress/cli": "^2.0.0-beta.49",
+    "cac": "^6.7.12",
+    "chalk": "^4.1.0",
+    "chokidar": "^3.5.3",
+    "fs-extra": "^10.1.0",
+    "recast": "^0.21.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^9.0.13"
+  }
+}

packages/cli/src/Core.ts

@@ -0,0 +1,40 @@
+import path from 'path';
+
+import fs from 'fs-extra';
+
+import { UserConfig } from './types';
+import { prepareEntryFile, resolveAppPackages } from './utils';
+
+export default class Core {
+  public version = require('../package.json').version;
+
+  public options: UserConfig;
+
+  public moduleMainFilePath = {
+    componentMap: {},
+    pluginMap: {},
+    configMap: {},
+    valueMap: {},
+    eventMap: {},
+  };
+
+  public dir = {
+    temp: () => path.resolve(this.options.source, 'src/.tmagic'),
+  };
+
+  constructor(options: UserConfig) {
+    this.options = options;
+  }
+
+  public async writeTemp(file: string, content: string) {
+    await fs.outputFile(path.resolve(this.dir.temp(), file), content);
+  }
+
+  public async init() {
+    this.moduleMainFilePath = resolveAppPackages(this);
+  }
+
+  public async prepare() {
+    await prepareEntryFile(this);
+  }
+}

packages/cli/src/cli.ts

@@ -0,0 +1,44 @@
+import { allowTs, info } from '@vuepress/cli';
+import { cac } from 'cac';
+import chalk from 'chalk';
+
+import { scripts } from './commands';
+import { UserConfig } from './types';
+
+/**
+ * Wrap raw command to catch errors and exit process
+ */
+const wrapCommand = (cmd: (...args: any[]) => Promise<void>): typeof cmd => {
+  const wrappedCommand: typeof cmd = (...args) =>
+    cmd(...args).catch((err) => {
+      console.error(chalk.red(err.stack));
+      process.exit(1);
+    });
+  return wrappedCommand;
+};
+
+/**
+ * Vuepress cli
+ */
+export const cli = (defaultAppConfig: UserConfig): void => {
+  // allow ts files globally
+  allowTs();
+
+  // create cac instance
+  const program = cac('tmagic');
+
+  // display core version and cli version
+  const versionCli = require('../package.json').version;
+  program.version(`tmagic/cli@${versionCli}`);
+
+  // display help message
+  program.help();
+
+  // register `dev` command
+  program.command('entry', 'Start development server').action(wrapCommand(scripts(defaultAppConfig)));
+
+  // register `info` command
+  program.command('info', 'Display environment information').action(wrapCommand(info));
+
+  program.parse(process.argv);
+};

packages/cli/src/commands/index.ts

@@ -0,0 +1,48 @@
+import path from 'path';
+
+import { loadUserConfig } from '@vuepress/cli';
+import fs from 'fs-extra';
+
+import App from '../Core';
+import { UserConfig } from '../types';
+
+export const scripts = (defaultAppConfig: UserConfig) => {
+  const entry = async (): Promise<void> => {
+    if (process.env.NODE_ENV === undefined) {
+      process.env.NODE_ENV = 'development';
+    }
+
+    // resolve user config file
+    const userConfigPath = [
+      path.resolve(process.cwd(), 'tmagic.config.ts'),
+      path.resolve(process.cwd(), 'tmagic.config.js'),
+      path.resolve(process.cwd(), 'tmagic.config.cjs'),
+    ].find((item) => fs.pathExistsSync(item));
+
+    const userConfig = await loadUserConfig(userConfigPath);
+
+    // resolve the final app config to use
+    const appConfig = {
+      ...defaultAppConfig,
+      ...userConfig,
+    };
+
+    if (appConfig === null) {
+      return;
+    }
+
+    // create vuepress app
+    const app = new App(appConfig);
+
+    // clean temp and cache
+    if (appConfig.cleanTemp === true) {
+      await fs.remove(app.dir.temp());
+    }
+
+    // initialize and prepare
+    await app.init();
+    await app.prepare();
+  };
+
+  return entry;
+};

packages/cli/src/index.ts

@@ -0,0 +1,3 @@
+export * from './cli';
+export * from './utils';
+export * from './types';

packages/cli/src/types.ts

@@ -0,0 +1,40 @@
+export enum EntryType {
+  CONFIG = 'config',
+  VALUE = 'value',
+  COMPONENT = 'component',
+  EVENT = 'event',
+  PLUGIN = 'plugin',
+}
+
+export enum PackageType {
+  COMPONENT = '1',
+  PLUGIN = '2',
+  COMPONENT_PACKAGE = '3',
+}
+
+export interface Entry {
+  [EntryType.CONFIG]?: string;
+  [EntryType.VALUE]?: string;
+  [EntryType.COMPONENT]?: string;
+  [EntryType.EVENT]?: string;
+}
+
+export interface OptionEntry {
+  type: string;
+  entry: Entry;
+}
+
+export interface EntryFile {
+  entries: OptionEntry[];
+  entryFile: string;
+  type: EntryType;
+  componentFileAffix: string;
+}
+
+export interface UserConfig {
+  source: string;
+  scripts: Record<string, string>;
+  packages: Record<string, any>;
+  componentFileAffix: string;
+  cleanTemp: boolean;
+}

packages/cli/src/utils/defineUserConfig.ts

@@ -0,0 +1,3 @@
+import { UserConfig } from '../types';
+
+export const defineConfig = (config: Partial<UserConfig>): Partial<UserConfig> => config;

packages/cli/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './defineUserConfig';
+export * from './prepareEntryFile';
+export * from './resolveAppPackages';

packages/cli/src/utils/prepareEntryFile.ts

@@ -0,0 +1,53 @@
+import * as recast from 'recast';
+
+import type App from '../Core';
+import { EntryType } from '../types';
+
+export const prepareEntryFile = (app: App) => {
+  const { componentMap = {}, pluginMap = {}, configMap = {}, valueMap = {}, eventMap = {} } = app.moduleMainFilePath;
+  const { componentFileAffix } = app.options;
+
+  app.writeTemp('comp-entry.ts', generateContent(EntryType.COMPONENT, componentMap, componentFileAffix));
+  app.writeTemp('plugin-entry.ts', generateContent(EntryType.PLUGIN, pluginMap));
+  app.writeTemp('config-entry.ts', generateContent(EntryType.CONFIG, configMap));
+  app.writeTemp('value-entry.ts', generateContent(EntryType.VALUE, valueMap));
+  app.writeTemp('event-entry.ts', generateContent(EntryType.EVENT, eventMap));
+};
+
+const generateContent = (type: EntryType, map: Record<string, string>, componentFileAffix = '') => {
+  const list: string[] = [];
+  const importDeclarations: string[] = [];
+
+  Object.entries(map).forEach(([key, packagePath]) => {
+    const name = makeCamelCase(key);
+    importDeclarations.push(
+      `import ${name} from '${packagePath}${packagePath.endsWith(componentFileAffix) ? '' : componentFileAffix}'`,
+    );
+    list.push(`'${key}': ${name}`);
+  });
+
+  const exportToken = `${type}s`;
+  const capitalToken = exportToken.charAt(0).toUpperCase() + exportToken.slice(1);
+
+  return prettyCode(`${importDeclarations.join(';')}
+    const ${exportToken}: Record<string, any> = {
+      ${list.join(',')}
+    }
+    window.magicPreset${capitalToken} = ${exportToken};
+    export default ${exportToken};
+  `);
+};
+
+const prettyCode = (code: string) =>
+  recast.prettyPrint(recast.parse(code.replace(/\\/g, '/'), { parser: require('recast/parsers/typescript') }), {
+    tabWidth: 2,
+    trailingComma: true,
+    quote: 'single',
+  }).code;
+
+const makeCamelCase = function (name: string): string {
+  if (typeof name !== 'string') {
+    return '';
+  }
+  return name.replace(/-(\w)/g, ($0, $1) => $1.toUpperCase());
+};

packages/cli/src/utils/resolveAppPackages.ts

@@ -0,0 +1,364 @@
+import { execSync } from 'child_process';
+import path from 'path';
+import { exit } from 'process';
+
+import fs from 'fs-extra';
+import * as recast from 'recast';
+
+import type App from '../Core';
+import { Entry, EntryType, PackageType } from '../types';
+
+interface TypeAssertion {
+  type: string;
+  imports: any[];
+}
+
+interface ParseEntryOption {
+  ast: any;
+  package: string;
+  indexPath: string;
+}
+
+export const resolveAppPackages = (app: App) => {
+  const componentMap: Record<string, string> = {};
+  const configMap: Record<string, string> = {};
+  const eventMap: Record<string, string> = {};
+  const valueMap: Record<string, string> = {};
+  const pluginMap: Record<string, string> = {};
+
+  Object.entries(app.options.packages).forEach(([key, packagePath]) => {
+    installPackage(packagePath, app.options.source);
+
+    const indexPath = require.resolve(packagePath);
+    const indexCode = fs.readFileSync(indexPath, { encoding: 'utf-8', flag: 'r' });
+    const ast = recast.parse(indexCode, { parser: require('recast/parsers/typescript') });
+    const result = typeAssertion({ ast, indexPath });
+
+    const setItem = (key: string, entry: Entry) => {
+      if (entry.component) componentMap[key] = entry.component;
+      if (entry.config) configMap[key] = entry.config;
+      if (entry.event) eventMap[key] = entry.event;
+      if (entry.value) valueMap[key] = entry.value;
+    };
+
+    if (result.type === PackageType.COMPONENT) {
+      // 组件
+      setItem(key, parseEntry({ ast, package: packagePath, indexPath }));
+    } else if (result.type === PackageType.PLUGIN) {
+      // 插件
+      pluginMap[key] = packagePath;
+    } else if (result.type === PackageType.COMPONENT_PACKAGE) {
+      // 组件&插件包
+      result.imports.forEach((i) => {
+        const affixReg = new RegExp(`${app.options.componentFileAffix}$`);
+        if (affixReg.test(i.indexPath)) {
+          componentMap[i.type] = i.indexPath;
+          return;
+        }
+        const indexCode = fs.readFileSync(i.indexPath, { encoding: 'utf-8', flag: 'r' });
+        const ast = recast.parse(indexCode);
+        if (typeAssertion({ ast, indexPath }).type === PackageType.PLUGIN) {
+          // 插件
+          pluginMap[i.type] = i.indexPath;
+        } else {
+          // 组件
+          setItem(i.type, parseEntry({ ast, package: `${module} | ${i.name}`, indexPath: i.indexPath }));
+        }
+      });
+    }
+  });
+
+  return {
+    componentMap,
+    configMap,
+    eventMap,
+    valueMap,
+    pluginMap,
+  };
+};
+
+const installPackage = function (module: string, cwd: string) {
+  try {
+    // window下需要将路径中\转换成/
+    execSync(`node -e "require.resolve('${module.replace(/\\/g, '/')}')"`, { stdio: 'ignore' });
+  } catch (e) {
+    execSync(`npm install ${module}`, {
+      stdio: 'inherit',
+      cwd,
+    });
+  }
+};
+
+/**
+ *  1 判断是否组件&插件包
+ *  2 判断是组件还是插件
+ *  3 组件插件分开写入 comp-entry.ts
+ * @param {*} ast
+ * @param {String} indexPath
+ * @return {Object} { type: '', imports: [] } 返回传入组件的类型。如果是组件包，imports 中包含所有子组件的入口文件路径
+ */
+const typeAssertion = function ({ ast, indexPath }: { ast: any; indexPath: string }): TypeAssertion {
+  const n = recast.types.namedTypes;
+
+  const result = {
+    type: '',
+    imports: [],
+  };
+
+  const { importDeclarations, variableDeclarations, exportDefaultName, exportDefaultNode } =
+    getAssertionTokenByTraverse(ast);
+
+  if (exportDefaultName) {
+    importDeclarations.every((node) => {
+      const [specifier] = node.specifiers;
+
+      // 从 import 语句中找到 export default 的变量，认为是组件
+      if (n.ImportDefaultSpecifier.check(specifier) && specifier.local?.name === exportDefaultName) {
+        result.type = PackageType.COMPONENT;
+        return false;
+      }
+
+      return true;
+    });
+
+    if (result.type) return result;
+
+    variableDeclarations.every((node) => {
+      const [variable] = node.declarations;
+
+      // 从声明变量语句中找到 export default 的变量，认为是组件包
+      if (
+        n.Identifier.check(variable.id) &&
+        variable.id.name === exportDefaultName &&
+        n.ObjectExpression.check(variable.init)
+      ) {
+        if (isPlugin(variable.init.properties)) {
+          result.type = PackageType.PLUGIN;
+          return false;
+        }
+
+        // 从组件包声明中找到对应子组件入口文件
+        getComponentPackageImports({ result, properties: variable.init.properties, indexPath, importDeclarations });
+      }
+
+      return true;
+    });
+  }
+
+  if (exportDefaultNode) {
+    if (isPlugin((exportDefaultNode as any).properties)) {
+      result.type = PackageType.PLUGIN;
+    } else {
+      getComponentPackageImports({
+        result,
+        properties: (exportDefaultNode as any).properties,
+        indexPath,
+        importDeclarations,
+      });
+    }
+  }
+
+  return result;
+};
+
+const getAssertionTokenByTraverse = (ast: any) => {
+  const importDeclarations: any[] = [];
+  const variableDeclarations: any[] = [];
+  const n = recast.types.namedTypes;
+
+  let exportDefaultName = '';
+  let exportDefaultNode = undefined;
+
+  recast.types.visit(ast, {
+    visitImportDeclaration(p) {
+      importDeclarations.push(p.node);
+      this.traverse(p);
+    },
+    visitVariableDeclaration(p) {
+      variableDeclarations.push(p.node);
+      this.traverse(p);
+    },
+    visitExportDefaultDeclaration(p) {
+      const { node } = p;
+      const { declaration } = node;
+
+      // 导出的是变量名
+      if (n.Identifier.check(declaration)) {
+        exportDefaultName = declaration.name;
+      }
+
+      // 导出的是对象的字面量
+      if (n.ObjectExpression.check(declaration)) {
+        exportDefaultNode = declaration;
+      }
+
+      this.traverse(p);
+    },
+  });
+
+  return {
+    importDeclarations,
+    variableDeclarations,
+    exportDefaultName,
+    exportDefaultNode,
+  };
+};
+
+const isPlugin = function (properties: any[]) {
+  const [match] = properties.filter((property) => property.key.name === 'install');
+
+  return !!match;
+};
+
+const getComponentPackageImports = function ({
+  result,
+  properties,
+  indexPath,
+  importDeclarations,
+}: {
+  result: TypeAssertion;
+  properties: any[];
+  indexPath: string;
+  importDeclarations: any[];
+}) {
+  const n = recast.types.namedTypes;
+
+  result.type = PackageType.COMPONENT_PACKAGE;
+  result.imports = [];
+
+  properties.forEach((property) => {
+    const [propertyMatch] = importDeclarations.filter((i) => {
+      const [specifier] = i.specifiers;
+
+      if (n.ImportDefaultSpecifier.check(specifier) && specifier.local?.name === property.value.name) {
+        return true;
+      }
+
+      return false;
+    });
+
+    if (propertyMatch) {
+      result.imports.push({
+        type: property.key.name,
+        name: propertyMatch.specifiers[0].local.name,
+        indexPath: getIndexPath(path.resolve(path.dirname(indexPath), propertyMatch.source.value)),
+      });
+    }
+  });
+
+  return result;
+};
+
+const getIndexPath = function (entry: string) {
+  if (fs.lstatSync(entry).isFile()) {
+    return entry;
+  }
+
+  if (fs.lstatSync(entry).isDirectory()) {
+    const files = fs.readdirSync(entry);
+    const [index] = files.filter((file) => file.split('.')[0] === 'index');
+
+    return path.resolve(entry, index);
+  }
+
+  return entry;
+};
+
+const parseEntry = function ({ ast, package: module, indexPath }: ParseEntryOption) {
+  if (!ast.program) {
+    console.log(`${module} 入口文件不合法`);
+    return exit(1);
+  }
+
+  const tokens = getASTTokenByTraverse({ ast, indexPath });
+  let { config, value, event } = tokens;
+  const { importComponentSource, importComponentToken, exportDefaultToken } = tokens;
+
+  if (!config) {
+    console.log(`${module} ${EntryType.CONFIG} 文件声明不合法`);
+    return exit(1);
+  }
+  if (!value) {
+    console.log(`${module} ${EntryType.VALUE} 文件声明不合法`);
+    return exit(1);
+  }
+  if (!event) {
+    // event 非必须，不需要 exit
+    console.log(`${module} ${EntryType.EVENT} 文件声明缺失`);
+  }
+
+  const findIndex = importComponentToken.indexOf(exportDefaultToken);
+  let component = '';
+  if (findIndex > -1) {
+    component = path.resolve(path.dirname(indexPath), importComponentSource[findIndex]);
+  }
+
+  if (!component) {
+    console.log(`${module} ${EntryType.COMPONENT} 文件声明不合法`);
+    return exit(1);
+  }
+
+  const reg = /^.*[/\\]node_modules[/\\](.*)/;
+  [, config] = config.match(reg) || [, config];
+  [, value] = value.match(reg) || [, value];
+  [, component] = component.match(reg) || [, component];
+  [, event] = event.match(reg) || [, event];
+
+  return {
+    config,
+    value,
+    component,
+    event,
+  };
+};
+
+const getASTTokenByTraverse = ({ ast, indexPath }: { ast: any; indexPath: string }) => {
+  let config = '';
+  let value = '';
+  let event = '';
+  const importComponentToken: string[] = [];
+  const importComponentSource: any[] = [];
+  let exportDefaultToken = '';
+
+  recast.types.visit(ast, {
+    visitImportDeclaration(p) {
+      const { node } = p;
+      const { specifiers, source } = node;
+
+      importComponentToken.push(specifiers?.[0].local?.name || '');
+      importComponentSource.push(source.value);
+
+      this.traverse(p);
+    },
+    visitExportNamedDeclaration(p) {
+      const { node } = p;
+      const { specifiers, source } = node;
+      const name = specifiers?.[0].exported.name.toLowerCase();
+
+      if (name === EntryType.VALUE) {
+        value = path.resolve(path.dirname(indexPath), `${source?.value}`);
+      } else if (name === EntryType.CONFIG) {
+        config = path.resolve(path.dirname(indexPath), `${source?.value}`);
+      } else if (name === EntryType.EVENT) {
+        event = path.resolve(path.dirname(indexPath), `${source?.value}`);
+      }
+
+      this.traverse(p);
+    },
+    visitExportDefaultDeclaration(p) {
+      const { node } = p;
+      const { declaration } = node as any;
+      exportDefaultToken = `${declaration.name}`;
+      this.traverse(p);
+    },
+  });
+
+  return {
+    config,
+    value,
+    event,
+    importComponentToken,
+    importComponentSource,
+    exportDefaultToken,
+  };
+};

packages/cli/tsconfig.build.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "CommonJS",
+    "rootDir": "./src",
+    "outDir": "./lib",
+  },
+  "include": ["./src"],
+}