lcd-router-webpack-plugin 1.0.0 → 9.0.0-alpha.10

package/src/ReducersGenerator.ts

@@ -1,90 +0,0 @@
-import fs from 'fs';
-import babelCore, { transformSync, types } from '@babel/core';
-import type { MeJSON } from './utils';
-import { Generator } from './Generator';
-
-interface GetReducersBabelPluginItem {
-  meJSON: MeJSON;
-  namespace: string;
-  isExternal: boolean;
-  meJSONPath: string;
-}
-export class ReducersGenerator extends Generator<GetReducersBabelPluginItem> {
-  constructor() {
-    super();
-  }
-
-  // TODO: 这里类型 加了个 any， 不太希望写else， 所以导致的问题，ts类型推导似乎不合理
-  objectPropertyValue(type: 'call' | 'string' | 'identifier', value: string): any {
-    if (type === 'call') {
-      return types.callExpression(types.identifier('decorate'), [
-        types.identifier(this.identifierString(value)),
-        types.stringLiteral(value),
-      ]);
-    }
-    if (type === 'string') {
-      return types.stringLiteral('');
-    }
-    if (type === 'identifier') {
-      return types.identifier(this.identifierString(value));
-    }
-  }
-
-  writeCodeToFile(absPath: string) {
-    const items = Array.from(this.cache.values());
-    const code = transformSync('', {
-      plugins: [
-        () => {
-          return {
-            name: 'babel-plugin-replace-react-redux',
-            visitor: {
-              Program: {
-                enter: (path) => {
-                  const codes: (
-                    | babelCore.types.ImportDeclaration
-                    | babelCore.types.ExportDefaultDeclaration
-                  )[] = [
-                    this.importDefaultDeclaration(
-                      'decorate',
-                      'rrc-loader-helper/lib/reducer-decorate',
-                    ),
-                  ];
-                  items
-                    .filter((x) => x.meJSON.sync || x.isExternal)
-                    .map((x) =>
-                      this.importNamedDeclaration([['reducer', x.namespace]], x.meJSONPath),
-                    )
-                    .forEach((x) => codes.push(x));
-
-                  const properties = items.map((x) => {
-                    if (x.isExternal || x.meJSON.sync) {
-                      if (x.meJSON.mobx) {
-                        return types.objectProperty(
-                          types.stringLiteral(x.namespace),
-                          this.objectPropertyValue('call', x.namespace),
-                        );
-                      }
-                      return types.objectProperty(
-                        types.stringLiteral(x.namespace),
-                        this.objectPropertyValue('identifier', x.namespace),
-                      );
-                    }
-                    return types.objectProperty(
-                      types.stringLiteral(x.namespace),
-                      this.objectPropertyValue('string', x.namespace),
-                    );
-                  });
-
-                  codes.push(types.exportDefaultDeclaration(types.objectExpression(properties)));
-
-                  path.pushContainer('body', codes);
-                },
-              },
-            },
-          };
-        },
-      ],
-    });
-    fs.writeFileSync(absPath, code?.code!, { encoding: 'utf8' });
-  }
-}

package/src/RoutersGenerator.ts

