revojs 0.0.38 → 0.0.40

package/dist/html/index.d.ts

@@ -39,7 +39,7 @@ export type AttributeOptions<T = unknown> = {
     type: T;
     default?: Infer<T>;
 };
-export type ShadowRootOptions = Partial<ShadowRootInit> & {
+export type ShadowRootOptions = ShadowRootInit & {
     globalStyles?: boolean;
 };
 export type Events = Record<string, EventOptions>;
@@ -48,7 +48,7 @@ export interface ComponentOptions<TEvents extends Events, TAttributes extends At
     name: string;
     events?: TEvents;
     attributes?: TAttributes;
-    shadowRoot?: false | ShadowRootOptions;
+    shadowRoot?: Partial<ShadowRootOptions>;
     styles?: Array<string>;
     setup: (component: Component<TEvents, TAttributes>) => Slot | Promise<Slot>;
 }
@@ -56,7 +56,7 @@ export interface Component<TEvents extends Events, TAttributes extends Attribute
     readonly scope: Scope;
     readonly events: EventOutput<TEvents>;
     readonly attributes: State<AttributeOutput<TAttributes>>;
-    readonly shadowRoot: false | ShadowRootOptions;
+    readonly shadowRoot?: ShadowRootOptions;
     setup: () => Slot | Promise<Slot>;
 }
 export interface ComponentConstructor<TEvents extends Events, TAttributes extends Attributes> {
@@ -79,9 +79,6 @@ 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;
-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;

package/dist/index.js

@@ -248,18 +248,6 @@ const toString = (slot) => {
 		default: return "";
 	}
 };
-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];
@@ -283,43 +271,36 @@ 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));
+		for (const [index$1, childSlot] of slot.entries()) items.push(await hydrate(scope, parentNode, childSlot, index$1, previous));
 		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("");
+		else if (previous || !(hydration instanceof Comment)) hydration = document.createComment("");
 	}
+	if (typeof slot === "function") 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);
+		if (previous && hydration !== previous) if (Array.isArray(hydration)) if (Array.isArray(previous)) {
+			const range = toRange(previous);
+			range.deleteContents();
+			for (const childNode of toArray(hydration)) range.insertNode(childNode);
+		} else parentNode.replaceChild(toFragment(hydration), previous);
+		else if (Array.isArray(previous)) {
+			const range = toRange(previous);
+			range.deleteContents();
+			range.insertNode(hydration);
+		} else parentNode.replaceChild(hydration, previous);
+		previous = hydration;
+	});
+	if ((slot === null || slot === void 0) && (previous || !(hydration instanceof Comment))) 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 (textContent !== hydration.textContent) hydration = parentNode.replaceChild(document.createTextNode(textContent), hydration);
-		} else hydration = document.createTextNode(textContent);
+		if (previous || !(hydration instanceof Text)) hydration = document.createTextNode(textContent);
+		else if (textContent !== hydration.textContent) hydration = parentNode.replaceChild(document.createTextNode(textContent), hydration);
 	}
 	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);
+		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) => {
 			const target = hydration;
 			if (name.startsWith("on")) {
@@ -332,7 +313,7 @@ const hydrate = async (scope, parentNode, slot, index, previous) => {
 			}
 			scope.onStop(() => childScope.stop());
 		});
-		for (const [index$1, childSlot] of slot.children.entries()) await hydrate(scope, hydration, childSlot, index$1);
+		for (const [index$1, childSlot] of slot.children.entries()) await hydrate(scope, hydration, childSlot, index$1, previous);
 	}
 	hydration ??= document.createComment("");
 	if (parentNode.childNodes.item(index) === null) parentNode.appendChild(toFragment(hydration));
@@ -397,7 +378,7 @@ const defineComponent = (options) => {
 				Reflect.set(attributes.value, name, fromValue(input?.[name]) ?? attribute.default, attributes.value);
 				return attributes;
 			}, createState({}));
-			this.shadowRoot = options.shadowRoot ?? { mode: "open" };
+			if (options.shadowRoot) this.shadowRoot = defu(options.shadowRoot, { mode: "open" });
 		}
 		setup = () => options.setup(this);
 	}
@@ -408,6 +389,7 @@ const toCustomElement = (Component) => {
 	return class extends HTMLElement {
 		static formAssociated = true;
 		component = new Component();
+		internals = this.attachInternals();
 		async connectedCallback() {
 			let rootNode = this;
 			const findParent = (node) => {
@@ -419,8 +401,7 @@ const toCustomElement = (Component) => {
 			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);
+				rootNode = this.shadowRoot ?? this.attachShadow(this.component.shadowRoot);
 				if (this.component.shadowRoot.globalStyles) rootNode.adoptedStyleSheets = globalStyles;
 			}
 			for (const [name, event] of Object.entries(Component.$events)) Reflect.set(this.component.events, name, (value) => {
@@ -432,7 +413,7 @@ const toCustomElement = (Component) => {
 			});
 			this.component.scope.setContext(HOST_CONTEXT, {
 				host: this,
-				internals: this.attachInternals()
+				internals: this.internals
 			});
 			await hydrate(this.component.scope, rootNode, await this.component.setup(), 0);
 			this.dispatchEvent(new MountedEvent());
@@ -775,7 +756,6 @@ const useRouter = (scope, context) => {
 };
 const Page = defineComponent({
 	name: "x-page",
-	shadowRoot: false,
 	setup: ({ scope }) => {
 		const { route } = scope.getContext(ROUTER_CONTEXT);
 		return () => route.value;
@@ -924,4 +904,4 @@ const markdownToSlot = (input, options) => {
 };
 
 //#endregion
-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 };
+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, isServer, isTemplate, 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/package.json

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