@sigx/server-renderer 0.1.3 → 0.1.5

package/dist/client/hydrate.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Client-side hydration for SSR'd content
+ *
+ * Hydration attaches the app to existing server-rendered DOM,
+ * then delegates all updates to the runtime-dom renderer.
+ */
+export type { HydrationOptions } from './types.js';
+/**
+ * Hydrate a server-rendered app.
+ *
+ * This walks the existing DOM to attach event handlers, runs component
+ * setup functions to establish reactivity, then uses runtime-dom for updates.
+ */
+export declare function hydrate(element: any, container: Element): void;
+/**
+ * Hydrate islands based on their strategies (selective hydration)
+ */
+export declare function hydrateIslands(): void;
+//# sourceMappingURL=hydrate.d.ts.map

package/dist/client/hydrate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hydrate.d.ts","sourceRoot":"","sources":["../../src/client/hydrate.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAsBH,YAAY,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAuFnD;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,GAAG,IAAI,CAS9D;AA0hBD;;GAEG;AACH,wBAAgB,cAAc,IAAI,IAAI,CAkBrC"}

package/dist/client/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @sigx/server-renderer/client
+ *
+ * Client-side hydration with selective/islands hydration support.
+ */
+import '../client-directives.js';
+export { hydrate, hydrateIslands } from './hydrate.js';
+export { HydrationRegistry, registerComponent } from './registry.js';
+export type { HydrationOptions } from './hydrate.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/client/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/client/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACrE,YAAY,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC"}

package/dist/client/index.js

