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

Comparing version 0.6.1-dev.11655499531.137e1d26 to 0.6.1-dev.11657573317.16e0205c

angular-component-lib/utils.ts

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

dist/generate-angular-component.js

@@ -1,2 +0,2 @@
-import { dashToPascalCase, formatCustomEventInterfaceName, normalizePath } from './utils';
+import { dashToPascalCase, normalizePath } from './utils';
 export const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir, includeImportCustomElements = false, customElementsDir = 'components') => (cmpMeta) => {
@@ -44,8 +44,2 @@ // Collect component meta
     ];
-    /**
-     * The list of @Output() bindings to generate for the component.
-     */
-    const outputBindings = [
-        ''
-    ];
     // Generate outputs
@@ -69,14 +63,6 @@ outputs.forEach((output, index) => {
             .replace(/,\s*/g, ', '));
-        /**
-         * 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()}>>();`);
+        componentEvents.push(`  ${output.name}: EventEmitter<CustomEvent<${outputTypeRemapped.trim()}>>;`);
         if (index === outputs.length - 1) {
             // Empty line to push end `}` to new line
             componentEvents.push('\n');
-            outputBindings.push('\n');
         }
@@ -95,3 +81,2 @@ });
     ];
-    lines.push(...outputBindings);
     lines.push('  protected el: HTMLElement;');
@@ -98,0 +83,0 @@ lines.push(`  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {

dist/index.cjs.js

@@ -84,12 +84,2 @@ 'use strict';
 }
-/**
- * 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 = /^\\\\\?\\/;
@@ -141,8 +131,2 @@ const NON_ASCII_REGEX = /[^\x00-\x80]+/;
     ];
-    /**
-     * The list of @Output() bindings to generate for the component.
-     */
-    const outputBindings = [
-        ''
-    ];
     // Generate outputs
@@ -166,14 +150,6 @@ outputs.forEach((output, index) => {
             .replace(/,\s*/g, ', '));
-        /**
-         * 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()}>>();`);
+        componentEvents.push(`  ${output.name}: EventEmitter<CustomEvent<${outputTypeRemapped.trim()}>>;`);
         if (index === outputs.length - 1) {
             // Empty line to push end `}` to new line
             componentEvents.push('\n');
-            outputBindings.push('\n');
         }
@@ -192,3 +168,2 @@ });
     ];
-    lines.push(...outputBindings);
     lines.push('  protected el: HTMLElement;');
@@ -332,5 +307,4 @@ lines.push(`  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
 /* auto-generated angular directive proxies */
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone, Output } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';
 import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
-    const importLocation = getImportPackageName(outputTarget, componentsTypeFile);
     /**
@@ -343,17 +317,7 @@ * Generate JSX import type from correct location.
     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`;
     };
-    /**
-     * 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,
-    ];
+    const typeImports = generateTypeImports();
     let sourceImports = '';
@@ -376,3 +340,3 @@ /**
         imports,
-        typeImports.join('\n'),
+        typeImports,
         sourceImports,
@@ -385,10 +349,2 @@ components
 }
-/**
- * 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';
@@ -395,0 +351,0 @@ const IMPORT_TYPES = 'Components';

dist/index.js

@@ -76,12 +76,2 @@ import path from 'path';
 }
-/**
- * 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 = /^\\\\\?\\/;
@@ -133,8 +123,2 @@ const NON_ASCII_REGEX = /[^\x00-\x80]+/;
     ];
-    /**
-     * The list of @Output() bindings to generate for the component.
-     */
-    const outputBindings = [
-        ''
-    ];
     // Generate outputs
@@ -158,14 +142,6 @@ outputs.forEach((output, index) => {
             .replace(/,\s*/g, ', '));
-        /**
-         * 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()}>>();`);
+        componentEvents.push(`  ${output.name}: EventEmitter<CustomEvent<${outputTypeRemapped.trim()}>>;`);
         if (index === outputs.length - 1) {
             // Empty line to push end `}` to new line
             componentEvents.push('\n');
-            outputBindings.push('\n');
         }
@@ -184,3 +160,2 @@ });
     ];
-    lines.push(...outputBindings);
     lines.push('  protected el: HTMLElement;');
@@ -324,5 +299,4 @@ lines.push(`  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
 /* auto-generated angular directive proxies */
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone, Output } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';
 import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
-    const importLocation = getImportPackageName(outputTarget, componentsTypeFile);
     /**
@@ -335,17 +309,7 @@ * Generate JSX import type from correct location.
     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`;
     };
-    /**
-     * 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,
-    ];
+    const typeImports = generateTypeImports();
     let sourceImports = '';
@@ -368,3 +332,3 @@ /**
         imports,
-        typeImports.join('\n'),
+        typeImports,
         sourceImports,
@@ -377,10 +341,2 @@ components
 }
-/**
- * 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';
@@ -387,0 +343,0 @@ const IMPORT_TYPES = 'Components';

dist/output-angular.js

 import path from 'path';
-import { relativeImport, normalizePath, sortBy, readPackageJson, dashToPascalCase, formatCustomEventInterfaceName } from './utils';
+import { relativeImport, normalizePath, sortBy, readPackageJson, dashToPascalCase } from './utils';
 import { createComponentDefinition } from './generate-angular-component';
@@ -42,5 +42,4 @@ import { generateAngularDirectivesFile } from './generate-angular-directives-file';
 /* auto-generated angular directive proxies */
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone, Output } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';
 import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
-    const importLocation = getImportPackageName(outputTarget, componentsTypeFile);
     /**
@@ -53,17 +52,7 @@ * Generate JSX import type from correct location.
     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`;
     };
-    /**
-     * 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,
-    ];
+    const typeImports = generateTypeImports();
     let sourceImports = '';
@@ -86,3 +75,3 @@ /**
         imports,
-        typeImports.join('\n'),
+        typeImports,
         sourceImports,
@@ -95,11 +84,3 @@ components
 }
-/**
- * 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';

dist/utils.d.ts

@@ -10,9 +10,1 @@ import { Config } from '@stencil/core/internal';
 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;

dist/utils.js

@@ -77,14 +77,4 @@ import path from 'path';
 }
-/**
- * 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.json

 {
   "name": "@stencil/angular-output-target",
-  "version": "0.6.1-dev.11655499531.137e1d26",
+  "version": "0.6.1-dev.11657573317.16e0205c",
   "description": "Angular output target for @stencil/core components.",
@@ -42,3 +42,3 @@ "main": "dist/index.cjs.js",
   "peerDependencies": {
-    "@stencil/core": "^2.16.0"
+    "@stencil/core": "^2.9.0"
   },
@@ -59,3 +59,3 @@ "jest": {
   },
-  "gitHead": "37e1d26a7f4f1fd4c6085af5b4abea974ac4c68b"
+  "gitHead": "6e0205c1e021addd4683bd5fc976cc6c9a126c3a"
 }

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

Worsened metrics

Total package byte prevSize

68962

decreased by-8.68%

Lines of code

1354

decreased by-10.15%

No dependency changes