revojs 0.0.35 → 0.0.36

package/dist/html/index.d.ts

@@ -5,6 +5,7 @@ export type TypeOf<T> = {
 };
 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 Template = {
     tag: string;
@@ -63,6 +64,7 @@ export interface ComponentConstructor<TEvents extends Events, TAttributes extend
     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 internals: ElementInternals;
     readonly component: Component<TEvents, TAttributes>;
 }
 export interface CustomElementConstructor<TEvents extends Events, TAttributes extends Attributes> {
@@ -71,18 +73,23 @@ export interface CustomElementConstructor<TEvents extends Events, TAttributes ex
 export declare class MountedEvent extends Event {
     constructor();
 }
-export declare const isTemplate: (value: object) => value is Template;
+export declare const isTemplate: (value?: any) => 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 isTextNode: (hydration?: Hydration) => hydration is Text;
+export declare const isCommentNode: (hydration?: Hydration) => hydration is Comment;
+export declare const isElementNode: (hydration?: Hydration, tagName?: string) => hydration is Element;
+export declare const toArray: (hydration: Hydration) => Array<Node>;
+export declare const toRange: (hydration: Hydration) => Range;
+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 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 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;
+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 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;
+export declare function useEvent<T extends keyof HTMLElementEventMap>(scope: Scope, target: HTMLElement | undefined | null, event: T, input: EventListener<HTMLElementEventMap[T]>, options?: AddEventListenerOptions): void;
 export declare const getCustomElement: (node: Node | null) => CustomElement<Events, Attributes> | undefined;
 export declare const isClient: () => boolean;
 export declare const isServer: () => boolean;
@@ -90,6 +97,7 @@ export declare const preventDefault: (event: Event) => void;
 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[];
 declare global {
     interface HTMLElementEventMap {
         mounted: MountedEvent;

package/dist/index.js

@@ -219,19 +219,14 @@ var MountedEvent = class extends Event {
 	}
 };
 const isTemplate = (value) => {
-	return "tag" in value && "attributes" in value && "children" in value;
+	return typeof value === "object" && "tag" in value && "attributes" in value && "children" in value;
 };
 const createElement = (input, attributes, ...children) => {
-	const template = {
+	return {
 		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) {
@@ -245,116 +240,136 @@ const toString = (slot) => {
 		default: return "";
 	}
 };
-const toFragment = (nodes) => {
-	const fragment = document.createDocumentFragment();
-	fragment.replaceChildren(...nodes);
-	return fragment;
-};
-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(scope, await slot());
-		if (typeof slot === "object") {
-			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(scope, slot.children);
-				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 = await renderToString(element.scope, {
-							tag: "template",
-							attributes: { shadowRootMode: element.shadowRoot.mode },
-							children: [template]
-						});
-						return `<${prefix}>` + shadow + children + `</${slot.tag}>`;
-					}
-					return `<${prefix}>` + template + children + `</${slot.tag}>`;
-				}
-				return `<${prefix}>` + children + `</${slot.tag}>`;
+const isTextNode = (hydration) => {
+	if (Array.isArray(hydration)) return false;
+	return hydration?.nodeType === Node.TEXT_NODE;
+};
+const isCommentNode = (hydration) => {
+	if (Array.isArray(hydration)) return false;
+	return hydration?.nodeType === Node.COMMENT_NODE;
+};
+const isElementNode = (hydration, tagName) => {
+	if (Array.isArray(hydration)) return false;
+	return hydration?.nodeType === Node.ELEMENT_NODE && hydration.nodeName.toUpperCase() === tagName?.toUpperCase();
+};
+const toArray = (hydration) => {
+	if (Array.isArray(hydration)) return hydration.reduce((items, child) => items.concat(toArray(child)), new Array());
+	else return [hydration];
+};
+const toRange = (hydration) => {
+	const items = toArray(hydration);
+	const range = document.createRange();
+	const firstNode = items.at(0);
+	if (firstNode) range.setStartBefore(firstNode);
+	const lastNode = items.at(-1);
+	if (lastNode) range.setEndAfter(lastNode);
+	return range;
+};
+const toFragment = (hydration) => {
+	return toArray(hydration).reduce((fragment, node) => {
+		fragment.appendChild(node);
+		return fragment;
+	}, document.createDocumentFragment());
+};
+const hydrate = async (scope, parentNode, slot, index, previous) => {
+	let hydration = parentNode.childNodes.item(index);
+	if (Array.isArray(slot)) {
+		const items = new Array();
+		for (const [index$1, childSlot] of slot.entries()) items.push(await hydrate(scope, parentNode, childSlot, index$1));
+		if (items.length) hydration = items;
+		else if (isCommentNode(hydration) === false) hydration = document.createComment("");
+	}
+	if (typeof slot === "function") {
+		let previous$1;
+		await createCompute(scope, async (scope$1) => {
+			let input = slot;
+			while (typeof input === "function") input = await input();
+			hydration = await hydrate(scope$1, parentNode, input, index, previous$1);
+			if (previous$1 && hydration !== previous$1) if (Array.isArray(hydration)) if (Array.isArray(previous$1)) {
+				const range = toRange(previous$1);
+				range.deleteContents();
+				for (const childNode of toArray(hydration)) range.insertNode(childNode);
+			} else parentNode.replaceChild(toFragment(hydration), previous$1);
+			else if (Array.isArray(previous$1)) {
+				const range = toRange(previous$1);
+				range.deleteContents();
+				range.insertNode(hydration);
+			} else parentNode.replaceChild(hydration, previous$1);
+			previous$1 = hydration;
+		});
+	}
+	if (slot === null || slot === void 0) {
+		if (isCommentNode(hydration) === false) hydration = document.createComment("");
+	}
+	if (typeof slot === "number" || typeof slot === "bigint" || typeof slot === "boolean" || typeof slot === "string" || typeof slot === "symbol") {
+		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 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) => {
+			const target = hydration;
+			if (name.startsWith("on")) {
+				const event = name.substring(2).toLowerCase();
+				useEvent(scope$1, target, event, value);
+			} else {
+				const set = toString(value);
+				if (set === "" || set === "false") return target.removeAttribute(name);
+				return target.setAttribute(name, set);
 			}
-			return JSON.stringify(slot);
-		}
+		});
+		for (const [index$1, childSlot] of slot.children.entries()) await hydrate(scope, hydration, childSlot, index$1);
 	}
-	return "<!---->";
+	hydration ??= document.createComment("");
+	if (parentNode.childNodes.item(index) === null) parentNode.appendChild(toFragment(hydration));
+	return hydration;
 };
