@stencil/angular-output-target 0.7.0 → 0.7.2-dev.11691590901.1db83f93

package/README.md

@@ -40,12 +40,12 @@ export const config: Config = {
 
 ## Config Options
 
-| Property                      | Description                                                                                                                                                                                                                                                                                                                      |
-| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `componentCorePackage`        | The NPM package name of your Stencil component library. This package is used as a dependency for your Angular wrappers.                                                                                                                                                                                                          |
-| `directivesProxyFile`         | The output file of all the component wrappers generated by the output target. This file path should point to a location within your Angular library/project.                                                                                                                                                                     |
-| `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.                                                                                                              |
-| `includeImportCustomElements` | If `true`, the output target will import the custom element instance and register it with the Custom Elements Registry when the component is imported inside of a user's app. This can only be used with the [Custom Elements Bundle](https://stenciljs.com/docs/custom-elements) and will not work with lazy loaded components. |
-| `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 when `includeImportCustomElements` is `true`.                                                                        |
+| Property               | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `componentCorePackage` | The NPM package name of your Stencil component library. This package is used as a dependency for your Angular wrappers.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `directivesProxyFile`  | The output file of all the component wrappers generated by the output target. This file path should point to a location within your Angular library/project.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `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. <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.
  *
@@ -7,16 +8,17 @@ import type { ComponentCompilerEvent } from '@stencil/core/internal';
  * @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.
+ * @param standalone Whether to define the component as a standalone component.
  * @returns The component declaration as a string.
  */
-export declare const createAngularComponentDefinition: (tagName: string, inputs: readonly string[], outputs: readonly string[], methods: readonly string[], includeImportCustomElements?: boolean) => string;
+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 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.
  */
-export declare const createComponentTypeDefinition: (tagNameAsPascal: string, events: readonly ComponentCompilerEvent[], componentCorePackage: string, includeImportCustomElements?: boolean, 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

@@ -7,9 +7,10 @@ import { createComponentEventTypeImports, dashToPascalCase, formatToQuotedList }
  * @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.
+ * @param standalone Whether to define the component as a standalone component.
  * @returns The component declaration as a string.
  */
-export const createAngularComponentDefinition = (tagName, inputs, outputs, methods, includeImportCustomElements = false) => {
+export const createAngularComponentDefinition = (tagName, inputs, outputs, methods, includeImportCustomElements = false, standalone = false) => {
     const tagNameAsPascal = dashToPascalCase(tagName);
     const hasInputs = inputs.length > 0;
     const hasOutputs = outputs.length > 0;
@@ -31,6 +32,10 @@ export const createAngularComponentDefinition = (tagName, inputs, outputs, metho
     if (hasMethods) {
         proxyCmpOptions.push(`\n  methods: [${formattedMethods}]`);
     }
+    let standaloneOption = '';
+    if (standalone && includeImportCustomElements) {
+        standaloneOption = `\n  standalone: true`;
+    }
     /**
      * Notes on the generated output:
      * - We disable @angular-eslint/no-inputs-metadata-property, so that
@@ -44,7 +49,7 @@ export const createAngularComponentDefinition = (tagName, inputs, outputs, metho
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: [${formattedInputs}],
+  inputs: [${formattedInputs}],${standaloneOption}
 })
 export class ${tagNameAsPascal} {
   protected el: HTMLElement;
@@ -98,19 +103,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 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.
  */
-export const createComponentTypeDefinition = (tagNameAsPascal, events, componentCorePackage, includeImportCustomElements = false, customElementsDir) => {
+export const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, componentCorePackage, customElementsDir) => {
     const publicEvents = events.filter((ev) => !ev.internal);
     const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
-        includeImportCustomElements,
         customElementsDir,
+        outputType,
     });
     const eventTypes = publicEvents.map((event) => {
         const comment = createDocComment(event.docs);

package/dist/index.cjs.js

@@ -9,6 +9,19 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var path__default = /*#__PURE__*/_interopDefaultLegacy(path);
 
+/**
+ * The type of output that can be generated with the Angular output target.
+ * - `component` - Generate many component wrappers tied to a single Angular module (lazy/hydrated approach).
+ * - `scam` - Generate a Single Component Angular Module for each component.
+ * - `standalone` - Generate a component with the `standalone` flag set to `true`.
+ */
+var OutputType;
+(function (OutputType) {
+    OutputType["Component"] = "component";
+    OutputType["Scam"] = "scam";
+    OutputType["Standalone"] = "standalone";
+})(OutputType || (OutputType = {}));
+
 const toLowerCase = (str) => str.toLowerCase();
 const dashToPascalCase = (str) => toLowerCase(str)
     .split('-')
@@ -100,6 +113,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 === OutputType.Standalone || outputType === OutputType.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).
@@ -108,10 +129,11 @@ const createImportStatement = (imports, module) => {
  * @returns The import statements as an array of strings.
  */
 const createComponentEventTypeImports = (componentTagName, events, options) => {
-    const { componentCorePackage, includeImportCustomElements, customElementsDir } = options;
+    const { componentCorePackage, customElementsDir } = options;
     const imports = [];
     const namedImports = new Set();
-    const importPathName = normalizePath(componentCorePackage) + (includeImportCustomElements ? `/${customElementsDir || 'components'}` : '');
+    const isCustomElementsBuild = isOutputTypeCustomElementsBuild(options.outputType);
+    const importPathName = normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
     events.forEach((event) => {
         Object.entries(event.complexType.references).forEach(([typeName, refObject]) => {
             if (refObject.location === 'local' || refObject.location === 'import') {
@@ -138,9 +160,10 @@ const SLASH_REGEX = /\\/g;
  * @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.
+ * @param standalone Whether to define the component as a standalone component.
  * @returns The component declaration as a string.
  */
-const createAngularComponentDefinition = (tagName, inputs, outputs, methods, includeImportCustomElements = false) => {
+const createAngularComponentDefinition = (tagName, inputs, outputs, methods, includeImportCustomElements = false, standalone = false) => {
     const tagNameAsPascal = dashToPascalCase(tagName);
     const hasInputs = inputs.length > 0;
     const hasOutputs = outputs.length > 0;
@@ -162,6 +185,10 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
     if (hasMethods) {
         proxyCmpOptions.push(`\n  methods: [${formattedMethods}]`);
     }
+    let standaloneOption = '';
+    if (standalone && includeImportCustomElements) {
+        standaloneOption = `\n  standalone: true`;
+    }
     /**
      * Notes on the generated output:
      * - We disable @angular-eslint/no-inputs-metadata-property, so that
@@ -175,7 +202,7 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: [${formattedInputs}],
+  inputs: [${formattedInputs}],${standaloneOption}
 })
 export class ${tagNameAsPascal} {
   protected el: HTMLElement;
@@ -229,19 +256,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 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 createComponentTypeDefinition = (outputType, tagNameAsPascal, events, componentCorePackage, customElementsDir) => {
     const publicEvents = events.filter((ev) => !ev.internal);
     const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
-        includeImportCustomElements,
         customElementsDir,
+        outputType,
     });
     const eventTypes = publicEvents.map((event) => {
         const comment = createDocComment(event.docs);
@@ -387,11 +414,13 @@ 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 { outputType } = outputTarget;
     const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
-    const includeSingleComponentAngularModules = (_a = outputTarget.includeSingleComponentAngularModules) !== null && _a !== void 0 ? _a : false;
+    const includeSingleComponentAngularModules = outputType === OutputType.Scam;
+    const isCustomElementsBuild = isOutputTypeCustomElementsBuild(outputType);
+    const isStandaloneBuild = outputType === OutputType.Standalone;
     const includeOutputImports = components.some((component) => component.events.some((event) => !event.internal));
     /**
      * The collection of named imports from @angular/core.
@@ -426,36 +455,28 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         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`;
+        importLocation += isCustomElementsBuild ? `/${outputTarget.customElementsDir}` : '';
+        return `import ${isCustomElementsBuild ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
     };
     const typeImports = generateTypeImports();
     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 (outputTarget.includeImportCustomElements && outputTarget.componentCorePackage !== undefined) {
+    if (isCustomElementsBuild && outputTarget.componentCorePackage !== undefined) {
         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}/${component.tagName}.js';`;
         });
         sourceImports = cmpImports.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;
