revojs 0.0.1 → 0.0.3

package/dist/index.js

@@ -1,107 +1,249 @@
-import defu, { defu as defu$1 } from "defu";
+import { defu } from "defu";
 import { h } from "revojs/jsx-runtime";
 
 //#region src/app/index.ts
-const getAssets = async (regex) => {
-	const assets = await import("#virtual/assets").then((module) => module.assets);
-	return Object.entries(assets).reduce((assets$1, [name, value]) => {
-		if (regex.test(name)) assets$1[name] = value;
-		return assets$1;
-	}, {});
+const defineContent = (key) => {
+	return Object.assign(String(key), { key });
+};
+const getContent = async (key) => {
+	return await import("#virtual/content").then((module) => module.index[key.toString()]);
 };
 const createApp = (config) => {
 	return {
-		config: defu$1(config, {
-			assets: [{ path: "./assets" }],
-			routes: [{ path: "./routes" }],
+		config: defu(config, {
 			client: { entry: "./index.html" },
 			server: { entry: "revojs/presets/node" },
-			markdown: {}
+			content: {
+				[STATIC_CONTENT]: {
+					type: "static",
+					source: "./dist/client",
+					include: ["**/*.*"]
+				},
+				[PAGES_CONTENT]: {
+					type: "asset",
+					source: "./routes",
+					include: [
+						"**/*.js",
+						"**/*.ts",
+						"**/*.jsx",
+						"**/*.tsx",
+						"!**/*.*.js",
+						"!**/*.*.ts",
+						"!**/*.*.jsx",
+						"!**/*.*.tsx"
+					]
+				},
+				[ROUTES_CONTENT]: {
+					type: "asset",
+					source: "./routes",
+					include: [
+						"**/*.*.js",
+						"**/*.*.ts",
+						"**/*.*.jsx",
+						"**/*.*.tsx"
+					]
+				}
+			},
+			markdown: {},
+			dev: { middleware: [] }
 		}),
 		virtuals: {}
 	};
 };
+const STATIC_CONTENT = defineContent("STATIC");
+const PAGES_CONTENT = defineContent("PAGES");
+const ROUTES_CONTENT = defineContent("ROUTES");
 
 //#endregion
-//#region src/event/index.ts
-const createEvent = (request, context) => {
-	return {
-		request,
-		response: { headers: new Headers() },
-		context
-	};
-};
-const sendText = (event, text) => {
-	return new Response(text, event.response);
-};
-const sendHtml = (event, text) => {
-	setHeader(event, "Content-Type", "text/html");
-	return new Response(text, event.response);
-};
-const sendJson = (event, value) => {
-	return new Response(JSON.stringify(value), event.response);
-};
-const setHeader = (event, name, value) => {
-	event.response.headers.set(name, value);
+//#region src/jsx/index.ts
+const svgElements = new Set([
+	"altGlyph",
+	"altGlyphDef",
+	"altGlyphItem",
+	"animate",
+	"animateColor",
+	"animateMotion",
+	"animateTransform",
+	"circle",
+	"clipPath",
+	"color-profile",
+	"cursor",
+	"defs",
+	"desc",
+	"ellipse",
+	"feBlend",
+	"feColorMatrix",
+	"feComponentTransfer",
+	"feComposite",
+	"feConvolveMatrix",
+	"feDiffuseLighting",
+	"feDisplacementMap",
+	"feDistantLight",
+	"feDropShadow",
+	"feFlood",
+	"feFuncA",
+	"feFuncB",
+	"feFuncG",
+	"feFuncR",
+	"feGaussianBlur",
+	"feImage",
+	"feMerge",
+	"feMergeNode",
+	"feMorphology",
+	"feOffset",
+	"fePointLight",
+	"feSpecularLighting",
+	"feSpotLight",
+	"feTile",
+	"feTurbulence",
+	"filter",
+	"font",
+	"font-face",
+	"font-face-format",
+	"font-face-name",
+	"font-face-src",
+	"font-face-uri",
+	"foreignObject",
+	"g",
+	"glyph",
+	"glyphRef",
+	"hkern",
+	"image",
+	"line",
+	"linearGradient",
+	"marker",
+	"mask",
+	"metadata",
+	"missing-glyph",
+	"mpath",
+	"path",
+	"pattern",
+	"polygon",
+	"polyline",
+	"radialGradient",
+	"rect",
+	"set",
+	"stop",
+	"svg",
+	"switch",
+	"symbol",
+	"text",
+	"textPath",
+	"tref",
+	"tspan",
+	"use",
+	"view",
+	"vkern"
+]);
+const namespace = (tag) => {
+	return svgElements.has(tag) ? "http://www.w3.org/2000/svg" : "http://www.w3.org/1999/xhtml";
 };
 
 //#endregion
 //#region src/signals/index.ts
+var Scope = class {
+	dispose;
+	constructor() {
+		this.dispose = new Array();
+	}
+	run(invoke) {
+		let previous = activeScope;
+		activeScope = this;
+		try {
+			return invoke();
+		} finally {
+			activeScope = previous;
+		}
+	}
+	stop() {
+		while (this.dispose.length) this.dispose.pop()?.(this);
+	}
+};
+var Compute = class {
+	invoke;
+	scope;
+	constructor(invoke) {
+		this.invoke = invoke;
+		this.scope = new Scope();
+	}
+	run() {
+		this.scope.stop();
+		return this.scope.run(this.invoke);
+	}
+};
 var Handler = class Handler {
-	get = (target, path) => {
-		if (runningCompute) {
-			const effects = targets.get(target) ?? new Map();
-			const set = effects.get(path) ?? new Set();
-			effects.set(path, set.add(runningCompute));
-			targets.set(target, effects);
-			runningCompute.previous?.cleanUps.push((compute) => set.delete(compute));
+	get(target, key) {
+		const compute = activeCompute;
+		if (compute) {
+			const computes = targets.get(target) ?? new Map();
+			const set = computes.get(key) ?? new Set();
+			computes.set(key, set.add(compute));
+			targets.set(target, computes);
+			onCleanUp(() => {
+				compute.scope.stop();
+				set.delete(compute);
+			});
 		}
-		const value = Reflect.get(target, path);
-		if (value instanceof Object) return new Proxy(value, new Handler());
-		return value;
-	};
-	set = (target, path, value) => {
-		const result = Reflect.set(target, path, value);
-		for (const effect of targets.get(target)?.get(path) ?? []) {
-			while (effect.cleanUps.length) effect.cleanUps.pop()?.(effect);
-			effect.invoke();
+		const value = Reflect.get(target, key);
+		if (value) {
+			if (typeof value === "function") return value.bind(target);
+			if (typeof value === "object") return new Proxy(value, new Handler());
 		}
+		return value;
+	}
+	set(target, key, value) {
+		const result = Reflect.set(target, key, value);
+		for (const compute of targets.get(target)?.get(key) ?? []) compute.run();
 		return result;
-	};
+	}
 };
-const createState = (value) => {
+function createState(value) {
 	return new Proxy({ value }, new Handler());
-};
-const createCompute = (invoke) => {
-	return runCompute({
-		invoke,
-		cleanUps: []
-	});
-};
-const runCompute = (compute) => {
-	compute.previous = runningCompute;
-	runningCompute = compute;
+}
+function createCompute(invoke) {
+	let previous = activeCompute;
+	activeCompute = new Compute(invoke);
 	try {
-		return compute.invoke();
+		return invoke();
 	} finally {
-		runningCompute = compute.previous;
+		activeCompute = previous;
 	}
-};
-const fromValue = (value) => {
+}
+function createMemo(invoke) {
+	let state;
+	const compute = createCompute(() => {
+		const value = invoke();
+		if (typeof state === "object") state.value = value;
+		return value;
+	});
+	state = createState(compute);
+	return state;
+}
+function onCleanUp(invoke) {
+	activeScope?.dispose.push(invoke);
+}
+function fromValue(value) {
 	if (value) {
 		if (value instanceof Function) return fromValue(value());
 		if (value instanceof Object) return value.value;
 	}
 	return value;
-};
-const onCleanUp = (cleanUp) => {
-	runningCompute?.cleanUps.push(cleanUp);
-};
+}
+let activeScope;
+let activeCompute;
 const targets = new WeakMap();
-let runningCompute;
 
 //#endregion
 //#region src/html/index.ts
+const isTemplate = (value) => {
+	return "tag" in value && "attributes" in value && "children" in value;
+};
+const descriptor = (descriptor$1) => {
+	return (typeof descriptor$1 === "object" ? descriptor$1.key : descriptor$1).toString();
+};
+const defineContext = (description) => {
+	return { key: Symbol(description) };
+};
 const createElement = (input, attributes, ...children) => {
 	return {
 		tag: typeof input === "function" ? input.$name : input,
@@ -121,59 +263,85 @@ const toString = (slot) => {
 		default: return "";
 	}
 };
-const slotToString = async (slot) => {
-	if (Array.isArray(slot)) return await Promise.all(slot.map(slotToString)).then((chunks) => chunks.join(" "));
-	if (typeof slot === "number" || typeof slot === "bigint" || typeof slot === "boolean" || typeof slot === "string" || typeof slot === "symbol") return toString(slot);
-	if (typeof slot === "function") return await slotToString(await slot());
+const toFragment = (nodes) => {
+	const fragment = document.createDocumentFragment();
+	fragment.replaceChildren(...nodes);
+	return fragment;
+};
+const renderToString = async (slot, context) => {
+	if (typeof slot === "number" || typeof slot === "bigint" || typeof slot === "boolean" || typeof slot === "string" || typeof slot === "symbol") return slot.toString();
+	if (typeof slot === "function") return await renderToString(await slot(), context);
 	if (typeof slot === "object") {
-		if ("tag" in slot && "attributes" in slot && "children" in slot) {
-			const Constructor = components.get(slot.tag);
-			const prefix = [slot.tag, ...Object.entries(slot.attributes ?? {}).map(([name, value]) => {
-				if (!name.startsWith("on")) return `${name}="${toString(value)}"`;
-			})].filter(Boolean).join(" ");
-			const children = await slotToString(slot.children);
-			if (Constructor) {
-				const component = new Constructor(slot.attributes);
-				const template = await slotToString(await component.setup());
-				if (component.shadowRoot) return `<${prefix}> <template shadowRootMode="${component.shadowRoot.mode}"> ${template} </template> ${children} </${slot.tag}>`;
-				return `<${prefix}> ${template} ${children} </${slot.tag}>`;
+		if (Array.isArray(slot)) return await Promise.all(slot.map((slot$1) => renderToString(slot$1, context))).then((chunks) => chunks.join(""));
+		if (isTemplate(slot)) {
+			const customElement = components.get(slot.tag);
+			const prefix = Object.entries(slot.attributes).reduce((chunks, [name, value]) => {
+				if (!name.startsWith("on")) chunks.push(`${name}='${toString(value)}'`);
+				return chunks;
+			}, [slot.tag]).join(" ");
+			const children = await renderToString(slot.children, context);
+			if (customElement) {
+				const element = new customElement(slot.attributes, context);
+				const template = await renderToString(await element.setup(), context);
+				if (element.shadowRoot) {
+					const shadow = await renderToString({
+						tag: "template",
+						attributes: { shadowRootMode: element.shadowRoot.mode },
+						children: [template]
+					}, context);
+					return `<${prefix}>` + shadow + children + `</${slot.tag}>`;
+				}
+				return `<${prefix}>` + template + children + `</${slot.tag}>`;
 			}
-			return `<${prefix}> ${children} </${slot.tag}>`;
+			return `<${prefix}>` + children + `</${slot.tag}>`;
 		}
-		return toString(slot);
+		return JSON.stringify(slot);
 	}
-	return "";
+	return "<!---->";
 };
-const slotToNode = async (slot) => {
-	if (Array.isArray(slot)) {
-		const fragment = document.createDocumentFragment();
-		fragment.replaceChildren(...await Promise.all(slot.map(slotToNode)));
-		return fragment;
-	}
+const renderToNode = async (slot) => {
 	if (typeof slot === "number" || typeof slot === "bigint" || typeof slot === "boolean" || typeof slot === "string" || typeof slot === "symbol") return document.createTextNode(slot.toString());
 	if (typeof slot === "function") {
-		let oldNode;
-		return await createCompute(async () => {
-			const node = await slotToNode(await slot());
-			oldNode?.parentNode?.replaceChild(node, oldNode);
-			oldNode = node;
-			return node;
+		let node;
+		await createCompute(async () => {
+			let input = slot;
+			let parentNode = Array.isArray(node) ? node.at(0)?.parentNode : node?.parentNode;
+			while (typeof input === "function") input = await input();
+			let next = await (Array.isArray(input) ? Promise.all(input.map(renderToNode)) : renderToNode(input));
+			if (Array.isArray(next)) if (Array.isArray(node)) {
+				if (parentNode) {
+					const range = document.createRange();
+					const firstNode = node.at(0);
+					if (firstNode) range.setStartBefore(firstNode);
+					const lastNode = node.at(-1);
+					if (lastNode) range.setEndAfter(lastNode);
+					range.deleteContents();
+					for (const child of next) parentNode?.appendChild(child);
+				}
+			} else node?.parentNode?.replaceChild(toFragment(next), node);
+			else if (Array.isArray(node)) {} else node?.parentNode?.replaceChild(next, node);
+			node = next;
 		});
+		if (Array.isArray(node)) return toFragment(node);
+		return node ?? document.createComment("");
 	}
 	if (typeof slot === "object") {
-		if ("tag" in slot && "attributes" in slot && "children" in slot) {
-			const node = document.createElement(slot.tag);
-			for (const key in slot.attributes) {
-				const value = slot.attributes[key];
-				if (value) if (key.startsWith("on")) {
-					const event = key.substring(2).toLowerCase();
-					node.addEventListener(event, value);
-					onCleanUp(() => node.removeEventListener(event, value));
-				} else node.setAttribute(key, toString(value));
+		if (Array.isArray(slot)) return toFragment(await Promise.all(slot.map(renderToNode)));
+		if (isTemplate(slot)) {
+			const element = document.createElementNS(namespace(slot.tag), slot.tag);
+			for (const name in slot.attributes) {
+				const value = slot.attributes[name];
+				if (value) if (name.startsWith("on") && typeof value === "function") {
+					const event = name.substring(2).toLowerCase();
+					const controller = new AbortController();
+					element.addEventListener(event, value, { signal: controller.signal });
+					onCleanUp(() => controller.abort());
+				} else createCompute(() => element.setAttribute(name, toString(value)));
 			}
-			node.replaceChildren(await slotToNode(slot.children));
-			return node;
+			element.replaceChildren(await renderToNode(slot.children));
+			return element;
 		}
+		return document.createTextNode(JSON.stringify(slot));
 	}
 	return document.createComment("");
 };
@@ -185,7 +353,8 @@ const defineComponent = (options) => {
 		events;
 		attributes;
 		shadowRoot;
-		constructor(input) {
+		context;
+		constructor(input, context) {
 			this.events = Object.keys(options.events ?? {}).reduce((output, name) => {
 				Reflect.set(output, name, input?.[name], output);
 				return output;
@@ -195,34 +364,48 @@ const defineComponent = (options) => {
 				return output;
 			}, createState({}));
 			this.shadowRoot = options.shadowRoot ?? { mode: "open" };
+			this.context = context ?? {};
 		}
+		getContext = (input) => {
+			return this.context[descriptor(input)];
+		};
+		setContext = (input, value) => {
+			this.context[descriptor(input)] = value;
+		};
 		setup = () => options.setup(this);
 	});
 };
 const toCustomElement = (component) => {
 	return class extends HTMLElement {
+		static formAssociated = true;
+		scope;
 		component;
 		constructor() {
 			super();
+			this.scope = new Scope();
 			this.component = new component();
 		}
 		async connectedCallback() {
 			let previous = activeElement;
+			const parentNode = getCustomElement(this.parentNode);
 			activeElement = this;
 			try {
 				const shadow = this.component.shadowRoot ? this.attachShadow(this.component.shadowRoot) : this;
 				for (const [name, event] of Object.entries(component.$events)) Reflect.set(this.component.events, name, (value) => {
+					if (value instanceof Event) return;
 					this.dispatchEvent(new CustomEvent(name.substring(2).toLowerCase(), {
 						...event,
 						detail: value
 					}));
 				}, this.component.events);
-				shadow.replaceChildren(await slotToNode(await this.component.setup()));
+				if (parentNode) for (const key in parentNode.component.context) this.component.setContext(key, parentNode.component.context[key]);
+				await this.scope.run(async () => shadow.replaceChildren(await renderToNode(await this.component.setup())));
 			} finally {
 				activeElement = previous;
 			}
 		}
-		attributeChangedCallback(name, _, value) {
+		attributeChangedCallback(name, oldValue, value) {
+			if (value === oldValue) return;
 			const attribute = component.$attributes?.[name];
 			if (attribute) {
 				let convertedValue;
@@ -243,6 +426,9 @@ const toCustomElement = (component) => {
 				Reflect.set(this.component.attributes.value, name, convertedValue ?? attribute.default, this.component.attributes.value);
 			}
 		}
+		disconnectedCallback() {
+			this.scope.stop();
+		}
 		static get observedAttributes() {
 			return Object.keys(component.$attributes ?? {});
 		}
@@ -270,21 +456,121 @@ const getGlobalStyles = () => {
 		return sheet;
 	});
 };
-let globalStyles;
+const getCustomElement = (node) => {
+	if (node) {
+		if ("component" in node) return node;
+		return getCustomElement(node.parentNode);
+	}
+};
+const preventDefault = (event) => {
+	event.preventDefault();
+};
+const stopPropagation = (event) => {
+	event.stopPropagation();
+};
+const stopImmediatePropagation = (event) => {
+	event.stopImmediatePropagation();
+};
 let activeElement;
 const components = new Map();
 
+//#endregion
+//#region src/hooks/index.ts
+var Hooks = class {
+	hooks;
+	constructor() {
+		this.hooks = new Map();
+	}
+	on = (input, invoke) => {
+		const key = descriptor(input);
+		const invokes = this.hooks.get(key) ?? new Set();
+		invokes.add(invoke);
+		this.hooks.set(key, invokes);
+		return onCleanUp(() => invokes.delete(invoke));
+	};
+	dispatch = (input, value) => {
+		const invokes = this.hooks.get(descriptor(input));
+		if (invokes) for (const invoke of invokes) invoke(value);
+	};
+};
+const defineHook = (description) => {
+	return { key: Symbol(description) };
+};
+
 //#endregion
 //#region src/http/index.ts
-const mimeTypes = {
-	css: "text/css",
-	js: "text/javascript",
-	txt: "text/plain"
+const createEvent = (request, context) => {
+	return {
+		request,
+		response: { headers: new Headers() },
+		context
+	};
+};
+const sendText = (event, text) => {
+	event.response.headers.set("Content-Type", "text/plain");
+	return new Response(text, event.response);
+};
+const sendHtml = (event, text) => {
+	event.response.headers.set("Content-Type", "text/html");
+	return new Response(text, event.response);
+};
+const sendJson = (event, value) => {
+	event.response.headers.set("Content-Type", "application/json");
+	return new Response(JSON.stringify(value), event.response);
+};
+const sendRedirect = (event, path) => {
+	event.response.status = 302;
+	event.response.headers.set("Location", path);
+	return new Response(null, event.response);
+};
+const sendBadRequest = (event, text) => {
+	event.response.status = 400;
+	return new Response(text, event.response);
+};
+const sendUnauthorized = (event) => {
+	event.response.status = 401;
+	return new Response(null, event.response);
+};
+const getRequestUrl = (event) => {
+	return new URL(event instanceof Request ? event.url : event.request.url);
+};
+const getCookies = (event) => {
+	const cookies = event.request.headers.get("Cookie")?.split("; ") ?? [];
+	return cookies.reduce((result, cookie) => {
+		const [name, value] = cookie.split("=");
+		if (name && value) result[name] = decodeURIComponent(value);
+		return result;
+	}, {});
+};
+const getSetCookies = (event) => {
+	const cookies = event.request.headers.getSetCookie();
+	return cookies.reduce((result, cookie) => {
+		const [name, value] = cookie.split("=");
+		if (name && value) result[name] = decodeURIComponent(value);
+		return result;
+	}, {});
+};
+const setCookie = (event, name, value, options) => {
+	let cookie = name + "=" + encodeURIComponent(value);
+	if (options?.domain) cookie += `; Domain=${options.domain}`;
+	if (options?.expires) cookie += `; Expires=${options.expires.toUTCString()}`;
+	if (options?.httpOnly) cookie += `; HttpOnly`;
+	if (options?.maxAge) cookie += `; Max-Age=${options.maxAge}`;
+	if (options?.path) cookie += `; Path=${options.path}`;
+	if (options?.priority) cookie += `; Priority=${options.priority}`;
+	if (options?.sameSite) cookie += `; SameSite=${options.sameSite}`;
+	if (options?.secure) cookie += `; Secure`;
+	event.response.headers.append("Set-Cookie", cookie);
 };
 const getMimeType = (file) => {
 	const extension = /\.([a-zA-Z0-9]+?)$/.exec(file)?.at(1);
 	return mimeTypes[extension ?? ""] ?? "text/plain";
 };
+const mimeTypes = {
+	css: "text/css",
+	js: "text/javascript",
+	txt: "text/plain"
+};
 
 //#endregion
 //#region src/markdown/index.ts
@@ -424,44 +710,79 @@ var Radix = class Radix {
 const defineRoute = (route) => {
 	return route;
 };
-const defineSocket = (socket) => {
-	return socket;
+const fileName = (path) => {
+	return path.split("/").pop()?.split(".").slice(0, -1).join(".");
 };
 const toPath = (value) => {
-	return value.replace(/\/index/, "").replace(/\.(js|ts|jsx|tsx)$/, "").replaceAll(/\[(.*)\]/g, (_, name) => ":" + name).padStart(1, "/");
+	const path = (value.startsWith("/") ? value : "/" + value).replaceAll(/\/index/g, "").replaceAll(/\[(.*)\]/g, (_, name) => ":" + name);
+	return (path.startsWith("/") ? path : "/" + path).split(".");
+};
+const $fetch = async (input, init) => {
+	let response;
+	if (activeEvent) {
+		const url = new URL(input.toString(), activeEvent.request.url);
+		response = await (await import("#virtual/runtime")).runtime.fetch(new Request(url, init), activeEvent.context);
+	} else response = await fetch(input, init);
+	if (response.ok === false) throw response;
+	switch (response.headers.get("Content-Type")) {
+		case "application/json": return response.json();
+		default: return response;
+	}
+};
+const getVariables = (event) => {
+	return event ? event.context.variables : import.meta.env;
 };
 const createRuntime = async () => {
 	const radix = new Radix();
-	const assets = await import("#virtual/assets").then((module) => module.assets);
-	for (const path in assets) radix.insert("GET" + path, defineRoute({ fetch: async (event) => {
-		setHeader(event, "Content-Type", getMimeType(path));
-		return sendText(event, await assets[path]());
+	const middlewares = new Array();
+	const assets = await getContent(STATIC_CONTENT);
+	for (const path in assets) radix.insert("GET/" + path, defineRoute({ fetch: async (event) => {
+		event.response.headers.set("Content-Type", getMimeType(path));
+		return new Response(await assets[path]?.(), event.response);
 	} }));
-	const routes = await import("#virtual/routes").then((module) => module.routes);
-	for (const path in routes) radix.insert("GET" + toPath(path), defineRoute({ fetch: async (event) => {
-		const route = await routes[path]();
-		if (route) {
-			if ("message" in route) return sendText(event, "WebSocket");
-			if ("$name" in route) {
-				const slot = await import("#virtual/client").then((module) => module.index);
-				return sendHtml(event, await slotToString(slot));
+	const pages = await getContent(PAGES_CONTENT);
+	for (const path in pages) {
+		const [name] = toPath(path);
+		radix.insert("GET" + name, defineRoute({ fetch: async (event) => {
+			const slot = await import("#virtual/client").then((module) => module.index);
+			return sendHtml(event, await renderToString(slot, {}));
+		} }));
+	}
+	const routes = await getContent(ROUTES_CONTENT);
+	for (const path in routes) {
+		const [name, method] = toPath(path);
+		radix.insert((method ?? "GET").toUpperCase() + name, defineRoute({ fetch: async (event) => {
+			const route = await routes[path]?.();
+			if (route) return route.fetch(event);
+		} }));
+	}
+	const invoke = (event, next, index) => {
+		return middlewares.at(index)?.(event, () => invoke(event, next, index + 1)) ?? next(event);
+	};
+	return {
+		radix,
+		middlewares,
+		fetch: async (request, context) => {
+			const url = getRequestUrl(request);
+			const { value: route, inputs } = radix.match(request.method + url.pathname);
+			activeEvent = createEvent(request, {
+				...context,
+				inputs
+			});
+			try {
+				if (route) {
+					const response = await invoke(activeEvent, route.fetch, 0);
+					if (response) return response;
+				}
+				return sendText(activeEvent, "Not found");
+			} catch (response) {
+				if (response instanceof Response) return response;
+				throw response;
+			} finally {
+				activeEvent = undefined;
 			}
-			return route.fetch(event);
 		}
-	} }));
-	return { fetch: async (request, context) => {
-		const url = new URL(request.url);
-		const { value: route, inputs } = radix.match(request.method + url.pathname);
-		activeEvent = createEvent(request, {
-			...context,
-			inputs
-		});
-		try {
-			return await route?.fetch(activeEvent) ?? sendText(activeEvent, "Not found");
-		} finally {
-			activeEvent = undefined;
-		}
-	} };
+	};
 };
 let activeEvent;
 
@@ -469,10 +790,14 @@ let activeEvent;
 //#region src/router/index.tsx
 const Outlet = defineComponent({
 	name: "x-outlet",
+	shadowRoot: false,
 	setup: async () => {
 		const radix = new Radix();
-		const routes = await import("#virtual/routes").then((module) => module.routes);
-		for (const path in routes) radix.insert("GET" + toPath(path), routes[path]);
+		const routes = await getContent(PAGES_CONTENT);
+		for (const path in routes) {
+			const [name] = toPath(path);
+			radix.insert(name, routes[path]);
+		}
 		const url = createState(new URL(activeEvent ? activeEvent.request.url : window.location.href));
 		if (isClient()) {
 			const controller = new AbortController();
@@ -480,7 +805,7 @@ const Outlet = defineComponent({
 			onCleanUp(() => controller.abort());
 		}
 		return async () => {
-			const { value, inputs } = radix.match("GET" + url.value.pathname);
+			const { value, inputs } = radix.match(url.value.pathname);
 			const Page = await value?.();
 			if (Page) return h(Page, inputs);
 		};
@@ -499,4 +824,4 @@ const anchorNavigate = (event) => {
 };
 
 //#endregion
-export { Handler, Outlet, Radix, activeElement, activeEvent, addStyles, anchorNavigate, components, createApp, createCompute, createElement, createEvent, createRuntime, createState, defineComponent, defineRoute, defineSocket, fromValue, getAssets, getGlobalStyles, getMimeType, globalStyles, isClient, isServer, markdownToSlot, navigate, onCleanUp, registerComponent, runCompute, runningCompute, sendHtml, sendJson, sendText, setHeader, slotToNode, slotToString, targets, toCustomElement, toPath, toString };
+export { $fetch, Compute, Handler, Hooks, Outlet, PAGES_CONTENT, ROUTES_CONTENT, Radix, STATIC_CONTENT, Scope, activeCompute, activeElement, activeEvent, activeScope, addStyles, anchorNavigate, components, createApp, createCompute, createElement, createEvent, createMemo, createRuntime, createState, defineComponent, defineContent, defineContext, defineHook, defineRoute, descriptor, fileName, fromValue, getContent, getCookies, getCustomElement, getGlobalStyles, getMimeType, getRequestUrl, getSetCookies, getVariables, isClient, isServer, isTemplate, markdownToSlot, navigate, onCleanUp, preventDefault, registerComponent, renderToNode, renderToString, sendBadRequest, sendHtml, sendJson, sendRedirect, sendText, sendUnauthorized, setCookie, stopImmediatePropagation, stopPropagation, targets, toCustomElement, toFragment, toPath, toString };