revojs 0.0.24 → 0.0.26

package/dist/html/index.d.ts

@@ -1,5 +1,5 @@
 import { type HtmlAttributes } from "../jsx";
-import { type Descriptor, Scope, type State, type Value } from "../signals";
+import { Scope, type State, type Value } from "../signals";
 export type TypeOf<T> = {
     (): T;
 };
@@ -45,20 +45,17 @@ export interface ComponentOptions<TEvents extends Events, TAttributes extends At
 }
 export interface Component<TEvents extends Events, TAttributes extends Attributes> {
     readonly scope: Scope;
-    readonly context: Map<string, unknown>;
     readonly events: EventOutput<TEvents>;
     readonly attributes: State<AttributeOutput<TAttributes>>;
     readonly shadowRoot: false | ShadowRootInit;
     readonly host?: CustomElement<TEvents, TAttributes>;
-    getContext: <T>(input: Descriptor<T>) => T;
-    setContext: <T>(input: Descriptor<T>, value: T) => 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?: Map<string, unknown>, host?: CustomElement<TEvents, TAttributes>): Component<TEvents, TAttributes>;
+    new (input?: Input<TEvents, TAttributes>, scope?: Scope, host?: CustomElement<TEvents, TAttributes>): Component<TEvents, TAttributes>;
 }
 export interface CustomElement<TEvents extends Events, TAttributes extends Attributes> extends HTMLElement {
     readonly component: Component<TEvents, TAttributes>;
@@ -67,26 +64,27 @@ export interface CustomElementConstructor<TEvents extends Events, TAttributes ex
     new (): CustomElement<TEvents, TAttributes>;
 }
 export declare class MountedEvent extends Event {
-    constructor(event?: EventInit);
+    constructor();
 }
 export declare const isTemplate: (value: object) => value is Template;
 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: Map<string, unknown>) => Promise<string>;
+export declare const renderToString: (scope: Scope, slot: Slot) => Promise<string>;
 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 getGlobalStyles: () => CSSStyleSheet[];
