revojs 0.0.23 → 0.0.25

package/dist/html/index.d.ts

@@ -1,5 +1,5 @@
 import { type HtmlAttributes } from "../jsx";
-import { type Descriptor, Hooks, Scope, type State, type Value } from "../signals";
+import { type Descriptor, Scope, type State, type Value } from "../signals";
 export type TypeOf<T> = {
     (): T;
 };
@@ -45,7 +45,6 @@ export interface ComponentOptions<TEvents extends Events, TAttributes extends At
 }
 export interface Component<TEvents extends Events, TAttributes extends Attributes> {
     readonly scope: Scope;
-    readonly hooks: Hooks;
     readonly context: Map<string, unknown>;
     readonly events: EventOutput<TEvents>;
     readonly attributes: State<AttributeOutput<TAttributes>>;
@@ -53,7 +52,6 @@ export interface Component<TEvents extends Events, TAttributes extends Attribute
     readonly host?: CustomElement<TEvents, TAttributes>;
     getContext: <T>(input: Descriptor<T>) => T;
     setContext: <T>(input: 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> {
@@ -68,8 +66,11 @@ export interface CustomElement<TEvents extends Events, TAttributes extends Attri
 export interface CustomElementConstructor<TEvents extends Events, TAttributes extends Attributes> {
     new (): CustomElement<TEvents, TAttributes>;
 }
+export declare class MountedEvent extends Event {
+    constructor();
+}
 export declare const isTemplate: (value: object) => value is Template;
-export declare const createElement: <TEvents extends Events, TAttributes extends Attributes>(input: string | Template | ComponentConstructor<TEvents, TAttributes>, attributes?: AttributeInput<TAttributes>, ...children: Array<Slot>) => Slot;
+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>;
@@ -78,12 +79,18 @@ export declare const defineComponent: <TEvents extends Events = {}, 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 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 eventListener: <T extends Event>(event: T, invoke?: EventListener<T>) => void;
 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 {
+        mounted: MountedEvent;
+    }
+}

package/dist/index.js

@@ -107,29 +107,20 @@ const namespace = (tag) => {
 
 //#endregion
 //#region src/signals/index.ts
-var Hooks = class {
-	hooks;
+var StopEvent = class extends Event {
 	constructor() {
-		this.hooks = new Map();
-	}
-	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));
-	}
-	dispatch(input, value) {
-		const invokes = this.hooks.get(input);
-		if (invokes) for (const invoke of invokes) invoke(value);
+		super("stop");
 	}
 };
-var Scope = class {
-	dispose;
+var Scope = class extends EventTarget {
 	constructor() {
-		this.dispose = new Array();
+		super();
+	}
+	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 +144,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 +188,6 @@ function fromValue(value) {
 	if (value instanceof Function) return fromValue(value());
 	return value;
 }
-function defineHook(key) {
-	return key;
-}
 function defineContext(key) {
 	return key;
 }
@@ -208,12 +196,16 @@ const targets = new WeakMap();
 
 //#endregion
 //#region src/html/index.ts
+var MountedEvent = class extends Event {
+	constructor() {
+		super("mounted");
+	}
+};
 const isTemplate = (value) => {
 	return "tag" in value && "attributes" in value && "children" in value;
 };
 const createElement = (input, attributes, ...children) => {
-	if (typeof input === "object") return input;
-	else return {
+	return {
 		tag: typeof input === "function" ? input.$name : input,
 		attributes: attributes ?? {},
 		children
@@ -323,9 +315,7 @@ const renderToNode = async (scope, slot) => {
 					const value = slot.attributes[name];
 					if (name.startsWith("on")) {
 						const event = name.substring(2).toLowerCase();
-						const controller = new AbortController();
-						element.addEventListener(event, (event$1) => eventListener(event$1, value), { signal: controller.signal });
-						scope.dispose.push(() => controller.abort());
+						useEvent(scope, element, event, value);
 					} else createCompute(scope, () => {
 						const set = toString(value);
 						if (set === "" || set === "false") return element.removeAttribute(name);
@@ -346,7 +336,6 @@ const defineComponent = (options) => {
 		static $events = options.events ?? {};
 		static $attributes = options.attributes ?? {};
 		scope;
-		hooks;
 		context;
 		events;
 		attributes;
@@ -354,7 +343,6 @@ const defineComponent = (options) => {
 		host;
 		constructor(input, context, host) {
 			this.scope = new Scope();
-			this.hooks = new Hooks();
 			this.context = context ?? new Map();
 			this.events = Object.keys(options.events ?? {}).reduce((output, name) => {
 				Reflect.set(output, name, input?.[name], output);
@@ -373,9 +361,6 @@ const defineComponent = (options) => {
 		setContext = (input, value) => {
 			this.context.set(input, value);
 		};
-		onMounted = (invoke) => {
-			return this.hooks.on(this.scope, MOUNTED_HOOK, invoke);
-		};
 		setup = () => options.setup(this);
 	});
 };
@@ -399,7 +384,7 @@ const toCustomElement = (component) => {
 			}, 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.component.hooks.dispatch(MOUNTED_HOOK, this);
+			this.dispatchEvent(new MountedEvent());
 		}
 		attributeChangedCallback(name, oldValue, value) {
 			if (value === oldValue) return;
@@ -447,22 +432,28 @@ const getGlobalStyles = () => {
 		return sheet;
 	});
 };
+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);
+		else input?.(event$1);
+	}, {
+		signal: controller.signal,
+		...options
+	});
+	scope.onStop(() => controller.abort());
+}
 const getCustomElement = (node) => {
 	if (node) {
 		if ("component" in node) return node;
 		return getCustomElement(node.parentNode);
 	}
 };
-const eventListener = (event, invoke) => {
-	if (Array.isArray(invoke)) for (const target of invoke) target?.(event);
-	else invoke?.(event);
-};
 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
@@ -764,11 +755,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?.();
@@ -789,4 +776,4 @@ const anchorNavigate = (event) => {
 };
 
 //#endregion
-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, eventListener, 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 };
+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.d.ts

@@ -364,4 +364,4 @@ export declare namespace JSX {
 }
 export declare const svgElements: Set<string>;
 export declare const namespace: (tag: string) => "http://www.w3.org/1999/xhtml" | "http://www.w3.org/2000/svg";
-export declare const h: <TEvents extends import("..").Events, TAttributes extends import("..").Attributes>(input: string | import("..").Template | import("..").ComponentConstructor<TEvents, TAttributes>, attributes?: import("..").AttributeInput<TAttributes>, ...children: Array<Slot>) => Slot;
+export declare const h: <TEvents extends import("..").Events, TAttributes extends import("..").Attributes>(input: string | import("..").ComponentConstructor<TEvents, TAttributes>, attributes?: import("..").AttributeInput<TAttributes>, ...children: Array<Slot>) => Slot;

package/dist/jsx/index.js

@@ -1,20 +1,12 @@
 
-//#region src/signals/index.ts
-function defineHook(key) {
-	return key;
-}
-
-//#endregion
 //#region src/html/index.ts
 const createElement = (input, attributes, ...children) => {
-	if (typeof input === "object") return input;
-	else return {
+	return {
 		tag: typeof input === "function" ? input.$name : input,
 		attributes: attributes ?? {},
 		children
 	};
 };
-const MOUNTED_HOOK = defineHook("MOUNTED_HOOK");
 
 //#endregion
 //#region src/jsx/index.ts

package/dist/signals/index.d.ts

@@ -6,16 +6,13 @@ 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>;
+export declare class Scope extends EventTarget {
     constructor();
-    stop(): void;
+    onStop(input: (event: StopEvent) => void): void;
+    stop(): boolean;
 }
 export declare class Compute<T = void> extends Scope {
     readonly scope: Scope;
@@ -32,8 +29,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.23",
+    "version": "0.0.25",
     "type": "module",
     "repository": "coverbase/revojs",
     "license": "MIT",