@stencil/angular-output-target 1.3.0 → 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 (6) hide show
  1. package/dist/generate-angular-component.js +4 -4
  2. package/dist/index.cjs.js +13 -5
  3. package/dist/index.js +13 -5
  4. package/dist/output-angular.js +1 -1
  5. package/dist/utils.js +8 -0
  6. 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
@@ -1030,7 +1038,7 @@ function generateBarrelFile(components, outputTarget) {
1030
1038
  .map((component) => {
1031
1039
  const pascalName = dashToPascalCase(component.tagName);
1032
1040
  const moduleExport = includeSingleComponentAngularModules ? `, ${pascalName}Module` : '';
1033
- return `export { ${pascalName}${moduleExport} } from './${component.tagName}.js';`;
1041
+ return `export { ${pascalName}${moduleExport} } from './${component.tagName}';`;
1034
1042
  })
1035
1043
  .join('\n');
1036
1044
  return header + exports + '\n';
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
@@ -1022,7 +1030,7 @@ function generateBarrelFile(components, outputTarget) {
1022
1030
  .map((component) => {
1023
1031
  const pascalName = dashToPascalCase(component.tagName);
1024
1032
  const moduleExport = includeSingleComponentAngularModules ? `, ${pascalName}Module` : '';
1025
- return `export { ${pascalName}${moduleExport} } from './${component.tagName}.js';`;
1033
+ return `export { ${pascalName}${moduleExport} } from './${component.tagName}';`;
1026
1034
  })
1027
1035
  .join('\n');
1028
1036
  return header + exports + '\n';
package/dist/output-angular.js CHANGED
@@ -268,7 +268,7 @@ export function generateBarrelFile(components, outputTarget) {
268
268
  .map((component) => {
269
269
  const pascalName = dashToPascalCase(component.tagName);
270
270
  const moduleExport = includeSingleComponentAngularModules ? `, ${pascalName}Module` : '';
271
- return `export { ${pascalName}${moduleExport} } from './${component.tagName}.js';`;
271
+ return `export { ${pascalName}${moduleExport} } from './${component.tagName}';`;
272
272
  })
273
273
  .join('\n');
274
274
  return header + exports + '\n';
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.0",
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",