@stencil/angular-output-target 1.4.1 → 1.5.1

package/dist/index.js

@@ -118,7 +118,9 @@ const createComponentEventTypeImports = (componentTagName, events, options) => {
     const imports = [];
     const namedImports = new Set();
     const isCustomElementsBuild = isOutputTypeCustomElementsBuild(options.outputType);
-    const importPathName = normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
+    const exportMapEntry = isCustomElementsBuild ? '/standalone' : '/loader';
+    const importPathName = normalizePath(componentCorePackage) +
+        (options.exportMaps ? exportMapEntry : isCustomElementsBuild ? `/${customElementsDir}` : '');
     /**
      * Each component's events are typed with the per-component CustomEvent type
      * generated by Stencil (e.g. `MyComponentCustomEvent<Detail>`), which carries a
@@ -171,21 +173,33 @@ function createPropertyDeclaration(prop, type, inlinePropertyAsSetter = false) {
     }
 }
 /**
- * Creates a formatted inputs text with required declaration.
+ * The transform function to reference in generated code, exported from
+ * `angular-component-lib/boolean-attribute`.
+ */
+const INPUT_TRANSFORM_FUNCTION = 'nullableBooleanAttribute';
+/**
+ * Creates a formatted inputs text with required and transform declarations.
+ *
+ * Inputs are emitted as bare strings unless they carry options, in which case Angular's object
+ * form is used (e.g. `{ name: 'myInput', required: true }`).
  *
- * @param prop A ComponentCompilerEvent or ComponentCompilerProperty to turn into a property declaration.
  * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
  * @returns The inputs list declaration as a string.
  */
 function formatInputs(inputs) {
     return inputs
         .map((item) => {
+        const options = [];
         if (item.required) {
-            return `{ name: '${item.name}', required: true }`;
+            options.push('required: true');
+        }
+        if (item.transform) {
+            options.push(`transform: ${INPUT_TRANSFORM_FUNCTION}`);
         }
-        else {
+        if (options.length === 0) {
             return `'${item.name}'`;
         }
+        return `{ name: '${item.name}', ${options.join(', ')} }`;
     })
         .join(', ');
 }
@@ -346,14 +360,16 @@ const createDocComment = (doc) => {
  * @param events The events to generate the interface properties for.
  * @param componentCorePackage The component core package.
  * @param customElementsDir The custom elements directory.
+ * @param exportMaps Import through the package's `exports` map instead of a deep path.
  * @returns The component interface type definition as a string.
  */
-const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, componentCorePackage, customElementsDir) => {
+const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, componentCorePackage, customElementsDir, exportMaps = false) => {
     const publicEvents = events.filter((ev) => !ev.internal);
     const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
         customElementsDir,
         outputType,
+        exportMaps,
     });
     const eventTypes = publicEvents.map((event) => createPropertyDeclaration(event, `EventEmitter<${tagNameAsPascal}CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`));
     const interfaceDeclaration = `export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {`;
@@ -471,10 +487,14 @@ export class ${moduleClassName} { }`;
  * This script patches component selectors in the built Angular library to use the
  * transformed tag names (e.g., 'my-component' -> 'v1-my-component').
  */
-async function generateTransformTagScript(compilerCtx, components, outputTarget, packageName) {
+async function generateTransformTagScript(compilerCtx, components, outputTarget, 
+/** Import through the package's `exports` map (`<pkg>/standalone`) instead of a deep path. */
+exportMaps = false) {
     const scriptsDirectory = path.join(path.dirname(outputTarget.directivesProxyFile), '../../scripts');
     const customElementsDir = outputTarget.customElementsDir || 'dist/components';
-    const stencilImportPath = `${outputTarget.componentCorePackage}/${customElementsDir}/index.js`;
+    const stencilImportPath = exportMaps
+        ? `${outputTarget.componentCorePackage}/standalone`
+        : `${outputTarget.componentCorePackage}/${customElementsDir}/index.js`;
     // Generate the mappings object
     const mappings = components
         .map((component) => {
@@ -774,6 +794,73 @@ stencilSetTagTransformer(\${transformerArg});
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
+const filterInternalProps = (prop) => !prop.internal;
+/**
+ * Whether a property declares an input transform.
+ *
+ * This is the single definition of the rule. Both the generated declaration and the import that
+ * satisfies it are derived from it, so widening the rule can't leave a generated file referencing
+ * a transform it never imports.
+ *
+ * @param prop The property compiler metadata.
+ * @param booleanAttributes Whether boolean properties should declare an input transform.
+ * @returns `true` when the property should be transformed.
+ */
+const isTransformedProp = (prop, booleanAttributes) => booleanAttributes && prop.type === 'boolean';
+/**
+ * Maps a Stencil property to an Angular input declaration.
+ *
+ * Virtual properties are mapped with `booleanAttributes` left at its default of `false`. They
+ * carry a free-form type string and no `required` flag, so they are never transformed and always
+ * come out as optional.
+ *
+ * @param prop The property compiler metadata.
+ * @param booleanAttributes Whether boolean properties should declare an input transform.
+ * @returns The Angular input declaration.
+ */
+const mapInputProp = (prop, booleanAttributes = false) => ({
+    name: prop.name,
+    required: prop.required ?? false,
+    transform: isTransformedProp(prop, booleanAttributes) ? true : undefined,
+});
+/**
+ * Whether any of a component's properties will declare an input transform, which determines
+ * whether the transform needs to be imported.
+ *
+ * @param components The components in the generated file.
+ * @param booleanAttributes Whether boolean properties should declare an input transform.
+ * @returns `true` when at least one property is transformed.
+ */
+const usesInputTransform = (components, booleanAttributes) => components.some((cmpMeta) => (cmpMeta.properties ?? []).filter(filterInternalProps).some((prop) => isTransformedProp(prop, booleanAttributes)));
+/**
+ * Whether the Stencil project generates a package.json `exports` map. Deep `dist/` imports are
+ * blocked for consumers then, so the proxies import through the map's entries instead
+ * (`<pkg>/<tag>`, `<pkg>/loader`, `<pkg>/standalone`).
+ */
+function usesExportMaps(config) {
+    // Stencil v5 only: v4's map has no `./standalone` entry, and its root types aren't
+    // guaranteed to export the component types.
+    const isV5 = (config.outputTargets || []).some((o) => ['loader-bundle', 'standalone', 'ssr', 'types'].includes(o.type));
+    return isV5 && config.generateExportMaps === true;
+}
+/**
+ * The module specifier a proxy imports a component's `defineCustomElement` from.
+ */
+function getComponentModule(config, outputTarget, tagName) {
+    const basePkg = normalizePath(outputTarget.componentCorePackage);
+    if (usesExportMaps(config)) {
+        return `${basePkg}/${tagName}`;
+    }
+    return `${basePkg}/${outputTarget.customElementsDir}/${tagName}.js`;
+}
+/**
+ * The relative import of the project's own `components.d.ts`, for when there's no
+ * `componentCorePackage`. Only resolved when needed: package.json may have no `types` field.
+ */
+function getComponentsTypeFile(pkgData, outputTarget, rootDir) {
+    const dtsFilePath = path.join(rootDir, path.dirname(pkgData.types), GENERATED_DTS);
+    return relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
+}
 async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
@@ -807,27 +894,7 @@ async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components
     }
     // Generate transformer script if transformTag is enabled
     if (outputTarget.transformTag) {
-        // Read the Angular library's package.json to get its name
-        // directivesProxyFile is like: projects/library/src/directives/proxies.ts
-        // We need to go up to: projects/library/package.json
-        const angularLibraryDir = path.dirname(path.dirname(path.dirname(outputTarget.directivesProxyFile)));
-        const angularPkgJsonPath = path.join(angularLibraryDir, 'package.json');
-        let angularPackageName = '';
-        try {
-            const angularPkgJson = JSON.parse(await compilerCtx.fs.readFile(angularPkgJsonPath));
-            if (angularPkgJson.name) {
-                angularPackageName = angularPkgJson.name;
-            }
-        }
-        catch (e) {
-            throw new Error(`Could not read Angular library package.json at ${angularPkgJsonPath}. ` +
-                `The package name is required to generate the transformTag patch script.`);
-        }
-        if (!angularPackageName) {
-            throw new Error(`Angular library package.json at ${angularPkgJsonPath} does not have a "name" field. ` +
-                `The package name is required to generate the transformTag patch script.`);
-        }
-        tasks.push(generateTransformTagScript(compilerCtx, filteredComponents, outputTarget));
+        tasks.push(generateTransformTagScript(compilerCtx, filteredComponents, outputTarget, usesExportMaps(config)));
     }
     await Promise.all(tasks);
 }
@@ -851,10 +918,7 @@ async function copyResources(config, outputTarget) {
     ], srcDirectory);
 }
 function generateProxies(components, pkgData, outputTarget, rootDir, config) {
-    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 = outputType === OutputTypes.Scam;
     const isCustomElementsBuild = isOutputTypeCustomElementsBuild(outputType);
     const isStandaloneBuild = outputType === OutputTypes.Standalone;
@@ -871,6 +935,14 @@ function generateProxies(components, pkgData, outputTarget, rootDir, config) {
      * The collection of named imports from the angular-component-lib/utils.
      */
     const componentLibImports = ['ProxyCmp'];
+    /**
+     * The input transform lives in its own module so that it carries no runtime imports.
+     */
+    let transformImport = '';
+    const booleanAttributes = outputTarget.booleanAttributes === true;
+    if (usesInputTransform(components, booleanAttributes)) {
+        transformImport = `\n${createImportStatement([INPUT_TRANSFORM_FUNCTION], './angular-component-lib/boolean-attribute')}`;
+    }
     if (includeSingleComponentAngularModules) {
         angularCoreImports.push('NgModule');
     }
@@ -878,7 +950,7 @@ function generateProxies(components, pkgData, outputTarget, rootDir, config) {
 /* auto-generated angular directive proxies */
 ${createImportStatement(angularCoreImports, '@angular/core')}
 
-${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n`;
+${createImportStatement(componentLibImports, './angular-component-lib/utils')}${transformImport}\n`;
     /**
      * Generate JSX import type from correct location.
      * When using custom elements build, we need to import from
@@ -888,7 +960,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
     const generateTypeImports = () => {
         const importLocation = outputTarget.componentCorePackage
             ? getPathToComponentTypes(config, outputTarget)
-            : normalizePath(componentsTypeFile);
+            : normalizePath(getComponentsTypeFile(pkgData, outputTarget, rootDir));
         return `import ${isCustomElementsBuild ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
     };
     const typeImports = generateTypeImports();
@@ -902,17 +974,11 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
     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}/${component.tagName}.js';`;
