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

Comparing version 0.6.1-dev.11664502361.139bc7c5 to 0.6.1-dev.11667512184.13935f80

angular-component-lib/utils.ts

@@ -39,2 +39,24 @@ /* eslint-disable */
 
+/**
+ * The Angular property name that contains the object of metadata properties
+ * for the component added by the Angular compiler.
+ */
+const NG_COMP_DEF = 'ɵcmp';
+
+export const clearAngularOutputBindings = (cls: any) => {
+  if (typeof cls === 'function' && cls !== null) {
+    if (cls.prototype.constructor) {
+      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
@@ -49,2 +71,4 @@ export function ProxyCmp(opts: { defineCustomElementFn?: () => void; inputs?: any; methods?: any }) {
 
+    clearAngularOutputBindings(cls);
+
     if (inputs) {
@@ -51,0 +75,0 @@ proxyInputs(cls, inputs);

dist/generate-angular-component.d.ts

@@ -12,3 +12,3 @@ import type { ComponentCompilerEvent } from '@stencil/core/internal';
  */
-export declare const createAngularComponentDefinition: (tagName: string, inputs: readonly string[], outputs: readonly string[], methods: readonly string[], includeImportCustomElements?: boolean) => string;
+export declare const createAngularComponentDefinition: (tagName: string, inputs: readonly string[], outputs: readonly ComponentCompilerEvent[], methods: readonly string[], includeImportCustomElements?: boolean) => string;
 /**
@@ -15,0 +15,0 @@ * Creates the component interface type definition.

dist/generate-angular-component.js

@@ -20,5 +20,7 @@ import { createComponentEventTypeImports, dashToPascalCase, formatToQuotedList } from './utils';
     // Formats the output strings into comma separated, single quoted values.
-    const formattedOutputs = formatToQuotedList(outputs);
+    const formattedOutputs = formatToQuotedList(outputs.map((event) => event.name));
     // Formats the method strings into comma separated, single quoted values.
     const formattedMethods = formatToQuotedList(methods);
+    // The collection of @Output() decorators for the component.
+    const outputDecorators = outputs.map((event) => createAngularOutputDecorator(tagName, event));
     const proxyCmpOptions = [];
@@ -35,30 +37,52 @@ if (includeImportCustomElements) {
     }
-    /**
-     * Notes on the generated output:
-     * - We disable @angular-eslint/no-inputs-metadata-property, so that
-     * Angular does not complain about the inputs property. The output target
-     * uses the inputs property to define the inputs of the component instead of
-     * having to use the @Input decorator (and manually define the type and default value).
-     */
-    const output = `@ProxyCmp({${proxyCmpOptions.join(',')}\n})
-@Component({
-  selector: '${tagName}',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: [${formattedInputs}],
-})
-export class ${tagNameAsPascal} {
-  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;${hasOutputs
-        ? `
-    proxyOutputs(this, this.el, [${formattedOutputs}]);`
-        : ''}
-  }
-}`;
-    return output;
+    const output = [
+        `@ProxyCmp({${proxyCmpOptions.join(',')}\n})`,
+        `@Component({`,
+        `  selector: '${tagName}',`,
+        `  changeDetection: ChangeDetectionStrategy.OnPush,`,
+        `  template: '<ng-content></ng-content>',`,
+        /**
+         * We disable @angular-eslint/no-inputs-metadata-property, so that
+         * Angular does not complain about the inputs property. The output target
+         * uses the inputs property to define the inputs of the component instead of
+         * having to use the @Input decorator (and manually define the type and default value).
+         */
+        `  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property`,
+        `  inputs: [${formattedInputs}],`,
+        `})`,
+        `export class ${tagNameAsPascal} {`,
+    ];
+    if (outputDecorators.length > 0) {
+        for (let outputDecorator of outputDecorators) {
+            output.push(`  ${outputDecorator}`);
+        }
+    }
+    output.push(`  protected el: HTMLElement;`);
+    output.push(`  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {`);
+    output.push(`    c.detach();`);
+    output.push(`    this.el = r.nativeElement;`);
+    if (hasOutputs) {
+        output.push(`    proxyOutputs(this, this.el, [${formattedOutputs}]);`);
+    }
+    output.push(`  }`);
+    output.push(`}`);
+    return output.join('\n');
 };
 /**
+ * Creates an `@Output()` decorator for a custom event on a Stencil component.
+ * @param tagName The tag name of the component.
+ * @param event The Stencil component event.
+ * @returns The `@Output()` decorator as a string.
+ */
+const createAngularOutputDecorator = (tagName, event) => {
+    const tagNameAsPascal = dashToPascalCase(tagName);
+    // When updating to Stencil 3.0, the component custom event generic will be
+    // exported by default and can be referenced here with:
+    // const customEvent = `${tagNameAsPascal}CustomEvent`;
+    const customEventType = `CustomEvent`;
+    const eventType = formatOutputType(tagNameAsPascal, event);
+    const outputType = `${customEventType}<${eventType}>`;
+    return `@Output() ${event.name}: EventEmitter<${outputType}> = new EventEmitter();`;
+};
+/**
  * Sanitizes and formats the component event type.
@@ -79,5 +103,6 @@ * @param componentClassName The class name of the component (e.g. 'MyComponent')
         const renamedType = `I${componentClassName}${type}`;
-        return renamedType
+        return (renamedType
             .replace(new RegExp(`^${src}$`, 'g'), `${dst}`)
-            .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (v, p1, p2) => [p1, dst, p2].join(''));
+            // Capture all instances of the `src` field surrounded by non-word characters on each side and join them.
+            .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (v, p1, p2) => [p1, dst, p2].join('')));
     }, event.complexType.original
@@ -84,0 +109,0 @@ .replace(/\n/g, ' ')

dist/generate-angular-directives-file.js

@@ -7,3 +7,3 @@ import { dashToPascalCase, relativeImport } from './utils';
     }
-    const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.proxyDeclarationFile, '.ts');
+    const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.directivesProxyFile, '.ts');
     const directives = components
@@ -10,0 +10,0 @@ .map((cmpMeta) => dashToPascalCase(cmpMeta.tagName))

dist/generate-value-accessors.js

@@ -7,3 +7,3 @@ import { EOL } from 'os';
     }
-    const targetDir = path.dirname(outputTarget.proxyDeclarationFile);
+    const targetDir = path.dirname(outputTarget.directivesProxyFile);
     const normalizedValueAccessors = outputTarget.valueAccessorConfigs.reduce((allAccessors, va) => {
@@ -10,0 +10,0 @@ const elementSelectors = Array.isArray(va.elementSelectors) ? va.elementSelectors : [va.elementSelectors];

dist/index.cjs.js

@@ -151,5 +151,7 @@ 'use strict';
     // Formats the output strings into comma separated, single quoted values.
-    const formattedOutputs = formatToQuotedList(outputs);
+    const formattedOutputs = formatToQuotedList(outputs.map((event) => event.name));
     // Formats the method strings into comma separated, single quoted values.
     const formattedMethods = formatToQuotedList(methods);
+    // The collection of @Output() decorators for the component.
+    const outputDecorators = outputs.map((event) => createAngularOutputDecorator(tagName, event));
     const proxyCmpOptions = [];
@@ -166,30 +168,52 @@ if (includeImportCustomElements) {
     }
-    /**
-     * Notes on the generated output:
-     * - We disable @angular-eslint/no-inputs-metadata-property, so that
-     * Angular does not complain about the inputs property. The output target
-     * uses the inputs property to define the inputs of the component instead of
-     * having to use the @Input decorator (and manually define the type and default value).
-     */
-    const output = `@ProxyCmp({${proxyCmpOptions.join(',')}\n})
-@Component({
-  selector: '${tagName}',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: [${formattedInputs}],
-})
-export class ${tagNameAsPascal} {
-  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;${hasOutputs
-        ? `
-    proxyOutputs(this, this.el, [${formattedOutputs}]);`
-        : ''}
-  }
-}`;
-    return output;
+    const output = [
+        `@ProxyCmp({${proxyCmpOptions.join(',')}\n})`,
+        `@Component({`,
+        `  selector: '${tagName}',`,
+        `  changeDetection: ChangeDetectionStrategy.OnPush,`,
+        `  template: '<ng-content></ng-content>',`,
+        /**
+         * We disable @angular-eslint/no-inputs-metadata-property, so that
+         * Angular does not complain about the inputs property. The output target
+         * uses the inputs property to define the inputs of the component instead of
+         * having to use the @Input decorator (and manually define the type and default value).
+         */
+        `  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property`,
+        `  inputs: [${formattedInputs}],`,
+        `})`,
+        `export class ${tagNameAsPascal} {`,
+    ];
+    if (outputDecorators.length > 0) {
+        for (let outputDecorator of outputDecorators) {
+            output.push(`  ${outputDecorator}`);
+        }
+    }
+    output.push(`  protected el: HTMLElement;`);
+    output.push(`  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {`);
+    output.push(`    c.detach();`);
+    output.push(`    this.el = r.nativeElement;`);
+    if (hasOutputs) {
+        output.push(`    proxyOutputs(this, this.el, [${formattedOutputs}]);`);
+    }
+    output.push(`  }`);
+    output.push(`}`);
+    return output.join('\n');
 };
 /**
+ * Creates an `@Output()` decorator for a custom event on a Stencil component.
+ * @param tagName The tag name of the component.
+ * @param event The Stencil component event.
+ * @returns The `@Output()` decorator as a string.
+ */
+const createAngularOutputDecorator = (tagName, event) => {
+    const tagNameAsPascal = dashToPascalCase(tagName);
+    // When updating to Stencil 3.0, the component custom event generic will be
+    // exported by default and can be referenced here with:
+    // const customEvent = `${tagNameAsPascal}CustomEvent`;
+    const customEventType = `CustomEvent`;
+    const eventType = formatOutputType(tagNameAsPascal, event);
+    const outputType = `${customEventType}<${eventType}>`;
+    return `@Output() ${event.name}: EventEmitter<${outputType}> = new EventEmitter();`;
+};
+/**
  * Sanitizes and formats the component event type.
@@ -210,5 +234,6 @@ * @param componentClassName The class name of the component (e.g. 'MyComponent')
         const renamedType = `I${componentClassName}${type}`;
-        return renamedType
+        return (renamedType
             .replace(new RegExp(`^${src}$`, 'g'), `${dst}`)
-            .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (v, p1, p2) => [p1, dst, p2].join(''));
+            // Capture all instances of the `src` field surrounded by non-word characters on each side and join them.
+            .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (v, p1, p2) => [p1, dst, p2].join('')));
     }, event.complexType.original
@@ -268,3 +293,3 @@ .replace(/\n/g, ' ')
     }
-    const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.proxyDeclarationFile, '.ts');
+    const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.directivesProxyFile, '.ts');
     const directives = components
@@ -288,3 +313,3 @@ .map((cmpMeta) => dashToPascalCase(cmpMeta.tagName))
     }
-    const targetDir = path__default['default'].dirname(outputTarget.proxyDeclarationFile);
+    const targetDir = path__default['default'].dirname(outputTarget.directivesProxyFile);
     const normalizedValueAccessors = outputTarget.valueAccessorConfigs.reduce((allAccessors, va) => {
@@ -346,3 +371,3 @@ const elementSelectors = Array.isArray(va.elementSelectors) ? va.elementSelectors : [va.elementSelectors];
     await Promise.all([
-        compilerCtx.fs.writeFile(outputTarget.proxyDeclarationFile, finalText),
+        compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
         copyResources$1(config, outputTarget),
@@ -361,3 +386,3 @@ generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
     const srcDirectory = path__default['default'].join(__dirname, '..', 'angular-component-lib');
-    const destDirectory = path__default['default'].join(path__default['default'].dirname(outputTarget.proxyDeclarationFile), 'angular-component-lib');
+    const destDirectory = path__default['default'].join(path__default['default'].dirname(outputTarget.directivesProxyFile), 'angular-component-lib');
     return config.sys.copy([
@@ -375,3 +400,3 @@ {
     const dtsFilePath = path__default['default'].join(rootDir, distTypesDir, GENERATED_DTS);
-    const componentsTypeFile = relativeImport(outputTarget.proxyDeclarationFile, dtsFilePath, '.d.ts');
+    const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
     /**
@@ -387,2 +412,3 @@ * The collection of named imports from @angular/core.
         'NgZone',
+        'Output',
     ];
@@ -444,3 +470,3 @@ /**
         if (cmpMeta.events) {
-            outputs.push(...cmpMeta.events.filter(filterInternalProps).map(mapPropName));
+            outputs.push(...cmpMeta.events.filter(filterInternalProps));
         }
@@ -484,11 +510,8 @@ const methods = [];
     }
-    if (outputTarget.directivesProxyFile !== undefined) {
-        throw new Error('directivesProxyFile has been removed. Use proxyDeclarationFile instead.');
+    if (outputTarget.directivesProxyFile == null) {
+        throw new Error('directivesProxyFile is required. Please set it in the Stencil config.');
     }
-    if (outputTarget.proxyDeclarationFile == null) {
-        throw new Error('proxyDeclarationFile is required. Please set it in the Stencil config.');
+    if (outputTarget.directivesProxyFile && !path__default['default'].isAbsolute(outputTarget.directivesProxyFile)) {
+        results.directivesProxyFile = normalizePath(path__default['default'].join(config.rootDir, outputTarget.directivesProxyFile));
     }
-    if (outputTarget.proxyDeclarationFile && !path__default['default'].isAbsolute(outputTarget.proxyDeclarationFile)) {
-        results.proxyDeclarationFile = normalizePath(path__default['default'].join(config.rootDir, outputTarget.proxyDeclarationFile));
-    }
     if (outputTarget.directivesArrayFile && !path__default['default'].isAbsolute(outputTarget.directivesArrayFile)) {
@@ -495,0 +518,0 @@ results.directivesArrayFile = normalizePath(path__default['default'].join(config.rootDir, outputTarget.directivesArrayFile));

dist/index.js

@@ -143,5 +143,7 @@ import path from 'path';
     // Formats the output strings into comma separated, single quoted values.
-    const formattedOutputs = formatToQuotedList(outputs);
+    const formattedOutputs = formatToQuotedList(outputs.map((event) => event.name));
     // Formats the method strings into comma separated, single quoted values.
     const formattedMethods = formatToQuotedList(methods);
+    // The collection of @Output() decorators for the component.
+    const outputDecorators = outputs.map((event) => createAngularOutputDecorator(tagName, event));
     const proxyCmpOptions = [];
@@ -158,30 +160,52 @@ if (includeImportCustomElements) {
     }
-    /**
-     * Notes on the generated output:
-     * - We disable @angular-eslint/no-inputs-metadata-property, so that
-     * Angular does not complain about the inputs property. The output target
-     * uses the inputs property to define the inputs of the component instead of
-     * having to use the @Input decorator (and manually define the type and default value).
-     */
-    const output = `@ProxyCmp({${proxyCmpOptions.join(',')}\n})
-@Component({
-  selector: '${tagName}',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: [${formattedInputs}],
-})
-export class ${tagNameAsPascal} {
-  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;${hasOutputs
-        ? `
-    proxyOutputs(this, this.el, [${formattedOutputs}]);`
-        : ''}
-  }
-}`;
-    return output;
+    const output = [
+        `@ProxyCmp({${proxyCmpOptions.join(',')}\n})`,
+        `@Component({`,
+        `  selector: '${tagName}',`,
+        `  changeDetection: ChangeDetectionStrategy.OnPush,`,
+        `  template: '<ng-content></ng-content>',`,
+        /**
+         * We disable @angular-eslint/no-inputs-metadata-property, so that
+         * Angular does not complain about the inputs property. The output target
+         * uses the inputs property to define the inputs of the component instead of
+         * having to use the @Input decorator (and manually define the type and default value).
+         */
+        `  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property`,
+        `  inputs: [${formattedInputs}],`,
+        `})`,
+        `export class ${tagNameAsPascal} {`,
+    ];
+    if (outputDecorators.length > 0) {
+        for (let outputDecorator of outputDecorators) {
+            output.push(`  ${outputDecorator}`);
+        }
+    }
+    output.push(`  protected el: HTMLElement;`);
+    output.push(`  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {`);
+    output.push(`    c.detach();`);
+    output.push(`    this.el = r.nativeElement;`);
+    if (hasOutputs) {
+        output.push(`    proxyOutputs(this, this.el, [${formattedOutputs}]);`);
+    }
+    output.push(`  }`);
+    output.push(`}`);
+    return output.join('\n');
 };
 /**
+ * Creates an `@Output()` decorator for a custom event on a Stencil component.
+ * @param tagName The tag name of the component.
+ * @param event The Stencil component event.
+ * @returns The `@Output()` decorator as a string.
+ */
+const createAngularOutputDecorator = (tagName, event) => {
+    const tagNameAsPascal = dashToPascalCase(tagName);
+    // When updating to Stencil 3.0, the component custom event generic will be
+    // exported by default and can be referenced here with:
+    // const customEvent = `${tagNameAsPascal}CustomEvent`;
+    const customEventType = `CustomEvent`;
+    const eventType = formatOutputType(tagNameAsPascal, event);
+    const outputType = `${customEventType}<${eventType}>`;
+    return `@Output() ${event.name}: EventEmitter<${outputType}> = new EventEmitter();`;
+};
+/**
  * Sanitizes and formats the component event type.
@@ -202,5 +226,6 @@ * @param componentClassName The class name of the component (e.g. 'MyComponent')
         const renamedType = `I${componentClassName}${type}`;
-        return renamedType
+        return (renamedType
             .replace(new RegExp(`^${src}$`, 'g'), `${dst}`)
-            .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (v, p1, p2) => [p1, dst, p2].join(''));
+            // Capture all instances of the `src` field surrounded by non-word characters on each side and join them.
+            .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (v, p1, p2) => [p1, dst, p2].join('')));
     }, event.complexType.original
@@ -260,3 +285,3 @@ .replace(/\n/g, ' ')
     }
-    const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.proxyDeclarationFile, '.ts');
+    const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.directivesProxyFile, '.ts');
     const directives = components
@@ -280,3 +305,3 @@ .map((cmpMeta) => dashToPascalCase(cmpMeta.tagName))
     }
-    const targetDir = path.dirname(outputTarget.proxyDeclarationFile);
+    const targetDir = path.dirname(outputTarget.directivesProxyFile);
     const normalizedValueAccessors = outputTarget.valueAccessorConfigs.reduce((allAccessors, va) => {
@@ -338,3 +363,3 @@ const elementSelectors = Array.isArray(va.elementSelectors) ? va.elementSelectors : [va.elementSelectors];
     await Promise.all([
-        compilerCtx.fs.writeFile(outputTarget.proxyDeclarationFile, finalText),
+        compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
         copyResources$1(config, outputTarget),
@@ -353,3 +378,3 @@ generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
     const srcDirectory = path.join(__dirname, '..', 'angular-component-lib');
-    const destDirectory = path.join(path.dirname(outputTarget.proxyDeclarationFile), 'angular-component-lib');
+    const destDirectory = path.join(path.dirname(outputTarget.directivesProxyFile), 'angular-component-lib');
     return config.sys.copy([
@@ -367,3 +392,3 @@ {
     const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
-    const componentsTypeFile = relativeImport(outputTarget.proxyDeclarationFile, dtsFilePath, '.d.ts');
+    const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
     /**
@@ -379,2 +404,3 @@ * The collection of named imports from @angular/core.
         'NgZone',
+        'Output',
     ];
@@ -436,3 +462,3 @@ /**
         if (cmpMeta.events) {
-            outputs.push(...cmpMeta.events.filter(filterInternalProps).map(mapPropName));
+            outputs.push(...cmpMeta.events.filter(filterInternalProps));
         }
@@ -476,11 +502,8 @@ const methods = [];
     }
-    if (outputTarget.directivesProxyFile !== undefined) {
-        throw new Error('directivesProxyFile has been removed. Use proxyDeclarationFile instead.');
+    if (outputTarget.directivesProxyFile == null) {
+        throw new Error('directivesProxyFile is required. Please set it in the Stencil config.');
     }
-    if (outputTarget.proxyDeclarationFile == null) {
-        throw new Error('proxyDeclarationFile is required. Please set it in the Stencil config.');
+    if (outputTarget.directivesProxyFile && !path.isAbsolute(outputTarget.directivesProxyFile)) {
+        results.directivesProxyFile = normalizePath(path.join(config.rootDir, outputTarget.directivesProxyFile));
     }
-    if (outputTarget.proxyDeclarationFile && !path.isAbsolute(outputTarget.proxyDeclarationFile)) {
-        results.proxyDeclarationFile = normalizePath(path.join(config.rootDir, outputTarget.proxyDeclarationFile));
-    }
     if (outputTarget.directivesArrayFile && !path.isAbsolute(outputTarget.directivesArrayFile)) {
@@ -487,0 +510,0 @@ results.directivesArrayFile = normalizePath(path.join(config.rootDir, outputTarget.directivesArrayFile));

dist/output-angular.js

@@ -12,3 +12,3 @@ import path from 'path';
     await Promise.all([
-        compilerCtx.fs.writeFile(outputTarget.proxyDeclarationFile, finalText),
+        compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
         copyResources(config, outputTarget),
@@ -27,3 +27,3 @@ generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
     const srcDirectory = path.join(__dirname, '..', 'angular-component-lib');
-    const destDirectory = path.join(path.dirname(outputTarget.proxyDeclarationFile), 'angular-component-lib');
+    const destDirectory = path.join(path.dirname(outputTarget.directivesProxyFile), 'angular-component-lib');
     return config.sys.copy([
@@ -41,3 +41,3 @@ {
     const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
-    const componentsTypeFile = relativeImport(outputTarget.proxyDeclarationFile, dtsFilePath, '.d.ts');
+    const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
     /**
@@ -53,2 +53,3 @@ * The collection of named imports from @angular/core.
         'NgZone',
+        'Output',
     ];
@@ -110,3 +111,3 @@ /**
         if (cmpMeta.events) {
-            outputs.push(...cmpMeta.events.filter(filterInternalProps).map(mapPropName));
+            outputs.push(...cmpMeta.events.filter(filterInternalProps));
         }
@@ -113,0 +114,0 @@ const methods = [];

dist/plugin.js

@@ -21,11 +21,8 @@ import { normalizePath } from './utils';
     }
-    if (outputTarget.directivesProxyFile !== undefined) {
-        throw new Error('directivesProxyFile has been removed. Use proxyDeclarationFile instead.');
+    if (outputTarget.directivesProxyFile == null) {
+        throw new Error('directivesProxyFile is required. Please set it in the Stencil config.');
     }
-    if (outputTarget.proxyDeclarationFile == null) {
-        throw new Error('proxyDeclarationFile is required. Please set it in the Stencil config.');
+    if (outputTarget.directivesProxyFile && !path.isAbsolute(outputTarget.directivesProxyFile)) {
+        results.directivesProxyFile = normalizePath(path.join(config.rootDir, outputTarget.directivesProxyFile));
     }
-    if (outputTarget.proxyDeclarationFile && !path.isAbsolute(outputTarget.proxyDeclarationFile)) {
-        results.proxyDeclarationFile = normalizePath(path.join(config.rootDir, outputTarget.proxyDeclarationFile));
-    }
     if (outputTarget.directivesArrayFile && !path.isAbsolute(outputTarget.directivesArrayFile)) {
@@ -32,0 +29,0 @@ results.directivesArrayFile = normalizePath(path.join(config.rootDir, outputTarget.directivesArrayFile));

dist/types.d.ts

@@ -8,12 +8,8 @@ export interface OutputTargetAngular {
     /**
-     * @deprecated Use `proxyDeclarationFile` instead. This property has been replaced.
+     * The path to the proxy file that will be generated. This can be an absolute path
+     * or a relative path from the root directory of the Stencil library.
      */
-    directivesProxyFile?: string;
+    directivesProxyFile: string;
     directivesArrayFile?: string;
     directivesUtilsFile?: string;
-    /**
-     * The path to the proxy file that will be generated. This can be an absolute path
-     * or a relative path from the root directory of the Stencil library.
-     */
-    proxyDeclarationFile: string;
     valueAccessorConfigs?: ValueAccessorConfig[];
@@ -20,0 +16,0 @@ excludeComponents?: string[];

package.json

 {
   "name": "@stencil/angular-output-target",
-  "version": "0.6.1-dev.11664502361.139bc7c5",
+  "version": "0.6.1-dev.11667512184.13935f80",
   "description": "Angular output target for @stencil/core components.",
@@ -61,3 +61,3 @@ "main": "dist/index.cjs.js",
   },
-  "gitHead": "39bc7c5aab00038b7b440f51d510010f506a1c54"
+  "gitHead": "3935f8069bb24eea156c4c5901c94357b302f1f5"
 }

README.md

@@ -30,3 +30,3 @@ # @stencil/angular-output-target
       componentCorePackage: 'component-library',
-      proxyDeclarationFile: '../component-library-angular/src/directives/proxies.ts',
+      directivesProxyFile: '../component-library-angular/src/directives/proxies.ts',
       directivesArrayFile: '../component-library-angular/src/directives/index.ts',
@@ -47,3 +47,3 @@ }),
 | `componentCorePackage`        | The NPM package name of your Stencil component library. This package is used as a dependency for your Angular wrappers.                                                                                                                                                                                                          |
-| `proxyDeclarationFile`         | The output file of all the component wrappers generated by the output target. This file path should point to a location within your Angular library/project.                                                                                                                                                                     |
+| `directivesProxyFile`         | The output file of all the component wrappers generated by the output target. This file path should point to a location within your Angular library/project.                                                                                                                                                                     |
 | `directivesArrayFile`         | The output file of a constant of all the generated component wrapper classes. Used for easily declaring and exporting the generated components from an `NgModule`. This file path should point to a location within your Angular library/project.                                                                                |
@@ -50,0 +50,0 @@ | `valueAccessorConfigs`        | The configuration object for how individual web components behave with Angular control value accessors.                                                                                                                                                                                                                          |

No alert changes

Improved metrics

Total package byte prevSize

92024

increased by5.33%

Lines of code

1837

increased by4.91%

No dependency changes