vitarx-router 0.0.1 → 1.0.0-beta.10

package/README.md

@@ -1,5 +1,6 @@
 # VitarxRouter
 
+Vitarx前端框架的配套路由器
 ________________________________________________________________________
 
 ## 安装
@@ -8,7 +9,41 @@ ________________________________________________________________________
 npm install vitarx-router
 ```
 
-## 使用
-```javascript
-import { Router } from 'vitarx-router'
+## 简单示例
+
+```ts
+// main.ts
+import { createRouter } from 'vitarx-router'
+import Page1 from './Page/Page1.js'
+import App from './App.js'
+
+createRouter({
+  mode: 'path', // 路由模式，可选值：hash、path、memory
+  suffix: '*', // 允许任何后缀，例如 /x.html
+  routes: [
+    {
+      name: 'home', // 命名路由
+      path: '/',
+      widget: lazy(() => import('./Pages/home.js')),// 代码分块懒加载
+      children: [ // 嵌套路由
+        {
+          path: '/workbench',
+          widget: lazy(() => import('./Pages/home/workbench.js')) // 直接使用小部件
+        }
+      ]
+    },
+    { // 动态路由
+      path: '/page1/{name?}',// {name?}为可选参数，没有?为必填参数
+      widget: Page1
+    },
+    { // 命名视图
+      path: '/page3',
+      widget: { // 命名视图
+        'default': lazy(() => import('./Page/xxx.js')),
+        'right': lazy(() => import('./Page/xxx.js'))
+      }
+    }
+  ]
+})
+createApp('#root').render(App)
 ```

package/dist/scripts/type-make.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 路由路线配置
+ */
+declare interface Route {
+    path: string;
+    name?: string;
+    children?: Route[];
+    widget?: any;
+}
+/**
+ * 生成路由索引类型声明
+ *
+ * @param {Route[]} routes - 路由表
+ * @param {string[]} custom - 自定义的名称或路径，例如['/home', 'home']
+ * @param {string} [writePath] - 要写入的路径，完整的路径！例如'/Users/Vitarx/vitarx/route.type.d.ts'，默认为当前工作目录下的route.type.d.ts
+ * @return {void}
+ */
+export default function make(routes: Route[], custom?: string[], writePath?: string): void;
+export {};

package/dist/scripts/type-make.js

@@ -0,0 +1,66 @@
+import * as fs from 'node:fs';
+/**
+ * 格式化path
+ *
+ * @param {string} path - 路径字符串
+ * @return {string} - 格式化后的路径字符串
+ */
+function formatPath(path) {
+    // 去除所有空格 处理重复//
+    path = `/${path}`.replace(/\s+/g, '').replace(/\/+/g, '/');
+    if (!path.length)
+        return '/';
+    if (path === '/' || path === '/#/')
+        return path;
+    return path.replace(/\/$/, '');
+}
+/**
+ * 根据路由表生成路由索引
+ *
+ * @param {Route[]} routes - 路由表
+ * @return {{ paths: string[], names: string[] }} - 路由索引对象，包含所有路由路径和名称
+ */
+function buildRouteIndex(routes) {
+    const paths = [];
+    const names = [];
+    // 递归遍历路由，拼接路径
+    function traverse(route, parentPath = '') {
+        // 如果是路由组，拼接路径并继续遍历子路由
+        const fullPath = formatPath(parentPath ? `${parentPath}/${route.path}` : route.path);
+        // 如果有widget，记录路径
+        if (route.widget) {
+            paths.push(fullPath);
+        }
+        // 如果有name，记录name
+        if (route.name) {
+            names.push(route.name);
+        }
+        // 如果有子路由，递归遍历
+        if (route.children && route.children.length > 0) {
+            route.children.forEach(childRoute => traverse(childRoute, fullPath));
+        }
+    }
+    // 遍历所有的根路由
+    routes.forEach(route => traverse(route));
+    return {
+        paths,
+        names
+    };
+}
+/**
+ * 生成路由索引类型声明
+ *
+ * @param {Route[]} routes - 路由表
+ * @param {string[]} custom - 自定义的名称或路径，例如['/home', 'home']
+ * @param {string} [writePath] - 要写入的路径，完整的路径！例如'/Users/Vitarx/vitarx/route.type.d.ts'，默认为当前工作目录下的route.type.d.ts
+ * @return {void}
+ */
+export default function make(routes, custom = [], writePath = '') {
+    const { paths, names } = buildRouteIndex(routes);
+    const all = [...paths, ...names, ...custom];
+    // 构造类型声明字符串
+    const typeDeclaration = `type VitarxRouterRouteIndexTyped = ${all.map(route => `'${route}'`).join(' | ')};`;
+    if (!writePath)
+        writePath = `${process.cwd()}/route.type.d.ts`;
+    fs.writeFileSync(writePath, typeDeclaration, { encoding: 'utf-8' });
+}