-const renderToNode = async (scope, slot) => {
-	if (slot) {
-		if (typeof slot === "number" || typeof slot === "bigint" || typeof slot === "boolean" || typeof slot === "string" || typeof slot === "symbol") return document.createTextNode(slot.toString());
-		if (typeof slot === "function") {
-			let node;
-			await createCompute(scope, async (scope$1) => {
-				let next;
-				let input = slot;
-				let parentNode = Array.isArray(node) ? node.at(0)?.parentNode : node?.parentNode;
-				while (typeof input === "function") input = await input();
-				if (Array.isArray(input)) if (input.length) next = await Promise.all(input.map((child) => renderToNode(scope$1, child)));
-				else next = document.createComment("");
-				else next = await renderToNode(scope$1, input);
-				if (Array.isArray(next)) if (Array.isArray(node)) {
-					if (parentNode) {
-						const range = document.createRange();
-						const firstNode = node.at(0);
-						if (firstNode) range.setStartBefore(firstNode);
-						const lastNode = node.at(-1);
-						if (lastNode) range.setEndAfter(lastNode);
-						range.deleteContents();
-						for (const child of next) parentNode?.appendChild(child);
-					}
-				} else node?.parentNode?.replaceChild(toFragment(next), node);
-				else if (Array.isArray(node)) {
-					if (parentNode) {
-						const range = document.createRange();
-						const firstNode = node.at(0);
-						if (firstNode) range.setStartBefore(firstNode);
-						const lastNode = node.at(-1);
-						if (lastNode) range.setEndAfter(lastNode);
-						range.deleteContents();
-						parentNode?.appendChild(next);
-					}
-				} else node?.parentNode?.replaceChild(next, node);
-				node = next;
-			});
-			if (Array.isArray(node)) return toFragment(node);
-			return node ?? document.createComment("");
-		}
-		if (typeof slot === "object") {
-			if (Array.isArray(slot)) {
-				if (slot.length) {
-					const children = await Promise.all(slot.map((child) => renderToNode(scope, child)));
-					return toFragment(children);
-				}
-				return document.createDocumentFragment();
-			}
-			if (isTemplate(slot)) {
-				const element = document.createElementNS(namespace(slot.tag), slot.tag);
-				for (const name in slot.attributes) {
-					const value = slot.attributes[name];
-					if (name.startsWith("on")) {
-						const event = name.substring(2).toLowerCase();
-						useEvent(scope, element, event, value);
-					} else createCompute(scope, () => {
-						const set = toString(value);
-						if (set === "" || set === "false") return element.removeAttribute(name);
-						return element.setAttribute(name, set);
-					});
-				}
-				element.replaceChildren(await renderToNode(scope, slot.children));
-				return element;
-			}
-			return document.createTextNode(JSON.stringify(slot));
+const renderToString = async (scope, slot) => {
+	if (typeof slot === "number" || typeof slot === "bigint" || typeof slot === "boolean" || typeof slot === "string" || typeof slot === "symbol") return slot.toString();
+	if (typeof slot === "function") {
+		let input = slot;
+		while (typeof input === "function") input = await input();
+		return await renderToString(scope, input);
+	}
+	if (Array.isArray(slot)) {
+		let items = "";
+		for (const childSlot of slot) items += await renderToString(scope, childSlot);
+		if (items === "") return "<!---->";
+		return items;
+	}
+	if (isTemplate(slot)) {
+		const CustomElement = components.get(slot.tag);
+		const prefix = Object.entries(slot.attributes).reduce((chunks, [name, value]) => {
+			if (value && !name.startsWith("on")) chunks.push(`${name}='${toString(value)}'`);
+			return chunks;
+		}, [slot.tag]).join(" ");
+		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 = {
+					tag: "template",
+					attributes: { shadowRootMode: element.shadowRoot.mode },
+					children: [template]
+				};
+				content += await renderToString(element.scope, shadow);
+			} else content += template;
 		}
+		for (const childSlot of slot.children) content += await renderToString(scope, childSlot);
+		content += `</${slot.tag}>`;
+		return content;
 	}
-	return document.createComment("");
+	return "<!---->";
 };
 const defineComponent = (options) => {
-	return registerComponent(class {
+	class Instance {
 		static $name = options.name;
 		static $events = options.events ?? {};
 		static $attributes = options.attributes ?? {};
@@ -388,29 +403,26 @@ const defineComponent = (options) => {
 			if (parentNode) this.scope.parentScope = parentNode.component.scope;
 			return options.setup(this);
 		};
-	});
+	}
+	components.set(options.name, Instance);
+	return Instance;
 };
 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);
 		}
 		async connectedCallback() {
 			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);
