@zeus-js/component-dts 0.1.0-beta.3 → 0.1.0-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/component-dts.cjs.js +55 -11
  2. package/dist/component-dts.cjs.prod.js +55 -11
  3. package/dist/component-dts.esm-bundler.js +55 -11
  4. package/package.json +2 -2
package/dist/component-dts.cjs.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * component-dts v0.1.0-beta.3
2
+ * component-dts v0.1.0-beta.5
3
3
  * (c) 2026 baicie
4
4
  * Released under the MIT License.
5
5
  **/
@@ -41,6 +41,7 @@ function formatPropType(prop) {
41
41
  case "boolean": return "boolean";
42
42
  case "array": return "unknown[]";
43
43
  case "object": return "Record<string, unknown>";
44
+ case "function": return "Function";
44
45
  default: return "unknown";
45
46
  }
46
47
  }
@@ -76,15 +77,23 @@ function isRequiredProp(prop) {
76
77
  if (prop.default !== void 0) return false;
77
78
  return prop.required === true;
78
79
  }
80
+ function formatMethodSignature(method, options = {}) {
81
+ var _method$returns;
82
+ const parameters = method.parameters ? method.parameters.map((parameter) => {
83
+ const prefix = parameter.rest ? "..." : "";
84
+ const optional = parameter.optional && !parameter.rest ? "?" : "";
85
+ return `${prefix}${safePropertyName(parameter.name)}${optional}: ${normalizeKnownType(parameter.type)}`;
86
+ }).join(", ") : "...args: unknown[]";
87
+ const result = normalizeKnownType((_method$returns = method.returns) !== null && _method$returns !== void 0 ? _method$returns : "unknown");
88
+ const returnType = method.async || options.forcePromise ? result.startsWith("Promise<") ? result : `Promise<${result}>` : result;
89
+ return `${safePropertyName(method.name)}(${parameters}): ${returnType}`;
90
+ }
79
91
  //#endregion
80
92
  //#region packages/web-c/component-dts/src/naming.ts
81
93
  function getElementTypeName(component) {
82
94
  if (component.name.endsWith("Element")) return component.name;
83
95
  return `${component.name}Element`;
84
96
  }
85
- function toReactEventProp(eventName) {
86
- return "on" + eventName.split("-").filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
87
- }
88
97
  function getEventMapTypeName(component) {
89
98
  return `${component.name}EventMap`;
90
99
  }
@@ -145,11 +154,15 @@ function generateEventMap(component) {
145
154
  const lines = [];
146
155
  lines.push(`export interface ${eventMapName} {`);
147
156
  if (!entries.length) lines.push(" [key: string]: CustomEvent<unknown>");
148
- else for (const [name, event] of entries) lines.push(` ${safePropertyName(name)}: ${formatEventType(event)}`);
157
+ else for (const [key, event] of Object.entries(component.events)) {
158
+ var _event$name, _event$key;
159
+ 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)}`);
160
+ }
149
161
  lines.push("}");
150
162
  return lines.join("\n");
151
163
  }
152
164
  function generateElementInterface$1(component) {
165
+ var _component$methods;
153
166
  const elementTypeName = getElementTypeName(component);
154
167
  const eventMapName = getEventMapTypeName(component);
155
168
  const lines = [];
@@ -158,6 +171,7 @@ function generateElementInterface$1(component) {
158
171
  const optional = isRequiredProp(prop) ? "" : "?";
159
172
  lines.push(` ${safePropertyName(name)}${optional}: ${formatPropType(prop)}`);
160
173
  }
174
+ for (const method of Object.values((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {})) lines.push(` ${formatMethodSignature(method)}`);
161
175
  lines.push("");
162
176
  lines.push(` addEventListener<K extends keyof ${eventMapName}>(`);
163
177
  lines.push(" type: K,");
@@ -173,6 +187,9 @@ function generateElementInterface$1(component) {
173
187
  lines.push("}");
174
188
  return lines.join("\n");
175
189
  }
190
+ function toKebabCase$1(value) {
191
+ return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
192
+ }
176
193
  //#endregion
177
194
  //#region packages/web-c/component-dts/src/generateJsxDts.ts
178
195
  function generateWCJsxDts(manifest) {
@@ -204,6 +221,11 @@ function generateComponentJsxProps(component) {
204
221
  const optional = isRequiredProp(prop) ? "" : "?";
205
222
  lines.push(` ${safePropertyName(name)}${optional}: ${formatPropType(prop)}`);
206
223
  }
224
+ for (const [key, event] of Object.entries(component.events)) {
225
+ var _event$reactName, _event$key;
226
+ const detailType = event.detail ? formatDetailType(event.detail) : "unknown";
227
+ 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`);
228
+ }
207
229
  lines.push("");