@@ -1,295 +0,0 @@
-import fs from 'fs';
-import { transformSync, types } from '@babel/core';
-import type { Options, MeJSON, PathService } from './utils';
-import { Generator } from './Generator';
-
-interface Item {
-  meJSONPath: string;
-  meJSON: MeJSON;
-  isExternal: boolean;
-  path: string;
-  page: string;
-  exact: boolean;
-}
-
-interface TransformItem extends Item, MeJSON {}
-
-export class RoutersGenerator extends Generator<Item> {
-  config: Options;
-  pathService: PathService;
-
-  constructor(config: Options, pathService: PathService) {
-    super();
-    this.config = config;
-    this.pathService = pathService;
-  }
-
-  private errorComponentVariableDeclaration() {
-    return types.variableDeclaration('const', [
-      types.variableDeclarator(
-        types.identifier('ErrorComponent'),
-        types.arrowFunctionExpression(
-          [types.identifier('props')],
-          types.blockStatement([
-            types.returnStatement(
-              types.jsxElement(
-                types.jsxOpeningElement(types.jsxIdentifier('div'), [], false),
-                types.jsxClosingElement(types.jsxIdentifier('div')),
-                [
-                  types.jsxElement(
-                    types.jsxOpeningElement(types.jsxIdentifier('h1'), [], false),
-                    types.jsxClosingElement(types.jsxIdentifier('h1')),
-                    [types.jsxText('页面渲染发生异常')],
-                  ),
-                  types.jsxElement(
-                    types.jsxOpeningElement(types.jsxIdentifier('span'), [], false),
-                    types.jsxClosingElement(types.jsxIdentifier('span')),
-                    [
-                      types.jsxExpressionContainer(
-                        types.optionalMemberExpression(
-                          types.memberExpression(
-                            types.identifier('props'),
-                            types.identifier('errorStack'),
-                          ),
-                          types.identifier('message'),
-                          false,
-                          true,
-                        ),
-                      ),
-                    ],
-                  ),
-                ],
-                false,
-              ),
-            ),
-          ]),
-        ),
-      ),
-    ]);
-  }
-
-  private loadingVariableDeclaration() {
-    return types.variableDeclaration('const', [
-      types.variableDeclarator(
-        types.identifier('Loading'),
-        types.arrowFunctionExpression(
-          [],
-          types.blockStatement([
-            types.returnStatement(
-              types.jsxFragment(types.jsxOpeningFragment(), types.jsxClosingFragment(), []),
-            ),
-          ]),
-        ),
-      ),
-    ]);
-  }
-
-  private createDowngradeValue(meJSON: MeJSON) {
-    return <T extends keyof MeJSON>(name: T, defaultValue: MeJSON[T]) => {
-      /** @ts-ignore */
-      return meJSON[name] ?? this.config[name] ?? defaultValue;
-    };
-  }
-
-  private transform(item: Item): TransformItem {
-    const downgradeValue = this.createDowngradeValue(item.meJSON);
-    // 路由参数
-    let route = item.meJSON.route ?? '';
-    const keepAlive = downgradeValue('keepAlive', false);
-    const retain = downgradeValue('retain', false);
-    const title = downgradeValue('title', undefined);
-    // FUCK keep-alive 特性的坑， 为了兼容同一个页面多次打开 动态拓展 redux 的reducer 节点
-    const linkExtendable = downgradeValue('linkExtendable', false);
-    route = linkExtendable ? `${route}/:id?` : route;
-    let injectStore = downgradeValue('injectStore', false);
-    if (injectStore === true) injectStore = 'store';
-    return {
-      ...item,
-      route,
-      keepAlive,
-      retain,
-      title,
-      linkExtendable,
-      injectStore,
-    };
-  }
-
-  private pageImportExpression(item: TransformItem) {
-    const returnObjectProperties = [
-      types.objectProperty(types.identifier('module'), types.identifier('module')),
-    ];
-    if (item.meJSON.sync) {
-      returnObjectProperties.push(
-        types.objectProperty(types.identifier('sync'), types.booleanLiteral(true)),
-      );
-    } else {
-      returnObjectProperties.push(
-        types.objectProperty(types.identifier('sync'), types.booleanLiteral(false)),
-        types.objectProperty(types.identifier('reducers'), types.identifier('reducers')),
-      );
-    }
-    const sourceAst = types.stringLiteral(item.meJSONPath);
-
-    if (this.config.enablePreFetch) {
-      types.addComment(sourceAst, 'leading', 'webpackPrefetch: true');
-    }
-
-    return types.callExpression(
-      types.memberExpression(
-        types.callExpression(types.import(), [sourceAst]),
-        types.identifier('then'),
-      ),
-      [
-        types.arrowFunctionExpression(
-          [types.identifier('module')],
-          types.blockStatement([
-            // TODO
-            types.returnStatement(types.objectExpression(returnObjectProperties)),
-          ]),
-        ),
-      ],
-    );
-  }
-
-  private loadableCallExpression(item: TransformItem) {
-    return types.callExpression(types.identifier('Loadable'), [
-      types.objectExpression([
-        types.objectProperty(
-          types.identifier('title'),
-          item.title ? types.stringLiteral(item.title) : types.nullLiteral(),
-        ),
-        types.objectProperty(types.identifier('keepAlive'), types.booleanLiteral(item.keepAlive!)),
-        types.objectProperty(types.identifier('route'), types.stringLiteral(item.route!)),
-        types.objectProperty(types.identifier('retain'), types.booleanLiteral(item.retain!)),
-        types.objectProperty(
-          types.identifier('injectStore'),
-          typeof item.injectStore === 'boolean'
-            ? types.booleanLiteral(item.injectStore)
-            : types.stringLiteral(item.injectStore!),
-        ),
-        types.objectProperty(types.identifier('page'), types.stringLiteral(item.page)),
-        types.objectProperty(types.identifier('loading'), types.identifier('Loading')),
-        types.objectProperty(
-          types.identifier('errorComponent'),
-          types.identifier('ErrorComponent'),
-        ),
-        types.objectProperty(
-          types.identifier('metaInfo'),
-          types.callExpression(
-            types.memberExpression(types.identifier('JSON'), types.identifier('parse')),
-            [types.stringLiteral(JSON.stringify(item.meJSON))],
-          ),
-        ),
-        types.objectProperty(
-          types.identifier('loader'),
-          types.arrowFunctionExpression([], this.pageImportExpression(item)),
-        ),
-      ]),
-    ]);
-  }
-
-  writeCodeToFile(absPath: string) {
-    const items = Array.from(this.cache.values());
-    const code = transformSync('', {
-      plugins: [
-        () => {
-          return {
-            name: 'babel-plugin-replace-react-redux',
-            visitor: {
-              Program: {
-                enter: (path) => {
-                  const ast: (
-                    | types.ImportDeclaration
-                    | types.VariableDeclaration
-                    | types.ExportDefaultDeclaration
-                    | types.ExpressionStatement
-                  )[] = [
-                    this.importNamedDeclaration([], 'rrc-loader-helper/lib/fake-react'),
-                    this.importDefaultDeclaration('Loadable', 'rrc-loader-helper/lib/loadable'),
-                    this.importDefaultDeclaration('React', 'react'),
-                  ];
-
-                  /** 如果用户没有指定loading组件，那么自动生成一个空 loading */
-                  if (this.config.loading) {
-                    ast.push(this.importDefaultDeclaration('Loading', this.config.loading));
-                  } else {
-                    ast.push(this.loadingVariableDeclaration());
-                  }
-
-                  if (this.config.errorComponent) {
-                    ast.push(
-                      this.importDefaultDeclaration('ErrorComponent', this.config.errorComponent),
-                    );
-                  } else {
-                    ast.push(this.errorComponentVariableDeclaration());
-                  }
-
-                  if (this.config.theme?.hash) {
-                    ast.push(
-                      this.importNamedDeclaration(
-                        ['toGlobalTheme'],
-                        this.pathService.getThemeJSCacheFileAbs(this.config.theme?.hash),
-                      ),
-                    );
-                    ast.push(
-                      types.expressionStatement(
-                        types.optionalCallExpression(types.identifier('toGlobalTheme'), [], true),
-                      ),
-                    );
-                  }
-
-                  const _ = items
-                    .filter((x) => !x.isExternal)
-                    .map((x) => this.transform(x))
-                    .map((x) => {
-                      const path =
-                        this.config.dangerousRoute || !x.exact
-                          ? `/${x.path}${x.route}`
-                          : `/${x.path}`;
-                      return types.objectExpression([
-                        types.objectProperty(
-                          types.identifier('exact'),
-                          types.booleanLiteral(x.exact),
-                        ),
-                        types.objectProperty(
-                          types.identifier('keepAlive'),
-                          types.booleanLiteral(x.keepAlive!),
-                        ),
-                        types.objectProperty(types.identifier('key'), types.stringLiteral(path)),
-                        types.objectProperty(types.identifier('path'), types.stringLiteral(path)),
-                        types.objectProperty(
-                          types.identifier('component'),
-                          this.loadableCallExpression(x),
-                        ),
-                      ]);
-                    });
-                  ast.push(
-                    types.exportDefaultDeclaration(
-                      types.arrowFunctionExpression(
-                        [types.identifier('reducers')],
-                        types.blockStatement([types.returnStatement(types.arrayExpression(_))]),
-                      ),
-                    ),
-                  );
-
-                  path.pushContainer('body', ast);
-                },
-              },
-            },
-          };
-        },
-      ],
-    });
-
-    fs.writeFileSync(
-      absPath,
-      [
-        JSON.stringify(`👹 pages total count is ${Array.from(this.cache.keys()).length}`),
-        code?.code!,
-      ].join(';\r\n'),
-      {
-        encoding: 'utf8',
-      },
-    );
-  }
-}

