@thestarweb/star-framework-app-web 0.1.0

package/src/view/render/render.ts

@@ -0,0 +1,225 @@
+import {
+	forkDataContextRecord,
+	RenderDataContext,
+	SFDataContext,
+	SystemRenderDataContext,
+	UserRenderDataContext,
+} from "../data-context/index.js";
+import { parseHtmlToVDom } from "../html/parse-html-to-v-dom.js";
+import { findRouteDom } from "../utils/index.js";
+
+export interface RenderInstance {
+	unMount?(): void;
+	updateProp?(newProp: any): void;
+	updateChild?(newContext: RenderContext): void;
+}
+export class WarpRenderInstance {
+	constructor(
+		public readonly conetxt: RenderContext,
+		public readonly dom: HTMLElement,
+		public readonly rawInstance: RenderInstance,
+		public readonly dataContext: RenderDataContext,
+	) {
+		this.conetxt._instances.push(this);
+	}
+	unMount() {
+		if (this.rawInstance.unMount) {
+			this.rawInstance.unMount();
+		} else {
+			this.dom.innerHTML = "";
+		}
+		Object.values(this.dataContext).forEach((o) => {
+			Object.values<any>(o).forEach(
+				(c) => c instanceof SFDataContext && c.distory(),
+			);
+		});
+		this.conetxt._instances = this.conetxt._instances.filter((i) => i !== this);
+	}
+}
+
+export interface IRender {
+	fetchResource?(): Promise<void> | void;
+	renderToString?(
+		dataContext: RenderDataContext,
+		prop: any,
+		chrild: RenderContext,
+	): string | Promise<string>;
+	mount?(
+		dom: HTMLElement,
+		dataContext: RenderDataContext,
+		prop: any,
+		chrild: RenderContext,
+	): RenderInstance;
+	hydrate?(
+		dom: HTMLElement,
+		dataContext: RenderDataContext,
+		prop: any,
+		chrild: RenderContext,
+	): RenderInstance;
+}
+export class RenderContext {
+	private constructor(
+		private _systemDataContext: SystemRenderDataContext,
+		private _render: IRender,
+		private _prop: any,
+		// 结尾始终要跟一个空的RenderContext
+		// 原因：比如一个layout命中了 但是下面的页面没有命中，但是layout切换页面时，layout本身不应该重新渲染，所以需要一开始给它一个占位的空姐点，然后更新这个空节点
+		private _child?: RenderContext,
+	) {}
+	public static createNoop(systemDataContext: SystemRenderDataContext) {
+		return new RenderContext(systemDataContext, {}, {});
+	}
+	public static create(
+		systemDataContext: SystemRenderDataContext,
+		render: IRender,
+		prop: any,
+		child: RenderContext = this.createNoop(systemDataContext),
+	) {
+		return new RenderContext(systemDataContext, render, prop, child);
+	}
+	get render() {
+		return this._render;
+	}
+	get prop() {
+		return this._prop;
+	}
+	get child() {
+		return this._child;
+	}
+	async warpRenderToString(dataContext: UserRenderDataContext) {
+		if (this._child) {
+			return (
+				(await this.render.renderToString?.(
+					{
+						system: forkDataContextRecord(this._systemDataContext),
+						user: forkDataContextRecord(dataContext),
+					},
+					this.prop,
+					this._child,
+				)) || ""
+			);
+		}
+		return "";
+	}
+	/**
+	 * @internal
+	 */
+	_instances: WarpRenderInstance[] = [];
+	mount(dom: HTMLElement, dataContext: UserRenderDataContext) {
+		let instance: RenderInstance = {};
+		const fullDataContext = {
+			system: forkDataContextRecord(this._systemDataContext),
+			user: forkDataContextRecord(dataContext),
+		};
+		if (this._child) {
+			if (this.render.mount) {
+				instance = this.render.mount(
+					dom,
+					fullDataContext,
+					this.prop,
+					this._child,
+				);
+			} else if (this.render.renderToString) {
+				Promise.resolve(
+					this.render.renderToString(fullDataContext, this.prop, this._child),
+				).then((html) => (dom.innerHTML = html));
+			}
+		}
+		return new WarpRenderInstance(this, dom, instance, fullDataContext);
+	}
+	hydrate(dom: HTMLElement, dataContext: UserRenderDataContext) {
+		let instance: RenderInstance = {};
+		const fullDataContext = {
+			system: forkDataContextRecord(this._systemDataContext),
+			user: forkDataContextRecord(dataContext),
+		};
+		if (this._child) {
+			if (this.render.hydrate) {
+				instance = this.render.hydrate(
+					dom,
+					fullDataContext,
+					this.prop,
+					this._child,
+				);
+			} else if (this.render.renderToString) {
+				// const vDom = parseHtmlToVDom(
+				// 	this.render.renderToString(this.prop, this._child),
+				// );
+				const routeDoms = findRouteDom(dom);
+				routeDoms.forEach((r) => this.child!.hydrate(r, dataContext));
+			} else if (this.render.mount) {
+				instance = this.render.mount(
+					dom,
+					fullDataContext,
+					this.prop,
+					this._child,
+				);
+			}
+		}
+		return new WarpRenderInstance(this, dom, instance, fullDataContext);
+	}
+	unmountAll() {
+		this._instances.forEach((i) => i.unMount());
+	}
+	async updateTree(node: RenderContext, allowRender = true) {
+		let shoudldRerender = false;
+		const unRerenderTask: (() => any)[] = [];
+		if (this._render !== node._render) {
+			this._render = node._render;
+			if (allowRender) {
+				shoudldRerender = true;
+			}
+		}
+		if (this._prop !== node._prop) {
+			this._prop = node._prop;
+			if (allowRender) {
+				if (this._instances.every((i) => i.rawInstance.updateProp)) {
+					unRerenderTask.push(() => {
+						this._instances.forEach((i) => {
+							i.rawInstance.updateProp!(node._prop);
+						});
+					});
+				} else {
+					shoudldRerender = true;
+				}
+			}
+		}
+		let childUpdated = false;
+		let shoudUpdateSubtree = false;
+		if (this._child !== node._child) {
+			if (!this._child || !node._child) {
+				this._child = node._child;
+			} else {
+				shoudUpdateSubtree = true;
+			}
+			if (this._instances.every((i) => i.rawInstance.updateChild)) {
+				childUpdated = true;
+				unRerenderTask.push(() => {
+					this._instances.forEach((i) => {
+						if (i.rawInstance.updateChild) {
+							i.rawInstance.updateChild(node._child!);
+						}
+					});
+				});
+			}
+		}
+		let isRerender = allowRender && shoudldRerender;
+
+		if (shoudUpdateSubtree) {
+			await this._child?.updateTree(
+				node._child!,
+				allowRender && !childUpdated && !isRerender,
+			);
+		}
+		if (isRerender) {
+			await Promise.all(
+				this._instances.map(async (i) => {
+					i.unMount();
+					await this.mount(i.dom, i.dataContext.user);
+				}),
+			);
+		} else {
+			await Promise.all(unRerenderTask.map((i) => i()));
+		}
+	}
+}

