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

package/dist/zeus.global.js

@@ -1,11 +1,11 @@
 /**
-* zeus v0.0.2
+* zeus v0.1.0-beta.1
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
 var Zeus = (function(exports) {
 	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-	//#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.
@@ -20,7 +20,7 @@ var Zeus = (function(exports) {
 		return (val) => val in map;
 	}
 	//#endregion
-	//#region packages/shared/src/general.ts
+	//#region packages/core/shared/src/general.ts
 	const EMPTY_OBJ = Object.freeze({});
 	Object.freeze([]);
 	const NOOP = () => {};
@@ -59,12 +59,12 @@ var Zeus = (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) {
@@ -204,7 +204,7 @@ var Zeus = (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 {
@@ -529,7 +529,7 @@ var Zeus = (function(exports) {
 		return activeSub instanceof ReactiveEffect ? activeSub : void 0;
 	}
 	//#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
@@ -720,7 +720,7 @@ var Zeus = (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
@@ -905,7 +905,7 @@ var Zeus = (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) {
@@ -959,7 +959,7 @@ var Zeus = (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) {
@@ -1063,7 +1063,7 @@ var Zeus = (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) {
@@ -1222,7 +1222,7 @@ var Zeus = (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();
@@ -1391,7 +1391,7 @@ var Zeus = (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);
@@ -1407,7 +1407,7 @@ var Zeus = (function(exports) {
 		return proto === Object.prototype || proto === null;
 	}
 	//#endregion
-	//#region packages/signal/src/computed.ts
+	//#region packages/core/signal/src/computed.ts
 	/**
 	* @private exported by @vue/reactivity for Vue core use, but not exported from
 	* the main vue package
@@ -1470,12 +1470,12 @@ var Zeus = (function(exports) {
 		return cRef;
 	}
 	//#endregion
-	//#region packages/signal/src/scheduler.ts
+	//#region packages/core/signal/src/scheduler.ts
 	function nextTick() {
 		return Promise.resolve();
 	}
 	//#endregion
-	//#region packages/signal/src/watch.ts
+	//#region packages/core/signal/src/watch.ts
 	const INITIAL_WATCHER_VALUE = {};
 	const cleanupMap = /* @__PURE__ */ new WeakMap();
 	let activeWatcher = void 0;
