roxxie-proxy-u-prod 0.1.0

package/source/external/dreamlandjs/src/ssr/client/index.ts

@@ -0,0 +1,193 @@
+import {
+	Component,
+	ComponentContext,
+	DomImpl,
+	domImpl,
+	jsx,
+	setDomImpl,
+} from "dreamland/core";
+import { SSR_DATA, SSR_ID } from "../common/consts";
+import { hydrateState, Json } from "../common/serialize";
+import { SsrData, SsrObject } from "../common/types";
+
+// single function for all hydration mismatch warnings, easy to breakpoint
+let mismatch: (msg: string) => void;
+let isPruned: (idx: number) => boolean;
+dev: {
+	mismatch = (msg) => {
+		console.warn("[dreamland.js] Hydration mismatch: " + msg);
+	};
+	isPruned = () => false;
+}
+
+export let hydrate = async (
+	component: () => any,
+	ssr: HTMLElement,
+	head: HTMLElement,
+	dataEl: HTMLElement
+) => {
+	dev: {
+		if (dataEl.getAttribute(SSR_DATA) !== ":3") throw "invalid ssr root";
+	}
+	// decode entities
+	let textarea = jsx("textarea", {}) as HTMLTextAreaElement;
+	textarea.innerHTML = dataEl.innerText;
+	let data: SsrData = Json.parse(textarea.value);
+
+	dev: {
+		if (data.p) {
+			let ranges = data.p;
+			isPruned = (idx) => {
+				let lo = 0,
+					hi = ranges.length - 1;
+				while (lo <= hi) {
+					let mid = (lo + hi) >> 1;
+					let r = ranges[mid];
+					let start = typeof r === "number" ? r : r[0];
+					let end = typeof r === "number" ? r : r[1];
+					if (idx < start) hi = mid - 1;
+					else if (idx > end) lo = mid + 1;
+					else return true;
+				}
+				return false;
+			};
+		}
+	}
+
+	let els: [number, HTMLElement][] = [];
+
+	let rootIdx = +ssr.getAttribute(SSR_ID)!;
+	let idx = -1;
+	let getInternal = (idx: number) => {
+		let selector = `[${SSR_ID}="${idx}"]`;
+		let ret =
+			rootIdx == idx
+				? ssr
+				: ssr.querySelector<HTMLElement>(selector) ||
+					head.querySelector<HTMLElement>(selector);
+		if (ret) els.push([idx, ret]);
+		return ret;
+	};
+	let getRelative = () => {
+		let info = data.n[++idx];
+		if (!info) return;
+
+		let [parent, offset] = info as [number, number];
+		return getInternal(parent)?.childNodes?.[offset];
+	};
+	let hydrateCx = (cx: ComponentContext<any>) => {
+		let ssr = data.n[cx?.state?.root?.getAttribute?.(SSR_ID) as any as number];
+		if (ssr) {
+			hydrateState(data, ssr as SsrObject, cx.state);
+		}
+	};
+	let hydrating = (x: HTMLElement) => x.hasAttribute(SSR_ID);
+
+	for (let [parent, offset, len] of data.t) {
+		let text = getInternal(parent)!.childNodes[offset] as Text;
+		if (text.length !== len) text.splitText(len);
+	}
+
+	let _old = domImpl,
+		old = _old();
+	let cxs: ComponentContext<Component<any, any>>[] = [];
+	let inits: (Promise<any> | any)[] = [];
+	let mounts: typeof inits = [];
+	let vdom = [
+		{
+			createElement: (x: any) => {
+				let el = getInternal(++idx);
+				dev: {
+					if (el && el.tagName.toLowerCase() !== x.toLowerCase())
+						mismatch(
+							`expected <${x}> but server rendered <${el.tagName.toLowerCase()}> (${SSR_ID}=${idx})`
+						);
+					if (!el && !isPruned(idx))
+						mismatch(
+							`could not find server-rendered element for <${x}> (${SSR_ID}=${idx})`
+						);
+				}
+				return el || old[0].createElement(x);
+			},
+			createElementNS: (x: any, y: any) => {
+				let el = getInternal(++idx);
+				dev: {
+					if (el && el.tagName.toLowerCase() !== y.toLowerCase())
+						mismatch(
+							`expected <${y}> (ns: ${x}) but server rendered <${el.tagName.toLowerCase()}> (${SSR_ID}=${idx})`
+						);
+					if (!el && !isPruned(idx))
+						mismatch(
+							`could not find server-rendered element for <${y}> (ns: ${x}) (${SSR_ID}=${idx})`
+						);
+				}
+				return el || old[0].createElementNS(x, y);
+			},
+			head: old[0].head,
+		},
+		old[1],
+		(x: any) => {
+			let node = getRelative();
+			dev: {
+				if (node && node.nodeType !== 3)
+					mismatch(
+						`expected text node but found node of type ${node.nodeType} (${SSR_ID}=${idx})`
+					);
+				if (
+					node &&
+					node.nodeType === 3 &&
+					x != null &&
+					"" + x !== node.textContent
+				)
+					mismatch(
+						`text content differs - expected "${x}" but server rendered "${node.textContent}" (${SSR_ID}=${idx})`
+					);
+				if (!node && !isPruned(idx))
+					mismatch(
+						`could not find server-rendered text node for "${x}" (${SSR_ID}=${idx})`
+					);
+			}
+			return node || old[2](x);
+		},
+		(x: any) => {
+			let node = getRelative();
+			dev: {
+				if (node && node.nodeType !== 8)
+					mismatch(
+						`expected comment node but found node of type ${node.nodeType} (${SSR_ID}=${idx})`
+					);
+				if (!node && !isPruned(idx))
+					mismatch(
+						`could not find server-rendered comment node (${SSR_ID}=${idx})`
+					);
+			}
+			return node || old[3](x);
+		},
+		(x) => data.i[idx + 1] || old[4](x),
+		old[5],
+		hydrating,
+		(_init, _state, cx) => {
+			if (cx?.state?.root instanceof old[1] && !hydrating(cx.state?.root))
+				hydrateCx(cx);
+		},
+		cxs,
+		inits,
+		mounts,
+	] as const satisfies DomImpl;
+
+	setDomImpl(() => vdom);
+	let root = await component();
+	while (inits.length) {
+		await Promise.all(inits.splice(0));
+	}
+	setDomImpl(_old);
+
+	cxs.map((x) => {
+		hydrateCx(x);
+		mounts.push(x.mount?.());
+	});
+
+	await Promise.all(mounts);
+
+	return root;
+};

