lcd-router-webpack-plugin 1.0.0

package/src/index.ts

@@ -0,0 +1,204 @@
+import type { Compiler, WebpackPluginInstance } from 'webpack';
+import globby from 'globby';
+import chokidar from 'chokidar';
+import deepmerge from 'deepmerge';
+import { PathService, Resolver, Options, FileService } from './utils';
+import { ReducersGenerator } from './ReducersGenerator';
+import { SagasGenerator } from './SagasGenerator';
+import { RoutersGenerator } from './RoutersGenerator';
+
+import path from 'node:path';
+
+export default class LcdRouterWebpackPlugin implements WebpackPluginInstance {
+  options: Options;
+  constructor(options: Options) {
+    this.options = options;
+  }
+
+  apply(compiler: Compiler) {
+    this.mergeOptions(compiler);
+
+    compiler.hooks.afterPlugins.tap('LcdRouterWebpackPlugin', (compiler) => {
+      const options = this.options;
+
+      const pathService = new PathService(options);
+      const resolver = new Resolver(compiler, options);
+      const fileService = new FileService(pathService);
+
+      const reducersGenerator = new ReducersGenerator();
+      const sagasGenerator = new SagasGenerator();
+      const routersGenerator = new RoutersGenerator(options, pathService);
+
+      function isDev(compiler) {
+        if (compiler.options.mode === 'production' || process.env.NODE_ENV === 'production')
+          return false;
+        return true;
+      }
+
+      function writeCode() {
+        reducersGenerator.writeCodeToFile(pathService.getReducersCacheFileAbs());
+        sagasGenerator.writeCodeToFile(pathService.getSagasCacheFileAbs());
+        routersGenerator.writeCodeToFile(pathService.getRoutersCacheFileAbs());
+      }
+
+      function resolveFile(filepath: string) {
+        const absFilePath = pathService.getCurrentFileAbs(filepath);
+        const currentDir = path.dirname(filepath);
+        const absCurrentDir = path.dirname(absFilePath);
+
+        const chunkCode = [] as string[];
+        try {
+          const reducerPath = resolver.getReducerFile(absCurrentDir);
+          chunkCode.push(`export { default as reducer } from  '${reducerPath}';`);
+        } catch (e) {
+          // feat: reducers 可以不存在， 方便结合reactive 和 ak，默认创建一个reducers
+          chunkCode.push(`export function reducer(){ return {} }`);
+        }
+
+        const viewPath = resolver.getViewFile(absCurrentDir);
+        chunkCode.push(`export { default as view } from  '${viewPath}';`);
+
+        const meJSON = fileService.readJSONSync(absFilePath);
+        if (meJSON.theme && !options.theme?.hash) {
+          throw Error(`开启页面级主题之前，请优先开启全局主题 ${absFilePath}`);
+        }
+
+        if (!meJSON.mobx) {
+          const sagaPath = resolver.getSagaFile(absCurrentDir);
+          chunkCode.push(`export { default as saga } from  '${sagaPath}';`);
+        }
+
+        if (meJSON.errorComponent) {
+          const errorCompPath = resolver.getErrorComFile(absCurrentDir, meJSON.errorComponent);
+          chunkCode.push(`export { default as ErrorComponent } from  '${errorCompPath}';`);
+        }
+
+        if (options.theme?.hash) {
+          const themePath = pathService.getThemeJSCacheFileAbs(options.theme?.hash);
+          chunkCode.push(`export * from '${themePath}';`);
+        }
+
+        if (meJSON.theme) {
+          fileService.writeThemeFile(meJSON.theme, 'toGlobalTheme');
+          const themePath = pathService.getThemeJSCacheFileAbs(meJSON.theme);
+          chunkCode.push(`export * from '${themePath}';`);
+        }
+
+        const meJSONPath = pathService.getMeJSONCacheFileAbs(filepath);
+
+        fileService.writeMeJSONFile(meJSONPath, chunkCode);
+
+        const isExternal = options.externals?.some?.((x) => x === path.dirname(filepath)) ?? false;
+
+        // 处理是否存在多store的场景
+        const hasChildStore =
+          globby.sync(`**/*.${options.reducerName}.{t,j}s`, { cwd: absCurrentDir }).length > 0;
+        if (hasChildStore && (meJSON.sync || isExternal)) {
+          throw Error(
+            `如果开启了Sync模式或当前页面存在于LCD的external中，那么则不支持多Store功能，${absCurrentDir}`,
+          );
+        }
+
+        /** reducers.js */
+        reducersGenerator.set(filepath, {
+          meJSON,
+          isExternal,
+          namespace: currentDir,
+          meJSONPath: meJSONPath,
+        });
+
+        /** saga.js */
+        sagasGenerator.set(currentDir, {
+          meJSON,
+          isExternal,
+          namespace: currentDir,
+          meJSONPath: meJSONPath,
+        });
+
+        /** router */
+        routersGenerator.set(currentDir, {
+          meJSON,
+          isExternal,
+          page: currentDir,
+          path: currentDir,
+          exact: false,
+          meJSONPath: meJSONPath,
+        });
+
+        /** 处理 /list 的路由 */
+        if (new RegExp(`\/${options.index}$`).test(absCurrentDir)) {
+          const _key = absCurrentDir.replace(new RegExp(`\/${options.index}$`), '');
+          routersGenerator.set(_key, {
+            meJSON,
+            isExternal,
+            page: absCurrentDir,
+            path: _key,
+            exact: true,
+            meJSONPath: meJSONPath,
+          });
+        }
+      }
+
+      if (options.theme?.hash) {
+        fileService.writeThemeFile(options.theme.hash, 'toGlobalTheme');
+      }
+
+      const list = globby.sync('**/me.json', {
+        cwd: pathService.getPageRootAbs(),
+      });
+
+      if (list.length === 0) {
+        console.warn('没有找到me.json文件');
+      }
+
+      /**
+       * glob 的排序 是包含文件名 me.json 的完整路径，存在问题
+       * 比如 会将 /xx/ss/me.json 排到 /xx/ss/zz/me.json 前面
+       * glob 的 noSort option 会将 文件夹排到前面， 因此需要手动排序， 并且统一成 globby， 速度更快
+       */
+      const sortedList = list
+        .map((filepath) => filepath?.replace(/me.json$/, ''))
+        .sort((a, b) => {
+          if (a?.startsWith(b)) return -1;
+          return a.localeCompare(b, 'en');
+        })
+        .map((dir) => `${dir}me.json`);
+
+      sortedList.forEach((filepath) => {
+        resolveFile(filepath);
+      });
+
+      writeCode();
+
+      if (isDev(compiler)) {
+        const watcher = chokidar.watch('**/me.json', {
+          cwd: pathService.getPageRootAbs(),
+          ignoreInitial: true,
+        });
+        const fn = async (filepath) => {
+          await resolveFile(filepath);
+          writeCode();
+        };
+        watcher.on('add', fn);
+        watcher.on('addDir', fn);
+        watcher.on('change', fn);
+        watcher.on('unlink', fn);
+        watcher.on('unlinkDir', fn);
+        watcher.on('error', fn);
+      }
+    });
+  }
+
+  mergeOptions(compiler: Compiler) {
+    const defaultOptions = {
+      context: compiler.context,
+      enablePreFetch: false,
+      index: 'list',
+      externals: [],
+      pageDir: 'component',
+      reducerName: 'reducers',
+      disableBuiltInRoute: false,
+    };
+    this.options = deepmerge(defaultOptions, this.options);
+  }
+}

