semajsx 0.5.1 → 0.6.0

package/dist/client-CButR91p.mjs

@@ -0,0 +1,740 @@
+import { t as isSignal } from "./utils-DbTAs943.mjs";
+import { h, v as Fragment } from "./src-DW3tIczg.mjs";
+import { d as setProperty, u as render } from "./src-BqX3sryB.mjs";
+
+//#region ../ssr/src/client/hydrate.ts
+/**
+* Type guard for async iterators
+*/
+function isAsyncIterator(value) {
+	if (!value || typeof value !== "object") return false;
+	const obj = value;
+	return typeof obj[Symbol.asyncIterator] === "function" || typeof obj.next === "function" && typeof obj.return === "function";
+}
+/**
+* Hydrate a server-rendered DOM tree with client-side interactivity
+* Unlike render(), this preserves existing DOM and only attaches event listeners
+*
+* @param vnode - The VNode to hydrate
+* @param container - The DOM container with server-rendered content
+* @returns The hydrated root node
+*
+* @example
+* ```tsx
+* const vnode = <Counter initial={5} />
+* const container = document.querySelector('[data-island-id="island-0"]')
+* hydrate(vnode, container)
+* ```
+*/
+function hydrate(vnode, container) {
+	const nodeToHydrate = container.firstChild;
+	if (!nodeToHydrate) {
+		console.warn("[Hydrate] Container is empty, falling back to render");
+		const rendered = renderNode(vnode, container);
+		if (rendered) container.appendChild(rendered);
+		return rendered;
+	}
+	try {
+		hydrateNode(vnode, nodeToHydrate, container);
+		return nodeToHydrate;
+	} catch (error) {
+		console.error("[Hydrate] Error during hydration:", error);
+		console.warn("[Hydrate] Falling back to client-side rendering");
+		container.innerHTML = "";
+		return renderNode(vnode, container);
+	}
+}
+/**
+* Hydrate a VNode onto an existing DOM node
+*/
+function hydrateNode(vnode, domNode, parentElement) {
+	if (vnode == null) return;
+	if (isSignal(vnode)) {
+		hydrateSignalNode(vnode, domNode, parentElement);
+		return;
+	}
+	if (typeof vnode === "string" || typeof vnode === "number") {
+		if (domNode.nodeType === Node.TEXT_NODE) {
+			const expectedText = String(vnode);
+			if (domNode.textContent !== expectedText) {
+				console.warn("[Hydrate] Text mismatch, updating:", domNode.textContent, "->", expectedText);
+				domNode.textContent = expectedText;
+			}
+		}
+		return;
+	}
+	if (Array.isArray(vnode)) {
+		let currentDomNode = domNode;
+		for (const child of vnode) if (currentDomNode) {
+			hydrateNode(child, currentDomNode, parentElement);
+			currentDomNode = currentDomNode.nextSibling;
+		}
+		return;
+	}
+	if (typeof vnode !== "object" || !("type" in vnode)) return;
+	const vnodeTyped = vnode;
+	if (vnodeTyped.type === "#signal") {
+		const signal = vnodeTyped.props?.signal;
+		if (signal && isSignal(signal)) hydrateSignalNode(signal, domNode, parentElement);
+		return;
+	}
+	if (vnodeTyped.type === Fragment) {
+		let currentDomNode = domNode;
+		for (const child of vnodeTyped.children) if (currentDomNode) {
+			hydrateNode(child, currentDomNode, parentElement);
+			currentDomNode = currentDomNode.nextSibling;
+		}
+		return;
+	}
+	if (typeof vnodeTyped.type === "function") {
+		const props = vnodeTyped.children && vnodeTyped.children.length > 0 ? {
+			...vnodeTyped.props,
+			children: vnodeTyped.children
+		} : vnodeTyped.props || {};
+		let result = vnodeTyped.type(props);
+		if (result instanceof Promise) {
+			result.then((resolved) => hydrateNode(resolved, domNode, parentElement));
+			return;
+		}
+		if (isAsyncIterator(result)) {
+			result.next().then(({ value }) => {
+				hydrateNode(value, domNode, parentElement);
+			});
+			return;
+		}
+		hydrateNode(result, domNode, parentElement);
+		return;
+	}
+	if (typeof vnodeTyped.type === "string") {
+		if (domNode.nodeType === Node.TEXT_NODE) return;
+		if (domNode.nodeType !== Node.ELEMENT_NODE) {
+			console.warn("[Hydrate] Expected element, got:", domNode.nodeType);
+			return;
+		}
+		const element = domNode;
+		if (element.tagName.toLowerCase() !== vnodeTyped.type.toLowerCase()) {
+			console.warn("[Hydrate] Tag mismatch:", element.tagName, "vs", vnodeTyped.type);
+			return;
+		}
+		hydrateProperties(element, vnodeTyped.props || {});
+		hydrateChildren(element, vnodeTyped.children);
+		return;
+	}
+}
+/**
+* Hydrate properties onto an element
+* This is where we attach event listeners and set up reactive properties
+*/
+function hydrateProperties(element, props) {
+	for (const [key, value] of Object.entries(props)) {
+		if (key === "children" || key === "key" || key === "ref") continue;
+		if (key.startsWith("on")) {
+			const eventName = key.slice(2).toLowerCase();
+			if (typeof value === "function") element.addEventListener(eventName, value);
+			continue;
+		}
+		if (isSignal(value)) {
+			setProperty(element, key, value.value);
+			value.subscribe((newValue) => {
+				setProperty(element, key, newValue);
+			});
+			continue;
+		}
+	}
+	if (props.ref) {
+		if (typeof props.ref === "function") props.ref(element);
+		else if (typeof props.ref === "object" && props.ref !== null) props.ref.current = element;
+	}
+}
+/**
+* Hydrate children elements
+*/
+function hydrateChildren(element, children) {
+	let currentDomNode = element.firstChild;
+	for (const child of children) {
+		if (!currentDomNode) {
+			console.warn("[Hydrate] Missing DOM node for child, appending");
+			const newNode = renderNode(child, element);
+			if (newNode) element.appendChild(newNode);
+			continue;
+		}
+		hydrateNode(child, currentDomNode, element);
+		currentDomNode = currentDomNode.nextSibling;
+	}
+}
+/**
+* Hydrate a signal VNode
+* Set up reactivity to replace content when signal changes
+*/
+function hydrateSignalNode(signal, domNode, parentElement) {
+	const currentValue = signal.value;
+	if (currentValue == null || currentValue === false || Array.isArray(currentValue) && currentValue.length === 0) if (domNode.nodeType === Node.COMMENT_NODE) {} else console.warn("[Hydrate] Expected comment marker for empty signal, got:", domNode.nodeType);
+	else if (typeof currentValue === "string" || typeof currentValue === "number") {
+		if (domNode.nodeType === Node.TEXT_NODE) {
+			const expectedText = String(currentValue);
+			if (domNode.textContent !== expectedText) {
+				console.warn("[Hydrate] Signal text mismatch:", domNode.textContent, "->", expectedText);
+				domNode.textContent = expectedText;
+			}
+		}
+	} else hydrateNode(currentValue, domNode, parentElement);
+	let anchor;
+	let currentNodes = [];
+	if (domNode.nodeType === Node.COMMENT_NODE) anchor = domNode;
+	else {
+		anchor = document.createComment("signal-anchor");
+		if (domNode.parentNode) domNode.parentNode.insertBefore(anchor, domNode);
+		currentNodes = [domNode];
+	}
+	signal.subscribe((newValue) => {
+		const parent = anchor.parentNode;
+		if (!parent) return;
+		for (const node of currentNodes) if (node.parentNode) node.parentNode.removeChild(node);
+		currentNodes = [];
+		const newNode = renderNode(newValue, parentElement);
+		if (newNode) if (newNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+			const fragment = newNode;
+			const children = Array.from(fragment.childNodes);
+			let insertAfter = anchor;
+			for (const child of children) {
+				parent.insertBefore(child, insertAfter.nextSibling);
+				insertAfter = child;
+				currentNodes.push(child);
+			}
+		} else {
+			parent.insertBefore(newNode, anchor.nextSibling);
+			currentNodes = [newNode];
+		}
+	});
+}
+/**
+* Render a VNode to a DOM node (fallback when hydration fails)
+* This is a simplified version of render() just for hydration fallback
+*/
+function renderNode(vnode, parentElement) {
+	if (vnode == null || vnode === false || vnode === true) return document.createComment("empty");
+	if (isSignal(vnode)) return renderNode(vnode.value, parentElement);
+	if (typeof vnode === "string" || typeof vnode === "number") return document.createTextNode(String(vnode));
+	if (Array.isArray(vnode)) {
+		if (vnode.length === 0) return document.createComment("empty");
+		const fragment = document.createDocumentFragment();
+		for (const child of vnode) {
+			const node = renderNode(child, parentElement);
+			if (node) fragment.appendChild(node);
+		}
+		return fragment;
+	}
+	if (typeof vnode === "object" && "type" in vnode) {
+		const vnodeTyped = vnode;
+		if (vnodeTyped.type === "#text") return document.createTextNode(String(vnodeTyped.props?.nodeValue || ""));
+		if (vnodeTyped.type === "#signal") {
+			const signal = vnodeTyped.props?.signal;
+			if (signal && isSignal(signal)) return renderNode(signal.value, parentElement);
+			return document.createTextNode("");
+		}
+		if (vnodeTyped.type === Fragment) {
+			const fragment = document.createDocumentFragment();
+			for (const child of vnodeTyped.children) {
+				const node = renderNode(child, parentElement);
+				if (node) fragment.appendChild(node);
+			}
+			return fragment;
+		}
+		if (typeof vnodeTyped.type === "function") return renderNode(vnodeTyped.type(vnodeTyped.props || {}), parentElement);
+		if (typeof vnodeTyped.type === "string") {
+			const element = document.createElement(vnodeTyped.type);
+			const props = vnodeTyped.props || {};
+			for (const [key, value] of Object.entries(props)) {
+				if (key === "children" || key === "key") continue;
+				setProperty(element, key, value);
+			}
+			for (const child of vnodeTyped.children) {
+				const childNode = renderNode(child, element);
+				if (childNode) element.appendChild(childNode);
+			}
+			return element;
+		}
+	}
+	return null;
+}
+/**
+* Hydrate an island by ID
+* Handles both single-element islands (with data-island-id) and fragment islands (with comment markers)
+*
+* @param islandId - The island ID to hydrate
+* @param Component - The component function to render
+* @param markHydrated - Callback to mark the island as hydrated
+*
+* @example
+* ```tsx
+* import { hydrateIsland, markIslandHydrated } from '@semajsx/ssr/client';
+* import Counter from './Counter';
+*
+* hydrateIsland('counter-0', Counter, markIslandHydrated);
+* ```
+*/
+function hydrateIsland(islandId, Component, markHydrated) {
+	const element = document.querySelector(`[data-island-id="${islandId}"]`);
+	if (element) {
+		const props = JSON.parse(element.getAttribute("data-island-props") || "{}");
+		const parent = element.parentNode;
+		if (!parent) return;
+		const vnode = {
+			type: Component,
+			props,
+			children: []
+		};
+		const temp = document.createElement("div");
+		render(vnode, temp);
+		const children = Array.from(temp.childNodes);
+		for (const child of children) parent.insertBefore(child, element);
+		parent.removeChild(element);
+		markHydrated(islandId);
+		return;
+	}
+	const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_COMMENT);
+	let startComment = null;
+	let comment;
+	while (comment = walker.nextNode()) if (comment.textContent === `island:${islandId}`) {
+		startComment = comment;
+		break;
+	}
+	if (startComment) {
+		const script = document.querySelector(`script[data-island="${islandId}"]`);
+		const props = script ? JSON.parse(script.textContent || "{}") : {};
+		const nodesToRemove = [];
+		let sibling = startComment.nextSibling;
+		let endComment = null;
+		while (sibling) {
+			if (sibling.nodeType === Node.COMMENT_NODE && sibling.textContent === `/island:${islandId}`) {
+				endComment = sibling;
+				break;
+			}
+			nodesToRemove.push(sibling);
+			sibling = sibling.nextSibling;
+		}
+		for (const node of nodesToRemove) node.parentNode?.removeChild(node);
+		const vnode = {
+			type: Component,
+			props,
+			children: []
+		};
+		const parent = startComment.parentNode;
+		if (parent) {
+			const temp = document.createElement("div");
+			render(vnode, temp);
+			const children = Array.from(temp.childNodes);
+			for (const child of children) parent.insertBefore(child, endComment);
+		}
+		startComment.parentNode?.removeChild(startComment);
+		if (endComment) endComment.parentNode?.removeChild(endComment);
+		if (script) script.parentNode?.removeChild(script);
+		markHydrated(islandId);
+	}
+}
+/**
+* Find all islands on the page (both element and fragment types)
+*/
+function findAllIslands() {
+	const islands = [];
+	const elements = document.querySelectorAll("[data-island-id]");
+	for (const el of elements) {
+		const id = el.getAttribute("data-island-id");
+		const propsStr = el.getAttribute("data-island-props");
+		if (id) islands.push({
+			id,
+			props: propsStr ? JSON.parse(propsStr) : {},
+			element: el
+		});
+	}
+	const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_COMMENT);
+	let comment;
+	while (comment = walker.nextNode()) {
+		const match = comment.textContent?.match(/^island:(.+)$/);
+		if (match && match[1]) {
+			const id = match[1];
+			let endComment = null;
+			let sibling = comment.nextSibling;
+			while (sibling) {
+				if (sibling.nodeType === Node.COMMENT_NODE && sibling.textContent === `/island:${id}`) {
+					endComment = sibling;
+					break;
+				}
+				sibling = sibling.nextSibling;
+			}
+			const script = document.querySelector(`script[type="application/json"][data-island="${id}"]`);
+			const props = script ? JSON.parse(script.textContent || "{}") : {};
+			islands.push({
+				id,
+				props,
+				startComment: comment,
+				endComment: endComment || void 0
+			});
+		}
+	}
+	return islands;
+}
+/**
+* Hydrate all islands on the page
+* This function is typically called once after the page loads
+*
+* @example
+* ```tsx
+* // In your client entry point
+* import { hydrateIslands } from '@semajsx/ssr/client'
+*
+* // Wait for DOM to be ready
+* if (document.readyState === 'loading') {
+*   document.addEventListener('DOMContentLoaded', hydrateIslands)
+* } else {
+*   hydrateIslands()
+* }
+* ```
+*/
+async function hydrateIslands() {
+	const islands = findAllIslands();
+	if (islands.length === 0) return;
+	console.log(`[SemaJSX] Found ${islands.length} islands to hydrate`);
+	const hydrations = islands.map((island) => waitForIslandScript(island));
+	await Promise.all(hydrations);
+	console.log(`[SemaJSX] All islands hydrated`);
+}
+/**
+* Wait for an island's script to load and hydrate it
+* The actual hydration is performed by the island's entry point script
+* This function just waits for it to complete
+*/
+async function waitForIslandScript(island) {
+	const { id: islandId, element, startComment } = island;
+	if (element?.hasAttribute("data-hydrated")) return;
+	if (startComment?.parentElement?.querySelector(`[data-island-hydrated="${islandId}"]`)) return;
+	return new Promise((resolve) => {
+		const maxAttempts = 200;
+		let attempts = 0;
+		const checkInterval = setInterval(() => {
+			if (element ? element.hasAttribute("data-hydrated") : document.querySelector(`[data-island-hydrated="${islandId}"]`) !== null) {
+				clearInterval(checkInterval);
+				resolve();
+			} else if (++attempts >= maxAttempts) {
+				clearInterval(checkInterval);
+				console.warn(`[SemaJSX] Island ${islandId} hydration timeout`);
+				resolve();
+			}
+		}, 50);
+	});
+}
+/**
+* Get island info by ID
+*/
+function getIslandInfo(islandId) {
+	const element = document.querySelector(`[data-island-id="${islandId}"]`);
+	if (element) {
+		const propsStr = element.getAttribute("data-island-props");
+		return {
+			id: islandId,
+			props: propsStr ? JSON.parse(propsStr) : {},
+			element
+		};
+	}
+	const script = document.querySelector(`script[type="application/json"][data-island="${islandId}"]`);
+	if (script) {
+		const props = JSON.parse(script.textContent || "{}");
+		const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_COMMENT);
+		let comment;
+		while (comment = walker.nextNode()) if (comment.textContent === `island:${islandId}`) return {
+			id: islandId,
+			props,
+			startComment: comment
+		};
+	}
+	return null;
+}
+/**
+* Manual hydration for a specific island
+* Useful for lazy-loading islands on interaction
+*
+* @param islandId - The island ID to hydrate
+*
+* @example
+* ```tsx
+* // Lazy load an island on click
+* button.addEventListener('click', () => {
+*   hydrateIslandById('island-0')
+* })
+* ```
+*/
+async function hydrateIslandById(islandId) {
+	const island = getIslandInfo(islandId);
+	if (!island) {
+		console.error(`[SemaJSX] Island not found: ${islandId}`);
+		return;
+	}
+	await waitForIslandScript(island);
+}
+/**
+* Check if islands are present on the page
+*/
+function hasIslands() {
+	if (document.querySelectorAll("[data-island-id]").length > 0) return true;
+	return document.querySelectorAll("script[type=\"application/json\"][data-island]").length > 0;
+}
+/**
+* Get all island IDs on the page
+*/
+function getIslandIds() {
+	const ids = [];
+	const elements = document.querySelectorAll("[data-island-id]");
+	for (const el of elements) {
+		const id = el.getAttribute("data-island-id");
+		if (id) ids.push(id);
+	}
+	const scripts = document.querySelectorAll("script[type=\"application/json\"][data-island]");
+	for (const script of scripts) {
+		const id = script.getAttribute("data-island");
+		if (id) ids.push(id);
+	}
+	return ids;
+}
+/**
+* Mark an island as hydrated
+* This should be called by the island entry point after hydration completes
+*/
+function markIslandHydrated(islandId) {
+	const element = document.querySelector(`[data-island-id="${islandId}"]`);
+	if (element) {
+		element.setAttribute("data-hydrated", "true");
+		return;
+	}
+	const script = document.querySelector(`script[type="application/json"][data-island="${islandId}"]`);
+	if (script) {
+		script.setAttribute("data-island-hydrated", islandId);
+		script.remove();
+	}
+}
+/**
+* Reconstruct VNode children from serialized JSON data.
+*
+* Uses the island module's exports as a registry to resolve component names
+* (prefixed with "$") back to their actual functions.
+*
+* @param serialized - Serialized children array from SSR
+* @param registry - Module exports mapping component names to functions
+*/
+function reconstructChildren(serialized, registry) {
+	const result = [];
+	for (const node of serialized) {
+		if (node === null) continue;
+		if (typeof node === "string") {
+			result.push(node);
+			continue;
+		}
+		if (Array.isArray(node) && node.length === 3 && typeof node[0] === "string") {
+			const [type, props, children] = node;
+			if (type === "$island") {
+				result.push(null);
+				continue;
+			}
+			const resolvedChildren = children ? reconstructChildren(children, registry) : [];
+			if (type.startsWith("$")) {
+				const name = type.slice(1);
+				const component = registry[name];
+				if (!component || typeof component !== "function") {
+					console.warn(`[Hydrate] Unknown component "${name}" in island children`);
+					continue;
+				}
+				result.push(h(component, props || {}, ...resolvedChildren));
+			} else result.push(h(type, props || {}, ...resolvedChildren));
+		}
+	}
+	return result;
+}
+/**
+* Hydrate all islands with a given component source
+* Finds all elements with data-island-src and hydrates them
+*
+* @param componentSrc - The component source key (e.g., "components/Counter")
+* @param Component - The component function to render
+* @param registry - Optional module exports for reconstructing island children
+*
+* @example
+* ```tsx
+* import { hydrateAllIslands } from '@semajsx/ssr/client';
+* import * as CounterModule from './Counter';
+*
+* hydrateAllIslands('components/Counter', CounterModule.Counter, CounterModule);
+* ```
+*/
+function hydrateAllIslands(componentSrc, Component, registry) {
+	const elements = document.querySelectorAll(`[data-island-src="${componentSrc}"]`);
+	const scripts = document.querySelectorAll(`script[type="application/json"][data-island-src="${componentSrc}"]`);
+	elements.forEach((element) => {
+		const islandId = element.getAttribute("data-island-id");
+		if (!islandId) return;
+		if (element.hasAttribute("data-hydrated")) return;
+		try {
+			const props = JSON.parse(element.getAttribute("data-island-props") || "{}");
+			if (registry) {
+				const childrenScript = document.querySelector(`script[type="application/json"][data-island-children="${islandId}"]`);
+				if (childrenScript) {
+					try {
+						props.children = reconstructChildren(JSON.parse(childrenScript.textContent || "[]"), registry);
+					} catch (e) {
+						console.warn("[Hydrate] Failed to reconstruct island children:", e);
+					}
+					childrenScript.remove();
+				}
+			}
+			hydrateNode({
+				type: Component,
+				props,
+				children: []
+			}, element, element.parentNode);
+			element.setAttribute("data-hydrated", "true");
+		} catch (error) {
+			console.error(`[Hydrate] Island "${islandId}" hydration failed:`, error);
+			element.setAttribute("data-hydration-error", "true");
+		}
+	});
+	scripts.forEach((script) => {
+		const islandId = script.getAttribute("data-island");
+		if (!islandId) return;
+		if (script.hasAttribute("data-island-hydrated")) return;
+		try {
+			const props = JSON.parse(script.textContent || "{}");
+			if (registry) {
+				const childrenScript = document.querySelector(`script[type="application/json"][data-island-children="${islandId}"]`);
+				if (childrenScript) {
+					try {
+						props.children = reconstructChildren(JSON.parse(childrenScript.textContent || "[]"), registry);
+					} catch (e) {
+						console.warn("[Hydrate] Failed to reconstruct island children:", e);
+					}
+					childrenScript.remove();
+				}
+			}
+			const startMarker = `island:${islandId}`;
+			const endMarker = `/island:${islandId}`;
+			const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_COMMENT, null);
+			let startNode = null;
+			let endNode = null;
+			let node;
+			while (node = walker.nextNode()) if (node.nodeValue === startMarker) startNode = node;
+			else if (node.nodeValue === endMarker) {
+				endNode = node;
+				break;
+			}
+			if (startNode && endNode && startNode.parentNode) {
+				const parent = startNode.parentNode;
+				const container = document.createElement("div");
+				let current = startNode.nextSibling;
+				while (current && current !== endNode) {
+					const next = current.nextSibling;
+					container.appendChild(current);
+					current = next;
+				}
+				hydrateNode({
+					type: Component,
+					props,
+					children: []
+				}, container, container);
+				while (container.firstChild) parent.insertBefore(container.firstChild, endNode);
+				script.setAttribute("data-island-hydrated", islandId);
+				script.remove();
+			}
+		} catch (error) {
+			console.error(`[Hydrate] Fragment island "${islandId}" hydration failed:`, error);
+		}
+	});
+}
+
+//#endregion
+//#region ../ssr/src/client/client-resource.ts
+let _manifest = null;
+const loadedStyles = /* @__PURE__ */ new Set();
+/**
+* Set the client manifest (called during initialization)
+*/
+function setManifest(manifest) {
+	_manifest = manifest;
+}
+/**
+* Get the current manifest
+*/
+function getManifest() {
+	return _manifest;
+}
+/**
+* Resolve a CSS path using the manifest
+*/
+function resolveCSS(href) {
+	if (!_manifest) return href;
+	const lookupPath = href.startsWith("/") ? href.slice(1) : href;
+	return _manifest.css[lookupPath] || href;
+}
+/**
+* Resolve an asset path using the manifest
+*/
+function resolveAsset(src) {
+	if (!_manifest) return src;
+	const lookupPath = src.startsWith("/") ? src.slice(1) : src;
+	return _manifest.assets[lookupPath] || src;
+}
+/**
+* Dynamically load a stylesheet
+*/
+function loadStylesheet(href) {
+	const resolvedHref = resolveCSS(href);
+	if (loadedStyles.has(resolvedHref)) return Promise.resolve();
+	return new Promise((resolve, reject) => {
+		if (document.querySelector(`link[href="${resolvedHref}"]`)) {
+			loadedStyles.add(resolvedHref);
+			resolve();
+			return;
+		}
+		const link = document.createElement("link");
+		link.rel = "stylesheet";
+		link.href = resolvedHref;
+		link.onload = () => {
+			loadedStyles.add(resolvedHref);
+			resolve();
+		};
+		link.onerror = () => {
+			reject(/* @__PURE__ */ new Error(`Failed to load stylesheet: ${resolvedHref}`));
+		};
+		document.head.appendChild(link);
+	});
+}
+/**
+* Create client-side resource tools
+*
+* @example
+* ```tsx
+* import { clientResource } from '@semajsx/ssr/client';
+*
+* const { Style, url } = clientResource();
+*
+* export default function Counter() {
+*   return (
+*     <>
+*       <Style href="./counter.css" />
+*       <img src={url('./icon.png')} />
+*     </>
+*   );
+* }
+* ```
+*/
+function clientResource() {
+	return {
+		Style({ href }) {
+			if (typeof document !== "undefined") loadStylesheet(href);
+			return null;
+		},
+		url(path) {
+			return resolveAsset(path);
+		}
+	};
+}
+
+//#endregion
+export { resolveCSS as a, getIslandInfo as c, hydrateAllIslands as d, hydrateIsland as f, markIslandHydrated as h, resolveAsset as i, hasIslands as l, hydrateIslands as m, getManifest as n, setManifest as o, hydrateIslandById as p, loadStylesheet as r, getIslandIds as s, clientResource as t, hydrate as u };
+//# sourceMappingURL=client-CButR91p.mjs.map