@_tc/template-core 0.2.11 → 0.3.0

package/fe/ssr/apps/dash/dash.entry.js

@@ -0,0 +1,162 @@
+import "../../../frontend/src/main.css";
+/* empty css                         */
+import { registerFrontendI18nResources } from "../../../frontend/src/common/language.js";
+import { ModeStoreProvider } from "../../../frontend/src/stores/mode.js";
+import { QK, leftSidebarBasePath } from "../../../frontend/src/common/menu.js";
+import Dashboard from "../../../frontend/apps/dash/Dashboard.js";
+import { renderImportComponent } from "../../../frontend/src/common/importComponent.js";
+import { registerFrontendSchemaFormComponents } from "../../../frontend/src/common/schemaForm.js";
+import { initThemeMode } from "../../../frontend/src/common/theme.js";
+import { getRouterBasename } from "../../../frontend/src/components/Router/basename.js";
+import { clearHydrationData, peekHydrationData } from "../../../packages/common/ssr/hydration.js";
+import { useEffect, useMemo } from "react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { jsx } from "react/jsx-runtime";
+import { hydrateRoot } from "react-dom/client";
+import extendDashRoutes from "@tc/scalability/dash/customRoutes";
+import initDash from "@tc/scalability/dash/init";
+import { StaticRouter } from "react-router-dom/server";
+//#region ssr/apps/dash/dash.entry.tsx
+registerFrontendSchemaFormComponents();
+var normalizeBasePath = (basePath) => getRouterBasename("browser", basePath);
+var getRequestBasePath = (context) => {
+	const page = context.params.page;
+	if (page) {
+		const marker = `/${page}`;
+		const markerIndex = context.path.indexOf(marker);
+		if (markerIndex >= 0) return context.path.slice(0, markerIndex + marker.length) || "/";
+	}
+	const rest = context.params.rest;
+	if (!rest) return context.path;
+	const suffix = `/${rest}`;
+	if (!context.path.endsWith(suffix)) return context.path;
+	return context.path.slice(0, -suffix.length) || "/";
+};
+var getQueryString = (value) => {
+	if (Array.isArray(value)) return String(value[0] ?? "");
+	if (typeof value === "string") return value;
+	return "";
+};
+var getServerProjectInfo = (context) => {
+	const projectKey = getQueryString(context.query.projk);
+	if (!projectKey) return null;
+	return context.app.service.project.getProject(projectKey);
+};
+var createBaseRoutes = (projectInfo) => [{
+	path: "/",
+	component: /* @__PURE__ */ jsx(Dashboard, { projectInfo }),
+	children: [{
+		path: `/:${QK.k}`,
+		component: renderImportComponent(import("../../../frontend/src/defaultPages/SlotPage/index.js"))
+	}, {
+		path: "/ui-components",
+		component: renderImportComponent(import("../../../frontend/apps/ui-components/index.js"))
+	}]
+}];
+var createSidebarRoutes = () => [{
+	path: `/:${QK.k}/*`,
+	component: renderImportComponent(import("../../../frontend/src/defaultPages/SidebarSlotPage/index.js")),
+	children: [{
+		path: `:${QK.sk}`,
+		component: renderImportComponent(import("../../../frontend/src/defaultPages/SlotPage/index.js"))
+	}]
+}, {
+	path: `/${leftSidebarBasePath}/*`,
+	component: renderImportComponent(import("../../../frontend/src/defaultPages/SidebarSlotPageTmp.js")),
+	children: [{
+		path: `:${QK.sk}`,
+		component: renderImportComponent(import("../../../frontend/src/defaultPages/SlotPage/index.js"))
+	}]
+}];
+var getDefaultPageRoutes = (projectInfo) => {
+	const baseRoutes = createBaseRoutes(projectInfo);
+	const sidebarRoutes = createSidebarRoutes();
+	if (typeof extendDashRoutes === "function") {
+		const ctx = {
+			topRoutes: [],
+			sidebarRoutes: []
+		};
+		extendDashRoutes(ctx);
+		const { topRoutes: customTopRoutes, sidebarRoutes: customSidebarRoutes } = ctx;
+		baseRoutes[0]?.children?.push(...customTopRoutes);
+		sidebarRoutes.forEach((sr) => {
+			sr.children?.push(...customSidebarRoutes);
+		});
+	}
+	baseRoutes[0]?.children?.push(...sidebarRoutes);
+	return baseRoutes;
+};
+var renderRouteElements = (routes) => routes.map((route) => /* @__PURE__ */ jsx(Route, {
+	path: route.path,
+	element: route.component,
+	children: route.children ? renderRouteElements(route.children) : void 0
+}, route.path));
+function DashRoutes({ projectInfo }) {
+	return /* @__PURE__ */ jsx(Routes, { children: renderRouteElements(useMemo(() => getDefaultPageRoutes(projectInfo), [projectInfo])) });
+}
+function DashSSRPage({ path = "/", basePath, projectInfo }) {
+	const basename = normalizeBasePath(basePath);
+	const modeInitialState = {
+		projectInfo: projectInfo ?? null,
+		initData: Boolean(projectInfo)
+	};
+	if (typeof window === "undefined") return /* @__PURE__ */ jsx("div", {
+		className: "dash",
+		children: /* @__PURE__ */ jsx(ModeStoreProvider, {
+			initialState: modeInitialState,
+			children: /* @__PURE__ */ jsx(StaticRouter, {
+				location: path,
+				basename,
+				children: /* @__PURE__ */ jsx(DashRoutes, { projectInfo })
+			})
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "dash",
+		children: /* @__PURE__ */ jsx(ModeStoreProvider, {
+			initialState: modeInitialState,
+			children: /* @__PURE__ */ jsx(BrowserRouter, {
+				basename: normalizeBasePath(window._basePath),
+				children: /* @__PURE__ */ jsx(DashRoutes, { projectInfo })
+			})
+		})
+	});
+}
+function HydrationBoundary({ data, props }) {
+	useEffect(() => {
+		clearHydrationData();
+	}, []);
+	return /* @__PURE__ */ jsx(DashSSRPage, { ...data?.props ?? props });
+}
+async function hydrateDash() {
+	const container = document.getElementById("root");
+	if (!container) {
+		console.error("[SSR] Root element #root not found");
+		return;
+	}
+	const data = peekHydrationData();
+	const props = data?.props ?? {
+		path: window.location.pathname,
+		basePath: window._basePath
+	};
+	await registerFrontendI18nResources();
+	initThemeMode();
+	if (typeof initDash === "function") await initDash({ rootElement: container });
+	hydrateRoot(container, /* @__PURE__ */ jsx(HydrationBoundary, {
+		data,
+		props
+	}));
+}
+async function getServerProps(context) {
+	await registerFrontendI18nResources();
+	return {
+		path: context.path,
+		basePath: getRequestBasePath(context),
+		projectInfo: getServerProjectInfo(context)
+	};
+}
+var pageTitle = "Dash";
+var pageDescription = "Server-rendered Dash page.";
+if (typeof window !== "undefined") hydrateDash();
+//#endregion
+export { DashSSRPage as default, getServerProps, pageDescription, pageTitle };

package/fe/ssr/apps/demo/demo.entry.d.ts

@@ -0,0 +1,13 @@
+import type { SSRPropsContext } from "../../types";
+export interface DemoProps {
+    title?: string;
+    content?: string;
+    serverTime?: string;
+}
+export declare function App({ title, content, serverTime }: DemoProps): import("react/jsx-runtime").JSX.Element;
+export declare function getServerProps(context: SSRPropsContext): Promise<{
+    title: string;
+    content: string;
+    serverTime: string;
+}>;
+export default App;

package/fe/ssr/apps/demo/demo.entry.js

@@ -0,0 +1,38 @@
+import { createSSREntry } from "../../createSSREntry.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ssr/apps/demo/demo.entry.tsx
+/**
+* SSR Demo 页面入口
+* 验证 hydration 注水协议全链路
+*/
+/**
+* 渲染 SSR hydration 协议演示页面。
+*/
+function App({ title = "SSR Demo", content = "This page is server-side rendered.", serverTime }) {
+	const [count, setCount] = useState(0);
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsx("h1", { children: title }),
+		/* @__PURE__ */ jsx("p", { children: content }),
+		serverTime && /* @__PURE__ */ jsxs("p", { children: ["Server rendered at: ", /* @__PURE__ */ jsx("time", { children: serverTime })] }),
+		/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => setCount((value) => value + 1),
+			children: ["Hydration count: ", count]
+		})
+	] });
+}
+/**
+* 服务端数据获取
+* SSR controller 会调用此函数获取初始 props
+*/
+async function getServerProps(context) {
+	return {
+		title: "SSR Demo Page",
+		content: "This content was rendered on the server.",
+		serverTime: (/* @__PURE__ */ new Date()).toISOString()
+	};
+}
+createSSREntry(App);
+//#endregion
+export { App, App as default, getServerProps };

