@e7w/easy-routes 0.1.2 → 0.1.4

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,470 @@
+import z from "zod";
+import { Navigate, Outlet, isRouteErrorResponse, redirect, useNavigation, useRouteError } from "react-router";
+import { c } from "react/compiler-runtime";
+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 = () => {
+	const $ = c(2);
+	if ($[0] !== "86245ef798e2727374ee553b08ad2562f91d79b38190dfff1bf2e15388787321") {
+		for (let $i = 0; $i < 2; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "86245ef798e2727374ee553b08ad2562f91d79b38190dfff1bf2e15388787321";
+	}
+	let t0;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Outlet, {}) });
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+//#endregion
+//#region src/components/ErrorBoundary.tsx
+const ErrorBoundary = () => {
+	const $ = c(10);
+	if ($[0] !== "c0519d7cbaee7b0126a2e952b78b40bd9558a23ee78ea987eb3dcf5c9585862b") {
+		for (let $i = 0; $i < 10; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "c0519d7cbaee7b0126a2e952b78b40bd9558a23ee78ea987eb3dcf5c9585862b";
+	}
+	const error = useRouteError();
+	let t0;
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx("h1", {
+			className: "text-2xl font-bold mb-4",
+			children: "Error"
+		});
+		t1 = /* @__PURE__ */ jsx("p", { children: "Something went wrong." });
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	let t2;
+	if ($[3] !== error) {
+		t2 = 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)
+		})] });
+		$[3] = error;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== error) {
+		t3 = error instanceof Error && /* @__PURE__ */ jsx("p", {
+			className: "text-red-300",
+			children: error.message
+		});
+		$[5] = error;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t2 || $[8] !== t3) {
+		t4 = /* @__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: [
+					t0,
+					t1,
+					t2,
+					t3
+				]
+			})
+		});
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
+};
+//#endregion
+//#region src/utils/hooks.ts
+function useDebouncedValue(value) {
+	const $ = c(6);
+	if ($[0] !== "cafc571037d3460a1577637e6ed6134f48e275412c9fbdd1e3259d6b7886985f") {
+		for (let $i = 0; $i < 6; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "cafc571037d3460a1577637e6ed6134f48e275412c9fbdd1e3259d6b7886985f";
+	}
+	const [result, setResult] = useState(value);
+	const timer = useRef(void 0);
+	let t0;
+	if ($[1] !== value) {
+		t0 = () => {
+			clearTimeout(timer.current);
+			timer.current = window.setTimeout(() => {
+				setResult(value);
+			}, 700);
+			return () => {
+				window.clearTimeout(timer.current);
+			};
+		};
+		$[1] = value;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== result || $[4] !== value) {
+		t1 = [result, value];
+		$[3] = result;
+		$[4] = value;
+		$[5] = t1;
+	} else t1 = $[5];
+	useEffect(t0, t1);
+	return result;
+}
+//#endregion
+//#region src/components/Loading.tsx
+const Loading = () => {
+	const $ = c(2);
+	if ($[0] !== "9ba59b6b2e9bf36d0d2119a54dc7f29c23de32230207b1503967b02ba51f79d2") {
+		for (let $i = 0; $i < 2; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "9ba59b6b2e9bf36d0d2119a54dc7f29c23de32230207b1503967b02ba51f79d2";
+	}
+	const { isGlobalLoading } = useLoader();
+	if (!useDebouncedValue(isGlobalLoading)) return;
+	let t0;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__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" })
+			]
+		});
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+//#endregion
+//#region src/components/ProgressLayout.tsx
+nProgress.configure({
+	showSpinner: false,
+	speed: 500,
+	minimum: .1,
+	easing: "ease",
+	trickleSpeed: 200
+});
+const ProgressLayout = () => {
+	const $ = c(5);
+	if ($[0] !== "de22e6cf6e3aceb20c6d7925d182a0e90b0719d98cf1e99dbf79a6686dd7cae1") {
+		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "de22e6cf6e3aceb20c6d7925d182a0e90b0719d98cf1e99dbf79a6686dd7cae1";
+	}
+	const { state } = useNavigation();
+	let t0;
+	let t1;
+	if ($[1] !== state) {
+		t0 = () => {
+			if (state === "loading") nProgress.start();
+			else nProgress.done();
+		};
+		t1 = [state];
+		$[1] = state;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	useEffect(t0, t1);
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Outlet, {}), /* @__PURE__ */ jsx(Loading, {})] });
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+};
+//#endregion
+//#region src/models/system.ts
+let _initProto, _init_router, _init_extra_router;
+function _applyDecs(e, t, n, r, o, i) {
+	var a, c, u, s, f, l, p, d = Symbol.metadata || Symbol.for("Symbol.metadata"), m = Object.defineProperty, h = Object.create, y = [h(null), h(null)], v = t.length;
+	function g(t, n, r) {
+		return function(o, i) {
+			n && (i = o, o = e);
+			for (var a = 0; a < t.length; a++) i = t[a].apply(o, r ? [i] : []);
+			return r ? i : o;
+		};
+	}
+	function b(e, t, n, r) {
+		if ("function" != typeof e && (r || void 0 !== e)) throw new TypeError(t + " must " + (n || "be") + " a function" + (r ? "" : " or undefined"));
+		return e;
+	}
+	function applyDec(e, t, n, r, o, i, u, s, f, l, p) {
+		function d(e) {
+			if (!p(e)) throw new TypeError("Attempted to access private element on non-instance");
+		}
+		var h = [].concat(t[0]), v = t[3], w = !u, D = 1 === o, S = 3 === o, j = 4 === o, E = 2 === o;
+		function I(t, n, r) {
+			return function(o, i) {
+				return n && (i = o, o = e), r && r(o), P[t].call(o, i);
+			};
+		}
+		if (!w) {
+			var P = {}, k = [], F = S ? "get" : j || D ? "set" : "value";
+			if (f ? (l || D ? P = {
+				get: _setFunctionName(function() {
+					return v(this);
+				}, r, "get"),
+				set: function(e) {
+					t[4](this, e);
+				}
+			} : P[F] = v, l || _setFunctionName(P[F], r, E ? "" : F)) : l || (P = Object.getOwnPropertyDescriptor(e, r)), !l && !f) {
+				if ((c = y[+s][r]) && 7 !== (c ^ o)) throw Error("Decorating two elements with the same name (" + P[F].name + ") is not supported yet");
+				y[+s][r] = o < 3 ? 1 : o;
+			}
+		}
+		for (var N = e, O = h.length - 1; O >= 0; O -= n ? 2 : 1) {
+			var T = b(h[O], "A decorator", "be", !0), z = n ? h[O - 1] : void 0, A = {}, H = {
+				kind: [
+					"field",
+					"accessor",
+					"method",
+					"getter",
+					"setter",
+					"class"
+				][o],
+				name: r,
+				metadata: a,
+				addInitializer: function(e, t) {
+					if (e.v) throw new TypeError("attempted to call addInitializer after decoration was finished");
+					b(t, "An initializer", "be", !0), i.push(t);
+				}.bind(null, A)
+			};
+			if (w) c = T.call(z, N, H), A.v = 1, b(c, "class decorators", "return") && (N = c);
+			else if (H.static = s, H.private = f, c = H.access = { has: f ? p.bind() : function(e) {
+				return r in e;
+			} }, j || (c.get = f ? E ? function(e) {
+				return d(e), P.value;
+			} : I("get", 0, d) : function(e) {
+				return e[r];
+			}), E || S || (c.set = f ? I("set", 0, d) : function(e, t) {
+				e[r] = t;
+			}), N = T.call(z, D ? {
+				get: P.get,
+				set: P.set
+			} : P[F], H), A.v = 1, D) {
+				if ("object" == typeof N && N) (c = b(N.get, "accessor.get")) && (P.get = c), (c = b(N.set, "accessor.set")) && (P.set = c), (c = b(N.init, "accessor.init")) && k.unshift(c);
+				else if (void 0 !== N) throw new TypeError("accessor decorators must return an object with get, set, or init properties or undefined");
+			} else b(N, (l ? "field" : "method") + " decorators", "return") && (l ? k.unshift(N) : P[F] = N);
+		}
+		return o < 2 && u.push(g(k, s, 1), g(i, s, 0)), l || w || (f ? D ? u.splice(-1, 0, I("get", s), I("set", s)) : u.push(E ? P[F] : b.call.bind(P[F])) : m(e, r, P)), N;
+	}
+	function w(e) {
+		return m(e, d, {
+			configurable: !0,
+			enumerable: !0,
+			value: a
+		});
+	}
+	return void 0 !== i && (a = i[d]), a = h(null == a ? null : a), f = [], l = function(e) {
+		e && f.push(g(e));
+	}, p = function(t, r) {
+		for (var i = 0; i < n.length; i++) {
+			var a = n[i], c = a[1], l = 7 & c;
+			if ((8 & c) == t && !l == r) {
+				var p = a[2], d = !!a[3], m = 16 & c;
+				applyDec(t ? e : e.prototype, a, m, d ? "#" + p : _toPropertyKey(p), l, l < 2 ? [] : t ? s = s || [] : u = u || [], f, !!t, d, r, t && d ? function(t) {
+					return _checkInRHS(t) === e;
+				} : o);
+			}
+		}
+	}, p(8, 0), p(0, 0), p(8, 1), p(0, 1), l(u), l(s), c = f, v || w(e), {
+		e: c,
+		get c() {
+			var n = [];
+			return v && [w(e = applyDec(e, [t], r, e.name, 5, n)), g(n, 1)];
+		}
+	};
+}
+function _toPropertyKey(t) {
+	var i = _toPrimitive(t, "string");
+	return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive(t, r) {
+	if ("object" != typeof t || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != typeof i) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+function _setFunctionName(e, t, n) {
+	"symbol" == typeof t && (t = (t = t.description) ? "[" + t + "]" : "");
+	try {
+		Object.defineProperty(e, "name", {
+			configurable: !0,
+			value: n ? n + " " + t : t
+		});
+	} catch (e) {}
+	return e;
+}
+function _checkInRHS(e) {
+	if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (null !== e ? typeof e : "null"));
+	return e;
+}
+const system = provide(class System {
+	static {
+		[_init_router, _init_extra_router, _initProto] = _applyDecs(this, [], [[
+			inject(PermissionSchema),
+			0,
+			"router"
+		], [
+			[
+				loader,
+				loader.once,
+				void 0,
+				loader.load(true)
+			],
+			18,
+			"init"
+		]]).e;
+	}
+	constructor() {
+		_init_extra_router(this);
+	}
+	router = (_initProto(this), _init_router(this));
+	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 };