package/src/view/render/sf-v-dom-render.ts

@@ -0,0 +1,34 @@
+import { RenderDataContext } from "../data-context/index.js";
+import { renderVDomToString } from "../html/render-v-dom-to-string.js";
+import { HTMLVNode } from "../html/types.js";
+import { IRender, RenderContext } from "./render.js";
+
+export class SFVDomRender implements IRender {
+	constructor(
+		private readonly domFn:
+			| HTMLVNode
+			| HTMLVNode[]
+			| (() => Promise<
+					HTMLVNode | HTMLVNode[] | { default: HTMLVNode | HTMLVNode[] }
+			  >),
+	) {}
+	private dom: HTMLVNode | HTMLVNode[] = [];
+	async fetchResource() {
+		if (typeof this.domFn === "function") {
+			const res = await this.domFn();
+			this.dom =
+				typeof res === "object" && "default" in res ? res.default : res;
+		} else {
+			this.dom = this.domFn;
+		}
+	}
+	renderToString(context: RenderDataContext, prop: any, chrild: RenderContext) {
+		return renderVDomToString(this.dom, {
+			customizeChildrenRender: (el) => {
+				if (el.tagName === "sf-route") {
+					return () => chrild.warpRenderToString(context.user);
+				}
+			},
+		});
+	}
+}

