@stencil/angular-output-target 1.5.0 → 1.5.2

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

@@ -25,6 +25,7 @@ export declare const createAngularComponentDefinition: (tagName: string, inputs:
  * @param events The events to generate the interface properties for.
  * @param componentCorePackage The component core package.
  * @param customElementsDir The custom elements directory.
+ * @param typesModule The module every component type is imported from (Stencil v5 only).
  * @returns The component interface type definition as a string.
  */
-export declare const createComponentTypeDefinition: (outputType: OutputType, tagNameAsPascal: string, events: readonly ComponentCompilerEvent[], componentCorePackage: string, customElementsDir?: string) => string;
+export declare const createComponentTypeDefinition: (outputType: OutputType, tagNameAsPascal: string, events: readonly ComponentCompilerEvent[], componentCorePackage: string, customElementsDir?: string, typesModule?: string) => string;

package/dist/generate-angular-component.js

@@ -212,14 +212,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 typesModule The module every component type is imported from (Stencil v5 only).
  * @returns The component interface type definition as a string.
  */
-export const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, componentCorePackage, customElementsDir) => {
+export const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, componentCorePackage, customElementsDir, typesModule) => {
     const publicEvents = events.filter((ev) => !ev.internal);
     const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
         customElementsDir,
         outputType,
+        typesModule,
     });
     const eventTypes = publicEvents.map((event) => createPropertyDeclaration(event, `EventEmitter<${tagNameAsPascal}CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`));
     const interfaceDeclaration = `export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {`;

package/dist/generate-transformtag-script.d.ts

@@ -5,4 +5,6 @@ import type { OutputTargetAngular } from './types';
  * This script patches component selectors in the built Angular library to use the
  * transformed tag names (e.g., 'my-component' -> 'v1-my-component').
  */
-export declare function generateTransformTagScript(compilerCtx: CompilerCtx, components: ComponentCompilerMeta[], outputTarget: OutputTargetAngular, packageName: string): Promise<void>;
+export declare function generateTransformTagScript(compilerCtx: CompilerCtx, components: ComponentCompilerMeta[], outputTarget: OutputTargetAngular, 
+/** Import through the package's `exports` map (`<pkg>/standalone`) instead of a deep path. */
+exportMaps?: boolean): Promise<void>;

package/dist/generate-transformtag-script.js

@@ -5,10 +5,14 @@ import { dashToPascalCase } from './utils';
  * This script patches component selectors in the built Angular library to use the
  * transformed tag names (e.g., 'my-component' -> 'v1-my-component').
  */
-export async function generateTransformTagScript(compilerCtx, components, outputTarget, packageName) {
+export 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) => {

package/dist/index.cjs

@@ -126,7 +126,7 @@ const createComponentEventTypeImports = (componentTagName, events, options) => {
     const imports = [];
     const namedImports = new Set();
     const isCustomElementsBuild = isOutputTypeCustomElementsBuild(options.outputType);
-    const importPathName = normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
+    const importPathName = options.typesModule ?? normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
     /**
      * Each component's events are typed with the per-component CustomEvent type
      * generated by Stencil (e.g. `MyComponentCustomEvent<Detail>`), which carries a
@@ -366,14 +366,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 typesModule The module every component type is imported from (Stencil v5 only).
  * @returns The component interface type definition as a string.
  */
-const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, componentCorePackage, customElementsDir) => {
+const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, componentCorePackage, customElementsDir, typesModule) => {
     const publicEvents = events.filter((ev) => !ev.internal);
     const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
         customElementsDir,
         outputType,
+        typesModule,
     });
     const eventTypes = publicEvents.map((event) => createPropertyDeclaration(event, `EventEmitter<${tagNameAsPascal}CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`));
     const interfaceDeclaration = `export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {`;