@@ -0,0 +1,661 @@
+import { Fragment, Text, createPropsAccessor, createSlots, getCurrentInstance, normalizeSubTree, registerContextExtension, setCurrentInstance, signal } from "@sigx/runtime-core";
+import { effect } from "@sigx/reactivity";
+import { patchProp, render } from "@sigx/runtime-dom";
+
+//#region src/client/registry.ts
+/**
+* Registry mapping component names to component factories
+*/
+const componentRegistry = /* @__PURE__ */ new Map();
+/**
+* Register a component for island hydration.
+* Components must be registered before hydrateIslands() is called.
+* 
+* @example
+* ```ts
+* import { registerComponent } from '@sigx/server-renderer/client';
+* import { Counter } from './components/Counter';
+* 
+* registerComponent('Counter', Counter);
+* ```
+*/
+function registerComponent(name, component) {
+	componentRegistry.set(name, component);
+}
+/**
+* Get a registered component by name
+*/
+function getComponent(name) {
+	return componentRegistry.get(name);
+}
+/**
+* Check if a value is a component factory
+*/
+function isComponent$1(value) {
+	return typeof value === "function" && "__setup" in value;
+}
+/**
+* Hydration Registry class for more advanced use cases
+*/
+var HydrationRegistry = class {
+	components = /* @__PURE__ */ new Map();
+	register(name, component) {
+		this.components.set(name, component);
+		return this;
+	}
+	registerAll(components) {
+		for (const [name, component] of Object.entries(components)) if (isComponent$1(component)) this.register(name, component);
+		return this;
+	}
+	get(name) {
+		return this.components.get(name);
+	}
+	has(name) {
+		return this.components.has(name);
+	}
+};
+
+//#endregion
+//#region src/client/hydrate.ts
+/**
+* Client-side hydration for SSR'd content
+* 
+* Hydration attaches the app to existing server-rendered DOM,
+* then delegates all updates to the runtime-dom renderer.
+*/
+let _pendingServerState = null;
+/**
+* Set server state that should be used for the next component mount.
+* Used internally when mounting async components after streaming.
+*/
+function setPendingServerState(state) {
+	_pendingServerState = state;
+}
+/**
+* Register the SSR context extension for all components.
+* This provides the `ssr` object with a no-op `load()` for client-side rendering.
+* Also handles server state restoration for async streamed components.
+*/
+registerContextExtension((ctx) => {
+	const serverState = _pendingServerState;
+	if (serverState) {
+		ctx._serverState = serverState;
+		_pendingServerState = null;
+		ctx.signal = createRestoringSignal(serverState);
+		ctx.ssr = {
+			load: (_fn) => {},
+			isServer: false,
+			isHydrating: true
+		};
+	} else if (ctx._serverState) ctx.ssr = {
+		load: (_fn) => {},
+		isServer: false,
+		isHydrating: true
+	};
+	else ctx.ssr = {
+		load: (fn) => {
+			fn().catch((err) => console.error("[SSR] load error:", err));
+		},
+		isServer: false,
+		isHydrating: false
+	};
+});
+/**
+* Creates a signal function that restores state from server-captured values.
+* Used during hydration of async components to avoid re-fetching data.
+*/
+function createRestoringSignal(serverState) {
+	let signalIndex = 0;
+	return function restoringSignal(initial, name) {
+		const key = name ?? `$${signalIndex++}`;
+		if (key in serverState) {
+			console.log(`[Hydrate] Restoring signal "${key}" from server state:`, serverState[key]);
+			return signal(serverState[key]);
+		}
+		return signal(initial);
+	};
+}
+/**
+* Hydrate a server-rendered app.
+* 
+* This walks the existing DOM to attach event handlers, runs component
+* setup functions to establish reactivity, then uses runtime-dom for updates.
+*/
+function hydrate(element, container) {
+	const vnode = normalizeElement(element);
+	if (!vnode) return;
+	hydrateNode(vnode, container.firstChild, container);
+	container._vnode = vnode;
+}
+let _cachedIslandData = null;
+/**
+* Invalidate the island data cache (called when async components stream in)
+*/
+function invalidateIslandCache() {
+	_cachedIslandData = null;
+}
+/**
+* Get island data from the __SIGX_ISLANDS__ script tag
+*/
+function getIslandData() {
+	if (_cachedIslandData !== null) return _cachedIslandData;
+	const dataScript = document.getElementById("__SIGX_ISLANDS__");
+	if (!dataScript) {
+		_cachedIslandData = {};
+		return _cachedIslandData;
+	}
+	try {
+		_cachedIslandData = JSON.parse(dataScript.textContent || "{}");
+	} catch {
+		console.error("Failed to parse island data");
+		_cachedIslandData = {};
+	}
+	return _cachedIslandData;
+}
+/**
+* Get server state for a specific island/component by ID
+*/
+function getIslandServerState(componentId) {
+	return getIslandData()[String(componentId)]?.state;
+}
+/**
+* Normalize any element to VNode
+*/
+function normalizeElement(element) {
+	if (element == null || element === true || element === false) return null;
+	if (typeof element === "string" || typeof element === "number") return {
+		type: Text,
+		props: {},
+		key: null,
+		children: [],
+		dom: null,
+		text: element
+	};
+	return element;
+}
+/**
+* Check if type is a component
+*/
+function isComponent(type) {
+	return typeof type === "function" && "__setup" in type;
+}
+/**
+* Get hydration strategy from vnode props
+*/
+function getHydrationStrategy(props) {
+	if (props["client:load"] !== void 0) return { strategy: "load" };
+	if (props["client:idle"] !== void 0) return { strategy: "idle" };
+	if (props["client:visible"] !== void 0) return { strategy: "visible" };
+	if (props["client:only"] !== void 0) return { strategy: "only" };
+	if (props["client:media"] !== void 0) return {
+		strategy: "media",
+		media: props["client:media"]
+	};
+	return null;
+}
+/**
+* Hydrate a VNode against existing DOM
+* This only attaches event handlers and refs - no DOM creation
+*/
+function hydrateNode(vnode, dom, parent) {
+	if (!vnode) return dom;
+	while (dom && dom.nodeType === Node.COMMENT_NODE) {
+		const commentText = dom.data;
+		if (commentText.startsWith("$c:") || commentText.startsWith("/$c:") || commentText.startsWith("$island:")) break;
+		dom = dom.nextSibling;
+	}
+	if (vnode.type === Text) {
+		if (dom && dom.nodeType === Node.TEXT_NODE) {
+			vnode.dom = dom;
+			return dom.nextSibling;
+		}
+		return dom;
+	}
+	if (vnode.type === Fragment) {
+		let current = dom;
+		for (const child of vnode.children) current = hydrateNode(child, current, parent);
+		return current;
+	}
+	if (isComponent(vnode.type)) {
+		const strategy = vnode.props ? getHydrationStrategy(vnode.props) : null;
+		if (strategy) return scheduleComponentHydration(vnode, dom, parent, strategy);
+		return hydrateComponent(vnode, dom, parent);
+	}
+	if (typeof vnode.type === "string") {
+		if (!dom || dom.nodeType !== Node.ELEMENT_NODE) {
+			console.warn("[Hydrate] Expected element but got:", dom);
+			return dom;
+		}
+		const el = dom;
+		vnode.dom = el;
+		if (vnode.props) for (const key in vnode.props) {
+			if (key === "children" || key === "key") continue;
+			if (key.startsWith("client:")) continue;
+			patchProp(el, key, null, vnode.props[key]);
+		}
+		let childDom = el.firstChild;
+		for (const child of vnode.children) childDom = hydrateNode(child, childDom, el);
+		if (vnode.type === "select" && vnode.props) fixSelectValue(el, vnode.props);
+		return el.nextSibling;
+	}
+	return dom;
+}
+/**
+* Schedule component hydration based on strategy.
+* Returns the next DOM node after this component's content.
+*/
+function scheduleComponentHydration(vnode, dom, parent, strategy) {
+	const { startNode, endNode } = findComponentBoundaries(dom);
+	const doHydrate = () => {
+		hydrateComponent(vnode, startNode, parent);
+	};
+	switch (strategy.strategy) {
+		case "load":
+			console.log("[Hydrate] client:load - hydrating immediately");
+			doHydrate();
+			break;
+		case "idle":
+			console.log("[Hydrate] client:idle - scheduling for idle time");
+			if ("requestIdleCallback" in window) requestIdleCallback(() => {
+				console.log("[Hydrate] client:idle - idle callback fired");
+				doHydrate();
+			});
+			else setTimeout(() => {
+				console.log("[Hydrate] client:idle - timeout fallback fired");
+				doHydrate();
+			}, 200);
+			break;
+		case "visible":
+			console.log("[Hydrate] client:visible - observing visibility");
+			observeComponentVisibility(startNode, endNode, doHydrate);
+			break;
+		case "media":
+			if (strategy.media) {
+				const mql = window.matchMedia(strategy.media);
+				if (mql.matches) doHydrate();
+				else {
+					const handler = (e) => {
+						if (e.matches) {
+							mql.removeEventListener("change", handler);
+							doHydrate();
+						}
+					};
+					mql.addEventListener("change", handler);
+				}
+			}
+			break;
+		case "only":
+			doHydrate();
+			break;
+	}
+	return endNode ? endNode.nextSibling : dom;
+}
+/**
+* Find component start/end markers in DOM
+*/
+function findComponentBoundaries(dom) {
+	let startNode = dom;
+	let endNode = null;
+	if (dom && dom.nodeType === Node.COMMENT_NODE) {
+		const text = dom.data;
+		if (text.startsWith("$c:")) {
+			const id = text.slice(3);
+			startNode = dom;
+			let current = dom.nextSibling;
+			while (current) {
+				if (current.nodeType === Node.COMMENT_NODE) {
+					if (current.data === `/$c:${id}`) {
+						endNode = current;
+						break;
+					}
+				}
+				current = current.nextSibling;
+			}
+		}
+	}
+	return {
+		startNode,
+		endNode
+	};
+}
+/**
+* Observe when a component's DOM becomes visible
+*/
+function observeComponentVisibility(startNode, endNode, callback) {
+	let targetElement = null;
+	let current = startNode?.nextSibling || null;
+	while (current && current !== endNode) {
+		if (current.nodeType === Node.ELEMENT_NODE) {
+			targetElement = current;
+			break;
+		}
+		current = current.nextSibling;
+	}
+	if (!targetElement) {
+		callback();
+		return;
+	}
+	const observer = new IntersectionObserver((entries) => {
+		for (const entry of entries) if (entry.isIntersecting) {
+			observer.disconnect();
+			callback();
+			break;
+		}
+	}, { rootMargin: "50px" });
+	observer.observe(targetElement);
+}
+/**
+* Hydrate a component - run setup and create reactive effect
+* @param vnode - The VNode to hydrate
+* @param dom - The DOM node to start from
+* @param parent - The parent node
+* @param serverState - Optional state captured from server for async components
+*/
+function hydrateComponent(vnode, dom, parent, serverState) {
+	const componentFactory = vnode.type;
+	const setup = componentFactory.__setup;
+	const componentName = componentFactory.__name || "Anonymous";
+	if (componentName && componentName !== "Anonymous") registerComponent(componentName, componentFactory);
+	let anchor = null;
+	let componentId = null;
+	if (dom && dom.nodeType === Node.COMMENT_NODE) {
+		const commentText = dom.data;
+		if (commentText.startsWith("$c:")) {
+			anchor = dom;
+			componentId = parseInt(commentText.slice(3), 10);
+			dom = dom.nextSibling;
+			while (dom && dom.nodeType === Node.COMMENT_NODE) if (dom.data.startsWith("$island:")) dom = dom.nextSibling;
+			else break;
+		}
+	}
+	if (!serverState && componentId !== null) serverState = getIslandServerState(componentId);
+	const internalVNode = vnode;
+	const { children, slots: slotsFromProps, ...propsData } = filterClientDirectives(vnode.props || {});
+	const reactiveProps = signal(propsData);
+	internalVNode._componentProps = reactiveProps;
+	const slots = createSlots(children, slotsFromProps);
+	internalVNode._slots = slots;
+	const mountHooks = [];
+	const cleanupHooks = [];
+	const parentInstance = getCurrentInstance();
+	const signalFn = serverState ? createRestoringSignal(serverState) : signal;
+	const hasServerState = !!serverState;
+	const ssrHelper = {
+		load(_fn) {
+			if (hasServerState) console.log(`[Hydrate] Skipping ssr.load() - using restored server state`);
+		},
+		isServer: false,
+		isHydrating: hasServerState
+	};
+	const componentCtx = {
+		el: parent,
+		signal: signalFn,
+		props: createPropsAccessor(reactiveProps),
+		slots,
+		emit: (event, ...args) => {
+			const handler = reactiveProps[`on${event[0].toUpperCase() + event.slice(1)}`];
+			if (handler && typeof handler === "function") handler(...args);
+		},
+		parent: parentInstance,
+		onMount: (fn) => {
+			mountHooks.push(fn);
+		},
+		onCleanup: (fn) => {
+			cleanupHooks.push(fn);
+		},
+		expose: () => {},
+		renderFn: null,
+		update: () => {},
+		ssr: ssrHelper,
+		_serverState: serverState
+	};
+	const prev = setCurrentInstance(componentCtx);
+	let renderFn;
+	try {
+		renderFn = setup(componentCtx);
+	} catch (err) {
+		console.error(`Error hydrating component ${componentName}:`, err);
+	} finally {
+		setCurrentInstance(prev);
+	}
+	const startDom = anchor || dom;
+	let endDom = dom;
+	if (renderFn) {
+		componentCtx.renderFn = renderFn;
+		let isFirstRender = true;
+		const componentEffect = effect(() => {
+			const prevInstance = setCurrentInstance(componentCtx);
+			try {
+				const subTreeResult = componentCtx.renderFn();
+				if (subTreeResult == null) return;
+				const subTree = normalizeSubTree(subTreeResult);
+				const prevSubTree = internalVNode._subTree;
+				if (isFirstRender) {
+					isFirstRender = false;
+					endDom = hydrateNode(subTree, dom, parent);
+					internalVNode._subTree = subTree;
+				} else {
+					if (prevSubTree && prevSubTree.dom) {
+						const container = prevSubTree.dom.parentNode;
+						if (container) {
+							container._vnode = prevSubTree;
+							render(subTree, container);
+						}
+					}
+					internalVNode._subTree = subTree;
+				}
+			} finally {
+				setCurrentInstance(prevInstance);
+			}
+		});
+		internalVNode._effect = componentEffect;
+		componentCtx.update = () => componentEffect();
+	}
+	vnode.dom = anchor || startDom;
+	const mountCtx = { el: parent };
+	mountHooks.forEach((hook) => hook(mountCtx));
+	vnode.cleanup = () => {
+		cleanupHooks.forEach((hook) => hook(mountCtx));
+	};
+	let result = endDom;
+	while (result && result.nodeType === Node.COMMENT_NODE) {
+		if (result.data.startsWith("/$c:")) {
+			result = result.nextSibling;
+			break;
+		}
+		result = result.nextSibling;
+	}
+	return result;
+}
+function filterClientDirectives(props) {
+	const filtered = {};
+	for (const key in props) if (!key.startsWith("client:")) filtered[key] = props[key];
+	return filtered;
+}
+/**
+* Fix select element value after hydrating children.
+* This is needed because <select>.value only works after <option> children exist in DOM.
+*/
+function fixSelectValue(dom, props) {
+	if (dom.tagName === "SELECT" && "value" in props) {
+		const val = props.value;
+		if (dom.multiple) {
+			const options = dom.options;
+			const valArray = Array.isArray(val) ? val : [val];
+			for (let i = 0; i < options.length; i++) options[i].selected = valArray.includes(options[i].value);
+		} else dom.value = String(val);
+	}
+}
+/**
+* Hydrate islands based on their strategies (selective hydration)
+*/
+function hydrateIslands() {
+	const dataScript = document.getElementById("__SIGX_ISLANDS__");
+	if (!dataScript) return;
+	let islandData;
+	try {
+		islandData = JSON.parse(dataScript.textContent || "{}");
+	} catch {
+		console.error("Failed to parse island data");
+		return;
+	}
+	for (const [idStr, info] of Object.entries(islandData)) scheduleHydration(parseInt(idStr, 10), info);
+}
+/**
+* Schedule hydration based on strategy
+*/
+function scheduleHydration(id, info) {
+	const marker = findIslandMarker(id);
+	if (!marker) {
+		console.warn(`Island marker not found for id ${id}`);
+		return;
+	}
+	const component = info.componentId ? getComponent(info.componentId) : null;
+	if (!component && info.strategy !== "only") {
+		console.warn(`Component "${info.componentId}" not registered for hydration`);
+		return;
+	}
+	switch (info.strategy) {
+		case "load":
+			hydrateIsland(marker, component, info);
+			break;
+		case "idle":
+			if ("requestIdleCallback" in window) requestIdleCallback(() => hydrateIsland(marker, component, info));
+			else setTimeout(() => hydrateIsland(marker, component, info), 200);
+			break;
+		case "visible":
+			observeVisibility(marker, () => hydrateIsland(marker, component, info));
+			break;
+		case "media":
+			if (info.media) {
+				const mql = window.matchMedia(info.media);
+				if (mql.matches) hydrateIsland(marker, component, info);
+				else mql.addEventListener("change", function handler(e) {
+					if (e.matches) {
+						mql.removeEventListener("change", handler);
+						hydrateIsland(marker, component, info);
+					}
+				});
+			}
+			break;
+		case "only":
+			if (component) mountClientOnly(marker, component, info);
+			break;
+	}
+}
+function findIslandMarker(id) {
+	const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_COMMENT, null);
+	let node;
+	while (node = walker.nextNode()) if (node.data === `$c:${id}`) return node;
+	return null;
+}
+function observeVisibility(marker, callback) {
+	let node = marker.nextSibling;
+	while (node && node.nodeType !== Node.ELEMENT_NODE) node = node.nextSibling;
+	if (!node) return;
+	const observer = new IntersectionObserver((entries) => {
+		for (const entry of entries) if (entry.isIntersecting) {
+			observer.disconnect();
+			callback();
+			break;
+		}
+	});
+	observer.observe(node);
+}
+function hydrateIsland(marker, component, info) {
+	let container = marker.nextSibling;
+	while (container && container.nodeType === Node.COMMENT_NODE) container = container.nextSibling;
+	if (!container || container.nodeType !== Node.ELEMENT_NODE) {
+		console.warn("No element found for island hydration");
+		return;
+	}
+	const props = info.props || {};
+	if (info.state) setPendingServerState(info.state);
+	const vnode = {
+		type: component,
+		props,
+		key: null,
+		children: [],
+		dom: null
+	};
+	const wrapper = document.createElement("div");
+	wrapper.style.display = "contents";
+	const parent = container.parentNode;
+	parent.insertBefore(wrapper, container);
+	parent.removeChild(container);
+	render(vnode, wrapper);
+}
+function mountClientOnly(marker, component, info) {
+	let placeholder = marker.nextSibling;
+	while (placeholder && placeholder.nodeType === Node.COMMENT_NODE) placeholder = placeholder.nextSibling;
+	if (!placeholder || !placeholder.hasAttribute?.("data-island")) return;
+	const props = info.props || {};
+	const container = placeholder;
+	container.innerHTML = "";
+	render({
+		type: component,
+		props,
+		key: null,
+		children: [],
+		dom: null
+	}, container);
+}
+/**
+* Set up listener for async components streaming in.
+* This is set up at module load time to catch events early.
+*/
+let _asyncListenerSetup = false;
+function ensureAsyncHydrationListener() {
+	if (_asyncListenerSetup) return;
+	_asyncListenerSetup = true;
+	document.addEventListener("sigx:async-ready", (event) => {
+		const { id, state } = event.detail || {};
+		console.log(`[Hydrate] Async component ${id} ready, hydrating...`);
+		invalidateIslandCache();
+		const placeholder = document.querySelector(`[data-async-placeholder="${id}"]`);
+		if (!placeholder) {
+			console.warn(`[Hydrate] Could not find placeholder for async component ${id}`);
+			return;
+		}
+		const info = getIslandData()[String(id)];
+		if (!info) {
+			console.warn(`[Hydrate] No island data for async component ${id}`);
+			return;
+		}
+		hydrateAsyncComponent(placeholder, info);
+	});
+}
+if (typeof document !== "undefined") ensureAsyncHydrationListener();
+/**
+* Hydrate an async component that just streamed in.
+* The DOM has already been replaced with server-rendered content by $SIGX_REPLACE.
+* Since the streamed content doesn't include component markers, we mount fresh
+* with the server state restored via the context extension.
+*/
+function hydrateAsyncComponent(container, info) {
+	if (!info.componentId) {
+		console.error(`[Hydrate] No componentId in island info`);
+		return;
+	}
+	const component = getComponent(info.componentId);
+	if (!component) {
+		console.error(`[Hydrate] Component "${info.componentId}" not registered`);
+		return;
+	}
+	const props = info.props || {};
+	const serverState = info.state;
+	container.innerHTML = "";
+	if (serverState) setPendingServerState(serverState);
+	render({
+		type: component,
+		props,
+		key: null,
+		children: [],
+		dom: null
+	}, container);
+	console.log(`[Hydrate] Async component "${info.componentId}" mounted with server state`);
+}
+
+//#endregion
+export { HydrationRegistry, hydrate, hydrateIslands, registerComponent };
+//# sourceMappingURL=index.js.map