@stencil/angular-output-target 1.3.1 → 1.3.2

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 (5) hide show
  1. package/dist/generate-angular-component.js +4 -4
  2. package/dist/index.cjs.js +12 -4
  3. package/dist/index.js +12 -4
  4. package/dist/utils.js +8 -0
  5. package/package.json +1 -1
package/dist/generate-angular-component.js CHANGED
@@ -90,7 +90,7 @@ export const createAngularComponentDefinition = (tagName, inputs, methods, inclu
90
90
  .filter((event) => !event.internal)
91
91
  .map((event) => {
92
92
  const camelCaseOutput = event.name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
93
- const outputType = `EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`;
93
+ const outputType = `EventEmitter<${tagNameAsPascal}CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`;
94
94
  return `@Output() ${camelCaseOutput} = new ${outputType}();`;
95
95
  });
96
96
  const propertiesDeclarationText = [
@@ -164,8 +164,8 @@ const formatOutputType = (componentClassName, event) => {
164
164
  .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (_, p1, p2) => {
165
165
  /**
166
166
  * Replaces a complex type reference within a generic type.
167
- * For example, remapping a type like `EventEmitter<CustomEvent<MyEvent<T>>>` to
168
- * `EventEmitter<CustomEvent<IMyComponentMyEvent<IMyComponentT>>>`.
167
+ * For example, remapping a type like `EventEmitter<MyComponentCustomEvent<MyEvent<T>>>` to
168
+ * `EventEmitter<MyComponentCustomEvent<IMyComponentMyEvent<IMyComponentT>>>`.
169
169
  */
170
170
  return [p1, prefixedTypeName, p2].join('');
171
171
  })
@@ -209,7 +209,7 @@ export const createComponentTypeDefinition = (outputType, tagNameAsPascal, event
209
209
  customElementsDir,
210
210
  outputType,
211
211
  });
212
- const eventTypes = publicEvents.map((event) => createPropertyDeclaration(event, `EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`));
212
+ const eventTypes = publicEvents.map((event) => createPropertyDeclaration(event, `EventEmitter<${tagNameAsPascal}CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`));
213
213
  const interfaceDeclaration = `export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {`;
214
214
  const typeDefinition = (eventTypeImports.length > 0 ? `${eventTypeImports + '\n\n'}` : '') +
215
215
  `${interfaceDeclaration}${eventTypes.length === 0
package/dist/index.cjs.js CHANGED
@@ -127,6 +127,14 @@ const createComponentEventTypeImports = (componentTagName, events, options) => {
127
127
  const namedImports = new Set();
128
128
  const isCustomElementsBuild = isOutputTypeCustomElementsBuild(options.outputType);
129
129
  const importPathName = normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
130
+ /**
131
+ * Each component's events are typed with the per-component CustomEvent type
132
+ * generated by Stencil (e.g. `MyComponentCustomEvent<Detail>`), which carries a
133
+ * narrowed `target`. Import it once per component that emits public events.
134
+ */
135
+ if (events.length > 0) {
136
+ imports.push(`import type { ${componentTagName}CustomEvent } from '${importPathName}';`);
137
+ }
130
138
  events.forEach((event) => {
131
139
  Object.entries(event.complexType.references).forEach(([typeName, refObject]) => {
132
140
  if (refObject.location === 'local' || refObject.location === 'import') {
@@ -236,7 +244,7 @@ const createAngularComponentDefinition = (tagName, inputs, methods, includeImpor
236
244
  .filter((event) => !event.internal)
237
245
  .map((event) => {
238
246
  const camelCaseOutput = event.name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
239
- const outputType = `EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`;
247
+ const outputType = `EventEmitter<${tagNameAsPascal}CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`;
240
248
  return `@Output() ${camelCaseOutput} = new ${outputType}();`;
241
249
  });
242
250
  const propertiesDeclarationText = [
@@ -310,8 +318,8 @@ const formatOutputType = (componentClassName, event) => {
310
318
  .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (_, p1, p2) => {
311
319
  /**
312
320
  * Replaces a complex type reference within a generic type.
313
- * For example, remapping a type like `EventEmitter<CustomEvent<MyEvent<T>>>` to
314
- * `EventEmitter<CustomEvent<IMyComponentMyEvent<IMyComponentT>>>`.
321
+ * For example, remapping a type like `EventEmitter<MyComponentCustomEvent<MyEvent<T>>>` to
322
+ * `EventEmitter<MyComponentCustomEvent<IMyComponentMyEvent<IMyComponentT>>>`.
315
323
  */
316
324
  return [p1, prefixedTypeName, p2].join('');
317
325
  })
@@ -355,7 +363,7 @@ const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, comp
355
363
  customElementsDir,
356
364
  outputType,
357
365
  });
358
- const eventTypes = publicEvents.map((event) => createPropertyDeclaration(event, `EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`));
366
+ const eventTypes = publicEvents.map((event) => createPropertyDeclaration(event, `EventEmitter<${tagNameAsPascal}CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`));
359
367
  const interfaceDeclaration = `export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {`;
360
368
  const typeDefinition = (eventTypeImports.length > 0 ? `${eventTypeImports + '\n\n'}` : '') +
361
369
  `${interfaceDeclaration}${eventTypes.length === 0
package/dist/index.js CHANGED
@@ -119,6 +119,14 @@ const createComponentEventTypeImports = (componentTagName, events, options) => {
119
119
  const namedImports = new Set();
120
120
  const isCustomElementsBuild = isOutputTypeCustomElementsBuild(options.outputType);
121
121
  const importPathName = normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
122
+ /**
123
+ * Each component's events are typed with the per-component CustomEvent type
124
+ * generated by Stencil (e.g. `MyComponentCustomEvent<Detail>`), which carries a
125
+ * narrowed `target`. Import it once per component that emits public events.
126
+ */
127
+ if (events.length > 0) {
128
+ imports.push(`import type { ${componentTagName}CustomEvent } from '${importPathName}';`);
129
+ }
122
130
  events.forEach((event) => {
123
131
  Object.entries(event.complexType.references).forEach(([typeName, refObject]) => {
124
132
  if (refObject.location === 'local' || refObject.location === 'import') {
@@ -228,7 +236,7 @@ const createAngularComponentDefinition = (tagName, inputs, methods, includeImpor
228
236
  .filter((event) => !event.internal)
229
237
  .map((event) => {
230
238
  const camelCaseOutput = event.name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
231
- const outputType = `EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`;
239
+ const outputType = `EventEmitter<${tagNameAsPascal}CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`;
232
240
  return `@Output() ${camelCaseOutput} = new ${outputType}();`;
233
241
  });
234
242
  const propertiesDeclarationText = [
@@ -302,8 +310,8 @@ const formatOutputType = (componentClassName, event) => {
302
310
  .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (_, p1, p2) => {
303
311
  /**
304
312
  * Replaces a complex type reference within a generic type.
305
- * For example, remapping a type like `EventEmitter<CustomEvent<MyEvent<T>>>` to
306
- * `EventEmitter<CustomEvent<IMyComponentMyEvent<IMyComponentT>>>`.
313
+ * For example, remapping a type like `EventEmitter<MyComponentCustomEvent<MyEvent<T>>>` to
314
+ * `EventEmitter<MyComponentCustomEvent<IMyComponentMyEvent<IMyComponentT>>>`.
307
315
  */
308
316
  return [p1, prefixedTypeName, p2].join('');
309
317
  })
@@ -347,7 +355,7 @@ const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, comp
347
355
  customElementsDir,
348
356
  outputType,
349
357
  });
350
- const eventTypes = publicEvents.map((event) => createPropertyDeclaration(event, `EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`));
358
+ const eventTypes = publicEvents.map((event) => createPropertyDeclaration(event, `EventEmitter<${tagNameAsPascal}CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`));
351
359
  const interfaceDeclaration = `export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {`;
352
360
  const typeDefinition = (eventTypeImports.length > 0 ? `${eventTypeImports + '\n\n'}` : '') +
353
361
  `${interfaceDeclaration}${eventTypes.length === 0
package/dist/utils.js CHANGED
@@ -120,6 +120,14 @@ export const createComponentEventTypeImports = (componentTagName, events, option
120
120
  const namedImports = new Set();
121
121
  const isCustomElementsBuild = isOutputTypeCustomElementsBuild(options.outputType);
122
122
  const importPathName = normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
123
+ /**
124
+ * Each component's events are typed with the per-component CustomEvent type
125
+ * generated by Stencil (e.g. `MyComponentCustomEvent<Detail>`), which carries a
126
+ * narrowed `target`. Import it once per component that emits public events.
127
+ */
128
+ if (events.length > 0) {
129
+ imports.push(`import type { ${componentTagName}CustomEvent } from '${importPathName}';`);
130
+ }
123
131
  events.forEach((event) => {
124
132
  Object.entries(event.complexType.references).forEach(([typeName, refObject]) => {
125
133
  if (refObject.location === 'local' || refObject.location === 'import') {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stencil/angular-output-target",
3
- "version": "1.3.1",
3
+ "version": "1.3.2",
4
4
  "description": "Angular output target for @stencil/core components.",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.js",