+    const { componentCorePackage, customElementsDir } = outputTarget;
     for (let cmpMeta of components) {
         const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
         const inputs = [];
@@ -480,9 +501,9 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
          * 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 componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, inputs, outputs, methods, isCustomElementsBuild, isStandaloneBuild);
         const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
-        const componentTypeDefinition = createComponentTypeDefinition(tagNameAsPascal, cmpMeta.events, componentCorePackage, includeImportCustomElements, customElementsDir);
+        const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
         proxyFileOutput.push(componentDefinition, '\n');
         if (includeSingleComponentAngularModules) {
             proxyFileOutput.push(moduleDefinition, '\n');
@@ -508,7 +529,7 @@ const angularOutputTarget = (outputTarget) => ({
     },
 });
 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 || OutputType.Component });
     if (config.rootDir == null) {
         throw new Error('rootDir is not set and it should be set by stencil itself');
     }
@@ -522,7 +543,10 @@ function normalizeOutputTarget(config, outputTarget) {
         results.directivesArrayFile = normalizePath(path__default['default'].join(config.rootDir, outputTarget.directivesArrayFile));
     }
     if (outputTarget.includeSingleComponentAngularModules !== undefined) {
-        console.warn('**Experimental**: includeSingleComponentAngularModules is a developer preview feature and may change or be removed in the future.');
+        throw new Error("The 'includeSingleComponentAngularModules' option has been removed. Please use 'outputType' instead.");
+    }
+    if (outputTarget.outputType === OutputType.Scam) {
+        console.warn(`**Experimental**: outputType: "${OutputType.Scam}" is a developer preview feature and may change or be removed in the future.`);
     }
     return results;
 }