-export declare const useEvent: (scope: Scope, target: EventTarget | undefined, event: string, input: EventListener<Event>, options?: AddEventListenerOptions) => number;
+export declare function useEvent<T extends keyof ElementEventMap>(scope: Scope, target: EventTarget | undefined, event: T, input: EventListener<ElementEventMap[T]>, options?: AddEventListenerOptions): void;
+export declare function useEvent<T extends keyof WindowEventMap>(scope: Scope, target: Window | undefined, event: T, input: EventListener<WindowEventMap[T]>, options?: AddEventListenerOptions): void;
+export declare function useEvent<T extends keyof HTMLElementEventMap>(scope: Scope, target: HTMLElement | undefined, event: T, input: EventListener<HTMLElementEventMap[T]>, options?: AddEventListenerOptions): void;
 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 const MOUNTED_HOOK: Descriptor<HTMLElement>;
 export declare const components: Map<string, ComponentConstructor<Events, Attributes>>;
 declare global {
     interface HTMLElementEventMap {

package/dist/index.js

@@ -107,29 +107,37 @@ const namespace = (tag) => {
 
 //#endregion
 //#region src/signals/index.ts
-var Hooks = class {
-	hooks;
+var StopEvent = class extends Event {
 	constructor() {
-		this.hooks = new Map();
+		super("stop");
 	}
-	on(scope, input, invoke) {
-		const invokes = this.hooks.get(input) ?? new Set();
-		invokes.add(invoke);
-		this.hooks.set(input, invokes);
-		return scope.dispose.push(() => invokes.delete(invoke));
+};
+var Scope = class extends EventTarget {
+	parentScope;
+	context;
+	constructor(scope) {
+		super();
+		this.parentScope = scope;
+		this.context = new Map();
 	}
-	dispatch(input, value) {
-		const invokes = this.hooks.get(input);
-		if (invokes) for (const invoke of invokes) invoke(value);
+	getContext(input) {
+		let scope = this;
+		const seen = new Set();
+		while (scope && !seen.has(scope)) {
+			seen.add(scope);
+			if (scope.context.has(input)) return scope.context.get(input);
+			scope = scope.parentScope;
+		}
+		return {};
 	}
-};
-var Scope = class {
-	dispose;
-	constructor() {
-		this.dispose = new Array();
+	setContext(input, value) {
+		this.context.set(input, value);
+	}
+	onStop(input) {
+		this.addEventListener("stop", input, { once: true });
 	}
 	stop() {
-		while (this.dispose.length) this.dispose.pop()?.(this);
+		return this.dispatchEvent(new StopEvent());
 	}
 };
 var Compute = class extends Scope {
@@ -153,7 +161,7 @@ var Handler = class Handler {
 			const set = computes.get(key) ?? new Set();
 			computes.set(key, set.add(compute));
 			targets.set(target, computes);
-			compute.scope.dispose.push(() => {
+			compute.scope.onStop(() => {
 				compute.stop();
 				set.delete(compute);
 			});
@@ -197,9 +205,6 @@ function fromValue(value) {
 	if (value instanceof Function) return fromValue(value());
 	return value;
 }
-function defineHook(key) {
-	return key;
-}
 function defineContext(key) {
 	return key;
 }
@@ -209,8 +214,8 @@ const targets = new WeakMap();
 //#endregion
 //#region src/html/index.ts
 var MountedEvent = class extends Event {
-	constructor(event) {
-		super("mounted", event);
+	constructor() {
+		super("mounted");
 	}
 };
 const isTemplate = (value) => {
@@ -240,28 +245,28 @@ const toFragment = (nodes) => {
 	fragment.replaceChildren(...nodes);
 	return fragment;
 };
-const renderToString = async (slot, context) => {
+const renderToString = async (scope, slot) => {
 	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 === "function") return await renderToString(scope, await slot());
 		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 (Array.isArray(slot)) return await Promise.all(slot.map((slot$1) => renderToString(scope, slot$1))).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);
+				const children = await renderToString(scope, slot.children);
 				if (customElement) {
-					const element = new customElement(slot.attributes, context);
-					const template = await renderToString(await element.setup(), context);
+					const element = new customElement(slot.attributes, scope);
+					const template = await renderToString(scope, await element.setup());
 					if (element.shadowRoot) {
-						const shadow = await renderToString({
+						const shadow = await renderToString(scope, {
 							tag: "template",
 							attributes: { shadowRootMode: element.shadowRoot.mode },
 							children: [template]
-						}, context);
+						});
 						return `<${prefix}>` + shadow + children + `</${slot.tag}>`;
 					}
 					return `<${prefix}>` + template + children + `</${slot.tag}>`;
@@ -325,8 +330,10 @@ const renderToNode = async (scope, slot) => {
 				const element = document.createElementNS(namespace(slot.tag), slot.tag);
 				for (const name in slot.attributes) {
 					const value = slot.attributes[name];
-					if (name.startsWith("on")) useEvent(scope, element, name.substring(2).toLowerCase(), value);
-					else createCompute(scope, () => {
+					if (name.startsWith("on")) {
+						const event = name.substring(2).toLowerCase();
+						useEvent(scope, element, event, value);
+					} else createCompute(scope, () => {
 						const set = toString(value);
 						if (set === "" || set === "false") return element.removeAttribute(name);
 						return element.setAttribute(name, set);
@@ -346,14 +353,12 @@ const defineComponent = (options) => {
 		static $events = options.events ?? {};
 		static $attributes = options.attributes ?? {};
 		scope;
-		context;
 		events;
 		attributes;
 		shadowRoot;
 		host;
-		constructor(input, context, host) {
-			this.scope = new Scope();
-			this.context = context ?? new Map();
+		constructor(input, scope, host) {
+			this.scope = new Scope(scope);
 			this.events = Object.keys(options.events ?? {}).reduce((output, name) => {
 				Reflect.set(output, name, input?.[name], output);
 				return output;
@@ -365,13 +370,17 @@ const defineComponent = (options) => {
 			this.shadowRoot = options.shadowRoot ?? { mode: "open" };
 			this.host = host;
 		}
-		getContext = (input) => {
-			return this.context.get(input) ?? {};
-		};
-		setContext = (input, value) => {
-			this.context.set(input, value);
+		setup = () => {
+			const findParent = (node) => {
+				if (node) {
+					if ("component" in node) return node;
+					return findParent(node.parentNode);
+				}
+			};
+			const parentNode = findParent(this.host);
+			if (parentNode) this.scope.parentScope = parentNode.component.scope;
+			return options.setup(this);
 		};
-		setup = () => options.setup(this);
 	});
 };
 const toCustomElement = (component) => {
@@ -384,7 +393,6 @@ const toCustomElement = (component) => {
 		}
 		async connectedCallback() {
 			const rootNode = 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(), {
@@ -392,7 +400,6 @@ const toCustomElement = (component) => {
 					detail: value
 				}));
 			}, this.component.events);
-			if (parentNode) for (const [name, value] of parentNode.component.context) this.component.context.set(name, value);
 			rootNode.replaceChildren(await renderToNode(this.component.scope, await this.component.setup()));
 			this.dispatchEvent(new MountedEvent());
 		}
@@ -442,7 +449,7 @@ const getGlobalStyles = () => {
 		return sheet;
 	});
 };
-const useEvent = (scope, target, event, input, options) => {
+function useEvent(scope, target, event, input, options) {
 	const controller = new AbortController();
 	target?.addEventListener(event, (event$1) => {
 		if (Array.isArray(input)) for (const target$1 of input) target$1?.(event$1);
@@ -451,8 +458,8 @@ const useEvent = (scope, target, event, input, options) => {
 		signal: controller.signal,
 		...options
 	});
-	return scope.dispose.push(() => controller.abort());
-};
+	scope.onStop(() => controller.abort());
+}
 const getCustomElement = (node) => {
 	if (node) {
 		if ("component" in node) return node;
@@ -464,7 +471,6 @@ 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
@@ -689,7 +695,8 @@ const toPath = (value) => {
 	const split = route.split(".");
 	return split.length === 3 ? [split.at(0), split.at(1)] : [split.at(0)];
 };
-const $fetch = async (event, input, init) => {
+const $fetch = async (scope, input, init) => {
+	const { event } = scope.getContext(RUNTIME_CONTEXT);
 	let response;
 	if (event) {
 		const url = new URL(input.toString(), event.request.url);
@@ -714,8 +721,9 @@ const createRuntime = async () => {
 			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 renderToString(slot, new Map().set(RUNTIME_CONTEXT, { event })));
+				const scope = new Scope();
+				scope.setContext(RUNTIME_CONTEXT, { event });
+				return sendHtml(event, await renderToString(scope, await import("#virtual/client").then((module) => module.index)));
 			}
 		} }));
 	}
@@ -757,8 +765,8 @@ const RUNTIME_CONTEXT = defineContext("RUNTIME_CONTEXT");
 const Outlet = defineComponent({
 	name: "x-outlet",
 	shadowRoot: false,
-	setup: async ({ scope, getContext }) => {
-		const { event } = getContext(RUNTIME_CONTEXT);
+	setup: async ({ scope }) => {
+		const { event } = scope.getContext(RUNTIME_CONTEXT);
 		const radix = new Radix();
 		const routes = await getRoutes();
 		for (const path in routes) {
@@ -766,11 +774,7 @@ const Outlet = defineComponent({
 			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 });
-			scope.dispose.push(() => controller.abort());
-		}
+		if (isClient()) useEvent(scope, window, "popstate", () => url.value = new URL(window.location.href));
 		return async () => {
 			const { value, inputs } = radix.match(url.value.pathname);
 			const Page = await value?.();
@@ -791,4 +795,4 @@ const anchorNavigate = (event) => {
 };
 
 //#endregion
-export { $fetch, Compute, Handler, Hooks, MOUNTED_HOOK, MountedEvent, Outlet, RUNTIME_CONTEXT, Radix, Scope, activeCompute, anchorNavigate, components, createApp, createCompute, createElement, createEvent, createMemo, createRuntime, createState, defineComponent, defineContext, defineHook, defineRoute, 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, useEvent };
+export { $fetch, Compute, Handler, MountedEvent, Outlet, RUNTIME_CONTEXT, Radix, Scope, StopEvent, activeCompute, anchorNavigate, components, createApp, createCompute, createElement, createEvent, createMemo, createRuntime, createState, defineComponent, defineContext, defineRoute, 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, useEvent };

package/dist/jsx/index.js

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

package/dist/runtime/index.d.ts

@@ -1,5 +1,6 @@
 import { type Context, type Event, type Handle, type Middleware } from "../http";
 import { Radix } from "../radix";
+import { Scope } from "../signals";
 export type Route<T> = {
     fetch: Handle<T>;
 };
@@ -11,7 +12,7 @@ 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 | undefined)[];
-export declare const $fetch: <T>(event: Event | undefined, input: string | URL, init?: RequestInit) => Promise<T>;
+export declare const $fetch: <T>(scope: Scope, 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 const RUNTIME_CONTEXT: import("..").Descriptor<{

package/dist/signals/index.d.ts

@@ -6,16 +6,17 @@ export type Descriptor<T> = string & {
 export interface State<T> {
     value: T;
 }
-export declare class Hooks {
-    readonly hooks: Map<string, Set<(value: any) => unknown>>;
+export declare class StopEvent extends Event {
     constructor();
-    on<T>(scope: Scope, input: Descriptor<T>, invoke: (value: T) => unknown): number;
-    dispatch<T>(input: Descriptor<T>, value: T): void;
 }
-export declare class Scope {
-    readonly dispose: Array<(scope: Scope) => void>;
-    constructor();
-    stop(): void;
+export declare class Scope extends EventTarget {
+    parentScope?: Scope;
+    readonly context: Map<string, unknown>;
+    constructor(scope?: Scope);
+    getContext<T>(input: Descriptor<T>): T;
+    setContext<T>(input: Descriptor<T>, value: T): void;
+    onStop(input: (event: StopEvent) => void): void;
+    stop(): boolean;
 }
 export declare class Compute<T = void> extends Scope {
     readonly scope: Scope;
@@ -32,8 +33,12 @@ export declare function createState<T>(value: T): State<T>;
 export declare function createCompute<T>(scope: Scope, invoke: (scope: Scope) => T): T;
 export declare function createMemo<T>(scope: Scope, invoke: (scope: Scope) => T): State<T>;
 export declare function fromValue<T>(value: Value<T>): T;
-export declare function defineHook<T>(key: string): Descriptor<T>;
 export declare function defineContext<T>(key: string): Descriptor<T>;
 export declare let activeCompute: Compute | undefined;
 export declare const targets: WeakMap<object, Map<string | symbol, Set<Compute<void>>>>;
+declare global {
+    interface ElementEventMap {
+        stop: StopEvent;
+    }
+}
 export {};

package/package.json

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