-				}
+				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) => {
 				if (value instanceof Event) return;
@@ -418,8 +430,8 @@ const toCustomElement = (component) => {
 					...event,
 					detail: value
 				}));
-			}, this.component.events);
-			rootNode.replaceChildren(await renderToNode(this.component.scope, await this.component.setup()));
+			});
+			await hydrate(this.component.scope, rootNode, await this.component.setup(), 0);
 			this.dispatchEvent(new MountedEvent());
 		}
 		attributeChangedCallback(name, oldValue, value) {
@@ -453,7 +465,6 @@ const toCustomElement = (component) => {
 	};
 };
 const registerComponent = (component) => {
-	if (isServer()) components.set(component.$name, component);
 	if (isClient()) {
 		const previous = customElements.get(component.$name);
 		if (previous === void 0) customElements.define(component.$name, toCustomElement(component));
@@ -483,6 +494,12 @@ const preventDefault = (event) => event.preventDefault();
 const stopPropagation = (event) => event.stopPropagation();
 const stopImmediatePropagation = (event) => event.stopImmediatePropagation();
 const components = new Map();
+const globalStyles = Array.from(isClient() ? document.styleSheets : []).map((style) => {
+	const sheet = new CSSStyleSheet();
+	const css = Array.from(style.cssRules).map((rule) => rule.cssText).join(" ");
+	sheet.replaceSync(css);
+	return sheet;
+});
 
 //#endregion
 //#region src/http/index.ts
@@ -757,7 +774,6 @@ const Page = defineComponent({
 	shadowRoot: false,
 	setup: ({ scope }) => {
 		const { route } = scope.getContext(ROUTER_CONTEXT);
-		if (route === void 0) return;
 		return () => route.value;
 	}
 });
@@ -904,4 +920,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, 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 };
+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 };

package/dist/jsx/index.js

@@ -42,17 +42,19 @@ const defuArrayFn = createDefu((object, key, currentValue) => {
 //#endregion
 //#region src/html/index.ts
 const createElement = (input, attributes, ...children) => {
-	const template = {
+	return {
 		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 isClient = () => typeof window !== "undefined";
+const globalStyles = Array.from(isClient() ? document.styleSheets : []).map((style) => {
+	const sheet = new CSSStyleSheet();
+	const css = Array.from(style.cssRules).map((rule) => rule.cssText).join(" ");
+	sheet.replaceSync(css);
+	return sheet;
+});
 
 //#endregion
 //#region src/jsx/index.ts

package/dist/router/index.d.ts

@@ -36,7 +36,7 @@ export declare const useRouter: <T extends RouterContext>(scope: Scope, context?
     navigate: (path: string) => void;
     anchorNavigate: (event: Event) => void;
 };
-export declare const Page: ComponentConstructor<{}, {}>;
+export declare const Page: ComponentConstructor<Events, Attributes>;
 declare global {
     interface ElementEventMap {
         navigate: NavigateEvent;

package/package.json

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