208
230
  lines.push(" children?: unknown");
209
231
  lines.push(" class?: string");
@@ -219,6 +241,9 @@ function generateComponentJsxProps(component) {
219
241
  lines.push("}");
220
242
  return lines.join("\n");
221
243
  }
244
+ function toReactEventProp$1(value) {
245
+ return `on${value.split("-").filter(Boolean).map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`).join("")}`;
246
+ }
222
247
  //#endregion
223
248
  //#region packages/web-c/component-dts/src/generateReactDts.ts
224
249
  function generateReactDts(manifest, options = {}) {
@@ -235,6 +260,7 @@ function generateReactDts(manifest, options = {}) {
235
260
  return lines.join("\n");
236
261
  }
237
262
  function generateReactComponentDts(component, options) {
263
+ var _component$methods;
238
264
  const propsTypeName = getPropsTypeName(component);
239
265
  const elementTypeName = getElementTypeName(component);
240
266
  const lines = [];
@@ -247,8 +273,9 @@ function generateReactComponentDts(component, options) {
247
273
  lines.push(" children?: React.ReactNode");
248
274
  lines.push(" className?: string");
249
275
  lines.push(" style?: React.CSSProperties");
250
- for (const [name, event] of Object.entries(component.events)) {
251
- const propName = toReactEventProp(name);
276
+ for (const [key, event] of Object.entries(component.events)) {
277
+ var _event$reactName, _event$key;
278
+ 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);
252
279
  const detailType = event.detail ? formatDetailType(event.detail) : "unknown";
253
280
  lines.push(` ${safePropertyName(propName)}?: (event: CustomEvent<${detailType}>) => void`);
254
281
  }
@@ -263,6 +290,7 @@ function generateReactComponentDts(component, options) {
263
290
  const optional = isRequiredProp(prop) ? "" : "?";
264
291
  lines.push(` ${safePropertyName(name)}${optional}: ${formatPropType(prop)}`);
265
292
  }
293
+ for (const method of Object.values((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {})) lines.push(` ${formatMethodSignature(method)}`);
266
294
  lines.push("}");
267
295
  lines.push("");
268
296
  lines.push(`export declare const ${component.name}: React.ForwardRefExoticComponent<`);
@@ -270,6 +298,9 @@ function generateReactComponentDts(component, options) {
270
298
  lines.push(">");
271
299
  return lines.join("\n");
272
300
  }
301
+ function toReactEventProp(value) {
302
+ return `on${value.split("-").filter(Boolean).map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`).join("")}`;
303
+ }
273
304
  //#endregion
274
305
  //#region packages/web-c/component-dts/src/generateVueDts.ts
