@stencil/angular-output-target 0.6.1-dev.11650990404.1c4facf3 → 0.6.1-dev.11655483906.1e51ded4

package/dist/generate-angular-component.js

@@ -1,4 +1,4 @@
-import { dashToPascalCase, normalizePath } from './utils';
+import { dashToPascalCase, formatCustomEventInterfaceName, normalizePath } from './utils';
 export const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir, includeImportCustomElements = false, customElementsDir = 'components') => (cmpMeta) => {
     // Collect component meta
     const inputs = [
@@ -59,7 +59,13 @@ export const createComponentDefinition = (componentCorePackage, distTypesDir, ro
             .replace(/\n/g, ' ')
             .replace(/\s{2,}/g, ' ')
             .replace(/,\s*/g, ', '));
-        componentEvents.push(`  ${output.name}: EventEmitter<CustomEvent<${outputTypeRemapped.trim()}>>;`);
+        /**
+         * 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');

package/dist/index.cjs.js

@@ -81,6 +81,16 @@ async function readPackageJson(config, rootDir) {
     }
     return pkgData;
 }
+/**
+ * Returns the formatted custom event interface name for the component.
+ * With a tag of "my-cmp", it will return "MyCmpCustomEvent".
+ *
+ * @param componentTagName The tag selector of the component (i.e. my-cmp)
+ * @returns The formatted custom event interface name.
+ */
+function formatCustomEventInterfaceName(componentTagName) {
+    return `${dashToPascalCase(componentTagName)}CustomEvent`;
+}
 const EXTENDED_PATH_REGEX = /^\\\\\?\\/;
 const NON_ASCII_REGEX = /[^\x00-\x80]+/;
 const SLASH_REGEX = /\\/g;
@@ -145,7 +155,13 @@ const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir,
             .replace(/\n/g, ' ')
             .replace(/\s{2,}/g, ' ')
             .replace(/,\s*/g, ', '));
-        componentEvents.push(`  ${output.name}: EventEmitter<CustomEvent<${outputTypeRemapped.trim()}>>;`);
+        /**
+         * 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');
@@ -302,6 +318,7 @@ function generateProxies(components, pkgData, outputTarget, rootDir) {
 /* 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);
     /**
      * Generate JSX import type from correct location.
      * When using custom elements build, we need to import from
@@ -309,11 +326,21 @@ 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`;
     };
-    const typeImports = generateTypeImports();
+    /**
+     * 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,
+    ];
     let sourceImports = '';
     /**
      * Build an array of Custom Elements build imports and namespace them
@@ -331,7 +358,7 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
     }
     const final = [
         imports,
-        typeImports,
+        typeImports.join('\n'),
         sourceImports,
         components
             .map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir, outputTarget.includeImportCustomElements, outputTarget.customElementsDir))
@@ -339,6 +366,14 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
     ];
     return final.join('\n') + '\n';
 }
+/**
+ * Returns the path to import the file from.
+ */
+const getImportPackageName = (outputTarget, componentsTypeFile) => {
+    let importLocation = outputTarget.componentCorePackage ? normalizePath(outputTarget.componentCorePackage) : normalizePath(componentsTypeFile);
+    importLocation += outputTarget.includeImportCustomElements ? `/${outputTarget.customElementsDir || 'components'}` : '';
+    return importLocation;
+};
 const GENERATED_DTS = 'components.d.ts';
 const IMPORT_TYPES = 'Components';
 

package/dist/index.js

@@ -73,6 +73,16 @@ async function readPackageJson(config, rootDir) {
     }
     return pkgData;
 }
+/**
+ * Returns the formatted custom event interface name for the component.
+ * With a tag of "my-cmp", it will return "MyCmpCustomEvent".
+ *
+ * @param componentTagName The tag selector of the component (i.e. my-cmp)
+ * @returns The formatted custom event interface name.
+ */
+function formatCustomEventInterfaceName(componentTagName) {
+    return `${dashToPascalCase(componentTagName)}CustomEvent`;
+}
 const EXTENDED_PATH_REGEX = /^\\\\\?\\/;
 const NON_ASCII_REGEX = /[^\x00-\x80]+/;
 const SLASH_REGEX = /\\/g;
@@ -137,7 +147,13 @@ const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir,
             .replace(/\n/g, ' ')
             .replace(/\s{2,}/g, ' ')
             .replace(/,\s*/g, ', '));
