@ray-js/build-plugin-router 0.3.0-beta.1c347991

package/README.md

@@ -0,0 +1,6 @@
+# @ray-js/build-plugin-router
+
+该插件根据构建目标 target 字段，将 routes.config.ts 文件进行转换
+
+- 小程序(微信、涂鸦) - 生成 `src/app.config.ts` 临时文件提供给 remax 进行构建
+- web 端 - 由 `.ray` 直接调用，不进行处理

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+import type { PluginIns, API } from '@ray-js/types';
+export default function PluginRouter(api: API): PluginIns;

package/lib/index.js

@@ -0,0 +1,173 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const chokidar_1 = __importDefault(require("chokidar"));
+const colors_1 = __importDefault(require("colors"));
+const path_1 = __importDefault(require("path"));
+const lodash_1 = __importDefault(require("lodash"));
+const plugin_utils_1 = require("@ray-js/plugin-utils");
+const shared_1 = require("@ray-js/shared");
+colors_1.default.enable();
+const LOG_PREFIX = `build-plugin-router`;
+function normalizeRoute(route) {
+    return (0, shared_1.paramCase)(route);
+}
+function PluginRouter(api) {
+    return {
+        name: '@ray-js/build-plugin-router',
+        setup() {
+            shared_1.log.verbose(LOG_PREFIX, 'setup');
+            this.buildRoutesConfig(true);
+            if (api.options.watch) {
+                chokidar_1.default
+                    .watch(['**/*.config.ts', '**/*.config.js', '!app.config.{js,ts}'], {
+                    cwd: path_1.default.join(api.options.cwd, api.options.source),
+                })
+                    .on('change', (file) => {
+                    const filePath = path_1.default.join(api.options.cwd, api.options.source, file);
+                    // 配置文件引用存在 cache
+                    delete require.cache[require.resolve(filePath)];
+                    // FIXME: 引用文件变更也需要重新构建
+                    this.buildRoutesConfig(false);
+                });
+            }
+        },
+        buildRoutesConfig(immediate) {
+            const routesConfigFile = api.searchJSFile('src/routes.config');
+            const { target } = api.options;
+            if (!routesConfigFile) {
+                throw new Error(`missing configuration file (routes.config.ts)`);
+            }
+            const globalConfigFile = api.searchJSFile('src/global.config');
+            const routesConfig = api.requireJSFile(routesConfigFile);
+            const globalConfig = globalConfigFile ? api.requireJSFile(globalConfigFile, '*') : {};
+            // TODO: 小程序端统一生成 app.config 需要过滤 targets 的描述页面对象
+            if (!['tuya', 'wechat'].includes(target)) {
+                return this.generateWebRoutes(routesConfig);
+            }
+            const wechatAppConfig = this.getWechatAppConfigData(routesConfig, globalConfig['wechat'] || {});
+            const tuyaAppConfig = this.getTuyaAppConfigData(routesConfig, globalConfig['tuya'] || {});
+            // FIX: 修复初始化时找不到配置文件
+            // 初始化时，需要立即生成配置文件
+            if (lodash_1.default.isEmpty(wechatAppConfig.tabBar)) {
+                delete wechatAppConfig.tabBar;
+            }
+            if (immediate) {
+                return this.generateAppConfig({ wechat: wechatAppConfig, tuya: tuyaAppConfig });
+            }
+            // FIX: 修复间接（更新routes.config.ts）更新app.config.ts文件，无法触发重新编译，导致小程序app.json未更新
+            // 原因：/node_modules/@remax/cli/lib/build/watch.js 中的变量isRunning为true
+            // 在更新routes.config.ts触发的编译未完成，又因间接更新app.config.ts的触发重新编译被remax忽略导致
+            // TODO: 此为临时方案，无法确定第一次更新什么时候完成，默认延时1s
+            setTimeout(() => {
+                this.generateAppConfig({ wechat: wechatAppConfig, tuya: tuyaAppConfig });
+            }, 1000);
+        },
+        /**
+         * 生成微信小程序的 app.config 配置
+         * @param routesConfig - routes.config 配置内容
+         * @param appConfig - 已存在的应用配置
+         */
+        getWechatAppConfigData(routesConfig, globalConfig) {
+            const { routes, tabBar } = routesConfig;
+            const pages = routes.map((r) => r.path.replace(/^\//, ''));
+            const tabBarConfig = {};
+            if (tabBar === null || tabBar === void 0 ? void 0 : tabBar.textColor) {
+                tabBarConfig.color = tabBar.textColor;
+            }
+            if (tabBar === null || tabBar === void 0 ? void 0 : tabBar.borderStyle) {
+                tabBarConfig.borderStyle = tabBar.borderStyle;
+            }
+            if (tabBar === null || tabBar === void 0 ? void 0 : tabBar.selectedColor) {
+                tabBarConfig.selectedColor = tabBar.selectedColor;
+            }
+            if (tabBar === null || tabBar === void 0 ? void 0 : tabBar.backgroundColor) {
+                tabBarConfig.backgroundColor = tabBar.backgroundColor;
+            }
+            if (tabBar === null || tabBar === void 0 ? void 0 : tabBar.list) {
+                tabBarConfig.list = tabBar.list.map((tab) => {
+                    const pagePath = routes.find((route) => route.id === tab.id);
+                    return {
+                        pagePath: pagePath.path.replace(/^\//, ''),
+                        text: tab.text,
+                        iconPath: tab.icon,
+                        selectedIconPath: tab.activeIcon,
+                    };
+                });
+            }
+            const config = Object.assign({}, globalConfig, { pages, tabBar: tabBarConfig });
+            return config;
+        },
+        getTuyaAppConfigData(routesConfig, globalConfig) {
+            const { routes, tabBar } = routesConfig;
+            const pages = routes.map((r) => r.path.replace(/^\//, ''));
+            const tabBarConfig = {};
+            if (tabBar === null || tabBar === void 0 ? void 0 : tabBar.textColor) {
+                tabBarConfig.color = tabBar.textColor;
+            }
+            if (tabBar === null || tabBar === void 0 ? void 0 : tabBar.borderStyle) {
+                tabBarConfig.borderStyle = tabBar.borderStyle;
+            }
+            if (tabBar === null || tabBar === void 0 ? void 0 : tabBar.selectedColor) {
+                tabBarConfig.selectedColor = tabBar.selectedColor;
+            }
+            if (tabBar === null || tabBar === void 0 ? void 0 : tabBar.backgroundColor) {
+                tabBarConfig.backgroundColor = tabBar.backgroundColor;
+            }
+            if (tabBar === null || tabBar === void 0 ? void 0 : tabBar.list) {
+                tabBarConfig.list = tabBar.list.map((tab) => {
+                    const pagePath = routes.find((route) => route.id === tab.id);
+                    return {
+                        pagePath: pagePath.path.replace(/^\//, ''),
+                        text: tab.text,
+                        iconPath: tab.icon,
+                        selectedIconPath: tab.activeIcon,
+                    };
+                });
+            }
+            const config = Object.assign({}, globalConfig, { pages, tabBar: tabBarConfig });
+            return config;
+        },
+        generateAppConfig(data) {
+            const templateFile = path_1.default.join(__dirname, '../templates/app.config.ejs');
+            const context = (0, plugin_utils_1.ejsRender)(templateFile, { appConfig: data });
+            api.writeFile('src/app.config.ts', context);
+            shared_1.log.verbose(LOG_PREFIX, `generate`, 'src/app.config.ts'.underline.green, `for wechat platform`);
+        },
+        generateWebRoutes(params) {
+            const { routes } = params;
+            const routesConfig = this.routesAdditionConfig(routes);
+            const templateFile = path_1.default.join(__dirname, '../templates/routes.config.ejs');
+            const pages = routesConfig.map((item) => {
+                const chunkName = normalizeRoute(item.id || item.route);
+                return {
+                    id: item.id || '',
+                    route: item.route,
+                    path: item.path,
+                    config: item.config,
+                    chunkName,
+                };
+            });
+            const context = (0, plugin_utils_1.ejsRender)(templateFile, { pages });
+            api.writeFile('.ray/router.config.ts', context);
+            shared_1.log.verbose(LOG_PREFIX, `generate`, '.ray/router.config.ts'.green.underline, `for web platform`);
+        },
+        /**
+         * 附加路由的配置信息
+         * @param routes - 路由配置
+         */
+        routesAdditionConfig(routes) {
+            return routes.map((route) => {
+                let config = {};
+                const configFilePath = api.searchJSFile(api.options.source + route.path + '.config');
+                if (configFilePath) {
+                    config = `require('@${route.path + '.config'}').web || {}`;
+                }
+                return Object.assign(Object.assign({}, route), { config: config });
+            });
+        },
+    };
+}
+exports.default = PluginRouter;

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@ray-js/build-plugin-router",
+  "version": "0.3.0-beta.1c347991",
+  "description": "Ray build plugin for router",
+  "keywords": [
+    "ray"
+  ],
+  "author": "子长 <zichang.nong@tuya.com>",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "files": [
+    "lib",
+    "templates"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "clean": "rm -rf lib",
+    "build": "tsc -p ./tsconfig.build.json",
+    "watch": "tsc -p ./tsconfig.build.json --watch"
+  },
+  "peerDependencies": {
+    "@ray-js/cli": "^0.0.0"
+  },
+  "dependencies": {
+    "@ray-js/plugin-utils": "^0.3.0-beta.1c347991",
+    "@ray-js/shared": "^0.3.0-beta.1c347991",
+    "chokidar": "^3.5.2",
+    "colors": "1.4.0"
+  },
+  "devDependencies": {
+    "@ray-js/types": "^0.3.0-beta.1c347991"
+  },
+  "maintainers": [
+    {
+      "name": "tuyafe",
+      "email": "tuyafe@tuya.com"
+    }
+  ],
+  "gitHead": "e0bd013022ddda63380d3c9e20fd8cadb46cd61f",
+  "repository": {}
+}

package/templates/app.config.ejs

@@ -0,0 +1,6 @@
+// this file generate by @ray-js/build-plugin-router.
+// do not modify this file!!!
+<% Object.keys(appConfig).forEach(function(target) { _%>
+export const <%= target %> = <%- JSON.stringify(appConfig[target], null, 2)%>;
+<%_ }); _%>
+

package/templates/routes.config.ejs

@@ -0,0 +1,17 @@
+// this file generate by @ray-js/build-plugin-router.
+// do not modify this file!!!
+export const PAGES = [
+  <%_ pages.forEach(function(page) { _%>
+  {
+    id: '<%= page.id %>',
+    route: '<%= page.route %>',
+    path: '<%= page.path %>',
+    config: <%- typeof page.config === 'string' ? page.config : JSON.stringify(page.config) %>,
+    component: function () {
+      return import(/* webpackChunkName: "<%= page.chunkName %>" */ '@<%= page.path %>').then(
+        (module) => module.default
+      );
+    },
+  },
+  <%_ }); _%>
+];