package/fe/ssr/apps/server-data/server-data.entry.d.ts

@@ -0,0 +1,26 @@
+import type { SSRPropsContext } from "../../types";
+interface ActivityItem {
+    id: string;
+    label: string;
+    status: 'ready' | 'running' | 'queued';
+    owner: string;
+}
+interface MetricItem {
+    label: string;
+    value: string;
+}
+export interface ServerDataProps extends Record<string, unknown> {
+    title: string;
+    requestId: string;
+    path: string;
+    filter: string;
+    fetchedAt: string;
+    latencyMs: number;
+    metrics: MetricItem[];
+    activities: ActivityItem[];
+}
+declare function ServerDataPage({ title, requestId, path, filter, fetchedAt, latencyMs, metrics, activities, }: ServerDataProps): import("react/jsx-runtime").JSX.Element;
+export declare function getServerProps(context: SSRPropsContext): Promise<ServerDataProps>;
+export declare const pageTitle = "Server Data SSR";
+export declare const pageDescription = "SSR demo that fetches data on the server before hydration.";
+export default ServerDataPage;

package/fe/ssr/apps/server-data/server-data.entry.js

@@ -0,0 +1,275 @@
+import { createSSREntry } from "../../createSSREntry.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ssr/apps/server-data/server-data.entry.tsx
+/**
+* SSR server-data demo
+* Shows async getServerProps data flowing into first paint and hydration.
+*/
+var shellStyle = {
+	maxWidth: 920,
+	margin: "0 auto",
+	padding: "32px 24px",
+	fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
+	color: "oklch(24% 0.025 245)",
+	background: "oklch(98% 0.006 245)",
+	minHeight: "100vh"
+};
+var panelStyle = {
+	border: "1px solid oklch(88% 0.018 245)",
+	borderRadius: 8,
+	background: "oklch(99% 0.004 245)",
+	padding: 20
+};
+/**
+* 从 query 值中读取字符串，并提供默认值。
+*/
+var getQueryString = (value, fallback) => {
+	if (Array.isArray(value)) return String(value[0] ?? fallback);
+	if (typeof value === "string" && value.trim()) return value;
+	return fallback;
+};
+/**
+* 模拟异步服务端数据请求延迟。
+*/
+var wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+/**
+* 渲染服务端数据 SSR 示例页面。
+*/
+function ServerDataPage({ title, requestId, path, filter, fetchedAt, latencyMs, metrics, activities }) {
+	const [ackCount, setAckCount] = useState(0);
+	return /* @__PURE__ */ jsx("main", {
+		style: shellStyle,
+		children: /* @__PURE__ */ jsxs("section", {
+			style: {
+				display: "grid",
+				gap: 18
+			},
+			children: [
+				/* @__PURE__ */ jsxs("div", { children: [
+					/* @__PURE__ */ jsx("p", {
+						style: {
+							margin: "0 0 8px",
+							fontSize: 13,
+							color: "oklch(48% 0.035 245)"
+						},
+						children: "getServerProps demo"
+					}),
+					/* @__PURE__ */ jsx("h1", {
+						style: {
+							margin: 0,
+							fontSize: 34,
+							lineHeight: 1.15
+						},
+						children: title
+					}),
+					/* @__PURE__ */ jsxs("p", {
+						style: {
+							maxWidth: 680,
+							margin: "12px 0 0",
+							lineHeight: 1.65
+						},
+						children: [
+							"This page waits for server data before render, injects it into",
+							/* @__PURE__ */ jsx("code", { children: " window.__SSR_DATA__" }),
+							", then hydrates with the same props."
+						]
+					})
+				] }),
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						display: "grid",
+						gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
+						gap: 12
+					},
+					children: metrics.map((metric) => /* @__PURE__ */ jsxs("div", {
+						style: panelStyle,
+						children: [/* @__PURE__ */ jsx("div", {
+							style: {
+								fontSize: 13,
+								color: "oklch(48% 0.035 245)"
+							},
+							children: metric.label
+						}), /* @__PURE__ */ jsx("div", {
+							style: {
+								marginTop: 6,
+								fontSize: 24,
+								fontWeight: 700
+							},
+							children: metric.value
+						})]
+					}, metric.label))
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					style: panelStyle,
+					children: [/* @__PURE__ */ jsx("h2", {
+						style: {
+							margin: "0 0 14px",
+							fontSize: 18
+						},
+						children: "Server payload"
+					}), /* @__PURE__ */ jsxs("dl", {
+						style: {
+							display: "grid",
+							gridTemplateColumns: "140px 1fr",
+							gap: "10px 14px",
+							margin: 0
+						},
+						children: [
+							/* @__PURE__ */ jsx("dt", {
+								style: { color: "oklch(48% 0.035 245)" },
+								children: "Request ID"
+							}),
+							/* @__PURE__ */ jsx("dd", {
+								style: { margin: 0 },
+								children: requestId
+							}),
+							/* @__PURE__ */ jsx("dt", {
+								style: { color: "oklch(48% 0.035 245)" },
+								children: "Path"
+							}),
+							/* @__PURE__ */ jsx("dd", {
+								style: { margin: 0 },
+								children: path
+							}),
+							/* @__PURE__ */ jsx("dt", {
+								style: { color: "oklch(48% 0.035 245)" },
+								children: "Filter"
+							}),
+							/* @__PURE__ */ jsx("dd", {
+								style: { margin: 0 },
+								children: filter
+							}),
+							/* @__PURE__ */ jsx("dt", {
+								style: { color: "oklch(48% 0.035 245)" },
+								children: "Fetched at"
+							}),
+							/* @__PURE__ */ jsx("dd", {
+								style: { margin: 0 },
+								children: /* @__PURE__ */ jsx("time", { children: fetchedAt })
+							}),
+							/* @__PURE__ */ jsx("dt", {
+								style: { color: "oklch(48% 0.035 245)" },
+								children: "Latency"
+							}),
+							/* @__PURE__ */ jsxs("dd", {
+								style: { margin: 0 },
+								children: [latencyMs, "ms"]
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					style: panelStyle,
+					children: [/* @__PURE__ */ jsx("h2", {
+						style: {
+							margin: "0 0 14px",
+							fontSize: 18
+						},
+						children: "Activities"
+					}), /* @__PURE__ */ jsx("div", {
+						style: {
+							display: "grid",
+							gap: 10
+						},
+						children: activities.map((item) => /* @__PURE__ */ jsxs("article", {
+							style: {
+								display: "grid",
+								gridTemplateColumns: "1fr auto",
+								gap: 10,
+								alignItems: "center",
+								borderTop: "1px solid oklch(91% 0.014 245)",
+								paddingTop: 10
+							},
+							children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: item.label }), /* @__PURE__ */ jsx("div", {
+								style: {
+									marginTop: 4,
+									fontSize: 13,
+									color: "oklch(48% 0.035 245)"
+								},
+								children: item.owner
+							})] }), /* @__PURE__ */ jsx("span", {
+								style: {
+									fontSize: 13,
+									fontWeight: 700
+								},
+								children: item.status
+							})]
+						}, item.id))
+					})]
+				}),
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => setAckCount((value) => value + 1),
+					style: {
+						width: "fit-content",
+						border: "1px solid oklch(37% 0.07 245)",
+						borderRadius: 8,
+						background: "oklch(32% 0.065 245)",
+						color: "oklch(98% 0.006 245)",
+						padding: "10px 14px",
+						fontWeight: 700,
+						cursor: "pointer"
+					},
+					children: ["Hydrated acknowledgements: ", ackCount]
+				})
+			]
+		})
+	});
+}
+/**
+* 生成服务端数据示例的首屏 props。
+*/
+async function getServerProps(context) {
+	const startedAt = Date.now();
+	const filter = getQueryString(context.query.filter, "all");
+	await wait(30);
+	const activities = [
+		{
+			id: "build",
+			label: "SSR bundle compiled",
+			status: "ready",
+			owner: "bundler/buildSSR"
+		},
+		{
+			id: "props",
+			label: "Server props resolved",
+			status: "ready",
+			owner: "getServerProps"
+		},
+		{
+			id: "hydrate",
+			label: "Client hydration prepared",
+			status: "queued",
+			owner: "createSSREntry"
+		}
+	];
+	return {
+		title: "Server Data SSR Demo",
+		requestId: `ssr-${startedAt.toString(36)}`,
+		path: context.path,
+		filter,
+		fetchedAt: (/* @__PURE__ */ new Date()).toISOString(),
+		latencyMs: Date.now() - startedAt,
+		metrics: [
+			{
+				label: "Source",
+				value: "server"
+			},
+			{
+				label: "Rows",
+				value: String(activities.length)
+			},
+			{
+				label: "Filter",
+				value: filter
+			}
+		],
+		activities
+	};
+}
+var pageTitle = "Server Data SSR";
+var pageDescription = "SSR demo that fetches data on the server before hydration.";
+createSSREntry(ServerDataPage);
+//#endregion
+export { ServerDataPage as default, getServerProps, pageDescription, pageTitle };

