revojs 0.0.25 → 0.0.27

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>;
@@ -73,7 +70,7 @@ 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>;

package/dist/index.js

@@ -113,8 +113,25 @@ var StopEvent = class extends Event {
 	}
 };
 var Scope = class extends EventTarget {
-	constructor() {
+	parentScope;
+	context;
+	constructor(scope) {
 		super();
+		this.parentScope = scope;
+		this.context = new Map();
+	}
+	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 {};
+	}
+	setContext(input, value) {
+		this.context.set(input, value);
 	}
 	onStop(input) {
 		this.addEventListener("stop", input, { once: true });
@@ -228,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}>`;
@@ -336,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;
@@ -355,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?.parentNode);
+			if (parentNode) this.scope.parentScope = parentNode.component.scope;
+			return options.setup(this);
 		};
-		setup = () => options.setup(this);
 	});
 };
 const toCustomElement = (component) => {
@@ -374,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(), {
@@ -382,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());
 		}
@@ -678,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);
@@ -703,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)));
 			}
 		} }));
 	}
@@ -746,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) {

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

@@ -10,7 +10,11 @@ export declare class StopEvent extends Event {
     constructor();
 }
 export declare class Scope extends EventTarget {
-    constructor();
+    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;
 }

package/package.json

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