275
306
  function generateVueDts(manifest) {
@@ -327,12 +358,23 @@ function generateVueComponentDts(component) {
327
358
  return lines.join("\n");
328
359
  }
329
360
  function generateVueEmitsType(component) {
361
+ var _component$models;
330
362
  const entries = Object.entries(component.events);
331
- if (!entries.length) return "{}";
332
- return `{ ${entries.map(([name, event]) => {
363
+ const modelEntries = Array.from(new Map(((_component$models = component.models) !== null && _component$models !== void 0 ? _component$models : []).map((model) => {
364
+ const prop = component.props[model.prop];
365
+ const type = prop ? formatPropType(prop) : "unknown";
366
+ const name = `update:${model.prop}`;
367
+ return [name, `${JSON.stringify(name)}: (value: ${type}) => void`];
368
+ })).values());
369
+ if (!entries.length && !modelEntries.length) return "{}";
370
+ return `{ ${[...entries.map(([key, event]) => {
371
+ var _event$name, _event$key;
333
372
  const detailType = event.detail ? formatDetailType(event.detail) : "unknown";
334
- return `${JSON.stringify(name)}: (event: CustomEvent<${detailType}>) => void`;
335
- }).join("; ")} }`;
373
+ 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`;
374
+ }), ...modelEntries].join("; ")} }`;
375
+ }
376
+ function toKebabCase(value) {
377
+ return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
336
378
  }
337
379
  //#endregion
338
380
  //#region packages/web-c/component-dts/src/generateFiles.ts
@@ -390,6 +432,7 @@ function generateLoaderDts(manifest) {
390
432
  return lines.join("\n");
391
433
  }
392
434
  function generateElementInterface(component) {
435
+ var _component$methods;
393
436
  const elementTypeName = getElementTypeName(component);
394
437
  const lines = [];
395
438
  lines.push(`export interface ${elementTypeName} extends HTMLElement {`);
@@ -397,6 +440,7 @@ function generateElementInterface(component) {
397
440
  const optional = isRequiredProp(prop) ? "" : "?";
398
441
  lines.push(` ${safePropertyName(name)}${optional}: ${formatPropType(prop)}`);
399
442
  }
443
+ for (const method of Object.values((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {})) lines.push(` ${formatMethodSignature(method, { forcePromise: true })}`);
400
444
  lines.push(" componentOnReady(): Promise<this>");
401
445
  lines.push("}");
402
446
  return lines.join("\n");
package/dist/component-dts.cjs.prod.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * component-dts v0.1.0-beta.3
2
+ * component-dts v0.1.0-beta.5
3
3
  * (c) 2026 baicie
4
4
  * Released under the MIT License.
5
5
  **/
@@ -41,6 +41,7 @@ function formatPropType(prop) {
41
41
  case "boolean": return "boolean";
42
42
  case "array": return "unknown[]";
43
43
  case "object": return "Record<string, unknown>";
44
+ case "function": return "Function";
44
45
  default: return "unknown";
45
46
  }
46
47
  }
@@ -76,15 +77,23 @@ function isRequiredProp(prop) {
76
77
  if (prop.default !== void 0) return false;
77
78
  return prop.required === true;
78
79
  }
80
+ function formatMethodSignature(method, options = {}) {
81
+ var _method$returns;
82
+ const parameters = method.parameters ? method.parameters.map((parameter) => {
83
+ const prefix = parameter.rest ? "..." : "";
84
+ const optional = parameter.optional && !parameter.rest ? "?" : "";
85
+ return `${prefix}${safePropertyName(parameter.name)}${optional}: ${normalizeKnownType(parameter.type)}`;
86
+ }).join(", ") : "...args: unknown[]";
87
+ const result = normalizeKnownType((_method$returns = method.returns) !== null && _method$returns !== void 0 ? _method$returns : "unknown");
88
+ const returnType = method.async || options.forcePromise ? result.startsWith("Promise<") ? result : `Promise<${result}>` : result;
89
+ return `${safePropertyName(method.name)}(${parameters}): ${returnType}`;
90
+ }
79
91
  //#endregion
80
92
  //#region packages/web-c/component-dts/src/naming.ts
81
93
  function getElementTypeName(component) {
82
94
  if (component.name.endsWith("Element")) return component.name;
83
95
  return `${component.name}Element`;
84
96
  }
85
- function toReactEventProp(eventName) {
86
- return "on" + eventName.split("-").filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
87
- }
88
97
  function getEventMapTypeName(component) {
89
98
  return `${component.name}EventMap`;
90
99
  }
@@ -145,11 +154,15 @@ function generateEventMap(component) {
145
154
  const lines = [];
146
155
  lines.push(`export interface ${eventMapName} {`);
147
156
  if (!entries.length) lines.push(" [key: string]: CustomEvent<unknown>");
148
- else for (const [name, event] of entries) lines.push(` ${safePropertyName(name)}: ${formatEventType(event)}`);
157
+ else for (const [key, event] of Object.entries(component.events)) {
158
+ var _event$name, _event$key;
159
+ 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)}`);
160
+ }
149
161
  lines.push("}");
150
162
  return lines.join("\n");
151
163
  }
