@stencil/angular-output-target 0.6.1-dev.11655499531.137e1d26 → 0.6.1-dev.11657573317.16e0205c

package/angular-component-lib/utils.ts

@@ -4,7 +4,6 @@ import { fromEvent } from 'rxjs';
 
 export const proxyInputs = (Cmp: any, inputs: string[]) => {
   const Prototype = Cmp.prototype;
-
   inputs.forEach(item => {
     Object.defineProperty(Prototype, item, {
       get() {
@@ -43,20 +42,6 @@ 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) {
@@ -66,8 +51,6 @@ 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, formatCustomEventInterfaceName, normalizePath } from './utils';
+import { dashToPascalCase, normalizePath } from './utils';
 export const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir, includeImportCustomElements = false, customElementsDir = 'components') => (cmpMeta) => {
     // Collect component meta
     const inputs = [
@@ -41,12 +41,6 @@ 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(`  /**
@@ -65,18 +59,10 @@ export const createComponentDefinition = (componentCorePackage, distTypesDir, ro
             .replace(/\n/g, ' ')
             .replace(/\s{2,}/g, ' ')
             .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');
         }
     });
     const lines = [
@@ -90,7 +76,6 @@ ${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,16 +81,6 @@ 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;
@@ -137,12 +127,6 @@ 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(`  /**
@@ -161,18 +145,10 @@ const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir,
             .replace(/\n/g, ' ')
             .replace(/\s{2,}/g, ' ')
             .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');
         }
     });
     const lines = [
@@ -186,7 +162,6 @@ ${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();
@@ -325,9 +300,8 @@ 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, 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);
     /**
      * Generate JSX import type from correct location.
      * When using custom elements build, we need to import from
@@ -335,21 +309,11 @@ 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`;
     };
-    /**
-     * 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 = '';
     /**
      * Build an array of Custom Elements build imports and namespace them
@@ -367,7 +331,7 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
     }
     const final = [
         imports,
-        typeImports.join('\n'),
+        typeImports,
         sourceImports,
         components
             .map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir, outputTarget.includeImportCustomElements, outputTarget.customElementsDir))
@@ -375,14 +339,6 @@ 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,16 +73,6 @@ 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;
@@ -129,12 +119,6 @@ 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(`  /**
@@ -153,18 +137,10 @@ const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir,
             .replace(/\n/g, ' ')
             .replace(/\s{2,}/g, ' ')
             .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');
         }
     });
     const lines = [
@@ -178,7 +154,6 @@ ${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();
@@ -317,9 +292,8 @@ 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, 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);
     /**
      * Generate JSX import type from correct location.
      * When using custom elements build, we need to import from
@@ -327,21 +301,11 @@ 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`;
     };
-    /**
-     * 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 = '';
     /**
      * Build an array of Custom Elements build imports and namespace them
@@ -359,7 +323,7 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
     }
     const final = [
         imports,
-        typeImports.join('\n'),
+        typeImports,
         sourceImports,
         components
             .map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir, outputTarget.includeImportCustomElements, outputTarget.customElementsDir))
@@ -367,14 +331,6 @@ 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, formatCustomEventInterfaceName } from './utils';
+import { relativeImport, normalizePath, sortBy, readPackageJson, dashToPascalCase } from './utils';
 import { createComponentDefinition } from './generate-angular-component';
 import { generateAngularDirectivesFile } from './generate-angular-directives-file';
 import generateValueAccessors from './generate-value-accessors';
@@ -39,9 +39,8 @@ 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, 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);
     /**
      * Generate JSX import type from correct location.
      * When using custom elements build, we need to import from
@@ -49,21 +48,11 @@ 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`;
     };
-    /**
-     * 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 = '';
     /**
      * Build an array of Custom Elements build imports and namespace them
@@ -81,7 +70,7 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
     }
     const final = [
         imports,
-        typeImports.join('\n'),
+        typeImports,
         sourceImports,
         components
             .map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir, outputTarget.includeImportCustomElements, outputTarget.customElementsDir))
@@ -89,13 +78,5 @@ 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,11 +7,3 @@ 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,16 +74,6 @@ 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.11655499531.137e1d26",
+  "version": "0.6.1-dev.11657573317.16e0205c",
   "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.16.0"
+    "@stencil/core": "^2.9.0"
   },
   "jest": {
     "transform": {
@@ -55,5 +55,5 @@
     ],
     "testURL": "http://localhost"
   },
-  "gitHead": "37e1d26a7f4f1fd4c6085af5b4abea974ac4c68b"
+  "gitHead": "6e0205c1e021addd4683bd5fc976cc6c9a126c3a"
 }