@zeus-js/component-dts 0.1.0-beta.2 → 0.1.0-beta.4

package/dist/component-dts.cjs.js

@@ -1,5 +1,5 @@
 /**
-* component-dts v0.1.0-beta.2
+* component-dts v0.1.0-beta.4
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
@@ -41,6 +41,7 @@ function formatPropType(prop) {
 		case "boolean": return "boolean";
 		case "array": return "unknown[]";
 		case "object": return "Record<string, unknown>";
+		case "function": return "Function";
 		default: return "unknown";
 	}
 }
@@ -76,6 +77,17 @@ function isRequiredProp(prop) {
 	if (prop.default !== void 0) return false;
 	return prop.required === true;
 }
+function formatMethodSignature(method, options = {}) {
+	var _method$returns;
+	const parameters = method.parameters ? method.parameters.map((parameter) => {
+		const prefix = parameter.rest ? "..." : "";
+		const optional = parameter.optional && !parameter.rest ? "?" : "";
+		return `${prefix}${safePropertyName(parameter.name)}${optional}: ${normalizeKnownType(parameter.type)}`;
+	}).join(", ") : "...args: unknown[]";
+	const result = normalizeKnownType((_method$returns = method.returns) !== null && _method$returns !== void 0 ? _method$returns : "unknown");
+	const returnType = method.async || options.forcePromise ? result.startsWith("Promise<") ? result : `Promise<${result}>` : result;
+	return `${safePropertyName(method.name)}(${parameters}): ${returnType}`;
+}
 //#endregion
 //#region packages/web-c/component-dts/src/naming.ts
 function getElementTypeName(component) {
@@ -110,7 +122,7 @@ function generateComponentWCDts(component) {
 	lines.push("");
 	lines.push(generateEventMap(component));
 	lines.push("");
-	lines.push(generateElementInterface(component));
+	lines.push(generateElementInterface$1(component));
 	lines.push("");
 	lines.push(`export declare const ${component.exportName}: {`);
 	lines.push(`  new (): ${elementTypeName}`);
@@ -142,11 +154,15 @@ function generateEventMap(component) {
 	const lines = [];
 	lines.push(`export interface ${eventMapName} {`);
 	if (!entries.length) lines.push("  [key: string]: CustomEvent<unknown>");
-	else for (const [name, event] of entries) lines.push(`  ${safePropertyName(name)}: ${formatEventType(event)}`);
+	else for (const [key, event] of Object.entries(component.events)) {
+		var _event$name, _event$key;
+		lines.push(`  ${safePropertyName((_event$name = event.name) !== null && _event$name !== void 0 ? _event$name : toKebabCase$1((_event$key = event.key) !== null && _event$key !== void 0 ? _event$key : key))}: ${formatEventType(event)}`);
+	}
 	lines.push("}");
 	return lines.join("\n");
 }
-function generateElementInterface(component) {
+function generateElementInterface$1(component) {
+	var _component$methods;
 	const elementTypeName = getElementTypeName(component);
 	const eventMapName = getEventMapTypeName(component);
 	const lines = [];
@@ -155,6 +171,7 @@ function generateElementInterface(component) {
 		const optional = isRequiredProp(prop) ? "" : "?";
 		lines.push(`  ${safePropertyName(name)}${optional}: ${formatPropType(prop)}`);
 	}
+	for (const method of Object.values((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {})) lines.push(`  ${formatMethodSignature(method)}`);
 	lines.push("");
 	lines.push(`  addEventListener<K extends keyof ${eventMapName}>(`);
 	lines.push("    type: K,");
@@ -170,6 +187,9 @@ function generateElementInterface(component) {
 	lines.push("}");
 	return lines.join("\n");
 }
+function toKebabCase$1(value) {
+	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
 //#endregion
 //#region packages/web-c/component-dts/src/generateJsxDts.ts
 function generateWCJsxDts(manifest) {
@@ -201,6 +221,11 @@ function generateComponentJsxProps(component) {
 		const optional = isRequiredProp(prop) ? "" : "?";
 		lines.push(`  ${safePropertyName(name)}${optional}: ${formatPropType(prop)}`);
 	}
+	for (const [key, event] of Object.entries(component.events)) {
+		var _event$reactName, _event$key;
+		const detailType = event.detail ? formatDetailType(event.detail) : "unknown";
+		lines.push(`  ${safePropertyName((_event$reactName = event.reactName) !== null && _event$reactName !== void 0 ? _event$reactName : toReactEventProp$1((_event$key = event.key) !== null && _event$key !== void 0 ? _event$key : key))}?: (event: CustomEvent<${detailType}>) => void`);
+	}
 	lines.push("");
 	lines.push("  children?: unknown");
 	lines.push("  class?: string");
@@ -216,9 +241,12 @@ function generateComponentJsxProps(component) {
 	lines.push("}");
 	return lines.join("\n");
 }
+function toReactEventProp$1(value) {
+	return `on${value.split("-").filter(Boolean).map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`).join("")}`;
+}
 //#endregion
 //#region packages/web-c/component-dts/src/generateReactDts.ts
-function generateReactDts(manifest) {
+function generateReactDts(manifest, options = {}) {
 	const lines = [];
 	lines.push("/* eslint-disable */");
 	lines.push("// Generated by @zeus-js/component-dts.");