@@ -1631,7 +1631,7 @@ var Zeus = (function(exports) {
 		return value;
 	}
 	//#endregion
-	//#region packages/signal/src/lifecycle.ts
+	//#region packages/core/signal/src/lifecycle.ts
 	function onCleanup(fn) {
 		if (getCurrentEffect()) {
 			onEffectCleanup(fn, true);
@@ -1644,7 +1644,7 @@ var Zeus = (function(exports) {
 		warn("onCleanup() was called without active effect or scope.");
 	}
 	//#endregion
-	//#region packages/runtime-dom/src/hostContext.ts
+	//#region packages/core/runtime-dom/src/hostContext.ts
 	let currentHostContext;
 	function getCurrentHostContext() {
 		return currentHostContext;
@@ -1659,8 +1659,8 @@ var Zeus = (function(exports) {
 		}
 	}
 	//#endregion
-	//#region packages/runtime-dom/src/range.ts
-	function insertTracked(parent, value, marker) {
+	//#region packages/core/runtime-dom/src/range.ts
+	function insertTracked(parent, value, marker = null) {
 		if (value === void 0 || value == null || value === false || value === true) return [];
 		if (Array.isArray(value)) {
 			const nodes = [];
@@ -1672,7 +1672,7 @@ var Zeus = (function(exports) {
 		return [node];
 	}
 	//#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.");
@@ -1681,7 +1681,7 @@ var Zeus = (function(exports) {
 		insertTracked(parent, value, marker);
 	}
 	//#endregion
-	//#region packages/runtime-dom/src/context.ts
+	//#region packages/core/runtime-dom/src/context.ts
 	let currentOwner;
 	function createOwner(parent = currentOwner) {
 		return {
@@ -1807,14 +1807,14 @@ var Zeus = (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();
@@ -1841,12 +1841,153 @@ var Zeus = (function(exports) {
 		return typeof value === "function" ? value() : value !== null && value !== void 0 ? value : null;
 	}
 	//#endregion
-	//#region packages/runtime-dom/src/component.ts
+	//#region packages/core/runtime-dom/src/bindings.ts
+	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(attrName);
+			return;
+		}
+		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;
+	}
+	function bindAttr(el, name, value) {
+		effect(() => {
+			setAttr(el, name, value());
+		});
+	}
+	function bindProp(el, name, value) {
+		effect(() => {
+			el[name] = value();
+		});
+	}
+	function bindClass(el, value) {
+		effect(() => {
+			const next = normalizeClass(value());
+			if (next) el.setAttribute("class", next);
+			else el.removeAttribute("class");
+		});
+	}
+	function normalizeClass(value) {
+		if (!value) return "";
+		if (typeof value === "string") return value;
+		if (Array.isArray(value)) return value.map(normalizeClass).filter(Boolean).join(" ");
+		if (typeof value === "object") return Object.keys(value).filter((key) => value[key]).join(" ");
+		return "";
+	}
+	function bindStyle(el, value) {
+		let prev;
+		effect(() => {
+			const next = value();
+			if (next == null) {
+				el.removeAttribute("style");
+				prev = void 0;
+				return;
+			}
+			if (typeof next === "string") {
+				el.setAttribute("style", next);
+				prev = void 0;
+				return;
+			}
+			patchStyle(el, prev, next);
+			prev = next;
+		});
+	}
+	function patchStyle(el, prev, next) {
+		const style = el.style;
+		if (prev) {
+			for (const key in prev) if (!(key in next)) style.setProperty(toKebabCase$1(key), "");
+		}
+		for (const key in next) {
+			const value = next[key];
+			const name = toKebabCase$1(key);
+			if (value == null) style.setProperty(name, "");
+			else style.setProperty(name, normalizeStyleValue(key, value));
+		}
+	}
+	function normalizeStyleValue(key, value) {
+		if (typeof value === "number" && value !== 0 && !isUnitlessNumber(key)) return `${value}px`;
+		return String(value);
+	}
+	const unitlessNumbers = new Set([
+		"opacity",
+		"zIndex",
+		"fontWeight",
+		"lineHeight",
+		"flex",
+		"flexGrow",
+		"flexShrink",
+		"order"
+	]);
+	function isUnitlessNumber(key) {
+		return unitlessNumbers.has(key);
+	}
+	function toKebabCase$1(value) {
+		return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+	}
+	//#endregion
+	//#region packages/core/runtime-dom/src/refs.ts
+	function setRef(target, value) {
+		if (target == null) return;
+		if (typeof target === "function") {
+			target(value);
+			return;
+		}
+		if ("value" in target) {
+			target.value = value;
+			return;
+		}
+		if ("current" in target) {
+			target.current = value;
+			return;
+		}
+		console.warn("[Zeus runtime] Invalid ref target:", target);
+	}
+	function bindRef(el, target) {
+		setRef(target, el);
+		if (getCurrentScope()) onScopeDispose(() => {
+			setRef(target, null);
+		}, true);
+	}
+	//#endregion
+	//#region packages/core/runtime-dom/src/component.ts
 	function createComponent(component, props) {
 		return runWithOwner(createOwner(), () => component(props));
 	}
 	//#endregion
-	//#region packages/runtime-dom/src/controlFlow.ts
+	//#region packages/core/runtime-dom/src/controlFlow.ts
 	function Show(props) {
 		return resolveValue$1(props.when ? props.children : props.fallback);
 	}
@@ -1920,7 +2061,43 @@ var Zeus = (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 : {});
@@ -1931,12 +2108,13 @@ var Zeus = (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;
@@ -1972,22 +2150,17 @@ var Zeus = (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;
@@ -2002,12 +2175,12 @@ var Zeus = (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 {
@@ -2039,26 +2212,35 @@ var Zeus = (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) {
@@ -2103,7 +2285,7 @@ var Zeus = (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);
@@ -2135,18 +2317,98 @@ var Zeus = (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(props.children);
 	}
 	function Slot(props) {
 		return createSlot(props.name, () => resolveValue(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(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
-	//#region packages/zeus/src/jsx-runtime.ts
+	//#region packages/core/zeus/src/jsx-runtime.ts
 	const Fragment = Symbol.for("zeus.fragment");
 	function jsx(type, props) {
 		return createJSXNode(type, props);
@@ -2158,6 +2420,7 @@ var Zeus = (function(exports) {
 		return createJSXNode(type, props);
 	}
 	function createJSXNode(type, props) {
+		if (type === Fragment) return props === null || props === void 0 ? void 0 : props.children;
 		if (typeof type === "function") return createComponent(type, props !== null && props !== void 0 ? props : {});
 		if (typeof type !== "string") return null;
 		const el = document.createElement(type);
@@ -2168,6 +2431,11 @@ var Zeus = (function(exports) {
 				const value = props[key];
 				if (key.startsWith("on") && typeof value === "function") el.addEventListener(key.slice(2).toLowerCase(), value);
 				else if (key === "ref") setFallbackRef(value, el);
+				else if (key.startsWith("prop:")) {
+					const propName = key.slice(5);
+					if (typeof value === "function") bindProp(el, propName, value);
+					else el[propName] = value;
+				} else if (typeof value === "function") bindAttr(el, key, value);
 				else if (value != null && value !== false) el.setAttribute(key === "className" ? "class" : key, String(value));
 			}
 			if (children !== void 0) insert(el, children);