@stencil/angular-output-target 0.4.0 → 0.6.0

package/dist/index.cjs.js

@@ -81,110 +81,188 @@ async function readPackageJson(config, rootDir) {
     }
     return pkgData;
 }
-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(`', '`)}']`);
+/**
+ * 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.
+ *
+ * @returns The import statement as a string.
+ */
+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, ', '));
-        componentEvents.push(`  ${output.name}: EventEmitter<CustomEvent<${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}',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // 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}`)
+            // 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, ' ')
+        .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 publicEvents = events.filter((ev) => !ev.internal);
+    const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
+        componentCorePackage,
+        includeImportCustomElements,
+        customElementsDir,
+    });
+    const eventTypes = publicEvents.map((event) => {
+        const comment = createDocComment(event.docs);
+        let eventName = event.name;
+        if (event.name.includes('-')) {
+            // If an event name includes a dash, we need to wrap it in quotes.
+            // https://github.com/ionic-team/stencil-ds-output-targets/issues/212
+            eventName = `'${event.name}'`;
+        }
+        return `${comment.length > 0 ? `  ${comment}` : ''}
+  ${eventName}: 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
+            ? '}'
+            : `
+${eventTypes.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
@@ -207,15 +285,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 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 = [];
@@ -264,6 +339,23 @@ 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;
@@ -295,13 +387,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 includeSingleComponentAngularModules = (_a = outputTarget.includeSingleComponentAngularModules) !== 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 (includeSingleComponentAngularModules) {
+        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`;
+${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
@@ -309,8 +422,12 @@ 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'}` : '';
+        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`;
     };
     const typeImports = generateTypeImports();
@@ -322,21 +439,56 @@ 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,
-        sourceImports,
-        components
-            .map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir, outputTarget.includeImportCustomElements, outputTarget.customElementsDir))
-            .join('\n'),
-    ];
+    if (includeSingleComponentAngularModules) {
+        // 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 includeSingleComponentAngularModules 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');
+        if (includeSingleComponentAngularModules) {
+            proxyFileOutput.push(moduleDefinition, '\n');
+        }
+        proxyFileOutput.push(componentTypeDefinition, '\n');
+    }
+    const final = [imports, typeImports, sourceImports, ...proxyFileOutput];
     return final.join('\n') + '\n';
 }
 const GENERATED_DTS = 'components.d.ts';
@@ -355,12 +507,12 @@ 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');
+        throw new Error('directivesProxyFile 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));
@@ -368,8 +520,8 @@ function normalizeOutputTarget(config, outputTarget) {
     if (outputTarget.directivesArrayFile && !path__default['default'].isAbsolute(outputTarget.directivesArrayFile)) {
         results.directivesArrayFile = normalizePath(path__default['default'].join(config.rootDir, outputTarget.directivesArrayFile));
     }
-    if (outputTarget.directivesUtilsFile && !path__default['default'].isAbsolute(outputTarget.directivesUtilsFile)) {
-        results.directivesUtilsFile = normalizePath(path__default['default'].join(config.rootDir, outputTarget.directivesUtilsFile));
+    if (outputTarget.includeSingleComponentAngularModules !== undefined) {
+        console.warn('**Experimental**: includeSingleComponentAngularModules is a developer preview feature and may change or be removed in the future.');
     }
     return results;
 }