revojs 0.0.2 → 0.0.4

package/dist/index.js

@@ -1,118 +1,226 @@
-import defu, { defu as defu$1 } from "defu";
+import { defu } from "defu";
 import { h } from "revojs/jsx-runtime";
 
 //#region src/app/index.ts
-const getContent = async (key) => {
-	return await import("#virtual/content").then((module) => module.index[key]);
+const getRoutes = async () => {
+	return await import("#virtual/routes").then((module) => module.index);
+};
+const getAssets = async () => {
+	return await import("#virtual/assets").then((module) => module.index);
 };
 const createApp = (config) => {
 	return {
-		config: defu$1(config, {
+		config: defu(config, {
 			client: { entry: "./index.html" },
 			server: { entry: "revojs/presets/node" },
-			content: {
-				static: {
-					type: "static",
-					source: "./dist/client",
-					include: ["**/*.*"]
-				},
-				routes: {
-					type: "asset",
-					source: "./routes",
-					include: [
-						"**/*.js",
-						"**/*.ts",
-						"**/*.jsx",
-						"**/*.tsx"
-					]
-				}
-			},
-			markdown: {}
+			markdown: {},
+			dev: { middleware: [] }
 		}),
 		virtuals: {}
 	};
 };
 
 //#endregion
-//#region src/event/index.ts
-const createEvent = (request, context) => {
-	return {
-		request,
-		response: { headers: new Headers() },
-		context
-	};
+//#region src/types/index.ts
+const descriptor = (descriptor$1) => {
+	return (typeof descriptor$1 === "object" ? descriptor$1.key : descriptor$1).toString();
 };
-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);
+
+//#endregion
+//#region src/hooks/index.ts
+var Hooks = class {
+	hooks;
+	constructor() {
+		this.hooks = new Map();
+	}
+	on = (scope, input, invoke) => {
+		const key = descriptor(input);
+		const invokes = this.hooks.get(key) ?? new Set();
+		invokes.add(invoke);
+		this.hooks.set(key, invokes);
+		return scope.dispose.push(() => invokes.delete(invoke));
+	};
+	dispatch = (input, value) => {
+		const invokes = this.hooks.get(descriptor(input));
+		if (invokes) for (const invoke of invokes) invoke(value);
+	};
 };
-const sendJson = (event, value) => {
-	return new Response(JSON.stringify(value), event.response);
+const defineHook = (description) => {
+	return { key: Symbol(description) };
 };
-const setHeader = (event, name, value) => {
-	event.response.headers.set(name, value);
+
+//#endregion
+//#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();
+	}
+	stop() {
+		while (this.dispose.length) this.dispose.pop()?.(this);
+	}
+};
+var Compute = class extends Scope {
+	scope;
+	invoke;
+	constructor(scope, invoke) {
+		super();
+		this.scope = scope;
+		this.invoke = invoke;
+	}
+	run() {
+		this.stop();
+		return this.invoke(this);
+	}
+};
 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);
+			compute.scope.dispose.push(() => {
+				compute.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(scope, invoke) {
+	let previous = activeCompute;
+	activeCompute = new Compute(scope, invoke);
 	try {
-		return compute.invoke();
+		return invoke(activeCompute);
 	} finally {
-		runningCompute = compute.previous;
-	}
-};
-const fromValue = (value) => {
-	if (value) {
-		if (value instanceof Function) return fromValue(value());
-		if (value instanceof Object) return value.value;
+		activeCompute = previous;
 	}
+}
+function createMemo(scope, invoke) {
+	let state;
+	const compute = createCompute(scope, () => {
+		const value = invoke();
+		if (typeof state === "object") state.value = value;
+		return value;
+	});
+	state = createState(compute);
+	return state;
+}
+function fromValue(value) {
+	if (value instanceof Function) return fromValue(value());
 	return value;
-};
-const onCleanUp = (cleanUp) => {
-	runningCompute?.cleanUps.push(cleanUp);
-};
+}
+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 defineContext = (description) => {
+	return { key: Symbol(description) };
+};
 const createElement = (input, attributes, ...children) => {
 	return {
 		tag: typeof input === "function" ? input.$name : input,
@@ -132,58 +240,107 @@ 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());
-	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}>`;
+const toFragment = (nodes) => {
+	const fragment = document.createDocumentFragment();
+	fragment.replaceChildren(...nodes);
+	return fragment;
+};
+const renderToString = async (slot, context) => {
+	if (slot) {
+		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 (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 JSON.stringify(slot);
 		}
-		return toString(slot);
 	}
-	return "";
-};
-const slotToNode = async (slot) => {
-	if (Array.isArray(slot)) {
-		const fragment = document.createDocumentFragment();
-		fragment.replaceChildren(...await Promise.all(slot.map(slotToNode)));
-		return fragment;
-	}
-	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;
-		});
-	}
-	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));
+	return "<!---->";
+};
+const renderToNode = async (scope, slot) => {
+	if (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 node;
+			await createCompute(scope, async (scope$1) => {
+				let next;
+				let input = slot;
+				let parentNode = Array.isArray(node) ? node.at(0)?.parentNode : node?.parentNode;
+				while (typeof input === "function") input = await input();
+				if (Array.isArray(input)) if (input.length) next = await Promise.all(input.map((child) => renderToNode(scope$1, child)));
+				else next = document.createComment("");
+				else next = await renderToNode(scope$1, 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)) {
+					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();
+						parentNode?.appendChild(next);
+					}
+				} else node?.parentNode?.replaceChild(next, node);
+				node = next;
+			});
+			if (Array.isArray(node)) return toFragment(node);
+			return node ?? document.createComment("");
+		}
+		if (typeof slot === "object") {
+			if (Array.isArray(slot)) {
+				if (slot.length) {
+					const children = await Promise.all(slot.map((child) => renderToNode(scope, child)));
+					return toFragment(children);
+				}
+				return document.createComment("");
+			}
+			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 });
+						scope.dispose.push(() => controller.abort());
+					} else createCompute(scope, () => element.setAttribute(name, toString(value)));
+				}
+				element.replaceChildren(await renderToNode(scope, slot.children));
+				return element;
 			}
-			node.replaceChildren(await slotToNode(slot.children));
-			return node;
+			return document.createTextNode(JSON.stringify(slot));
 		}
 	}
 	return document.createComment("");
@@ -193,47 +350,64 @@ const defineComponent = (options) => {
 		static $name = options.name;
 		static $events = options.events ?? {};
 		static $attributes = options.attributes ?? {};
+		scope;
+		hooks;
 		events;
 		attributes;
 		shadowRoot;
-		constructor(input) {
+		context;
+		host;
+		constructor(input, context, host) {
+			this.scope = new Scope();
+			this.hooks = new Hooks();
 			this.events = Object.keys(options.events ?? {}).reduce((output, name) => {
 				Reflect.set(output, name, input?.[name], output);
 				return output;
 			}, {});
-			this.attributes = Object.entries(options.attributes ?? {}).reduce((output, [name, attribute]) => {
-				Reflect.set(output.value, name, input?.[name] ?? attribute.default, output.value);
-				return output;
+			this.attributes = Object.entries(options.attributes ?? {}).reduce((attributes, [name, attribute]) => {
+				Reflect.set(attributes.value, name, fromValue(input?.[name]) ?? attribute.default, attributes.value);
+				return attributes;
 			}, createState({}));
 			this.shadowRoot = options.shadowRoot ?? { mode: "open" };
+			this.context = context ?? {};
+			this.host = host;
 		}
+		getContext = (input) => {
+			return this.context[descriptor(input)] ?? {};
+		};
+		setContext = (input, value) => {
+			this.context[descriptor(input)] = value;
+		};
+		onMounted = (invoke) => {
+			return this.hooks.on(this.scope, MOUNTED_HOOK, invoke);
+		};
 		setup = () => options.setup(this);
 	});
 };
 const toCustomElement = (component) => {
 	return class extends HTMLElement {
+		static formAssociated = true;
 		component;
 		constructor() {
 			super();
-			this.component = new component();
+			this.component = new component(undefined, undefined, this);
 		}
 		async connectedCallback() {
-			let previous = activeElement;
-			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) => {
-					this.dispatchEvent(new CustomEvent(name.substring(2).toLowerCase(), {
-						...event,
-						detail: value
-					}));
-				}, this.component.events);
-				shadow.replaceChildren(await slotToNode(await this.component.setup()));
-			} finally {
-				activeElement = previous;
-			}
+			const shadow = this.component.shadowRoot ? this.attachShadow(this.component.shadowRoot) : this;
+			const parentNode = getCustomElement(this.parentNode);
+			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);
+			if (parentNode) for (const key in parentNode.component.context) this.component.setContext(key, parentNode.component.context[key]);
+			shadow.replaceChildren(await renderToNode(this.component.scope, await this.component.setup()));
+			this.component.hooks.dispatch(MOUNTED_HOOK, this);
 		}
-		attributeChangedCallback(name, _, value) {
+		attributeChangedCallback(name, oldValue, value) {
+			if (value === oldValue) return;
 			const attribute = component.$attributes?.[name];
 			if (attribute) {
 				let convertedValue;
@@ -245,7 +419,7 @@ const toCustomElement = (component) => {
 						convertedValue = Number(value);
 						break;
 					case Boolean:
-						convertedValue = Boolean(value);
+						convertedValue = value.toLowerCase() === "true";
 						break;
 					case Object:
 						convertedValue = JSON.parse(value);
@@ -254,25 +428,19 @@ const toCustomElement = (component) => {
 				Reflect.set(this.component.attributes.value, name, convertedValue ?? attribute.default, this.component.attributes.value);
 			}
 		}
+		disconnectedCallback() {
+			this.component.scope.stop();
+		}
 		static get observedAttributes() {
 			return Object.keys(component.$attributes ?? {});
 		}
 	};
 };
 const registerComponent = (component) => {
-	components.set(component.$name, component);
+	if (isServer()) components.set(component.$name, component);
 	if (isClient()) customElements.define(component.$name, toCustomElement(component));
 	return component;
 };
-const isClient = () => {
-	return typeof window !== "undefined";
-};
-const isServer = () => {
-	return typeof window === "undefined";
-};
-const addStyles = (...styles) => {
-	activeElement?.shadowRoot?.adoptedStyleSheets.push(...styles);
-};
 const getGlobalStyles = () => {
 	return Array.from(isServer() ? [] : document.styleSheets).map((style) => {
 		const sheet = new CSSStyleSheet();
@@ -281,21 +449,94 @@ const getGlobalStyles = () => {
 		return sheet;
 	});
 };
-let globalStyles;
-let activeElement;
+const getCustomElement = (node) => {
+	if (node) {
+		if ("component" in node) return node;
+		return getCustomElement(node.parentNode);
+	}
+};
+const isClient = () => typeof window !== "undefined";
+const isServer = () => typeof window === "undefined";
+const preventDefault = (event) => event.preventDefault();
+const stopPropagation = (event) => event.stopPropagation();
+const stopImmediatePropagation = (event) => event.stopImmediatePropagation();
+const MOUNTED_HOOK = defineHook("MOUNTED_HOOK");
 const components = new Map();
 
 //#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
@@ -435,63 +676,96 @@ 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(/index/, "").replace(/\.(js|ts|jsx|tsx)$/, "").replaceAll(/\[(.*)\]/g, (_, name) => ":" + name);
+	const path = (value.startsWith("/") ? value : "/" + value).replaceAll(/\/index/g, "").replaceAll(/\[(.*)\]/g, (_, name) => ":" + name);
+	const route = path.startsWith("/") ? path : "/" + path;
+	const split = route.split(".");
+	return split.length === 3 ? [split.at(0), split.at(1)] : [split.at(0)];
+};
+const $fetch = async (event, input, init) => {
+	let response;
+	if (event) {
+		const url = new URL(input.toString(), event.request.url);
+		response = await (await import("#virtual/runtime")).runtime.fetch(new Request(url, init), event.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 getContent("static");
-	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 routes = await getContent("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 middlewares = new Array();
+	const routes = await getRoutes();
+	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 (typeof route === "object") return route.fetch(event);
+			if (route) {
 				const slot = await import("#virtual/client").then((module) => module.index);
-				return sendHtml(event, await slotToString(slot));
+				return sendHtml(event, await renderToString(slot, { [descriptor(RUNTIME_CONTEXT)]: { event } }));
 			}
-			return route.fetch(event);
-		}
+		} }));
+	}
+	const assets = await getAssets();
+	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);
 	} }));
-	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;
+	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);
+			const event = createEvent(request, {
+				...context,
+				inputs
+			});
+			try {
+				if (route) {
+					const response = await invoke(event, route.fetch, 0);
+					if (response) return response;
+				}
+				return sendText(event, "Not found");
+			} catch (response) {
+				if (response instanceof Response) return response;
+				throw response;
+			}
 		}
-	} };
+	};
 };
-let activeEvent;
+const RUNTIME_CONTEXT = defineContext("RUNTIME_CONTEXT");
 
 //#endregion
 //#region src/router/index.tsx
 const Outlet = defineComponent({
 	name: "x-outlet",
-	setup: async () => {
+	shadowRoot: false,
+	setup: async ({ scope, getContext }) => {
+		const { event } = getContext(RUNTIME_CONTEXT);
 		const radix = new Radix();
-		const routes = await getContent("routes");
-		for (const path in routes) radix.insert("/" + toPath(path), routes[path]);
-		const url = createState(new URL(activeEvent ? activeEvent.request.url : window.location.href));
+		const routes = await getRoutes();
+		for (const path in routes) {
+			const [name] = toPath(path);
+			if (name) radix.insert(name, routes[path]);
+		}
+		const url = createState(new URL(event ? event.request.url : window.location.href));
 		if (isClient()) {
 			const controller = new AbortController();
 			window.addEventListener("popstate", () => url.value = new URL(window.location.href), { signal: controller.signal });
-			onCleanUp(() => controller.abort());
+			scope.dispose.push(() => controller.abort());
 		}
 		return async () => {
 			const { value, inputs } = radix.match(url.value.pathname);
@@ -513,4 +787,4 @@ const anchorNavigate = (event) => {
 };
 
 //#endregion
-export { Handler, Outlet, Radix, activeElement, activeEvent, addStyles, anchorNavigate, components, createApp, createCompute, createElement, createEvent, createRuntime, createState, defineComponent, defineRoute, defineSocket, fileName, fromValue, getContent, 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, MOUNTED_HOOK, Outlet, RUNTIME_CONTEXT, Radix, Scope, activeCompute, anchorNavigate, components, createApp, createCompute, createElement, createEvent, createMemo, createRuntime, createState, defineComponent, defineContext, defineHook, defineRoute, descriptor, fileName, fromValue, getAssets, getCookies, getCustomElement, getGlobalStyles, getMimeType, getRequestUrl, getRoutes, getSetCookies, getVariables, isClient, isServer, isTemplate, markdownToSlot, navigate, preventDefault, registerComponent, renderToNode, renderToString, sendBadRequest, sendHtml, sendJson, sendRedirect, sendText, sendUnauthorized, setCookie, stopImmediatePropagation, stopPropagation, targets, toCustomElement, toFragment, toPath, toString };