@stencil/angular-output-target 0.6.1-dev.11650996582.1590f5aa → 0.6.1-dev.11655499531.137e1d26

package/angular-component-lib/utils.ts

@@ -4,6 +4,7 @@ import { fromEvent } from 'rxjs';
 
 export const proxyInputs = (Cmp: any, inputs: string[]) => {
   const Prototype = Cmp.prototype;
+
   inputs.forEach(item => {
     Object.defineProperty(Prototype, item, {
       get() {
@@ -42,6 +43,20 @@ export const defineCustomElement = (tagName: string, customElement: any) => {
   }
 }
 
+const NG_COMP_DEF = 'ɵcmp';
+
+export const clearAngularOutputBindings = (cls: any) => {
+  const instance = cls.prototype.constructor;
+  if (instance[NG_COMP_DEF]) {
+    /**
+     * With the output targets generating @Output() proxies, we need to
+     * clear the metadata (ɵcmp.outputs) so that Angular does not add its own event listener
+     * and cause duplicate event emissions for the web component events.
+     */
+    instance[NG_COMP_DEF].outputs = {};
+  }
+};
+
 // tslint:disable-next-line: only-arrow-functions
 export function ProxyCmp(opts: { defineCustomElementFn?: () => void, inputs?: any; methods?: any }) {
   const decorator = function (cls: any) {
@@ -51,6 +66,8 @@ export function ProxyCmp(opts: { defineCustomElementFn?: () => void, inputs?: an
       defineCustomElementFn();
     }
 
+    clearAngularOutputBindings(cls);
+
     if (inputs) {
       proxyInputs(cls, inputs);
     }

package/dist/generate-angular-component.js

@@ -1,4 +1,4 @@
-import { dashToPascalCase, normalizePath } from './utils';
+import { dashToPascalCase, formatCustomEventInterfaceName, normalizePath } from './utils';
 export const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir, includeImportCustomElements = false, customElementsDir = 'components') => (cmpMeta) => {
     // Collect component meta
     const inputs = [
@@ -41,6 +41,12 @@ export const createComponentDefinition = (componentCorePackage, distTypesDir, ro
     const componentEvents = [
         '' // Empty first line
     ];
+    /**
+     * The list of @Output() bindings to generate for the component.
+     */
+    const outputBindings = [
+        ''
+    ];
     // Generate outputs
     outputs.forEach((output, index) => {
         componentEvents.push(`  /**
@@ -59,10 +65,18 @@ export const createComponentDefinition = (componentCorePackage, distTypesDir, ro
             .replace(/\n/g, ' ')
             .replace(/\s{2,}/g, ' ')
             .replace(/,\s*/g, ', '));
-        componentEvents.push(`  ${output.name}: EventEmitter<CustomEvent<${outputTypeRemapped.trim()}>>;`);
+        /**
+         * Starting in Stencil 2.16.0, the compiler will generate a CustomEvent interface
+         * for each component with custom events.
+         *
+         * The name of this custom event is "ComponentTagNameCustomEvent".
+         */
+        componentEvents.push(`  ${output.name}: EventEmitter<${formatCustomEventInterfaceName(cmpMeta.tagName)}<${outputTypeRemapped.trim()}>>;`);
+        outputBindings.push(`  @Output() ${output.name} = new EventEmitter<${formatCustomEventInterfaceName(cmpMeta.tagName)}<${outputTypeRemapped.trim()}>>();`);
         if (index === outputs.length - 1) {
             // Empty line to push end `}` to new line
             componentEvents.push('\n');
+            outputBindings.push('\n');
         }
     });
     const lines = [
@@ -76,6 +90,7 @@ ${getProxyCmp(cmpMeta.tagName, includeImportCustomElements, inputs, methods)}
 })
 export class ${tagNameAsPascal} {`,
     ];
+    lines.push(...outputBindings);
     lines.push('  protected el: HTMLElement;');
     lines.push(`  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();

package/dist/index.cjs.js

@@ -81,6 +81,16 @@ async function readPackageJson(config, rootDir) {
     }
     return pkgData;
 }
+/**
+ * Returns the formatted custom event interface name for the component.
+ * With a tag of "my-cmp", it will return "MyCmpCustomEvent".
+ *
+ * @param componentTagName The tag selector of the component (i.e. my-cmp)
+ * @returns The formatted custom event interface name.
+ */
+function formatCustomEventInterfaceName(componentTagName) {
+    return `${dashToPascalCase(componentTagName)}CustomEvent`;
+}
 const EXTENDED_PATH_REGEX = /^\\\\\?\\/;
 const NON_ASCII_REGEX = /[^\x00-\x80]+/;
 const SLASH_REGEX = /\\/g;
@@ -127,6 +137,12 @@ const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir,
     const componentEvents = [
         '' // Empty first line
     ];
+    /**
+     * The list of @Output() bindings to generate for the component.
+     */
+    const outputBindings = [
+        ''
+    ];
     // Generate outputs
     outputs.forEach((output, index) => {
         componentEvents.push(`  /**
@@ -145,10 +161,18 @@ const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir,
             .replace(/\n/g, ' ')
             .replace(/\s{2,}/g, ' ')
             .replace(/,\s*/g, ', '));
-        componentEvents.push(`  ${output.name}: EventEmitter<CustomEvent<${outputTypeRemapped.trim()}>>;`);
+        /**
+         * Starting in Stencil 2.16.0, the compiler will generate a CustomEvent interface
+         * for each component with custom events.
+         *
+         * The name of this custom event is "ComponentTagNameCustomEvent".
+         */
+        componentEvents.push(`  ${output.name}: EventEmitter<${formatCustomEventInterfaceName(cmpMeta.tagName)}<${outputTypeRemapped.trim()}>>;`);
+        outputBindings.push(`  @Output() ${output.name} = new EventEmitter<${formatCustomEventInterfaceName(cmpMeta.tagName)}<${outputTypeRemapped.trim()}>>();`);
         if (index === outputs.length - 1) {
             // Empty line to push end `}` to new line
             componentEvents.push('\n');
+            outputBindings.push('\n');
         }
     });
     const lines = [
@@ -162,6 +186,7 @@ ${getProxyCmp(cmpMeta.tagName, includeImportCustomElements, inputs, methods)}
 })
 export class ${tagNameAsPascal} {`,
     ];
+    lines.push(...outputBindings);
     lines.push('  protected el: HTMLElement;');
     lines.push(`  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -300,8 +325,9 @@ function generateProxies(components, pkgData, outputTarget, rootDir) {
     const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
     const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone, Output } from '@angular/core';
 import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
+    const importLocation = getImportPackageName(outputTarget, componentsTypeFile);
     /**
      * Generate JSX import type from correct location.
      * When using custom elements build, we need to import from
@@ -309,11 +335,21 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
      * otherwise we risk bundlers pulling in lazy loaded imports.
      */
     const generateTypeImports = () => {
-        let importLocation = outputTarget.componentCorePackage ? normalizePath(outputTarget.componentCorePackage) : normalizePath(componentsTypeFile);
-        importLocation += outputTarget.includeImportCustomElements ? `/${outputTarget.customElementsDir || 'components'}` : '';
         return `import ${outputTarget.includeImportCustomElements ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
     };
-    const typeImports = generateTypeImports();
+    /**
+     * Components that have custom events have uniquely generated interfaces as of
+     * Stencil 2.16.0. We import these interfaces so they can be used in the generate
+     * functions for the @Output() events.
+     */
+    const customEventInterfaces = components.filter(c => c.events.filter(e => !e.internal).length > 0).map(c => {
+        return formatCustomEventInterfaceName(c.tagName);
+    });
+    const customEventImports = `import type { ${customEventInterfaces.join(', ')} } from '${importLocation}';\n`;
+    const typeImports = [
+        generateTypeImports(),
+        customEventImports,
+    ];
     let sourceImports = '';
     /**
      * Build an array of Custom Elements build imports and namespace them
@@ -331,7 +367,7 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
     }
     const final = [
         imports,
-        typeImports,
+        typeImports.join('\n'),
         sourceImports,
         components
             .map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir, outputTarget.includeImportCustomElements, outputTarget.customElementsDir))
@@ -339,6 +375,14 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
     ];
     return final.join('\n') + '\n';
 }
+/**
+ * Returns the path to import the file from.
+ */
+const getImportPackageName = (outputTarget, componentsTypeFile) => {
+    let importLocation = outputTarget.componentCorePackage ? normalizePath(outputTarget.componentCorePackage) : normalizePath(componentsTypeFile);
+    importLocation += outputTarget.includeImportCustomElements ? `/${outputTarget.customElementsDir || 'components'}` : '';
+    return importLocation;
+};
 const GENERATED_DTS = 'components.d.ts';
 const IMPORT_TYPES = 'Components';
 

package/dist/index.js

@@ -73,6 +73,16 @@ async function readPackageJson(config, rootDir) {
     }
     return pkgData;
 }
+/**
+ * Returns the formatted custom event interface name for the component.
+ * With a tag of "my-cmp", it will return "MyCmpCustomEvent".
+ *
+ * @param componentTagName The tag selector of the component (i.e. my-cmp)
+ * @returns The formatted custom event interface name.
+ */
+function formatCustomEventInterfaceName(componentTagName) {
+    return `${dashToPascalCase(componentTagName)}CustomEvent`;
+}
 const EXTENDED_PATH_REGEX = /^\\\\\?\\/;
 const NON_ASCII_REGEX = /[^\x00-\x80]+/;
 const SLASH_REGEX = /\\/g;
@@ -119,6 +129,12 @@ const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir,
     const componentEvents = [
         '' // Empty first line
     ];
+    /**
+     * The list of @Output() bindings to generate for the component.
+     */
+    const outputBindings = [
+        ''
+    ];
     // Generate outputs
     outputs.forEach((output, index) => {
         componentEvents.push(`  /**
@@ -137,10 +153,18 @@ const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir,
             .replace(/\n/g, ' ')
             .replace(/\s{2,}/g, ' ')
             .replace(/,\s*/g, ', '));
-        componentEvents.push(`  ${output.name}: EventEmitter<CustomEvent<${outputTypeRemapped.trim()}>>;`);
+        /**
+         * Starting in Stencil 2.16.0, the compiler will generate a CustomEvent interface
+         * for each component with custom events.
+         *
+         * The name of this custom event is "ComponentTagNameCustomEvent".
+         */
+        componentEvents.push(`  ${output.name}: EventEmitter<${formatCustomEventInterfaceName(cmpMeta.tagName)}<${outputTypeRemapped.trim()}>>;`);
+        outputBindings.push(`  @Output() ${output.name} = new EventEmitter<${formatCustomEventInterfaceName(cmpMeta.tagName)}<${outputTypeRemapped.trim()}>>();`);
         if (index === outputs.length - 1) {
             // Empty line to push end `}` to new line
             componentEvents.push('\n');
+            outputBindings.push('\n');
         }
     });
     const lines = [
@@ -154,6 +178,7 @@ ${getProxyCmp(cmpMeta.tagName, includeImportCustomElements, inputs, methods)}
 })
 export class ${tagNameAsPascal} {`,
     ];
+    lines.push(...outputBindings);
     lines.push('  protected el: HTMLElement;');
     lines.push(`  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -292,8 +317,9 @@ function generateProxies(components, pkgData, outputTarget, rootDir) {
     const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
     const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone, Output } from '@angular/core';
 import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
+    const importLocation = getImportPackageName(outputTarget, componentsTypeFile);
     /**
      * Generate JSX import type from correct location.
      * When using custom elements build, we need to import from
@@ -301,11 +327,21 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
      * otherwise we risk bundlers pulling in lazy loaded imports.
      */
     const generateTypeImports = () => {
-        let importLocation = outputTarget.componentCorePackage ? normalizePath(outputTarget.componentCorePackage) : normalizePath(componentsTypeFile);
-        importLocation += outputTarget.includeImportCustomElements ? `/${outputTarget.customElementsDir || 'components'}` : '';
         return `import ${outputTarget.includeImportCustomElements ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
     };
-    const typeImports = generateTypeImports();
+    /**
+     * Components that have custom events have uniquely generated interfaces as of
+     * Stencil 2.16.0. We import these interfaces so they can be used in the generate
+     * functions for the @Output() events.
+     */
+    const customEventInterfaces = components.filter(c => c.events.filter(e => !e.internal).length > 0).map(c => {
+        return formatCustomEventInterfaceName(c.tagName);
+    });
+    const customEventImports = `import type { ${customEventInterfaces.join(', ')} } from '${importLocation}';\n`;
+    const typeImports = [
+        generateTypeImports(),
+        customEventImports,
+    ];
     let sourceImports = '';
     /**
      * Build an array of Custom Elements build imports and namespace them
@@ -323,7 +359,7 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
     }
     const final = [
         imports,
-        typeImports,
+        typeImports.join('\n'),
         sourceImports,
         components
             .map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir, outputTarget.includeImportCustomElements, outputTarget.customElementsDir))
@@ -331,6 +367,14 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
     ];
     return final.join('\n') + '\n';
 }
+/**
+ * Returns the path to import the file from.
+ */
+const getImportPackageName = (outputTarget, componentsTypeFile) => {
+    let importLocation = outputTarget.componentCorePackage ? normalizePath(outputTarget.componentCorePackage) : normalizePath(componentsTypeFile);
+    importLocation += outputTarget.includeImportCustomElements ? `/${outputTarget.customElementsDir || 'components'}` : '';
+    return importLocation;
+};
 const GENERATED_DTS = 'components.d.ts';
 const IMPORT_TYPES = 'Components';
 

package/dist/output-angular.js

@@ -1,5 +1,5 @@
 import path from 'path';
-import { relativeImport, normalizePath, sortBy, readPackageJson, dashToPascalCase } from './utils';
+import { relativeImport, normalizePath, sortBy, readPackageJson, dashToPascalCase, formatCustomEventInterfaceName } from './utils';
 import { createComponentDefinition } from './generate-angular-component';
 import { generateAngularDirectivesFile } from './generate-angular-directives-file';
 import generateValueAccessors from './generate-value-accessors';
@@ -39,8 +39,9 @@ export function generateProxies(components, pkgData, outputTarget, rootDir) {
     const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
     const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone, Output } from '@angular/core';
 import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
+    const importLocation = getImportPackageName(outputTarget, componentsTypeFile);
     /**
      * Generate JSX import type from correct location.
      * When using custom elements build, we need to import from
@@ -48,11 +49,21 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
      * otherwise we risk bundlers pulling in lazy loaded imports.
      */
     const generateTypeImports = () => {
-        let importLocation = outputTarget.componentCorePackage ? normalizePath(outputTarget.componentCorePackage) : normalizePath(componentsTypeFile);
-        importLocation += outputTarget.includeImportCustomElements ? `/${outputTarget.customElementsDir || 'components'}` : '';
         return `import ${outputTarget.includeImportCustomElements ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
     };
-    const typeImports = generateTypeImports();
+    /**
+     * Components that have custom events have uniquely generated interfaces as of
+     * Stencil 2.16.0. We import these interfaces so they can be used in the generate
+     * functions for the @Output() events.
+     */
+    const customEventInterfaces = components.filter(c => c.events.filter(e => !e.internal).length > 0).map(c => {
+        return formatCustomEventInterfaceName(c.tagName);
+    });
+    const customEventImports = `import type { ${customEventInterfaces.join(', ')} } from '${importLocation}';\n`;
+    const typeImports = [
+        generateTypeImports(),
+        customEventImports,
+    ];
     let sourceImports = '';
     /**
      * Build an array of Custom Elements build imports and namespace them
@@ -70,7 +81,7 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
     }
     const final = [
         imports,
-        typeImports,
+        typeImports.join('\n'),
         sourceImports,
         components
             .map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir, outputTarget.includeImportCustomElements, outputTarget.customElementsDir))
@@ -78,5 +89,13 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
     ];
     return final.join('\n') + '\n';
 }
+/**
+ * Returns the path to import the file from.
+ */
+const getImportPackageName = (outputTarget, componentsTypeFile) => {
+    let importLocation = outputTarget.componentCorePackage ? normalizePath(outputTarget.componentCorePackage) : normalizePath(componentsTypeFile);
+    importLocation += outputTarget.includeImportCustomElements ? `/${outputTarget.customElementsDir || 'components'}` : '';
+    return importLocation;
+};
 const GENERATED_DTS = 'components.d.ts';
 const IMPORT_TYPES = 'Components';

package/dist/utils.d.ts

@@ -7,3 +7,11 @@ export declare function normalizePath(str: string): string;
 export declare function relativeImport(pathFrom: string, pathTo: string, ext?: string): string;
 export declare function isRelativePath(path: string): boolean | "";
 export declare function readPackageJson(config: Config, rootDir: string): Promise<PackageJSON>;
+/**
+ * Returns the formatted custom event interface name for the component.
+ * With a tag of "my-cmp", it will return "MyCmpCustomEvent".
+ *
+ * @param componentTagName The tag selector of the component (i.e. my-cmp)
+ * @returns The formatted custom event interface name.
+ */
+export declare function formatCustomEventInterfaceName(componentTagName: string): string;

package/dist/utils.js

@@ -74,6 +74,16 @@ export async function readPackageJson(config, rootDir) {
     }
     return pkgData;
 }
+/**
+ * Returns the formatted custom event interface name for the component.
+ * With a tag of "my-cmp", it will return "MyCmpCustomEvent".
+ *
+ * @param componentTagName The tag selector of the component (i.e. my-cmp)
+ * @returns The formatted custom event interface name.
+ */
+export function formatCustomEventInterfaceName(componentTagName) {
+    return `${dashToPascalCase(componentTagName)}CustomEvent`;
+}
 const EXTENDED_PATH_REGEX = /^\\\\\?\\/;
 const NON_ASCII_REGEX = /[^\x00-\x80]+/;
 const SLASH_REGEX = /\\/g;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/angular-output-target",
-  "version": "0.6.1-dev.11650996582.1590f5aa",
+  "version": "0.6.1-dev.11655499531.137e1d26",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -39,7 +39,7 @@
     "@angular/forms": "8.2.14"
   },
   "peerDependencies": {
-    "@stencil/core": "^2.9.0"
+    "@stencil/core": "^2.16.0"
   },
   "jest": {
     "transform": {
@@ -55,5 +55,5 @@
     ],
     "testURL": "http://localhost"
   },
-  "gitHead": "590f5aa3efd440940921bd016f9333acecc92e1d"
+  "gitHead": "37e1d26a7f4f1fd4c6085af5b4abea974ac4c68b"
 }