package/fe/ssr/apps/ui-components/ui-components.entry.d.ts

@@ -0,0 +1,5 @@
+import "../../../frontend/src/main";
+declare function UIComponentsSSRPage(): import("react/jsx-runtime").JSX.Element;
+export declare const pageTitle = "UI Components";
+export declare const pageDescription = "Server-rendered UI components preview.";
+export default UIComponentsSSRPage;

package/fe/ssr/apps/ui-components/ui-components.entry.js

@@ -0,0 +1,17 @@
+import "../../../frontend/src/main.css";
+/* empty css                         */
+import { createSSREntry } from "../../createSSREntry.js";
+import TestPage from "../../../packages/react/ui/components/testPage/index.js";
+import { jsx } from "react/jsx-runtime";
+//#region ssr/apps/ui-components/ui-components.entry.tsx
+/**
+* 渲染 UI 组件预览的 SSR 页面。
+*/
+function UIComponentsSSRPage() {
+	return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(TestPage, {}) });
+}
+var pageTitle = "UI Components";
+var pageDescription = "Server-rendered UI components preview.";
+createSSREntry(UIComponentsSSRPage);
+//#endregion
+export { UIComponentsSSRPage as default, pageDescription, pageTitle };

package/fe/ssr/components/StreamingRender/StreamingCache.d.ts

