revojs 0.0.13 → 0.0.15

package/dist/html/index.d.ts

@@ -1,5 +1,5 @@
 import { type HtmlAttributes } from "../jsx";
-import { Scope, type State, type Value } from "../signals";
+import { type Descriptor, Hooks, Scope, type State, type Value } from "../signals";
 export type TypeOf<T> = {
     (): T;
 };
@@ -44,10 +44,14 @@ 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>>;
     readonly shadowRoot: false | ShadowRootInit;
     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>;
 }
@@ -55,7 +59,7 @@ export interface ComponentConstructor<TEvents extends Events, TAttributes extend
     $name: string;
     $events: TEvents;
     $attributes: TAttributes;
-    new (input?: Input<TEvents, TAttributes>, host?: CustomElement<TEvents, TAttributes>): Component<TEvents, TAttributes>;
+    new (input?: Input<TEvents, TAttributes>, context?: Map<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>;
@@ -79,5 +83,5 @@ 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: import("..").Descriptor<HTMLElement>;
+export declare const MOUNTED_HOOK: Descriptor<HTMLElement>;
 export declare const components: Map<string, ComponentConstructor<Events, Attributes>>;

package/dist/index.js

@@ -107,32 +107,28 @@ const namespace = (tag) => {
 
 //#endregion
 //#region src/signals/index.ts
-var Scope = class {
+var Hooks = class {
 	hooks;
-	context;
-	dispose;
 	constructor() {
 		this.hooks = new Map();
-		this.context = new Map();
-		this.dispose = new Array();
 	}
-	on = (input, invoke) => {
+	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 this.dispose.push(() => invokes.delete(invoke));
+		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);
 	};
-	getContext = (input) => {
-		return this.context.get(descriptor(input)) ?? {};
-	};
-	setContext = (input, value) => {
-		this.context.set(descriptor(input), value);
-	};
+};
+var Scope = class {
+	dispose;
+	constructor() {
+		this.dispose = new Array();
+	}
 	stop() {
 		while (this.dispose.length) this.dispose.pop()?.(this);
 	}
@@ -257,8 +253,7 @@ const renderToString = async (slot, context) => {
 				}, [slot.tag]).join(" ");
 				const children = await renderToString(slot.children, context);
 				if (customElement) {
-					const element = new customElement(slot.attributes);
-					for (const [input, value] of context) element.scope.setContext(input, value);
+					const element = new customElement(slot.attributes, context);
 					const template = await renderToString(await element.setup(), context);
 					if (element.shadowRoot) {
 						const shadow = await renderToString({
@@ -350,12 +345,16 @@ const defineComponent = (options) => {
 		static $events = options.events ?? {};
 		static $attributes = options.attributes ?? {};
 		scope;
+		hooks;
+		context;
 		events;
 		attributes;
 		shadowRoot;
 		host;
-		constructor(input, 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);
 				return output;
@@ -367,8 +366,14 @@ const defineComponent = (options) => {
 			this.shadowRoot = options.shadowRoot ?? { mode: "open" };
 			this.host = host;
 		}
+		getContext = (input) => {
+			return this.context.get(descriptor(input)) ?? {};
+		};
+		setContext = (input, value) => {
+			this.context.set(descriptor(input), value);
+		};
 		onMounted = (invoke) => {
-			return this.scope.on(MOUNTED_HOOK, invoke);
+			return this.hooks.on(this.scope, MOUNTED_HOOK, invoke);
 		};
 		setup = () => options.setup(this);
 	});
@@ -379,13 +384,11 @@ const toCustomElement = (component) => {
 		component;
 		constructor() {
 			super();
-			this.component = new component(void 0, this);
+			this.component = new component(void 0, void 0, this);
 		}
 		async connectedCallback() {
 			const shadow = this.component.shadowRoot ? this.attachShadow(this.component.shadowRoot) : this;
 			const parentNode = getCustomElement(this.parentNode);
-			for (const [name, set] of parentNode?.component.scope.hooks ?? []) for (const invoke of set) this.component.scope.on(name, invoke);
-			for (const [name, value] of parentNode?.component.scope.context ?? []) this.component.scope.setContext(name, value);
 			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(), {
@@ -393,9 +396,9 @@ const toCustomElement = (component) => {
 					detail: value
 				}));
 			}, this.component.events);
-			if (parentNode) for (const key in parentNode.component.scope.context) this.component.scope.setContext(key, parentNode.component.scope.context.get(key));
+			if (parentNode) for (const [name, value] of parentNode.component.context) this.component.context.set(name, value);
 			shadow.replaceChildren(await renderToNode(this.component.scope, await this.component.setup()));
-			this.component.scope.dispatch(MOUNTED_HOOK, this);
+			this.component.hooks.dispatch(MOUNTED_HOOK, this);
 		}
 		attributeChangedCallback(name, oldValue, value) {
 			if (value === oldValue) return;
@@ -749,8 +752,8 @@ const RUNTIME_CONTEXT = defineContext("RUNTIME_CONTEXT");
 const Outlet = defineComponent({
 	name: "x-outlet",
 	shadowRoot: false,
-	setup: async ({ scope }) => {
-		const { event } = scope.getContext(RUNTIME_CONTEXT);
+	setup: async ({ scope, getContext }) => {
+		const { event } = getContext(RUNTIME_CONTEXT);
 		const radix = new Radix();
 		const routes = await getRoutes();
 		for (const path in routes) {
@@ -783,4 +786,4 @@ const anchorNavigate = (event) => {
 };
 
 //#endregion
-export { $fetch, Compute, Handler, 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 };
+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/signals/index.d.ts

@@ -5,15 +5,15 @@ export interface State<T> {
 export type Descriptor<T> = {
     key: symbol;
 };
-export declare class Scope {
+export declare class Hooks {
     readonly hooks: Map<string, Set<(value: any) => unknown>>;
-    readonly context: Map<string, unknown>;
-    readonly dispose: Array<(scope: Scope) => void>;
     constructor();
-    on: <T>(input: string | Descriptor<T>, invoke: (value: T) => unknown) => number;
+    on: <T>(scope: Scope, input: string | Descriptor<T>, invoke: (value: T) => unknown) => number;
     dispatch: <T>(input: string | Descriptor<T>, value: T) => void;
-    getContext: <T>(input: string | Descriptor<T>) => T;
-    setContext: <T>(input: string | Descriptor<T>, value: T) => void;
+}
+export declare class Scope {
+    readonly dispose: Array<(scope: Scope) => void>;
+    constructor();
     stop(): void;
 }
 export declare class Compute<T = void> extends Scope {

package/package.json

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