revojs 0.0.3 → 0.0.4

package/dist/app/index.d.ts

@@ -1,23 +1,9 @@
-import type { Attributes, ComponentConstructor, Events, Template } from "../html";
+import { type Template } from "../html";
 import type { Middleware } from "../http";
-import type { Route } from "../runtime";
 export type NestedPartial<T> = T extends any[] ? T : T extends Record<string, any> ? {
     [P in keyof T]?: NestedPartial<T[P]>;
 } : T;
-export type Content<T> = string & {
-    key: string;
-};
-export type InferContent<T> = T extends Content<infer U> ? U : unknown;
-export type StaticContent = {
-    type: "static";
-    source: string;
-    include: Array<string>;
-};
-export type AssetContent = {
-    type: "asset";
-    source: string;
-    include: Array<string>;
-};
+export type Environment = "CLIENT" | "SERVER";
 export type ServerEntry = "revojs/presets/node" | "revojs/presets/deno" | "revojs/presets/bun" | "revojs/presets/cloudflare" | (string & {});
 export type ClientConfig = {
     entry: string;
@@ -31,17 +17,13 @@ export type DevelopmentConfig<T> = {
 export type Config<T> = {
     client: ClientConfig;
     server: false | ServerConfig;
-    content: Record<string, StaticContent | AssetContent>;
     markdown: Record<string, Template>;
     dev: DevelopmentConfig<T>;
 };
 export type App<T> = {
     config: Config<T>;
-    virtuals: Record<string, () => string>;
+    virtuals: Record<string, (environment: Environment) => string>;
 };
-export declare const defineContent: <T>(key: string) => Content<T>;
-export declare const getContent: <T>(key: string | Content<T>) => Promise<Record<string, () => Promise<T>>>;
+export declare const getRoutes: <T>() => Promise<Record<string, () => Promise<T>>>;
+export declare const getAssets: <T>() => Promise<Record<string, () => Promise<T>>>;
 export declare const createApp: <T>(config?: NestedPartial<Config<T>>) => App<T>;
-export declare const STATIC_CONTENT: Content<string>;
-export declare const PAGES_CONTENT: Content<ComponentConstructor<Events, Attributes>>;
-export declare const ROUTES_CONTENT: Content<Route<unknown>>;

package/dist/hooks/index.d.ts

@@ -1,8 +1,9 @@
-import { type Descriptor } from "../html";
+import { Scope } from "../signals";
+import { type Descriptor } from "../types";
 export declare class Hooks {
-    hooks: Map<string, Set<(value: any) => unknown>>;
+    readonly hooks: Map<string, Set<(value: any) => unknown>>;
     constructor();
-    on: <T>(input: string | Descriptor<T>, invoke: (value: T) => unknown) => void;
+    on: <T>(scope: Scope, input: string | Descriptor<T>, invoke: (value: T) => unknown) => number;
     dispatch: <T>(input: string | Descriptor<T>, value: T) => void;
 }
 export declare const defineHook: <T>(description?: string | number) => Descriptor<T>;

package/dist/html/index.d.ts

@@ -1,24 +1,22 @@
+import { Hooks } from "../hooks";
 import { type HtmlAttributes } from "../jsx";
-import { type State, type Value } from "../signals";
-export type Descriptor<T> = {
-    key: symbol;
-};
+import { Scope, type State, type Value } from "../signals";
+import { type Descriptor } from "../types";
 export type TypeOf<T> = {
     (): T;
 };
 export type Infer<T> = T extends TypeOf<infer U> ? U : unknown;
-export type Primitiv = string | number | bigint | boolean | symbol | undefined | object | Function;
-export type Slot = void | Primitiv | Template | Array<Slot> | (() => Slot);
+export type Slot = unknown | Template | Array<Slot> | (() => Slot);
 export type Template = {
     tag: string;
-    attributes: Record<string, Primitiv>;
+    attributes: Record<string, unknown>;
     children: Array<Slot>;
 };
 export type EventInput<T extends Events> = {
     [K in keyof T]?: (event: Infer<T[K]["type"]> extends Event ? Infer<T[K]["type"]> : CustomEvent<Infer<T[K]["type"]>>) => void;
 };
 export type AttributeInput<T extends Attributes> = {
-    [K in keyof T]?: Value<Infer<T[K]["type"]>>;
+    [K in keyof T]?: Value<Infer<T[K]["type"]> | undefined>;
 };
 export type Input<TEvents extends Events, TAttributes extends Attributes> = EventInput<TEvents> & AttributeInput<TAttributes> & HtmlAttributes;
 export type EventOutput<T extends Events> = {
@@ -37,8 +35,8 @@ export type AttributeOptions<T> = {
     type: T;
     default?: Infer<T>;
 };
-export type Events = Record<string, EventOptions<Primitiv>>;
-export type Attributes = Record<string, AttributeOptions<Primitiv>>;
+export type Events = Record<string, EventOptions<unknown>>;
+export type Attributes = Record<string, AttributeOptions<unknown>>;
 export interface ComponentOptions<TEvents extends Events, TAttributes extends Attributes> {
     name: string;
     events?: TEvents;
@@ -47,19 +45,23 @@ export interface ComponentOptions<TEvents extends Events, TAttributes extends At
     setup: (component: Component<TEvents, TAttributes>) => Slot | Promise<Slot>;
 }
 export interface Component<TEvents extends Events, TAttributes extends Attributes> {
+    readonly scope: Scope;
+    readonly hooks: Hooks;
     readonly events: EventOutput<TEvents>;
     readonly attributes: State<AttributeOutput<TAttributes>>;
     readonly shadowRoot: false | ShadowRootInit;
     readonly context: Record<string, unknown>;
+    readonly host?: CustomElement<TEvents, TAttributes>;
     getContext: <T>(input: string | Descriptor<T>) => T;
     setContext: <T>(input: string | Descriptor<T>, value: T) => void;
+    onMounted: (invoke: (input: HTMLElement) => void | Promise<void>) => void;
     setup: () => Slot | Promise<Slot>;
 }
 export interface ComponentConstructor<TEvents extends Events, TAttributes extends Attributes> {
     $name: string;
     $events: TEvents;
     $attributes: TAttributes;
-    new (input?: Input<TEvents, TAttributes>, context?: Record<string, unknown>): Component<TEvents, TAttributes>;
+    new (input?: Input<TEvents, TAttributes>, context?: Record<string, unknown>, host?: CustomElement<TEvents, TAttributes>): Component<TEvents, TAttributes>;
 }
 export interface CustomElement<TEvents extends Events, TAttributes extends Attributes> extends HTMLElement {
     readonly component: Component<TEvents, TAttributes>;
@@ -68,23 +70,21 @@ export interface CustomElementConstructor<TEvents extends Events, TAttributes ex
     new (): CustomElement<TEvents, TAttributes>;
 }
 export declare const isTemplate: (value: object) => value is Template;
-export declare const descriptor: <T>(descriptor: string | Descriptor<T>) => string;
 export declare const defineContext: <T>(description?: string | number) => Descriptor<T>;
 export declare const createElement: <TEvents extends Events, TAttributes extends Attributes>(input: string | ComponentConstructor<TEvents, TAttributes>, attributes?: AttributeInput<TAttributes>, ...children: Array<Slot>) => Slot;
 export declare const toString: (slot: Slot) => string;
 export declare const toFragment: (nodes: Array<Node>) => DocumentFragment;
 export declare const renderToString: (slot: Slot, context: Record<string, unknown>) => Promise<string>;
-export declare const renderToNode: (slot: Slot) => Promise<Node>;
+export declare const renderToNode: (scope: Scope, slot: Slot) => Promise<Node>;
 export declare const defineComponent: <TEvents extends Events = {}, TAttributes extends Attributes = {}>(options: ComponentOptions<TEvents, TAttributes>) => ComponentConstructor<TEvents, TAttributes>;
 export declare const toCustomElement: <TEvents extends Events = {}, TAttributes extends Attributes = {}>(component: ComponentConstructor<TEvents, TAttributes>) => CustomElementConstructor<TEvents, TAttributes>;
 export declare const registerComponent: <TEvents extends Events = {}, TAttributes extends Attributes = {}>(component: ComponentConstructor<TEvents, TAttributes>) => ComponentConstructor<TEvents, TAttributes>;
-export declare const isClient: () => boolean;
-export declare const isServer: () => boolean;
-export declare const addStyles: (...styles: Array<CSSStyleSheet>) => void;
 export declare const getGlobalStyles: () => CSSStyleSheet[];
 export declare const getCustomElement: (node: Node | null) => CustomElement<Events, Attributes> | undefined;
+export declare const isClient: () => boolean;
+export declare const isServer: () => boolean;
 export declare const preventDefault: (event: Event) => void;
 export declare const stopPropagation: (event: Event) => void;
 export declare const stopImmediatePropagation: (event: Event) => void;
-export declare let activeElement: CustomElement<Events, Attributes> | undefined;
+export declare const MOUNTED_HOOK: Descriptor<HTMLElement>;
 export declare const components: Map<string, ComponentConstructor<Events, Attributes>>;

package/dist/http/index.d.ts

@@ -21,7 +21,7 @@ export type Set = {
     message?: string;
     headers: Headers;
 };
-export type Event<T> = {
+export type Event<T = Record<string, unknown>> = {
     request: Request;
     response: Set;
     context: Context<T>;

package/dist/index.d.ts

@@ -7,3 +7,4 @@ export * from "./radix";
 export * from "./router";
 export * from "./runtime";
 export * from "./signals";
+export * from "./types";

package/dist/index.js

@@ -2,57 +2,52 @@ import { defu } from "defu";
 import { h } from "revojs/jsx-runtime";
 
 //#region src/app/index.ts
-const defineContent = (key) => {
-	return Object.assign(String(key), { key });
+const getRoutes = async () => {
+	return await import("#virtual/routes").then((module) => module.index);
 };
-const getContent = async (key) => {
-	return await import("#virtual/content").then((module) => module.index[key.toString()]);
+const getAssets = async () => {
+	return await import("#virtual/assets").then((module) => module.index);
 };
 const createApp = (config) => {
 	return {
 		config: defu(config, {
 			client: { entry: "./index.html" },
 			server: { entry: "revojs/presets/node" },
-			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/types/index.ts
+const descriptor = (descriptor$1) => {
+	return (typeof descriptor$1 === "object" ? descriptor$1.key : descriptor$1).toString();
+};
+
+//#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 defineHook = (description) => {
+	return { key: Symbol(description) };
+};
 
 //#endregion
 //#region src/jsx/index.ts
@@ -146,29 +141,21 @@ var Scope = class {
 	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;
+var Compute = class extends Scope {
 	scope;
-	constructor(invoke) {
+	invoke;
+	constructor(scope, invoke) {
+		super();
+		this.scope = scope;
 		this.invoke = invoke;
-		this.scope = new Scope();
 	}
 	run() {
-		this.scope.stop();
-		return this.scope.run(this.invoke);
+		this.stop();
+		return this.invoke(this);
 	}
 };
 var Handler = class Handler {
@@ -179,8 +166,8 @@ var Handler = class Handler {
 			const set = computes.get(key) ?? new Set();
 			computes.set(key, set.add(compute));
 			targets.set(target, computes);
-			onCleanUp(() => {
-				compute.scope.stop();
+			compute.scope.dispose.push(() => {
+				compute.stop();
 				set.delete(compute);
 			});
 		}
@@ -200,18 +187,18 @@ var Handler = class Handler {
 function createState(value) {
 	return new Proxy({ value }, new Handler());
 }
-function createCompute(invoke) {
+function createCompute(scope, invoke) {
 	let previous = activeCompute;
-	activeCompute = new Compute(invoke);
+	activeCompute = new Compute(scope, invoke);
 	try {
-		return invoke();
+		return invoke(activeCompute);
 	} finally {
 		activeCompute = previous;
 	}
 }
-function createMemo(invoke) {
+function createMemo(scope, invoke) {
 	let state;
-	const compute = createCompute(() => {
+	const compute = createCompute(scope, () => {
 		const value = invoke();
 		if (typeof state === "object") state.value = value;
 		return value;
@@ -219,17 +206,10 @@ function createMemo(invoke) {
 	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;
-	}
+	if (value instanceof Function) return fromValue(value());
 	return value;
 }
-let activeScope;
 let activeCompute;
 const targets = new WeakMap();
 
@@ -238,9 +218,6 @@ const targets = new WeakMap();
 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) };
 };
@@ -269,79 +246,102 @@ const toFragment = (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 (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}>`;
+	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}>` + template + children + `</${slot.tag}>`;
+				return `<${prefix}>` + children + `</${slot.tag}>`;
 			}
-			return `<${prefix}>` + children + `</${slot.tag}>`;
+			return JSON.stringify(slot);
 		}
-		return JSON.stringify(slot);
 	}
 	return "<!---->";
 };
-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 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);
+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);
 				}
-			} 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 (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)));
+				return document.createComment("");
 			}
-			element.replaceChildren(await renderToNode(slot.children));
-			return element;
+			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;
+			}
+			return document.createTextNode(JSON.stringify(slot));
 		}
-		return document.createTextNode(JSON.stringify(slot));
 	}
 	return document.createComment("");
 };
@@ -350,59 +350,61 @@ const defineComponent = (options) => {
 		static $name = options.name;
 		static $events = options.events ?? {};
 		static $attributes = options.attributes ?? {};
+		scope;
+		hooks;
 		events;
 		attributes;
 		shadowRoot;
 		context;
-		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)];
+			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;
-		scope;
 		component;
 		constructor() {
 			super();
-			this.scope = new Scope();
-			this.component = new component();
+			this.component = new component(undefined, undefined, this);
 		}
 		async connectedCallback() {
-			let previous = activeElement;
+			const shadow = this.component.shadowRoot ? this.attachShadow(this.component.shadowRoot) : this;
 			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);
-				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;
-			}
+			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, oldValue, value) {
 			if (value === oldValue) return;
@@ -417,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);
@@ -427,7 +429,7 @@ const toCustomElement = (component) => {
 			}
 		}
 		disconnectedCallback() {
-			this.scope.stop();
+			this.component.scope.stop();
 		}
 		static get observedAttributes() {
 			return Object.keys(component.$attributes ?? {});
@@ -435,19 +437,10 @@ const toCustomElement = (component) => {
 	};
 };
 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();
@@ -462,41 +455,14 @@ const getCustomElement = (node) => {
 		return getCustomElement(node.parentNode);
 	}
 };