+            return `import { defineCustomElement as define${pascalImport} } from '${getComponentModule(config, outputTarget, component.tagName)}';`;
         });
         sourceImports = cmpImports.join('\n');
     }
     const proxyFileOutput = [];
-    const filterInternalProps = (prop) => !prop.internal;
-    // Ensure that virtual properties has required as false.
-    const mapInputProp = (prop) => ({
-        name: prop.name,
-        required: prop.required ?? false,
-    });
     const { componentCorePackage, customElementsDir } = outputTarget;
     for (let cmpMeta of components) {
         const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
@@ -920,9 +986,9 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         if (cmpMeta.properties) {
             internalProps.push(...cmpMeta.properties.filter(filterInternalProps));
         }
-        const inputs = internalProps.map(mapInputProp);
+        const inputs = internalProps.map((prop) => mapInputProp(prop, booleanAttributes));
         if (cmpMeta.virtualProperties) {
-            inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
+            inputs.push(...cmpMeta.virtualProperties.map((prop) => mapInputProp(prop)));
         }
         const orderedInputs = sortBy(inputs, (cip) => cip.name);
         const methods = [];
@@ -938,7 +1004,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
          */
         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 componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir, usesExportMaps(config));
         proxyFileOutput.push(componentDefinition, '\n');
         if (includeSingleComponentAngularModules) {
             proxyFileOutput.push(moduleDefinition, '\n');
@@ -953,9 +1019,6 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
  */
 function generateComponentProxy(cmpMeta, pkgData, outputTarget, rootDir, config) {
     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;
@@ -969,34 +1032,36 @@ function generateComponentProxy(cmpMeta, pkgData, outputTarget, rootDir, config)
     if (includeSingleComponentAngularModules) {
         angularCoreImports.push('NgModule');
     }
+    const booleanAttributes = outputTarget.booleanAttributes === true;
+    const componentLibImports = ['ProxyCmp'];
+    // The input transform lives in its own module so that it carries no runtime imports.
+    let transformImport = '';
+    if (usesInputTransform([cmpMeta], booleanAttributes)) {
+        transformImport = `\n${createImportStatement([INPUT_TRANSFORM_FUNCTION], './angular-component-lib/boolean-attribute')}`;
+    }
     const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
 ${createImportStatement(angularCoreImports, '@angular/core')}
 
-${createImportStatement(['ProxyCmp'], './angular-component-lib/utils')}\n`;
+${createImportStatement(componentLibImports, './angular-component-lib/utils')}${transformImport}\n`;
     // Type imports
     const importLocation = componentCorePackage
         ? getPathToComponentTypes(config, outputTarget)
-        : normalizePath(componentsTypeFile);
+        : normalizePath(getComponentsTypeFile(pkgData, outputTarget, rootDir));
     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`;
+        sourceImport = `import { defineCustomElement as define${tagNameAsPascal} } from '${getComponentModule(config, outputTarget, cmpMeta.tagName)}';\n`;
     }
     // Generate component definition
-    const filterInternalProps = (prop) => !prop.internal;
-    const mapInputProp = (prop) => ({
-        name: prop.name,
-        required: prop.required ?? false,
-    });
     const internalProps = [];
     if (cmpMeta.properties) {
         internalProps.push(...cmpMeta.properties.filter(filterInternalProps));
     }
-    const inputs = internalProps.map(mapInputProp);
+    const inputs = internalProps.map((prop) => mapInputProp(prop, booleanAttributes));
     if (cmpMeta.virtualProperties) {
-        inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
+        inputs.push(...cmpMeta.virtualProperties.map((prop) => mapInputProp(prop)));
     }
     const orderedInputs = sortBy(inputs, (cip) => cip.name);
     const methods = [];
@@ -1006,7 +1071,7 @@ ${createImportStatement(['ProxyCmp'], './angular-component-lib/utils')}\n`;
     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 componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir, usesExportMaps(config));
     const proxyFileOutput = [componentDefinition, '\n'];
     if (includeSingleComponentAngularModules) {
         proxyFileOutput.push(moduleDefinition, '\n');
@@ -1037,6 +1102,12 @@ function generateBarrelFile(components, outputTarget) {
 }
 function getPathToComponentTypes(config, outputTarget) {
     const basePkg = outputTarget.componentCorePackage || '';
+    // The entry of the output the proxies are built on always exports the component types - the
+    // package root only does when the project has no `src/index.ts`, or that file re-exports them
+    if (usesExportMaps(config)) {
+        const entry = isOutputTypeCustomElementsBuild(outputTarget.outputType) ? 'standalone' : 'loader';
+        return `${normalizePath(basePkg)}/${entry}`;
+    }
     // in v5, all types (including components.d.ts) are generated in the dist/types directory
     const typesTarget = config.outputTargets?.find((o) => o.type === 'types');
     if (typesTarget) {

package/dist/output-angular.d.ts

@@ -1,5 +1,11 @@
 import type { CompilerCtx, ComponentCompilerMeta, Config } from '@stencil/core/internal';
 import type { OutputTargetAngular, PackageJSON } from './types';
+/**
+ * Whether the Stencil project generates a package.json `exports` map. Deep `dist/` imports are
+ * blocked for consumers then, so the proxies import through the map's entries instead
+ * (`<pkg>/<tag>`, `<pkg>/loader`, `<pkg>/standalone`).
+ */
+export declare function usesExportMaps(config: Config): boolean;
 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, config: Config): string;
 /**

package/dist/output-angular.js

@@ -3,11 +3,78 @@ import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 import { relativeImport, normalizePath, sortBy, readPackageJson, dashToPascalCase, createImportStatement, isOutputTypeCustomElementsBuild, OutputTypes, mapPropName, } from './utils';
-import { createAngularComponentDefinition, createComponentTypeDefinition } from './generate-angular-component';
+import { createAngularComponentDefinition, createComponentTypeDefinition, INPUT_TRANSFORM_FUNCTION, } from './generate-angular-component';
 import { generateAngularDirectivesFile } from './generate-angular-directives-file';
 import generateValueAccessors from './generate-value-accessors';
 import { generateAngularModuleForComponent } from './generate-angular-modules';
 import { generateTransformTagScript } from './generate-transformtag-script';
+const filterInternalProps = (prop) => !prop.internal;
+/**
+ * Whether a property declares an input transform.
+ *
+ * This is the single definition of the rule. Both the generated declaration and the import that
+ * satisfies it are derived from it, so widening the rule can't leave a generated file referencing
+ * a transform it never imports.
+ *
+ * @param prop The property compiler metadata.
+ * @param booleanAttributes Whether boolean properties should declare an input transform.
+ * @returns `true` when the property should be transformed.
+ */
+const isTransformedProp = (prop, booleanAttributes) => booleanAttributes && prop.type === 'boolean';
+/**
+ * Maps a Stencil property to an Angular input declaration.
+ *
+ * Virtual properties are mapped with `booleanAttributes` left at its default of `false`. They
+ * carry a free-form type string and no `required` flag, so they are never transformed and always
+ * come out as optional.
+ *
+ * @param prop The property compiler metadata.
+ * @param booleanAttributes Whether boolean properties should declare an input transform.
+ * @returns The Angular input declaration.
+ */
+const mapInputProp = (prop, booleanAttributes = false) => ({
+    name: prop.name,
+    required: prop.required ?? false,
+    transform: isTransformedProp(prop, booleanAttributes) ? true : undefined,
+});
+/**
+ * Whether any of a component's properties will declare an input transform, which determines
+ * whether the transform needs to be imported.
+ *
+ * @param components The components in the generated file.
+ * @param booleanAttributes Whether boolean properties should declare an input transform.
+ * @returns `true` when at least one property is transformed.
+ */
+const usesInputTransform = (components, booleanAttributes) => components.some((cmpMeta) => (cmpMeta.properties ?? []).filter(filterInternalProps).some((prop) => isTransformedProp(prop, booleanAttributes)));
+/**
+ * Whether the Stencil project generates a package.json `exports` map. Deep `dist/` imports are
+ * blocked for consumers then, so the proxies import through the map's entries instead
+ * (`<pkg>/<tag>`, `<pkg>/loader`, `<pkg>/standalone`).
+ */
+export function usesExportMaps(config) {
+    // Stencil v5 only: v4's map has no `./standalone` entry, and its root types aren't
+    // guaranteed to export the component types.
+    const isV5 = (config.outputTargets || []).some((o) => ['loader-bundle', 'standalone', 'ssr', 'types'].includes(o.type));
+    return isV5 && config.generateExportMaps === true;
+}
+/**
+ * The module specifier a proxy imports a component's `defineCustomElement` from.
+ */
+function getComponentModule(config, outputTarget, tagName) {
+    const basePkg = normalizePath(outputTarget.componentCorePackage);
+    if (usesExportMaps(config)) {
+        return `${basePkg}/${tagName}`;
+    }
+    return `${basePkg}/${outputTarget.customElementsDir}/${tagName}.js`;
+}
+/**
+ * The relative import of the project's own `components.d.ts`, for when there's no
+ * `componentCorePackage`. Only resolved when needed: package.json may have no `types` field.
+ */
+function getComponentsTypeFile(pkgData, outputTarget, rootDir) {
+    const dtsFilePath = path.join(rootDir, path.dirname(pkgData.types), GENERATED_DTS);
+    return relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
+}
 export async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
@@ -41,27 +108,7 @@ export async function angularDirectiveProxyOutput(compilerCtx, outputTarget, com
     }
     // Generate transformer script if transformTag is enabled
     if (outputTarget.transformTag) {
-        // Read the Angular library's package.json to get its name
-        // directivesProxyFile is like: projects/library/src/directives/proxies.ts
-        // We need to go up to: projects/library/package.json
-        const angularLibraryDir = path.dirname(path.dirname(path.dirname(outputTarget.directivesProxyFile)));
-        const angularPkgJsonPath = path.join(angularLibraryDir, 'package.json');
-        let angularPackageName = '';
-        try {
-            const angularPkgJson = JSON.parse(await compilerCtx.fs.readFile(angularPkgJsonPath));
-            if (angularPkgJson.name) {
-                angularPackageName = angularPkgJson.name;
-            }
-        }
-        catch (e) {
-            throw new Error(`Could not read Angular library package.json at ${angularPkgJsonPath}. ` +
-                `The package name is required to generate the transformTag patch script.`);
-        }
-        if (!angularPackageName) {
-            throw new Error(`Angular library package.json at ${angularPkgJsonPath} does not have a "name" field. ` +
-                `The package name is required to generate the transformTag patch script.`);
-        }
-        tasks.push(generateTransformTagScript(compilerCtx, filteredComponents, outputTarget, angularPackageName));
+        tasks.push(generateTransformTagScript(compilerCtx, filteredComponents, outputTarget, usesExportMaps(config)));
     }
     await Promise.all(tasks);
 }
@@ -85,10 +132,7 @@ async function copyResources(config, outputTarget) {
     ], srcDirectory);
 }
 export function generateProxies(components, pkgData, outputTarget, rootDir, config) {
-    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 = outputType === OutputTypes.Scam;
     const isCustomElementsBuild = isOutputTypeCustomElementsBuild(outputType);
     const isStandaloneBuild = outputType === OutputTypes.Standalone;
@@ -105,6 +149,14 @@ export function generateProxies(components, pkgData, outputTarget, rootDir, conf
      * The collection of named imports from the angular-component-lib/utils.
      */
     const componentLibImports = ['ProxyCmp'];
+    /**
+     * The input transform lives in its own module so that it carries no runtime imports.
+     */
+    let transformImport = '';
+    const booleanAttributes = outputTarget.booleanAttributes === true;
+    if (usesInputTransform(components, booleanAttributes)) {
+        transformImport = `\n${createImportStatement([INPUT_TRANSFORM_FUNCTION], './angular-component-lib/boolean-attribute')}`;
+    }
     if (includeSingleComponentAngularModules) {
         angularCoreImports.push('NgModule');
     }
@@ -112,7 +164,7 @@ export function generateProxies(components, pkgData, outputTarget, rootDir, conf
 /* auto-generated angular directive proxies */
 ${createImportStatement(angularCoreImports, '@angular/core')}
 
-${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n`;
+${createImportStatement(componentLibImports, './angular-component-lib/utils')}${transformImport}\n`;
     /**
      * Generate JSX import type from correct location.
      * When using custom elements build, we need to import from
@@ -122,7 +174,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
     const generateTypeImports = () => {
         const importLocation = outputTarget.componentCorePackage
             ? getPathToComponentTypes(config, outputTarget)
-            : normalizePath(componentsTypeFile);
+            : normalizePath(getComponentsTypeFile(pkgData, outputTarget, rootDir));
         return `import ${isCustomElementsBuild ? 'type ' : ''}{ ${IMPORT_TYPES} } from '${importLocation}';\n`;
     };
     const typeImports = generateTypeImports();
@@ -136,17 +188,11 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
     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}/${component.tagName}.js';`;
+            return `import { defineCustomElement as define${pascalImport} } from '${getComponentModule(config, outputTarget, component.tagName)}';`;
         });
         sourceImports = cmpImports.join('\n');
     }
     const proxyFileOutput = [];
-    const filterInternalProps = (prop) => !prop.internal;
-    // Ensure that virtual properties has required as false.
-    const mapInputProp = (prop) => ({
-        name: prop.name,
-        required: prop.required ?? false,
-    });
     const { componentCorePackage, customElementsDir } = outputTarget;
     for (let cmpMeta of components) {
         const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
@@ -154,9 +200,9 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
         if (cmpMeta.properties) {
             internalProps.push(...cmpMeta.properties.filter(filterInternalProps));
         }
-        const inputs = internalProps.map(mapInputProp);
+        const inputs = internalProps.map((prop) => mapInputProp(prop, booleanAttributes));
         if (cmpMeta.virtualProperties) {
-            inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
+            inputs.push(...cmpMeta.virtualProperties.map((prop) => mapInputProp(prop)));
         }
         const orderedInputs = sortBy(inputs, (cip) => cip.name);
         const methods = [];
@@ -172,7 +218,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
          */
         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 componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir, usesExportMaps(config));
         proxyFileOutput.push(componentDefinition, '\n');
         if (includeSingleComponentAngularModules) {
             proxyFileOutput.push(moduleDefinition, '\n');
@@ -187,9 +233,6 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
  */
 export function generateComponentProxy(cmpMeta, pkgData, outputTarget, rootDir, config) {
     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;
@@ -203,34 +246,36 @@ export function generateComponentProxy(cmpMeta, pkgData, outputTarget, rootDir,
     if (includeSingleComponentAngularModules) {
         angularCoreImports.push('NgModule');
     }
+    const booleanAttributes = outputTarget.booleanAttributes === true;
+    const componentLibImports = ['ProxyCmp'];
+    // The input transform lives in its own module so that it carries no runtime imports.
+    let transformImport = '';
+    if (usesInputTransform([cmpMeta], booleanAttributes)) {
+        transformImport = `\n${createImportStatement([INPUT_TRANSFORM_FUNCTION], './angular-component-lib/boolean-attribute')}`;
+    }
     const imports = `/* tslint:disable */
 /* auto-generated angular directive proxies */
 ${createImportStatement(angularCoreImports, '@angular/core')}
 
-${createImportStatement(['ProxyCmp'], './angular-component-lib/utils')}\n`;
+${createImportStatement(componentLibImports, './angular-component-lib/utils')}${transformImport}\n`;
     // Type imports
     const importLocation = componentCorePackage
         ? getPathToComponentTypes(config, outputTarget)
-        : normalizePath(componentsTypeFile);
+        : normalizePath(getComponentsTypeFile(pkgData, outputTarget, rootDir));
     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`;
+        sourceImport = `import { defineCustomElement as define${tagNameAsPascal} } from '${getComponentModule(config, outputTarget, cmpMeta.tagName)}';\n`;
     }
     // Generate component definition
-    const filterInternalProps = (prop) => !prop.internal;
-    const mapInputProp = (prop) => ({
-        name: prop.name,
-        required: prop.required ?? false,
-    });
     const internalProps = [];
     if (cmpMeta.properties) {
         internalProps.push(...cmpMeta.properties.filter(filterInternalProps));
     }
-    const inputs = internalProps.map(mapInputProp);
+    const inputs = internalProps.map((prop) => mapInputProp(prop, booleanAttributes));
     if (cmpMeta.virtualProperties) {
-        inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
+        inputs.push(...cmpMeta.virtualProperties.map((prop) => mapInputProp(prop)));
     }
     const orderedInputs = sortBy(inputs, (cip) => cip.name);
     const methods = [];
@@ -240,7 +285,7 @@ ${createImportStatement(['ProxyCmp'], './angular-component-lib/utils')}\n`;
     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 componentTypeDefinition = createComponentTypeDefinition(outputType, tagNameAsPascal, cmpMeta.events, componentCorePackage, customElementsDir, usesExportMaps(config));
     const proxyFileOutput = [componentDefinition, '\n'];
     if (includeSingleComponentAngularModules) {
         proxyFileOutput.push(moduleDefinition, '\n');
@@ -271,6 +316,12 @@ export function generateBarrelFile(components, outputTarget) {
 }
 export function getPathToComponentTypes(config, outputTarget) {
     const basePkg = outputTarget.componentCorePackage || '';
+    // The entry of the output the proxies are built on always exports the component types - the
+    // package root only does when the project has no `src/index.ts`, or that file re-exports them
+    if (usesExportMaps(config)) {
+        const entry = isOutputTypeCustomElementsBuild(outputTarget.outputType) ? 'standalone' : 'loader';
+        return `${normalizePath(basePkg)}/${entry}`;
+    }
     // in v5, all types (including components.d.ts) are generated in the dist/types directory
     const typesTarget = config.outputTargets?.find((o) => o.type === 'types');
     if (typesTarget) {

package/dist/plugin.d.ts

@@ -1,4 +1,9 @@
-import type { Config, OutputTargetCustom } from '@stencil/core/internal';
+import type { Config } from '@stencil/core';
 import type { OutputTargetAngular } from './types';
+type OutputTargetCustom = Extract<NonNullable<Config['outputTargets']>[number], {
+    type: 'custom';
+}>;
+type PluginConfig = Parameters<OutputTargetCustom['generator']>[0];
 export declare const angularOutputTarget: (outputTarget: OutputTargetAngular) => OutputTargetCustom;
-export declare function normalizeOutputTarget(config: Config, outputTarget: OutputTargetAngular): OutputTargetAngular;
+export declare function normalizeOutputTarget(config: PluginConfig, outputTarget: OutputTargetAngular): OutputTargetAngular;
+export {};