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

package/README.md

@@ -27,6 +27,7 @@ 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',
     }),
@@ -40,12 +41,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. 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"`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |

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

@@ -7,16 +7,16 @@ 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 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: (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;
@@ -101,15 +106,13 @@ const createDocComment = (doc) => {
  * @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 = (tagNameAsPascal, events, componentCorePackage, customElementsDir) => {
     const publicEvents = events.filter((ev) => !ev.internal);
     const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
-        includeImportCustomElements,
         customElementsDir,
     });
     const eventTypes = publicEvents.map((event) => {

package/dist/index.cjs.js

@@ -108,10 +108,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 = customElementsDir !== undefined;
+    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 +139,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 +164,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 +181,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;
@@ -232,15 +238,13 @@ const createDocComment = (doc) => {
  * @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 = (tagNameAsPascal, events, componentCorePackage, customElementsDir) => {
     const publicEvents = events.filter((ev) => !ev.internal);
     const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
-        includeImportCustomElements,
         customElementsDir,
     });
     const eventTypes = publicEvents.map((event) => {
@@ -387,11 +391,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 componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
-    const includeSingleComponentAngularModules = (_a = outputTarget.includeSingleComponentAngularModules) !== null && _a !== void 0 ? _a : false;
+    const includeSingleComponentAngularModules = outputTarget.outputType === 'scam';
+    const includeSingleComponentAngularComponents = outputTarget.outputType === 'standalone';
+    const isCustomElementsBuild = outputTarget.customElementsDir !== undefined;
+    const isStandaloneBuild = outputTarget.outputType === 'standalone';
     const includeOutputImports = components.some((component) => component.events.some((event) => !event.internal));
     /**
      * The collection of named imports from @angular/core.
@@ -426,10 +432,8 @@ ${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 = '';
@@ -439,23 +443,27 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
      * 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.
      */
-    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.');
+    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;
-    const { includeImportCustomElements, componentCorePackage, customElementsDir } = outputTarget;
+    const { componentCorePackage, customElementsDir } = outputTarget;
     for (let cmpMeta of components) {
         const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
         const inputs = [];
@@ -480,9 +488,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(tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
         proxyFileOutput.push(componentDefinition, '\n');
         if (includeSingleComponentAngularModules) {
             proxyFileOutput.push(moduleDefinition, '\n');
@@ -522,7 +530,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 === 'scam') {
+        console.warn('**Experimental**: outputType: "scam" is a developer preview feature and may change or be removed in the future.');
     }
     return results;
 }

package/dist/index.js

@@ -100,10 +100,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 = customElementsDir !== undefined;
+    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 +131,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 +156,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 +173,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;
@@ -224,15 +230,13 @@ const createDocComment = (doc) => {
  * @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 = (tagNameAsPascal, events, componentCorePackage, customElementsDir) => {
     const publicEvents = events.filter((ev) => !ev.internal);
     const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
-        includeImportCustomElements,
         customElementsDir,
     });
     const eventTypes = publicEvents.map((event) => {
@@ -379,11 +383,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 componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
-    const includeSingleComponentAngularModules = (_a = outputTarget.includeSingleComponentAngularModules) !== null && _a !== void 0 ? _a : false;
+    const includeSingleComponentAngularModules = outputTarget.outputType === 'scam';
+    const includeSingleComponentAngularComponents = outputTarget.outputType === 'standalone';
+    const isCustomElementsBuild = outputTarget.customElementsDir !== undefined;
+    const isStandaloneBuild = outputTarget.outputType === 'standalone';
     const includeOutputImports = components.some((component) => component.events.some((event) => !event.internal));
     /**
      * The collection of named imports from @angular/core.
@@ -418,10 +424,8 @@ ${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 = '';
@@ -431,23 +435,27 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
      * 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.
      */
-    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.');
+    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;
-    const { includeImportCustomElements, componentCorePackage, customElementsDir } = outputTarget;
+    const { componentCorePackage, customElementsDir } = outputTarget;
     for (let cmpMeta of components) {
         const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
         const inputs = [];
@@ -472,9 +480,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(tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
         proxyFileOutput.push(componentDefinition, '\n');
         if (includeSingleComponentAngularModules) {
             proxyFileOutput.push(moduleDefinition, '\n');
@@ -514,7 +522,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 === 'scam') {
+        console.warn('**Experimental**: outputType: "scam" is a developer preview feature and may change or be removed in the future.');
     }
     return results;
 }

package/dist/output-angular.js

@@ -35,11 +35,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 componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
-    const includeSingleComponentAngularModules = (_a = outputTarget.includeSingleComponentAngularModules) !== null && _a !== void 0 ? _a : false;
+    const includeSingleComponentAngularModules = outputTarget.outputType === 'scam';
+    const includeSingleComponentAngularComponents = outputTarget.outputType === 'standalone';
+    const isCustomElementsBuild = outputTarget.customElementsDir !== undefined;
+    const isStandaloneBuild = outputTarget.outputType === 'standalone';
     const includeOutputImports = components.some((component) => component.events.some((event) => !event.internal));
     /**
      * The collection of named imports from @angular/core.
@@ -74,10 +76,8 @@ ${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 = '';
@@ -87,23 +87,27 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
      * 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.
      */
-    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.');
+    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;
-    const { includeImportCustomElements, componentCorePackage, customElementsDir } = outputTarget;
+    const { componentCorePackage, customElementsDir } = outputTarget;
     for (let cmpMeta of components) {
         const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
         const inputs = [];
@@ -128,9 +132,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(tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
         proxyFileOutput.push(componentDefinition, '\n');
         if (includeSingleComponentAngularModules) {
             proxyFileOutput.push(moduleDefinition, '\n');

package/dist/plugin.js

@@ -28,7 +28,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 === 'scam') {
+        console.warn('**Experimental**: 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,10 @@
+/**
+ * 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 type OutputType = 'component' | 'scam' | 'standalone';
 export interface OutputTargetAngular {
     /**
      * The package name of the component library.
@@ -12,14 +19,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/utils.d.ts

@@ -30,6 +30,5 @@ export declare const createImportStatement: (imports: string[], module: string)
  */
 export declare const createComponentEventTypeImports: (componentTagName: string, events: readonly ComponentCompilerEvent[], options: {
     componentCorePackage: string;
-    includeImportCustomElements?: boolean;
     customElementsDir?: string;
 }) => string;

package/dist/utils.js

@@ -101,10 +101,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 = customElementsDir !== undefined;
+    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.8.1-dev.11690825475.1243803f",
   "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": "243803f02d0675190181da7ed8ad6ff432c3ee1d",
   "volta": {
     "extends": "../../package.json"
   }