-const preventDefault = (event) => {
-	event.preventDefault();
-};
-const stopPropagation = (event) => {
-	event.stopPropagation();
-};
-const stopImmediatePropagation = (event) => {
-	event.stopImmediatePropagation();
-};
-let activeElement;
+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/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 createEvent = (request, context) => {
@@ -715,13 +681,15 @@ const fileName = (path) => {
 };
 const toPath = (value) => {
 	const path = (value.startsWith("/") ? value : "/" + value).replaceAll(/\/index/g, "").replaceAll(/\[(.*)\]/g, (_, name) => ":" + name);
-	return (path.startsWith("/") ? path : "/" + path).split(".");
+	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 (input, init) => {
+const $fetch = async (event, 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);
+	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")) {
@@ -735,27 +703,23 @@ const getVariables = (event) => {
 const createRuntime = async () => {
 	const radix = new Radix();
 	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 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);
+	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 (route) return route.fetch(event);
+			if (typeof route === "object") return route.fetch(event);
+			if (route) {
+				const slot = await import("#virtual/client").then((module) => module.index);
+				return sendHtml(event, await renderToString(slot, { [descriptor(RUNTIME_CONTEXT)]: { 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);
+	} }));
 	const invoke = (event, next, index) => {
 		return middlewares.at(index)?.(event, () => invoke(event, next, index + 1)) ?? next(event);
 	};
@@ -765,44 +729,43 @@ const createRuntime = async () => {
 		fetch: async (request, context) => {
 			const url = getRequestUrl(request);
 			const { value: route, inputs } = radix.match(request.method + url.pathname);
-			activeEvent = createEvent(request, {
+			const event = createEvent(request, {
 				...context,
 				inputs
 			});
 			try {
 				if (route) {
-					const response = await invoke(activeEvent, route.fetch, 0);
+					const response = await invoke(event, route.fetch, 0);
 					if (response) return response;
 				}
-				return sendText(activeEvent, "Not found");
+				return sendText(event, "Not found");
 			} catch (response) {
 				if (response instanceof Response) return response;
 				throw response;
-			} finally {
-				activeEvent = undefined;
 			}
 		}
 	};
 };
-let activeEvent;
+const RUNTIME_CONTEXT = defineContext("RUNTIME_CONTEXT");
 
 //#endregion
 //#region src/router/index.tsx
 const Outlet = defineComponent({
 	name: "x-outlet",
 	shadowRoot: false,
-	setup: async () => {
+	setup: async ({ scope, getContext }) => {
+		const { event } = getContext(RUNTIME_CONTEXT);
 		const radix = new Radix();
-		const routes = await getContent(PAGES_CONTENT);
+		const routes = await getRoutes();
 		for (const path in routes) {
 			const [name] = toPath(path);
-			radix.insert(name, routes[path]);
+			if (name) radix.insert(name, routes[path]);
 		}
-		const url = createState(new URL(activeEvent ? activeEvent.request.url : window.location.href));
+		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);
@@ -824,4 +787,4 @@ const anchorNavigate = (event) => {
 };
 
 //#endregion
-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 };
+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 };

package/dist/jsx/index.d.ts

@@ -1,4 +1,4 @@
-import { type Primitiv, type Slot } from "../html";
+import { type Slot } from "../html";
 export type EventAttributes = {
     onScroll?: (event: Event) => void;
     onScrollCapture?: (event: Event) => void;
@@ -124,7 +124,7 @@ export type EventAttributes = {
     onChangeCapture?: (event: Event) => void;
 };
 export type HtmlTags = Record<string, HtmlAttributes & EventAttributes>;
-export type HtmlAttributes = Record<string, Primitiv>;
+export type HtmlAttributes = Record<string, unknown>;
 export type HtmlAnchorAttributes = HtmlAttributes & EventAttributes;
 export type HtmlAbbrAttributes = HtmlAttributes & EventAttributes;
 export type HtmlAddressAttributes = HtmlAttributes & EventAttributes;

package/dist/jsx/index.js

@@ -1,4 +1,10 @@
 
+//#region src/hooks/index.ts
+const defineHook = (description) => {
+	return { key: Symbol(description) };
+};
+
+//#endregion
 //#region src/html/index.ts
 const createElement = (input, attributes, ...children) => {
 	return {
@@ -7,6 +13,7 @@ const createElement = (input, attributes, ...children) => {
 		children
 	};
 };
+const MOUNTED_HOOK = defineHook("MOUNTED_HOOK");
 
 //#endregion
 //#region src/jsx/index.ts

package/dist/markdown/index.d.ts

@@ -1,2 +1,2 @@
-import type { Slot, Template } from "../html";
-export declare const markdownToSlot: (input: string, options?: Record<string, Template>) => Slot[];
+import type { Template } from "../html";
+export declare const markdownToSlot: (input: string, options?: Record<string, Template>) => unknown[];

package/dist/router/index.d.ts

@@ -1,3 +1,4 @@
-export declare const Outlet: import("..").ComponentConstructor<{}, {}>;
+import { type ComponentConstructor } from "../html";
+export declare const Outlet: ComponentConstructor<{}, {}>;
 export declare const navigate: (url: string) => void;
 export declare const anchorNavigate: (event: Event) => void;

package/dist/runtime/index.d.ts

@@ -10,8 +10,10 @@ export type Runtime<T> = {
 };
 export declare const defineRoute: <T>(route: Route<T>) => Route<T>;
 export declare const fileName: (path: string) => string | undefined;
-export declare const toPath: (value: string) => [string, string | undefined];
-export declare const $fetch: <T>(input: string | URL, init?: RequestInit) => Promise<T>;
+export declare const toPath: (value: string) => (string | undefined)[];
+export declare const $fetch: <T>(event: Event | undefined, input: string | URL, init?: RequestInit) => Promise<T>;
 export declare const getVariables: <T>(event?: Event<T>) => T;
 export declare const createRuntime: <T>() => Promise<Runtime<T>>;
-export declare let activeEvent: Event<unknown> | undefined;
+export declare const RUNTIME_CONTEXT: import("..").Descriptor<{
+    event?: Event;
+}>;

package/dist/signals/index.d.ts

@@ -1,17 +1,16 @@
-export type Value<T> = T | State<T> | (() => Value<T>);
+export type Value<T> = T | (() => Value<T>);
 export interface State<T> {
     value: T;
 }
 export declare class Scope {
     readonly dispose: Array<(scope: Scope) => void>;
     constructor();
-    run<T>(invoke: () => T): T;
     stop(): void;
 }
-export declare class Compute<T = void> {
-    readonly invoke: () => T;
+export declare class Compute<T = void> extends Scope {
     readonly scope: Scope;
-    constructor(invoke: () => T);
+    readonly invoke: (scope: Scope) => T;
+    constructor(scope: Scope, invoke: (scope: Scope) => T);
     run(): T;
 }
 export declare class Handler<T extends object> implements ProxyHandler<T> {
@@ -20,10 +19,8 @@ export declare class Handler<T extends object> implements ProxyHandler<T> {
 }
 export declare function createState<T>(): State<T | undefined>;
 export declare function createState<T>(value: T): State<T>;
-export declare function createCompute<T>(invoke: () => T): T;
-export declare function createMemo<T>(invoke: () => T): State<T>;
-export declare function onCleanUp(invoke: (scope: Scope) => void): void;
+export declare function createCompute<T>(scope: Scope, invoke: (scope: Scope) => T): T;
+export declare function createMemo<T>(scope: Scope, invoke: () => T): State<T>;
 export declare function fromValue<T>(value: Value<T>): T;
-export declare let activeScope: Scope | undefined;
 export declare let activeCompute: Compute | undefined;
 export declare const targets: WeakMap<object, Map<string | symbol, Set<Compute<void>>>>;

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+export type Descriptor<T> = {
+    key: symbol;
+};
+export declare const descriptor: <T>(descriptor: string | Descriptor<T>) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "revojs",
-    "version": "0.0.3",
+    "version": "0.0.4",
     "type": "module",
     "repository": "coverbase/revojs",
     "license": "MIT",