152
164
  function generateElementInterface$1(component) {
165
+ var _component$methods;
153
166
  const elementTypeName = getElementTypeName(component);
154
167
  const eventMapName = getEventMapTypeName(component);
155
168
  const lines = [];
@@ -158,6 +171,7 @@ function generateElementInterface$1(component) {
158
171
  const optional = isRequiredProp(prop) ? "" : "?";
159
172
  lines.push(` ${safePropertyName(name)}${optional}: ${formatPropType(prop)}`);
160
173
  }
174
+ for (const method of Object.values((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {})) lines.push(` ${formatMethodSignature(method)}`);
161
175
  lines.push("");
162
176
  lines.push(` addEventListener<K extends keyof ${eventMapName}>(`);
163
177
  lines.push(" type: K,");
@@ -173,6 +187,9 @@ function generateElementInterface$1(component) {
173
187
  lines.push("}");
174
188
  return lines.join("\n");
175
189
  }
190
+ function toKebabCase$1(value) {
191
+ return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
192
+ }
176
193
  //#endregion
177
194
  //#region packages/web-c/component-dts/src/generateJsxDts.ts
178
195
  function generateWCJsxDts(manifest) {
@@ -204,6 +221,11 @@ function generateComponentJsxProps(component) {
204
221
  const optional = isRequiredProp(prop) ? "" : "?";
205
222
  lines.push(` ${safePropertyName(name)}${optional}: ${formatPropType(prop)}`);
206
223
  }
224
+ for (const [key, event] of Object.entries(component.events)) {
225
+ var _event$reactName, _event$key;
226
+ const detailType = event.detail ? formatDetailType(event.detail) : "unknown";
227
+ 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`);
228
+ }
207
229
  lines.push("");
208
230
  lines.push(" children?: unknown");
209
231
  lines.push(" class?: string");
@@ -219,6 +241,9 @@ function generateComponentJsxProps(component) {
219
241
  lines.push("}");
220
242
  return lines.join("\n");
221
243
  }
244
+ function toReactEventProp$1(value) {
245
+ return `on${value.split("-").filter(Boolean).map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`).join("")}`;
246
+ }
222
247
  //#endregion
223
248
  //#region packages/web-c/component-dts/src/generateReactDts.ts
224
249
  function generateReactDts(manifest, options = {}) {
@@ -235,6 +260,7 @@ function generateReactDts(manifest, options = {}) {
235
260
  return lines.join("\n");
236
261
  }
237
262
  function generateReactComponentDts(component, options) {
263
+ var _component$methods;
238
264
  const propsTypeName = getPropsTypeName(component);
239
265
  const elementTypeName = getElementTypeName(component);
240
266
  const lines = [];
@@ -247,8 +273,9 @@ function generateReactComponentDts(component, options) {
247
273
  lines.push(" children?: React.ReactNode");
248
274
  lines.push(" className?: string");
249
275
  lines.push(" style?: React.CSSProperties");
250
- for (const [name, event] of Object.entries(component.events)) {
251
- const propName = toReactEventProp(name);
276
+ for (const [key, event] of Object.entries(component.events)) {
277
+ var _event$reactName, _event$key;
278
+ 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);
252
279
  const detailType = event.detail ? formatDetailType(event.detail) : "unknown";
253
280
  lines.push(` ${safePropertyName(propName)}?: (event: CustomEvent<${detailType}>) => void`);
254
281
  }
@@ -263,6 +290,7 @@ function generateReactComponentDts(component, options) {
263
290
  const optional = isRequiredProp(prop) ? "" : "?";
264
291
  lines.push(` ${safePropertyName(name)}${optional}: ${formatPropType(prop)}`);
265
292
  }
293
+ for (const method of Object.values((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {})) lines.push(` ${formatMethodSignature(method)}`);
266
294
  lines.push("}");
267
295
  lines.push("");
268
296
  lines.push(`export declare const ${component.name}: React.ForwardRefExoticComponent<`);
@@ -270,6 +298,9 @@ function generateReactComponentDts(component, options) {
270
298
  lines.push(">");
271
299
  return lines.join("\n");
272
300
  }
301
+ function toReactEventProp(value) {
302
+ return `on${value.split("-").filter(Boolean).map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`).join("")}`;
303
+ }
273
304
  //#endregion
274
305
  //#region packages/web-c/component-dts/src/generateVueDts.ts
275
306
  function generateVueDts(manifest) {
@@ -327,12 +358,23 @@ function generateVueComponentDts(component) {
327
358
  return lines.join("\n");
328
359
  }
329
360
  function generateVueEmitsType(component) {
361
+ var _component$models;
330
362
  const entries = Object.entries(component.events);
331
- if (!entries.length) return "{}";
332
- return `{ ${entries.map(([name, event]) => {
363
+ const modelEntries = Array.from(new Map(((_component$models = component.models) !== null && _component$models !== void 0 ? _component$models : []).map((model) => {
364
+ const prop = component.props[model.prop];
365
+ const type = prop ? formatPropType(prop) : "unknown";
366
+ const name = `update:${model.prop}`;
367
+ return [name, `${JSON.stringify(name)}: (value: ${type}) => void`];
368
+ })).values());
369
+ if (!entries.length && !modelEntries.length) return "{}";
370
+ return `{ ${[...entries.map(([key, event]) => {
371
+ var _event$name, _event$key;
333
372
  const detailType = event.detail ? formatDetailType(event.detail) : "unknown";
334
- return `${JSON.stringify(name)}: (event: CustomEvent<${detailType}>) => void`;
335
- }).join("; ")} }`;
373
+ 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`;
374
+ }), ...modelEntries].join("; ")} }`;
375
+ }
376
+ function toKebabCase(value) {
377
+ return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
336
378
  }
337
379
  //#endregion
338
380
  //#region packages/web-c/component-dts/src/generateFiles.ts
@@ -390,6 +432,7 @@ function generateLoaderDts(manifest) {
390
432
  return lines.join("\n");
391
433
  }
392
434
  function generateElementInterface(component) {
435
+ var _component$methods;
393
436
  const elementTypeName = getElementTypeName(component);
394
437
  const lines = [];
395
438
  lines.push(`export interface ${elementTypeName} extends HTMLElement {`);
@@ -397,6 +440,7 @@ function generateElementInterface(component) {
397
440
  const optional = isRequiredProp(prop) ? "" : "?";
398
441
  lines.push(` ${safePropertyName(name)}${optional}: ${formatPropType(prop)}`);
399
442
  }
443
+ for (const method of Object.values((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {})) lines.push(` ${formatMethodSignature(method, { forcePromise: true })}`);
400
444
  lines.push(" componentOnReady(): Promise<this>");
401
445
  lines.push("}");
402
446
  return lines.join("\n");
package/dist/component-dts.esm-bundler.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * component-dts v0.1.0-beta.3
2
+ * component-dts v0.1.0-beta.5
3
3
  * (c) 2026 baicie
4
4
  * Released under the MIT License.
5
5
  **/
@@ -14,6 +14,7 @@ function formatPropType(prop) {
14
14
  case "boolean": return "boolean";
15
15
  case "array": return "unknown[]";
16
16
  case "object": return "Record<string, unknown>";
17
+ case "function": return "Function";
17
18
  default: return "unknown";
18
19
  }
19
20
  }
@@ -49,15 +50,23 @@ function isRequiredProp(prop) {
49
50
  if (prop.default !== void 0) return false;
50
51
  return prop.required === true;
51
52
  }
53
+ function formatMethodSignature(method, options = {}) {
54
+ var _method$returns;
55
+ const parameters = method.parameters ? method.parameters.map((parameter) => {
56
+ const prefix = parameter.rest ? "..." : "";
57
+ const optional = parameter.optional && !parameter.rest ? "?" : "";
58
+ return `${prefix}${safePropertyName(parameter.name)}${optional}: ${normalizeKnownType(parameter.type)}`;
59
+ }).join(", ") : "...args: unknown[]";
60
+ const result = normalizeKnownType((_method$returns = method.returns) !== null && _method$returns !== void 0 ? _method$returns : "unknown");
61
+ const returnType = method.async || options.forcePromise ? result.startsWith("Promise<") ? result : `Promise<${result}>` : result;
62
+ return `${safePropertyName(method.name)}(${parameters}): ${returnType}`;
63
+ }
52
64
  //#endregion
53
65
  //#region packages/web-c/component-dts/src/naming.ts
54
66
  function getElementTypeName(component) {
55
67
  if (component.name.endsWith("Element")) return component.name;
56
68
  return `${component.name}Element`;
57
69
  }
58
- function toReactEventProp(eventName) {
59
- return "on" + eventName.split("-").filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
60
- }
61
70
  function getEventMapTypeName(component) {
62
71
  return `${component.name}EventMap`;
63
72
  }
@@ -118,11 +127,15 @@ function generateEventMap(component) {
118
127
  const lines = [];
119
128
  lines.push(`export interface ${eventMapName} {`);
120
129
  if (!entries.length) lines.push(" [key: string]: CustomEvent<unknown>");
121
- else for (const [name, event] of entries) lines.push(` ${safePropertyName(name)}: ${formatEventType(event)}`);
130
+ else for (const [key, event] of Object.entries(component.events)) {
131
+ var _event$name, _event$key;
132
+ 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)}`);
133
+ }
122
134
  lines.push("}");
123
135
  return lines.join("\n");
124
136
  }
125
137
  function generateElementInterface$1(component) {
138
+ var _component$methods;
126
139
  const elementTypeName = getElementTypeName(component);
127
140
  const eventMapName = getEventMapTypeName(component);
128
141
  const lines = [];
@@ -131,6 +144,7 @@ function generateElementInterface$1(component) {
131
144
  const optional = isRequiredProp(prop) ? "" : "?";
132
145
  lines.push(` ${safePropertyName(name)}${optional}: ${formatPropType(prop)}`);
133
146
  }
147
+ for (const method of Object.values((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {})) lines.push(` ${formatMethodSignature(method)}`);
134
148
  lines.push("");
135
149
  lines.push(` addEventListener<K extends keyof ${eventMapName}>(`);
136
150
  lines.push(" type: K,");
@@ -146,6 +160,9 @@ function generateElementInterface$1(component) {
146
160
  lines.push("}");
147
161
  return lines.join("\n");
148
162
  }
163
+ function toKebabCase$1(value) {
164
+ return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
165
+ }
149
166
  //#endregion
150
167
  //#region packages/web-c/component-dts/src/generateJsxDts.ts
151
168
  function generateWCJsxDts(manifest) {
@@ -177,6 +194,11 @@ function generateComponentJsxProps(component) {
177
194
  const optional = isRequiredProp(prop) ? "" : "?";
178
195
  lines.push(` ${safePropertyName(name)}${optional}: ${formatPropType(prop)}`);
179
196
  }
197
+ for (const [key, event] of Object.entries(component.events)) {
198
+ var _event$reactName, _event$key;
199
+ const detailType = event.detail ? formatDetailType(event.detail) : "unknown";
200
+ 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`);
201
+ }
180
202
  lines.push("");
181
203
  lines.push(" children?: unknown");
182
204
  lines.push(" class?: string");
@@ -192,6 +214,9 @@ function generateComponentJsxProps(component) {
192
214
  lines.push("}");
193
215
  return lines.join("\n");
194
216
  }
217
+ function toReactEventProp$1(value) {
218
+ return `on${value.split("-").filter(Boolean).map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`).join("")}`;
219
+ }
195
220
  //#endregion
196
221
  //#region packages/web-c/component-dts/src/generateReactDts.ts
197
222
  function generateReactDts(manifest, options = {}) {
@@ -208,6 +233,7 @@ function generateReactDts(manifest, options = {}) {
208
233
  return lines.join("\n");
209
234
  }
210
235
  function generateReactComponentDts(component, options) {
236
+ var _component$methods;
211
237
  const propsTypeName = getPropsTypeName(component);
212
238
  const elementTypeName = getElementTypeName(component);
213
239
  const lines = [];
@@ -220,8 +246,9 @@ function generateReactComponentDts(component, options) {
220
246
  lines.push(" children?: React.ReactNode");
221
247
  lines.push(" className?: string");
222
248
  lines.push(" style?: React.CSSProperties");
223
- for (const [name, event] of Object.entries(component.events)) {
224
- const propName = toReactEventProp(name);
249
+ for (const [key, event] of Object.entries(component.events)) {
250
+ var _event$reactName, _event$key;
251
+ 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);
225
252
  const detailType = event.detail ? formatDetailType(event.detail) : "unknown";
226
253
  lines.push(` ${safePropertyName(propName)}?: (event: CustomEvent<${detailType}>) => void`);
227
254
  }
@@ -236,6 +263,7 @@ function generateReactComponentDts(component, options) {
236
263
  const optional = isRequiredProp(prop) ? "" : "?";
237
264
  lines.push(` ${safePropertyName(name)}${optional}: ${formatPropType(prop)}`);
238
265
  }
266
+ for (const method of Object.values((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {})) lines.push(` ${formatMethodSignature(method)}`);
239
267
  lines.push("}");
240
268
  lines.push("");
241
269
  lines.push(`export declare const ${component.name}: React.ForwardRefExoticComponent<`);
@@ -243,6 +271,9 @@ function generateReactComponentDts(component, options) {
243
271
  lines.push(">");
244
272
  return lines.join("\n");
245
273
  }
274
+ function toReactEventProp(value) {
275
+ return `on${value.split("-").filter(Boolean).map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`).join("")}`;
276
+ }
246
277
  //#endregion
247
278
  //#region packages/web-c/component-dts/src/generateVueDts.ts
248
279
  function generateVueDts(manifest) {
@@ -300,12 +331,23 @@ function generateVueComponentDts(component) {
300
331
  return lines.join("\n");
301
332
  }
302
333
  function generateVueEmitsType(component) {
334
+ var _component$models;
303
335
  const entries = Object.entries(component.events);
304
- if (!entries.length) return "{}";
305
- return `{ ${entries.map(([name, event]) => {
336
+ const modelEntries = Array.from(new Map(((_component$models = component.models) !== null && _component$models !== void 0 ? _component$models : []).map((model) => {
337
+ const prop = component.props[model.prop];
338
+ const type = prop ? formatPropType(prop) : "unknown";
339
+ const name = `update:${model.prop}`;
340
+ return [name, `${JSON.stringify(name)}: (value: ${type}) => void`];
341
+ })).values());
342
+ if (!entries.length && !modelEntries.length) return "{}";
343
+ return `{ ${[...entries.map(([key, event]) => {
344
+ var _event$name, _event$key;
306
345
  const detailType = event.detail ? formatDetailType(event.detail) : "unknown";
307
- return `${JSON.stringify(name)}: (event: CustomEvent<${detailType}>) => void`;
308
- }).join("; ")} }`;
346
+ 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`;
347
+ }), ...modelEntries].join("; ")} }`;
348
+ }
349
+ function toKebabCase(value) {
350
+ return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
309
351
  }
310
352
  //#endregion
311
353
  //#region packages/web-c/component-dts/src/generateFiles.ts
@@ -363,6 +405,7 @@ function generateLoaderDts(manifest) {
363
405
  return lines.join("\n");
364
406
  }
365
407
  function generateElementInterface(component) {
408
+ var _component$methods;
366
409
  const elementTypeName = getElementTypeName(component);
367
410
  const lines = [];
368
411
  lines.push(`export interface ${elementTypeName} extends HTMLElement {`);
@@ -370,6 +413,7 @@ function generateElementInterface(component) {
370
413
  const optional = isRequiredProp(prop) ? "" : "?";
371
414
  lines.push(` ${safePropertyName(name)}${optional}: ${formatPropType(prop)}`);
372
415
  }
416
+ for (const method of Object.values((_component$methods = component.methods) !== null && _component$methods !== void 0 ? _component$methods : {})) lines.push(` ${formatMethodSignature(method, { forcePromise: true })}`);
373
417
  lines.push(" componentOnReady(): Promise<this>");
374
418
  lines.push("}");
375
419
  return lines.join("\n");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zeus-js/component-dts",
3
- "version": "0.1.0-beta.3",
3
+ "version": "0.1.0-beta.5",
4
4
  "description": "DTS generators for Zeus component manifest",
5
5
  "type": "module",
6
6
  "main": "index.js",
@@ -36,7 +36,7 @@
36
36
  ]
37
37
  },
38
38
  "dependencies": {
39
- "@zeus-js/component-analyzer": "0.1.0-beta.3"
39
+ "@zeus-js/component-analyzer": "0.1.0-beta.5"
40
40
  },
41
41
  "keywords": [
42
42
  "zeus",