revojs 0.0.23 → 0.0.24

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(event?: EventInit);
+}
 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,8 +79,8 @@ 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 const useEvent: (scope: Scope, target: EventTarget | undefined, event: string, input: EventListener<Event>, options?: AddEventListenerOptions) => number;
 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;
@@ -87,3 +88,8 @@ 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

@@ -208,12 +208,16 @@ const targets = new WeakMap();
 
 //#endregion
 //#region src/html/index.ts
+var MountedEvent = class extends Event {
+	constructor(event) {
+		super("mounted", event);
+	}
+};
 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
@@ -321,12 +325,8 @@ 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")) {
-						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());
-					} else createCompute(scope, () => {
+					if (name.startsWith("on")) useEvent(scope, element, name.substring(2).toLowerCase(), value);
+					else createCompute(scope, () => {
 						const set = toString(value);
 						if (set === "" || set === "false") return element.removeAttribute(name);
 						return element.setAttribute(name, set);
@@ -346,7 +346,6 @@ const defineComponent = (options) => {
 		static $events = options.events ?? {};
 		static $attributes = options.attributes ?? {};
 		scope;
-		hooks;
 		context;
 		events;
 		attributes;
@@ -354,7 +353,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 +371,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 +394,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,16 +442,23 @@ const getGlobalStyles = () => {
 		return sheet;
 	});
 };
+const 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
+	});
+	return scope.dispose.push(() => 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();
@@ -789,4 +791,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, 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 };

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

@@ -7,8 +7,7 @@ function defineHook(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

package/package.json

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