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

package/dist/runtime-dom.cjs.js

@@ -1,5 +1,5 @@
 /**
-* runtime-dom v0.0.2
+* runtime-dom v0.1.0-beta.0
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
@@ -8,7 +8,7 @@ Object.defineProperties(exports, {
 	[Symbol.toStringTag]: { value: "Module" }
 });
 let _zeus_js_signal = require("@zeus-js/signal");
-//#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;
@@ -17,7 +17,7 @@ function template(html, _isImportNode = false, _isSVG = false, _isMathML = false
 	};
 }
 //#endregion
-//#region packages/runtime-dom/src/hostContext.ts
+//#region packages/core/runtime-dom/src/hostContext.ts
 let currentHostContext;
 function getCurrentHostContext() {
 	return currentHostContext;
@@ -41,7 +41,7 @@ function withCapturedHostContext(fn) {
 	});
 }
 //#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;
@@ -63,7 +63,7 @@ var DynamicRange = class {
 		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 = [];
@@ -80,11 +80,11 @@ function removeNodes$1(nodes) {
 		(_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.");
@@ -106,7 +106,7 @@ function mountDynamic(parent, marker, value) {
 	}, true);
 }
 //#endregion
-//#region packages/runtime-dom/src/context.ts
+//#region packages/core/runtime-dom/src/context.ts
 let currentOwner;
 function getCurrentOwner() {
 	return currentOwner;
@@ -245,14 +245,14 @@ function resolveValue$3(value) {
 	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 = (0, _zeus_js_signal.scope)();
@@ -279,7 +279,7 @@ function resolveValue$2(value) {
 	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) {
@@ -303,7 +303,7 @@ function removeNodes(nodes) {
 	}
 }
 //#endregion
-//#region packages/runtime-dom/src/bindings.ts
+//#region packages/core/runtime-dom/src/bindings.ts
 function bindText(node, value) {
 	(0, _zeus_js_signal.effect)(() => {
 		node.data = stringifyText(value());
@@ -413,7 +413,7 @@ function toKebabCase$1(value) {
 	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 = {
@@ -488,7 +488,7 @@ function callDelegatedHandler(el, handler, event) {
 	}
 }
 //#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") {
@@ -512,12 +512,12 @@ function bindRef(el, target) {
 	}, 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);
@@ -575,7 +575,7 @@ function mountKeyedFor(parent, marker, each, key, render) {
 		}
 		emitDevtoolsEvent({
 			type: "mount-for",
-			length: records.length
+			length: nextRecords.length
 		});
 		records = nextRecords;
 	});
@@ -586,7 +586,7 @@ function mountKeyedFor(parent, marker, each, key, render) {
 	}, 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);
 }
@@ -605,7 +605,7 @@ function mountFor(parent, marker, each, key, render) {
 	mountFor$1(parent, marker, each, key, render);
 }
 //#endregion
-//#region packages/runtime-dom/src/defineElement.ts
+//#region packages/core/runtime-dom/src/defineElement.ts
 function defineElement(tagName, options, setup) {
 	var _options$props;
 	const propDefs = normalizePropDefinitions((_options$props = options.props) !== null && _options$props !== void 0 ? _options$props : {});
@@ -659,15 +659,10 @@ function defineElement(tagName, options, setup) {
 			};
 			this.dispose = render(() => runWithOwner(owner, () => withHostContext(hostContext, () => setup(this.props, setupContext))), target, { owner });
 			mountStyles(target, options.styles);
-			(0, _zeus_js_signal.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) {
@@ -790,7 +785,7 @@ function toKebabCase(value) {
 	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);
@@ -822,16 +817,85 @@ function isMeaningfulTextNode(node) {
 	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"
+]);
 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);
+}
+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;
+	/**
+	* className has higher priority than class when both exist.
+	*/
+	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 resolveHostValue(value) {
+	/**
+	* JSX component props may be direct values or lazy getters.
+	* Function values are treated as getters except event-like props,
+	* which are filtered before this function is called.
+	*/
+	return typeof value === "function" ? value() : 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;
@@ -859,6 +923,7 @@ exports.getCurrentHostContext = getCurrentHostContext;
 exports.getCurrentOwner = getCurrentOwner;
 exports.inject = inject;
 exports.insert = insert;
+exports.insertTracked = insertTracked;
 exports.marker = marker;
 exports.mountDynamic = mountDynamic;
 exports.mountFor = mountFor;

package/dist/runtime-dom.cjs.prod.js

@@ -1,5 +1,5 @@
 /**
-* runtime-dom v0.0.2
+* runtime-dom v0.1.0-beta.0
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
@@ -8,7 +8,7 @@ Object.defineProperties(exports, {
 	[Symbol.toStringTag]: { value: "Module" }
 });
 let _zeus_js_signal = require("@zeus-js/signal");
-//#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;
@@ -17,7 +17,7 @@ function template(html, _isImportNode = false, _isSVG = false, _isMathML = false
 	};
 }
 //#endregion
-//#region packages/runtime-dom/src/hostContext.ts
+//#region packages/core/runtime-dom/src/hostContext.ts
 let currentHostContext;
 function getCurrentHostContext() {
 	return currentHostContext;
@@ -41,7 +41,7 @@ function withCapturedHostContext(fn) {
 	});
 }
 //#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;
@@ -63,7 +63,7 @@ var DynamicRange = class {
 		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 = [];
@@ -80,11 +80,11 @@ function removeNodes$1(nodes) {
 		(_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) return;
 	insertTracked(parent, value, marker);
@@ -103,7 +103,7 @@ function mountDynamic(parent, marker, value) {
 	}, true);
 }
 //#endregion
-//#region packages/runtime-dom/src/context.ts
+//#region packages/core/runtime-dom/src/context.ts
 let currentOwner;
 function getCurrentOwner() {
 	return currentOwner;
@@ -239,14 +239,14 @@ function resolveValue$3(value) {
 	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 = (0, _zeus_js_signal.scope)();
@@ -273,7 +273,7 @@ function resolveValue$2(value) {
 	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) {
@@ -297,7 +297,7 @@ function removeNodes(nodes) {
 	}
 }
 //#endregion
-//#region packages/runtime-dom/src/bindings.ts
+//#region packages/core/runtime-dom/src/bindings.ts
 function bindText(node, value) {
 	(0, _zeus_js_signal.effect)(() => {
 		node.data = stringifyText(value());
@@ -407,7 +407,7 @@ function toKebabCase$1(value) {
 	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 = {
@@ -482,7 +482,7 @@ function callDelegatedHandler(el, handler, event) {
 	}
 }
 //#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") {
@@ -505,12 +505,12 @@ function bindRef(el, target) {
 	}, 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);
@@ -568,7 +568,7 @@ function mountKeyedFor(parent, marker, each, key, render) {
 		}
 		emitDevtoolsEvent({
 			type: "mount-for",
-			length: records.length
+			length: nextRecords.length
 		});
 		records = nextRecords;
 	});
@@ -579,7 +579,7 @@ function mountKeyedFor(parent, marker, each, key, render) {
 	}, 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);
 }
@@ -598,7 +598,7 @@ function mountFor(parent, marker, each, key, render) {
 	mountFor$1(parent, marker, each, key, render);
 }
 //#endregion
-//#region packages/runtime-dom/src/defineElement.ts
+//#region packages/core/runtime-dom/src/defineElement.ts
 function defineElement(tagName, options, setup) {
 	var _options$props;
 	const propDefs = normalizePropDefinitions((_options$props = options.props) !== null && _options$props !== void 0 ? _options$props : {});
@@ -652,15 +652,10 @@ function defineElement(tagName, options, setup) {
 			};
 			this.dispose = render(() => runWithOwner(owner, () => withHostContext(hostContext, () => setup(this.props, setupContext))), target, { owner });
 			mountStyles(target, options.styles);
-			(0, _zeus_js_signal.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) {
@@ -782,7 +777,7 @@ function toKebabCase(value) {
 	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);
@@ -814,16 +809,85 @@ function isMeaningfulTextNode(node) {
 	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"
+]);
 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);
+}
+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;
+	/**
+	* className has higher priority than class when both exist.
+	*/
+	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 resolveHostValue(value) {
+	/**
+	* JSX component props may be direct values or lazy getters.
+	* Function values are treated as getters except event-like props,
+	* which are filtered before this function is called.
+	*/
+	return typeof value === "function" ? value() : 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;
@@ -851,6 +915,7 @@ exports.getCurrentHostContext = getCurrentHostContext;
 exports.getCurrentOwner = getCurrentOwner;
 exports.inject = inject;
 exports.insert = insert;
+exports.insertTracked = insertTracked;
 exports.marker = marker;
 exports.mountDynamic = mountDynamic;
 exports.mountFor = mountFor;