@sigx/server-renderer 0.2.1 → 0.2.2

package/dist/client-CL2CTcTJ.js

@@ -1,455 +0,0 @@
-import { n as internals_exports, t as generateSignalKey } from "./types-DYlI_C8F.js";
-import { Comment, Fragment, Text, effect, getCurrentInstance, isComponent, isModel, render, signal } from "sigx";
-//#region src/client/hydrate-context.ts
-/**
-* Hydration context and state management
-*
-* Manages server state restoration, app context tracking,
-* client plugin registration, and the SSR context extension for components.
-*
-* Strategy-specific concerns (island data, async hydration) are handled
-* by plugins registered via `registerClientPlugin()`.
-*/
-var _pendingServerState = null;
-var _currentAppContext = null;
-var _clientPlugins = [];
-/**
-* Register a client-side SSR plugin.
-* Plugins are called during hydration to intercept component processing,
-* skip default hydration walk, or run post-hydration logic.
-*/
-function registerClientPlugin(plugin) {
-	_clientPlugins.push(plugin);
-}
-/**
-* Get all registered client-side plugins.
-*/
-function getClientPlugins() {
-	return _clientPlugins;
-}
-/**
-* Clear all registered client plugins (useful for testing).
-*/
-function clearClientPlugins() {
-	_clientPlugins = [];
-}
-/**
-* 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;
-}
-/** Get the current app context for deferred hydration */
-function getCurrentAppContext() {
-	return _currentAppContext;
-}
-/** Set the current app context during hydration */
-function setCurrentAppContext(ctx) {
-	_currentAppContext = ctx;
-}
-/**
-* Creates a signal function that restores state from server-captured values.
-* Used during hydration of async components to avoid re-fetching data.
-* Supports both primitive and object signals.
-*/
-function createRestoringSignal(serverState) {
-	let signalIndex = 0;
-	let hasWarnedPositional = false;
-	return function restoringSignal(initial, name) {
-		const key = generateSignalKey(name, signalIndex++);
-		if (process.env.NODE_ENV !== "production" && !name && !hasWarnedPositional) {
-			hasWarnedPositional = true;
-			console.warn(`[SSR Hydration] Signal restored without a name — using positional key "${key}". If signal declaration order differs between server and client builds, state will be silently mismatched. Use named signals: signal(value, "name")`);
-		}
-		if (key in serverState) return signal(serverState[key]);
-		return signal(initial);
-	};
-}
-/**
-* 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;
-}
-/**
-* 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.
-*/
-(0, internals_exports.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
-	};
-});
-//#endregion
-//#region src/client/hydrate-component.ts
-/**
-* Component hydration logic — strategy-agnostic
-*
-* Handles running component setup, creating reactive effects,
-* and restoring server state for hydrated components.
-* Does not depend on islands or any specific SSR strategy.
-*/
-/**
-* Hydrate a component - run setup and create reactive effect
-*
-* With trailing markers, the structure is: <content><!--$c:id-->
-* - dom points to start of content
-* - trailingMarker (if provided) is the anchor at the end
-*
-* @param vnode - The VNode to hydrate
-* @param dom - The DOM node to start from (content starts here)
-* @param parent - The parent node
-* @param serverState - Optional state captured from server for async components
-* @param trailingMarker - Optional trailing marker comment (the component anchor)
-*/
-function hydrateComponent(vnode, dom, parent, serverState, trailingMarker) {
-	const componentFactory = vnode.type;
-	const setup = componentFactory.__setup;
-	const componentName = componentFactory.__name || "Anonymous";
-	let anchor = trailingMarker || null;
-	if (!anchor) {
-		let current = dom;
-		let bestAnchor = null;
-		let bestId = Infinity;
-		let foundAnyMarker = false;
-		while (current) {
-			if (current.nodeType === Node.COMMENT_NODE) {
-				const text = current.data;
-				if (text.startsWith("$c:")) {
-					const id = parseInt(text.slice(3), 10);
-					if (id < bestId) {
-						bestId = id;
-						bestAnchor = current;
-					}
-					foundAnyMarker = true;
-				}
-			} else if (foundAnyMarker) break;
-			current = current.nextSibling;
-		}
-		if (bestAnchor) anchor = bestAnchor;
-	} else {
-		const text = anchor.data;
-		if (text.startsWith("$c:")) parseInt(text.slice(3), 10);
-	}
-	const internalVNode = vnode;
-	const { children, slots: slotsFromProps, $models: modelsData, ...propsData } = (0, internals_exports.filterClientDirectives)(vnode.props || {});
-	const propsWithModels = { ...propsData };
-	if (modelsData) for (const modelKey in modelsData) {
-		const modelValue = modelsData[modelKey];
-		if (isModel(modelValue)) propsWithModels[modelKey] = modelValue;
-	}
-	const reactiveProps = signal(propsWithModels);
-	internalVNode._componentProps = reactiveProps;
-	const slots = (0, internals_exports.createSlots)(children, slotsFromProps);
-	internalVNode._slots = slots;
-	const mountHooks = [];
-	const unmountHooks = [];
-	const createdHooks = [];
-	const updatedHooks = [];
-	const parentInstance = getCurrentInstance();
-	const signalFn = serverState ? createRestoringSignal(serverState) : signal;
-	const ssrHelper = {
-		load(_fn) {},
-		isServer: false,
-		isHydrating: !!serverState
-	};
-	const componentCtx = {
-		el: parent,
-		signal: signalFn,
-		props: (0, internals_exports.createPropsAccessor)(reactiveProps),
-		slots,
-		emit: (0, internals_exports.createEmit)(reactiveProps),
-		parent: parentInstance,
-		onMounted: (fn) => {
-			mountHooks.push(fn);
-		},
-		onUnmounted: (fn) => {
-			unmountHooks.push(fn);
-		},
-		onCreated: (fn) => {
-			createdHooks.push(fn);
-		},
-		onUpdated: (fn) => {
-			updatedHooks.push(fn);
-		},
-		expose: () => {},
-		renderFn: null,
-		update: () => {},
-		ssr: ssrHelper,
-		_serverState: serverState
-	};
-	if (!parentInstance && getCurrentAppContext()) (0, internals_exports.provideAppContext)(componentCtx, getCurrentAppContext());
-	const prev = (0, internals_exports.setCurrentInstance)(componentCtx);
-	let renderFn;
-	try {
-		renderFn = setup(componentCtx);
-	} catch (err) {
-		if (process.env.NODE_ENV !== "production") console.error(`Error hydrating component ${componentName}:`, err);
-	} finally {
-		(0, internals_exports.setCurrentInstance)(prev);
-	}
-	let endDom = dom;
-	if (renderFn) {
-		componentCtx.renderFn = renderFn;
-		let isFirstRender = true;
-		const subTreeRef = { current: null };
-		internalVNode._subTreeRef = subTreeRef;
-		const componentEffect = effect(() => {
-			const prevInstance = (0, internals_exports.setCurrentInstance)(componentCtx);
-			try {
-				const subTreeResult = componentCtx.renderFn();
-				const prevSubTree = subTreeRef.current;
-				if (subTreeResult == null) {
-					if (isFirstRender) {
-						if (!(dom != null && anchor != null && dom !== anchor)) isFirstRender = false;
-					} else if (prevSubTree && prevSubTree.dom) {
-						const patchContainer = prevSubTree.dom.parentNode || parent;
-						const emptyNode = (0, internals_exports.normalizeSubTree)(null);
-						(0, internals_exports.patch)(prevSubTree, emptyNode, patchContainer);
-						subTreeRef.current = emptyNode;
-						internalVNode._subTree = emptyNode;
-					}
-					return;
-				}
-				const subTree = (0, internals_exports.normalizeSubTree)(subTreeResult);
-				if (isFirstRender) {
-					isFirstRender = false;
-					if (dom != null && dom !== anchor) endDom = hydrateNode(subTree, dom, parent);
-					else (0, internals_exports.mount)(subTree, parent, anchor || null);
-					subTreeRef.current = subTree;
-					internalVNode._subTree = subTree;
-				} else {
-					if (prevSubTree) (0, internals_exports.patch)(prevSubTree, subTree, prevSubTree.dom?.parentNode || parent);
-					else (0, internals_exports.mount)(subTree, parent, anchor || null);
-					subTreeRef.current = subTree;
-					internalVNode._subTree = subTree;
-				}
-			} finally {
-				(0, internals_exports.setCurrentInstance)(prevInstance);
-			}
-		});
-		internalVNode._effect = componentEffect;
-		componentCtx.update = () => componentEffect();
-	}
-	vnode.dom = anchor || endDom;
-	const mountCtx = { el: parent };
-	createdHooks.forEach((hook) => hook());
-	mountHooks.forEach((hook) => hook(mountCtx));
-	vnode.cleanup = () => {
-		unmountHooks.forEach((hook) => hook(mountCtx));
-	};
-	return anchor ? anchor.nextSibling : endDom;
-}
-//#endregion
-//#region src/client/hydrate-core.ts
-/**
-* Core hydration logic — strategy-agnostic
-*
-* Walks existing server-rendered DOM and attaches event handlers,
-* creates reactive effects, and delegates components to the component hydrator.
-*
-* Plugins registered via `registerClientPlugin()` can intercept component
-* hydration (e.g., for deferred/island-based hydration strategies).
-*/
-/**
-* 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.
-*
-* Registered client plugins are called at appropriate points:
-* - `beforeHydrate`: before the DOM walk (return false to skip it entirely)
-* - `hydrateComponent`: for each component (return { next } to handle it)
-* - `afterHydrate`: after the DOM walk completes
-*
-* @param element - The root element/VNode to hydrate
-* @param container - The DOM container with SSR content
-* @param appContext - The app context for DI (provides, etc.)
-*/
-function hydrate(element, container, appContext) {
-	const vnode = normalizeElement(element);
-	if (!vnode) return;
-	setCurrentAppContext(appContext ?? null);
-	const plugins = getClientPlugins();
-	for (const plugin of plugins) if (plugin.client?.beforeHydrate?.(container) === false) {
-		container._vnode = vnode;
-		return;
-	}
-	hydrateNode(vnode, container.firstChild, container);
-	for (const plugin of plugins) plugin.client?.afterHydrate?.(container);
-	container._vnode = vnode;
-}
-/**
-* 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;
-	const isComponentVNode = isComponent(vnode.type);
-	const isTextVNode = vnode.type === Text;
-	const isCommentVNode = vnode.type === Comment;
-	while (dom && dom.nodeType === Node.COMMENT_NODE) {
-		if (isCommentVNode && dom.data === "") break;
-		if (isComponentVNode) {
-			if (dom.data.startsWith("$c:")) break;
-		}
-		if (isTextVNode && dom.data === "t") {
-			const emptyText = document.createTextNode("");
-			parent.replaceChild(emptyText, dom);
-			dom = emptyText;
-			break;
-		}
-		dom = dom.nextSibling;
-	}
-	if (vnode.type === Comment) {
-		if (dom && dom.nodeType === Node.COMMENT_NODE) {
-			vnode.dom = dom;
-			return dom.nextSibling;
-		}
-		const comment = document.createComment("");
-		if (dom) parent.insertBefore(comment, dom);
-		else parent.appendChild(comment);
-		vnode.dom = comment;
-		return dom;
-	}
-	if (vnode.type === Text) {
-		if (dom && dom.nodeType === Node.TEXT_NODE) {
-			vnode.dom = dom;
-			return dom.nextSibling;
-		}
-		const textNode = document.createTextNode(String(vnode.text ?? ""));
-		if (dom) parent.insertBefore(textNode, dom);
-		else parent.appendChild(textNode);
-		vnode.dom = textNode;
-		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 plugins = getClientPlugins();
-		for (const plugin of plugins) {
-			const result = plugin.client?.hydrateComponent?.(vnode, dom, parent);
-			if (result !== void 0) return result;
-		}
-		return hydrateComponent(vnode, dom, parent);
-	}
-	if (typeof vnode.type === "string") {
-		if (!dom || dom.nodeType !== Node.ELEMENT_NODE) {
-			if (process.env.NODE_ENV !== "production") {
-				const cls = vnode.props?.class || "";
-				console.warn("[Hydrate] Expected element but got:", dom, "| tag:", vnode.type, "| class:", cls, "| parent:", parent?.nodeName);
-			}
-			return dom;
-		}
-		const el = dom;
-		vnode.dom = el;
-		if (vnode.props) {
-			let hasDirectives = false;
-			for (const key in vnode.props) {
-				if (key === "children" || key === "key") continue;
-				if (key.startsWith("client:")) continue;
-				if (key.charCodeAt(0) === 117 && key.startsWith("use:")) {
-					(0, internals_exports.patchDirective)(el, key.slice(4), null, vnode.props[key], getCurrentAppContext());
-					hasDirectives = true;
-				} else (0, internals_exports.patchProp)(el, key, null, vnode.props[key]);
-			}
-			if (hasDirectives) (0, internals_exports.onElementMounted)(el);
-			if (vnode.props.ref) {
-				if (typeof vnode.props.ref === "function") vnode.props.ref(el);
-				else if (typeof vnode.props.ref === "object") vnode.props.ref.current = el;
-			}
-		}
-		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;
-}
-/**
-* 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);
-	}
-}
-//#endregion
-//#region src/client/plugin.ts
-/**
-* SSR Client Plugin
-* 
-* Adds the hydrate() method to the app instance for client-side hydration.
-* Also registers the SSR context extension for all components.
-* 
-* @example
-* ```tsx
-* import { defineApp } from 'sigx';
-* import { ssrClientPlugin } from '@sigx/server-renderer/client';
-* 
-* const app = defineApp(<App />);
-* app.use(ssrClientPlugin)
-*    .use(router)
-*    .hydrate('#app');
-* ```
-*/
-var ssrClientPlugin = {
-	name: "@sigx/server-renderer/client",
-	install(app) {
-		app.hydrate = function(container) {
-			const resolvedContainer = typeof container === "string" ? document.querySelector(container) : container;
-			if (!resolvedContainer) throw new Error(`[ssrClientPlugin] Cannot find container: ${container}. Make sure the element exists in the DOM before calling hydrate().`);
-			const rootComponent = app._rootComponent;
-			if (!rootComponent) throw new Error("[ssrClientPlugin] No root component found on app. Make sure you created the app with defineApp(<Component />).");
-			const hasSSRContent = resolvedContainer.firstElementChild !== null || resolvedContainer.firstChild !== null && resolvedContainer.firstChild.nodeType !== Node.COMMENT_NODE;
-			const appContext = app._context;
-			if (hasSSRContent) hydrate(rootComponent, resolvedContainer, appContext);
-			else render(rootComponent, resolvedContainer, appContext);
-			resolvedContainer._app = app;
-			return app;
-		};
-	}
-};
-//#endregion
-export { clearClientPlugins as a, getCurrentAppContext as c, setPendingServerState as d, hydrateComponent as i, registerClientPlugin as l, hydrate as n, createRestoringSignal as o, hydrateNode as r, getClientPlugins as s, ssrClientPlugin as t, setCurrentAppContext as u };
-
-//# sourceMappingURL=client-CL2CTcTJ.js.map