-        componentEvents.push(`  ${output.name}: EventEmitter<CustomEvent<${outputTypeRemapped.trim()}>>;`);
+        /**
+         * 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');
@@ -294,6 +310,7 @@ function generateProxies(components, pkgData, outputTarget, rootDir) {
 /* 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);
     /**
      * Generate JSX import type from correct location.
      * When using custom elements build, we need to import from
@@ -301,11 +318,21 @@ 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`;
     };
-    const typeImports = generateTypeImports();
+    /**
+     * 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,
+    ];
     let sourceImports = '';
     /**
      * Build an array of Custom Elements build imports and namespace them
@@ -323,7 +350,7 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
     }
     const final = [
         imports,
-        typeImports,
+        typeImports.join('\n'),
         sourceImports,
         components
             .map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir, outputTarget.includeImportCustomElements, outputTarget.customElementsDir))
@@ -331,6 +358,14 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
     ];
     return final.join('\n') + '\n';
 }
+/**
+ * Returns the path to import the file from.
+ */
+const getImportPackageName = (outputTarget, componentsTypeFile) => {
+    let importLocation = outputTarget.componentCorePackage ? normalizePath(outputTarget.componentCorePackage) : normalizePath(componentsTypeFile);
+    importLocation += outputTarget.includeImportCustomElements ? `/${outputTarget.customElementsDir || 'components'}` : '';
+    return importLocation;
+};
 const GENERATED_DTS = 'components.d.ts';
 const IMPORT_TYPES = 'Components';
 

package/dist/output-angular.js

@@ -1,5 +1,5 @@
 import path from 'path';
-import { relativeImport, normalizePath, sortBy, readPackageJson, dashToPascalCase } from './utils';
+import { relativeImport, normalizePath, sortBy, readPackageJson, dashToPascalCase, formatCustomEventInterfaceName } from './utils';
 import { createComponentDefinition } from './generate-angular-component';
 import { generateAngularDirectivesFile } from './generate-angular-directives-file';
 import generateValueAccessors from './generate-value-accessors';
@@ -41,6 +41,7 @@ export function generateProxies(components, pkgData, outputTarget, rootDir) {
 /* 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);
     /**
      * Generate JSX import type from correct location.
      * When using custom elements build, we need to import from
@@ -48,11 +49,21 @@ 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`;
     };
-    const typeImports = generateTypeImports();
+    /**
+     * 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,
+    ];
     let sourceImports = '';
     /**
      * Build an array of Custom Elements build imports and namespace them
@@ -70,7 +81,7 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
     }
     const final = [
         imports,
-        typeImports,
+        typeImports.join('\n'),
         sourceImports,
         components
             .map(createComponentDefinition(outputTarget.componentCorePackage, distTypesDir, rootDir, outputTarget.includeImportCustomElements, outputTarget.customElementsDir))
@@ -78,5 +89,13 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
     ];
     return final.join('\n') + '\n';
 }
+/**
+ * Returns the path to import the file from.
+ */
+const getImportPackageName = (outputTarget, componentsTypeFile) => {
+    let importLocation = outputTarget.componentCorePackage ? normalizePath(outputTarget.componentCorePackage) : normalizePath(componentsTypeFile);
+    importLocation += outputTarget.includeImportCustomElements ? `/${outputTarget.customElementsDir || 'components'}` : '';
+    return importLocation;
+};
 const GENERATED_DTS = 'components.d.ts';
 const IMPORT_TYPES = 'Components';

package/dist/utils.d.ts

@@ -7,3 +7,11 @@ export declare function normalizePath(str: string): string;
 export declare function relativeImport(pathFrom: string, pathTo: string, ext?: string): string;
 export declare function isRelativePath(path: string): boolean | "";
 export declare function readPackageJson(config: Config, rootDir: string): Promise<PackageJSON>;
+/**
+ * Returns the formatted custom event interface name for the component.
+ * With a tag of "my-cmp", it will return "MyCmpCustomEvent".
+ *
+ * @param componentTagName The tag selector of the component (i.e. my-cmp)
+ * @returns The formatted custom event interface name.
+ */
+export declare function formatCustomEventInterfaceName(componentTagName: string): string;

package/dist/utils.js

@@ -74,6 +74,16 @@ export async function readPackageJson(config, rootDir) {
     }
     return pkgData;
 }
+/**
+ * Returns the formatted custom event interface name for the component.
+ * With a tag of "my-cmp", it will return "MyCmpCustomEvent".
+ *
+ * @param componentTagName The tag selector of the component (i.e. my-cmp)
+ * @returns The formatted custom event interface name.
+ */
+export function formatCustomEventInterfaceName(componentTagName) {
+    return `${dashToPascalCase(componentTagName)}CustomEvent`;
+}
 const EXTENDED_PATH_REGEX = /^\\\\\?\\/;
 const NON_ASCII_REGEX = /[^\x00-\x80]+/;
 const SLASH_REGEX = /\\/g;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/angular-output-target",
-  "version": "0.6.1-dev.11650990404.1c4facf3",
+  "version": "0.6.1-dev.11655483906.1e51ded4",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -39,7 +39,7 @@
     "@angular/forms": "8.2.14"
   },
   "peerDependencies": {
-    "@stencil/core": "^2.9.0"
+    "@stencil/core": "^2.16.0"
   },
   "jest": {
     "transform": {
@@ -55,5 +55,5 @@
     ],
     "testURL": "http://localhost"
   },
-  "gitHead": "c4facf34607b1500dd33dd5c5d1ba5685edd90d4"
+  "gitHead": "e51ded46a46fbcd7d0f191a9dc237bef362aab9f"
 }