package/source/external/dreamlandjs/src/ssr/common/consts.ts

@@ -0,0 +1,5 @@
+export let SSR = "dlssr" as const;
+export let SSR_DATA = SSR + "-d";
+export let SSR_ID = SSR + "i";
+
+export let CSS_IDENT = "dlcss-";

package/source/external/dreamlandjs/src/ssr/common/serialize.ts

@@ -0,0 +1,115 @@
+import { Pointer, DREAMLAND, NO_CHANGE } from "dreamland/core";
+import { SsrData, SsrObject, SsrPointer, SsrValue } from "./types";
+
+export let Json = JSON;
+
+export let serializeState = (
+	data: SsrData,
+	object: object,
+	isNode: (x: any) => boolean
+): SsrObject => {
+	let push = (arr: string[], val: any): number => {
+		let idx = arr.indexOf(val);
+		if (idx != -1) return idx;
+		else return arr.push(val) - 1;
+	};
+
+	let exportPtr = (ptr: Pointer<any>): SsrPointer => {
+		let zipped = ptr[DREAMLAND]();
+		return zipped ? zipped.map(exportPtr) : { v: _val(ptr.value) };
+	};
+
+	let isUndefined = (x: any): x is undefined => typeof x == "undefined";
+
+	let _val = (val: any): SsrValue | undefined => {
+		if (!["bigint", "function", "object"].includes(typeof val)) {
+			return push(data.v, val);
+		} else if (val instanceof Pointer) {
+			return [4, exportPtr(val)];
+		} else if (val instanceof Map) {
+			let entries = Object.fromEntries(val.entries());
+			return [0, _serialize(entries)];
+		} else if (val instanceof Set) {
+			let vals = [...val.values()].map((x) => _val(x));
+			if (vals.some(isUndefined)) return;
+
+			return [2, vals];
+		} else if (val instanceof Array) {
+			let vals = val.map((x) => _val(x));
+			if (vals.some(isUndefined)) return;
+
+			return [3, vals];
+		} else if (
+			typeof val === "object" &&
+			[undefined, Object].includes(val.constructor)
+		) {
+			return [1, _serialize(val)];
+		} else if (!isNode(val)) {
+			dev: {
+				if (val instanceof Function) return;
+
+				console.warn("[dreamland.js] did not serialize unknown value ", val);
+			}
+		}
+	};
+
+	let _serialize = (object: any, root?: boolean): SsrObject => {
+		let out: SsrObject = [];
+		if (!object[NO_CHANGE])
+			for (let k in object) {
+				if (root && ["cx", "root"].includes(k)) continue;
+
+				let v = object[k];
+				let val = _val(v);
+
+				if (!isUndefined(val)) out.push([push(data.k, k), val]);
+			}
+		return out;
+	};
+
+	return _serialize(object, true);
+};
+
+export let hydrateState = (data: SsrData, state: SsrObject, target: any) => {
+	let hydratePtr = (ptr: Pointer<any>, data: SsrPointer) => {
+		if (data instanceof Array) {
+			ptr[DREAMLAND]()!.forEach((x, i) => hydratePtr(x, data[i]));
+		} else {
+			ptr.value = _val(data.v, ptr.value, true);
+		}
+	};
+
+	// TODO this is ugly
+	let _val = (val: SsrValue, target?: any, ptr?: boolean): any => {
+		if (typeof val == "number") {
+			return data.v[val];
+		}
+
+		let [type, v] = val as any;
+		if (type == 4) {
+			hydratePtr(target as Pointer<any>, v);
+			return ptr ? NO_CHANGE : target;
+		} else if (type == 2) {
+			return new Set(v.map((x: SsrValue) => _val(x, {})));
+		} else if (type == 0) {
+			let t = {};
+			_hydrate(v, t);
+			return new Map(Object.entries(t));
+		} else if (type == 3) {
+			return v.map((x: SsrValue) => _val(x, {}));
+		} else if (type == 1) {
+			target ||= {};
+			_hydrate(v, target);
+			return target;
+		}
+	};
+
+	let _hydrate = (state: SsrObject, target: any) => {
+		for (let [_k, v] of state) {
+			let k = data.k[_k];
+			target[k] = _val(v, target[k]);
+		}
+	};
+
+	_hydrate(state, target);
+};

