@stencil/angular-output-target 0.8.1-dev.11690825475.1243803f → 0.8.2

package/README.md

@@ -27,7 +27,6 @@ export const config: Config = {
   outputTargets: [
     angularOutputTarget({
       componentCorePackage: 'component-library',
-      outputType: 'component',
       directivesProxyFile: '../component-library-angular/src/directives/proxies.ts',
       directivesArrayFile: '../component-library-angular/src/directives/index.ts',
     }),
@@ -48,5 +47,5 @@ export const config: Config = {
 | `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.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| `outputType`           | Specifies the type of output to be generated. It can take one of the following values: <br />1. `component`: Generates all the component wrappers to be declared on an Angular module. This option is required for Stencil projects using the `dist` hydrated output.<br /> 2. `scam`: Generates a separate Angular module for each component.<br /> 3. `standalone`: Generates standalone component wrappers.<br /> Both `scam` and `standalone` options are compatible with the `dist-custom-elements` output. Developers **must** set a `customElementsDir` in the output target config when using either 'scam' or 'standalone'.<br />Note: Please choose the appropriate `outputType` based on your project's requirements and the desired output structure. |
-| `customElementsDir`    | This is the directory where the custom elements are imported from when using the [Custom Elements Bundle](https://stenciljs.com/docs/custom-elements). Required to be set for `outputType: "scam"` or `outputType: "standalone"`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `outputType`           | Specifies the type of output to be generated. It can take one of the following values: <br />1. `component`: Generates all the component wrappers to be declared on an Angular module. This option is required for Stencil projects using the `dist` hydrated output.<br /> 2. `scam`: Generates a separate Angular module for each component.<br /> 3. `standalone`: Generates standalone component wrappers.<br /> Both `scam` and `standalone` options are compatible with the `dist-custom-elements` output. <br />Note: Please choose the appropriate `outputType` based on your project's requirements and the desired output structure. Defaults to `component`. |
+| `customElementsDir`    | This is the directory where the custom elements are imported from when using the [Custom Elements Bundle](https://stenciljs.com/docs/custom-elements). Defaults to the `components` directory. Only applies for `outputType: "scam"` or `outputType: "standalone"`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |

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

@@ -1,4 +1,5 @@
 import type { ComponentCompilerEvent } from '@stencil/core/internal';
+import type { OutputType } from './types';
 /**
  * Creates an Angular component declaration from formatted Stencil compiler metadata.
  *
@@ -13,10 +14,11 @@ import type { ComponentCompilerEvent } from '@stencil/core/internal';
 export declare const createAngularComponentDefinition: (tagName: string, inputs: readonly string[], outputs: readonly string[], methods: readonly string[], includeImportCustomElements?: boolean, standalone?: boolean) => string;
 /**
  * Creates the component interface type definition.
+ * @param outputType The output type.
  * @param tagNameAsPascal The tag name as PascalCase.
  * @param events The events to generate the interface properties for.
  * @param componentCorePackage The component core package.
  * @param customElementsDir The custom elements directory.
  * @returns The component interface type definition as a string.
  */
-export declare const createComponentTypeDefinition: (tagNameAsPascal: string, events: readonly ComponentCompilerEvent[], componentCorePackage: string, customElementsDir?: string | undefined) => string;
+export declare const createComponentTypeDefinition: (outputType: OutputType, tagNameAsPascal: string, events: readonly ComponentCompilerEvent[], componentCorePackage: string, customElementsDir?: string | undefined) => string;

package/dist/generate-angular-component.js

@@ -70,6 +70,7 @@ export class ${tagNameAsPascal} {
  * @returns The sanitized event type as a string.
  */
 const formatOutputType = (componentClassName, event) => {
+    const prefix = `I${componentClassName}`;
     /**
      * The original attribute contains the original type defined by the devs.
      * This regexp normalizes the reference, by removing linebreaks,
@@ -78,11 +79,24 @@ const formatOutputType = (componentClassName, event) => {
     return Object.entries(event.complexType.references)
         .filter(([_, refObject]) => refObject.location === 'local' || refObject.location === 'import')
         .reduce((type, [src, dst]) => {
-        const renamedType = `I${componentClassName}${type}`;
+        let renamedType = type;
+        if (!type.startsWith(prefix)) {
+            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('')));
+            .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (v, p1, p2) => {
+            if ((dst === null || dst === void 0 ? void 0 : dst.location) === 'import') {
+                /**
+                 * Replaces a complex type reference within a generic type.
+                 * For example, remapping a type like `EventEmitter<CustomEvent<MyEvent<T>>>` to
+                 * `EventEmitter<CustomEvent<IMyComponentMyEvent<IMyComponentT>>>`.
+                 */
+                return [p1, `I${componentClassName}${v.substring(1, v.length - 1)}`, p2].join('');
+            }
+            return [p1, dst, p2].join('');
+        }));
     }, event.complexType.original
         .replace(/\n/g, ' ')
         .replace(/\s{2,}/g, ' ')
@@ -103,17 +117,19 @@ const createDocComment = (doc) => {
 };
 /**
  * Creates the component interface type definition.
+ * @param outputType The output type.
  * @param tagNameAsPascal The tag name as PascalCase.
  * @param events The events to generate the interface properties for.
  * @param componentCorePackage The component core package.
  * @param customElementsDir The custom elements directory.
  * @returns The component interface type definition as a string.
  */
-export const createComponentTypeDefinition = (tagNameAsPascal, events, componentCorePackage, customElementsDir) => {
+export const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, componentCorePackage, customElementsDir) => {
     const publicEvents = events.filter((ev) => !ev.internal);
     const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
         customElementsDir,
+        outputType,
     });
     const eventTypes = publicEvents.map((event) => {
         const comment = createDocComment(event.docs);

package/dist/index.cjs.js

@@ -9,6 +9,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var path__default = /*#__PURE__*/_interopDefaultLegacy(path);
 
+const OutputTypes = {
+    Component: 'component',
+    Scam: 'scam',
+    Standalone: 'standalone',
+};
 const toLowerCase = (str) => str.toLowerCase();
 const dashToPascalCase = (str) => toLowerCase(str)
     .split('-')
@@ -100,6 +105,14 @@ const createImportStatement = (imports, module) => {
     }
     return `import { ${imports.join(', ')} } from '${module}';`;
 };
+/**
+ * Checks if the outputType is for the custom elements build.
+ * @param outputType The output type.
+ * @returns `true` if the output type is for the custom elements build.
+ */
+const isOutputTypeCustomElementsBuild = (outputType) => {
+    return outputType === OutputTypes.Standalone || outputType === OutputTypes.Scam;
+};
 /**
  * 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).
@@ -111,7 +124,7 @@ const createComponentEventTypeImports = (componentTagName, events, options) => {
     const { componentCorePackage, customElementsDir } = options;
     const imports = [];
     const namedImports = new Set();
-    const isCustomElementsBuild = customElementsDir !== undefined;
+    const isCustomElementsBuild = isOutputTypeCustomElementsBuild(options.outputType);
     const importPathName = normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
     events.forEach((event) => {
         Object.entries(event.complexType.references).forEach(([typeName, refObject]) => {
@@ -202,6 +215,7 @@ export class ${tagNameAsPascal} {
  * @returns The sanitized event type as a string.
  */
 const formatOutputType = (componentClassName, event) => {
+    const prefix = `I${componentClassName}`;
     /**
      * The original attribute contains the original type defined by the devs.
      * This regexp normalizes the reference, by removing linebreaks,
@@ -210,11 +224,24 @@ const formatOutputType = (componentClassName, event) => {
     return Object.entries(event.complexType.references)
         .filter(([_, refObject]) => refObject.location === 'local' || refObject.location === 'import')
         .reduce((type, [src, dst]) => {
-        const renamedType = `I${componentClassName}${type}`;
+        let renamedType = type;
+        if (!type.startsWith(prefix)) {
+            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('')));
+            .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (v, p1, p2) => {
+            if ((dst === null || dst === void 0 ? void 0 : dst.location) === 'import') {
+                /**
+                 * Replaces a complex type reference within a generic type.
+                 * For example, remapping a type like `EventEmitter<CustomEvent<MyEvent<T>>>` to
+                 * `EventEmitter<CustomEvent<IMyComponentMyEvent<IMyComponentT>>>`.
+                 */
+                return [p1, `I${componentClassName}${v.substring(1, v.length - 1)}`, p2].join('');
+            }
+            return [p1, dst, p2].join('');
+        }));
     }, event.complexType.original
         .replace(/\n/g, ' ')
         .replace(/\s{2,}/g, ' ')
@@ -235,17 +262,19 @@ const createDocComment = (doc) => {
 };
 /**
  * Creates the component interface type definition.
+ * @param outputType The output type.
  * @param tagNameAsPascal The tag name as PascalCase.
  * @param events The events to generate the interface properties for.
  * @param componentCorePackage The component core package.
  * @param customElementsDir The custom elements directory.
  * @returns The component interface type definition as a string.
  */
-const createComponentTypeDefinition = (tagNameAsPascal, events, componentCorePackage, customElementsDir) => {
+const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, componentCorePackage, customElementsDir) => {
     const publicEvents = events.filter((ev) => !ev.internal);
     const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
         customElementsDir,
+        outputType,
     });
     const eventTypes = publicEvents.map((event) => {
         const comment = createDocComment(event.docs);
@@ -393,11 +422,11 @@ async function copyResources$1(config, outputTarget) {
 function generateProxies(components, pkgData, outputTarget, rootDir) {
     const distTypesDir = path__default['default'].dirname(pkgData.types);
     const dtsFilePath = path__default['default'].join(rootDir, distTypesDir, GENERATED_DTS);
+    const { outputType } = outputTarget;
     const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
-    const includeSingleComponentAngularModules = outputTarget.outputType === 'scam';
-    const includeSingleComponentAngularComponents = outputTarget.outputType === 'standalone';
-    const isCustomElementsBuild = outputTarget.customElementsDir !== undefined;
-    const isStandaloneBuild = outputTarget.outputType === 'standalone';
+    const includeSingleComponentAngularModules = outputType === OutputTypes.Scam;
+    const isCustomElementsBuild = isOutputTypeCustomElementsBuild(outputType);
+    const isStandaloneBuild = outputType === OutputTypes.Standalone;
     const includeOutputImports = components.some((component) => component.events.some((event) => !event.internal));
     /**
      * The collection of named imports from @angular/core.
@@ -439,9 +468,9 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
     let sourceImports = '';
     /**
      * Build an array of Custom Elements build imports and namespace them
-     * so that they do not conflict with the React wrapper names. For example,
+     * so that they do not conflict with the Angular wrapper names. For example,
      * IonButton would be imported as IonButtonCmp so as to not conflict with the
-     * IonButton React Component that takes in the Web Component as a parameter.
+     * IonButton Angular Component that takes in the Web Component as a parameter.
      */
     if (isCustomElementsBuild && outputTarget.componentCorePackage !== undefined) {
         const cmpImports = components.map((component) => {
@@ -450,16 +479,6 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         });
         sourceImports = cmpImports.join('\n');
     }
-    if (!isCustomElementsBuild) {
-        if (includeSingleComponentAngularModules) {
-            // Generating Angular modules is only supported in the dist-custom-elements build
-            throw new Error('Generating single component Angular modules requires the "customElementsDir" option to be set.');
-        }
-        if (includeSingleComponentAngularComponents) {
-            // Generates Angular standalone components is only supported in the dist-custom-elements build
-            throw new Error('Generating standalone Angular components requires the "customElementsDir" option to be set.');
-        }
-    }
     const proxyFileOutput = [];
     const filterInternalProps = (prop) => !prop.internal;
     const mapPropName = (prop) => prop.name;
@@ -490,7 +509,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
          */
         const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, inputs, outputs, methods, isCustomElementsBuild, isStandaloneBuild);
         const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
-        const componentTypeDefinition = createComponentTypeDefinition(tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
+        const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
         proxyFileOutput.push(componentDefinition, '\n');
         if (includeSingleComponentAngularModules) {
             proxyFileOutput.push(moduleDefinition, '\n');
@@ -503,20 +522,23 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
 const GENERATED_DTS = 'components.d.ts';
 const IMPORT_TYPES = 'Components';
 
-const angularOutputTarget = (outputTarget) => ({
-    type: 'custom',
-    name: 'angular-library',
-    validate(config) {
-        return normalizeOutputTarget(config, outputTarget);
-    },
-    async generator(config, compilerCtx, buildCtx) {
-        const timespan = buildCtx.createTimeSpan(`generate angular proxies started`, true);
-        await angularDirectiveProxyOutput(compilerCtx, outputTarget, buildCtx.components, config);
-        timespan.finish(`generate angular proxies finished`);
-    },
-});
+const angularOutputTarget = (outputTarget) => {
+    let validatedOutputTarget;
+    return {
+        type: 'custom',
+        name: 'angular-library',
+        validate(config) {
+            validatedOutputTarget = normalizeOutputTarget(config, outputTarget);
+        },
+        async generator(config, compilerCtx, buildCtx) {
+            const timespan = buildCtx.createTimeSpan(`generate angular proxies started`, true);
+            await angularDirectiveProxyOutput(compilerCtx, validatedOutputTarget, buildCtx.components, config);
+            timespan.finish(`generate angular proxies finished`);
+        },
+    };
+};
 function normalizeOutputTarget(config, outputTarget) {
-    const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [] });
+    const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [], customElementsDir: outputTarget.customElementsDir || 'components', outputType: outputTarget.outputType || OutputTypes.Component });
     if (config.rootDir == null) {
         throw new Error('rootDir is not set and it should be set by stencil itself');
     }
@@ -532,8 +554,8 @@ function normalizeOutputTarget(config, outputTarget) {
     if (outputTarget.includeSingleComponentAngularModules !== undefined) {
         throw new Error("The 'includeSingleComponentAngularModules' option has been removed. Please use 'outputType' instead.");
     }
-    if (outputTarget.outputType === 'scam') {
-        console.warn('**Experimental**: outputType: "scam" is a developer preview feature and may change or be removed in the future.');
+    if (outputTarget.outputType === OutputTypes.Scam) {
+        console.warn(`**Experimental**: outputType: "${OutputTypes.Scam}" is a developer preview feature and may change or be removed in the future.`);
     }
     return results;
 }

package/dist/index.js

@@ -1,6 +1,11 @@
 import path from 'path';
 import { EOL } from 'os';
 
+const OutputTypes = {
+    Component: 'component',
+    Scam: 'scam',
+    Standalone: 'standalone',
+};
 const toLowerCase = (str) => str.toLowerCase();
 const dashToPascalCase = (str) => toLowerCase(str)
     .split('-')
@@ -92,6 +97,14 @@ const createImportStatement = (imports, module) => {
     }
     return `import { ${imports.join(', ')} } from '${module}';`;
 };
+/**
+ * Checks if the outputType is for the custom elements build.
+ * @param outputType The output type.
+ * @returns `true` if the output type is for the custom elements build.
+ */
+const isOutputTypeCustomElementsBuild = (outputType) => {
+    return outputType === OutputTypes.Standalone || outputType === OutputTypes.Scam;
+};
 /**
  * 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).
@@ -103,7 +116,7 @@ const createComponentEventTypeImports = (componentTagName, events, options) => {
     const { componentCorePackage, customElementsDir } = options;
     const imports = [];
     const namedImports = new Set();
-    const isCustomElementsBuild = customElementsDir !== undefined;
+    const isCustomElementsBuild = isOutputTypeCustomElementsBuild(options.outputType);
     const importPathName = normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
     events.forEach((event) => {
         Object.entries(event.complexType.references).forEach(([typeName, refObject]) => {
@@ -194,6 +207,7 @@ export class ${tagNameAsPascal} {
  * @returns The sanitized event type as a string.
  */
 const formatOutputType = (componentClassName, event) => {
+    const prefix = `I${componentClassName}`;
     /**
      * The original attribute contains the original type defined by the devs.
      * This regexp normalizes the reference, by removing linebreaks,
@@ -202,11 +216,24 @@ const formatOutputType = (componentClassName, event) => {
     return Object.entries(event.complexType.references)
         .filter(([_, refObject]) => refObject.location === 'local' || refObject.location === 'import')
         .reduce((type, [src, dst]) => {
-        const renamedType = `I${componentClassName}${type}`;
+        let renamedType = type;
+        if (!type.startsWith(prefix)) {
+            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('')));
+            .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (v, p1, p2) => {
+            if ((dst === null || dst === void 0 ? void 0 : dst.location) === 'import') {
+                /**
+                 * Replaces a complex type reference within a generic type.
+                 * For example, remapping a type like `EventEmitter<CustomEvent<MyEvent<T>>>` to
+                 * `EventEmitter<CustomEvent<IMyComponentMyEvent<IMyComponentT>>>`.
+                 */
+                return [p1, `I${componentClassName}${v.substring(1, v.length - 1)}`, p2].join('');
+            }
+            return [p1, dst, p2].join('');
+        }));
     }, event.complexType.original
         .replace(/\n/g, ' ')
         .replace(/\s{2,}/g, ' ')
@@ -227,17 +254,19 @@ const createDocComment = (doc) => {
 };
 /**
  * Creates the component interface type definition.
+ * @param outputType The output type.
  * @param tagNameAsPascal The tag name as PascalCase.
  * @param events The events to generate the interface properties for.
  * @param componentCorePackage The component core package.
  * @param customElementsDir The custom elements directory.
  * @returns The component interface type definition as a string.
  */
-const createComponentTypeDefinition = (tagNameAsPascal, events, componentCorePackage, customElementsDir) => {
+const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, componentCorePackage, customElementsDir) => {
     const publicEvents = events.filter((ev) => !ev.internal);
     const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
         customElementsDir,
+        outputType,
     });
     const eventTypes = publicEvents.map((event) => {
         const comment = createDocComment(event.docs);
@@ -385,11 +414,11 @@ async function copyResources$1(config, outputTarget) {
 function generateProxies(components, pkgData, outputTarget, rootDir) {
     const distTypesDir = path.dirname(pkgData.types);
     const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
+    const { outputType } = outputTarget;
     const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
-    const includeSingleComponentAngularModules = outputTarget.outputType === 'scam';
-    const includeSingleComponentAngularComponents = outputTarget.outputType === 'standalone';
-    const isCustomElementsBuild = outputTarget.customElementsDir !== undefined;
-    const isStandaloneBuild = outputTarget.outputType === 'standalone';
+    const includeSingleComponentAngularModules = outputType === OutputTypes.Scam;
+    const isCustomElementsBuild = isOutputTypeCustomElementsBuild(outputType);
+    const isStandaloneBuild = outputType === OutputTypes.Standalone;
     const includeOutputImports = components.some((component) => component.events.some((event) => !event.internal));
     /**
      * The collection of named imports from @angular/core.
@@ -431,9 +460,9 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
     let sourceImports = '';
     /**
      * Build an array of Custom Elements build imports and namespace them
-     * so that they do not conflict with the React wrapper names. For example,
+     * so that they do not conflict with the Angular wrapper names. For example,
      * IonButton would be imported as IonButtonCmp so as to not conflict with the
-     * IonButton React Component that takes in the Web Component as a parameter.
+     * IonButton Angular Component that takes in the Web Component as a parameter.
      */
     if (isCustomElementsBuild && outputTarget.componentCorePackage !== undefined) {
         const cmpImports = components.map((component) => {
@@ -442,16 +471,6 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         });
         sourceImports = cmpImports.join('\n');
     }
-    if (!isCustomElementsBuild) {
-        if (includeSingleComponentAngularModules) {
-            // Generating Angular modules is only supported in the dist-custom-elements build
-            throw new Error('Generating single component Angular modules requires the "customElementsDir" option to be set.');
-        }
-        if (includeSingleComponentAngularComponents) {
-            // Generates Angular standalone components is only supported in the dist-custom-elements build
-            throw new Error('Generating standalone Angular components requires the "customElementsDir" option to be set.');
-        }
-    }
     const proxyFileOutput = [];
     const filterInternalProps = (prop) => !prop.internal;
     const mapPropName = (prop) => prop.name;
@@ -482,7 +501,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
          */
         const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, inputs, outputs, methods, isCustomElementsBuild, isStandaloneBuild);
         const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
-        const componentTypeDefinition = createComponentTypeDefinition(tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
+        const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
         proxyFileOutput.push(componentDefinition, '\n');
         if (includeSingleComponentAngularModules) {
             proxyFileOutput.push(moduleDefinition, '\n');
@@ -495,20 +514,23 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
 const GENERATED_DTS = 'components.d.ts';
 const IMPORT_TYPES = 'Components';
 
-const angularOutputTarget = (outputTarget) => ({
-    type: 'custom',
-    name: 'angular-library',
-    validate(config) {
-        return normalizeOutputTarget(config, outputTarget);
-    },
-    async generator(config, compilerCtx, buildCtx) {
-        const timespan = buildCtx.createTimeSpan(`generate angular proxies started`, true);
-        await angularDirectiveProxyOutput(compilerCtx, outputTarget, buildCtx.components, config);
-        timespan.finish(`generate angular proxies finished`);
-    },
-});
+const angularOutputTarget = (outputTarget) => {
+    let validatedOutputTarget;
+    return {
+        type: 'custom',
+        name: 'angular-library',
+        validate(config) {
+            validatedOutputTarget = normalizeOutputTarget(config, outputTarget);
+        },
+        async generator(config, compilerCtx, buildCtx) {
+            const timespan = buildCtx.createTimeSpan(`generate angular proxies started`, true);
+            await angularDirectiveProxyOutput(compilerCtx, validatedOutputTarget, buildCtx.components, config);
+            timespan.finish(`generate angular proxies finished`);
+        },
+    };
+};
 function normalizeOutputTarget(config, outputTarget) {
-    const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [] });
+    const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [], customElementsDir: outputTarget.customElementsDir || 'components', outputType: outputTarget.outputType || OutputTypes.Component });
     if (config.rootDir == null) {
         throw new Error('rootDir is not set and it should be set by stencil itself');
     }
@@ -524,8 +546,8 @@ function normalizeOutputTarget(config, outputTarget) {
     if (outputTarget.includeSingleComponentAngularModules !== undefined) {
         throw new Error("The 'includeSingleComponentAngularModules' option has been removed. Please use 'outputType' instead.");
     }
-    if (outputTarget.outputType === 'scam') {
-        console.warn('**Experimental**: outputType: "scam" is a developer preview feature and may change or be removed in the future.');
+    if (outputTarget.outputType === OutputTypes.Scam) {
+        console.warn(`**Experimental**: outputType: "${OutputTypes.Scam}" is a developer preview feature and may change or be removed in the future.`);
     }
     return results;
 }

package/dist/output-angular.js

@@ -1,5 +1,5 @@
 import path from 'path';
-import { relativeImport, normalizePath, sortBy, readPackageJson, dashToPascalCase, createImportStatement, } from './utils';
+import { relativeImport, normalizePath, sortBy, readPackageJson, dashToPascalCase, createImportStatement, isOutputTypeCustomElementsBuild, OutputTypes, } from './utils';
 import { createAngularComponentDefinition, createComponentTypeDefinition } from './generate-angular-component';
 import { generateAngularDirectivesFile } from './generate-angular-directives-file';
 import generateValueAccessors from './generate-value-accessors';
@@ -37,11 +37,11 @@ async function copyResources(config, outputTarget) {
 export function generateProxies(components, pkgData, outputTarget, rootDir) {
     const distTypesDir = path.dirname(pkgData.types);
     const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
+    const { outputType } = outputTarget;
     const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
-    const includeSingleComponentAngularModules = outputTarget.outputType === 'scam';
-    const includeSingleComponentAngularComponents = outputTarget.outputType === 'standalone';
-    const isCustomElementsBuild = outputTarget.customElementsDir !== undefined;
-    const isStandaloneBuild = outputTarget.outputType === 'standalone';
+    const includeSingleComponentAngularModules = outputType === OutputTypes.Scam;
+    const isCustomElementsBuild = isOutputTypeCustomElementsBuild(outputType);
+    const isStandaloneBuild = outputType === OutputTypes.Standalone;
     const includeOutputImports = components.some((component) => component.events.some((event) => !event.internal));
     /**
      * The collection of named imports from @angular/core.
@@ -83,9 +83,9 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
     let sourceImports = '';
     /**
      * Build an array of Custom Elements build imports and namespace them
-     * so that they do not conflict with the React wrapper names. For example,
+     * so that they do not conflict with the Angular wrapper names. For example,
      * IonButton would be imported as IonButtonCmp so as to not conflict with the
-     * IonButton React Component that takes in the Web Component as a parameter.
+     * IonButton Angular Component that takes in the Web Component as a parameter.
      */
     if (isCustomElementsBuild && outputTarget.componentCorePackage !== undefined) {
         const cmpImports = components.map((component) => {
@@ -94,16 +94,6 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         });
         sourceImports = cmpImports.join('\n');
     }
-    if (!isCustomElementsBuild) {
-        if (includeSingleComponentAngularModules) {
-            // Generating Angular modules is only supported in the dist-custom-elements build
-            throw new Error('Generating single component Angular modules requires the "customElementsDir" option to be set.');
-        }
-        if (includeSingleComponentAngularComponents) {
-            // Generates Angular standalone components is only supported in the dist-custom-elements build
-            throw new Error('Generating standalone Angular components requires the "customElementsDir" option to be set.');
-        }
-    }
     const proxyFileOutput = [];
     const filterInternalProps = (prop) => !prop.internal;
     const mapPropName = (prop) => prop.name;
@@ -134,7 +124,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
          */
         const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, inputs, outputs, methods, isCustomElementsBuild, isStandaloneBuild);
         const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
-        const componentTypeDefinition = createComponentTypeDefinition(tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
+        const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
         proxyFileOutput.push(componentDefinition, '\n');
         if (includeSingleComponentAngularModules) {
             proxyFileOutput.push(moduleDefinition, '\n');

package/dist/plugin.js

@@ -1,20 +1,23 @@
-import { normalizePath } from './utils';
+import { OutputTypes, normalizePath } from './utils';
 import { angularDirectiveProxyOutput } from './output-angular';
 import path from 'path';
-export const angularOutputTarget = (outputTarget) => ({
-    type: 'custom',
-    name: 'angular-library',
-    validate(config) {
-        return normalizeOutputTarget(config, outputTarget);
-    },
-    async generator(config, compilerCtx, buildCtx) {
-        const timespan = buildCtx.createTimeSpan(`generate angular proxies started`, true);
-        await angularDirectiveProxyOutput(compilerCtx, outputTarget, buildCtx.components, config);
-        timespan.finish(`generate angular proxies finished`);
-    },
-});
+export const angularOutputTarget = (outputTarget) => {
+    let validatedOutputTarget;
+    return {
+        type: 'custom',
+        name: 'angular-library',
+        validate(config) {
+            validatedOutputTarget = normalizeOutputTarget(config, outputTarget);
+        },
+        async generator(config, compilerCtx, buildCtx) {
+            const timespan = buildCtx.createTimeSpan(`generate angular proxies started`, true);
+            await angularDirectiveProxyOutput(compilerCtx, validatedOutputTarget, buildCtx.components, config);
+            timespan.finish(`generate angular proxies finished`);
+        },
+    };
+};
 export function normalizeOutputTarget(config, outputTarget) {
-    const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [] });
+    const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], valueAccessorConfigs: outputTarget.valueAccessorConfigs || [], customElementsDir: outputTarget.customElementsDir || 'components', outputType: outputTarget.outputType || OutputTypes.Component });
     if (config.rootDir == null) {
         throw new Error('rootDir is not set and it should be set by stencil itself');
     }
@@ -30,8 +33,8 @@ export function normalizeOutputTarget(config, outputTarget) {
     if (outputTarget.includeSingleComponentAngularModules !== undefined) {
         throw new Error("The 'includeSingleComponentAngularModules' option has been removed. Please use 'outputType' instead.");
     }
-    if (outputTarget.outputType === 'scam') {
-        console.warn('**Experimental**: outputType: "scam" is a developer preview feature and may change or be removed in the future.');
+    if (outputTarget.outputType === OutputTypes.Scam) {
+        console.warn(`**Experimental**: outputType: "${OutputTypes.Scam}" is a developer preview feature and may change or be removed in the future.`);
     }
     return results;
 }

package/dist/types.d.ts

@@ -23,10 +23,10 @@ export interface OutputTargetAngular {
     /**
      * The type of output that should be generated.
      * - `component` - Generate many component wrappers tied to a single Angular module (lazy/hydrated approach).
-     * - `scam` - @experimental Generate a Single Component Angular Module for each component.
+     * - `scam` - **Experimental** - Generate a Single Component Angular Module for each component.
      * - `standalone` - Generate a component with the `standalone` flag set to `true`.
      */
-    outputType: OutputType;
+    outputType?: OutputType;
 }
 export declare type ValueAccessorTypes = 'text' | 'radio' | 'select' | 'number' | 'boolean';
 export interface ValueAccessorConfig {

package/dist/utils.d.ts

@@ -1,5 +1,8 @@
 import { ComponentCompilerEvent, Config } from '@stencil/core/internal';
-import type { PackageJSON } from './types';
+import { OutputType, PackageJSON } from './types';
+export declare const OutputTypes: {
+    [key: string]: OutputType;
+};
 export declare const toLowerCase: (str: string) => string;
 export declare const dashToPascalCase: (str: string) => string;
 export declare function sortBy<T>(array: T[], prop: (item: T) => string): T[];
@@ -21,6 +24,12 @@ export declare const formatToQuotedList: (list: readonly string[]) => string;
  * @returns The import statement as a string.
  */
 export declare const createImportStatement: (imports: string[], module: string) => string;
+/**
+ * Checks if the outputType is for the custom elements build.
+ * @param outputType The output type.
+ * @returns `true` if the output type is for the custom elements build.
+ */
+export declare const isOutputTypeCustomElementsBuild: (outputType: OutputType) => boolean;
 /**
  * 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).
@@ -31,4 +40,5 @@ export declare const createImportStatement: (imports: string[], module: string)
 export declare const createComponentEventTypeImports: (componentTagName: string, events: readonly ComponentCompilerEvent[], options: {
     componentCorePackage: string;
     customElementsDir?: string;
+    outputType: OutputType;
 }) => string;

package/dist/utils.js

@@ -1,4 +1,9 @@
 import path from 'path';
+export const OutputTypes = {
+    Component: 'component',
+    Scam: 'scam',
+    Standalone: 'standalone',
+};
 export const toLowerCase = (str) => str.toLowerCase();
 export const dashToPascalCase = (str) => toLowerCase(str)
     .split('-')
@@ -93,6 +98,14 @@ export const createImportStatement = (imports, module) => {
     }
     return `import { ${imports.join(', ')} } from '${module}';`;
 };
+/**
+ * Checks if the outputType is for the custom elements build.
+ * @param outputType The output type.
+ * @returns `true` if the output type is for the custom elements build.
+ */
+export const isOutputTypeCustomElementsBuild = (outputType) => {
+    return outputType === OutputTypes.Standalone || outputType === OutputTypes.Scam;
+};
 /**
  * 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).
@@ -104,7 +117,7 @@ export const createComponentEventTypeImports = (componentTagName, events, option
     const { componentCorePackage, customElementsDir } = options;
     const imports = [];
     const namedImports = new Set();
-    const isCustomElementsBuild = customElementsDir !== undefined;
+    const isCustomElementsBuild = isOutputTypeCustomElementsBuild(options.outputType);
     const importPathName = normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
     events.forEach((event) => {
         Object.entries(event.complexType.references).forEach(([typeName, refObject]) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/angular-output-target",
-  "version": "0.8.1-dev.11690825475.1243803f",
+  "version": "0.8.2",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -58,7 +58,7 @@
     ],
     "testURL": "http://localhost"
   },
-  "gitHead": "243803f02d0675190181da7ed8ad6ff432c3ee1d",
+  "gitHead": "a3588e905186a0e86e7f88418fd5b2f9531b55e0",
   "volta": {
     "extends": "../../package.json"
   }