@zeus-js/runtime-dom 0.0.2 → 0.1.0-beta.1

package/dist/runtime-dom.global.js

@@ -1,11 +1,11 @@
 /**
-* runtime-dom v0.0.2
+* runtime-dom v0.1.0-beta.1
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
 var ZeusRuntimeDOM = (function(exports) {
 	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-	//#region packages/runtime-dom/src/template.ts
+	//#region packages/core/runtime-dom/src/template.ts
 	function template(html, _isImportNode = false, _isSVG = false, _isMathML = false) {
 		const t = document.createElement("template");
 		t.innerHTML = html;
@@ -14,7 +14,7 @@ var ZeusRuntimeDOM = (function(exports) {
 		};
 	}
 	//#endregion
-	//#region packages/shared/src/makeMap.ts
+	//#region packages/core/shared/src/makeMap.ts
 	/**
 	* Make a map and return a function for checking if a key
 	* is in that map.
@@ -58,12 +58,12 @@ var ZeusRuntimeDOM = (function(exports) {
 	});
 	const hasChanged = (value, oldValue) => !Object.is(value, oldValue);
 	//#endregion
-	//#region packages/signal/src/warning.ts
+	//#region packages/core/signal/src/warning.ts
 	function warn(msg, ...args) {
 		console.warn(`[Zeus warn] ${msg}`, ...args);
 	}
 	//#endregion
-	//#region packages/signal/src/effectScope.ts
+	//#region packages/core/signal/src/effectScope.ts
 	let activeEffectScope;
 	var EffectScope = class {
 		constructor(detached = false) {
@@ -203,7 +203,7 @@ var ZeusRuntimeDOM = (function(exports) {
 		else if (!failSilently) warn("onScopeDispose() is called when there is no active effect scope to be associated with.");
 	}
 	//#endregion
-	//#region packages/signal/src/effect.ts
+	//#region packages/core/signal/src/effect.ts
 	let activeSub;
 	const pausedQueueEffects = /* @__PURE__ */ new WeakSet();
 	var ReactiveEffect = class {
@@ -489,7 +489,7 @@ var ZeusRuntimeDOM = (function(exports) {
 		}
 	}
 	//#endregion
-	//#region packages/signal/src/dep.ts
+	//#region packages/core/signal/src/dep.ts
 	/**
 	* Incremented every time a reactive change happens
 	* This is used to give computed a fast path to avoid re-compute when nothing
@@ -680,7 +680,7 @@ var ZeusRuntimeDOM = (function(exports) {
 		endBatch();
 	}
 	//#endregion
-	//#region packages/signal/src/arrayInstrumentations.ts
+	//#region packages/core/signal/src/arrayInstrumentations.ts
 	/**
 	* Track array iteration and return:
 	* - if input is reactive: a cloned raw array with reactive values
@@ -865,7 +865,7 @@ var ZeusRuntimeDOM = (function(exports) {
 		return res;
 	}
 	//#endregion
-	//#region packages/signal/src/ref.ts
+	//#region packages/core/signal/src/ref.ts
 	let _ReactiveFlags$IS_REF, _ReactiveFlags$IS_SHA;
 	/*@__NO_SIDE_EFFECTS__*/
 	function isRef(r) {
@@ -919,7 +919,7 @@ var ZeusRuntimeDOM = (function(exports) {
 		}
 	};
 	//#endregion
-	//#region packages/signal/src/baseHandlers.ts
+	//#region packages/core/signal/src/baseHandlers.ts
 	const isNonTrackableKeys = /*@__PURE__*/ makeMap(`__proto__,__v_isRef,__isVue`);
 	const builtInSymbols = new Set(/*@__PURE__*/ Object.getOwnPropertyNames(Symbol).filter((key) => key !== "arguments" && key !== "caller").map((key) => Symbol[key]).filter(isSymbol));
 	function hasOwnProperty(key) {
@@ -1023,7 +1023,7 @@ var ZeusRuntimeDOM = (function(exports) {
 	const mutableHandlers = /*@__PURE__*/ new MutableReactiveHandler();
 	const readonlyHandlers = /*@__PURE__*/ new ReadonlyReactiveHandler();
 	//#endregion
-	//#region packages/signal/src/collectionHandlers.ts
+	//#region packages/core/signal/src/collectionHandlers.ts
 	const toShallow = (value) => value;
 	const getProto = (v) => Reflect.getPrototypeOf(v);
 	function createIterableMethod(method, isReadonly, isShallow) {
@@ -1182,7 +1182,7 @@ var ZeusRuntimeDOM = (function(exports) {
 		}
 	}
 	//#endregion
-	//#region packages/signal/src/reactive.ts
+	//#region packages/core/signal/src/reactive.ts
 	const reactiveMap = /* @__PURE__ */ new WeakMap();
 	const shallowReactiveMap = /* @__PURE__ */ new WeakMap();
 	const readonlyMap = /* @__PURE__ */ new WeakMap();
@@ -1351,7 +1351,7 @@ var ZeusRuntimeDOM = (function(exports) {
 	*/
 	const toReadonly = (value) => isObject(value) ? /* @__PURE__ */ readonly(value) : value;
 	//#endregion
-	//#region packages/signal/src/state.ts
+	//#region packages/core/signal/src/state.ts
 	function state(value) {
 		if (arguments.length === 0) return /* @__PURE__ */ ref();
 		return isProxyable(value) ? /* @__PURE__ */ reactive(value) : /* @__PURE__ */ ref(value);
@@ -1367,7 +1367,7 @@ var ZeusRuntimeDOM = (function(exports) {
 		return proto === Object.prototype || proto === null;
 	}
 	//#endregion
-	//#region packages/runtime-dom/src/hostContext.ts
+	//#region packages/core/runtime-dom/src/hostContext.ts
 	let currentHostContext;
 	function getCurrentHostContext() {
 		return currentHostContext;
@@ -1391,7 +1391,7 @@ var ZeusRuntimeDOM = (function(exports) {
 		});
 	}
 	//#endregion
-	//#region packages/runtime-dom/src/range.ts
+	//#region packages/core/runtime-dom/src/range.ts
 	var DynamicRange = class {
 		constructor(parent, marker) {
 			this.parent = parent;
@@ -1413,7 +1413,7 @@ var ZeusRuntimeDOM = (function(exports) {
 			return this.nodes;
 		}
 	};
-	function insertTracked(parent, value, marker) {
+	function insertTracked(parent, value, marker = null) {
 		if (value === void 0 || value == null || value === false || value === true) return [];
 		if (Array.isArray(value)) {
 			const nodes = [];
@@ -1430,11 +1430,11 @@ var ZeusRuntimeDOM = (function(exports) {
 			(_node$parentNode2 = node.parentNode) === null || _node$parentNode2 === void 0 || _node$parentNode2.removeChild(node);
 		}
 	}
-	function moveRangeBefore(nodes, parent, marker) {
+	function moveRangeBefore(nodes, parent, marker = null) {
 		for (const node of nodes) parent.insertBefore(node, marker);
 	}
 	//#endregion
-	//#region packages/runtime-dom/src/insert.ts
+	//#region packages/core/runtime-dom/src/insert.ts
 	function insert(parent, value, marker = null) {
 		if (value === void 0) {
 			console.warn("[Zeus runtime] insert received `undefined`, which is ignored. Use `null` or a fallback value explicitly if you want to suppress this warning.");
@@ -1456,7 +1456,7 @@ var ZeusRuntimeDOM = (function(exports) {
 		}, true);
 	}
 	//#endregion
-	//#region packages/runtime-dom/src/context.ts
+	//#region packages/core/runtime-dom/src/context.ts
 	let currentOwner;
 	function getCurrentOwner() {
 		return currentOwner;
@@ -1595,14 +1595,14 @@ var ZeusRuntimeDOM = (function(exports) {
 		return typeof value === "function" ? value() : value !== null && value !== void 0 ? value : null;
 	}
 	//#endregion
-	//#region packages/runtime-dom/src/devtools.ts
+	//#region packages/core/runtime-dom/src/devtools.ts
 	function emitDevtoolsEvent(event) {
 		var _window$__ZEUS_DEVTOO;
 		if (typeof window === "undefined") return;
 		(_window$__ZEUS_DEVTOO = window.__ZEUS_DEVTOOLS_HOOK__) === null || _window$__ZEUS_DEVTOO === void 0 || _window$__ZEUS_DEVTOO.emit(event);
 	}
 	//#endregion
-	//#region packages/runtime-dom/src/render.ts
+	//#region packages/core/runtime-dom/src/render.ts
 	function render(value, container, options = {}) {
 		var _options$owner;
 		const renderScope = effectScope();
@@ -1629,7 +1629,7 @@ var ZeusRuntimeDOM = (function(exports) {
 		return typeof value === "function" ? value() : value !== null && value !== void 0 ? value : null;
 	}
 	//#endregion
-	//#region packages/runtime-dom/src/dom.ts
+	//#region packages/core/runtime-dom/src/dom.ts
 	function marker(parent, index) {
 		let seen = 0;
 		for (const node of parent.childNodes) {
@@ -1653,7 +1653,7 @@ var ZeusRuntimeDOM = (function(exports) {
 		}
 	}
 	//#endregion
-	//#region packages/runtime-dom/src/bindings.ts
+	//#region packages/core/runtime-dom/src/bindings.ts
 	function bindText(node, value) {
 		effect(() => {
 			node.data = stringifyText(value());
@@ -1674,17 +1674,43 @@ var ZeusRuntimeDOM = (function(exports) {
 		return String(value);
 	}
 	function setAttr(el, name, value) {
+		const attrName = normalizeAttrName(name);
+		const propName = getBooleanDomPropertyName(name);
+		if (propName && el instanceof HTMLElement) {
+			el[propName] = Boolean(value);
+			if (value == null || value === false) el.removeAttribute(attrName);
+			else if (value === true) el.setAttribute(attrName, "");
+			else el.setAttribute(attrName, String(value));
+			return;
+		}
 		if (value == null || value === false) {
-			el.removeAttribute(normalizeAttrName(name));
+			el.removeAttribute(attrName);
 			return;
 		}
-		const attrName = normalizeAttrName(name);
 		if (value === true) {
 			el.setAttribute(attrName, "");
 			return;
 		}
 		el.setAttribute(attrName, String(value));
 	}
+	function getBooleanDomPropertyName(name) {
+		return BOOLEAN_DOM_PROPERTY_NAME[name];
+	}
+	const BOOLEAN_DOM_PROPERTY_NAME = {
+		hidden: "hidden",
+		disabled: "disabled",
+		readonly: "readOnly",
+		readOnly: "readOnly",
+		multiple: "multiple",
+		selected: "selected",
+		checked: "checked",
+		open: "open",
+		autofocus: "autofocus",
+		autoFocus: "autofocus",
+		indeterminate: "indeterminate",
+		noValidate: "noValidate",
+		novalidate: "noValidate"
+	};
 	function normalizeAttrName(name) {
 		return name === "className" ? "class" : name;
 	}
@@ -1763,7 +1789,7 @@ var ZeusRuntimeDOM = (function(exports) {
 		return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
 	}
 	//#endregion
-	//#region packages/runtime-dom/src/events.ts
+	//#region packages/core/runtime-dom/src/events.ts
 	const delegatedEvents = /* @__PURE__ */ new Set();
 	const delegatedListeners = [];
 	const nonBubblingEventMap = {
@@ -1838,7 +1864,7 @@ var ZeusRuntimeDOM = (function(exports) {
 		}
 	}
 	//#endregion
-	//#region packages/runtime-dom/src/refs.ts
+	//#region packages/core/runtime-dom/src/refs.ts
 	function setRef(target, value) {
 		if (target == null) return;
 		if (typeof target === "function") {
@@ -1862,12 +1888,12 @@ var ZeusRuntimeDOM = (function(exports) {
 		}, true);
 	}
 	//#endregion
-	//#region packages/runtime-dom/src/component.ts
+	//#region packages/core/runtime-dom/src/component.ts
 	function createComponent(component, props) {
 		return runWithOwner(createOwner(), () => component(props));
 	}
 	//#endregion
-	//#region packages/runtime-dom/src/list.ts
+	//#region packages/core/runtime-dom/src/list.ts
 	function mountFor$1(parent, marker, each, key, render) {
 		if (!key) {
 			mountIndexFor(parent, marker, each, render);
@@ -1925,7 +1951,7 @@ var ZeusRuntimeDOM = (function(exports) {
 			}
 			emitDevtoolsEvent({
 				type: "mount-for",
-				length: records.length
+				length: nextRecords.length
 			});
 			records = nextRecords;
 		});
@@ -1936,7 +1962,7 @@ var ZeusRuntimeDOM = (function(exports) {
 		}, true);
 	}
 	//#endregion
-	//#region packages/runtime-dom/src/controlFlow.ts
+	//#region packages/core/runtime-dom/src/controlFlow.ts
 	function Show(props) {
 		return resolveValue(props.when ? props.children : props.fallback);
 	}
@@ -2016,7 +2042,43 @@ var ZeusRuntimeDOM = (function(exports) {
 		return e;
 	}
 	//#endregion
-	//#region packages/runtime-dom/src/defineElement.ts
+	//#region packages/core/runtime-dom/src/defineElement.ts
+	function createPropStore(defs) {
+		const slots = /* @__PURE__ */ new Map();
+		const props = {};
+		for (const def of defs) {
+			const slot = state();
+			slots.set(def.key, slot);
+			Object.defineProperty(props, def.key, {
+				configurable: false,
+				enumerable: true,
+				get() {
+					return slot.value;
+				},
+				set(value) {
+					slot.value = value;
+				}
+			});
+		}
+		return {
+			props,
+			get(key) {
+				var _slots$get;
+				return (_slots$get = slots.get(key)) === null || _slots$get === void 0 ? void 0 : _slots$get.value;
+			},
+			set(key, value) {
+				const slot = slots.get(key);
+				if (!slot) {
+					console.warn(`[Zeus custom-element] Unknown prop "${key}" was written.`);
+					return;
+				}
+				slot.value = value;
+			},
+			has(key) {
+				return slots.has(key);
+			}
+		};
+	}
 	function defineElement(tagName, options, setup) {
 		var _options$props;
 		const propDefs = normalizePropDefinitions((_options$props = options.props) !== null && _options$props !== void 0 ? _options$props : {});
@@ -2027,12 +2089,13 @@ var ZeusRuntimeDOM = (function(exports) {
 			}
 			constructor() {
 				super();
-				this.props = state({});
 				this.lightChildren = [];
 				this.capturedLightChildren = false;
 				this.reflecting = false;
-				applyPropDefaults(this.props, propDefs);
-				definePropAccessors(this, this.props, propDefs);
+				this.propStore = createPropStore(propDefs);
+				this.props = this.propStore.props;
+				applyPropDefaults(this.propStore, propDefs);
+				definePropAccessors(this, this.propStore, propDefs);
 			}
 			connectedCallback() {
 				var _options$shadow, _options$consumes;
@@ -2068,22 +2131,17 @@ var ZeusRuntimeDOM = (function(exports) {
 				};
 				this.dispose = render(() => runWithOwner(owner, () => withHostContext(hostContext, () => setup(this.props, setupContext))), target, { owner });
 				mountStyles(target, options.styles);
-				onScopeDispose(() => {
-					var _this$dispose;
-					(_this$dispose = this.dispose) === null || _this$dispose === void 0 || _this$dispose.call(this);
-					this.dispose = void 0;
-				}, true);
 			}
 			disconnectedCallback() {
-				var _this$dispose2;
-				(_this$dispose2 = this.dispose) === null || _this$dispose2 === void 0 || _this$dispose2.call(this);
+				var _this$dispose;
+				(_this$dispose = this.dispose) === null || _this$dispose === void 0 || _this$dispose.call(this);
 				this.dispose = void 0;
 			}
 			attributeChangedCallback(name, oldValue, newValue) {
 				if (oldValue === newValue || this.reflecting) return;
 				const def = propDefs.find((item) => item.attr === name);
 				if (!def) return;
-				this.props[def.key] = castAttributeValue(newValue, def);
+				this.propStore.set(def.key, castAttributeValue(newValue, def));
 			}
 			resolveRenderTarget(shadow) {
 				if (this.target) return this.target;
@@ -2098,12 +2156,12 @@ var ZeusRuntimeDOM = (function(exports) {
 				for (const def of defs) {
 					if (def.attr === false) continue;
 					const value = this.getAttribute(def.attr);
-					if (value !== null || def.type === Boolean) this.props[def.key] = castAttributeValue(value, def);
+					if (value !== null || def.type === Boolean) this.propStore.set(def.key, castAttributeValue(value, def));
 				}
 			}
 			_writePropFromProperty(key, value) {
 				const def = propDefs.find((item) => item.key === key);
-				this.props[key] = value;
+				this.propStore.set(key, value);
 				if ((def === null || def === void 0 ? void 0 : def.reflect) && def.attr !== false) {
 					this.reflecting = true;
 					try {
@@ -2135,26 +2193,35 @@ var ZeusRuntimeDOM = (function(exports) {
 			};
 		});
 	}
-	function applyPropDefaults(props, defs) {
+	function applyPropDefaults(store, defs) {
 		for (const def of defs) {
 			if (!("default" in def)) continue;
 			const value = typeof def.default === "function" ? def.default() : def.default;
-			props[def.key] = value;
+			store.set(def.key, value);
 		}
 	}
-	function definePropAccessors(element, props, defs) {
+	function definePropAccessors(element, store, defs) {
 		for (const def of defs) {
-			if (def.key in element) continue;
-			Object.defineProperty(element, def.key, {
+			const key = def.key;
+			const hadOwnValue = Object.prototype.hasOwnProperty.call(element, key);
+			const ownValue = hadOwnValue ? element[key] : void 0;
+			if (hadOwnValue) delete element[key];
+			const existing = Object.getOwnPropertyDescriptor(element, key);
+			if (existing && existing.configurable === false) {
+				console.warn(`[Zeus custom-element] Cannot define prop "${key}" because an own non-configurable property already exists.`);
+				continue;
+			}
+			Object.defineProperty(element, key, {
 				configurable: true,
 				enumerable: true,
 				get() {
-					return props[def.key];
+					return store.get(key);
 				},
 				set(value) {
-					element._writePropFromProperty(def.key, value);
+					element._writePropFromProperty(key, value);
 				}
 			});
+			if (hadOwnValue) element._writePropFromProperty(key, ownValue);
 		}
 	}
 	function castAttributeValue(value, def) {
@@ -2199,7 +2266,7 @@ var ZeusRuntimeDOM = (function(exports) {
 		return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
 	}
 	//#endregion
-	//#region packages/runtime-dom/src/slot.ts
+	//#region packages/core/runtime-dom/src/slot.ts
 	function createSlot(name, fallback) {
 		const context = getCurrentHostContext();
 		if (!context) return createNativeSlot(name, fallback);
@@ -2231,16 +2298,96 @@ var ZeusRuntimeDOM = (function(exports) {
 		return Boolean((_node$textContent = node.textContent) === null || _node$textContent === void 0 ? void 0 : _node$textContent.trim());
 	}
 	//#endregion
-	//#region packages/runtime-dom/src/webComponents.ts
+	//#region packages/core/runtime-dom/src/webComponents.ts
+	const HOST_RESERVED_KEYS = new Set([
+		"children",
+		"ref",
+		"class",
+		"className",
+		"style",
+		"_elements"
+	]);
 	function Host(props) {
+		const context = getCurrentHostContext();
+		if (context) bindHostProps(context.host, props);
 		return resolveValue$1(props.children);
 	}
 	function Slot(props) {
 		return createSlot(props.name, () => resolveValue$1(props.children));
 	}
+	function bindHostProps(host, props) {
+		bindHostRef(host, props);
+		bindHostClass(host, props);
+		bindHostStyle(host, props);
+		bindHostAttributes(host, props);
+		if ("_elements" in props) bindHostElementBindings(host, props);
+	}
+	function bindHostRef(host, props) {
+		if (!("ref" in props)) return;
+		bindRef(host, props.ref);
+	}
+	function bindHostClass(host, props) {
+		if (!("class" in props) && !("className" in props)) return;
+		const value = props.className !== void 0 ? props.className : props.class;
+		bindClass(host, () => {
+			return resolveHostValue(value);
+		});
+	}
+	function bindHostStyle(host, props) {
+		if (!("style" in props)) return;
+		bindStyle(host, () => {
+			return resolveHostValue(props.style);
+		});
+	}
+	function bindHostAttributes(host, props) {
+		for (const key of Object.keys(props)) {
+			if (HOST_RESERVED_KEYS.has(key)) continue;
+			if (isEventLikeProp(key)) continue;
+			const value = props[key];
+			bindAttr(host, normalizeHostAttrName(key), () => {
+				return resolveHostValue(value);
+			});
+		}
+	}
+	function bindHostElementBindings(host, props) {
+		const elements = props._elements;
+		for (const _key of Object.keys(elements)) {
+			const getEl = elements[_key];
+			const el = getEl();
+			if (!el) continue;
+			for (const attrKey of Object.keys(props)) {
+				if (HOST_RESERVED_KEYS.has(attrKey)) continue;
+				if (isEventLikeProp(attrKey)) continue;
+				const value = props[attrKey];
+				bindAttr(el, normalizeHostAttrName(attrKey), () => {
+					return resolveHostValue(value);
+				});
+			}
+		}
+	}
+	function resolveHostValue(value) {
+		if (typeof value === "function") return value();
+		return value;
+	}
 	function resolveValue$1(value) {
 		return typeof value === "function" ? value() : value;
 	}
+	function isEventLikeProp(key) {
+		/**
+		* Host Phase 1 does not bind event listeners.
+		* Keep event handling inside component template + emit().
+		*/
+		return /^on[A-Z]/.test(key) || key.startsWith("on:");
+	}
+	function normalizeHostAttrName(name) {
+		switch (name) {
+			case "className": return "class";
+			case "htmlFor": return "for";
+			case "tabIndex": return "tabindex";
+			case "readOnly": return "readonly";
+			default: return name;
+		}
+	}
 	//#endregion
 	exports.For = For;
 	exports.Host = Host;
@@ -2268,6 +2415,7 @@ var ZeusRuntimeDOM = (function(exports) {
 	exports.getCurrentOwner = getCurrentOwner;
 	exports.inject = inject;
 	exports.insert = insert;
+	exports.insertTracked = insertTracked;
 	exports.marker = marker;
 	exports.mountDynamic = mountDynamic;
 	exports.mountFor = mountFor;