package/source/external/dreamlandjs/src/ssr/common/types.ts

@@ -0,0 +1,28 @@
+export type SsrValue =
+	| number /* JSON serialized value in SsrData */
+	| [0 /* map */ | 1 /* object */, SsrObject]
+	| [2 /* set */ | 3 /* array */, SsrValue[]]
+	| [4 /* pointer */, SsrPointer]
+	| undefined;
+export type SsrPointer = SsrPointer[] | { v: SsrValue /* values index */ };
+export type SsrObject = [
+	number /* keys index */,
+	SsrValue /* values index */,
+][];
+
+export type Node =
+	| SsrObject
+	| [
+			number,
+			number,
+			string?,
+	  ] /* text/comment node, 1st number is parent element's ssr id, 2nd is child index, possible debug string */;
+
+export interface SsrData {
+	k /* keys */: string[];
+	v /* values */: any[];
+	n /* nodes */: Record<number, Node>;
+	i /* idents */: Record<number, string>;
+	t /* textFixups */: [number, number, number][];
+	p /* pruned element ranges (dev only) */?: (number | [number, number])[];
+}

package/source/external/dreamlandjs/src/ssr/hybrid/index.ts

@@ -0,0 +1,144 @@
+/*
+// regular dl2 component syntax
+// autoimported via the importmap stuff or manually mounted with `mount("selector or array of els", DropdownController)`
+export function DropdownController(this: FC<{}, {
+	hidden: boolean,
+}>) {
+	this.hidden = true;
+
+	this.cx.mount = () => {
+		// this.root points to the controller root
+		console.log(this.root.outerHTML);
+	}
+
+	// return a bunch of mount points as a Fragment
+	// mount points have dlssr to figure out where to mount them, id matches "dlssri=..."
+	// any children/components or other props will just get added onto or modify the element
+	return <>
+		<button dlssr={{ id: "abc" }} on:click={() => this.hidden = false} />
+		<div dlssr={{ id: "menu" }} class:hidden={use(this.hidden)}>
+			<span>hydrated in content</span>
+		</div>
+	</>
+}
+*/
+
+import {
+	Component,
+	DomImpl,
+	domImpl,
+	h,
+	setDomImpl,
+	Pointer,
+} from "dreamland/core";
+import { SSR, SSR_ID } from "../common/consts";
+
+export let mountOne = (
+	root: HTMLElement,
+	component: Component<any, any>,
+	data?: any
+): void => {
+	let lookup = (
+		root: HTMLElement,
+		ty: string,
+		props: any,
+		ssr: { id: string } | string
+	) => {
+		props[SSR] = undefined;
+		if (typeof ssr === "string") ssr = { id: ssr };
+
+		let el: HTMLElement | null | undefined;
+		if (ty === SSR + "-root") el = root;
+		else if (ssr.id)
+			el = root.querySelector<HTMLElement>(`${ty}[${SSR_ID}='${ssr.id}'`);
+
+		if (!el) return;
+
+		for (let prop in props) {
+			let val;
+			if (prop.startsWith("attr:")) val = (el as any)[prop];
+			else if (prop == "this" || prop.includes(":")) continue;
+			else val = el.getAttribute(prop);
+			if (val && props[prop] instanceof Pointer) {
+				props[prop].value = val;
+			}
+		}
+
+		return el;
+	};
+
+	let _old = domImpl,
+		old = _old();
+	let vdom = [
+		{
+			createElement(ty: string, _: any, props: any) {
+				return (
+					(props[SSR] && lookup(root, ty, props, props[SSR])) ||
+					document.createElement(ty)
+				);
+			},
+			createElementNS(ns: string, ty: string, props: any) {
+				return (
+					lookup(root, ty, props, props[SSR]) ||
+					document.createElementNS(ns, ty)
+				);
+			},
+			head: document.head,
+		},
+		old[1],
+		old[2],
+		old[3],
+		old[4],
+		old[5],
+		old[6],
+		(init, state, cx) => {
+			if (init === component) {
+				if (init.style) {
+					dev: {
+						throw new Error("Hybrid SSR controllers do not support CSS");
+					}
+				}
+
+				if (cx) {
+					cx.state.root = root;
+				} else {
+					(state as any).ssrData = data;
+				}
+			}
+		},
+	] satisfies DomImpl;
+	setDomImpl(() => vdom);
+	let x = h(component, {});
+	setDomImpl(_old);
+
+	// @ts-expect-error prevent vite from messing stuff up
+	return x;
+};
+
+export let mount = (
+	roots: string | HTMLElement[],
+	component: Component<any, any>,
+	getData?: (x: HTMLElement) => any
+) => {
+	(typeof roots == "string"
+		? [...document.querySelectorAll<HTMLElement>(roots)]
+		: roots
+	).map((x) => mountOne(x, component, getData?.(x)));
+};
+
+export let discover = async (
+	controllers: Record<string, () => Promise<any>>
+) => {
+	for (let controller in controllers) {
+		let mod = await controllers[controller]();
+		for (let key in mod) {
+			let exp = mod[key];
+			if (exp instanceof Function) {
+				mount(
+					`[${SSR}-controller="${exp.name.toLowerCase().slice(0, -10)}"]`,
+					exp
+				);
+			}
+		}
+	}
+};