package/src/utils/files.ts

@@ -0,0 +1,54 @@
+import fse from 'fs-extra';
+import { PathService } from './paths';
+import fetchSync from 'sync-fetch';
+
+export class FileService {
+  pathService: PathService;
+
+  constructor(pathService) {
+    this.pathService = pathService;
+  }
+
+  writeFileSync = (path: string, content: string) => {
+    fse.outputFileSync(path, content, { encoding: 'utf8' });
+  };
+
+  /**
+   * 创建 meJSON.js 文件， 包含部分内容
+   */
+  writeMeJSONFile = (filepath: string, chunkCode: string[]) => {
+    const code = chunkCode.join('\n');
+    this.writeFileSync(filepath, code);
+  };
+
+  /**
+   * 书写主题文件
+   */
+  writeThemeFile = (hash: string, funcName: string) => {
+    const code = this.fetchThemeFileContent(hash);
+    const target = this.pathService.getThemeJSCacheFileAbs(hash);
+    if (!fse.pathExistsSync(target)) {
+      fse.outputFileSync(target, ` export function ${funcName}(){ ${code} }`, { encoding: 'utf8' });
+    }
+  };
+
+  /**
+   * 获取 主题 文件内容
+   */
+
+  fetchThemeFileContent = (hash: string) => {
+    // TODO: 需要加错误处理， 以及重试机制
+    const code = fetchSync(`https://assets.dotfashion.cn/unpkg/@shein-components/shineout-theme@0.0.0-${hash}/index.js`).text();
+    if (!code.includes('(function(){')) {
+      throw new Error(`获取主题文件失败，hash:${hash}`);
+    }
+    return code;
+  };
+
+  /**
+   * 读 json 文件
+   */
+  readJSONSync = (path: string) => {
+    return fse.readJSONSync(path, { encoding: 'utf8' });
+  };
+}