@@ -0,0 +1,2 @@
+import { StateParams } from "./type";
+export declare const promiseCache: <T>(params: StateParams<T>) => Promise<T>;

package/fe/ssr/components/StreamingRender/StreamingCache.js

@@ -0,0 +1,31 @@
+//#region ssr/components/StreamingRender/StreamingCache.ts
+var cacheMap = /* @__PURE__ */ new Map();
+var STREAM_CACHE_TTL_MS = 3e4;
+/**
+* promise 响应30s后清除缓存
+*/
+var promiseCacheCleanup = (params) => {
+	const { keyName, promise } = params;
+	const onSettled = () => {
+		setTimeout(() => {
+			if (cacheMap.get(keyName)?.promise === promise) cacheMap.delete(keyName);
+		}, STREAM_CACHE_TTL_MS);
+	};
+	promise.then(onSettled, onSettled);
+};
+var promiseCache = (params) => {
+	const { keyName, getData } = params;
+	let result = cacheMap.get(keyName);
+	if (!result) {
+		const _v = { promise: Promise.resolve().then(getData) };
+		cacheMap.set(keyName, _v);
+		result = _v;
+		promiseCacheCleanup({
+			keyName,
+			promise: _v.promise
+		});
+	}
+	return result.promise;
+};
+//#endregion
+export { promiseCache };