package/source/external/dreamlandjs/src/ssr/server/index.ts

@@ -0,0 +1,157 @@
+import { Element as DomElement, Text as DomText } from "domhandler";
+import { setDomImpl, DomImpl, domImpl } from "dreamland/core";
+import { Node as VdomNode, Comment, Text, Element, newVDom } from "./vdom";
+import { AsyncLocalStorage } from "node:async_hooks";
+
+import { CSS_IDENT, SSR_DATA } from "../common/consts";
+import { Node, SsrData } from "../common/types";
+import { serializeState } from "../common/serialize";
+
+export interface RenderedComponent {
+	head: DomElement[];
+	data: DomElement;
+	component: DomElement;
+}
+
+let storage = new AsyncLocalStorage<DomImpl>();
+let dom = domImpl;
+setDomImpl(() => storage.getStore() || dom());
+
+export async function render(
+	component: () => Promise<any> | any
+): Promise<RenderedComponent> {
+	let vdom = newVDom();
+	return storage.run(vdom, async () => {
+		let ret: any;
+		ret = await component();
+		while (vdom[0].promises.length) {
+			await Promise.all(vdom[0].promises.splice(0));
+		}
+
+		let root: Element,
+			extraHead: Element[] = [];
+		if (ret instanceof Array) {
+			root = ret[0];
+			extraHead = ret[1];
+		} else {
+			root = ret;
+		}
+
+		let domIds = new Set<number>();
+		let domCssIdents = new Set();
+		let walk = (el: VdomNode) => {
+			domIds.add(el._id);
+			if (el instanceof Element && el.component) {
+				if (el.component.id) domCssIdents.add(el.component.id);
+			}
+
+			for (let node of el.childNodes) {
+				walk(node);
+			}
+		};
+		walk(root);
+
+		let data: SsrData = {
+			k: [],
+			v: [],
+			n: {},
+			i: Object.fromEntries(
+				[...vdom[0].identArr.entries()].filter(([_, i]) =>
+					domCssIdents.has(CSS_IDENT + i)
+				)
+			),
+			t: [],
+		};
+
+		for (let el of vdom[0].elArr) {
+			if (!domIds.has(el._id)) continue;
+
+			let node: Node | undefined;
+			if (el instanceof Element && el.component) {
+				node = serializeState(
+					data,
+					el.component.state,
+					(x) => x instanceof vdom[1]
+				);
+			} else if ((el instanceof Comment || el instanceof Text) && el.parent) {
+				node = [el.parent._id, el.parent.childNodes.indexOf(el)];
+				dev: {
+					node.push(el.data);
+				}
+			}
+			data.n[el._id] = node!;
+		}
+
+		let seen = new Set<VdomNode>();
+		for (let el of vdom[0].elArr) {
+			if (!(el instanceof Text) || !el.parent || seen.has(el)) continue;
+
+			let siblings = el.parent.childNodes;
+			let start = siblings.indexOf(el);
+
+			let run: Text[] = [];
+			for (
+				let j = start;
+				j < siblings.length && siblings[j] instanceof Text;
+				j++
+			) {
+				run.push(siblings[j] as Text);
+				seen.add(siblings[j]);
+			}
+
+			if (run.length < 2) continue;
+
+			for (let j = 0; j < run.length; j++) {
+				if (domIds.has(run[j]._id)) {
+					data.t.push([el.parent._id, start + j, run[j].data.length]);
+				}
+			}
+		}
+
+		dev: {
+			let pruned = vdom[0].elArr
+				.map((x) => x._id)
+				.filter((id) => !domIds.has(id))
+				.sort((a, b) => a - b);
+
+			let ranges: (number | [number, number])[] = [];
+			let start = -1,
+				end = -1;
+			let flush = () => {
+				if (end - start >= 2) ranges.push([start, end]);
+				else for (let i = start; i <= end; i++) ranges.push(i);
+			};
+			for (let id of pruned) {
+				if (start === -1) {
+					start = end = id;
+				} else if (id === end + 1) {
+					end = id;
+				} else {
+					flush();
+					start = end = id;
+				}
+			}
+			if (start !== -1) flush();
+			data.p = ranges;
+		}
+
+		let head = [
+			...extraHead,
+			...vdom[0].head.childNodes.filter(
+				(x) =>
+					x instanceof Element &&
+					domCssIdents.has(x.attributes.get(CSS_IDENT + "id"))
+			),
+		].map((x) => x.toStandard()) as DomElement[];
+
+		return {
+			head,
+			data: new DomElement(
+				"script",
+				{ type: "application/json", [SSR_DATA]: ":3" },
+				[new DomText(JSON.stringify(data))]
+			),
+			component: root.toStandard(),
+		};
+	});
+}

package/source/external/dreamlandjs/src/ssr/server/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"compilerOptions": {
+		"lib": ["ES2022"]
+	},
+	"include": ["."],
+	"extends": "../../../tsconfig.json"
+}