revojs 0.0.36 → 0.0.38

package/dist/html/index.d.ts

@@ -7,6 +7,10 @@ export type Infer<T> = T extends TypeOf<infer U> ? U : unknown;
 export type Slot = unknown | Template | Array<Slot> | (() => Slot);
 export type Hydration = Comment | Text | Element | Array<Hydration>;
 export type EventListener<T extends Event> = ((event: T) => void) | Array<(event: T) => void>;
+export type HostContext = {
+    host?: CustomElement<Events, Attributes>;
+    internals?: ElementInternals;
+};
 export type Template = {
     tag: string;
     attributes: Record<string, unknown>;
@@ -53,7 +57,6 @@ export interface Component<TEvents extends Events, TAttributes extends Attribute
     readonly events: EventOutput<TEvents>;
     readonly attributes: State<AttributeOutput<TAttributes>>;
     readonly shadowRoot: false | ShadowRootOptions;
-    readonly host?: CustomElement<TEvents, TAttributes>;
     setup: () => Slot | Promise<Slot>;
 }
 export interface ComponentConstructor<TEvents extends Events, TAttributes extends Attributes> {
@@ -61,10 +64,9 @@ export interface ComponentConstructor<TEvents extends Events, TAttributes extend
     $events: TEvents;
     $attributes: TAttributes;
     $styles: Array<string>;
-    new (input?: Input<TEvents, TAttributes>, scope?: Scope, host?: CustomElement<TEvents, TAttributes>): Component<TEvents, TAttributes>;
+    new (input?: Input<TEvents, TAttributes>, scope?: Scope): Component<TEvents, TAttributes>;
 }
 export interface CustomElement<TEvents extends Events, TAttributes extends Attributes> extends HTMLElement {
-    readonly internals: ElementInternals;
     readonly component: Component<TEvents, TAttributes>;
 }
 export interface CustomElementConstructor<TEvents extends Events, TAttributes extends Attributes> {
@@ -74,6 +76,7 @@ export declare class MountedEvent extends Event {
     constructor();
 }
 export declare const isTemplate: (value?: any) => value is Template;
+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;
 export declare const isTextNode: (hydration?: Hydration) => hydration is Text;
@@ -85,7 +88,7 @@ export declare const toFragment: (hydration: Hydration) => DocumentFragment;
 export declare const hydrate: (scope: Scope, parentNode: Node, slot: Slot, index: number, previous?: Hydration) => Promise<Hydration>;
 export declare const renderToString: (scope: Scope, slot: Slot) => Promise<string>;
 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 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 function useEvent<T extends keyof ElementEventMap>(scope: Scope, target: EventTarget | undefined | null, event: T, input: EventListener<ElementEventMap[T]>, options?: AddEventListenerOptions): void;
 export declare function useEvent<T extends keyof WindowEventMap>(scope: Scope, target: Window | undefined | null, event: T, input: EventListener<WindowEventMap[T]>, options?: AddEventListenerOptions): void;
@@ -98,6 +101,7 @@ export declare const stopPropagation: (event: Event) => void;
 export declare const stopImmediatePropagation: (event: Event) => void;
 export declare const components: Map<string, ComponentConstructor<Events, Attributes>>;
 export declare const globalStyles: CSSStyleSheet[];
+export declare const HOST_CONTEXT: import("..").Descriptor<HostContext>;
 declare global {
     interface HTMLElementEventMap {
         mounted: MountedEvent;

package/dist/index.js

@@ -221,12 +221,20 @@ var MountedEvent = class extends Event {
 const isTemplate = (value) => {
 	return typeof value === "object" && "tag" in value && "attributes" in value && "children" in value;
 };
+const useHost = (scope) => {
+	return scope.getContext(HOST_CONTEXT);
+};
 const createElement = (input, attributes, ...children) => {
-	return {
+	const template = {
 		tag: typeof input === "function" ? input.$name : 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;
 };
 const toString = (slot) => {
 	switch (typeof slot) {
@@ -305,23 +313,24 @@ const hydrate = async (scope, parentNode, slot, index, previous) => {
 		const textContent = slot.toString();
 		if (isTextNode(hydration)) {
 			if (previous) hydration.textContent = textContent;
-			else if (hydration.textContent !== textContent) parentNode.insertBefore(hydration.splitText(textContent.length), hydration.nextSibling);
+			else if (textContent !== hydration.textContent) hydration = parentNode.replaceChild(document.createTextNode(textContent), hydration);
 		} else hydration = document.createTextNode(textContent);
 	}
 	if (isTemplate(slot)) {
 		const Component = components.get(slot.tag);
 		if (Component) registerComponent(Component);
 		if (isElementNode(hydration, slot.tag) === false) hydration = document.createElementNS(namespace(slot.tag), slot.tag);
-		for (const [name, value] of Object.entries(slot.attributes)) createCompute(scope, (scope$1) => {
+		for (const [name, value] of Object.entries(slot.attributes)) createCompute(scope, (childScope) => {
 			const target = hydration;
 			if (name.startsWith("on")) {
 				const event = name.substring(2).toLowerCase();
-				useEvent(scope$1, target, event, value);
+				useEvent(childScope, 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);
 	}
@@ -378,8 +387,7 @@ const defineComponent = (options) => {
 		events;
 		attributes;
 		shadowRoot;
-		host;
-		constructor(input, scope, host) {
+		constructor(input, scope) {
 			this.scope = new Scope(scope);
 			this.events = Object.keys(options.events ?? {}).reduce((output, name) => {
 				Reflect.set(output, name, input?.[name], output);
@@ -390,53 +398,48 @@ const defineComponent = (options) => {
 				return attributes;
 			}, createState({}));
 			this.shadowRoot = options.shadowRoot ?? { mode: "open" };
-			this.host = host;
 		}
-		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);
 	}
 	components.set(options.name, Instance);
 	return Instance;
 };
-const toCustomElement = (component) => {
+const toCustomElement = (Component) => {
 	return class extends HTMLElement {
 		static formAssociated = true;
-		internals;
-		component;
-		constructor() {
-			super();
-			this.internals = this.attachInternals();
-			this.component = new component(void 0, void 0, this);
-		}
+		component = new Component();
 		async connectedCallback() {
 			let rootNode = this;
+			const findParent = (node) => {
+				if (node) {
+					if ("component" in node) return node;
+					return findParent(node.parentNode);
+				}
+			};
+			const parentNode = findParent(this.parentNode);
+			if (parentNode) this.component.scope.parentScope = parentNode.component.scope;
 			if (this.component.shadowRoot) {
 				const options = defu(this.component.shadowRoot, { mode: "open" });
 				rootNode = this.shadowRoot ?? this.attachShadow(options);
 				if (this.component.shadowRoot.globalStyles) rootNode.adoptedStyleSheets = globalStyles;
 			}
-			for (const [name, event] of Object.entries(component.$events)) Reflect.set(this.component.events, 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(), {
 					...event,
 					detail: value
 				}));
 			});
+			this.component.scope.setContext(HOST_CONTEXT, {
+				host: this,
+				internals: this.attachInternals()
+			});
 			await hydrate(this.component.scope, rootNode, await this.component.setup(), 0);
 			this.dispatchEvent(new MountedEvent());
 		}
 		attributeChangedCallback(name, oldValue, value) {
 			if (value === oldValue) return;
-			const attribute = component.$attributes?.[name];
+			const attribute = Component.$attributes?.[name];
 			if (attribute) {
 				let convertedValue;
 				if (value) switch (attribute.type) {
@@ -460,7 +463,7 @@ const toCustomElement = (component) => {
 			this.component.scope.stop();
 		}
 		static get observedAttributes() {
-			return Object.keys(component.$attributes ?? {});
+			return Object.keys(Component.$attributes ?? {});
 		}
 	};
 };
@@ -500,6 +503,7 @@ const globalStyles = Array.from(isClient() ? document.styleSheets : []).map((sty
 	sheet.replaceSync(css);
 	return sheet;
 });
+const HOST_CONTEXT = defineContext("HOST_CONTEXT");
 
 //#endregion
 //#region src/http/index.ts
@@ -920,4 +924,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, getMimeType, getRequestUrl, getRoutes, getSetCookies, getVariables, globalStyles, hydrate, isClient, isCommentNode, isElementNode, isServer, isTemplate, isTextNode, markdownToSlot, preventDefault, registerComponent, renderToString, sendBadRequest, sendHtml, sendJson, sendRedirect, sendText, sendUnauthorized, setCookie, stopImmediatePropagation, stopPropagation, targets, toArray, toCustomElement, toFragment, toPath, toRange, toString, useEvent, useLocale, useRouter, useRuntime };
+export { $fetch, Compute, HOST_CONTEXT, 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, globalStyles, hydrate, isClient, isCommentNode, isElementNode, isServer, isTemplate, isTextNode, markdownToSlot, preventDefault, registerComponent, renderToString, sendBadRequest, sendHtml, sendJson, sendRedirect, sendText, sendUnauthorized, setCookie, stopImmediatePropagation, stopPropagation, targets, toArray, toCustomElement, toFragment, toPath, toRange, toString, useEvent, useHost, useLocale, useRouter, useRuntime };

package/dist/jsx/index.js

@@ -39,14 +39,25 @@ const defuArrayFn = createDefu((object, key, currentValue) => {
 	}
 });
 
+//#endregion
+//#region src/signals/index.ts
+function defineContext(key) {
+	return key;
+}
+
 //#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" && input.$styles.length) {
+		const classes = template.attributes["class"];
+		template.attributes["class"] = (classes ? [classes, ...input.$styles] : input.$styles).join(" ");
+	}
+	return template;
 };
 const isClient = () => typeof window !== "undefined";
 const globalStyles = Array.from(isClient() ? document.styleSheets : []).map((style) => {
@@ -55,6 +66,7 @@ const globalStyles = Array.from(isClient() ? document.styleSheets : []).map((sty
 	sheet.replaceSync(css);
 	return sheet;
 });
+const HOST_CONTEXT = defineContext("HOST_CONTEXT");
 
 //#endregion
 //#region src/jsx/index.ts

package/package.json

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