revojs 0.0.10 → 0.0.12

package/dist/html/index.d.ts

@@ -1,7 +1,5 @@
-import { Hooks } from "../hooks";
 import { type HtmlAttributes } from "../jsx";
 import { Scope, type State, type Value } from "../signals";
-import { type Descriptor } from "../types";
 export type TypeOf<T> = {
     (): T;
 };
@@ -46,14 +44,10 @@ 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 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>;
 }
@@ -61,7 +55,7 @@ export interface ComponentConstructor<TEvents extends Events, TAttributes extend
     $name: string;
     $events: TEvents;
     $attributes: TAttributes;
-    new (input?: Input<TEvents, TAttributes>, context?: Record<string, unknown>, host?: CustomElement<TEvents, TAttributes>): Component<TEvents, TAttributes>;
+    new (input?: Input<TEvents, TAttributes>, host?: CustomElement<TEvents, TAttributes>): Component<TEvents, TAttributes>;
 }
 export interface CustomElement<TEvents extends Events, TAttributes extends Attributes> extends HTMLElement {
     readonly component: Component<TEvents, TAttributes>;
@@ -70,11 +64,10 @@ export interface CustomElementConstructor<TEvents extends Events, TAttributes ex
     new (): CustomElement<TEvents, TAttributes>;
 }
 export declare const isTemplate: (value: object) => value is Template;
-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 renderToString: (slot: Slot, context: Map<string, unknown>) => 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>;
@@ -86,5 +79,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: Descriptor<HTMLElement>;
+export declare const MOUNTED_HOOK: import("..").Descriptor<HTMLElement>;
 export declare const components: Map<string, ComponentConstructor<Events, Attributes>>;

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 export * from "./app";
-export * from "./hooks";
 export * from "./html";
 export * from "./http";
 export * from "./markdown";
@@ -7,4 +6,3 @@ export * from "./radix";
 export * from "./router";
 export * from "./runtime";
 export * from "./signals";
-export * from "./types";

package/dist/index.js

@@ -20,35 +20,6 @@ const createApp = (config) => {
 	};
 };
 
-//#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
 const svgElements = new Set([
@@ -137,10 +108,31 @@ const namespace = (tag) => {
 //#endregion
 //#region src/signals/index.ts
 var Scope = class {
+	hooks;
+	context;
 	dispose;
 	constructor() {
+		this.hooks = new Map();
+		this.context = new Map();
 		this.dispose = new Array();
 	}
+	on = (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));
+	};
+	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);
+	};
 	stop() {
 		while (this.dispose.length) this.dispose.pop()?.(this);
 	}
@@ -210,6 +202,15 @@ function fromValue(value) {
 	if (value instanceof Function) return fromValue(value());
 	return value;
 }
+function descriptor(descriptor$1) {
+	return (typeof descriptor$1 === "object" ? descriptor$1.key : descriptor$1).toString();
+}
+function defineHook(description) {
+	return { key: Symbol(description) };
+}
+function defineContext(description) {
+	return { key: Symbol(description) };
+}
 let activeCompute;
 const targets = new WeakMap();
 
@@ -218,9 +219,6 @@ const targets = new WeakMap();
 const isTemplate = (value) => {
 	return "tag" in value && "attributes" in value && "children" in value;
 };
-const defineContext = (description) => {
-	return { key: Symbol(description) };
-};
 const createElement = (input, attributes, ...children) => {
 	return {
 		tag: typeof input === "function" ? input.$name : input,
@@ -259,7 +257,8 @@ const renderToString = async (slot, context) => {
 				}, [slot.tag]).join(" ");
 				const children = await renderToString(slot.children, context);
 				if (customElement) {
-					const element = new customElement(slot.attributes, context);
+					const element = new customElement(slot.attributes);
+					for (const [input, value] of context) element.scope.setContext(input, value);
 					const template = await renderToString(await element.setup(), context);
 					if (element.shadowRoot) {
 						const shadow = await renderToString({
@@ -351,15 +350,12 @@ const defineComponent = (options) => {
 		static $events = options.events ?? {};
 		static $attributes = options.attributes ?? {};
 		scope;
-		hooks;
 		events;
 		attributes;
 		shadowRoot;
-		context;
 		host;
-		constructor(input, context, host) {
+		constructor(input, 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;
@@ -369,17 +365,10 @@ const defineComponent = (options) => {
 				return attributes;
 			}, createState({}));
 			this.shadowRoot = options.shadowRoot ?? { mode: "open" };
-			this.context = context ?? {};
 			this.host = host;
 		}
-		getContext = (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);
+			return this.scope.on(MOUNTED_HOOK, invoke);
 		};
 		setup = () => options.setup(this);
 	});
@@ -390,11 +379,12 @@ const toCustomElement = (component) => {
 		component;
 		constructor() {
 			super();
-			this.component = new component(void 0, void 0, this);
+			this.component = new component(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, 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(), {
@@ -402,9 +392,9 @@ const toCustomElement = (component) => {
 					detail: value
 				}));
 			}, this.component.events);
-			if (parentNode) for (const key in parentNode.component.context) this.component.setContext(key, parentNode.component.context[key]);
+			if (parentNode) for (const key in parentNode.component.scope.context) this.component.scope.setContext(key, parentNode.component.scope.context.get(key));
 			shadow.replaceChildren(await renderToNode(this.component.scope, await this.component.setup()));
-			this.component.hooks.dispatch(MOUNTED_HOOK, this);
+			this.component.scope.dispatch(MOUNTED_HOOK, this);
 		}
 		attributeChangedCallback(name, oldValue, value) {
 			if (value === oldValue) return;
@@ -714,7 +704,9 @@ const createRuntime = async () => {
 			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 context = new Map();
+				context.set(descriptor(RUNTIME_CONTEXT), { event });
+				return sendHtml(event, await renderToString(slot, context));
 			}
 		} }));
 	}
@@ -756,8 +748,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) {
@@ -790,4 +782,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, 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, 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.js

@@ -1,8 +1,8 @@
 
-//#region src/hooks/index.ts
-const defineHook = (description) => {
+//#region src/signals/index.ts
+function defineHook(description) {
 	return { key: Symbol(description) };
-};
+}
 
 //#endregion
 //#region src/html/index.ts

package/dist/signals/index.d.ts

@@ -2,9 +2,18 @@ export type Value<T> = T | (() => Value<T>);
 export interface State<T> {
     value: T;
 }
+export type Descriptor<T> = {
+    key: symbol;
+};
 export declare class Scope {
+    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;
+    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;
     stop(): void;
 }
 export declare class Compute<T = void> extends Scope {
@@ -22,5 +31,8 @@ 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: () => T): State<T>;
 export declare function fromValue<T>(value: Value<T>): T;
+export declare function descriptor<T>(descriptor: string | Descriptor<T>): string;
+export declare function defineHook<T>(description?: string | number): Descriptor<T>;
+export declare function defineContext<T>(description?: string | number): Descriptor<T>;
 export declare let activeCompute: Compute | undefined;
 export declare const targets: WeakMap<object, Map<string | symbol, Set<Compute<void>>>>;

package/package.json

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

package/dist/hooks/index.d.ts

@@ -1,9 +0,0 @@
-import { Scope } from "../signals";
-import { type Descriptor } from "../types";
-export declare class Hooks {
-    readonly hooks: Map<string, Set<(value: any) => unknown>>;
-    constructor();
-    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/types/index.d.ts

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