package/src/utils/index.ts

@@ -0,0 +1,4 @@
+export * from './paths';
+export * from './types';
+export * from './resolver';
+export * from './files';

package/src/utils/paths.ts

@@ -0,0 +1,77 @@
+import path from 'path';
+import type { Options } from '../utils';
+
+export const dir = 'lessCoding';
+
+export const themes = 'themes';
+
+export const LcdTempDir = '.lego';
+
+/**
+ * 路径处理服务
+ */
+export class PathService {
+  options: Options;
+
+  legoAbs: string;
+
+  constructor(options) {
+    this.options = options;
+    this.legoAbs = path.join(this.options.context!, 'src', LcdTempDir);
+  }
+
+  /**
+   * 页面根目录绝对路径
+   * 通常都是
+   * - src
+   *    - components
+   * */
+  getPageRootAbs() {
+    return path.join(this.options.context!, 'src', this.options.pageDir);
+  }
+
+  getSrcRootAbs() {
+    return path.join(this.options.context!, 'src');
+  }
+
+  /**
+   * 当前文件的绝对路径
+   * */
+  getCurrentFileAbs(relativeFilePath: string) {
+    return path.join(this.getPageRootAbs(), relativeFilePath);
+  }
+
+  /** 当前文件的绝对目录路径 */
+  getCurrentDirAbs(relativeFilePath: string) {
+    return path.join(this.getPageRootAbs(), path.dirname(relativeFilePath));
+  }
+
+  /** 生成的 reducers 文件路径 */
+  getReducersCacheFileAbs() {
+    return path.join(this.legoAbs, dir, 'reducers.js');
+  }
+
+  /** 生成的 sagas 文件路径 */
+  getSagasCacheFileAbs() {
+    return path.join(this.legoAbs, dir, 'sagas.js');
+  }
+
+  /** 生成的 routers 文件路径 */
+  getRoutersCacheFileAbs() {
+    return path.join(this.legoAbs, dir, 'routers.js');
+  }
+
+  /** 主题文件cache 的路径 */
+  getThemeJSCacheFileAbs(hash: string) {
+    return path.join(this.legoAbs, dir, themes, `${hash}.js`);
+  }
+
+  /** 获取 mejson 编译后的文件路径 */
+  getMeJSONCacheFileAbs(relativeFilePath: string) {
+    return path.join(this.legoAbs, dir, 'me-json', this.getMeJsonCacheFileName(relativeFilePath));
+  }
+
+  getMeJsonCacheFileName(relativeFilePath: string) {
+    return relativeFilePath.replace(/(.*)\/me\.json$/, '$1.js').replace(/\//g, '-_-');
+  }
+}

package/src/utils/resolver.ts

@@ -0,0 +1,37 @@
+import { create } from 'enhanced-resolve';
+import type { Compiler } from 'webpack';
+import type { Options } from './types';
+
+export class Resolver {
+  resolver: any;
+  options: Options;
+  constructor(compiler: Compiler, options: Options) {
+    this.options = options;
+    this.resolver = create.sync({
+      extensions: compiler.options.resolve.extensions,
+      alias: compiler.options.resolve.alias,
+    });
+  }
+
+  /**
+   * 获取 当前目录下 reducer文件的路径
+   */
+  getReducerFile = (dirname) => this.resolver(dirname, `./${this.options.reducerName}`);
+
+  /**
+   * 获取 当前目录下 view文件的路径
+   */
+  getViewFile = (dirname) => this.resolver(dirname, `./view`);
+
+  /**
+   * 获取 当前目录下 saga 文件的路径
+   * @param isMobx 如果是 mobx 则返回 reducers 的地址
+   */
+  getSagaFile = (dirname, isMobx?: boolean) =>
+    isMobx ? this.getReducerFile(dirname) : this.resolver(dirname, `./saga`);
+
+  /**
+   * 获取 me.json 配置的 errorComponent 地址
+   */
+  getErrorComFile = (dirname, errorComponent) => this.resolver(dirname, errorComponent);
+}

package/src/utils/types.ts

@@ -0,0 +1,76 @@
+export interface Options {
+  /**
+   * 组件上下文， 默认取 compiler.context
+   * @default compiler.context
+   */
+  context?: string;
+  /**
+   * 是否禁用内置路由
+   * 默认会将 react-router-dom 转换到 rrc-loader-helper/router
+   * 如果你是新项目，建议将该配置配置为true，因为内置路由针对react-router做了大量的改动，可能会引起一些无法预测的故障
+   * @default false
+   */
+  disableBuiltInRoute?: boolean;
+  /**
+   * 是否开启 webpack prefetch预加载
+   * @default false
+   */
+  enablePreFetch?: boolean;
+  /**
+   * 指定页面路径 不进行注册路由
+   * @default []
+   */
+  externals?: string[];
+  /**
+   * 页面目录
+   * @default component
+   */
+  pageDir: string;
+  /**
+   * shineout 主题
+   */
+  theme?: {
+    hash: string;
+  };
+  /**
+   * reducer 文件名称
+   * @default reducers
+   */
+  reducerName: string;
+  /**
+   * loading 组件路径
+   */
+  loading?: string;
+  /**
+   * 一个神奇的属性，用于处理 /xxx/order/list 这种路由过长的问题
+   * 也可以用来作为父路由的默认路由目录
+   * 会生成一个新路由 /xxx/order，实际目录指向为  /xxx/order/list
+   * @default list
+   */
+  index?: string;
+  /**
+   * 渲染出错时的组件地址
+   */
+  errorComponent?: string;
+
+  /**
+   * 是否允许页面内生成自定义路由
+   * 例如在 component/order/detail/me.json 中 配置  route: '/:id'，此时会生成动态路由 /order/detail/:id
+   * 非常不推荐使用的一个属性，因为此功能受 me.json 中 exact 属性影响， 仅当 exact: true 时候，才不会拼接路由
+   * 当开启 dangerousRoute 后， 不再受 exact 影响， 都会生成 拼接路由 /order/detail/:id
+   * @default false
+   */
+  dangerousRoute?: boolean;
+}
+
+export interface MeJSON {
+  theme?: string;
+  sync?: boolean;
+  mobx?: boolean;
+  keepAlive?: boolean;
+  retain?: boolean;
+  title?: string;
+  linkExtendable?: boolean;
+  injectStore?: boolean | string;
+  route?: string;
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "Node",
+    "target": "ES5",
+    "esModuleInterop": true,
+    "jsx": "react",
+    "lib": ["ESNext"],
+    "sourceMap": true,
+    "noEmitOnError": true,
+    "allowSyntheticDefaultImports": true,
+    "declaration": true,
+    "declarationDir": "lib"
+  }
+}