@e7w/easy-routes 0.1.2 → 0.1.3

package/README.md

@@ -21,6 +21,8 @@ export function Layout() {
 src/\*\*/pages/\*\*/meta.ts配置如下
 
 ```ts
-export const permission: number = 0b0; // 默认是0b0代表需要登录，只有最右边的一位代表登录，其他位可以自己定enum代表权限
+export const permission: number = 0b0; // 默认是0b0代表不需要登录，只有最右边的一位代表登录，其他位可以自己定enum代表权限
 export const loader: Loader = async (ctx, meta) => {}; // 可以动态修改ctx，ctx.data是返回给页面组件的值，ctx.title是页面的title，signed代表是否登录成功，noPermission代表是否没有权限
+export const displayInMenu: string = "首页"; // 空字符串或者没有代表不展示在menu里
+export const menuIcon: string = "xxx.svg"; // menu的icon
 ```

package/dist/index.d.mts

@@ -0,0 +1,26 @@
+import z from "zod";
+import { Params, RouteObject } from "react-router";
+
+//#region src/types/index.d.ts
+interface Ctx {
+  title: string;
+  signed: boolean;
+  noPermission: boolean;
+  req: {
+    params: Params;
+    query: Params;
+    pathname: string;
+  };
+  data?: any;
+}
+declare abstract class Permission {
+  permission: number;
+  abstract defaultTitle: string;
+  abstract init(req: Ctx["req"]): Promise<void> | void;
+}
+declare const PermissionSchema: z.ZodType<Permission, Permission>;
+//#endregion
+//#region src/router.d.ts
+declare const routes: RouteObject[];
+//#endregion
+export { type Ctx, Permission, PermissionSchema, routes };

package/dist/index.mjs

@@ -0,0 +1,224 @@
+import z from "zod";
+import { Navigate, Outlet, isRouteErrorResponse, redirect, useNavigation, useRouteError } from "react-router";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import nProgress from "nprogress";
+import "nprogress/nprogress.css";
+import { inject, loader, provide, useLoader } from "@e7w/easy-model";
+import './style.css';
+//#region src/types/index.ts
+var Permission = class {
+	permission = 0;
+};
+const PermissionSchema = z.object({
+	init: z.function({ output: z.union([z.promise(z.void()), z.void()]) }),
+	permission: z.number(),
+	defaultTitle: z.string()
+});
+//#endregion
+//#region src/components/DefaultOutlet.tsx
+const DefaultOutlet = () => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Outlet, {}) });
+//#endregion
+//#region src/components/ErrorBoundary.tsx
+const ErrorBoundary = () => {
+	const error = useRouteError();
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex h-screen w-full items-center justify-center",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center justify-center",
+			children: [
+				/* @__PURE__ */ jsx("h1", {
+					className: "text-2xl font-bold mb-4",
+					children: "Error"
+				}),
+				/* @__PURE__ */ jsx("p", { children: "Something went wrong." }),
+				isRouteErrorResponse(error) && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("p", {
+					className: "text-red-300",
+					children: [
+						error.status,
+						" ",
+						error.statusText
+					]
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-red-300",
+					children: JSON.stringify(error.data)
+				})] }),
+				error instanceof Error && /* @__PURE__ */ jsx("p", {
+					className: "text-red-300",
+					children: error.message
+				})
+			]
+		})
+	});
+};
+//#endregion
+//#region src/utils/hooks.ts
+function useDebouncedValue(value) {
+	const [result, setResult] = useState(value);
+	const timer = useRef(void 0);
+	useEffect(() => {
+		clearTimeout(timer.current);
+		timer.current = window.setTimeout(() => {
+			setResult(value);
+		}, 700);
+		return () => {
+			window.clearTimeout(timer.current);
+		};
+	}, [result, value]);
+	return result;
+}
+//#endregion
+//#region src/components/Loading.tsx
+const Loading = () => {
+	const { isGlobalLoading } = useLoader();
+	if (!useDebouncedValue(isGlobalLoading)) return;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "spinner-box",
+		children: [
+			/* @__PURE__ */ jsx("div", { className: "blue-orbit leo" }),
+			/* @__PURE__ */ jsx("div", { className: "green-orbit leo" }),
+			/* @__PURE__ */ jsx("div", { className: "red-orbit leo" }),
+			/* @__PURE__ */ jsx("div", { className: "white-orbit w1 leo" }),
+			/* @__PURE__ */ jsx("div", { className: "white-orbit w2 leo" }),
+			/* @__PURE__ */ jsx("div", { className: "white-orbit w3 leo" })
+		]
+	});
+};
+//#endregion
+//#region src/components/ProgressLayout.tsx
+nProgress.configure({
+	showSpinner: false,
+	speed: 500,
+	minimum: .1,
+	easing: "ease",
+	trickleSpeed: 200
+});
+const ProgressLayout = () => {
+	const { state } = useNavigation();
+	useEffect(() => {
+		if (state === "loading") nProgress.start();
+		else nProgress.done();
+	}, [state]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Outlet, {}), /* @__PURE__ */ jsx(Loading, {})] });
+};
+//#endregion
+//#region src/models/system.ts
+const system = provide(class System {
+	@inject(PermissionSchema) router;
+	@loader.once @loader.load(true) async init(req) {
+		await this.router?.init(req);
+	}
+	hasPermission(permission = 0) {
+		return ((this.router?.permission || 0) & permission) === permission;
+	}
+	getCtx(req, permission = 1) {
+		return {
+			title: this.router?.defaultTitle ?? document.title,
+			signed: (permission & 1) === 0 || this.hasPermission(1),
+			noPermission: !this.hasPermission(permission),
+			req
+		};
+	}
+})();
+//#endregion
+//#region src/router.tsx
+const pages = import.meta.glob("/src/**/pages/**/index.tsx", {
+	eager: true,
+	import: "Page"
+});
+const layouts = import.meta.glob("/src/**/pages/**/layout.tsx", {
+	eager: true,
+	import: "Layout"
+});
+const metas = import.meta.glob("/src/**/pages/**/meta.ts", { eager: true });
+const menuObj = { "/": {
+	name: "首页",
+	path: "/"
+} };
+const routes = [];
+const obj = {};
+const filePaths = new Set(Object.keys({
+	...pages,
+	...layouts
+}).map((p) => p.replace(/\/(index|layout)\.tsx$/, "")));
+filePaths.forEach((filePath) => {
+	const Page = pages[filePath + "/index.tsx"];
+	const Layout = layouts[filePath + "/layout.tsx"] || DefaultOutlet;
+	const meta = metas[filePath + "/meta.ts"] || {};
+	const path = filePath.replace(/.*\/pages/, "").replace(/\[([^\]]+)\]/, ":$1") || "/";
+	const hasPage = Boolean(Page);
+	obj[path] = {
+		path,
+		element: /* @__PURE__ */ jsx(Layout, {}),
+		children: [{
+			element: hasPage ? /* @__PURE__ */ jsx(Page, {}) : /* @__PURE__ */ jsx(Navigate, {
+				to: "/",
+				replace: true
+			}),
+			index: true,
+			loader: hasPage ? async ({ params, request }) => {
+				const url = new URL(request.url);
+				const req = {
+					params,
+					query: Object.fromEntries(url.searchParams),
+					pathname: url.pathname.replace(/\/?$/, "/")
+				};
+				await system.init(req)?.catch?.(() => {});
+				const ctx = system.getCtx(req, meta.permission);
+				await meta.loader?.(ctx)?.catch?.(() => {});
+				if (!ctx.signed) return redirect(`/login?from=${encodeURIComponent(request.url)}`);
+				if (ctx.noPermission) return redirect("/403");
+				document.title = ctx.title;
+				return ctx.data;
+			} : void 0
+		}]
+	};
+	if (meta.displayInMenu) menuObj[path] = {
+		name: meta.displayInMenu,
+		path,
+		icon: meta.menuIcon
+	};
+});
+filePaths.forEach((filePath) => {
+	const path = filePath.replace(/.*\/pages/, "").replace(/\[([^\]]+)\]/, ":$1") || "/";
+	if (path === "/") return;
+	const currentObj = obj[path];
+	const currentMenu = menuObj[path];
+	const segments = path.split("/").filter(Boolean);
+	const paths = ["/"];
+	let finished1 = false;
+	let finished2 = !currentMenu;
+	segments.reduce((acc, curr) => {
+		const newPath = acc + "/" + curr;
+		if (newPath !== path) paths.unshift(newPath);
+		return newPath;
+	}, "");
+	for (const p of paths) {
+		if (!finished1 && obj[p]) {
+			obj[p].children.push(currentObj);
+			finished1 = true;
+		}
+		if (!finished2 && menuObj[p]) {
+			menuObj[p].children ??= [];
+			menuObj[p].children.push(currentMenu);
+			finished2 = true;
+		}
+		if (finished1 && finished2) break;
+	}
+});
+obj["/"].errorElement = /* @__PURE__ */ jsx(ErrorBoundary, {});
+routes.push({
+	path: "/",
+	element: /* @__PURE__ */ jsx(ProgressLayout, {}),
+	children: [obj["/"]]
+});
+routes.push({
+	path: "*",
+	element: /* @__PURE__ */ jsx(Navigate, {
+		to: obj["/404"] ? "/404" : "/",
+		replace: true
+	})
+});
+menuObj["/"];
+//#endregion
+export { Permission, PermissionSchema, routes };