@stencil/angular-output-target 0.6.1-dev.11655483906.1e51ded4 → 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

@@ -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(`  /**
@@ -66,9 +72,11 @@ export const createComponentDefinition = (componentCorePackage, distTypesDir, ro
          * 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 = [
@@ -82,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

@@ -137,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(`  /**
@@ -162,9 +168,11 @@ const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir,
          * 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 = [
@@ -178,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();
@@ -316,7 +325,7 @@ 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);
     /**

package/dist/index.js

@@ -129,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(`  /**
@@ -154,9 +160,11 @@ const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir,
          * 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 = [
@@ -170,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();
@@ -308,7 +317,7 @@ 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);
     /**

package/dist/output-angular.js

@@ -39,7 +39,7 @@ 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);
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/angular-output-target",
-  "version": "0.6.1-dev.11655483906.1e51ded4",
+  "version": "0.6.1-dev.11655499531.137e1d26",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -55,5 +55,5 @@
     ],
     "testURL": "http://localhost"
   },
-  "gitHead": "e51ded46a46fbcd7d0f191a9dc237bef362aab9f"
+  "gitHead": "37e1d26a7f4f1fd4c6085af5b4abea974ac4c68b"
 }