revojs 0.0.57 → 0.0.59

package/dist/html/index.d.ts

@@ -72,7 +72,9 @@ export interface CustomElementConstructor<TEvents extends Events, TAttributes ex
 export declare class MountedEvent extends Event {
     constructor();
 }
-export declare const isTemplate: (value?: any) => value is Template;
+export declare const isTemplate: <T>(value?: T) => value is Template & T;
+export declare const isCustomElement: <T>(value?: T) => value is CustomElement<Events, Attributes> & T;
+export declare const isComponent: <T>(value?: T) => value is ComponentConstructor<Events, Attributes> & T;
 export declare const useHost: (scope: Scope) => HostContext;
 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;

package/dist/index.js

@@ -1,5 +1,4 @@
 import { defu } from "defu";
-import { h } from "revojs/jsx-runtime";
 
 //#region src/app/index.ts
 const createApp = (config) => {
@@ -112,8 +111,15 @@ var Scope = class extends EventTarget {
 	context;
 	constructor(parentScope) {
 		super();
-		this.parentScope = parentScope;
 		this.context = new Map();
+		this.setParentScope(parentScope);
+	}
+	getParentScope() {
+		return this.parentScope;
+	}
+	setParentScope(parentScope) {
+		this.parentScope = parentScope;
+		return this.parentScope?.onStop(() => this.stop());
 	}
 	getContext(input) {
 		let scope = this;
@@ -136,11 +142,9 @@ var Scope = class extends EventTarget {
 	}
 };
 var Compute = class extends Scope {
-	scope;
 	invoke;
-	constructor(scope, invoke) {
-		super();
-		this.scope = scope;
+	constructor(parentScope, invoke) {
+		super(parentScope);
 		this.invoke = invoke;
 	}
 	run() {
@@ -156,10 +160,7 @@ var Handler = class Handler {
 			const set = computes.get(key) ?? new Set();
 			computes.set(key, set.add(compute));
 			targets.set(target, computes);
-			compute.scope.onStop(() => {
-				compute.stop();
-				set.delete(compute);
-			});
+			compute.getParentScope()?.onStop(() => set.delete(compute));
 		}
 		const value = Reflect.get(target, key);
 		if (value) {
@@ -217,22 +218,39 @@ var MountedEvent = class extends Event {
 	}
 };
 const isTemplate = (value) => {
-	return typeof value === "object" && "tag" in value && "attributes" in value && "children" in value;
+	return !!value && typeof value === "object" && "tag" in value && "attributes" in value && "children" in value;
+};
+const isCustomElement = (value) => {
+	return !!value && typeof value === "object" && "component" in value;
+};
+const isComponent = (value) => {
+	return !!value && typeof value === "function" && "$name" in value;
 };
 const useHost = (scope) => {
 	return scope.getContext(HOST_CONTEXT);
 };
 const createElement = (input, attributes, ...children) => {
-	const template = {
-		tag: typeof input === "function" ? input.$name : input,
+	if (isComponent(input)) {
+		const template = {
+			tag: input.$name,
+			attributes: attributes ?? {},
+			children
+		};
+		if (input.$styles.length) {
+			const classes = template.attributes["class"];
+			template.attributes["class"] = (classes ? [classes, ...input.$styles] : input.$styles).join(" ");
+		}
+		return template;
+	}
+	if (typeof input === "string") return {
+		tag: input,
 		attributes: attributes ?? {},
 		children
 	};
-	if (typeof input === "function" && input.$styles.length) {
-		const classes = template.attributes["class"];
-		template.attributes["class"] = (classes ? [classes, ...input.$styles] : input.$styles).join(" ");
-	}
-	return template;
+	return input?.({
+		...attributes,
+		children
+	});
 };
 const toString = (slot) => {
 	switch (typeof slot) {
@@ -302,17 +320,16 @@ const hydrate = async (scope, parentNode, slot, index, previous) => {
 		const Component = components.get(slot.tag);
 		if (Component) registerComponent(Component);
 		if (previous || !(hydration instanceof Element && hydration.tagName.toUpperCase() === slot.tag.toUpperCase())) hydration = document.createElementNS(namespace(slot.tag), slot.tag);
-		for (const [name, value] of Object.entries(slot.attributes)) createCompute(scope, (childScope) => {
+		for (const [name, value] of Object.entries(slot.attributes)) createCompute(scope, (scope$1) => {
 			const target = hydration;
 			if (name.startsWith("on")) {
 				const event = name.substring(2).toLowerCase();
-				useEvent(childScope, target, event, value);
+				useEvent(scope$1, target, event, value);
 			} else {
 				const set = toString(value);
 				if (set === "" || set === "false") return target.removeAttribute(name);
 				return target.setAttribute(name, set);
 			}
-			scope.onStop(() => childScope.stop());
 		});
 		for (const [index$1, childSlot] of slot.children.entries()) await hydrate(scope, hydration, childSlot, index$1, previous);
 	}
@@ -342,7 +359,6 @@ const renderToString = async (scope, slot) => {
 		let content = `<${prefix}>`;
 		if (CustomElement) {
 			const element = new CustomElement(slot.attributes, scope);
-			scope.onStop(() => element.scope.stop());
 			const template = await renderToString(element.scope, await element.setup());
 			if (element.shadowRoot) {
 				const shadow = {
@@ -393,15 +409,14 @@ const toCustomElement = (Component) => {
 		internals = this.attachInternals();
 		async connectedCallback() {
 			let rootNode = this;
-			const findParent = (node) => {
+			const findParentScope = (node) => {
 				if (node) {
-					if ("component" in node) return node;
-					if (node instanceof ShadowRoot) return findParent(node.host);
-					return findParent(node.parentNode);
+					if (isCustomElement(node)) return node.component.scope;
+					if (node instanceof ShadowRoot) return findParentScope(node.host);
+					return findParentScope(node.parentNode);
 				}
 			};
-			const parentNode = findParent(this.parentNode);
-			if (parentNode) this.component.scope.parentScope = parentNode.component.scope;
+			this.component.scope.setParentScope(findParentScope(this.parentNode));
 			if (this.component.shadowRoot) rootNode = this.shadowRoot ?? this.attachShadow(this.component.shadowRoot);
 			for (const [name, event] of Object.entries(Component.$events)) Reflect.set(this.component.events, name, (value) => {
 				if (value instanceof Event) return;
@@ -515,6 +530,9 @@ var Radix = class Radix {
 
 //#endregion
 //#region src/runtime/index.ts
+const isRoute = (value) => {
+	return !!value && typeof value === "object" && "fetch" in value;
+};
 const useRuntime = (scope) => {
 	return scope.getContext(RUNTIME_CONTEXT);
 };
@@ -566,8 +584,8 @@ const createRuntime = async () => {
 		const [name, method] = toPath(path);
 		radix.insert((method ?? "GET").toUpperCase() + name, defineRoute({ fetch: async (event) => {
 			const route = await routes[path]?.();
-			if (typeof route === "object") return route.fetch(event);
-			if (route) return sendHtml(event, await renderToString(event, await import("#virtual/client").then((module) => module.client)));
+			if (isRoute(route)) return route.fetch(event);
+			return sendHtml(event, await renderToString(event, await import("#virtual/client").then((module) => module.client)));
 		} }));
 	}
 	const assets = await import("#virtual/assets").then((module) => module.assets);
@@ -800,10 +818,7 @@ const Page = defineComponent({
 	name: "x-page",
 	setup: ({ scope }) => {
 		const { route } = useRouter(scope);
-		return () => {
-			const Page$1 = route.value;
-			if (Page$1) return /* @__PURE__ */ h(Page$1, null);
-		};
+		return () => route.value;
 	}
 });
 
@@ -852,4 +867,4 @@ const useLocale = (scope, context) => {
 };
 
 //#endregion
-export { $fetch, CLIENT, Compute, HOST_CONTEXT, Handler, LOCALE_CONTEXT, MountedEvent, NavigateEvent, Page, ROUTER_CONTEXT, ROUTE_CONTEXT, RUNTIME_CONTEXT, Radix, SERVER, Scope, StopEvent, activeCompute, components, createApp, createCompute, createElement, createLocale, createMemo, createRouter, createRuntime, createState, defineComponent, defineContext, defineMiddleware, defineRoute, fileName, fromValue, hydrate, isClient, isServer, isTemplate, mimeType, preventDefault, registerComponent, renderToString, sendBadRequest, sendHtml, sendJson, sendRedirect, sendText, sendUnauthorized, setCookie, stopImmediatePropagation, stopPropagation, targets, toArray, toCustomElement, toFragment, toPath, toRange, toString, useCookies, useEvent, useHost, useLocale, useRequestUrl, useRoute, useRouter, useRuntime, useSetCookies };
+export { $fetch, CLIENT, Compute, HOST_CONTEXT, Handler, LOCALE_CONTEXT, MountedEvent, NavigateEvent, Page, ROUTER_CONTEXT, ROUTE_CONTEXT, RUNTIME_CONTEXT, Radix, SERVER, Scope, StopEvent, activeCompute, components, createApp, createCompute, createElement, createLocale, createMemo, createRouter, createRuntime, createState, defineComponent, defineContext, defineMiddleware, defineRoute, fileName, fromValue, hydrate, isClient, isComponent, isCustomElement, isRoute, isServer, isTemplate, mimeType, preventDefault, registerComponent, renderToString, sendBadRequest, sendHtml, sendJson, sendRedirect, sendText, sendUnauthorized, setCookie, stopImmediatePropagation, stopPropagation, targets, toArray, toCustomElement, toFragment, toPath, toRange, toString, useCookies, useEvent, useHost, useLocale, useRequestUrl, useRoute, useRouter, useRuntime, useSetCookies };

package/dist/jsx/index.d.ts

@@ -1,4 +1,7 @@
 import { type EventListener, type Slot } from "../html";
+export type Fragment = {
+    children: Array<Slot>;
+};
 export type EventAttributes = {
     onScroll?: EventListener<Event>;
     onScrollCapture?: EventListener<Event>;
@@ -365,3 +368,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("..").ComponentConstructor<TEvents, TAttributes>, attributes?: import("..").AttributeInput<TAttributes>, ...children: Array<Slot>) => Slot;
+export declare const fragment: ({ children }: Fragment) => unknown[];

package/dist/jsx/index.js

@@ -5,17 +5,31 @@ function defineContext(key) {
 
 //#endregion
 //#region src/html/index.ts
+const isComponent = (value) => {
+	return !!value && typeof value === "function" && "$name" in value;
+};
 const createElement = (input, attributes, ...children) => {
-	const template = {
-		tag: typeof input === "function" ? input.$name : input,
+	if (isComponent(input)) {
+		const template = {
+			tag: input.$name,
+			attributes: attributes ?? {},
+			children
+		};
+		if (input.$styles.length) {
+			const classes = template.attributes["class"];
+			template.attributes["class"] = (classes ? [classes, ...input.$styles] : input.$styles).join(" ");
+		}
+		return template;
+	}
+	if (typeof input === "string") return {
+		tag: input,
 		attributes: attributes ?? {},
 		children
 	};
-	if (typeof input === "function" && input.$styles.length) {
-		const classes = template.attributes["class"];
-		template.attributes["class"] = (classes ? [classes, ...input.$styles] : input.$styles).join(" ");
-	}
-	return template;
+	return input?.({
+		...attributes,
+		children
+	});
 };
 const HOST_CONTEXT = defineContext("HOST_CONTEXT");
 
@@ -104,6 +118,7 @@ const namespace = (tag) => {
 	return svgElements.has(tag) ? "http://www.w3.org/2000/svg" : "http://www.w3.org/1999/xhtml";
 };
 const h = createElement;
+const fragment = ({ children }) => children;
 
 //#endregion
-export { h, namespace, svgElements };
+export { fragment, h, namespace, svgElements };

package/dist/presets/bun.js

@@ -1,6 +1,6 @@
-import { RUNTIME_CONTEXT, Scope } from "./runtime-C9LNWVm0.js";
-import { runtime } from "#virtual/runtime";
+import { RUNTIME_CONTEXT, Scope } from "./runtime-BWvA8m4e.js";
 import { serve } from "bun";
+import { runtime } from "#virtual/runtime";
 
 //#region src/presets/bun.ts
 serve({ fetch: (request) => {

package/dist/presets/cloudflare.js

@@ -1,4 +1,4 @@
-import { RUNTIME_CONTEXT, Scope } from "./runtime-C9LNWVm0.js";
+import { RUNTIME_CONTEXT, Scope } from "./runtime-BWvA8m4e.js";
 import { runtime } from "#virtual/runtime";
 
 //#region src/presets/cloudflare.ts

package/dist/presets/{runtime-C9LNWVm0.js → runtime-BWvA8m4e.js}

@@ -9,8 +9,15 @@ var Scope = class extends EventTarget {
 	context;
 	constructor(parentScope) {
 		super();
-		this.parentScope = parentScope;
 		this.context = new Map();
+		this.setParentScope(parentScope);
+	}
+	getParentScope() {
+		return this.parentScope;
+	}
+	setParentScope(parentScope) {
+		this.parentScope = parentScope;
+		return this.parentScope?.onStop(() => this.stop());
 	}
 	getContext(input) {
 		let scope = this;

package/dist/router/index.d.ts

@@ -1,7 +1,7 @@
-import { type Attributes, type ComponentConstructor, type Events } from "../html";
+import { type Slot } from "../html";
 import { Radix } from "../radix";
 import { type Descriptor, Scope, type State } from "../signals";
-export type Routes = Record<string, () => Promise<ComponentConstructor<Events, Attributes>>>;
+export type Routes = Record<string, () => Promise<Slot>>;
 export type RouterOptions<T extends Routes = Routes> = {
     routes: T;
 };
@@ -9,8 +9,8 @@ export type RouterContext<T extends RouterOptions = RouterOptions> = {
     options: T;
     navigator: EventTarget;
     url: State<URL | undefined>;
-    radix: Radix<() => Promise<ComponentConstructor<Events, Attributes>>>;
-    route: State<ComponentConstructor<Events, Attributes> | undefined>;
+    radix: Radix<() => Promise<Slot>>;
+    route: State<Slot | undefined>;
 };
 export declare class NavigateEvent extends Event {
     constructor();
@@ -20,7 +20,7 @@ export declare const createRouter: <T extends RouterOptions>(options: T) => {
     ROUTER_CONTEXT: Descriptor<RouterContext<T>>;
     registerRouterContext: (scope: Scope) => Promise<{
         url: State<URL | undefined>;
-        route: State<ComponentConstructor<Events, Attributes> | undefined>;
+        route: State<unknown>;
         navigator: EventTarget;
         navigate: (path: string) => void;
         anchorNavigate: (event: Event) => void;
@@ -28,12 +28,12 @@ export declare const createRouter: <T extends RouterOptions>(options: T) => {
 };
 export declare const useRouter: <T extends RouterContext>(scope: Scope, context?: Descriptor<T>) => {
     url: State<URL | undefined>;
-    route: State<ComponentConstructor<Events, Attributes> | undefined>;
+    route: State<unknown>;
     navigator: EventTarget;
     navigate: (path: string) => void;
     anchorNavigate: (event: Event) => void;
 };
-export declare const Page: ComponentConstructor<Events, Attributes>;
+export declare const Page: import("..").ComponentConstructor<import("..").Events, import("..").Attributes>;
 declare global {
     interface ElementEventMap {
         navigate: NavigateEvent;

package/dist/runtime/index.d.ts

@@ -20,6 +20,7 @@ export type RuntimeContext<T = Record<string, unknown>> = {
 export type RouteContext = {
     inputs: State<Record<string, string>>;
 };
+export declare const isRoute: <T>(value?: T) => value is Route & T;
 export declare const useRuntime: <T = Record<string, unknown>>(scope: Scope) => RuntimeContext<T>;
 export declare const useRoute: (scope: Scope) => RouteContext;
 export declare const defineRoute: (route: Route) => Route;

package/dist/signals/index.d.ts

@@ -10,18 +10,19 @@ export declare class StopEvent extends Event {
     constructor();
 }
 export declare class Scope extends EventTarget {
-    parentScope?: Scope;
+    private parentScope?;
     readonly context: Map<string, unknown>;
     constructor(parentScope?: Scope);
+    getParentScope(): Scope | undefined;
+    setParentScope(parentScope?: Scope): void | undefined;
     getContext<T>(input: Descriptor<T>): T;
     setContext<T>(input: Descriptor<T>, value: T): void;
     onStop(input: (event: StopEvent) => void): void;
     stop(): boolean;
 }
 export declare class Compute<T = void> extends Scope {
-    readonly scope: Scope;
     readonly invoke: (scope: Scope) => T;
-    constructor(scope: Scope, invoke: (scope: Scope) => T);
+    constructor(parentScope: Scope, invoke: (scope: Scope) => T);
     run(): T;
 }
 export declare class Handler<T extends object> implements ProxyHandler<T> {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "revojs",
-    "version": "0.0.57",
+    "version": "0.0.59",
     "type": "module",
     "repository": "coverbase/revojs",
     "license": "MIT",
@@ -24,7 +24,10 @@
     "types": "./dist/index.d.ts",
     "module": "./dist/index.js",
     "main": "./dist/index.js",
-    "files": ["dist", "src/types"],
+    "files": [
+        "dist",
+        "src/types"
+    ],
     "scripts": {
         "build": "rolldown -c rolldown.config.ts && tsc",
         "watch": "rolldown -w -c rolldown.config.ts && tsc --watch"

package/src/types/index.d.ts

@@ -13,7 +13,9 @@ declare module "#virtual/client" {
 }
 
 declare module "#virtual/routes" {
-    export const routes: Record<string, () => Promise<Route | ComponentConstructor<Events, Attributes>>>;
+    import type { Route, Slot } from "revojs";
+
+    export const routes: Record<string, () => Promise<Route | Slot>>;
 }
 
 declare module "#virtual/runtime" {