@stencil/angular-output-target 0.6.1-dev.11655483906.1e51ded4 → 0.6.1-dev.11662151255.17ea4066

package/dist/index.cjs.js

@@ -82,132 +82,184 @@ 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".
+ * Formats an array of strings to a string of quoted, comma separated values.
+ * @param list The list of unformatted strings to format
+ * @returns The formatted array of strings. (e.g. ['foo', 'bar']) => `'foo', 'bar'`
+ */
+const formatToQuotedList = (list) => list.map((item) => `'${item}'`).join(', ');
+/**
+ * Creates an import statement for a list of named imports from a module.
+ * @param imports The list of named imports.
+ * @param module The module to import from.
  *
- * @param componentTagName The tag selector of the component (i.e. my-cmp)
- * @returns The formatted custom event interface name.
+ * @returns The import statement as a string.
  */
-function formatCustomEventInterfaceName(componentTagName) {
-    return `${dashToPascalCase(componentTagName)}CustomEvent`;
-}
-const EXTENDED_PATH_REGEX = /^\\\\\?\\/;
-const NON_ASCII_REGEX = /[^\x00-\x80]+/;
-const SLASH_REGEX = /\\/g;
-
-const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir, includeImportCustomElements = false, customElementsDir = 'components') => (cmpMeta) => {
-    // Collect component meta
-    const inputs = [
-        ...cmpMeta.properties.filter((prop) => !prop.internal).map((prop) => prop.name),
-        ...cmpMeta.virtualProperties.map((prop) => prop.name),
-    ].sort();
-    const outputs = cmpMeta.events.filter((ev) => !ev.internal).map((prop) => prop);
-    const methods = cmpMeta.methods.filter((method) => !method.internal).map((prop) => prop.name);
-    // Process meta
-    const hasOutputs = outputs.length > 0;
-    // Generate Angular @Directive
-    const directiveOpts = [
-        `selector: \'${cmpMeta.tagName}\'`,
-        `changeDetection: ChangeDetectionStrategy.OnPush`,
-        `template: '<ng-content></ng-content>'`,
-    ];
-    if (inputs.length > 0) {
-        directiveOpts.push(`inputs: ['${inputs.join(`', '`)}']`);
+const createImportStatement = (imports, module) => {
+    if (imports.length === 0) {
+        return '';
     }
-    const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
-    const outputsInterface = new Set();
-    const outputReferenceRemap = {};
-    outputs.forEach((output) => {
-        Object.entries(output.complexType.references).forEach(([reference, refObject]) => {
-            // Add import line for each local/import reference, and add new mapping name.
-            // `outputReferenceRemap` should be updated only if the import interface is set in outputsInterface,
-            // this will prevent global types to be remapped.
-            const remappedReference = `I${cmpMeta.componentClassName}${reference}`;
+    return `import { ${imports.join(', ')} } from '${module}';`;
+};
+/**
+ * Creates the collection of import statements for a component based on the component's events type dependencies.
+ * @param componentTagName The tag name of the component (pascal case).
+ * @param events The events compiler metadata.
+ * @param options The options for generating the import statements (e.g. whether to import from the custom elements directory).
+ * @returns The import statements as an array of strings.
+ */
+const createComponentEventTypeImports = (componentTagName, events, options) => {
+    const { componentCorePackage, includeImportCustomElements, customElementsDir } = options;
+    const imports = [];
+    const namedImports = new Set();
+    const importPathName = normalizePath(componentCorePackage) + (includeImportCustomElements ? `/${customElementsDir || 'components'}` : '');
+    events.forEach((event) => {
+        Object.entries(event.complexType.references).forEach(([typeName, refObject]) => {
             if (refObject.location === 'local' || refObject.location === 'import') {
-                outputReferenceRemap[reference] = remappedReference;
-                let importLocation = componentCorePackage;
-                if (componentCorePackage !== undefined) {
-                    const dirPath = includeImportCustomElements ? `/${customElementsDir || 'components'}` : '';
-                    importLocation = `${normalizePath(componentCorePackage)}${dirPath}`;
+                const newTypeName = `I${componentTagName}${typeName}`;
+                // Prevents duplicate imports for the same type.
+                if (!namedImports.has(newTypeName)) {
+                    imports.push(`import type { ${typeName} as ${newTypeName} } from '${importPathName}';`);
+                    namedImports.add(newTypeName);
                 }
-                outputsInterface.add(`import type { ${reference} as ${remappedReference} } from '${importLocation}';`);
             }
         });
     });
-    const componentEvents = [
-        '' // Empty first line
-    ];
-    // Generate outputs
-    outputs.forEach((output, index) => {
-        componentEvents.push(`  /**
-   * ${output.docs.text} ${output.docs.tags.map((tag) => `@${tag.name} ${tag.text}`)}
-   */`);
-        /**
-         * The original attribute contains the original type defined by the devs.
-         * This regexp normalizes the reference, by removing linebreaks,
-         * replacing consecutive spaces with a single space, and adding a single space after commas.
-         **/
-        const outputTypeRemapped = Object.entries(outputReferenceRemap).reduce((type, [src, dst]) => {
-            return type
-                .replace(new RegExp(`^${src}$`, 'g'), `${dst}`)
-                .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (v, p1, p2) => [p1, dst, p2].join(''));
-        }, output.complexType.original
-            .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()}>>;`);
-        if (index === outputs.length - 1) {
-            // Empty line to push end `}` to new line
-            componentEvents.push('\n');
-        }
-    });
-    const lines = [
-        '',
-        `${[...outputsInterface].join('\n')}
-export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {${componentEvents.length > 1 ? componentEvents.join('\n') : ''}}
+    return imports.join('\n');
+};
+const EXTENDED_PATH_REGEX = /^\\\\\?\\/;
+const NON_ASCII_REGEX = /[^\x00-\x80]+/;
+const SLASH_REGEX = /\\/g;
 
-${getProxyCmp(cmpMeta.tagName, includeImportCustomElements, inputs, methods)}
+/**
+ * Creates an Angular component declaration from formatted Stencil compiler metadata.
+ *
+ * @param tagName The tag name of the component.
+ * @param inputs The inputs of the Stencil component (e.g. ['myInput']).
+ * @param outputs The outputs/events of the Stencil component. (e.g. ['myOutput']).
+ * @param methods The methods of the Stencil component. (e.g. ['myMethod']).
+ * @param includeImportCustomElements Whether to define the component as a custom element.
+ * @returns The component declaration as a string.
+ */
+const createAngularComponentDefinition = (tagName, inputs, outputs, methods, includeImportCustomElements = false) => {
+    const tagNameAsPascal = dashToPascalCase(tagName);
+    const hasInputs = inputs.length > 0;
+    const hasOutputs = outputs.length > 0;
+    const hasMethods = methods.length > 0;
+    // 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);
+    // Formats the method strings into comma separated, single quoted values.
+    const formattedMethods = formatToQuotedList(methods);
+    const proxyCmpOptions = [];
+    if (includeImportCustomElements) {
+        const defineCustomElementFn = `define${tagNameAsPascal}`;
+        proxyCmpOptions.push(`\n  defineCustomElementFn: ${defineCustomElementFn}`);
+    }
+    if (hasInputs) {
+        proxyCmpOptions.push(`\n  inputs: [${formattedInputs}]`);
+    }
+    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({
-  ${directiveOpts.join(',\n  ')}
+  selector: '${tagName}',
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: [${formattedInputs}],
 })
-export class ${tagNameAsPascal} {`,
-    ];
-    lines.push('  protected el: HTMLElement;');
-    lines.push(`  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+export class ${tagNameAsPascal} {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
-    this.el = r.nativeElement;`);
-    if (hasOutputs) {
-        lines.push(`    proxyOutputs(this, this.el, ['${outputs.map((output) => output.name).join(`', '`)}']);`);
+    this.el = r.nativeElement;${hasOutputs
+        ? `
+    proxyOutputs(this, this.el, [${formattedOutputs}]);`
+        : ''}
+  }
+}`;
+    return output;
+};
+/**
+ * Sanitizes and formats the component event type.
+ * @param componentClassName The class name of the component (e.g. 'MyComponent')
+ * @param event The Stencil component event.
+ * @returns The sanitized event type as a string.
+ */
+const formatOutputType = (componentClassName, event) => {
+    /**
+     * The original attribute contains the original type defined by the devs.
+     * This regexp normalizes the reference, by removing linebreaks,
+     * replacing consecutive spaces with a single space, and adding a single space after commas.
+     */
+    return Object.entries(event.complexType.references)
+        .filter(([_, refObject]) => refObject.location === 'local' || refObject.location === 'import')
+        .reduce((type, [src, dst]) => {
+        const renamedType = `I${componentClassName}${type}`;
+        return renamedType
+            .replace(new RegExp(`^${src}$`, 'g'), `${dst}`)
+            .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (v, p1, p2) => [p1, dst, p2].join(''));
+    }, event.complexType.original
+        .replace(/\n/g, ' ')
+        .replace(/\s{2,}/g, ' ')
+        .replace(/,\s*/g, ', '));
+};
+/**
+ * Creates a formatted comment block based on the JS doc comment.
+ * @param doc The compiler jsdoc.
+ * @returns The formatted comment block as a string.
+ */
+const createDocComment = (doc) => {
+    if (doc.text.trim().length === 0 && doc.tags.length === 0) {
+        return '';
     }
-    lines.push(`  }`);
-    lines.push(`}`);
-    return lines.join('\n');
+    return `/**
+   * ${doc.text}${doc.tags.length > 0 ? ' ' : ''}${doc.tags.map((tag) => `@${tag.name} ${tag.text}`)}
+   */`;
+};
+/**
+ * Creates the component interface type definition.
+ * @param tagNameAsPascal The tag name as PascalCase.
+ * @param events The events to generate the interface properties for.
+ * @param componentCorePackage The component core package.
+ * @param includeImportCustomElements Whether to include the import for the custom element definition.
+ * @param customElementsDir The custom elements directory.
+ * @returns The component interface type definition as a string.
+ */
+const createComponentTypeDefinition = (tagNameAsPascal, events, componentCorePackage, includeImportCustomElements = false, customElementsDir) => {
+    const typeDefinition = `${createComponentEventTypeImports(tagNameAsPascal, events, {
+        componentCorePackage,
+        includeImportCustomElements,
+        customElementsDir,
+    })}
+
+export interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {
+${events
+        .map((event) => {
+        const comment = createDocComment(event.docs);
+        return `${comment.length > 0 ? `  ${comment}` : ''}
+  ${event.name}: EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>;`;
+    })
+        .join('\n')}
+}`;
+    return typeDefinition;
 };
-function getProxyCmp(tagName, includeCustomElement, inputs, methods) {
-    const hasInputs = inputs.length > 0;
-    const hasMethods = methods.length > 0;
-    const proxMeta = [
-        `defineCustomElementFn: ${includeCustomElement ? 'define' + dashToPascalCase(tagName) : 'undefined'}`
-    ];
-    if (hasInputs)
-        proxMeta.push(`inputs: ['${inputs.join(`', '`)}']`);
-    if (hasMethods)
-        proxMeta.push(`methods: ['${methods.join(`', '`)}']`);
-    return `@ProxyCmp({\n  ${proxMeta.join(',\n  ')}\n})`;
-}
 
 function generateAngularDirectivesFile(compilerCtx, components, outputTarget) {
     // Only create the file if it is defined in the stencil configuration
     if (!outputTarget.directivesArrayFile) {
         return Promise.resolve();
     }
-    const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.directivesProxyFile, '.ts');
+    const proxyPath = relativeImport(outputTarget.directivesArrayFile, outputTarget.proxyDeclarationFile, '.ts');
     const directives = components
         .map((cmpMeta) => dashToPascalCase(cmpMeta.tagName))
         .map((className) => `d.${className}`)
@@ -223,15 +275,12 @@ export const DIRECTIVES = [
 }
 
 async function generateValueAccessors(compilerCtx, components, outputTarget, config) {
-    if (!Array.isArray(outputTarget.valueAccessorConfigs) ||
-        outputTarget.valueAccessorConfigs.length === 0) {
+    if (!Array.isArray(outputTarget.valueAccessorConfigs) || outputTarget.valueAccessorConfigs.length === 0) {
         return;
     }
-    const targetDir = path__default['default'].dirname(outputTarget.directivesProxyFile);
+    const targetDir = path__default['default'].dirname(outputTarget.proxyDeclarationFile);
     const normalizedValueAccessors = outputTarget.valueAccessorConfigs.reduce((allAccessors, va) => {
-        const elementSelectors = Array.isArray(va.elementSelectors)
-            ? va.elementSelectors
-            : [va.elementSelectors];
+        const elementSelectors = Array.isArray(va.elementSelectors) ? va.elementSelectors : [va.elementSelectors];
         const type = va.type;
         let allElementSelectors = [];
         let allEventTargets = [];
@@ -280,13 +329,30 @@ 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.directivesProxyFile, finalText),
+        compilerCtx.fs.writeFile(outputTarget.proxyDeclarationFile, finalText),
         copyResources$1(config, outputTarget),
         generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
         generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
@@ -300,7 +366,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.directivesProxyFile), 'angular-component-lib');
+    const destDirectory = path__default['default'].join(path__default['default'].dirname(outputTarget.proxyDeclarationFile), 'angular-component-lib');
     return config.sys.copy([
         {
             src: srcDirectory,
@@ -311,14 +377,34 @@ 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.directivesProxyFile, dtsFilePath, '.d.ts');
+    const componentsTypeFile = relativeImport(outputTarget.proxyDeclarationFile, dtsFilePath, '.d.ts');
+    const createSingleComponentAngularModules = (_a = outputTarget.createSingleComponentAngularModules) !== null && _a !== void 0 ? _a : false;
+    /**
+     * The collection of named imports from @angular/core.
+     */
+    const angularCoreImports = [
+        'ChangeDetectionStrategy',
+        'ChangeDetectorRef',
+        'Component',
+        'ElementRef',
+        'EventEmitter',
+        'NgZone',
+    ];
+    /**
+     * 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 */
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';
-import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
-    const importLocation = getImportPackageName(outputTarget, componentsTypeFile);
+${createImportStatement(angularCoreImports, '@angular/core')}
+
+${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n`;
     /**
      * Generate JSX import type from correct location.
      * When using custom elements build, we need to import from
@@ -326,21 +412,15 @@ 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
@@ -349,31 +429,54 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
      * IonButton React Component that takes in the Web Component as a parameter.
      */
     if (outputTarget.includeImportCustomElements && outputTarget.componentCorePackage !== undefined) {
-        const cmpImports = components.map(component => {
+        const cmpImports = components.map((component) => {
             const pascalImport = dashToPascalCase(component.tagName);
-            return `import { defineCustomElement as define${pascalImport} } from '${normalizePath(outputTarget.componentCorePackage)}/${outputTarget.customElementsDir ||
-                'components'}/${component.tagName}.js';`;
+            return `import { defineCustomElement as define${pascalImport} } from '${normalizePath(outputTarget.componentCorePackage)}/${outputTarget.customElementsDir || 'components'}/${component.tagName}.js';`;
         });
         sourceImports = cmpImports.join('\n');
     }
-    const final = [
-        imports,
-        typeImports.join('\n'),
-        sourceImports,
-        components
-            .map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir, outputTarget.includeImportCustomElements, outputTarget.customElementsDir))
-            .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;
+    const { includeImportCustomElements, componentCorePackage, customElementsDir } = outputTarget;
+    for (let cmpMeta of components) {
+        const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
+        const inputs = [];
+        if (cmpMeta.properties) {
+            inputs.push(...cmpMeta.properties.filter(filterInternalProps).map(mapPropName));
+        }
+        if (cmpMeta.virtualProperties) {
+            inputs.push(...cmpMeta.virtualProperties.map(mapPropName));
+        }
+        inputs.sort();
+        const outputs = [];
+        if (cmpMeta.events) {
+            outputs.push(...cmpMeta.events.filter(filterInternalProps).map(mapPropName));
+        }
+        const methods = [];
+        if (cmpMeta.methods) {
+            methods.push(...cmpMeta.methods.filter(filterInternalProps).map(mapPropName));
+        }
+        /**
+         * 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).
+         */
+        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', createSingleComponentAngularModules ? moduleDefinition : '', '\n', componentTypeDefinition, '\n');
+    }
+    const final = [imports, typeImports, sourceImports, ...proxyFileOutput];
     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';
 
@@ -390,15 +493,18 @@ const angularOutputTarget = (outputTarget) => ({
     },
 });
 function normalizeOutputTarget(config, outputTarget) {
-    const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfig: outputTarget.valueAccessorConfig || [] });
+    const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [] });
     if (config.rootDir == null) {
         throw new Error('rootDir is not set and it should be set by stencil itself');
     }
-    if (outputTarget.directivesProxyFile == null) {
-        throw new Error('directivesProxyFile is required');
+    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 && !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)) {
         results.directivesArrayFile = normalizePath(path__default['default'].join(config.rootDir, outputTarget.directivesArrayFile));