@@ -226,12 +254,13 @@ function generateReactDts(manifest) {
 	lines.push(`import type * as React from 'react'`);
 	lines.push("");
 	for (const component of manifest.components) {
-		lines.push(generateReactComponentDts(component));
+		lines.push(generateReactComponentDts(component, options));
 		lines.push("");
 	}
 	return lines.join("\n");
 }
-function generateReactComponentDts(component) {
+function generateReactComponentDts(component, options) {
+	var _component$methods;
 	const propsTypeName = getPropsTypeName(component);
 	const elementTypeName = getElementTypeName(component);
 	const lines = [];
@@ -244,10 +273,15 @@ function generateReactComponentDts(component) {
 	lines.push("  children?: React.ReactNode");
 	lines.push("  className?: string");
 	lines.push("  style?: React.CSSProperties");
-	for (const [name, event] of Object.entries(component.events)) {
-		const propName = toReactEventProp(name);
+	for (const [key, event] of Object.entries(component.events)) {
+		var _event$reactName, _event$key;
+		const propName = (_event$reactName = event.reactName) !== null && _event$reactName !== void 0 ? _event$reactName : toReactEventProp((_event$key = event.key) !== null && _event$key !== void 0 ? _event$key : key);
 		const detailType = event.detail ? formatDetailType(event.detail) : "unknown";
-		lines.push(`  ${propName}?: (event: CustomEvent<${detailType}>) => void`);
+		lines.push(`  ${safePropertyName(propName)}?: (event: CustomEvent<${detailType}>) => void`);
+	}
+	if (options.namedSlots !== "none") for (const name of Object.keys(component.slots)) {
+		if (name === "default") continue;
+		lines.push(`  ${safePropertyName(name)}?: React.ReactNode`);
 	}
 	lines.push("}");
 	lines.push("");
@@ -256,6 +290,7 @@ function generateReactComponentDts(component) {
 		const optional = isRequiredProp(prop) ? "" : "?";
 		lines.push(`  ${safePropertyName(name)}${optional}: ${formatPropType(prop)}`);
 	}
+	for (const method of Object.values((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {})) lines.push(`  ${formatMethodSignature(method)}`);
 	lines.push("}");
 	lines.push("");
 	lines.push(`export declare const ${component.name}: React.ForwardRefExoticComponent<`);
@@ -263,8 +298,8 @@ function generateReactComponentDts(component) {
 	lines.push(">");
 	return lines.join("\n");
 }
-function toReactEventProp(eventName) {
-	return "on" + eventName.split("-").filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+function toReactEventProp(value) {
+	return `on${value.split("-").filter(Boolean).map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`).join("")}`;
 }
 //#endregion
 //#region packages/web-c/component-dts/src/generateVueDts.ts
@@ -323,12 +358,23 @@ function generateVueComponentDts(component) {
 	return lines.join("\n");
 }
 function generateVueEmitsType(component) {
+	var _component$models;
 	const entries = Object.entries(component.events);
-	if (!entries.length) return "{}";
-	return `{ ${entries.map(([name, event]) => {
+	const modelEntries = Array.from(new Map(((_component$models = component.models) !== null && _component$models !== void 0 ? _component$models : []).map((model) => {
+		const prop = component.props[model.prop];
+		const type = prop ? formatPropType(prop) : "unknown";
+		const name = `update:${model.prop}`;
+		return [name, `${JSON.stringify(name)}: (value: ${type}) => void`];
+	})).values());
+	if (!entries.length && !modelEntries.length) return "{}";
+	return `{ ${[...entries.map(([key, event]) => {
+		var _event$name, _event$key;
 		const detailType = event.detail ? formatDetailType(event.detail) : "unknown";
-		return `${JSON.stringify(name)}: (event: CustomEvent<${detailType}>) => void`;
-	}).join("; ")} }`;
+		return `${JSON.stringify((_event$name = event.name) !== null && _event$name !== void 0 ? _event$name : toKebabCase((_event$key = event.key) !== null && _event$key !== void 0 ? _event$key : key))}: (event: CustomEvent<${detailType}>) => void`;
+	}), ...modelEntries].join("; ")} }`;
+}
+function toKebabCase(value) {
+	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
 }
 //#endregion
 //#region packages/web-c/component-dts/src/generateFiles.ts
@@ -361,10 +407,50 @@ function normalizeOptions(options) {
 	};
 }
 //#endregion
+//#region packages/web-c/component-dts/src/generateLoaderDts.ts
+function generateLoaderDts(manifest) {
+	const lines = [];
+	lines.push("/* eslint-disable */");
+	lines.push("// Generated by @zeus-js/component-dts.");
+	lines.push("");
+	for (const component of manifest.components) {
+		lines.push(generateElementInterface(component));
+		lines.push("");
+	}
+	lines.push("export declare function defineCustomElements(): void");
+	lines.push("");
+	lines.push("export declare const defineLazyElements: typeof defineCustomElements");
+	lines.push("");
+	lines.push("declare global {");
+	lines.push("  interface HTMLElementTagNameMap {");
+	for (const component of manifest.components) lines.push(`    ${JSON.stringify(component.tag)}: ${getElementTypeName(component)}`);
+	lines.push("  }");
+	lines.push("}");
+	lines.push("");
+	lines.push("export {}");
+	lines.push("");
+	return lines.join("\n");
+}
+function generateElementInterface(component) {
+	var _component$methods;
+	const elementTypeName = getElementTypeName(component);
+	const lines = [];
+	lines.push(`export interface ${elementTypeName} extends HTMLElement {`);
+	for (const [name, prop] of Object.entries(component.props)) {
+		const optional = isRequiredProp(prop) ? "" : "?";
+		lines.push(`  ${safePropertyName(name)}${optional}: ${formatPropType(prop)}`);
+	}
+	for (const method of Object.values((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {})) lines.push(`  ${formatMethodSignature(method, { forcePromise: true })}`);
+	lines.push("  componentOnReady(): Promise<this>");
+	lines.push("}");
+	return lines.join("\n");
+}
+//#endregion
 exports.formatDetailType = formatDetailType;
 exports.formatEventType = formatEventType;
 exports.formatPropType = formatPropType;
 exports.generateComponentWCDts = generateComponentWCDts;
+exports.generateLoaderDts = generateLoaderDts;
 exports.generateReactDts = generateReactDts;
 exports.generateVueDts = generateVueDts;
 exports.generateVueGlobalDts = generateVueGlobalDts;

package/dist/component-dts.cjs.prod.js

@@ -1,5 +1,5 @@
 /**
-* component-dts v0.1.0-beta.2
+* component-dts v0.1.0-beta.4
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
@@ -41,6 +41,7 @@ function formatPropType(prop) {
 		case "boolean": return "boolean";
 		case "array": return "unknown[]";
 		case "object": return "Record<string, unknown>";
+		case "function": return "Function";
 		default: return "unknown";
 	}
 }
@@ -76,6 +77,17 @@ function isRequiredProp(prop) {
 	if (prop.default !== void 0) return false;
 	return prop.required === true;
 }
+function formatMethodSignature(method, options = {}) {
+	var _method$returns;
+	const parameters = method.parameters ? method.parameters.map((parameter) => {
+		const prefix = parameter.rest ? "..." : "";
+		const optional = parameter.optional && !parameter.rest ? "?" : "";
+		return `${prefix}${safePropertyName(parameter.name)}${optional}: ${normalizeKnownType(parameter.type)}`;
+	}).join(", ") : "...args: unknown[]";
+	const result = normalizeKnownType((_method$returns = method.returns) !== null && _method$returns !== void 0 ? _method$returns : "unknown");
+	const returnType = method.async || options.forcePromise ? result.startsWith("Promise<") ? result : `Promise<${result}>` : result;
+	return `${safePropertyName(method.name)}(${parameters}): ${returnType}`;
+}
 //#endregion
 //#region packages/web-c/component-dts/src/naming.ts
 function getElementTypeName(component) {
@@ -110,7 +122,7 @@ function generateComponentWCDts(component) {
 	lines.push("");
 	lines.push(generateEventMap(component));
 	lines.push("");
-	lines.push(generateElementInterface(component));
+	lines.push(generateElementInterface$1(component));
 	lines.push("");
 	lines.push(`export declare const ${component.exportName}: {`);
 	lines.push(`  new (): ${elementTypeName}`);
@@ -142,11 +154,15 @@ function generateEventMap(component) {
 	const lines = [];
 	lines.push(`export interface ${eventMapName} {`);
 	if (!entries.length) lines.push("  [key: string]: CustomEvent<unknown>");
-	else for (const [name, event] of entries) lines.push(`  ${safePropertyName(name)}: ${formatEventType(event)}`);
+	else for (const [key, event] of Object.entries(component.events)) {
+		var _event$name, _event$key;
+		lines.push(`  ${safePropertyName((_event$name = event.name) !== null && _event$name !== void 0 ? _event$name : toKebabCase$1((_event$key = event.key) !== null && _event$key !== void 0 ? _event$key : key))}: ${formatEventType(event)}`);
+	}
 	lines.push("}");
 	return lines.join("\n");
 }
-function generateElementInterface(component) {
+function generateElementInterface$1(component) {
+	var _component$methods;
 	const elementTypeName = getElementTypeName(component);
 	const eventMapName = getEventMapTypeName(component);
 	const lines = [];
@@ -155,6 +171,7 @@ function generateElementInterface(component) {
 		const optional = isRequiredProp(prop) ? "" : "?";
 		lines.push(`  ${safePropertyName(name)}${optional}: ${formatPropType(prop)}`);
 	}
+	for (const method of Object.values((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {})) lines.push(`  ${formatMethodSignature(method)}`);
 	lines.push("");
 	lines.push(`  addEventListener<K extends keyof ${eventMapName}>(`);
 	lines.push("    type: K,");
@@ -170,6 +187,9 @@ function generateElementInterface(component) {
 	lines.push("}");
 	return lines.join("\n");
 }
+function toKebabCase$1(value) {
+	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
 //#endregion
 //#region packages/web-c/component-dts/src/generateJsxDts.ts
 function generateWCJsxDts(manifest) {
@@ -201,6 +221,11 @@ function generateComponentJsxProps(component) {
 		const optional = isRequiredProp(prop) ? "" : "?";
 		lines.push(`  ${safePropertyName(name)}${optional}: ${formatPropType(prop)}`);
 	}
+	for (const [key, event] of Object.entries(component.events)) {
+		var _event$reactName, _event$key;
+		const detailType = event.detail ? formatDetailType(event.detail) : "unknown";
+		lines.push(`  ${safePropertyName((_event$reactName = event.reactName) !== null && _event$reactName !== void 0 ? _event$reactName : toReactEventProp$1((_event$key = event.key) !== null && _event$key !== void 0 ? _event$key : key))}?: (event: CustomEvent<${detailType}>) => void`);
+	}
 	lines.push("");
 	lines.push("  children?: unknown");
 	lines.push("  class?: string");
@@ -216,9 +241,12 @@ function generateComponentJsxProps(component) {
 	lines.push("}");
 	return lines.join("\n");
 }
+function toReactEventProp$1(value) {
+	return `on${value.split("-").filter(Boolean).map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`).join("")}`;
+}
 //#endregion
 //#region packages/web-c/component-dts/src/generateReactDts.ts
-function generateReactDts(manifest) {
+function generateReactDts(manifest, options = {}) {
 	const lines = [];
 	lines.push("/* eslint-disable */");
 	lines.push("// Generated by @zeus-js/component-dts.");
@@ -226,12 +254,13 @@ function generateReactDts(manifest) {
 	lines.push(`import type * as React from 'react'`);
 	lines.push("");
 	for (const component of manifest.components) {
-		lines.push(generateReactComponentDts(component));
+		lines.push(generateReactComponentDts(component, options));
 		lines.push("");
 	}
 	return lines.join("\n");
 }
-function generateReactComponentDts(component) {
+function generateReactComponentDts(component, options) {
+	var _component$methods;
 	const propsTypeName = getPropsTypeName(component);
 	const elementTypeName = getElementTypeName(component);
 	const lines = [];
@@ -244,10 +273,15 @@ function generateReactComponentDts(component) {
 	lines.push("  children?: React.ReactNode");
 	lines.push("  className?: string");
 	lines.push("  style?: React.CSSProperties");
-	for (const [name, event] of Object.entries(component.events)) {
-		const propName = toReactEventProp(name);
+	for (const [key, event] of Object.entries(component.events)) {
+		var _event$reactName, _event$key;
+		const propName = (_event$reactName = event.reactName) !== null && _event$reactName !== void 0 ? _event$reactName : toReactEventProp((_event$key = event.key) !== null && _event$key !== void 0 ? _event$key : key);
 		const detailType = event.detail ? formatDetailType(event.detail) : "unknown";
-		lines.push(`  ${propName}?: (event: CustomEvent<${detailType}>) => void`);
+		lines.push(`  ${safePropertyName(propName)}?: (event: CustomEvent<${detailType}>) => void`);
+	}
+	if (options.namedSlots !== "none") for (const name of Object.keys(component.slots)) {
+		if (name === "default") continue;
+		lines.push(`  ${safePropertyName(name)}?: React.ReactNode`);
 	}
 	lines.push("}");
 	lines.push("");
@@ -256,6 +290,7 @@ function generateReactComponentDts(component) {
 		const optional = isRequiredProp(prop) ? "" : "?";
 		lines.push(`  ${safePropertyName(name)}${optional}: ${formatPropType(prop)}`);
 	}
+	for (const method of Object.values((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {})) lines.push(`  ${formatMethodSignature(method)}`);
 	lines.push("}");
 	lines.push("");
 	lines.push(`export declare const ${component.name}: React.ForwardRefExoticComponent<`);
@@ -263,8 +298,8 @@ function generateReactComponentDts(component) {
 	lines.push(">");
 	return lines.join("\n");
 }
-function toReactEventProp(eventName) {
-	return "on" + eventName.split("-").filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+function toReactEventProp(value) {
+	return `on${value.split("-").filter(Boolean).map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`).join("")}`;
 }
 //#endregion
 //#region packages/web-c/component-dts/src/generateVueDts.ts
@@ -323,12 +358,23 @@ function generateVueComponentDts(component) {
 	return lines.join("\n");
 }
 function generateVueEmitsType(component) {
+	var _component$models;
 	const entries = Object.entries(component.events);
-	if (!entries.length) return "{}";
-	return `{ ${entries.map(([name, event]) => {
+	const modelEntries = Array.from(new Map(((_component$models = component.models) !== null && _component$models !== void 0 ? _component$models : []).map((model) => {
+		const prop = component.props[model.prop];
+		const type = prop ? formatPropType(prop) : "unknown";
+		const name = `update:${model.prop}`;
+		return [name, `${JSON.stringify(name)}: (value: ${type}) => void`];
+	})).values());
+	if (!entries.length && !modelEntries.length) return "{}";
+	return `{ ${[...entries.map(([key, event]) => {
+		var _event$name, _event$key;
 		const detailType = event.detail ? formatDetailType(event.detail) : "unknown";
-		return `${JSON.stringify(name)}: (event: CustomEvent<${detailType}>) => void`;
-	}).join("; ")} }`;
+		return `${JSON.stringify((_event$name = event.name) !== null && _event$name !== void 0 ? _event$name : toKebabCase((_event$key = event.key) !== null && _event$key !== void 0 ? _event$key : key))}: (event: CustomEvent<${detailType}>) => void`;
+	}), ...modelEntries].join("; ")} }`;
+}
+function toKebabCase(value) {
+	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
 }
 //#endregion
 //#region packages/web-c/component-dts/src/generateFiles.ts
@@ -361,10 +407,50 @@ function normalizeOptions(options) {
 	};
 }
 //#endregion
+//#region packages/web-c/component-dts/src/generateLoaderDts.ts
+function generateLoaderDts(manifest) {
+	const lines = [];
+	lines.push("/* eslint-disable */");
+	lines.push("// Generated by @zeus-js/component-dts.");
+	lines.push("");
+	for (const component of manifest.components) {
+		lines.push(generateElementInterface(component));
+		lines.push("");
+	}
+	lines.push("export declare function defineCustomElements(): void");
+	lines.push("");
+	lines.push("export declare const defineLazyElements: typeof defineCustomElements");
+	lines.push("");
+	lines.push("declare global {");
+	lines.push("  interface HTMLElementTagNameMap {");
+	for (const component of manifest.components) lines.push(`    ${JSON.stringify(component.tag)}: ${getElementTypeName(component)}`);
+	lines.push("  }");
+	lines.push("}");
+	lines.push("");
+	lines.push("export {}");
+	lines.push("");
+	return lines.join("\n");
+}
+function generateElementInterface(component) {
+	var _component$methods;
+	const elementTypeName = getElementTypeName(component);
+	const lines = [];
+	lines.push(`export interface ${elementTypeName} extends HTMLElement {`);
+	for (const [name, prop] of Object.entries(component.props)) {
+		const optional = isRequiredProp(prop) ? "" : "?";
+		lines.push(`  ${safePropertyName(name)}${optional}: ${formatPropType(prop)}`);
+	}
+	for (const method of Object.values((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {})) lines.push(`  ${formatMethodSignature(method, { forcePromise: true })}`);
+	lines.push("  componentOnReady(): Promise<this>");
+	lines.push("}");
+	return lines.join("\n");
+}
+//#endregion
 exports.formatDetailType = formatDetailType;
 exports.formatEventType = formatEventType;
 exports.formatPropType = formatPropType;
 exports.generateComponentWCDts = generateComponentWCDts;
+exports.generateLoaderDts = generateLoaderDts;
 exports.generateReactDts = generateReactDts;
 exports.generateVueDts = generateVueDts;
 exports.generateVueGlobalDts = generateVueGlobalDts;

package/dist/component-dts.d.ts

@@ -7,7 +7,10 @@ export declare function generateWCIndexDts(manifest: ComponentManifest, options:
 
 export declare function generateWCJsxDts(manifest: ComponentManifest): string;
 
-export declare function generateReactDts(manifest: ComponentManifest): string;
+interface GenerateReactDtsOptions {
+    namedSlots?: 'props' | 'none';
+}
+export declare function generateReactDts(manifest: ComponentManifest, options?: GenerateReactDtsOptions): string;
 
 export declare function generateVueDts(manifest: ComponentManifest): string;
 export declare function generateVueGlobalDts(manifest: ComponentManifest): string;
@@ -56,6 +59,8 @@ export interface ComponentDtsOptions {
 
 export declare function generateWCDtsFiles(manifest: ComponentManifest, options?: ComponentDtsOptions): DtsOutputFile[];
 
+export declare function generateLoaderDts(manifest: ComponentManifest): string;
+
 export declare function formatPropType(prop: ComponentProp): string;
 export declare function formatEventType(event: ComponentEvent): string;
 export declare function formatDetailType(detail: Record<string, string>): string;

package/dist/component-dts.esm-bundler.js

@@ -1,5 +1,5 @@
 /**
-* component-dts v0.1.0-beta.2
+* component-dts v0.1.0-beta.4
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
@@ -14,6 +14,7 @@ function formatPropType(prop) {
 		case "boolean": return "boolean";
 		case "array": return "unknown[]";
 		case "object": return "Record<string, unknown>";
+		case "function": return "Function";
 		default: return "unknown";
 	}
 }
@@ -49,6 +50,17 @@ function isRequiredProp(prop) {
 	if (prop.default !== void 0) return false;
 	return prop.required === true;
 }
+function formatMethodSignature(method, options = {}) {
+	var _method$returns;
+	const parameters = method.parameters ? method.parameters.map((parameter) => {
+		const prefix = parameter.rest ? "..." : "";
+		const optional = parameter.optional && !parameter.rest ? "?" : "";
+		return `${prefix}${safePropertyName(parameter.name)}${optional}: ${normalizeKnownType(parameter.type)}`;
+	}).join(", ") : "...args: unknown[]";
+	const result = normalizeKnownType((_method$returns = method.returns) !== null && _method$returns !== void 0 ? _method$returns : "unknown");
+	const returnType = method.async || options.forcePromise ? result.startsWith("Promise<") ? result : `Promise<${result}>` : result;
+	return `${safePropertyName(method.name)}(${parameters}): ${returnType}`;
+}
 //#endregion
 //#region packages/web-c/component-dts/src/naming.ts
 function getElementTypeName(component) {
@@ -83,7 +95,7 @@ function generateComponentWCDts(component) {
 	lines.push("");
 	lines.push(generateEventMap(component));
 	lines.push("");
-	lines.push(generateElementInterface(component));
+	lines.push(generateElementInterface$1(component));
 	lines.push("");
 	lines.push(`export declare const ${component.exportName}: {`);
 	lines.push(`  new (): ${elementTypeName}`);
@@ -115,11 +127,15 @@ function generateEventMap(component) {
 	const lines = [];
 	lines.push(`export interface ${eventMapName} {`);
 	if (!entries.length) lines.push("  [key: string]: CustomEvent<unknown>");
-	else for (const [name, event] of entries) lines.push(`  ${safePropertyName(name)}: ${formatEventType(event)}`);
+	else for (const [key, event] of Object.entries(component.events)) {
+		var _event$name, _event$key;
+		lines.push(`  ${safePropertyName((_event$name = event.name) !== null && _event$name !== void 0 ? _event$name : toKebabCase$1((_event$key = event.key) !== null && _event$key !== void 0 ? _event$key : key))}: ${formatEventType(event)}`);
+	}
 	lines.push("}");
 	return lines.join("\n");
 }
-function generateElementInterface(component) {
+function generateElementInterface$1(component) {
+	var _component$methods;
 	const elementTypeName = getElementTypeName(component);
 	const eventMapName = getEventMapTypeName(component);
 	const lines = [];
@@ -128,6 +144,7 @@ function generateElementInterface(component) {
 		const optional = isRequiredProp(prop) ? "" : "?";
 		lines.push(`  ${safePropertyName(name)}${optional}: ${formatPropType(prop)}`);
 	}
+	for (const method of Object.values((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {})) lines.push(`  ${formatMethodSignature(method)}`);
 	lines.push("");
 	lines.push(`  addEventListener<K extends keyof ${eventMapName}>(`);
 	lines.push("    type: K,");
@@ -143,6 +160,9 @@ function generateElementInterface(component) {
 	lines.push("}");
 	return lines.join("\n");
 }
+function toKebabCase$1(value) {
+	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
 //#endregion
 //#region packages/web-c/component-dts/src/generateJsxDts.ts
 function generateWCJsxDts(manifest) {
@@ -174,6 +194,11 @@ function generateComponentJsxProps(component) {
 		const optional = isRequiredProp(prop) ? "" : "?";
 		lines.push(`  ${safePropertyName(name)}${optional}: ${formatPropType(prop)}`);
 	}
+	for (const [key, event] of Object.entries(component.events)) {
+		var _event$reactName, _event$key;
+		const detailType = event.detail ? formatDetailType(event.detail) : "unknown";
+		lines.push(`  ${safePropertyName((_event$reactName = event.reactName) !== null && _event$reactName !== void 0 ? _event$reactName : toReactEventProp$1((_event$key = event.key) !== null && _event$key !== void 0 ? _event$key : key))}?: (event: CustomEvent<${detailType}>) => void`);
+	}
 	lines.push("");
 	lines.push("  children?: unknown");
 	lines.push("  class?: string");
@@ -189,9 +214,12 @@ function generateComponentJsxProps(component) {
 	lines.push("}");
 	return lines.join("\n");
 }
+function toReactEventProp$1(value) {
+	return `on${value.split("-").filter(Boolean).map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`).join("")}`;
+}
 //#endregion
 //#region packages/web-c/component-dts/src/generateReactDts.ts
-function generateReactDts(manifest) {
+function generateReactDts(manifest, options = {}) {
 	const lines = [];
 	lines.push("/* eslint-disable */");
 	lines.push("// Generated by @zeus-js/component-dts.");
@@ -199,12 +227,13 @@ function generateReactDts(manifest) {
 	lines.push(`import type * as React from 'react'`);
 	lines.push("");
 	for (const component of manifest.components) {
-		lines.push(generateReactComponentDts(component));
+		lines.push(generateReactComponentDts(component, options));
 		lines.push("");
 	}
 	return lines.join("\n");
 }
-function generateReactComponentDts(component) {
+function generateReactComponentDts(component, options) {
+	var _component$methods;
 	const propsTypeName = getPropsTypeName(component);
 	const elementTypeName = getElementTypeName(component);
 	const lines = [];
@@ -217,10 +246,15 @@ function generateReactComponentDts(component) {
 	lines.push("  children?: React.ReactNode");
 	lines.push("  className?: string");
 	lines.push("  style?: React.CSSProperties");
-	for (const [name, event] of Object.entries(component.events)) {
-		const propName = toReactEventProp(name);
+	for (const [key, event] of Object.entries(component.events)) {
+		var _event$reactName, _event$key;
+		const propName = (_event$reactName = event.reactName) !== null && _event$reactName !== void 0 ? _event$reactName : toReactEventProp((_event$key = event.key) !== null && _event$key !== void 0 ? _event$key : key);
 		const detailType = event.detail ? formatDetailType(event.detail) : "unknown";
-		lines.push(`  ${propName}?: (event: CustomEvent<${detailType}>) => void`);
+		lines.push(`  ${safePropertyName(propName)}?: (event: CustomEvent<${detailType}>) => void`);
+	}
+	if (options.namedSlots !== "none") for (const name of Object.keys(component.slots)) {
+		if (name === "default") continue;
+		lines.push(`  ${safePropertyName(name)}?: React.ReactNode`);
 	}
 	lines.push("}");
 	lines.push("");
@@ -229,6 +263,7 @@ function generateReactComponentDts(component) {
 		const optional = isRequiredProp(prop) ? "" : "?";
 		lines.push(`  ${safePropertyName(name)}${optional}: ${formatPropType(prop)}`);
 	}
+	for (const method of Object.values((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {})) lines.push(`  ${formatMethodSignature(method)}`);
 	lines.push("}");
 	lines.push("");
 	lines.push(`export declare const ${component.name}: React.ForwardRefExoticComponent<`);
@@ -236,8 +271,8 @@ function generateReactComponentDts(component) {
 	lines.push(">");
 	return lines.join("\n");
 }
-function toReactEventProp(eventName) {
-	return "on" + eventName.split("-").filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+function toReactEventProp(value) {
+	return `on${value.split("-").filter(Boolean).map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`).join("")}`;
 }
 //#endregion
 //#region packages/web-c/component-dts/src/generateVueDts.ts
@@ -296,12 +331,23 @@ function generateVueComponentDts(component) {
 	return lines.join("\n");
 }
 function generateVueEmitsType(component) {
+	var _component$models;
 	const entries = Object.entries(component.events);
-	if (!entries.length) return "{}";
-	return `{ ${entries.map(([name, event]) => {
+	const modelEntries = Array.from(new Map(((_component$models = component.models) !== null && _component$models !== void 0 ? _component$models : []).map((model) => {
+		const prop = component.props[model.prop];
+		const type = prop ? formatPropType(prop) : "unknown";
+		const name = `update:${model.prop}`;
+		return [name, `${JSON.stringify(name)}: (value: ${type}) => void`];
+	})).values());
+	if (!entries.length && !modelEntries.length) return "{}";
+	return `{ ${[...entries.map(([key, event]) => {
+		var _event$name, _event$key;
 		const detailType = event.detail ? formatDetailType(event.detail) : "unknown";
-		return `${JSON.stringify(name)}: (event: CustomEvent<${detailType}>) => void`;
-	}).join("; ")} }`;
+		return `${JSON.stringify((_event$name = event.name) !== null && _event$name !== void 0 ? _event$name : toKebabCase((_event$key = event.key) !== null && _event$key !== void 0 ? _event$key : key))}: (event: CustomEvent<${detailType}>) => void`;
+	}), ...modelEntries].join("; ")} }`;
+}
+function toKebabCase(value) {
+	return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
 }
 //#endregion
 //#region packages/web-c/component-dts/src/generateFiles.ts
@@ -334,4 +380,43 @@ function normalizeOptions(options) {
 	};
 }
 //#endregion
-export { formatDetailType, formatEventType, formatPropType, generateComponentWCDts, generateReactDts, generateVueDts, generateVueGlobalDts, generateWCDtsFiles, generateWCIndexDts, generateWCJsxDts };
+//#region packages/web-c/component-dts/src/generateLoaderDts.ts
+function generateLoaderDts(manifest) {
+	const lines = [];
+	lines.push("/* eslint-disable */");
+	lines.push("// Generated by @zeus-js/component-dts.");
+	lines.push("");
+	for (const component of manifest.components) {
+		lines.push(generateElementInterface(component));
+		lines.push("");
+	}
+	lines.push("export declare function defineCustomElements(): void");
+	lines.push("");
+	lines.push("export declare const defineLazyElements: typeof defineCustomElements");
+	lines.push("");
+	lines.push("declare global {");
+	lines.push("  interface HTMLElementTagNameMap {");
+	for (const component of manifest.components) lines.push(`    ${JSON.stringify(component.tag)}: ${getElementTypeName(component)}`);
+	lines.push("  }");
+	lines.push("}");
+	lines.push("");
+	lines.push("export {}");
+	lines.push("");
+	return lines.join("\n");
+}
+function generateElementInterface(component) {
+	var _component$methods;
+	const elementTypeName = getElementTypeName(component);
+	const lines = [];
+	lines.push(`export interface ${elementTypeName} extends HTMLElement {`);
+	for (const [name, prop] of Object.entries(component.props)) {
+		const optional = isRequiredProp(prop) ? "" : "?";
+		lines.push(`  ${safePropertyName(name)}${optional}: ${formatPropType(prop)}`);
+	}
+	for (const method of Object.values((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {})) lines.push(`  ${formatMethodSignature(method, { forcePromise: true })}`);
+	lines.push("  componentOnReady(): Promise<this>");
+	lines.push("}");
+	return lines.join("\n");
+}
+//#endregion
+export { formatDetailType, formatEventType, formatPropType, generateComponentWCDts, generateLoaderDts, generateReactDts, generateVueDts, generateVueGlobalDts, generateWCDtsFiles, generateWCIndexDts, generateWCJsxDts };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeus-js/component-dts",
-  "version": "0.1.0-beta.2",
+  "version": "0.1.0-beta.4",
   "description": "DTS generators for Zeus component manifest",
   "type": "module",
   "main": "index.js",
@@ -13,14 +13,14 @@
   "exports": {
     ".": {
       "types": "./dist/component-dts.d.ts",
+      "module": "./dist/component-dts.esm-bundler.js",
+      "import": "./dist/component-dts.esm-bundler.js",
+      "require": "./index.js",
       "node": {
         "production": "./dist/component-dts.cjs.prod.js",
         "development": "./dist/component-dts.cjs.js",
         "default": "./index.js"
-      },
-      "module": "./dist/component-dts.esm-bundler.js",
-      "import": "./dist/component-dts.esm-bundler.js",
-      "require": "./index.js"
+      }
     }
   },
   "sideEffects": false,
@@ -36,7 +36,7 @@
     ]
   },
   "dependencies": {
-    "@zeus-js/component-analyzer": "0.1.0-beta.2"
+    "@zeus-js/component-analyzer": "0.1.0-beta.4"
   },
   "keywords": [
     "zeus",