package/src/view/types.ts

@@ -0,0 +1,18 @@
+import { IRender } from "./render/render.js";
+
+export interface ViewMeta {
+	title: string;
+	/**
+	 * html的meta标签，通常用于seo，当前仅再ssr时生效，浏览器页面切换时不修改
+	 */
+	htmlMeta?: Record<string, string>;
+}
+
+export interface ViewInfo<T = any> {
+	render: IRender;
+	meta?: ViewMeta | ((data: T) => ViewMeta);
+}
+
+export interface RenderConfig {
+	baseUrl: string;
+}

package/src/view/utils/find-route-dom.ts

@@ -0,0 +1,19 @@
+import { routeTagName } from "../const.js";
+
+export function findRouteDom(root: HTMLElement = document.body) {
+	const result: HTMLElement[] = [];
+	const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
+		acceptNode(node) {
+			if (
+				node instanceof HTMLElement &&
+				node.tagName.toLocaleLowerCase() === routeTagName.toLocaleLowerCase()
+			) {
+				result.push(node);
+				return NodeFilter.FILTER_REJECT; // 跳过子节点，因为它们是嵌套的
+			}
+			return NodeFilter.FILTER_ACCEPT;
+		},
+	});
+	while (walker.nextNode()) {}
+	return result;
+}

package/src/view/utils/get-render/client.ts

@@ -0,0 +1,76 @@
+import { parseRoute } from "../../../route/index.js";
+import { RenderContext } from "../../render/index.js";
+import { RenderConfig, ViewMeta } from "../../types.js";
+import { findRouteDom } from "../find-route-dom.js";
+import {
+	createRootRenderContext,
+	ssrToBrowserDataKey,
+	updateRootRenderContext,
+} from "./common.js";
+
+function listenerRoute(callback: () => void) {
+	const rawPush = history.pushState;
+	history.pushState = (data, un, url) => {
+		rawPush.call(history, data, un, url);
+		if (url) setTimeout(callback);
+	};
+	window.addEventListener("popstate", () => {
+		setTimeout(callback);
+	});
+}
+
+function handleMeta(meta: ViewMeta) {
+	document.title = meta.title;
+}
+
+export const clientRender = async (routes: ReturnType<typeof parseRoute>) => {
+	const { config, pageData } = (window as any)[ssrToBrowserDataKey];
+	delete (window as any)[ssrToBrowserDataKey];
+	const route = routes("GET", location.pathname);
+	const getData = async () => {
+		const res = await fetch(location.href);
+		if (res.headers.get("content-type")?.includes("json")) {
+			return await res.json();
+		}
+		return undefined;
+	};
+	const context = await createRootRenderContext(config, route, () => pageData);
+	handleMeta(context.meta);
+	listenerRoute(async () => {
+		const route = routes("GET", location.pathname);
+		const c = await updateRootRenderContext(context, route, getData);
+		handleMeta(c.meta);
+	});
+	const addedEl = new WeakSet<HTMLAnchorElement>();
+	function handleAClick(ev: MouseEvent) {
+		const target = ev.target as HTMLAnchorElement;
+		if (target.download || target.target || ev.defaultPrevented) return;
+		const rawHref = target.getAttribute("href");
+		if (!rawHref || rawHref.startsWith("#")) return;
+		const route = routes("GET", target.pathname);
+		if (route.finalRoute) {
+			history.pushState(null, "", target.href.substring(target.origin.length));
+			ev.preventDefault();
+		}
+	}
+	window.addEventListener(
+		"click",
+		(ev) => {
+			if (ev.target instanceof HTMLElement) {
+				let el: HTMLElement | null = ev.target as HTMLElement;
+				while (el && el !== document.body) {
+					if (el instanceof HTMLAnchorElement && !addedEl.has(el)) {
+						addedEl.add(el);
+						el.addEventListener("click", handleAClick, true);
+					}
+					el = el.parentElement;
+				}
+			}
+		},
+		true,
+	);
+	const routesElements = findRouteDom();
+	routesElements.forEach((el) => {
+		context.render.hydrate(el as HTMLElement, {});
+	});
+};

package/src/view/utils/get-render/common.ts