package/src/SagasGenerator.ts

@@ -1,101 +0,0 @@
-import { Generator } from './Generator';
-import type { MeJSON } from './utils';
-import { transformSync, types } from '@babel/core';
-import fs from 'fs';
-interface Item {
-  namespace: string;
-  meJSONPath: string;
-  isExternal: boolean;
-  meJSON: MeJSON;
-}
-export class SagasGenerator extends Generator<Item> {
-  constructor() {
-    super();
-  }
-
-  private setCtxExpressionStatement(namespace: string) {
-    return types.expressionStatement(
-      types.yieldExpression(
-        types.callExpression(types.identifier('setCtx'), [
-          types.objectExpression([
-            types.objectProperty(types.identifier('mobxStyle'), types.booleanLiteral(true)),
-            types.objectProperty(types.identifier('page'), types.stringLiteral(namespace)),
-            types.objectProperty(types.identifier('url'), types.stringLiteral('')),
-          ]),
-        ]),
-      ),
-    );
-  }
-
-  private callExpressionStatement(namespace: string) {
-    return types.expressionStatement(
-      types.yieldExpression(
-        types.callExpression(types.identifier('call'), [
-          types.memberExpression(
-            types.identifier(this.identifierString(namespace)),
-            types.identifier('saga'),
-          ),
-        ]),
-      ),
-    );
-  }
-
-  writeCodeToFile(absPath: string) {
-    const items = Array.from(this.cache.values());
-    const code = transformSync('', {
-      plugins: [
-        () => {
-          return {
-            visitor: {
-              Program: {
-                enter: (path) => {
-                  const ast: (types.ImportDeclaration | types.ExportDefaultDeclaration)[] = [
-                    this.importNamedDeclaration(['setCtx'], 'rrc-loader-helper/lib/retain'),
-                    this.importNamedDeclaration(
-                      ['call'],
-                      'rrc-loader-helper/lib/sagas/redux-saga/effects',
-                    ),
-                  ];
-
-                  items
-                    .filter((x) => x.meJSON.sync || x.isExternal)
-                    .forEach((x) =>
-                      // 如果是mobx， 取 reducer， 否则取 saga
-                      ast.push(
-                        this.importNamedDeclaration(
-                          [[x.meJSON.mobx ? 'reducer' : 'saga', x.namespace]],
-                          x.meJSONPath,
-                        ),
-                      ),
-                    );
-
-                  const arrayItem = items.map((x) => {
-                    if (!x.isExternal && !x.meJSON.sync) {
-                      return types.stringLiteral('');
-                    }
-                    if (x.meJSON.mobx) {
-                      return types.functionExpression(
-                        null,
-                        [],
-                        types.blockStatement([
-                          this.setCtxExpressionStatement(x.namespace),
-                          this.callExpressionStatement(x.namespace),
-                        ]),
-                        true,
-                        false,
-                      );
-                    }
-                    return types.identifier(this.identifierString(x.namespace));
-                  });
-                  ast.push(types.exportDefaultDeclaration(types.arrayExpression(arrayItem)));
-                  path.pushContainer('body', ast);
-                },
-              },
-            },
-          };
-        },
-      ],
-    });
-    fs.writeFileSync(absPath, code?.code!, { encoding: 'utf8' });
-  }
-}

package/src/index.ts

@@ -1,204 +0,0 @@
-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);
-  }
-}