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

Comparing version 0.6.1-dev.11651000551.1f528d2f to 0.6.1-dev.11655483906.1e51ded4

dist/generate-angular-component.js

@@ -1,2 +0,2 @@
-import { dashToPascalCase, normalizePath } from './utils';
+import { dashToPascalCase, formatCustomEventInterfaceName, normalizePath } from './utils';
 export const createComponentDefinition = (componentCorePackage, distTypesDir, rootDir, includeImportCustomElements = false, customElementsDir = 'components') => (cmpMeta) => {
@@ -62,3 +62,9 @@ // Collect component meta
             .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) {
@@ -65,0 +71,0 @@ // Empty line to push end `}` to new line

dist/index.cjs.js

@@ -84,2 +84,12 @@ 'use strict';
 }
+/**
+ * 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 = /^\\\\\?\\/;
@@ -149,3 +159,9 @@ const NON_ASCII_REGEX = /[^\x00-\x80]+/;
             .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) {
@@ -307,2 +323,3 @@ // Empty line to push end `}` to new line
 import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
+    const importLocation = getImportPackageName(outputTarget, componentsTypeFile);
     /**
@@ -315,7 +332,17 @@ * Generate JSX import type from correct location.
     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 = '';
@@ -338,3 +365,3 @@ /**
         imports,
-        typeImports,
+        typeImports.join('\n'),
         sourceImports,
@@ -347,2 +374,10 @@ components
 }
+/**
+ * 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';
@@ -349,0 +384,0 @@ const IMPORT_TYPES = 'Components';

dist/index.js

@@ -76,2 +76,12 @@ import path from 'path';
 }
+/**
+ * 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 = /^\\\\\?\\/;
@@ -141,3 +151,9 @@ const NON_ASCII_REGEX = /[^\x00-\x80]+/;
             .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) {
@@ -299,2 +315,3 @@ // Empty line to push end `}` to new line
 import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
+    const importLocation = getImportPackageName(outputTarget, componentsTypeFile);
     /**
@@ -307,7 +324,17 @@ * Generate JSX import type from correct location.
     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 = '';
@@ -330,3 +357,3 @@ /**
         imports,
-        typeImports,
+        typeImports.join('\n'),
         sourceImports,
@@ -339,2 +366,10 @@ components
 }
+/**
+ * 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';
@@ -341,0 +376,0 @@ const IMPORT_TYPES = 'Components';

dist/output-angular.js

 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';
@@ -44,2 +44,3 @@ import { generateAngularDirectivesFile } from './generate-angular-directives-file';
 import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';\n`;
+    const importLocation = getImportPackageName(outputTarget, componentsTypeFile);
     /**
@@ -52,7 +53,17 @@ * Generate JSX import type from correct location.
     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 = '';
@@ -75,3 +86,3 @@ /**
         imports,
-        typeImports,
+        typeImports.join('\n'),
         sourceImports,
@@ -84,3 +95,11 @@ components
 }
+/**
+ * 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';

dist/utils.d.ts

@@ -10,1 +10,9 @@ import { Config } from '@stencil/core/internal';
 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;

dist/utils.js

@@ -77,4 +77,14 @@ import path from 'path';
 }
+/**
+ * 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.json

 {
   "name": "@stencil/angular-output-target",
-  "version": "0.6.1-dev.11651000551.1f528d2f",
+  "version": "0.6.1-dev.11655483906.1e51ded4",
   "description": "Angular output target for @stencil/core components.",
@@ -42,3 +42,3 @@ "main": "dist/index.cjs.js",
   "peerDependencies": {
-    "@stencil/core": "^2.9.0"
+    "@stencil/core": "^2.16.0"
   },
@@ -59,3 +59,3 @@ "jest": {
   },
-  "gitHead": "f528d2f92d8fddf7c4ef2ebe5c08b0f46dd85c9a"
+  "gitHead": "e51ded46a46fbcd7d0f191a9dc237bef362aab9f"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

73881

increased by7.13%

Lines of code

1467

increased by8.35%

No dependency changes