@@ -0,0 +1,113 @@
+import { title } from "node:process";
+import { RouteType } from "../../../route/index.js";
+import {
+	SFRawDataContext,
+	SystemRenderDataContext,
+} from "../../data-context/index.js";
+import { getLayots } from "../../layout.js";
+import { RenderContext } from "../../render/index.js";
+import { RenderConfig, ViewMeta } from "../../types.js";
+import { SFWebRequest } from "../../../request/index.js";
+
+function createRawDataContext(config: RenderConfig, route: RouteType<"GET">) {
+	const routeRawcontext = new SFRawDataContext(route);
+	const { baseUrl } = config;
+	return {
+		update(route: RouteType<"GET">) {
+			routeRawcontext.update(route);
+		},
+		createChild(): SystemRenderDataContext {
+			return {
+				route: routeRawcontext.createChild(),
+				request: new SFWebRequest(baseUrl),
+				baseUrl,
+			};
+		},
+	};
+}
+
+export interface RootRenderContext {
+	render: RenderContext;
+	rawSystemDataContext: ReturnType<typeof createRawDataContext>;
+	meta: ViewMeta;
+}
+
+async function createRenderContext(
+	route: RouteType<"GET">,
+	dataFn: () => any,
+	dataContext: ReturnType<typeof createRawDataContext>,
+): Promise<Pick<RootRenderContext, "render" | "meta">> {
+	if (route.finalRoute?.context?.view) {
+		const { obj, propertyKey } = route.finalRoute;
+		let view = route.finalRoute.context.view;
+		const layouts = route.allRoute.flatMap((r) => getLayots(r.obj));
+		const [data] = await Promise.all([
+			typeof (obj as any)[propertyKey] === "function"
+				? dataFn()
+				: (obj as any)[propertyKey],
+			view.render.fetchResource?.(),
+			...layouts.map((l) => l.render.fetchResource?.()),
+		]);
+		let render = RenderContext.create(
+			dataContext.createChild(),
+			view.render,
+			data,
+		);
+		let meta =
+			typeof view.meta === "function"
+				? view.meta(data)
+				: view.meta || { title: "" };
+		return layouts.reduceRight(
+			({ render, meta }, currentValue) => {
+				return {
+					render: RenderContext.create(
+						dataContext.createChild(),
+						currentValue.render,
+						undefined,
+						render,
+					),
+					meta:
+						typeof currentValue.meta === "function"
+							? currentValue.meta(meta)
+							: currentValue.meta || meta,
+				};
+			},
+			{ render, meta },
+		);
+	} else {
+		return {
+			render: RenderContext.createNoop(dataContext.createChild()),
+			meta: { title: "" },
+		};
+	}
+}
+
+export async function createRootRenderContext(
+	config: RenderConfig,
+	route: RouteType<"GET">,
+	dataFn: () => any,
+): Promise<RootRenderContext> {
+	const rawSystemDataContext = createRawDataContext(config, route);
+	return {
+		...(await createRenderContext(route, dataFn, rawSystemDataContext)),
+		rawSystemDataContext,
+	};
+}
+export async function updateRootRenderContext(
+	rootContext: RootRenderContext,
+	route: RouteType<"GET">,
+	dataFn: () => any,
+) {
+	const newRenderContext = await createRenderContext(
+		route,
+		dataFn,
+		rootContext.rawSystemDataContext,
+	);
+	rootContext.meta = newRenderContext.meta;
+	rootContext.render.updateTree(newRenderContext.render);
+	rootContext.rawSystemDataContext.update(route);
+	return rootContext;
+}
+
+export const routeElementSelector = "sf-route";
+export const ssrToBrowserDataKey = "__SFWebAppInitData";

package/src/view/utils/get-render/index.ts

@@ -0,0 +1,3 @@
+// @side-only server
+export { createServerRender } from "./server.js";
+export { clientRender } from "./client.js";

package/src/view/utils/get-render/server.ts

