j20 0.0.1 → 0.0.3

package/README.md

@@ -0,0 +1,3 @@
+# j20
+
+[https://github.com/anuoua/j20](https://github.com/anuoua/j20)

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as csstype from "csstype";
-import { Computed, Effect, Signal, computed, effect as effect$1, signal } from "@j20org/signal";
+import { Computed, Effect, Signal, computed, effect as effect$1, signal, untrack } from "@j20org/signal";
 
 //#region src/jsx.d.ts
 
@@ -3466,7 +3466,7 @@ declare const instanceGetElements: (instance: Instance) => Node[];
 declare const instanceDestroy: (parent: Instance, instance: Instance) => void;
 //#endregion
 //#region src/h/createRoot.d.ts
-declare const creatRoot: (boot: () => JSX.Element) => {
+declare const createRoot: (boot: () => JSX.Element) => {
   element: HTMLElement;
   instance: Instance;
 };
@@ -3483,4 +3483,4 @@ declare const template: (template: string) => (isSvg: boolean) => any;
 //#region src/web-components.d.ts
 declare const registerWebComponent: <C extends WC<any, any>>(Comp: C) => void;
 //#endregion
-export { $, $useContext, AttrValueType, Case, CaseProps, Computed, CustomElement, Default, DefaultProps, Dynamic, DynamicProps, DynamicPropsInner, Effect, FC, For, Fragment, If, IfProps, Instance, ListProps, RefObject, Signal, Switch, SwitchProps, WC, computed, creatRoot, createComponent, createContext, createDom, createElement, createLogicComponent, effect, getCurrentInstance, h2, instanceCreate, instanceCreateElement, instanceDestroy, instanceGetElements, instanceInit, jsx, jsxs, ref, registerWebComponent, signal, template, wc };
+export { $, $useContext, AttrValueType, Case, CaseProps, Computed, CustomElement, Default, DefaultProps, Dynamic, DynamicProps, DynamicPropsInner, Effect, FC, For, Fragment, If, IfProps, Instance, ListProps, RefObject, Signal, Switch, SwitchProps, WC, computed, createComponent, createContext, createDom, createElement, createLogicComponent, createRoot, effect, getCurrentInstance, h2, instanceCreate, instanceCreateElement, instanceDestroy, instanceGetElements, instanceInit, jsx, jsxs, ref, registerWebComponent, signal, template, untrack, wc };

package/dist/index.mjs

@@ -229,7 +229,7 @@ const isEvent = (eventName) => {
 	return eventName.startsWith("on");
 };
 const getEventName = (eventName) => {
-	return eventName.slice(2).toLocaleLowerCase();
+	return eventName.slice(2).toLowerCase();
 };
 const getChildren = (propChildren) => {
 	const arr = [];
@@ -257,6 +257,14 @@ const generateId = () => {
 	}
 	return `${overflow}${(count++).toString(32)}`;
 };
+const styleObjectToString = (style) => {
+	let styleString = "";
+	for (const key in style) {
+		const value = style[key];
+		styleString += `${key}: ${value}; `;
+	}
+	return styleString.trim();
+};
 
 //#endregion
 //#region src/h/createDom.ts
@@ -265,7 +273,10 @@ const update = (node, key, oldValue, newValue) => {
 		node.removeEventListener(getEventName(key), oldValue);
 		node.addEventListener(getEventName(key), newValue);
 	} else if (newValue === false || newValue == null) node.removeAttribute(key);
-	else node.setAttribute(key, newValue === true ? "" : newValue);
+	else {
+		const value = key === "style" && typeof newValue === "object" ? styleObjectToString(newValue) : newValue === true ? "" : newValue;
+		node.setAttribute(key, value);
+	}
 };
 const unset = (node, key, oldValue) => {
 	if (isEvent(key)) node.removeEventListener(getEventName(key), oldValue);
@@ -279,7 +290,10 @@ const add = (node, key, newValue) => {
 			newValue.current = null;
 		});
 		newValue.current = node;
-	} else newValue !== false && newValue != null && node.setAttribute(key, newValue === true ? "" : newValue);
+	} else if (newValue !== false && newValue != null) {
+		const value = key === "style" && typeof newValue === "object" ? styleObjectToString(newValue) : newValue === true ? "" : newValue;
+		node.setAttribute(key, value);
+	}
 };
 const createDom = (tag, props, children) => {
 	const node = tag;
@@ -339,10 +353,21 @@ const instanceGetElements = (instance) => {
 const instanceDestroy = (parent, instance) => {
 	const stack$1 = [instance];
 	while (stack$1.length) {
-		const instance$1 = stack$1.pop();
-		instance$1.disposes.forEach((dispose) => dispose());
-		if (instance$1.children) stack$1.push(...instance$1.children);
+		const inst = stack$1.pop();
+		inst.disposes.forEach((dispose) => {
+			try {
+				dispose();
+			} catch (e) {
+				console.error("Error during instance dispose:", e);
+			}
+		});
+		inst.disposes = [];
+		if (inst.children) {
+			stack$1.push(...inst.children);
+			inst.children = [];
+		}
 	}
+	if (parent && parent.children) parent.children = parent.children.filter((c) => c !== instance);
 };
 
 //#endregion
@@ -851,7 +876,7 @@ const createElement = (tag, props, children) => {
 
 //#endregion
 //#region src/h/createRoot.ts
-const creatRoot = (boot) => {
+const createRoot = (boot) => {
 	let [instance, fragment] = instanceCreate(() => boot());
 	return {
 		element: fragment,
@@ -871,13 +896,13 @@ const template = (template$1) => {
 	let dom;
 	return (isSvg) => {
 		if (!dom) {
-			const templateEl = isSvg ? document.createElementNS("http://www.w3.org/2000/svg", "svg") : document.createElement("div");
+			const templateEl = isSvg ? document.createElementNS("http://www.w3.org/2000/svg", "svg") : document.createElement("template");
 			templateEl.innerHTML = template$1;
-			dom = templateEl.firstChild;
-			return dom.cloneNode();
-		} else return dom.cloneNode();
+			dom = isSvg ? templateEl.firstChild : templateEl.content.firstChild;
+		}
+		return dom.cloneNode();
 	};
 };
 
 //#endregion
-export { $, $useContext, Case, Computed, Default, Dynamic, Effect, For, Fragment, If, Signal, Switch, computed, creatRoot, createComponent, createContext, createDom, createElement, createLogicComponent, effect, getCurrentInstance, h2, instanceCreate, instanceCreateElement, instanceDestroy, instanceGetElements, instanceInit, jsx, jsxs, ref, registerWebComponent, signal, template, wc };
+export { $, $useContext, Case, Computed, Default, Dynamic, Effect, For, Fragment, If, Signal, Switch, computed, createComponent, createContext, createDom, createElement, createLogicComponent, createRoot, effect, getCurrentInstance, h2, instanceCreate, instanceCreateElement, instanceDestroy, instanceGetElements, instanceInit, jsx, jsxs, ref, registerWebComponent, signal, template, untrack, wc };

package/dist/jsx-runtime.mjs

@@ -1,4 +1,4 @@
-import { createElement } from ".";
+import { createElement } from "./index";
 
 //#region src/jsx-runtime.ts
 const h2 = (tag, props, children) => {
@@ -11,11 +11,11 @@ const template = (template$1) => {
 	let dom;
 	return (isSvg) => {
 		if (!dom) {
-			const templateEl = isSvg ? document.createElementNS("http://www.w3.org/2000/svg", "svg") : document.createElement("div");
+			const templateEl = isSvg ? document.createElementNS("http://www.w3.org/2000/svg", "svg") : document.createElement("template");
 			templateEl.innerHTML = template$1;
-			dom = templateEl.firstChild;
-			return dom.cloneNode();
-		} else return dom.cloneNode();
+			dom = isSvg ? templateEl.firstChild : templateEl.content.firstChild;
+		}
+		return dom.cloneNode();
 	};
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "j20",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "homepage": "https://www.github.com/anuoua/j20",
   "type": "module",
   "author": "anuoua",