@@ -491,10 +493,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__default["default"].join(path__default["default"].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) => {
@@ -832,6 +838,44 @@ const mapInputProp = (prop, booleanAttributes = false) => ({
  * @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>/components`, `<pkg>/standalone`).
+ */
+function usesExportMaps(config) {
+    // Stencil v5 only: v4's map has no `./components` or `./standalone` entry.
+    return isStencilV5(config) && config.generateExportMaps === true;
+}
+function isStencilV5(config) {
+    return (config.outputTargets || []).some((o) => ['loader-bundle', 'standalone', 'ssr', 'types'].includes(o.type));
+}
+/**
+ * For Stencil v5 only, use the `types/components.d.ts`
+ */
+function getEventTypesModule(config, outputTarget) {
+    return isStencilV5(config) && outputTarget.componentCorePackage
+        ? getPathToComponentTypes(config, outputTarget)
+        : undefined;
+}
+/**
+ * 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__default["default"].join(rootDir, path__default["default"].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;
@@ -865,27 +909,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__default["default"].dirname(path__default["default"].dirname(path__default["default"].dirname(outputTarget.directivesProxyFile)));
-        const angularPkgJsonPath = path__default["default"].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);
 }
@@ -909,10 +933,7 @@ async function copyResources(config, outputTarget) {
     ], srcDirectory);
 }
 function generateProxies(components, pkgData, outputTarget, rootDir, config) {
-    const distTypesDir = path__default["default"].dirname(pkgData.types);
-    const dtsFilePath = path__default["default"].join(rootDir, distTypesDir, GENERATED_DTS);
     const { outputType } = outputTarget;
-    const componentsTypeFile = relativeImport(outputTarget.directivesProxyFile, dtsFilePath, '.d.ts');
     const includeSingleComponentAngularModules = outputType === OutputTypes.Scam;
     const isCustomElementsBuild = isOutputTypeCustomElementsBuild(outputType);
     const isStandaloneBuild = outputType === OutputTypes.Standalone;
@@ -954,7 +975,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}${
     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();
@@ -968,7 +989,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}${
     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');
     }
@@ -998,7 +1019,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}${
          */
         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, getEventTypesModule(config, outputTarget));
         proxyFileOutput.push(componentDefinition, '\n');
         if (includeSingleComponentAngularModules) {
             proxyFileOutput.push(moduleDefinition, '\n');
@@ -1013,9 +1034,6 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}${
  */
 function generateComponentProxy(cmpMeta, pkgData, outputTarget, rootDir, config) {
     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;
@@ -1044,12 +1062,12 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}${
     // 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 internalProps = [];
@@ -1068,7 +1086,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}${
     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, getEventTypesModule(config, outputTarget));
     const proxyFileOutput = [componentDefinition, '\n'];
     if (includeSingleComponentAngularModules) {
         proxyFileOutput.push(moduleDefinition, '\n');
@@ -1099,6 +1117,10 @@ function generateBarrelFile(components, outputTarget) {
 }
 function getPathToComponentTypes(config, outputTarget) {
     const basePkg = outputTarget.componentCorePackage || '';
+    // for Stencil v5 use the `<pkg>/components` export entry when `generateExportMaps` is enabled
+    if (usesExportMaps(config)) {
+        return `${normalizePath(basePkg)}/components`;
+    }
     // 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/index.js

@@ -118,7 +118,7 @@ const createComponentEventTypeImports = (componentTagName, events, options) => {
     const imports = [];
     const namedImports = new Set();
     const isCustomElementsBuild = isOutputTypeCustomElementsBuild(options.outputType);
-    const importPathName = normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
+    const importPathName = options.typesModule ?? normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
     /**
      * Each component's events are typed with the per-component CustomEvent type
      * generated by Stencil (e.g. `MyComponentCustomEvent<Detail>`), which carries a
@@ -358,14 +358,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 typesModule The module every component type is imported from (Stencil v5 only).
  * @returns The component interface type definition as a string.
  */
-const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, componentCorePackage, customElementsDir) => {
+const createComponentTypeDefinition = (outputType, tagNameAsPascal, events, componentCorePackage, customElementsDir, typesModule) => {
     const publicEvents = events.filter((ev) => !ev.internal);
     const eventTypeImports = createComponentEventTypeImports(tagNameAsPascal, publicEvents, {
         componentCorePackage,
         customElementsDir,
         outputType,
+        typesModule,
     });
     const eventTypes = publicEvents.map((event) => createPropertyDeclaration(event, `EventEmitter<${tagNameAsPascal}CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`));
     const interfaceDeclaration = `export declare interface ${tagNameAsPascal} extends Components.${tagNameAsPascal} {`;
@@ -483,10 +485,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) => {
@@ -824,6 +830,44 @@ const mapInputProp = (prop, booleanAttributes = false) => ({
  * @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>/components`, `<pkg>/standalone`).
+ */
+function usesExportMaps(config) {
+    // Stencil v5 only: v4's map has no `./components` or `./standalone` entry.
+    return isStencilV5(config) && config.generateExportMaps === true;
+}
+function isStencilV5(config) {
+    return (config.outputTargets || []).some((o) => ['loader-bundle', 'standalone', 'ssr', 'types'].includes(o.type));
+}
+/**
+ * For Stencil v5 only, use the `types/components.d.ts`
+ */
+function getEventTypesModule(config, outputTarget) {
+    return isStencilV5(config) && outputTarget.componentCorePackage
+        ? getPathToComponentTypes(config, outputTarget)
+        : undefined;
+}
+/**
+ * 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;
@@ -857,27 +901,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);
 }
@@ -901,10 +925,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;
@@ -946,7 +967,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}${
     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();
@@ -960,7 +981,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}${
     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');
     }
@@ -990,7 +1011,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}${
          */
         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, getEventTypesModule(config, outputTarget));
         proxyFileOutput.push(componentDefinition, '\n');
         if (includeSingleComponentAngularModules) {
             proxyFileOutput.push(moduleDefinition, '\n');
@@ -1005,9 +1026,6 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}${
  */
 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;
@@ -1036,12 +1054,12 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}${
     // 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 internalProps = [];
@@ -1060,7 +1078,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}${
     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, getEventTypesModule(config, outputTarget));
     const proxyFileOutput = [componentDefinition, '\n'];
     if (includeSingleComponentAngularModules) {
         proxyFileOutput.push(moduleDefinition, '\n');
@@ -1091,6 +1109,10 @@ function generateBarrelFile(components, outputTarget) {
 }
 function getPathToComponentTypes(config, outputTarget) {
     const basePkg = outputTarget.componentCorePackage || '';
+    // for Stencil v5 use the `<pkg>/components` export entry when `generateExportMaps` is enabled
+    if (usesExportMaps(config)) {
+        return `${normalizePath(basePkg)}/components`;
+    }
     // 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>/components`, `<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

@@ -46,6 +46,44 @@ const mapInputProp = (prop, booleanAttributes = false) => ({
  * @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>/components`, `<pkg>/standalone`).
+ */
+export function usesExportMaps(config) {
+    // Stencil v5 only: v4's map has no `./components` or `./standalone` entry.
+    return isStencilV5(config) && config.generateExportMaps === true;
+}
+function isStencilV5(config) {
+    return (config.outputTargets || []).some((o) => ['loader-bundle', 'standalone', 'ssr', 'types'].includes(o.type));
+}
+/**
+ * For Stencil v5 only, use the `types/components.d.ts`
+ */
+function getEventTypesModule(config, outputTarget) {
+    return isStencilV5(config) && outputTarget.componentCorePackage
+        ? getPathToComponentTypes(config, outputTarget)
+        : undefined;
+}
+/**
+ * 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;
@@ -79,27 +117,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);
 }
@@ -123,10 +141,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;
@@ -168,7 +183,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}${
     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();
@@ -182,7 +197,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}${
     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');
     }
@@ -212,7 +227,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}${
          */
         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, getEventTypesModule(config, outputTarget));
         proxyFileOutput.push(componentDefinition, '\n');
         if (includeSingleComponentAngularModules) {
             proxyFileOutput.push(moduleDefinition, '\n');
@@ -227,9 +242,6 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}${
  */
 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;
@@ -258,12 +270,12 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}${
     // 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 internalProps = [];
@@ -282,7 +294,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}${
     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, getEventTypesModule(config, outputTarget));
     const proxyFileOutput = [componentDefinition, '\n'];
     if (includeSingleComponentAngularModules) {
         proxyFileOutput.push(moduleDefinition, '\n');
@@ -313,6 +325,10 @@ export function generateBarrelFile(components, outputTarget) {
 }
 export function getPathToComponentTypes(config, outputTarget) {
     const basePkg = outputTarget.componentCorePackage || '';
+    // for Stencil v5 use the `<pkg>/components` export entry when `generateExportMaps` is enabled
+    if (usesExportMaps(config)) {
+        return `${normalizePath(basePkg)}/components`;
+    }
     // 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 {};

package/dist/utils.d.ts

@@ -44,4 +44,9 @@ export declare const createComponentEventTypeImports: (componentTagName: string,
     componentCorePackage: string;
     customElementsDir?: string;
     outputType: OutputType;
+    /**
+     * The module every component type is imported from (Stencil v5: the `types` output's
+     * `components.d.ts`). When not set, v4's own locations are used.
+     */
+    typesModule?: string;
 }) => string;

package/dist/utils.js

@@ -118,7 +118,7 @@ export const createComponentEventTypeImports = (componentTagName, events, option
     const imports = [];
     const namedImports = new Set();
     const isCustomElementsBuild = isOutputTypeCustomElementsBuild(options.outputType);
-    const importPathName = normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
+    const importPathName = options.typesModule ?? normalizePath(componentCorePackage) + (isCustomElementsBuild ? `/${customElementsDir}` : '');
     /**
      * Each component's events are typed with the per-component CustomEvent type
      * generated by Stencil (e.g. `MyComponentCustomEvent<Detail>`), which carries a

package/dist/wizard.js

@@ -49,6 +49,19 @@ async function allowPnpmBuild(pkg, rootDir, workspaceRoot) {
 // ---------------------------------------------------------------------------
 // Wrapper package scaffolding
 // ---------------------------------------------------------------------------
+/**
+ * The core package's real npm name. This is not always its lowercased namespace
+ * (`testy-test` vs `testytest`), and it's what the wrapper has to depend on and import from.
+ */
+async function readCorePackageName(rootDir, fallback) {
+    try {
+        const { name } = JSON.parse(await readFile(join(rootDir, 'package.json'), 'utf8'));
+        return typeof name === 'string' && name ? name : fallback;
+    }
+    catch {
+        return fallback;
+    }
+}
 async function pathExists(p) {
     try {
         await access(p);
@@ -212,7 +225,7 @@ export const wizard = {
             const directivesArrayFile = selectedOutputType === 'component'
                 ? relative(config.rootDir, join(wrapperDir, 'src', 'lib', 'directives.array.ts')).replace(/\\/g, '/')
                 : undefined;
-            const componentCorePackage = config.fsNamespace;
+            const componentCorePackage = await readCorePackageName(config.rootDir, config.fsNamespace);
             // Scaffold wrapper package if the directory doesn't exist yet
             const shouldScaffold = !(await pathExists(wrapperDir));
             if (shouldScaffold) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/angular-output-target",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -58,7 +58,7 @@
   "devDependencies": {
     "@angular/core": "8.2.14",
     "@angular/forms": "8.2.14",
-    "@stencil/cli": "^5.0.0 || >=5.0.0-alpha.17 <5.0.0-next.0",
+    "@stencil/cli": "^5.0.0 || >=5.0.0-beta.18",
     "@stencil/core": "4.41.0",
     "@types/node": "^18.19.130",
     "npm-run-all2": "^6.2.6",
@@ -69,7 +69,7 @@
     "vitest": "^2.1.9"
   },
   "peerDependencies": {
-    "@stencil/core": ">=2.0.0 || >=3 || >=4.0.0 || ^5.0.0 || >=5.0.0-alpha.17 <5.0.0-next.0"
+    "@stencil/core": ">=2.0.0 || >=3 || >=4.0.0 || ^5.0.0 || >=5.0.0-beta.18"
   },
   "gitHead": "a3588e905186a0e86e7f88418fd5b2f9531b55e0"
 }