@stencil/angular-output-target 0.6.1-dev.11662577182.1c45c8de → 0.6.1-dev.11667512184.13935f80

package/README.md

@@ -27,7 +27,7 @@ export const config: Config = {
   outputTargets: [
     angularOutputTarget({
       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',
     }),
     {
@@ -43,7 +43,7 @@ export const config: Config = {
 | Property                      | Description                                                                                                                                                                                                                                                                                                                      |
 | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `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.                                                                                |
 | `valueAccessorConfigs`        | The configuration object for how individual web components behave with Angular control value accessors.                                                                                                                                                                                                                          |
 | `excludeComponents`           | An array of tag names to exclude from generating component wrappers for. This is helpful when have a custom framework implementation of a specific component or need to extend the base component wrapper behavior.                                                                                                              |

package/angular-component-lib/utils.ts

@@ -36,6 +36,28 @@ export const defineCustomElement = (tagName: string, customElement: any) => {
   }
 };
 
+/**
+ * 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
 export function ProxyCmp(opts: { defineCustomElementFn?: () => void; inputs?: any; methods?: any }) {
   const decorator = function (cls: any) {
@@ -45,6 +67,8 @@ export function ProxyCmp(opts: { defineCustomElementFn?: () => void; inputs?: an
       defineCustomElementFn();
     }
 
+    clearAngularOutputBindings(cls);
+
     if (inputs) {
       proxyInputs(cls, inputs);
     }

package/dist/generate-angular-component.d.ts

@@ -9,7 +9,7 @@ import type { ComponentCompilerEvent } from '@stencil/core/internal';
  * @param includeImportCustomElements Whether to define the component as a custom element.
  * @returns The component declaration as a string.
  */
-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;
 /**
  * Creates the component interface type definition.
  * @param tagNameAsPascal The tag name as PascalCase.

package/dist/generate-angular-component.js

@@ -17,9 +17,11 @@ export const createAngularComponentDefinition = (tagName, inputs, outputs, metho
     // Formats the input strings into comma separated, single quoted values.
     const formattedInputs = formatToQuotedList(inputs);
     // 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 = [];
     if (includeImportCustomElements) {
         const defineCustomElementFn = `define${tagNameAsPascal}`;
@@ -31,32 +33,54 @@ export const createAngularComponentDefinition = (tagName, inputs, outputs, metho
     if (hasMethods) {
         proxyCmpOptions.push(`\n  methods: [${formattedMethods}]`);
     }
-    /**
-     * 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.
@@ -74,9 +98,10 @@ const formatOutputType = (componentClassName, event) => {
         .filter(([_, refObject]) => refObject.location === 'local' || refObject.location === 'import')
         .reduce((type, [src, dst]) => {
         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
         .replace(/\n/g, ' ')
         .replace(/\s{2,}/g, ' ')
@@ -105,21 +130,22 @@ const createDocComment = (doc) => {
  * @returns The component interface type definition as a string.
  */
 export const createComponentTypeDefinition = (tagNameAsPascal, events, componentCorePackage, includeImportCustomElements = false, customElementsDir) => {
-    const publicEvents = events.filter(ev => !ev.internal);
+    const publicEvents = events.filter((ev) => !ev.internal);
     const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
         includeImportCustomElements,
         customElementsDir,
     });
-    const eventTypes = publicEvents
-        .map((event) => {
+    const eventTypes = publicEvents.map((event) => {
         const comment = createDocComment(event.docs);
         return `${comment.length > 0 ? `  ${comment}` : ''}
   ${event.name}: EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>;`;
     });
     const interfaceDeclaration = `export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {`;
-    const typeDefinition = (eventTypeImports.length > 0 ? `${eventTypeImports + '\n\n'}` : '')
-        + `${interfaceDeclaration}${eventTypes.length === 0 ? '}' : `
+    const typeDefinition = (eventTypeImports.length > 0 ? `${eventTypeImports + '\n\n'}` : '') +
+        `${interfaceDeclaration}${eventTypes.length === 0
+            ? '}'
+            : `
 ${eventTypes.join('\n')}
 }`}`;
     return typeDefinition;

package/dist/generate-angular-directives-file.js

@@ -4,7 +4,7 @@ export function generateAngularDirectivesFile(compilerCtx, components, outputTar
     if (!outputTarget.directivesArrayFile) {
         return Promise.resolve();
     }
-    const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.proxyDeclarationFile, '.ts');
+    const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.directivesProxyFile, '.ts');
     const directives = components
         .map((cmpMeta) => dashToPascalCase(cmpMeta.tagName))
         .map((className) => `d.${className}`)

package/dist/generate-value-accessors.js

@@ -4,7 +4,7 @@ export default async function generateValueAccessors(compilerCtx, components, ou
     if (!Array.isArray(outputTarget.valueAccessorConfigs) || outputTarget.valueAccessorConfigs.length === 0) {
         return;
     }
-    const targetDir = path.dirname(outputTarget.proxyDeclarationFile);
+    const targetDir = path.dirname(outputTarget.directivesProxyFile);
     const normalizedValueAccessors = outputTarget.valueAccessorConfigs.reduce((allAccessors, va) => {
         const elementSelectors = Array.isArray(va.elementSelectors) ? va.elementSelectors : [va.elementSelectors];
         const type = va.type;

package/dist/index.cjs.js

@@ -148,9 +148,11 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
     // Formats the input strings into comma separated, single quoted values.
     const formattedInputs = formatToQuotedList(inputs);
     // 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 = [];
     if (includeImportCustomElements) {
         const defineCustomElementFn = `define${tagNameAsPascal}`;
@@ -162,32 +164,54 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
     if (hasMethods) {
         proxyCmpOptions.push(`\n  methods: [${formattedMethods}]`);
     }
-    /**
-     * 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.
@@ -205,9 +229,10 @@ const formatOutputType = (componentClassName, event) => {
         .filter(([_, refObject]) => refObject.location === 'local' || refObject.location === 'import')
         .reduce((type, [src, dst]) => {
         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
         .replace(/\n/g, ' ')
         .replace(/\s{2,}/g, ' ')
@@ -236,21 +261,22 @@ const createDocComment = (doc) => {
  * @returns The component interface type definition as a string.
  */
 const createComponentTypeDefinition = (tagNameAsPascal, events, componentCorePackage, includeImportCustomElements = false, customElementsDir) => {
-    const publicEvents = events.filter(ev => !ev.internal);
+    const publicEvents = events.filter((ev) => !ev.internal);
     const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
         includeImportCustomElements,
         customElementsDir,
     });
-    const eventTypes = publicEvents
-        .map((event) => {
+    const eventTypes = publicEvents.map((event) => {
         const comment = createDocComment(event.docs);
         return `${comment.length > 0 ? `  ${comment}` : ''}
   ${event.name}: EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>;`;
     });
     const interfaceDeclaration = `export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {`;
-    const typeDefinition = (eventTypeImports.length > 0 ? `${eventTypeImports + '\n\n'}` : '')
-        + `${interfaceDeclaration}${eventTypes.length === 0 ? '}' : `
+    const typeDefinition = (eventTypeImports.length > 0 ? `${eventTypeImports + '\n\n'}` : '') +
+        `${interfaceDeclaration}${eventTypes.length === 0
+            ? '}'
+            : `
 ${eventTypes.join('\n')}
 }`}`;
     return typeDefinition;
@@ -261,7 +287,7 @@ function generateAngularDirectivesFile(compilerCtx, components, outputTarget) {
     if (!outputTarget.directivesArrayFile) {
         return Promise.resolve();
     }
-    const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.proxyDeclarationFile, '.ts');
+    const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.directivesProxyFile, '.ts');
     const directives = components
         .map((cmpMeta) => dashToPascalCase(cmpMeta.tagName))
         .map((className) => `d.${className}`)
@@ -280,7 +306,7 @@ async function generateValueAccessors(compilerCtx, components, outputTarget, con
     if (!Array.isArray(outputTarget.valueAccessorConfigs) || outputTarget.valueAccessorConfigs.length === 0) {
         return;
     }
-    const targetDir = path__default['default'].dirname(outputTarget.proxyDeclarationFile);
+    const targetDir = path__default['default'].dirname(outputTarget.directivesProxyFile);
     const normalizedValueAccessors = outputTarget.valueAccessorConfigs.reduce((allAccessors, va) => {
         const elementSelectors = Array.isArray(va.elementSelectors) ? va.elementSelectors : [va.elementSelectors];
         const type = va.type;
@@ -331,30 +357,13 @@ const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
 const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
 const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'`;
 
-/**
- * Creates an Angular module declaration for a component wrapper.
- * @param componentTagName The tag name of the Stencil component.
- * @returns The Angular module declaration as a string.
- */
-const generateAngularModuleForComponent = (componentTagName) => {
-    const tagNameAsPascal = dashToPascalCase(componentTagName);
-    const componentClassName = `${tagNameAsPascal}`;
-    const moduleClassName = `${tagNameAsPascal}Module`;
-    const moduleDefinition = `@NgModule({
-  declarations: [${componentClassName}],
-  exports: [${componentClassName}]
-})
-export class ${moduleClassName} { }`;
-    return moduleDefinition;
-};
-
 async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
     const pkgData = await readPackageJson(config, rootDir);
     const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
     await Promise.all([
-        compilerCtx.fs.writeFile(outputTarget.proxyDeclarationFile, finalText),
+        compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
         copyResources$1(config, outputTarget),
         generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
         generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
@@ -368,7 +377,7 @@ async function copyResources$1(config, outputTarget) {
         throw new Error('stencil is not properly initialized at this step. Notify the developer');
     }
     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([
         {
             src: srcDirectory,
@@ -379,11 +388,9 @@ async function copyResources$1(config, outputTarget) {
     ], srcDirectory);
 }
 function generateProxies(components, pkgData, outputTarget, rootDir) {
-    var _a;
     const distTypesDir = path__default['default'].dirname(pkgData.types);
     const dtsFilePath = path__default['default'].join(rootDir, distTypesDir, GENERATED_DTS);
-    const componentsTypeFile = relativeImport(outputTarget.proxyDeclarationFile, dtsFilePath, '.d.ts');
-    const createSingleComponentAngularModules = (_a = outputTarget.createSingleComponentAngularModules) !== null && _a !== void 0 ? _a : false;
+    const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
     /**
      * The collection of named imports from @angular/core.
      */
@@ -394,14 +401,12 @@ function generateProxies(components, pkgData, outputTarget, rootDir) {
         'ElementRef',
         'EventEmitter',
         'NgZone',
+        'Output',
     ];
     /**
      * The collection of named imports from the angular-component-lib/utils.
      */
     const componentLibImports = ['ProxyCmp', 'proxyOutputs'];
-    if (createSingleComponentAngularModules) {
-        angularCoreImports.push('NgModule');
-    }
     const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
 ${createImportStatement(angularCoreImports, '@angular/core')}
@@ -437,12 +442,6 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         });
         sourceImports = cmpImports.join('\n');
     }
-    if (createSingleComponentAngularModules) {
-        // Generating Angular modules is only supported in the dist-custom-elements build
-        if (!outputTarget.includeImportCustomElements) {
-            throw new Error('Generating single component Angular modules requires the "includeImportCustomElements" option to be set to true.');
-        }
-    }
     const proxyFileOutput = [];
     const filterInternalProps = (prop) => !prop.internal;
     const mapPropName = (prop) => prop.name;
@@ -459,7 +458,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         inputs.sort();
         const outputs = [];
         if (cmpMeta.events) {
-            outputs.push(...cmpMeta.events.filter(filterInternalProps).map(mapPropName));
+            outputs.push(...cmpMeta.events.filter(filterInternalProps));
         }
         const methods = [];
         if (cmpMeta.methods) {
@@ -468,16 +467,11 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         /**
          * For each component, we need to generate:
          * 1. The @Component decorated class
-         * 2. Optionally the @NgModule decorated class (if createSingleComponentAngularModules is true)
-         * 3. The component interface (using declaration merging for types).
+         * 2. The component interface (using declaration merging for types).
          */
         const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, inputs, outputs, methods, includeImportCustomElements);
-        const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
         const componentTypeDefinition = createComponentTypeDefinition(tagNameAsPascal, cmpMeta.events, componentCorePackage, includeImportCustomElements, customElementsDir);
         proxyFileOutput.push(componentDefinition, '\n');
-        if (createSingleComponentAngularModules) {
-            proxyFileOutput.push(moduleDefinition, '\n');
-        }
         proxyFileOutput.push(componentTypeDefinition, '\n');
     }
     const final = [imports, typeImports, sourceImports, ...proxyFileOutput];
@@ -503,14 +497,11 @@ function normalizeOutputTarget(config, outputTarget) {
     if (config.rootDir == null) {
         throw new Error('rootDir is not set and it should be set by stencil itself');
     }
-    if (outputTarget.directivesProxyFile !== undefined) {
-        throw new Error('directivesProxyFile has been removed. Use proxyDeclarationFile instead.');
-    }
-    if (outputTarget.proxyDeclarationFile == null) {
-        throw new Error('proxyDeclarationFile is required. Please set it in the Stencil config.');
+    if (outputTarget.directivesProxyFile == null) {
+        throw new Error('directivesProxyFile is required. Please set it in the Stencil config.');
     }
-    if (outputTarget.proxyDeclarationFile && !path__default['default'].isAbsolute(outputTarget.proxyDeclarationFile)) {
-        results.proxyDeclarationFile = normalizePath(path__default['default'].join(config.rootDir, outputTarget.proxyDeclarationFile));
+    if (outputTarget.directivesProxyFile && !path__default['default'].isAbsolute(outputTarget.directivesProxyFile)) {
+        results.directivesProxyFile = normalizePath(path__default['default'].join(config.rootDir, outputTarget.directivesProxyFile));
     }
     if (outputTarget.directivesArrayFile && !path__default['default'].isAbsolute(outputTarget.directivesArrayFile)) {
         results.directivesArrayFile = normalizePath(path__default['default'].join(config.rootDir, outputTarget.directivesArrayFile));

package/dist/index.js

@@ -140,9 +140,11 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
     // Formats the input strings into comma separated, single quoted values.
     const formattedInputs = formatToQuotedList(inputs);
     // 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 = [];
     if (includeImportCustomElements) {
         const defineCustomElementFn = `define${tagNameAsPascal}`;
@@ -154,32 +156,54 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
     if (hasMethods) {
         proxyCmpOptions.push(`\n  methods: [${formattedMethods}]`);
     }
-    /**
-     * 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.
@@ -197,9 +221,10 @@ const formatOutputType = (componentClassName, event) => {
         .filter(([_, refObject]) => refObject.location === 'local' || refObject.location === 'import')
         .reduce((type, [src, dst]) => {
         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
         .replace(/\n/g, ' ')
         .replace(/\s{2,}/g, ' ')
@@ -228,21 +253,22 @@ const createDocComment = (doc) => {
  * @returns The component interface type definition as a string.
  */
 const createComponentTypeDefinition = (tagNameAsPascal, events, componentCorePackage, includeImportCustomElements = false, customElementsDir) => {
-    const publicEvents = events.filter(ev => !ev.internal);
+    const publicEvents = events.filter((ev) => !ev.internal);
     const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
         includeImportCustomElements,
         customElementsDir,
     });
-    const eventTypes = publicEvents
-        .map((event) => {
+    const eventTypes = publicEvents.map((event) => {
         const comment = createDocComment(event.docs);
         return `${comment.length > 0 ? `  ${comment}` : ''}
   ${event.name}: EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>;`;
     });
     const interfaceDeclaration = `export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {`;
-    const typeDefinition = (eventTypeImports.length > 0 ? `${eventTypeImports + '\n\n'}` : '')
-        + `${interfaceDeclaration}${eventTypes.length === 0 ? '}' : `
+    const typeDefinition = (eventTypeImports.length > 0 ? `${eventTypeImports + '\n\n'}` : '') +
+        `${interfaceDeclaration}${eventTypes.length === 0
+            ? '}'
+            : `
 ${eventTypes.join('\n')}
 }`}`;
     return typeDefinition;
@@ -253,7 +279,7 @@ function generateAngularDirectivesFile(compilerCtx, components, outputTarget) {
     if (!outputTarget.directivesArrayFile) {
         return Promise.resolve();
     }
-    const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.proxyDeclarationFile, '.ts');
+    const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.directivesProxyFile, '.ts');
     const directives = components
         .map((cmpMeta) => dashToPascalCase(cmpMeta.tagName))
         .map((className) => `d.${className}`)
@@ -272,7 +298,7 @@ async function generateValueAccessors(compilerCtx, components, outputTarget, con
     if (!Array.isArray(outputTarget.valueAccessorConfigs) || outputTarget.valueAccessorConfigs.length === 0) {
         return;
     }
-    const targetDir = path.dirname(outputTarget.proxyDeclarationFile);
+    const targetDir = path.dirname(outputTarget.directivesProxyFile);
     const normalizedValueAccessors = outputTarget.valueAccessorConfigs.reduce((allAccessors, va) => {
         const elementSelectors = Array.isArray(va.elementSelectors) ? va.elementSelectors : [va.elementSelectors];
         const type = va.type;
@@ -323,30 +349,13 @@ const VALUE_ACCESSOR_EVENT = `<VALUE_ACCESSOR_EVENT>`;
 const VALUE_ACCESSOR_TARGETATTR = '<VALUE_ACCESSOR_TARGETATTR>';
 const VALUE_ACCESSOR_EVENTTARGETS = `    '(<VALUE_ACCESSOR_EVENT>)': 'handleChangeEvent($event.target.<VALUE_ACCESSOR_TARGETATTR>)'`;
 
-/**
- * Creates an Angular module declaration for a component wrapper.
- * @param componentTagName The tag name of the Stencil component.
- * @returns The Angular module declaration as a string.
- */
-const generateAngularModuleForComponent = (componentTagName) => {
-    const tagNameAsPascal = dashToPascalCase(componentTagName);
-    const componentClassName = `${tagNameAsPascal}`;
-    const moduleClassName = `${tagNameAsPascal}Module`;
-    const moduleDefinition = `@NgModule({
-  declarations: [${componentClassName}],
-  exports: [${componentClassName}]
-})
-export class ${moduleClassName} { }`;
-    return moduleDefinition;
-};
-
 async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
     const pkgData = await readPackageJson(config, rootDir);
     const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
     await Promise.all([
-        compilerCtx.fs.writeFile(outputTarget.proxyDeclarationFile, finalText),
+        compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
         copyResources$1(config, outputTarget),
         generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
         generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
@@ -360,7 +369,7 @@ async function copyResources$1(config, outputTarget) {
         throw new Error('stencil is not properly initialized at this step. Notify the developer');
     }
     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([
         {
             src: srcDirectory,
@@ -371,11 +380,9 @@ async function copyResources$1(config, outputTarget) {
     ], srcDirectory);
 }
 function generateProxies(components, pkgData, outputTarget, rootDir) {
-    var _a;
     const distTypesDir = path.dirname(pkgData.types);
     const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
-    const componentsTypeFile = relativeImport(outputTarget.proxyDeclarationFile, dtsFilePath, '.d.ts');
-    const createSingleComponentAngularModules = (_a = outputTarget.createSingleComponentAngularModules) !== null && _a !== void 0 ? _a : false;
+    const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
     /**
      * The collection of named imports from @angular/core.
      */
@@ -386,14 +393,12 @@ function generateProxies(components, pkgData, outputTarget, rootDir) {
         'ElementRef',
         'EventEmitter',
         'NgZone',
+        'Output',
     ];
     /**
      * The collection of named imports from the angular-component-lib/utils.
      */
     const componentLibImports = ['ProxyCmp', 'proxyOutputs'];
-    if (createSingleComponentAngularModules) {
-        angularCoreImports.push('NgModule');
-    }
     const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
 ${createImportStatement(angularCoreImports, '@angular/core')}
@@ -429,12 +434,6 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         });
         sourceImports = cmpImports.join('\n');
     }
-    if (createSingleComponentAngularModules) {
-        // Generating Angular modules is only supported in the dist-custom-elements build
-        if (!outputTarget.includeImportCustomElements) {
-            throw new Error('Generating single component Angular modules requires the "includeImportCustomElements" option to be set to true.');
-        }
-    }
     const proxyFileOutput = [];
     const filterInternalProps = (prop) => !prop.internal;
     const mapPropName = (prop) => prop.name;
@@ -451,7 +450,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         inputs.sort();
         const outputs = [];
         if (cmpMeta.events) {
-            outputs.push(...cmpMeta.events.filter(filterInternalProps).map(mapPropName));
+            outputs.push(...cmpMeta.events.filter(filterInternalProps));
         }
         const methods = [];
         if (cmpMeta.methods) {
@@ -460,16 +459,11 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         /**
          * For each component, we need to generate:
          * 1. The @Component decorated class
-         * 2. Optionally the @NgModule decorated class (if createSingleComponentAngularModules is true)
-         * 3. The component interface (using declaration merging for types).
+         * 2. The component interface (using declaration merging for types).
          */
         const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, inputs, outputs, methods, includeImportCustomElements);
-        const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
         const componentTypeDefinition = createComponentTypeDefinition(tagNameAsPascal, cmpMeta.events, componentCorePackage, includeImportCustomElements, customElementsDir);
         proxyFileOutput.push(componentDefinition, '\n');
-        if (createSingleComponentAngularModules) {
-            proxyFileOutput.push(moduleDefinition, '\n');
-        }
         proxyFileOutput.push(componentTypeDefinition, '\n');
     }
     const final = [imports, typeImports, sourceImports, ...proxyFileOutput];
@@ -495,14 +489,11 @@ function normalizeOutputTarget(config, outputTarget) {
     if (config.rootDir == null) {
         throw new Error('rootDir is not set and it should be set by stencil itself');
     }
-    if (outputTarget.directivesProxyFile !== undefined) {
-        throw new Error('directivesProxyFile has been removed. Use proxyDeclarationFile instead.');
-    }
-    if (outputTarget.proxyDeclarationFile == null) {
-        throw new Error('proxyDeclarationFile is required. Please set it in the Stencil config.');
+    if (outputTarget.directivesProxyFile == null) {
+        throw new Error('directivesProxyFile is required. Please set it in the Stencil config.');
     }
-    if (outputTarget.proxyDeclarationFile && !path.isAbsolute(outputTarget.proxyDeclarationFile)) {
-        results.proxyDeclarationFile = normalizePath(path.join(config.rootDir, outputTarget.proxyDeclarationFile));
+    if (outputTarget.directivesProxyFile && !path.isAbsolute(outputTarget.directivesProxyFile)) {
+        results.directivesProxyFile = normalizePath(path.join(config.rootDir, outputTarget.directivesProxyFile));
     }
     if (outputTarget.directivesArrayFile && !path.isAbsolute(outputTarget.directivesArrayFile)) {
         results.directivesArrayFile = normalizePath(path.join(config.rootDir, outputTarget.directivesArrayFile));

package/dist/output-angular.js

@@ -3,14 +3,13 @@ import { relativeImport, normalizePath, sortBy, readPackageJson, dashToPascalCas
 import { createAngularComponentDefinition, createComponentTypeDefinition } from './generate-angular-component';
 import { generateAngularDirectivesFile } from './generate-angular-directives-file';
 import generateValueAccessors from './generate-value-accessors';
-import { generateAngularModuleForComponent } from './generate-angular-modules';
 export async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
     const pkgData = await readPackageJson(config, rootDir);
     const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
     await Promise.all([
-        compilerCtx.fs.writeFile(outputTarget.proxyDeclarationFile, finalText),
+        compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
         copyResources(config, outputTarget),
         generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
         generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
@@ -24,7 +23,7 @@ async function copyResources(config, outputTarget) {
         throw new Error('stencil is not properly initialized at this step. Notify the developer');
     }
     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([
         {
             src: srcDirectory,
@@ -35,11 +34,9 @@ async function copyResources(config, outputTarget) {
     ], srcDirectory);
 }
 export function generateProxies(components, pkgData, outputTarget, rootDir) {
-    var _a;
     const distTypesDir = path.dirname(pkgData.types);
     const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
-    const componentsTypeFile = relativeImport(outputTarget.proxyDeclarationFile, dtsFilePath, '.d.ts');
-    const createSingleComponentAngularModules = (_a = outputTarget.createSingleComponentAngularModules) !== null && _a !== void 0 ? _a : false;
+    const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
     /**
      * The collection of named imports from @angular/core.
      */
@@ -50,14 +47,12 @@ export function generateProxies(components, pkgData, outputTarget, rootDir) {
         'ElementRef',
         'EventEmitter',
         'NgZone',
+        'Output',
     ];
     /**
      * The collection of named imports from the angular-component-lib/utils.
      */
     const componentLibImports = ['ProxyCmp', 'proxyOutputs'];
-    if (createSingleComponentAngularModules) {
-        angularCoreImports.push('NgModule');
-    }
     const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
 ${createImportStatement(angularCoreImports, '@angular/core')}
@@ -93,12 +88,6 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         });
         sourceImports = cmpImports.join('\n');
     }
-    if (createSingleComponentAngularModules) {
-        // Generating Angular modules is only supported in the dist-custom-elements build
-        if (!outputTarget.includeImportCustomElements) {
-            throw new Error('Generating single component Angular modules requires the "includeImportCustomElements" option to be set to true.');
-        }
-    }
     const proxyFileOutput = [];
     const filterInternalProps = (prop) => !prop.internal;
     const mapPropName = (prop) => prop.name;
@@ -115,7 +104,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         inputs.sort();
         const outputs = [];
         if (cmpMeta.events) {
-            outputs.push(...cmpMeta.events.filter(filterInternalProps).map(mapPropName));
+            outputs.push(...cmpMeta.events.filter(filterInternalProps));
         }
         const methods = [];
         if (cmpMeta.methods) {
@@ -124,16 +113,11 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         /**
          * For each component, we need to generate:
          * 1. The @Component decorated class
-         * 2. Optionally the @NgModule decorated class (if createSingleComponentAngularModules is true)
-         * 3. The component interface (using declaration merging for types).
+         * 2. The component interface (using declaration merging for types).
          */
         const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, inputs, outputs, methods, includeImportCustomElements);
-        const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
         const componentTypeDefinition = createComponentTypeDefinition(tagNameAsPascal, cmpMeta.events, componentCorePackage, includeImportCustomElements, customElementsDir);
         proxyFileOutput.push(componentDefinition, '\n');
-        if (createSingleComponentAngularModules) {
-            proxyFileOutput.push(moduleDefinition, '\n');
-        }
         proxyFileOutput.push(componentTypeDefinition, '\n');
     }
     const final = [imports, typeImports, sourceImports, ...proxyFileOutput];

package/dist/plugin.js

@@ -18,14 +18,11 @@ export function normalizeOutputTarget(config, outputTarget) {
     if (config.rootDir == null) {
         throw new Error('rootDir is not set and it should be set by stencil itself');
     }
-    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.proxyDeclarationFile && !path.isAbsolute(outputTarget.proxyDeclarationFile)) {
-        results.proxyDeclarationFile = normalizePath(path.join(config.rootDir, outputTarget.proxyDeclarationFile));
+    if (outputTarget.directivesProxyFile && !path.isAbsolute(outputTarget.directivesProxyFile)) {
+        results.directivesProxyFile = normalizePath(path.join(config.rootDir, outputTarget.directivesProxyFile));
     }
     if (outputTarget.directivesArrayFile && !path.isAbsolute(outputTarget.directivesArrayFile)) {
         results.directivesArrayFile = normalizePath(path.join(config.rootDir, outputTarget.directivesArrayFile));

package/dist/types.d.ts

@@ -4,25 +4,17 @@ export interface OutputTargetAngular {
      * This is used to generate the import statements.
      */
     componentCorePackage: string;
-    /**
-     * @deprecated Use `proxyDeclarationFile` instead. This property has been replaced.
-     */
-    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;
+    directivesProxyFile: string;
+    directivesArrayFile?: string;
+    directivesUtilsFile?: string;
     valueAccessorConfigs?: ValueAccessorConfig[];
     excludeComponents?: string[];
     includeImportCustomElements?: boolean;
     customElementsDir?: string;
-    /**
-     * `true` to generate a single component Angular module for each component.
-     */
-    createSingleComponentAngularModules?: boolean;
 }
 export declare type ValueAccessorTypes = 'text' | 'radio' | 'select' | 'number' | 'boolean';
 export interface ValueAccessorConfig {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/angular-output-target",
-  "version": "0.6.1-dev.11662577182.1c45c8de",
+  "version": "0.6.1-dev.11667512184.13935f80",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -58,5 +58,5 @@
     ],
     "testURL": "http://localhost"
   },
-  "gitHead": "c45c8deb595afb1d5321159783c838fb7131f087"
+  "gitHead": "3935f8069bb24eea156c4c5901c94357b302f1f5"
 }

package/dist/generate-angular-modules.d.ts

@@ -1,6 +0,0 @@
-/**
- * Creates an Angular module declaration for a component wrapper.
- * @param componentTagName The tag name of the Stencil component.
- * @returns The Angular module declaration as a string.
- */
-export declare const generateAngularModuleForComponent: (componentTagName: string) => string;

package/dist/generate-angular-modules.js

@@ -1,17 +0,0 @@
-import { dashToPascalCase } from './utils';
-/**
- * Creates an Angular module declaration for a component wrapper.
- * @param componentTagName The tag name of the Stencil component.
- * @returns The Angular module declaration as a string.
- */
-export const generateAngularModuleForComponent = (componentTagName) => {
-    const tagNameAsPascal = dashToPascalCase(componentTagName);
-    const componentClassName = `${tagNameAsPascal}`;
-    const moduleClassName = `${tagNameAsPascal}Module`;
-    const moduleDefinition = `@NgModule({
-  declarations: [${componentClassName}],
-  exports: [${componentClassName}]
-})
-export class ${moduleClassName} { }`;
-    return moduleDefinition;
-};