@zeus-js/web-c-runtime 0.1.0 → 0.1.1-beta.0

package/dist/web-c-runtime.d.ts

@@ -1,9 +1,7 @@
-export type ZeusPropType = 'string' | 'number' | 'boolean' | 'object' | 'array' | 'function' | 'unknown';
-export interface ZeusPropMeta {
-    name: string;
-    attrName?: string | false;
-    type: ZeusPropType;
-    reflect?: boolean;
+import { CustomElementPropSchema, CustomElementPropType } from '@zeus-js/runtime-dom';
+
+export type ZeusPropType = CustomElementPropType;
+export interface ZeusPropMeta extends CustomElementPropSchema {
     default?: unknown;
 }
 export interface ZeusLazyComponentMeta {
@@ -17,22 +15,32 @@ export interface ZeusLazyComponentMeta {
         default: ZeusComponentModule;
     }>;
     props: ZeusPropMeta[];
+    methods?: string[];
     /**
      * Whether to render into a ShadowRoot.
      *
      * @default false
      */
     shadow?: boolean;
+    /**
+     * Whether the proxy class participates in browser form association.
+     *
+     * @default false
+     */
+    formAssociated?: boolean;
 }
 export interface HostRef {
     host: HTMLElement;
     meta: ZeusLazyComponentMeta;
+    internals?: ElementInternals;
     connected: boolean;
     loaded: boolean;
     loading?: Promise<void>;
     instance?: ZeusComponentInstance;
     values: Map<string, unknown>;
+    attributeProps: Set<string>;
     reflectingAttrs: Set<string>;
+    pendingFormCallbacks: ZeusFormCallback[];
     readyWaiters: Array<{
         resolve(host: HTMLElement): void;
         reject(error: unknown): void;
@@ -42,6 +50,10 @@ export interface ZeusComponentInstance {
     connected?(): void;
     disconnected?(): void;
     propertyChanged?(name: string, oldValue: unknown, newValue: unknown): void;
+    formAssociated?(form: HTMLFormElement | null): void;
+    formDisabled?(disabled: boolean): void;
+    formReset?(): void;
+    formStateRestore?(state: File | FormData | string | null, mode: 'restore' | 'autocomplete'): void;
     /**
      * Can return Node / Node[] / string.
      * If the component completes rendering itself, it can also return void.
@@ -49,11 +61,27 @@ export interface ZeusComponentInstance {
     render?(): void | string | Node | Node[];
     dispose?(): void;
 }
+type ZeusFormCallback = {
+    type: 'associated';
+    form: HTMLFormElement | null;
+} | {
+    type: 'disabled';
+    disabled: boolean;
+} | {
+    type: 'reset';
+} | {
+    type: 'stateRestore';
+    state: File | FormData | string | null;
+    mode: 'restore' | 'autocomplete';
+};
 export interface ZeusComponentModule {
     createComponent(hostRef: HostRef): ZeusComponentInstance;
 }
 
-export declare function bootstrapLazy(components: ZeusLazyComponentMeta[]): void;
+export interface BootstrapLazyOptions {
+    registry?: CustomElementRegistry;
+}
+export declare function bootstrapLazy(components: ZeusLazyComponentMeta[], options?: BootstrapLazyOptions): void;
 
 export declare function createLazyElementClass(meta: ZeusLazyComponentMeta): CustomElementConstructor;
 

package/dist/web-c-runtime.esm-bundler.js

@@ -1,8 +1,30 @@
 /**
-* web-c-runtime v0.1.0
+* web-c-runtime v0.1.1-beta.0
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
+import { coerceCustomElementAttribute, findCustomElementPropByAttribute, getCustomElementAttributeName, getCustomElementObservedAttributes, reflectCustomElementProperty } from "@zeus-js/runtime-dom";
+//#region packages/web-c/web-c-runtime/src/form-callbacks.ts
+function invokeFormCallback(hostRef, callback) {
+	switch (callback.type) {
+		case "associated":
+			var _hostRef$instance, _hostRef$instance$for;
+			(_hostRef$instance = hostRef.instance) === null || _hostRef$instance === void 0 || (_hostRef$instance$for = _hostRef$instance.formAssociated) === null || _hostRef$instance$for === void 0 || _hostRef$instance$for.call(_hostRef$instance, callback.form);
+			return;
+		case "disabled":
+			var _hostRef$instance2, _hostRef$instance2$fo;
+			(_hostRef$instance2 = hostRef.instance) === null || _hostRef$instance2 === void 0 || (_hostRef$instance2$fo = _hostRef$instance2.formDisabled) === null || _hostRef$instance2$fo === void 0 || _hostRef$instance2$fo.call(_hostRef$instance2, callback.disabled);
+			return;
+		case "reset":
+			var _hostRef$instance3, _hostRef$instance3$fo;
+			(_hostRef$instance3 = hostRef.instance) === null || _hostRef$instance3 === void 0 || (_hostRef$instance3$fo = _hostRef$instance3.formReset) === null || _hostRef$instance3$fo === void 0 || _hostRef$instance3$fo.call(_hostRef$instance3);
+			return;
+		case "stateRestore":
+			var _hostRef$instance4, _hostRef$instance4$fo;
+			(_hostRef$instance4 = hostRef.instance) === null || _hostRef$instance4 === void 0 || (_hostRef$instance4$fo = _hostRef$instance4.formStateRestore) === null || _hostRef$instance4$fo === void 0 || _hostRef$instance4$fo.call(_hostRef$instance4, callback.state, callback.mode);
+	}
+}
+//#endregion
 //#region packages/web-c/web-c-runtime/src/host-ref.ts
 const hostRefs = /* @__PURE__ */ new WeakMap();
 function registerHost(host, meta) {
@@ -11,15 +33,27 @@ function registerHost(host, meta) {
 	const hostRef = {
 		host,
 		meta,
+		internals: meta.formAssociated ? attachElementInternals(host) : void 0,
 		connected: false,
 		loaded: false,
 		values: /* @__PURE__ */ new Map(),
+		attributeProps: /* @__PURE__ */ new Set(),
 		reflectingAttrs: /* @__PURE__ */ new Set(),
+		pendingFormCallbacks: [],
 		readyWaiters: []
 	};
 	hostRefs.set(host, hostRef);
 	return hostRef;
 }
+function attachElementInternals(host) {
+	if (typeof host.attachInternals !== "function") return;
+	try {
+		return host.attachInternals();
+	} catch (error) {
+		console.warn("[zeus:web-c] Failed to attach ElementInternals.", error);
+		return;
+	}
+}
 function getHostRef(host) {
 	return hostRefs.get(host);
 }
@@ -53,7 +87,8 @@ function setPropValue(hostRef, prop, value) {
 	const oldValue = getPropValue(hostRef, prop);
 	if (Object.is(oldValue, value)) return;
 	hostRef.values.set(prop.name, value);
-	if (prop.reflect) reflectPropertyToAttribute(hostRef, prop, value);
+	hostRef.attributeProps.delete(prop.name);
+	if (prop.reflect) reflectCustomElementProperty(hostRef.host, prop, value, hostRef.reflectingAttrs);
 	if (hostRef.loaded) {
 		var _hostRef$instance, _hostRef$instance$pro;
 		(_hostRef$instance = hostRef.instance) === null || _hostRef$instance === void 0 || (_hostRef$instance$pro = _hostRef$instance.propertyChanged) === null || _hostRef$instance$pro === void 0 || _hostRef$instance$pro.call(_hostRef$instance, prop.name, oldValue, value);
@@ -62,12 +97,13 @@ function setPropValue(hostRef, prop, value) {
 function syncAttributeToProperty(hostRef, attrName, _oldValue, newValue) {
 	const normalizedAttrName = normalizeAttrName(attrName);
 	if (hostRef.reflectingAttrs.has(normalizedAttrName)) return;
-	const prop = findPropByAttrName(hostRef, normalizedAttrName);
+	const prop = findCustomElementPropByAttribute(hostRef.meta.props, normalizedAttrName);
 	if (!prop) return;
 	const oldPropValue = getPropValue(hostRef, prop);
-	const newPropValue = parseAttributeValue(prop, newValue);
+	const newPropValue = coerceCustomElementAttribute(prop, newValue);
 	if (Object.is(oldPropValue, newPropValue)) return;
 	hostRef.values.set(prop.name, newPropValue);
+	hostRef.attributeProps.add(prop.name);
 	if (hostRef.loaded) {
 		var _hostRef$instance2, _hostRef$instance2$pr;
 		(_hostRef$instance2 = hostRef.instance) === null || _hostRef$instance2 === void 0 || (_hostRef$instance2$pr = _hostRef$instance2.propertyChanged) === null || _hostRef$instance2$pr === void 0 || _hostRef$instance2$pr.call(_hostRef$instance2, prop.name, oldPropValue, newPropValue);
@@ -77,21 +113,17 @@ function applyInitialValues(hostRef) {
 	const host = hostRef.host;
 	for (const prop of hostRef.meta.props) {
 		if (hostRef.values.has(prop.name)) continue;
-		const attrName = getAttrName(prop);
+		const attrName = getCustomElementAttributeName(prop);
 		if (attrName && host.hasAttribute(attrName)) {
-			hostRef.values.set(prop.name, parseAttributeValue(prop, host.getAttribute(attrName)));
+			hostRef.values.set(prop.name, coerceCustomElementAttribute(prop, host.getAttribute(attrName)));
+			hostRef.attributeProps.add(prop.name);
 			continue;
 		}
 		if ("default" in prop) hostRef.values.set(prop.name, prop.default);
 	}
 }
 function getObservedAttributes(props) {
-	const attrs = [];
-	for (const prop of props) {
-		const attrName = getAttrName(prop);
-		if (attrName) attrs.push(attrName);
-	}
-	return attrs;
+	return getCustomElementObservedAttributes(props);
 }
 /**
 * Upgrades properties that were written on an element instance before its
@@ -111,57 +143,11 @@ function upgradePreDefinedProperties(host, hostRef) {
 		setPropValue(hostRef, prop, value);
 	}
 }
-function findPropByAttrName(hostRef, attrName) {
-	return hostRef.meta.props.find((prop) => {
-		return getAttrName(prop) === attrName;
-	});
-}
-function getAttrName(prop) {
-	var _prop$attrName;
-	if (prop.attrName === false) return;
-	if (!isAttributeBackedType(prop.type)) return;
-	return normalizeAttrName((_prop$attrName = prop.attrName) !== null && _prop$attrName !== void 0 ? _prop$attrName : toKebabCase(prop.name));
-}
-function isAttributeBackedType(type) {
-	return type === "string" || type === "number" || type === "boolean";
-}
 function normalizeAttrName(value) {
 	return value.toLowerCase();
 }
-function parseAttributeValue(prop, value) {
-	switch (prop.type) {
-		case "boolean": return value !== null;
-		case "number":
-			if (value === null) return;
-			return Number(value);
-		case "string": return value !== null && value !== void 0 ? value : void 0;
-		default: return value;
-	}
-}
-function reflectPropertyToAttribute(hostRef, prop, value) {
-	const host = hostRef.host;
-	const attrName = getAttrName(prop);
-	if (!attrName) return;
-	hostRef.reflectingAttrs.add(attrName);
-	try {
-		if (prop.type === "boolean") {
-			host.toggleAttribute(attrName, Boolean(value));
-			return;
-		}
-		if (value === null || value === void 0 || value === false) {
-			host.removeAttribute(attrName);
-			return;
-		}
-		if (prop.type === "string" || prop.type === "number") host.setAttribute(attrName, String(value));
-	} finally {
-		hostRef.reflectingAttrs.delete(attrName);
-	}
-}
-function toKebabCase(value) {
-	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
-}
 //#endregion
-//#region \0@oxc-project+runtime@0.134.0/helpers/esm/asyncToGenerator.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/asyncToGenerator.js
 function asyncGeneratorStep(n, t, e, r, o, a, c) {
 	try {
 		var i = n[a](c), u = i.value;
@@ -206,6 +192,7 @@ function _initializeComponent() {
 		if (hostRef.loaded) {
 			var _hostRef$instance, _hostRef$instance$con;
 			(_hostRef$instance = hostRef.instance) === null || _hostRef$instance === void 0 || (_hostRef$instance$con = _hostRef$instance.connected) === null || _hostRef$instance$con === void 0 || _hostRef$instance$con.call(_hostRef$instance);
+			flushPendingFormCallbacks(hostRef);
 			return;
 		}
 		if (hostRef.loading) {
@@ -238,6 +225,7 @@ function _doInitializeComponent() {
 		try {
 			var _instance$connected, _instance$render;
 			(_instance$connected = instance.connected) === null || _instance$connected === void 0 || _instance$connected.call(instance);
+			flushPendingFormCallbacks(hostRef);
 			const rendered = (_instance$render = instance.render) === null || _instance$render === void 0 ? void 0 : _instance$render.call(instance);
 			if (rendered !== void 0) mountRenderedOutput(hostRef, rendered);
 			hostRef.loaded = true;
@@ -252,6 +240,12 @@ function _doInitializeComponent() {
 	});
 	return _doInitializeComponent.apply(this, arguments);
 }
+function flushPendingFormCallbacks(hostRef) {
+	while (hostRef.pendingFormCallbacks.length > 0) {
+		invokeFormCallback(hostRef, hostRef.pendingFormCallbacks[0]);
+		hostRef.pendingFormCallbacks.shift();
+	}
+}
 function loadComponentModule(_x3) {
 	return _loadComponentModule.apply(this, arguments);
 }
@@ -331,6 +325,28 @@ function createLazyElementClass(meta) {
 			if (oldValue === newValue) return;
 			syncAttributeToProperty(requireHostRef(this), name, oldValue, newValue);
 		}
+		formAssociatedCallback(form) {
+			dispatchFormCallback(requireHostRef(this), {
+				type: "associated",
+				form
+			});
+		}
+		formDisabledCallback(disabled) {
+			dispatchFormCallback(requireHostRef(this), {
+				type: "disabled",
+				disabled
+			});
+		}
+		formResetCallback() {
+			dispatchFormCallback(requireHostRef(this), { type: "reset" });
+		}
+		formStateRestoreCallback(state, mode) {
+			dispatchFormCallback(requireHostRef(this), {
+				type: "stateRestore",
+				state,
+				mode
+			});
+		}
 		componentOnReady() {
 			const hostRef = requireHostRef(this);
 			if (hostRef.connected && !hostRef.loaded && !hostRef.loading) initializeComponent(hostRef).catch((error) => {
@@ -339,13 +355,42 @@ function createLazyElementClass(meta) {
 			return waitForComponentReady(hostRef);
 		}
 	}
+	ZeusLazyElement.formAssociated = Boolean(meta.formAssociated);
 	installPropertyAccessors(ZeusLazyElement.prototype, meta.props);
+	installMethodProxies(ZeusLazyElement.prototype, meta.methods);
 	return ZeusLazyElement;
 }
+function dispatchFormCallback(hostRef, callback) {
+	if (!hostRef.instance || !hostRef.connected) {
+		hostRef.pendingFormCallbacks.push(callback);
+		return;
+	}
+	invokeFormCallback(hostRef, callback);
+}
+function installMethodProxies(proto, methods) {
+	if (!methods) return;
+	for (const name of methods) {
+		if (name in proto) continue;
+		Object.defineProperty(proto, name, {
+			configurable: true,
+			value: function() {
+				const host = this;
+				const args = Array.prototype.slice.call(arguments);
+				const hostRef = requireHostRef(host);
+				return waitForComponentReady(hostRef).then((readyHost) => {
+					const method = readyHost[name];
+					if (typeof method !== "function") throw new Error(`[zeus:web-c] Method "${name}" is not exposed on <${hostRef.meta.tagName}>.`);
+					return method.apply(readyHost, args);
+				});
+			}
+		});
+	}
+}
 //#endregion
 //#region packages/web-c/web-c-runtime/src/bootstrapLazy.ts
-function bootstrapLazy(components) {
-	const registry = typeof customElements === "undefined" ? void 0 : customElements;
+function bootstrapLazy(components, options = {}) {
+	var _options$registry;
+	const registry = (_options$registry = options.registry) !== null && _options$registry !== void 0 ? _options$registry : typeof customElements === "undefined" ? void 0 : customElements;
 	if (!registry) return;
 	for (const meta of components) {
 		if (registry.get(meta.tagName)) continue;

package/package.json

@@ -1,14 +1,19 @@
 {
   "name": "@zeus-js/web-c-runtime",
-  "version": "0.1.0",
-  "description": "Zeus Web-C lazy-loading runtime",
   "type": "module",
-  "main": "./dist/web-c-runtime.esm-bundler.js",
-  "module": "./dist/web-c-runtime.esm-bundler.js",
-  "types": "./dist/web-c-runtime.d.ts",
-  "files": [
-    "dist"
-  ],
+  "version": "0.1.1-beta.0",
+  "description": "Zeus Web-C lazy-loading runtime",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/baicie/zeus.git",
+    "directory": "packages/web-c/web-c-runtime"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "sideEffects": false,
   "exports": {
     ".": {
       "types": "./dist/web-c-runtime.d.ts",
@@ -17,11 +22,13 @@
       "default": "./dist/web-c-runtime.esm-bundler.js"
     }
   },
-  "sideEffects": false,
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/baicie/zeus"
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@zeus-js/runtime-dom": "0.1.1-beta.0"
   },
+  "author": "Baicie",
   "buildOptions": {
     "name": "ZeusWebCRuntime",
     "formats": [
@@ -33,6 +40,7 @@
     "web-components",
     "custom-elements"
   ],
-  "author": "Baicie",
-  "license": "MIT"
+  "main": "./dist/web-c-runtime.esm-bundler.js",
+  "module": "./dist/web-c-runtime.esm-bundler.js",
+  "types": "./dist/web-c-runtime.d.ts"
 }