revojs 0.0.32 → 0.0.34

package/dist/html/index.d.ts

@@ -24,30 +24,34 @@ export type EventOutput<T extends Events> = {
 export type AttributeOutput<T extends Attributes> = {
     [K in keyof T]: T[K]["default"] extends undefined ? Infer<T[K]["type"]> | undefined : Infer<T[K]["type"]>;
 };
-export type EventOptions<T> = {
+export type EventOptions<T = unknown> = {
     type: T;
     bubbles?: boolean;
     cancelable?: boolean;
     composed?: boolean;
 };
-export type AttributeOptions<T> = {
+export type AttributeOptions<T = unknown> = {
     type: T;
     default?: Infer<T>;
 };
-export type Events = Record<string, EventOptions<unknown>>;
-export type Attributes = Record<string, AttributeOptions<unknown>>;
+export type ShadowRootOptions = Partial<ShadowRootInit> & {
+    globalStyles?: boolean;
+};
+export type Events = Record<string, EventOptions>;
+export type Attributes = Record<string, AttributeOptions>;
 export interface ComponentOptions<TEvents extends Events, TAttributes extends Attributes> {
     name: string;
     events?: TEvents;
     attributes?: TAttributes;
-    shadowRoot?: false | ShadowRootInit;
+    shadowRoot?: false | ShadowRootOptions;
+    styles?: Array<string>;
     setup: (component: Component<TEvents, TAttributes>) => Slot | Promise<Slot>;
 }
 export interface Component<TEvents extends Events, TAttributes extends Attributes> {
     readonly scope: Scope;
     readonly events: EventOutput<TEvents>;
     readonly attributes: State<AttributeOutput<TAttributes>>;
-    readonly shadowRoot: false | ShadowRootInit;
+    readonly shadowRoot: false | ShadowRootOptions;
     readonly host?: CustomElement<TEvents, TAttributes>;
     setup: () => Slot | Promise<Slot>;
 }
@@ -55,6 +59,7 @@ export interface ComponentConstructor<TEvents extends Events, TAttributes extend
     $name: string;
     $events: TEvents;
     $attributes: TAttributes;
+    $styles: Array<string>;
     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 {
@@ -75,7 +80,6 @@ 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>;
 export declare const registerComponent: <TEvents extends Events = {}, TAttributes extends Attributes = {}>(component: ComponentConstructor<TEvents, TAttributes>) => ComponentConstructor<TEvents, TAttributes>;
-export declare const getGlobalStyles: () => CSSStyleSheet[];
 export declare function useEvent<T extends keyof ElementEventMap>(scope: Scope, target: EventTarget | undefined, event: T, input: EventListener<ElementEventMap[T]>, options?: AddEventListenerOptions): void;
 export declare function useEvent<T extends keyof WindowEventMap>(scope: Scope, target: Window | undefined, event: T, input: EventListener<WindowEventMap[T]>, options?: AddEventListenerOptions): void;
 export declare function useEvent<T extends keyof HTMLElementEventMap>(scope: Scope, target: HTMLElement | undefined, event: T, input: EventListener<HTMLElementEventMap[T]>, options?: AddEventListenerOptions): void;

package/dist/index.js

@@ -222,11 +222,16 @@ const isTemplate = (value) => {
 	return "tag" in value && "attributes" in value && "children" in value;
 };
 const createElement = (input, attributes, ...children) => {
-	return {
+	const template = {
 		tag: typeof input === "function" ? input.$name : input,
 		attributes: attributes ?? {},
 		children
 	};
+	if (typeof input === "function") {
+		const classes = template.attributes["class"];
+		template.attributes["class"] = (classes ? [classes, ...input.$styles] : input.$styles).join(" ");
+	}
+	return template;
 };
 const toString = (slot) => {
 	switch (typeof slot) {
@@ -353,6 +358,7 @@ const defineComponent = (options) => {
 		static $name = options.name;
 		static $events = options.events ?? {};
 		static $attributes = options.attributes ?? {};
+		static $styles = options.styles ?? [];
 		scope;
 		events;
 		attributes;
@@ -393,7 +399,19 @@ const toCustomElement = (component) => {
 			this.component = new component(void 0, void 0, this);
 		}
 		async connectedCallback() {
-			const rootNode = this.component.shadowRoot ? this.attachShadow(this.component.shadowRoot) : this;
+			let rootNode = this;
+			if (this.component.shadowRoot) {
+				rootNode = this.attachShadow(defu(this.component.shadowRoot, { mode: "open" }));
+				if (this.component.shadowRoot.globalStyles) {
+					const globalStyles = Array.from(document.styleSheets).map((style) => {
+						const sheet = new CSSStyleSheet();
+						const css = Array.from(style.cssRules).map((rule) => rule.cssText).join(" ");
+						sheet.replaceSync(css);
+						return sheet;
+					});
+					rootNode.adoptedStyleSheets.push(...globalStyles);
+				}
+			}
 			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(), {
@@ -442,14 +460,6 @@ const registerComponent = (component) => {
 	}
 	return component;
 };
-const getGlobalStyles = () => {
-	return Array.from(isServer() ? [] : document.styleSheets).map((style) => {
-		const sheet = new CSSStyleSheet();
-		const css = Array.from(style.cssRules).map((rule) => rule.cssText).join(" ");
-		sheet.replaceSync(css);
-		return sheet;
-	});
-};
 function useEvent(scope, target, event, input, options) {
 	const controller = new AbortController();
 	target?.addEventListener(event, (event$1) => {
@@ -591,6 +601,9 @@ var Radix = class Radix {
 
 //#endregion
 //#region src/runtime/index.ts
+const useRuntime = (scope, context) => {
+	return scope.getContext(context ?? RUNTIME_CONTEXT);
+};
 const defineRoute = (route) => {
 	return route;
 };
@@ -604,7 +617,7 @@ const toPath = (value) => {
 	return split.length === 3 ? [split.at(0), split.at(1)] : [split.at(0)];
 };
 const $fetch = async (scope, input, init) => {
-	const { event } = scope.getContext(RUNTIME_CONTEXT);
+	const { event } = useRuntime(scope);
 	let response;
 	if (event) {
 		const url = new URL(input.toString(), event.request.url);
@@ -683,6 +696,7 @@ const ROUTER_CONTEXT = defineContext("ROUTER_CONTEXT");
 const createRouter = (options) => {
 	const navigator = new EventTarget();
 	const radix = new Radix();
+	const url = createState();
 	const route = createState();
 	const inputs = createState();
 	for (const path in options.routes) {
@@ -693,10 +707,10 @@ const createRouter = (options) => {
 		}
 	}
 	const registerRouterContext = async (scope) => {
-		const { event } = scope.getContext(RUNTIME_CONTEXT);
+		const { event } = useRuntime(scope);
 		const fetch$1 = async () => {
-			const url = new URL(event ? event.request.url : window.location.href);
-			const match = radix.match(url.pathname);
+			url.value = new URL(event?.request.url ?? window?.location.href);
+			const match = radix.match(url.value.pathname);
 			inputs.value = match.inputs;
 			const Page$1 = await match.value?.();
 			if (Page$1) route.value = /* @__PURE__ */ h(Page$1, inputs.value);
@@ -707,6 +721,7 @@ const createRouter = (options) => {
 		scope.setContext(ROUTER_CONTEXT, {
 			options,
 			navigator,
+			url,
 			radix,
 			route,
 			inputs
@@ -719,7 +734,7 @@ const createRouter = (options) => {
 	};
 };
 const useRouter = (scope, context) => {
-	const { route, inputs, navigator } = scope.getContext(context ?? ROUTER_CONTEXT);
+	const { url, route, inputs, navigator } = scope.getContext(context ?? ROUTER_CONTEXT);
 	const navigate = (path) => {
 		if (isClient()) window.history.pushState(window.history.state, "", path);
 		navigator.dispatchEvent(new NavigateEvent());
@@ -729,6 +744,7 @@ const useRouter = (scope, context) => {
 		navigate(event.currentTarget?.getAttribute("href") ?? "/");
 	};
 	return {
+		url,
 		route,
 		inputs,
 		navigator,
@@ -888,4 +904,4 @@ const markdownToSlot = (input, options) => {
 };
 
 //#endregion
-export { $fetch, Compute, Handler, LOCALE_CONTEXT, MountedEvent, NavigateEvent, Page, ROUTER_CONTEXT, RUNTIME_CONTEXT, Radix, Scope, StopEvent, activeCompute, components, createApp, createCompute, createElement, createEvent, createLocale, createMemo, createRouter, createRuntime, createState, defineComponent, defineContext, defineRoute, fileName, fromValue, getAssets, getCookies, getCustomElement, getGlobalStyles, getMimeType, getRequestUrl, getRoutes, getSetCookies, getVariables, isClient, isServer, isTemplate, markdownToSlot, preventDefault, registerComponent, renderToNode, renderToString, sendBadRequest, sendHtml, sendJson, sendRedirect, sendText, sendUnauthorized, setCookie, stopImmediatePropagation, stopPropagation, targets, toCustomElement, toFragment, toPath, toString, useEvent, useLocale, useRouter };
+export { $fetch, Compute, Handler, LOCALE_CONTEXT, MountedEvent, NavigateEvent, Page, ROUTER_CONTEXT, RUNTIME_CONTEXT, Radix, Scope, StopEvent, activeCompute, components, createApp, createCompute, createElement, createEvent, createLocale, createMemo, createRouter, createRuntime, createState, defineComponent, defineContext, defineRoute, fileName, fromValue, getAssets, getCookies, getCustomElement, getMimeType, getRequestUrl, getRoutes, getSetCookies, getVariables, isClient, isServer, isTemplate, markdownToSlot, preventDefault, registerComponent, renderToNode, renderToString, sendBadRequest, sendHtml, sendJson, sendRedirect, sendText, sendUnauthorized, setCookie, stopImmediatePropagation, stopPropagation, targets, toCustomElement, toFragment, toPath, toString, useEvent, useLocale, useRouter, useRuntime };

package/dist/jsx/index.js

@@ -1,11 +1,57 @@
 
+//#region ../../node_modules/defu/dist/defu.mjs
+function isPlainObject(value) {
+	if (value === null || typeof value !== "object") return false;
+	const prototype = Object.getPrototypeOf(value);
+	if (prototype !== null && prototype !== Object.prototype && Object.getPrototypeOf(prototype) !== null) return false;
+	if (Symbol.iterator in value) return false;
+	if (Symbol.toStringTag in value) return Object.prototype.toString.call(value) === "[object Module]";
+	return true;
+}
+function _defu(baseObject, defaults, namespace$1 = ".", merger) {
+	if (!isPlainObject(defaults)) return _defu(baseObject, {}, namespace$1, merger);
+	const object = Object.assign({}, defaults);
+	for (const key in baseObject) {
+		if (key === "__proto__" || key === "constructor") continue;
+		const value = baseObject[key];
+		if (value === null || value === void 0) continue;
+		if (merger && merger(object, key, value, namespace$1)) continue;
+		if (Array.isArray(value) && Array.isArray(object[key])) object[key] = [...value, ...object[key]];
+		else if (isPlainObject(value) && isPlainObject(object[key])) object[key] = _defu(value, object[key], (namespace$1 ? `${namespace$1}.` : "") + key.toString(), merger);
+		else object[key] = value;
+	}
+	return object;
+}
+function createDefu(merger) {
+	return (...arguments_) => arguments_.reduce((p, c) => _defu(p, c, "", merger), {});
+}
+const defu = createDefu();
+const defuFn = createDefu((object, key, currentValue) => {
+	if (object[key] !== void 0 && typeof currentValue === "function") {
+		object[key] = currentValue(object[key]);
+		return true;
+	}
+});
+const defuArrayFn = createDefu((object, key, currentValue) => {
+	if (Array.isArray(object[key]) && typeof currentValue === "function") {
+		object[key] = currentValue(object[key]);
+		return true;
+	}
+});
+
+//#endregion
 //#region src/html/index.ts
 const createElement = (input, attributes, ...children) => {
-	return {
+	const template = {
 		tag: typeof input === "function" ? input.$name : input,
 		attributes: attributes ?? {},
 		children
 	};
+	if (typeof input === "function") {
+		const classes = template.attributes["class"];
+		template.attributes["class"] = (classes ? [classes, ...input.$styles] : input.$styles).join(" ");
+	}
+	return template;
 };
 
 //#endregion

package/dist/router/index.d.ts

@@ -8,6 +8,7 @@ export type RouterOptions<T extends Routes = Routes> = {
 export type RouterContext<T extends RouterOptions = RouterOptions> = {
     options: T;
     navigator: EventTarget;
+    url: State<URL | undefined>;
     radix: Radix<() => Promise<ComponentConstructor<Events, Attributes>>>;
     route: State<Slot | undefined>;
     inputs: State<Record<string, string> | undefined>;
@@ -19,6 +20,7 @@ export declare const ROUTER_CONTEXT: Descriptor<RouterContext<RouterOptions<Rout
 export declare const createRouter: <T extends RouterOptions>(options: T) => {
     ROUTER_CONTEXT: Descriptor<RouterContext<T>>;
     registerRouterContext: (scope: Scope) => Promise<{
+        url: State<URL | undefined>;
         route: State<unknown>;
         inputs: State<Record<string, string> | undefined>;
         navigator: EventTarget;
@@ -27,6 +29,7 @@ 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<unknown>;
     inputs: State<Record<string, string> | undefined>;
     navigator: EventTarget;

package/dist/runtime/index.d.ts

@@ -1,6 +1,6 @@
 import { type Context, type Event, type Handle, type Middleware } from "../http";
 import { Radix } from "../radix";
-import { Scope } from "../signals";
+import { type Descriptor, Scope } from "../signals";
 export type Route<T> = {
     fetch: Handle<T>;
 };
@@ -9,12 +9,14 @@ export type Runtime<T> = {
     middlewares: Array<Middleware<T>>;
     fetch: (request: Request, context: Context<T>) => Promise<Response>;
 };
+export type RuntimeContext<T = Record<string, unknown>> = {
+    event?: Event<T>;
+};
+export declare const useRuntime: <T extends RuntimeContext>(scope: Scope, context?: Descriptor<T>) => RuntimeContext<Record<string, unknown>>;
 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>(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<{
-    event?: Event;
-}>;
+export declare const RUNTIME_CONTEXT: Descriptor<RuntimeContext<Record<string, unknown>>>;

package/package.json

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