@stencil/angular-output-target 1.2.0 → 1.3.1

package/dist/generate-angular-component.js

@@ -89,7 +89,7 @@ export const createAngularComponentDefinition = (tagName, inputs, methods, inclu
     const outputDeclarations = events
         .filter((event) => !event.internal)
         .map((event) => {
-        const camelCaseOutput = event.name.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+        const camelCaseOutput = event.name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
         const outputType = `EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`;
         return `@Output() ${camelCaseOutput} = new ${outputType}();`;
     });
@@ -137,7 +137,7 @@ const formatOutputType = (componentClassName, event) => {
      */
     return Object.entries(event.complexType.references)
         .filter(([_, refObject]) => refObject.location === 'local' || refObject.location === 'import')
-        .reduce((type, [src, dst]) => {
+        .reduce((type, [src]) => {
         let renamedType = type;
         if (!type.startsWith(prefix)) {
             if (type.startsWith('{') && type.endsWith('}')) {
@@ -157,28 +157,28 @@ const formatOutputType = (componentClassName, event) => {
                 renamedType = `I${componentClassName}${type}`;
             }
         }
+        const prefixedTypeName = `${prefix}${src}`;
         return (renamedType
-            .replace(new RegExp(`^${src}$`, 'g'), `${dst}`)
+            .replace(new RegExp(`^${src}$`, 'g'), prefixedTypeName)
             // Capture all instances of the `src` field surrounded by non-word characters on each side and join them.
-            .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (v, p1, p2) => {
-            if ((dst === null || dst === void 0 ? void 0 : dst.location) === 'import') {
-                /**
-                 * Replaces a complex type reference within a generic type.
-                 * For example, remapping a type like `EventEmitter<CustomEvent<MyEvent<T>>>` to
-                 * `EventEmitter<CustomEvent<IMyComponentMyEvent<IMyComponentT>>>`.
-                 */
-                return [p1, `I${componentClassName}${v.substring(1, v.length - 1)}`, p2].join('');
-            }
-            return [p1, dst, p2].join('');
+            .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (_, p1, p2) => {
+            /**
+             * Replaces a complex type reference within a generic type.
+             * For example, remapping a type like `EventEmitter<CustomEvent<MyEvent<T>>>` to
+             * `EventEmitter<CustomEvent<IMyComponentMyEvent<IMyComponentT>>>`.
+             */
+            return [p1, prefixedTypeName, p2].join('');
         })
             // Capture all instances that contain sub types, e.g. `IMyComponent.SomeMoreComplexType.SubType`.
             .replace(new RegExp(`^${src}(\.\\w+)+$`, 'g'), (type) => {
-            return `I${componentClassName}${src}.${type.split('.').slice(1).join('.')}`;
+            return `${prefix}${src}.${type.split('.').slice(1).join('.')}`;
         }));
     }, event.complexType.original
+        .replace(/\/\/.*$/gm, '') // Remove single-line comments before collapsing newlines
         .replace(/\n/g, ' ')
         .replace(/\s{2,}/g, ' ')
-        .replace(/,\s*/g, ', '));
+        .replace(/,\s*/g, ', ')
+        .trim());
 };
 /**
  * Creates a formatted comment block based on the JS doc comment.

package/dist/index.cjs.js

@@ -235,7 +235,7 @@ const createAngularComponentDefinition = (tagName, inputs, methods, includeImpor
     const outputDeclarations = events
         .filter((event) => !event.internal)
         .map((event) => {
-        const camelCaseOutput = event.name.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+        const camelCaseOutput = event.name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
         const outputType = `EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`;
         return `@Output() ${camelCaseOutput} = new ${outputType}();`;
     });
@@ -283,7 +283,7 @@ const formatOutputType = (componentClassName, event) => {
      */
     return Object.entries(event.complexType.references)
         .filter(([_, refObject]) => refObject.location === 'local' || refObject.location === 'import')
-        .reduce((type, [src, dst]) => {
+        .reduce((type, [src]) => {
         let renamedType = type;
         if (!type.startsWith(prefix)) {
             if (type.startsWith('{') && type.endsWith('}')) {
@@ -303,28 +303,28 @@ const formatOutputType = (componentClassName, event) => {
                 renamedType = `I${componentClassName}${type}`;
             }
         }
+        const prefixedTypeName = `${prefix}${src}`;
         return (renamedType
-            .replace(new RegExp(`^${src}$`, 'g'), `${dst}`)
+            .replace(new RegExp(`^${src}$`, 'g'), prefixedTypeName)
             // Capture all instances of the `src` field surrounded by non-word characters on each side and join them.
-            .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (v, p1, p2) => {
-            if ((dst === null || dst === void 0 ? void 0 : dst.location) === 'import') {
-                /**
-                 * Replaces a complex type reference within a generic type.
-                 * For example, remapping a type like `EventEmitter<CustomEvent<MyEvent<T>>>` to
-                 * `EventEmitter<CustomEvent<IMyComponentMyEvent<IMyComponentT>>>`.
-                 */
-                return [p1, `I${componentClassName}${v.substring(1, v.length - 1)}`, p2].join('');
-            }
-            return [p1, dst, p2].join('');
+            .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (_, p1, p2) => {
+            /**
+             * Replaces a complex type reference within a generic type.
+             * For example, remapping a type like `EventEmitter<CustomEvent<MyEvent<T>>>` to
+             * `EventEmitter<CustomEvent<IMyComponentMyEvent<IMyComponentT>>>`.
+             */
+            return [p1, prefixedTypeName, p2].join('');
         })
             // Capture all instances that contain sub types, e.g. `IMyComponent.SomeMoreComplexType.SubType`.
             .replace(new RegExp(`^${src}(\.\\w+)+$`, 'g'), (type) => {
-            return `I${componentClassName}${src}.${type.split('.').slice(1).join('.')}`;
+            return `${prefix}${src}.${type.split('.').slice(1).join('.')}`;
         }));
     }, event.complexType.original
+        .replace(/\/\/.*$/gm, '') // Remove single-line comments before collapsing newlines
         .replace(/\n/g, ' ')
         .replace(/\s{2,}/g, ' ')
-        .replace(/,\s*/g, ', '));
+        .replace(/,\s*/g, ', ')
+        .trim());
 };
 /**
  * Creates a formatted comment block based on the JS doc comment.
@@ -771,13 +771,33 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
     const pkgData = await readPackageJson(config, rootDir);
-    const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
+    // esModules defaults to true, but only applies when outputType is 'scam' or 'standalone'
+    const isCustomElementsBuild = isOutputTypeCustomElementsBuild(outputTarget.outputType);
+    const useEsModules = isCustomElementsBuild && outputTarget.esModules === true;
     const tasks = [
-        compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
         copyResources(config, outputTarget),
-        generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
         generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
     ];
+    if (useEsModules) {
+        // Generate separate files for each component
+        const proxiesDir = path__default["default"].dirname(outputTarget.directivesProxyFile);
+        for (const component of filteredComponents) {
+            const componentFile = path__default["default"].join(proxiesDir, `${component.tagName}.ts`);
+            const componentText = generateComponentProxy(component, pkgData, outputTarget, rootDir);
+            tasks.push(compilerCtx.fs.writeFile(componentFile, componentText));
+        }
+        // Generate barrel file that re-exports all components
+        const barrelText = generateBarrelFile(filteredComponents, outputTarget);
+        tasks.push(compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, barrelText));
+        // Generate DIRECTIVES file (imports from barrel)
+        tasks.push(generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget));
+    }
+    else {
+        // Generate single file with all components (original behavior)
+        const finalText = generateProxies(filteredComponents, pkgData, outputTarget, rootDir);
+        tasks.push(compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText));
+        tasks.push(generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget));
+    }
     // Generate transformer script if transformTag is enabled
     if (outputTarget.transformTag) {
         // Read the Angular library's package.json to get its name
@@ -925,6 +945,96 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
     const final = [imports, typeImports, sourceImports, ...proxyFileOutput];
     return final.join('\n') + '\n';
 }
+/**
+ * Generate a single component proxy file for ES modules output
+ */
+function generateComponentProxy(cmpMeta, pkgData, outputTarget, rootDir) {
+    var _a;
+    const { outputType, componentCorePackage, customElementsDir } = outputTarget;
+    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 = outputType === OutputTypes.Scam;
+    const isCustomElementsBuild = isOutputTypeCustomElementsBuild(outputType);
+    const isStandaloneBuild = outputType === OutputTypes.Standalone;
+    const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
+    const hasOutputs = (_a = cmpMeta.events) === null || _a === void 0 ? void 0 : _a.some((event) => !event.internal);
+    // Angular core imports for this component
+    const angularCoreImports = ['ChangeDetectionStrategy', 'ChangeDetectorRef', 'Component', 'ElementRef', 'NgZone'];
+    if (hasOutputs) {
+        angularCoreImports.push('EventEmitter', 'Output');
+    }
+    if (includeSingleComponentAngularModules) {
+        angularCoreImports.push('NgModule');
+    }
+    const imports = `/* tslint:disable */
+/* auto-generated angular directive proxies */
+${createImportStatement(angularCoreImports, '@angular/core')}
+
+${createImportStatement(['ProxyCmp'], './angular-component-lib/utils')}\n`;
+    // Type imports
+    let importLocation = componentCorePackage ? normalizePath(componentCorePackage) : normalizePath(componentsTypeFile);
+    importLocation += isCustomElementsBuild ? `/${customElementsDir}` : '';
+    const typeImports = `import ${isCustomElementsBuild ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
+    // defineCustomElement import
+    let sourceImport = '';
+    if (isCustomElementsBuild && componentCorePackage !== undefined) {
+        sourceImport = `import { defineCustomElement as define${tagNameAsPascal} } from '${normalizePath(componentCorePackage)}/${customElementsDir}/${cmpMeta.tagName}.js';\n`;
+    }
+    // Generate component definition
+    const filterInternalProps = (prop) => !prop.internal;
+    const mapInputProp = (prop) => {
+        var _a;
+        return ({
+            name: prop.name,
+            required: (_a = prop.required) !== null && _a !== void 0 ? _a : false,
+        });
+    };
+    const internalProps = [];
+    if (cmpMeta.properties) {
+        internalProps.push(...cmpMeta.properties.filter(filterInternalProps));
+    }
+    const inputs = internalProps.map(mapInputProp);
+    if (cmpMeta.virtualProperties) {
+        inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
+    }
+    const orderedInputs = sortBy(inputs, (cip) => cip.name);
+    const methods = [];
+    if (cmpMeta.methods) {
+        methods.push(...cmpMeta.methods.filter(filterInternalProps).map(mapPropName));
+    }
+    const inlineComponentProps = outputTarget.inlineProperties ? internalProps : [];
+    const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps, cmpMeta.events || []);
+    const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
+    const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
+    const proxyFileOutput = [componentDefinition, '\n'];
+    if (includeSingleComponentAngularModules) {
+        proxyFileOutput.push(moduleDefinition, '\n');
+    }
+    proxyFileOutput.push(componentTypeDefinition, '\n');
+    const final = [imports, typeImports, sourceImport, ...proxyFileOutput];
+    return final.join('\n') + '\n';
+}
+/**
+ * Generate a barrel file that re-exports all components
+ */
+function generateBarrelFile(components, outputTarget) {
+    const { outputType } = outputTarget;
+    const includeSingleComponentAngularModules = outputType === OutputTypes.Scam;
+    const header = `/* tslint:disable */
+/**
+ * This file was automatically generated by the Stencil Angular Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */\n\n`;
+    const exports = components
+        .map((component) => {
+        const pascalName = dashToPascalCase(component.tagName);
+        const moduleExport = includeSingleComponentAngularModules ? `, ${pascalName}Module` : '';
+        return `export { ${pascalName}${moduleExport} } from './${component.tagName}';`;
+    })
+        .join('\n');
+    return header + exports + '\n';
+}
 const GENERATED_DTS = 'components.d.ts';
 const IMPORT_TYPES = 'Components';
 

package/dist/index.js

@@ -227,7 +227,7 @@ const createAngularComponentDefinition = (tagName, inputs, methods, includeImpor
     const outputDeclarations = events
         .filter((event) => !event.internal)
         .map((event) => {
-        const camelCaseOutput = event.name.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+        const camelCaseOutput = event.name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
         const outputType = `EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`;
         return `@Output() ${camelCaseOutput} = new ${outputType}();`;
     });
@@ -275,7 +275,7 @@ const formatOutputType = (componentClassName, event) => {
      */
     return Object.entries(event.complexType.references)
         .filter(([_, refObject]) => refObject.location === 'local' || refObject.location === 'import')
-        .reduce((type, [src, dst]) => {
+        .reduce((type, [src]) => {
         let renamedType = type;
         if (!type.startsWith(prefix)) {
             if (type.startsWith('{') && type.endsWith('}')) {
@@ -295,28 +295,28 @@ const formatOutputType = (componentClassName, event) => {
                 renamedType = `I${componentClassName}${type}`;
             }
         }
+        const prefixedTypeName = `${prefix}${src}`;
         return (renamedType
-            .replace(new RegExp(`^${src}$`, 'g'), `${dst}`)
+            .replace(new RegExp(`^${src}$`, 'g'), prefixedTypeName)
             // Capture all instances of the `src` field surrounded by non-word characters on each side and join them.
-            .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (v, p1, p2) => {
-            if ((dst === null || dst === void 0 ? void 0 : dst.location) === 'import') {
-                /**
-                 * Replaces a complex type reference within a generic type.
-                 * For example, remapping a type like `EventEmitter<CustomEvent<MyEvent<T>>>` to
-                 * `EventEmitter<CustomEvent<IMyComponentMyEvent<IMyComponentT>>>`.
-                 */
-                return [p1, `I${componentClassName}${v.substring(1, v.length - 1)}`, p2].join('');
-            }
-            return [p1, dst, p2].join('');
+            .replace(new RegExp(`([^\\w])${src}([^\\w])`, 'g'), (_, p1, p2) => {
+            /**
+             * Replaces a complex type reference within a generic type.
+             * For example, remapping a type like `EventEmitter<CustomEvent<MyEvent<T>>>` to
+             * `EventEmitter<CustomEvent<IMyComponentMyEvent<IMyComponentT>>>`.
+             */
+            return [p1, prefixedTypeName, p2].join('');
         })
             // Capture all instances that contain sub types, e.g. `IMyComponent.SomeMoreComplexType.SubType`.
             .replace(new RegExp(`^${src}(\.\\w+)+$`, 'g'), (type) => {
-            return `I${componentClassName}${src}.${type.split('.').slice(1).join('.')}`;
+            return `${prefix}${src}.${type.split('.').slice(1).join('.')}`;
         }));
     }, event.complexType.original
+        .replace(/\/\/.*$/gm, '') // Remove single-line comments before collapsing newlines
         .replace(/\n/g, ' ')
         .replace(/\s{2,}/g, ' ')
-        .replace(/,\s*/g, ', '));
+        .replace(/,\s*/g, ', ')
+        .trim());
 };
 /**
  * Creates a formatted comment block based on the JS doc comment.
@@ -763,13 +763,33 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
     const pkgData = await readPackageJson(config, rootDir);
-    const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
+    // esModules defaults to true, but only applies when outputType is 'scam' or 'standalone'
+    const isCustomElementsBuild = isOutputTypeCustomElementsBuild(outputTarget.outputType);
+    const useEsModules = isCustomElementsBuild && outputTarget.esModules === true;
     const tasks = [
-        compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
         copyResources(config, outputTarget),
-        generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
         generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
     ];
+    if (useEsModules) {
+        // Generate separate files for each component
+        const proxiesDir = path.dirname(outputTarget.directivesProxyFile);
+        for (const component of filteredComponents) {
+            const componentFile = path.join(proxiesDir, `${component.tagName}.ts`);
+            const componentText = generateComponentProxy(component, pkgData, outputTarget, rootDir);
+            tasks.push(compilerCtx.fs.writeFile(componentFile, componentText));
+        }
+        // Generate barrel file that re-exports all components
+        const barrelText = generateBarrelFile(filteredComponents, outputTarget);
+        tasks.push(compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, barrelText));
+        // Generate DIRECTIVES file (imports from barrel)
+        tasks.push(generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget));
+    }
+    else {
+        // Generate single file with all components (original behavior)
+        const finalText = generateProxies(filteredComponents, pkgData, outputTarget, rootDir);
+        tasks.push(compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText));
+        tasks.push(generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget));
+    }
     // Generate transformer script if transformTag is enabled
     if (outputTarget.transformTag) {
         // Read the Angular library's package.json to get its name
@@ -917,6 +937,96 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
     const final = [imports, typeImports, sourceImports, ...proxyFileOutput];
     return final.join('\n') + '\n';
 }
+/**
+ * Generate a single component proxy file for ES modules output
+ */
+function generateComponentProxy(cmpMeta, pkgData, outputTarget, rootDir) {
+    var _a;
+    const { outputType, componentCorePackage, customElementsDir } = outputTarget;
+    const distTypesDir = path.dirname(pkgData.types);
+    const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
+    const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
+    const includeSingleComponentAngularModules = outputType === OutputTypes.Scam;
+    const isCustomElementsBuild = isOutputTypeCustomElementsBuild(outputType);
+    const isStandaloneBuild = outputType === OutputTypes.Standalone;
+    const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
+    const hasOutputs = (_a = cmpMeta.events) === null || _a === void 0 ? void 0 : _a.some((event) => !event.internal);
+    // Angular core imports for this component
+    const angularCoreImports = ['ChangeDetectionStrategy', 'ChangeDetectorRef', 'Component', 'ElementRef', 'NgZone'];
+    if (hasOutputs) {
+        angularCoreImports.push('EventEmitter', 'Output');
+    }
+    if (includeSingleComponentAngularModules) {
+        angularCoreImports.push('NgModule');
+    }
+    const imports = `/* tslint:disable */
+/* auto-generated angular directive proxies */
+${createImportStatement(angularCoreImports, '@angular/core')}
+
+${createImportStatement(['ProxyCmp'], './angular-component-lib/utils')}\n`;
+    // Type imports
+    let importLocation = componentCorePackage ? normalizePath(componentCorePackage) : normalizePath(componentsTypeFile);
+    importLocation += isCustomElementsBuild ? `/${customElementsDir}` : '';
+    const typeImports = `import ${isCustomElementsBuild ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
+    // defineCustomElement import
+    let sourceImport = '';
+    if (isCustomElementsBuild && componentCorePackage !== undefined) {
+        sourceImport = `import { defineCustomElement as define${tagNameAsPascal} } from '${normalizePath(componentCorePackage)}/${customElementsDir}/${cmpMeta.tagName}.js';\n`;
+    }
+    // Generate component definition
+    const filterInternalProps = (prop) => !prop.internal;
+    const mapInputProp = (prop) => {
+        var _a;
+        return ({
+            name: prop.name,
+            required: (_a = prop.required) !== null && _a !== void 0 ? _a : false,
+        });
+    };
+    const internalProps = [];
+    if (cmpMeta.properties) {
+        internalProps.push(...cmpMeta.properties.filter(filterInternalProps));
+    }
+    const inputs = internalProps.map(mapInputProp);
+    if (cmpMeta.virtualProperties) {
+        inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
+    }
+    const orderedInputs = sortBy(inputs, (cip) => cip.name);
+    const methods = [];
+    if (cmpMeta.methods) {
+        methods.push(...cmpMeta.methods.filter(filterInternalProps).map(mapPropName));
+    }
+    const inlineComponentProps = outputTarget.inlineProperties ? internalProps : [];
+    const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps, cmpMeta.events || []);
+    const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
+    const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
+    const proxyFileOutput = [componentDefinition, '\n'];
+    if (includeSingleComponentAngularModules) {
+        proxyFileOutput.push(moduleDefinition, '\n');
+    }
+    proxyFileOutput.push(componentTypeDefinition, '\n');
+    const final = [imports, typeImports, sourceImport, ...proxyFileOutput];
+    return final.join('\n') + '\n';
+}
+/**
+ * Generate a barrel file that re-exports all components
+ */
+function generateBarrelFile(components, outputTarget) {
+    const { outputType } = outputTarget;
+    const includeSingleComponentAngularModules = outputType === OutputTypes.Scam;
+    const header = `/* tslint:disable */
+/**
+ * This file was automatically generated by the Stencil Angular Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */\n\n`;
+    const exports = components
+        .map((component) => {
+        const pascalName = dashToPascalCase(component.tagName);
+        const moduleExport = includeSingleComponentAngularModules ? `, ${pascalName}Module` : '';
+        return `export { ${pascalName}${moduleExport} } from './${component.tagName}';`;
+    })
+        .join('\n');
+    return header + exports + '\n';
+}
 const GENERATED_DTS = 'components.d.ts';
 const IMPORT_TYPES = 'Components';
 

package/dist/output-angular.d.ts

@@ -2,3 +2,11 @@ import type { CompilerCtx, ComponentCompilerMeta, Config } from '@stencil/core/i
 import type { OutputTargetAngular, PackageJSON } from './types';
 export declare function angularDirectiveProxyOutput(compilerCtx: CompilerCtx, outputTarget: OutputTargetAngular, components: ComponentCompilerMeta[], config: Config): Promise<void>;
 export declare function generateProxies(components: ComponentCompilerMeta[], pkgData: PackageJSON, outputTarget: OutputTargetAngular, rootDir: string): string;
+/**
+ * Generate a single component proxy file for ES modules output
+ */
+export declare function generateComponentProxy(cmpMeta: ComponentCompilerMeta, pkgData: PackageJSON, outputTarget: OutputTargetAngular, rootDir: string): string;
+/**
+ * Generate a barrel file that re-exports all components
+ */
+export declare function generateBarrelFile(components: ComponentCompilerMeta[], outputTarget: OutputTargetAngular): string;

package/dist/output-angular.js

@@ -9,13 +9,33 @@ export async function angularDirectiveProxyOutput(compilerCtx, outputTarget, com
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
     const pkgData = await readPackageJson(config, rootDir);
-    const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
+    // esModules defaults to true, but only applies when outputType is 'scam' or 'standalone'
+    const isCustomElementsBuild = isOutputTypeCustomElementsBuild(outputTarget.outputType);
+    const useEsModules = isCustomElementsBuild && outputTarget.esModules === true;
     const tasks = [
-        compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
         copyResources(config, outputTarget),
-        generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
         generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
     ];
+    if (useEsModules) {
+        // Generate separate files for each component
+        const proxiesDir = path.dirname(outputTarget.directivesProxyFile);
+        for (const component of filteredComponents) {
+            const componentFile = path.join(proxiesDir, `${component.tagName}.ts`);
+            const componentText = generateComponentProxy(component, pkgData, outputTarget, rootDir);
+            tasks.push(compilerCtx.fs.writeFile(componentFile, componentText));
+        }
+        // Generate barrel file that re-exports all components
+        const barrelText = generateBarrelFile(filteredComponents, outputTarget);
+        tasks.push(compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, barrelText));
+        // Generate DIRECTIVES file (imports from barrel)
+        tasks.push(generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget));
+    }
+    else {
+        // Generate single file with all components (original behavior)
+        const finalText = generateProxies(filteredComponents, pkgData, outputTarget, rootDir);
+        tasks.push(compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText));
+        tasks.push(generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget));
+    }
     // Generate transformer script if transformTag is enabled
     if (outputTarget.transformTag) {
         // Read the Angular library's package.json to get its name
@@ -163,5 +183,95 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
     const final = [imports, typeImports, sourceImports, ...proxyFileOutput];
     return final.join('\n') + '\n';
 }
+/**
+ * Generate a single component proxy file for ES modules output
+ */
+export function generateComponentProxy(cmpMeta, pkgData, outputTarget, rootDir) {
+    var _a;
+    const { outputType, componentCorePackage, customElementsDir } = outputTarget;
+    const distTypesDir = path.dirname(pkgData.types);
+    const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
+    const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
+    const includeSingleComponentAngularModules = outputType === OutputTypes.Scam;
+    const isCustomElementsBuild = isOutputTypeCustomElementsBuild(outputType);
+    const isStandaloneBuild = outputType === OutputTypes.Standalone;
+    const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
+    const hasOutputs = (_a = cmpMeta.events) === null || _a === void 0 ? void 0 : _a.some((event) => !event.internal);
+    // Angular core imports for this component
+    const angularCoreImports = ['ChangeDetectionStrategy', 'ChangeDetectorRef', 'Component', 'ElementRef', 'NgZone'];
+    if (hasOutputs) {
+        angularCoreImports.push('EventEmitter', 'Output');
+    }
+    if (includeSingleComponentAngularModules) {
+        angularCoreImports.push('NgModule');
+    }
+    const imports = `/* tslint:disable */
+/* auto-generated angular directive proxies */
+${createImportStatement(angularCoreImports, '@angular/core')}
+
+${createImportStatement(['ProxyCmp'], './angular-component-lib/utils')}\n`;
+    // Type imports
+    let importLocation = componentCorePackage ? normalizePath(componentCorePackage) : normalizePath(componentsTypeFile);
+    importLocation += isCustomElementsBuild ? `/${customElementsDir}` : '';
+    const typeImports = `import ${isCustomElementsBuild ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
+    // defineCustomElement import
+    let sourceImport = '';
+    if (isCustomElementsBuild && componentCorePackage !== undefined) {
+        sourceImport = `import { defineCustomElement as define${tagNameAsPascal} } from '${normalizePath(componentCorePackage)}/${customElementsDir}/${cmpMeta.tagName}.js';\n`;
+    }
+    // Generate component definition
+    const filterInternalProps = (prop) => !prop.internal;
+    const mapInputProp = (prop) => {
+        var _a;
+        return ({
+            name: prop.name,
+            required: (_a = prop.required) !== null && _a !== void 0 ? _a : false,
+        });
+    };
+    const internalProps = [];
+    if (cmpMeta.properties) {
+        internalProps.push(...cmpMeta.properties.filter(filterInternalProps));
+    }
+    const inputs = internalProps.map(mapInputProp);
+    if (cmpMeta.virtualProperties) {
+        inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
+    }
+    const orderedInputs = sortBy(inputs, (cip) => cip.name);
+    const methods = [];
+    if (cmpMeta.methods) {
+        methods.push(...cmpMeta.methods.filter(filterInternalProps).map(mapPropName));
+    }
+    const inlineComponentProps = outputTarget.inlineProperties ? internalProps : [];
+    const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps, cmpMeta.events || []);
+    const moduleDefinition = generateAngularModuleForComponent(cmpMeta.tagName);
+    const componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir);
+    const proxyFileOutput = [componentDefinition, '\n'];
+    if (includeSingleComponentAngularModules) {
+        proxyFileOutput.push(moduleDefinition, '\n');
+    }
+    proxyFileOutput.push(componentTypeDefinition, '\n');
+    const final = [imports, typeImports, sourceImport, ...proxyFileOutput];
+    return final.join('\n') + '\n';
+}
+/**
+ * Generate a barrel file that re-exports all components
+ */
+export function generateBarrelFile(components, outputTarget) {
+    const { outputType } = outputTarget;
+    const includeSingleComponentAngularModules = outputType === OutputTypes.Scam;
+    const header = `/* tslint:disable */
+/**
+ * This file was automatically generated by the Stencil Angular Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */\n\n`;
+    const exports = components
+        .map((component) => {
+        const pascalName = dashToPascalCase(component.tagName);
+        const moduleExport = includeSingleComponentAngularModules ? `, ${pascalName}Module` : '';
+        return `export { ${pascalName}${moduleExport} } from './${component.tagName}';`;
+    })
+        .join('\n');
+    return header + exports + '\n';
+}
 const GENERATED_DTS = 'components.d.ts';
 const IMPORT_TYPES = 'Components';

package/dist/types.d.ts

@@ -1,8 +1,8 @@
 /**
  * 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` - Generates standalone components.
+ * - `component` - Generate many component wrappers tied to a single Angular module (requires `dist`, lazy/hydrated approach).
+ * - `scam` - Generate a Single Component Angular Module for each component (requires `dist-custom-elements` output).
+ * - `standalone` - Generates standalone components (requires `dist-custom-elements` output).
  */
 export type OutputType = 'component' | 'scam' | 'standalone';
 export interface OutputTargetAngular {
@@ -16,15 +16,33 @@ export interface OutputTargetAngular {
      * or a relative path from the root directory of the Stencil library.
      */
     directivesProxyFile: string;
+    /**
+     * Optional path to generate a file containing a `DIRECTIVES` array constant.
+     * This is primarily useful with `outputType: 'component'` (lazy-loaded) where you want
+     * to declare all components in a shared NgModule:
+     *
+     * ```ts
+     * import { DIRECTIVES } from './directives';
+     *
+     * @NgModule({
+     *   declarations: [...DIRECTIVES],
+     *   exports: [...DIRECTIVES],
+     * })
+     * export class ComponentLibraryModule {}
+     * ```
+     *
+     * This option is less relevant for `outputType: 'scam'` or `'standalone'` where
+     * consumers typically import individual component modules or standalone components directly.
+     */
     directivesArrayFile?: string;
     valueAccessorConfigs?: ValueAccessorConfig[];
     excludeComponents?: string[];
     customElementsDir?: string;
     /**
      * The type of output that should be generated.
-     * - `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` - (default) Generates standalone components.
+     * - `component` - Generate many component wrappers tied to a single Angular module (requires `dist`, lazy/hydrated approach).
+     * - `scam` - Generate a Single Component Angular Module for each component (requires `dist-custom-elements` output).
+     * - `standalone` - (default) Generates standalone components (requires `dist-custom-elements` output).
      */
     outputType?: OutputType;
     /**
@@ -69,6 +87,13 @@ export interface OutputTargetAngular {
      * @default false
      */
     transformTag?: boolean;
+    /**
+     * If `true`, the output target will generate a separate ES module for each Angular component wrapper.
+     * This enables better tree-shaking as bundlers can exclude unused components.
+     * This option only applies when `outputType` is `'scam'` or `'standalone'` (i.e., using `dist-custom-elements`).
+     * @default false
+     */
+    esModules?: boolean;
 }
 export type ValueAccessorTypes = 'text' | 'radio' | 'select' | 'number' | 'boolean';
 export interface ValueAccessorConfig {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/angular-output-target",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",