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

package/dist/runtime-dom.d.ts

@@ -12,10 +12,8 @@ export type RefTarget<T> = ((value: T | null) => void) | {
     current: T | null;
 };
 
-import type { TemplateFactory } from './types';
 export declare function template<T extends Node = Node>(html: string, _isImportNode?: boolean, _isSVG?: boolean, _isMathML?: boolean): TemplateFactory<T>;
 
-import type { JSXValue } from './types';
 export type ContextId = symbol;
 export interface Context<T = unknown> {
     readonly id: ContextId;
@@ -100,38 +98,20 @@ export declare function resolveDOMContext<T>(host: HTMLElement, context: Context
  */
 export declare function requestDOMContext<T>(host: HTMLElement, context: Context<T>): T | undefined;
 
-import { createOwner } from './context';
-import type { JSXValue } from './types';
 export interface RenderOptions {
     owner?: ReturnType<typeof createOwner>;
 }
 export declare function render(value: JSXValue | (() => JSXValue), container: Element | DocumentFragment, options?: RenderOptions): () => void;
 
-import type { JSXValue } from './types';
-declare class DynamicRange {
-    private readonly parent;
-    private readonly marker;
-    private nodes;
-    constructor(parent: Node, marker: Node | null);
-    replace(value: JSXValue): void;
-    clear(): void;
-    current(): readonly Node[];
-}
-declare function insertTracked(parent: Node, value: JSXValue, marker: Node | null): Node[];
-export declare function removeNodes(nodes: readonly Node[]): void;
-declare function moveRangeBefore(nodes: readonly Node[], parent: Node, marker: Node | null): void;
-declare function firstNode(nodes: readonly Node[]): Node | null;
-declare function lastNode(nodes: readonly Node[]): Node | null;
+export declare function insertTracked(parent: Node, value: JSXValue, marker?: Node | null): Node[];
 
-import { insertTracked } from './range';
-import type { JSXValue } from './types';export declare function insert(parent: Node, value: JSXValue, marker?: Node | null): void;
+export declare function insert(parent: Node, value: JSXValue, marker?: Node | null): void;
 export declare function mountDynamic(parent: Node, marker: Node, value: () => JSXValue): void;
 
 export declare function marker(parent: ParentNode, index: number): Comment;
 export declare function child(parent: ParentNode, index: number): ChildNode;
-declare function removeNodes$1(nodes: readonly Node[]): void;
+export declare function removeNodes(nodes: readonly Node[]): void;
 
-import type { AttrValue, ClassValue, JSXValue, StyleValue } from './types';
 export declare function bindText(node: Text, value: () => JSXValue): void;
 export declare function bindTextContent(el: Node, value: () => JSXValue): void;
 export declare function setAttr(el: Element, name: string, value: AttrValue): void;
@@ -143,16 +123,12 @@ export declare function bindStyle(el: HTMLElement | SVGElement, value: () => Sty
 
 export declare function bindEvent(el: Element, name: string, handler: EventListener): void;
 export declare function delegateEvents(events: readonly string[]): void;
-declare function resetDelegatedEvents(): void;
 
-import type { RefTarget } from './types';
 export declare function setRef<T>(target: RefTarget<T> | null | undefined, value: T | null): void;
 export declare function bindRef<T extends Element>(el: T, target: RefTarget<T> | null | undefined): void;
 
-import type { JSXValue } from './types';
 export declare function createComponent<P extends Record<string, unknown>, R extends JSXValue>(component: (props: P) => R, props: P): R;
 
-import type { JSXValue } from './types';
 export type ShowProps = {
     when: unknown;
     fallback?: JSXValue | (() => JSXValue);
@@ -169,8 +145,6 @@ export type ForProps<T, K = unknown> = {
 export declare function For<T, K = unknown>(props: ForProps<T, K>): JSXValue;
 export declare function mountFor<T, K = unknown>(parent: Node, marker: Node, each: () => readonly T[] | null | undefined, key: ((item: T, index: number) => K) | undefined, render: (item: T, index: number) => JSXValue): void;
 
-import type { Context } from './context';
-import type { JSXValue } from './types';
 export type ElementPropConstructor = StringConstructor | NumberConstructor | BooleanConstructor | ObjectConstructor | ArrayConstructor;
 export type PropDefinition<T = unknown> = ElementPropConstructor | {
     type?: ElementPropConstructor;
@@ -178,25 +152,70 @@ export type PropDefinition<T = unknown> = ElementPropConstructor | {
     reflect?: boolean;
     default?: T | (() => T);
 };
-export type PropOptions<P extends Record<string, unknown>> = Partial<{
+export type PropOptions<P extends object> = Partial<{
     [K in keyof P]: PropDefinition<P[K]>;
 }>;
-export interface DefineElementOptions<P extends Record<string, unknown>> {
+export interface DefineElementMeta {
+    description?: string;
+    props?: Record<string, {
+        description?: string;
+        category?: string;
+        docs?: string;
+    }>;
+    events?: Record<string, {
+        description?: string;
+        detail?: Record<string, string>;
+    }>;
+    slots?: Record<string, {
+        description?: string;
+    }>;
+    cssVars?: string[];
+    cssParts?: string[];
+    [key: string]: unknown;
+}
+export interface DefineElementOptions<P extends object> {
     shadow?: boolean | ShadowRootInit;
     props?: PropOptions<P>;
     styles?: string | string[];
     consumes?: Context<any>[];
+    /**
+     * Metadata only.
+     * Runtime does not consume this field.
+     */
+    meta?: DefineElementMeta;
 }
 export interface DefineElementContext<E extends HTMLElement = HTMLElement> {
     host: E;
     emit: (name: string, detail?: unknown, options?: CustomEventInit) => boolean;
 }
-export type DefineElementSetup<P extends Record<string, unknown>, E extends HTMLElement = HTMLElement> = (props: Readonly<P>, context: DefineElementContext<E>) => JSXValue;
-export declare function defineElement<P extends Record<string, unknown> = Record<string, unknown>, E extends HTMLElement = HTMLElement>(tagName: string, options: DefineElementOptions<P>, setup: DefineElementSetup<P, E>): CustomElementConstructor;
+export type DefineElementSetup<P extends object, E extends HTMLElement = HTMLElement> = (props: Readonly<P>, context: DefineElementContext<E>) => JSXValue;
+export declare function defineElement<P extends object = object, E extends HTMLElement = HTMLElement>(tagName: string, options: DefineElementOptions<P>, setup: DefineElementSetup<P, E>): CustomElementConstructor;
 
-import type { JSXValue } from './types';
-export interface HostProps {
+type HostValue<T> = T | (() => T);
+export interface HostProps extends Record<string, unknown> {
     children?: JSXValue | (() => JSXValue);
+    /**
+     * Ref to current custom element host.
+     */
+    ref?: RefTarget<HTMLElement>;
+    /**
+     * class and className both map to host class attribute.
+     */
+    class?: HostValue<ClassValue>;
+    className?: HostValue<ClassValue>;
+    /**
+     * Inline style for host element.
+     */
+    style?: HostValue<StyleValue>;
+    /**
+     * Common host attributes.
+     */
+    id?: HostValue<AttrValue>;
+    role?: HostValue<AttrValue>;
+    part?: HostValue<AttrValue>;
+    title?: HostValue<AttrValue>;
+    slot?: HostValue<AttrValue>;
+    tabIndex?: HostValue<number | null | undefined | false>;
 }
 export interface SlotProps {
     name?: string;
@@ -205,7 +224,6 @@ export interface SlotProps {
 export declare function Host(props: HostProps): JSXValue;
 export declare function Slot(props: SlotProps): JSXValue;
 
-import type { JSXValue } from './types';
 export declare function createSlot(name?: string, fallback?: () => JSXValue): JSXValue;
 
 export type HostRenderMode = 'light' | 'shadow';
@@ -219,7 +237,4 @@ export declare function withHostContext<T>(context: HostRenderContext | undefine
 export declare function captureCurrentHostContext(): HostRenderContext | undefined;
 export declare function withCapturedHostContext<T extends (...args: never[]) => unknown>(fn: T): T;
 
-import './types';
-
-
 

package/dist/runtime-dom.esm-browser.js

@@ -1,9 +1,9 @@
 /**
-* runtime-dom v0.0.2
+* runtime-dom v0.1.0-beta.0
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
-//#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;
@@ -12,7 +12,7 @@ function template(html, _isImportNode = false, _isSVG = false, _isMathML = false
 	};
 }
 //#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.
@@ -56,12 +56,12 @@ const capitalize = cacheStringFunction((str) => {
 });
 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) {
@@ -201,7 +201,7 @@ function onScopeDispose(fn, failSilently = false) {
 	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 {
@@ -487,7 +487,7 @@ function cleanupEffect(e) {
 	}
 }
 //#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
@@ -678,7 +678,7 @@ function trigger(target, type, key, newValue, oldValue, oldTarget) {
 	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
@@ -863,7 +863,7 @@ function noTracking(self, method, args = []) {
 	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) {
@@ -917,7 +917,7 @@ var RefImpl = class {
 	}
 };
 //#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) {
@@ -1021,7 +1021,7 @@ var ReadonlyReactiveHandler = class extends BaseReactiveHandler {
 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) {
@@ -1180,7 +1180,7 @@ function checkIdentityKeys(target, has, key) {
 	}
 }
 //#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();
@@ -1349,7 +1349,7 @@ const toReactive = (value) => isObject(value) ? /* @__PURE__ */ reactive(value)
 */
 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);
@@ -1365,7 +1365,7 @@ function isPlainObject(value) {
 	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;
@@ -1389,7 +1389,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;
@@ -1411,7 +1411,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 = [];
@@ -1428,11 +1428,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.");
@@ -1454,7 +1454,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;
@@ -1593,14 +1593,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 = effectScope();
@@ -1627,7 +1627,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) {
@@ -1651,7 +1651,7 @@ function removeNodes(nodes) {
 	}
 }
 //#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());
@@ -1761,7 +1761,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 = {
@@ -1836,7 +1836,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") {
@@ -1860,12 +1860,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);
@@ -1923,7 +1923,7 @@ function mountKeyedFor(parent, marker, each, key, render) {
 		}
 		emitDevtoolsEvent({
 			type: "mount-for",
-			length: records.length
+			length: nextRecords.length
 		});
 		records = nextRecords;
 	});
@@ -1934,7 +1934,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);
 }
@@ -2014,7 +2014,7 @@ function _objectSpread2(e) {
 	return e;
 }
 //#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 : {});
@@ -2066,15 +2066,10 @@ function defineElement(tagName, options, setup) {
 			};
 			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) {
@@ -2197,7 +2192,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);
@@ -2229,15 +2224,84 @@ 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
-export { For, Host, Show, Slot, ZEUS_CONTEXT_REQUEST, bindAttr, bindClass, bindEvent, bindProp, bindRef, bindStyle, bindText, bindTextContent, captureCurrentHostContext, child, createComponent, createContext, createDOMContextBoundary, createOwner, createSlot, defineElement, delegateEvents, getCurrentHostContext, getCurrentOwner, inject, insert, marker, mountDynamic, mountFor, mountShow, normalizeClass, provide, provideDOMContext, removeNodes, render, requestDOMContext, resolveDOMContext, resolveValue, runWithOwner, setAttr, setRef, template, useContext, withCapturedHostContext, withHostContext };
+export { For, Host, Show, Slot, ZEUS_CONTEXT_REQUEST, bindAttr, bindClass, bindEvent, bindProp, bindRef, bindStyle, bindText, bindTextContent, captureCurrentHostContext, child, createComponent, createContext, createDOMContextBoundary, createOwner, createSlot, defineElement, delegateEvents, getCurrentHostContext, getCurrentOwner, inject, insert, insertTracked, marker, mountDynamic, mountFor, mountShow, normalizeClass, provide, provideDOMContext, removeNodes, render, requestDOMContext, resolveDOMContext, resolveValue, runWithOwner, setAttr, setRef, template, useContext, withCapturedHostContext, withHostContext };