package/dist/index.js

@@ -1,6 +1,19 @@
 import path from 'path';
 import { EOL } from 'os';
 
+/**
+ * The type of output that can be generated with the Angular output target.
+ * - `component` - Generate many component wrappers tied to a single Angular module (lazy/hydrated approach).
+ * - `scam` - Generate a Single Component Angular Module for each component.
+ * - `standalone` - Generate a component with the `standalone` flag set to `true`.
+ */
+var OutputType;
+(function (OutputType) {
+    OutputType["Component"] = "component";
+    OutputType["Scam"] = "scam";
+    OutputType["Standalone"] = "standalone";
+})(OutputType || (OutputType = {}));
+
 const toLowerCase = (str) => str.toLowerCase();
 const dashToPascalCase = (str) => toLowerCase(str)
     .split('-')
@@ -92,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 === OutputType.Standalone || outputType === OutputType.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).
@@ -100,10 +121,11 @@ const createImportStatement = (imports, module) => {
  * @returns The import statements as an array of strings.
  */
 const createComponentEventTypeImports = (componentTagName, events, options) => {
-    const { componentCorePackage, includeImportCustomElements, customElementsDir } = options;
+    const { componentCorePackage, customElementsDir } = options;
     const imports = [];
     const namedImports = new Set();
-    const importPathName = normalizePath(componentCorePackage) + (includeImportCustomElements ? `/${customElementsDir || 'components'}` : '');
+    const isCustomElementsBuild = isOutputTypeCustomElementsBuild(options.outputType);
+    const importPathName = normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
     events.forEach((event) => {
         Object.entries(event.complexType.references).forEach(([typeName, refObject]) => {
             if (refObject.location === 'local' || refObject.location === 'import') {
@@ -130,9 +152,10 @@ const SLASH_REGEX = /\\/g;
  * @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.
+ * @param standalone Whether to define the component as a standalone component.
  * @returns The component declaration as a string.
  */
-const createAngularComponentDefinition = (tagName, inputs, outputs, methods, includeImportCustomElements = false) => {
+const createAngularComponentDefinition = (tagName, inputs, outputs, methods, includeImportCustomElements = false, standalone = false) => {
     const tagNameAsPascal = dashToPascalCase(tagName);
     const hasInputs = inputs.length > 0;
     const hasOutputs = outputs.length > 0;
@@ -154,6 +177,10 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
     if (hasMethods) {
         proxyCmpOptions.push(`\n  methods: [${formattedMethods}]`);
     }
+    let standaloneOption = '';
+    if (standalone && includeImportCustomElements) {
+        standaloneOption = `\n  standalone: true`;
+    }
     /**
      * Notes on the generated output:
      * - We disable @angular-eslint/no-inputs-metadata-property, so that
@@ -167,7 +194,7 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: [${formattedInputs}],
+  inputs: [${formattedInputs}],${standaloneOption}
 })
 export class ${tagNameAsPascal} {
   protected el: HTMLElement;
@@ -221,19 +248,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 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 createComponentTypeDefinition = (outputType, tagNameAsPascal, events, componentCorePackage, customElementsDir) => {
     const publicEvents = events.filter((ev) => !ev.internal);
     const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
-        includeImportCustomElements,
         customElementsDir,
+        outputType,
     });
     const eventTypes = publicEvents.map((event) => {
         const comment = createDocComment(event.docs);
@@ -379,11 +406,13 @@ async function copyResources$1(config, outputTarget) {
     ], srcDirectory);
 }
 function generateProxies(components, pkgData, outputTarget, rootDir) {
-    var _a;
     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 = (_a = outputTarget.includeSingleComponentAngularModules) !== null && _a !== void 0 ? _a : false;
+    const includeSingleComponentAngularModules = outputType === OutputType.Scam;
+    const isCustomElementsBuild = isOutputTypeCustomElementsBuild(outputType);
+    const isStandaloneBuild = outputType === OutputType.Standalone;
     const includeOutputImports = components.some((component) => component.events.some((event) => !event.internal));
     /**
      * The collection of named imports from @angular/core.
@@ -418,36 +447,28 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         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`;
+        importLocation += isCustomElementsBuild ? `/${outputTarget.customElementsDir}` : '';
+        return `import ${isCustomElementsBuild ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
     };
     const typeImports = generateTypeImports();
     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 (outputTarget.includeImportCustomElements && outputTarget.componentCorePackage !== undefined) {
+    if (isCustomElementsBuild && outputTarget.componentCorePackage !== undefined) {
         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}/${component.tagName}.js';`;
         });
         sourceImports = cmpImports.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;
+    const { componentCorePackage, customElementsDir } = outputTarget;
     for (let cmpMeta of components) {
         const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
         const inputs = [];
@@ -472,9 +493,9 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
          * 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 componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, inputs, outputs, methods, isCustomElementsBuild, isStandaloneBuild);
         const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
-        const componentTypeDefinition = createComponentTypeDefinition(tagNameAsPascal, cmpMeta.events, componentCorePackage, includeImportCustomElements, customElementsDir);
+        const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
         proxyFileOutput.push(componentDefinition, '\n');
         if (includeSingleComponentAngularModules) {
             proxyFileOutput.push(moduleDefinition, '\n');
@@ -500,7 +521,7 @@ const angularOutputTarget = (outputTarget) => ({
     },
 });
 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 || OutputType.Component });
     if (config.rootDir == null) {
         throw new Error('rootDir is not set and it should be set by stencil itself');
     }
@@ -514,7 +535,10 @@ function normalizeOutputTarget(config, outputTarget) {
         results.directivesArrayFile = normalizePath(path.join(config.rootDir, outputTarget.directivesArrayFile));
     }
     if (outputTarget.includeSingleComponentAngularModules !== undefined) {
-        console.warn('**Experimental**: includeSingleComponentAngularModules is a developer preview feature and may change or be removed in the future.');
+        throw new Error("The 'includeSingleComponentAngularModules' option has been removed. Please use 'outputType' instead.");
+    }
+    if (outputTarget.outputType === OutputType.Scam) {
+        console.warn(`**Experimental**: outputType: "${OutputType.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,6 @@
 import path from 'path';
-import { relativeImport, normalizePath, sortBy, readPackageJson, dashToPascalCase, createImportStatement, } from './utils';
+import { OutputType } from './types';
+import { relativeImport, normalizePath, sortBy, readPackageJson, dashToPascalCase, createImportStatement, isOutputTypeCustomElementsBuild, } from './utils';
 import { createAngularComponentDefinition, createComponentTypeDefinition } from './generate-angular-component';
 import { generateAngularDirectivesFile } from './generate-angular-directives-file';
 import generateValueAccessors from './generate-value-accessors';
@@ -35,11 +36,13 @@ async function copyResources(config, outputTarget) {
     ], srcDirectory);
 }
 export function generateProxies(components, pkgData, outputTarget, rootDir) {
-    var _a;
     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 = (_a = outputTarget.includeSingleComponentAngularModules) !== null && _a !== void 0 ? _a : false;
+    const includeSingleComponentAngularModules = outputType === OutputType.Scam;
+    const isCustomElementsBuild = isOutputTypeCustomElementsBuild(outputType);
+    const isStandaloneBuild = outputType === OutputType.Standalone;
     const includeOutputImports = components.some((component) => component.events.some((event) => !event.internal));
     /**
      * The collection of named imports from @angular/core.
@@ -74,36 +77,28 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         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`;
+        importLocation += isCustomElementsBuild ? `/${outputTarget.customElementsDir}` : '';
+        return `import ${isCustomElementsBuild ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
     };
     const typeImports = generateTypeImports();
     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 (outputTarget.includeImportCustomElements && outputTarget.componentCorePackage !== undefined) {
+    if (isCustomElementsBuild && outputTarget.componentCorePackage !== undefined) {
         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}/${component.tagName}.js';`;
         });
         sourceImports = cmpImports.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;
+    const { componentCorePackage, customElementsDir } = outputTarget;
     for (let cmpMeta of components) {
         const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
         const inputs = [];
@@ -128,9 +123,9 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
          * 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 componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, inputs, outputs, methods, isCustomElementsBuild, isStandaloneBuild);
         const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
-        const componentTypeDefinition = createComponentTypeDefinition(tagNameAsPascal, cmpMeta.events, componentCorePackage, includeImportCustomElements, 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,5 +1,6 @@
 import { normalizePath } from './utils';
 import { angularDirectiveProxyOutput } from './output-angular';
+import { OutputType } from './types';
 import path from 'path';
 export const angularOutputTarget = (outputTarget) => ({
     type: 'custom',
@@ -14,7 +15,7 @@ export const angularOutputTarget = (outputTarget) => ({
     },
 });
 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 || OutputType.Component });
     if (config.rootDir == null) {
         throw new Error('rootDir is not set and it should be set by stencil itself');
     }
@@ -28,7 +29,10 @@ export function normalizeOutputTarget(config, outputTarget) {
         results.directivesArrayFile = normalizePath(path.join(config.rootDir, outputTarget.directivesArrayFile));
     }
     if (outputTarget.includeSingleComponentAngularModules !== undefined) {
-        console.warn('**Experimental**: includeSingleComponentAngularModules is a developer preview feature and may change or be removed in the future.');
+        throw new Error("The 'includeSingleComponentAngularModules' option has been removed. Please use 'outputType' instead.");
+    }
+    if (outputTarget.outputType === OutputType.Scam) {
+        console.warn(`**Experimental**: outputType: "${OutputType.Scam}" is a developer preview feature and may change or be removed in the future.`);
     }
     return results;
 }

package/dist/types.d.ts

@@ -1,3 +1,14 @@
+/**
+ * The type of output that can be generated with the Angular output target.
+ * - `component` - Generate many component wrappers tied to a single Angular module (lazy/hydrated approach).
+ * - `scam` - Generate a Single Component Angular Module for each component.
+ * - `standalone` - Generate a component with the `standalone` flag set to `true`.
+ */
+export declare enum OutputType {
+    Component = "component",
+    Scam = "scam",
+    Standalone = "standalone"
+}
 export interface OutputTargetAngular {
     /**
      * The package name of the component library.
@@ -12,14 +23,14 @@ export interface OutputTargetAngular {
     directivesArrayFile?: string;
     valueAccessorConfigs?: ValueAccessorConfig[];
     excludeComponents?: string[];
-    includeImportCustomElements?: boolean;
     customElementsDir?: string;
     /**
-     * @experimental
-     *
-     * `true` to generate a single component Angular module for each component.
+     * 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.
+     * - `standalone` - Generate a component with the `standalone` flag set to `true`.
      */
-    includeSingleComponentAngularModules?: boolean;
+    outputType: OutputType;
 }
 export declare type ValueAccessorTypes = 'text' | 'radio' | 'select' | 'number' | 'boolean';
 export interface ValueAccessorConfig {

package/dist/types.js

@@ -0,0 +1,12 @@
+/**
+ * The type of output that can be generated with the Angular output target.
+ * - `component` - Generate many component wrappers tied to a single Angular module (lazy/hydrated approach).
+ * - `scam` - Generate a Single Component Angular Module for each component.
+ * - `standalone` - Generate a component with the `standalone` flag set to `true`.
+ */
+export var OutputType;
+(function (OutputType) {
+    OutputType["Component"] = "component";
+    OutputType["Scam"] = "scam";
+    OutputType["Standalone"] = "standalone";
+})(OutputType || (OutputType = {}));

package/dist/utils.d.ts

@@ -1,5 +1,5 @@
 import { ComponentCompilerEvent, Config } from '@stencil/core/internal';
-import type { PackageJSON } from './types';
+import { OutputType, PackageJSON } from './types';
 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 +21,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).
@@ -30,6 +36,6 @@ export declare const createImportStatement: (imports: string[], module: string)
  */
 export declare const createComponentEventTypeImports: (componentTagName: string, events: readonly ComponentCompilerEvent[], options: {
     componentCorePackage: string;
-    includeImportCustomElements?: boolean;
     customElementsDir?: string;
+    outputType: OutputType;
 }) => string;

package/dist/utils.js

@@ -1,4 +1,5 @@
 import path from 'path';
+import { OutputType } from './types';
 export const toLowerCase = (str) => str.toLowerCase();
 export const dashToPascalCase = (str) => toLowerCase(str)
     .split('-')
@@ -93,6 +94,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 === OutputType.Standalone || outputType === OutputType.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).
@@ -101,10 +110,11 @@ export const createImportStatement = (imports, module) => {
  * @returns The import statements as an array of strings.
  */
 export const createComponentEventTypeImports = (componentTagName, events, options) => {
-    const { componentCorePackage, includeImportCustomElements, customElementsDir } = options;
+    const { componentCorePackage, customElementsDir } = options;
     const imports = [];
     const namedImports = new Set();
-    const importPathName = normalizePath(componentCorePackage) + (includeImportCustomElements ? `/${customElementsDir || 'components'}` : '');
+    const isCustomElementsBuild = isOutputTypeCustomElementsBuild(options.outputType);
+    const importPathName = normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
     events.forEach((event) => {
         Object.entries(event.complexType.references).forEach(([typeName, refObject]) => {
             if (refObject.location === 'local' || refObject.location === 'import') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/angular-output-target",
-  "version": "0.7.0",
+  "version": "0.7.2-dev.11691590901.1db83f93",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -42,7 +42,7 @@
     "@angular/forms": "8.2.14"
   },
   "peerDependencies": {
-    "@stencil/core": "^2.9.0 || ^3.0.0"
+    "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
   },
   "jest": {
     "transform": {
@@ -58,7 +58,7 @@
     ],
     "testURL": "http://localhost"
   },
-  "gitHead": "a3588e905186a0e86e7f88418fd5b2f9531b55e0",
+  "gitHead": "db83f93bf80266494560db9c21d19f8f31a95df2",
   "volta": {
     "extends": "../../package.json"
   }