@stencil/angular-output-target - npm Package Compare versions

Comparing version 0.6.1-dev.11655483906.1e51ded4 to 0.6.1-dev.11655499531.137e1d26

angular-component-lib/utils.ts

@@ -7,2 +7,3 @@ /* eslint-disable */
   const Prototype = Cmp.prototype;
+
   inputs.forEach(item => {
@@ -46,2 +47,16 @@ Object.defineProperty(Prototype, item, {
 
+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
@@ -56,2 +71,4 @@ export function ProxyCmp(opts: { defineCustomElementFn?: () => void, inputs?: any; methods?: any }) {
 
+    clearAngularOutputBindings(cls);
+
     if (inputs) {
@@ -58,0 +75,0 @@ proxyInputs(cls, inputs);

dist/generate-angular-component.js

@@ -44,2 +44,8 @@ import { dashToPascalCase, formatCustomEventInterfaceName, normalizePath } from './utils';
     ];
+    /**
+     * The list of @Output() bindings to generate for the component.
+     */
+    const outputBindings = [
+        ''
+    ];
     // Generate outputs
@@ -70,5 +76,7 @@ outputs.forEach((output, index) => {
         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');
         }
@@ -87,2 +95,3 @@ });
     ];
+    lines.push(...outputBindings);
     lines.push('  protected el: HTMLElement;');
@@ -89,0 +98,0 @@ lines.push(`  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {

dist/index.cjs.js

@@ -140,2 +140,8 @@ 'use strict';
     ];
+    /**
+     * The list of @Output() bindings to generate for the component.
+     */
+    const outputBindings = [
+        ''
+    ];
     // Generate outputs
@@ -166,5 +172,7 @@ outputs.forEach((output, index) => {
         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');
         }
@@ -183,2 +191,3 @@ });
     ];
+    lines.push(...outputBindings);
     lines.push('  protected el: HTMLElement;');
@@ -322,3 +331,3 @@ lines.push(`  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
 /* 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`;
@@ -325,0 +334,0 @@ const importLocation = getImportPackageName(outputTarget, componentsTypeFile);

dist/index.js

@@ -132,2 +132,8 @@ import path from 'path';
     ];
+    /**
+     * The list of @Output() bindings to generate for the component.
+     */
+    const outputBindings = [
+        ''
+    ];
     // Generate outputs
@@ -158,5 +164,7 @@ outputs.forEach((output, index) => {
         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');
         }
@@ -175,2 +183,3 @@ });
     ];
+    lines.push(...outputBindings);
     lines.push('  protected el: HTMLElement;');
@@ -314,3 +323,3 @@ lines.push(`  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
 /* 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`;
@@ -317,0 +326,0 @@ const importLocation = getImportPackageName(outputTarget, componentsTypeFile);

dist/output-angular.js

@@ -42,3 +42,3 @@ import path from 'path';
 /* 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`;
@@ -45,0 +45,0 @@ const importLocation = getImportPackageName(outputTarget, componentsTypeFile);

package.json

 {
   "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.",
@@ -58,3 +58,3 @@ "main": "dist/index.cjs.js",
   },
-  "gitHead": "e51ded46a46fbcd7d0f191a9dc237bef362aab9f"
+  "gitHead": "37e1d26a7f4f1fd4c6085af5b4abea974ac4c68b"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

75519

increased by2.22%

Lines of code

1507

increased by2.73%

No dependency changes