@@ -0,0 +1,71 @@
+import { ServerRuntimeContext } from "@thestarweb/star-framework-web-runtime-node";
+import { Interceptor } from "../../../interceptor/index.js";
+import { ResponseWithMeta } from "../../../return-types/index.js";
+import { parseHtmlToVDom, renderVDomToString } from "../../html/index.js";
+import {
+	createRootRenderContext,
+	routeElementSelector,
+	ssrToBrowserDataKey,
+} from "./common.js";
+import { RenderConfig } from "../../types.js";
+
+export const createServerRender: (
+	context: ServerRuntimeContext,
+) => Interceptor = (context) => {
+	const htmlVDdom = parseHtmlToVDom(context.indexHtml);
+	return async (prop, next) => {
+		const config: RenderConfig = {
+			baseUrl: "/",
+		};
+		const nextPromise = next(prop);
+		const { accept, "sec-fetch-dest": fetchDest } = prop.header;
+		let pageData: any = undefined;
+		const rootContext =
+			prop.method === "GET" &&
+			(prop.route.finalRoute?.context as any)?.view &&
+			(accept?.includes("text/html") || ["document"].includes(fetchDest))
+				? await createRootRenderContext(config, prop.route, async () => {
+						const ret = await nextPromise;
+						pageData = ret.data;
+						return ret.data;
+					})
+				: undefined;
+		if (rootContext) {
+			const { render, meta } = rootContext;
+			const nextRet = await nextPromise;
+			const res = await render.warpRenderToString({});
+			return new ResponseWithMeta(
+				renderVDomToString(htmlVDdom, {
+					customizeChildrenRender: (dom) => {
+						if (dom.tagName === routeElementSelector) {
+							return () => res;
+						}
+						if (dom.tagName === "head") {
+							return (dom, raw) => {
+								let res = [
+									`<script>window.${ssrToBrowserDataKey}=${JSON.stringify({ config, pageData })}</script>`,
+									raw(),
+								];
+								res.push(`<title>${meta.title}</title>`);
+								if (meta.htmlMeta) {
+									Object.entries(meta.htmlMeta).forEach(([k, v]) =>
+										res.push(`<meta name="${k}" content="${v}">`),
+									);
+								}
+								return res.join("");
+							};
+						}
+					},
+				}),
+				{
+					...nextRet,
+					header: {
+						"content-type": "text/html; charset=utf-8",
+						...nextRet.header,
+					},
+				},
+			);
+		}
+		return nextPromise;
+	};
+};

package/src/view/utils/index.ts

@@ -0,0 +1,2 @@
+export * from "./get-render/index.js";
+export * from "./find-route-dom.js";

package/src/view/view.ts

@@ -0,0 +1,7 @@
+import { Get } from "../route/index.js";
+import { IRender } from "./render/render.js";
+import { ViewInfo } from "./types.js";
+
+export function View(path: string, render: IRender, meta?: ViewInfo["meta"]) {
+	return Get(path, { view: { render, meta } });
+}

package/test/body.test.ts

@@ -0,0 +1,29 @@
+import { expect, test } from "vitest";
+import { JSONBody } from "../src/server/body/json.js";
+import { Readable } from "stream";
+
+test("JSONBody", async () => {
+	const p = JSONBody({ "content-type": "application/json" }, { type: "any" })!;
+	async function check(name: string, data: any, str?: string) {
+		const stream = new ReadableStream({
+			start(controller) {
+				controller.enqueue(
+					new TextEncoder().encode(str || JSON.stringify(data)),
+				);
+				controller.close();
+			},
+		});
+		expect(await p(stream), name).toEqual(data);
+	}
+	await check("string 最基础的字符串", "awa");
+	await check("string 带有常规转义字符的字符串", "1\r\n3dw\t");
+	await check("null", null);
+	await check("true", true);
+	await check("false", false);
+	await check("arrar 空数组", []);
+	await check("arrar 有内容数组", ["ewf"]);
+	await check("object 空对象", {});
+	await check("object 有内容的对象", { a: "123456" });
+	await check("整数", 123);
+	await check("嵌套", [{ a: 1, b: "666", c: [true, null] }]);
+});

package/tsconfig.build.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist"
+  },
+  "extends": "../../tsconfig.json",
+  "reflection": true,
+  "include": ["src/**/*"]
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "rootDir": "./"
+  },
+  "extends":"./tsconfig.build.json",
+  "include": ["src/**/*", "tests/**/*"]
+}