package/fe/ssr/components/StreamingRender/StreamingRender.d.ts

@@ -0,0 +1,3 @@
+import { StreamingRenderProps } from "./type";
+declare const StreamingRender: <T>(props: StreamingRenderProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default StreamingRender;

package/fe/ssr/components/StreamingRender/StreamingRender.js

@@ -0,0 +1,48 @@
+import { promiseCache } from "./StreamingCache.js";
+import { useSuspensePromise } from "../../hooks/useSuspensePromise.js";
+import { StreamingRenderGetDataScript, readClientStreamData } from "./StreamingScript.js";
+import { Suspense } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region ssr/components/StreamingRender/StreamingRender.tsx
+/**
+* 双端运行的 hook
+* server 端 调用
+*/
+var useStreamData = (params) => {
+	const clientData = readClientStreamData(params.keyName);
+	if (clientData?.found) return clientData.data;
+	return useSuspensePromise(promiseCache(params));
+};
+var RenderCom = (props) => {
+	const { keyName, getData, name, children } = props;
+	const KN = `${keyName}+${name ?? ""}`;
+	const data = useStreamData({
+		keyName: KN,
+		getData
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [children(data), /* @__PURE__ */ jsx(StreamingRenderGetDataScript, {
+		keyName: KN,
+		data
+	})] });
+};
+/**
+* 组件级流式异步数据渲染组件。
+*
+* - 服务端通过 Suspense 等待 getData()，并把结果注入到 HTML script 中。
+* - 客户端 hydration 优先读取服务端注入数据，读取失败时才会走 getData() fallback。
+* - keyName 需要同请求内稳定；多请求数据可能不同时，应拼入非敏感的请求维度。
+* - getData() 返回值会进入 HTML，不能包含 token、密钥、未脱敏个人信息等敏感数据。
+*/
+var StreamingRender = (props) => {
+	const { fallback, name, ...ext } = props;
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback,
+		name,
+		children: /* @__PURE__ */ jsx(RenderCom, {
+			...ext,
+			name
+		})
+	});
+};
+//#endregion
+export { StreamingRender as default };

package/fe/ssr/components/StreamingRender/StreamingScript.d.ts

@@ -0,0 +1,8 @@
+import { StateParams } from "./type";
+export declare const StreamingRenderGetDataScript: <T>(props: Pick<StateParams<T>, "keyName"> & {
+    data: T;
+}) => false | import("react/jsx-runtime").JSX.Element;
+export declare const readClientStreamData: <T>(key: Pick<StateParams<T>, "keyName">["keyName"]) => {
+    found: boolean;
+    data: T | null;
+};