@stencil/angular-output-target 1.1.0 → 1.2.0

package/dist/index.js

@@ -186,15 +186,16 @@ function formatInputs(inputs) {
  *
  * @param tagName The tag name of the component.
  * @param inputs The inputs of the Stencil component (e.g. [{name: 'myInput', required: true]).
- * @param outputs The outputs/events of the Stencil component. (e.g. ['myOutput']).
  * @param methods The methods of the Stencil component. (e.g. ['myMethod']).
  * @param includeImportCustomElements Whether to define the component as a custom element.
  * @param standalone Whether to define the component as a standalone component.
  * @param inlineComponentProps List of properties that should be inlined into the component definition.
+ * @param events The events of the Stencil component for generating outputs.
  * @returns The component declaration as a string.
  */
-const createAngularComponentDefinition = (tagName, inputs, outputs, methods, includeImportCustomElements = false, standalone = false, inlineComponentProps = []) => {
+const createAngularComponentDefinition = (tagName, inputs, methods, includeImportCustomElements = false, standalone = false, inlineComponentProps = [], events = []) => {
     const tagNameAsPascal = dashToPascalCase(tagName);
+    const outputs = events.filter((event) => !event.internal).map((event) => event.name);
     const hasInputs = inputs.length > 0;
     const hasOutputs = outputs.length > 0;
     const hasMethods = methods.length > 0;
@@ -223,7 +224,18 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
         standaloneOption = `\n  standalone: false`;
     }
     const propertyDeclarations = inlineComponentProps.map((m) => createPropertyDeclaration(m, `Components.${tagNameAsPascal}['${m.name}']`, true));
-    const propertiesDeclarationText = [`protected el: HTML${tagNameAsPascal}Element;`, ...propertyDeclarations].join('\n  ');
+    const outputDeclarations = events
+        .filter((event) => !event.internal)
+        .map((event) => {
+        const camelCaseOutput = event.name.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+        const outputType = `EventEmitter<CustomEvent<${formatOutputType(tagNameAsPascal, event)}>>`;
+        return `@Output() ${camelCaseOutput} = new ${outputType}();`;
+    });
+    const propertiesDeclarationText = [
+        `protected el: HTML${tagNameAsPascal}Element;`,
+        ...propertyDeclarations,
+        ...outputDeclarations,
+    ].join('\n  ');
     /**
      * Notes on the generated output:
      * - We disable @angular-eslint/no-inputs-metadata-property, so that
@@ -237,16 +249,13 @@ const createAngularComponentDefinition = (tagName, inputs, outputs, methods, inc
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: [${formattedInputs}],${standaloneOption}
+  inputs: [${formattedInputs}],${hasOutputs ? `\n  outputs: [${formattedOutputs}],` : ''}${standaloneOption}
 })
 export class ${tagNameAsPascal} {
   ${propertiesDeclarationText}
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
-    this.el = r.nativeElement;${hasOutputs
-        ? `
-    proxyOutputs(this, this.el, [${formattedOutputs}]);`
-        : ''}
+    this.el = r.nativeElement;
   }
 }`;
     return output;
@@ -444,17 +453,348 @@ export class ${moduleClassName} { }`;
     return moduleDefinition;
 };
 
+/**
+ * Generates the patch-transform-selectors.mjs script for Angular transformTag support.
+ * 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) {
+    const scriptsDirectory = path.join(path.dirname(outputTarget.directivesProxyFile), '../../scripts');
+    const customElementsDir = outputTarget.customElementsDir || 'dist/components';
+    const stencilImportPath = `${outputTarget.componentCorePackage}/${customElementsDir}/index.js`;
+    // Generate the mappings object
+    const mappings = components
+        .map((component) => {
+        const tagName = component.tagName;
+        const pascalName = dashToPascalCase(tagName);
+        return `  '${tagName}': '${pascalName}'`;
+    })
+        .join(',\n');
+    // Generate selector patcher script
+    const patchSelectorsContent = `#!/usr/bin/env node
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * Selector Patcher for transformTag support
+ *
+ * AUTO-GENERATED - DO NOT EDIT
+ *
+ * This script patches @Component selectors in the installed Angular component library
+ * to match your runtime tag transformer. Run this as a postinstall script in your app.
+ *
+ * Usage Option 1 - Config file (recommended for complex transformers):
+ * Create tag-transformer.config.mjs in your app root:
+ *    export default (tag) => {
+ *      if (tag.startsWith('my-transform-')) return \`v1-\${tag}\`;
+ *      // ... complex logic
+ *      return tag;
+ *    };
+ *
+ * Then in package.json:
+ *    "scripts": {
+ *      "postinstall": "patch-transform-selectors"
+ *    }
+ *
+ * Usage Option 2 - CLI argument (for simple transformers):
+ *    "scripts": {
+ *      "postinstall": "patch-transform-selectors \\"(tag) => tag.startsWith('my-transform-') ? \\\\\`v1-\\\${tag}\\\\\` : tag\\""
+ *    }
+ */
+
+import { readFileSync, writeFileSync, readdirSync, statSync, existsSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath, pathToFileURL } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Try to load transformer from config file or CLI argument
+let TAG_TRANSFORMER;
+let transformerArg;
+
+// Option 1: Look for tag-transformer.config.mjs in the consuming app
+const configPath = join(process.cwd(), 'tag-transformer.config.mjs');
+if (existsSync(configPath)) {
+  console.log('[TransformTag] Loading transformer from tag-transformer.config.mjs');
+  try {
+    const configUrl = pathToFileURL(configPath).href;
+    const config = await import(configUrl);
+    TAG_TRANSFORMER = config.default;
+
+    if (typeof TAG_TRANSFORMER !== 'function') {
+      throw new Error('Config file must export a default function');
+    }
+
+    // Store as string for injection later
+    transformerArg = TAG_TRANSFORMER.toString();
+    console.log('[TransformTag] Loaded transformer from config file');
+  } catch (error) {
+    console.error('[TransformTag] Error loading tag-transformer.config.mjs:', error.message);
+    console.error('Make sure the file exports a default function.');
+    process.exit(1);
+  }
+} else {
+  // Option 2: Fall back to CLI argument
+  transformerArg = process.argv[2];
+
+  if (!transformerArg) {
+    console.error('[TransformTag] Error: No transformer provided.');
+    console.error('');
+    console.error('Option 1 - Create tag-transformer.config.mjs in your app root:');
+    console.error('  export default (tag) => tag.startsWith(\\'my-\\') ? \`v1-\${tag}\` : tag;');
+    console.error('');
+    console.error('Option 2 - Pass transformer as CLI argument:');
+    console.error('  patch-transform-selectors "(tag) => tag.startsWith(\\'my-\\') ? \`v1-\${tag}\` : tag"');
+    process.exit(1);
+  }
+
+  // Evaluate the transformer string to get the function
+  try {
+    TAG_TRANSFORMER = eval(transformerArg);
+    if (typeof TAG_TRANSFORMER !== 'function') {
+      throw new Error('Transformer must be a function');
+    }
+    console.log('[TransformTag] Using transformer from CLI argument');
+  } catch (error) {
+    console.error('[TransformTag] Error: Invalid transformer function:', error.message);
+    console.error('The transformer must be a valid JavaScript function expression.');
+    console.error('Example: "(tag) => tag.startsWith(\\'my-\\') ? \`v1-\${tag}\` : tag"');
+    process.exit(1);
+  }
+}
+
+const TAG_MAPPINGS = {
+${mappings}
+};
+
+console.log('[TransformTag] Patching component selectors...');
+
+try {
+  // Find the bundled JavaScript file (could be fesm2022, fesm2015, fesm5, etc.)
+  const parentDir = join(__dirname, '..');
+
+  // Find all .js/.mjs files in fesm* directories AND fesm*.js/mjs files at root
+  let bundlePaths = [];
+
+  try {
+    const entries = readdirSync(parentDir);
+    for (const entry of entries) {
+      const entryPath = join(parentDir, entry);
+      let stat;
+      try {
+        stat = statSync(entryPath);
+      } catch (e) {
+        continue;
+      }
+
+      // Check for fesm* directories
+      if (stat.isDirectory() && /^fesm/.test(entry)) {
+        try {
+          const fesmFiles = readdirSync(entryPath);
+          for (const file of fesmFiles) {
+            if (/\\.m?js$/.test(file)) {
+              bundlePaths.push(join(entryPath, file));
+            }
+          }
+        } catch (e) {
+          // Skip if can't read fesm directory
+        }
+      }
+      // Check for fesm*.js or fesm*.mjs files at root
+      else if (stat.isFile() && /^fesm.*\\.m?js$/.test(entry)) {
+        bundlePaths.push(entryPath);
+      }
+    }
+  } catch (e) {
+    console.error('[TransformTag] Could not read parent directory:', parentDir);
+    process.exit(1);
+  }
+
+  if (bundlePaths.length === 0) {
+    console.error('[TransformTag] Could not find any fesm* directories or files to patch.');
+    process.exit(1);
+  }
+
+  console.log('[TransformTag] Found bundles:', bundlePaths);
+
+  // Patch all bundled JavaScript files
+  let totalPatchedCount = 0;
+
+  for (const bundlePath of bundlePaths) {
+    let bundleContent;
+    try {
+      bundleContent = readFileSync(bundlePath, 'utf8');
+    } catch (e) {
+      console.error('[TransformTag] Could not read bundle:', bundlePath);
+      continue;
+    }
+
+    let patchedCount = 0;
+
+    for (const [originalTag, pascalName] of Object.entries(TAG_MAPPINGS)) {
+      const transformedTag = TAG_TRANSFORMER(originalTag);
+
+      // Only patch if the tag is actually transformed
+      if (transformedTag !== originalTag) {
+        // Update selector from original tag name to transformed tag name
+        // e.g., selector: 'my-transform-test' becomes selector: 'v1-my-transform-test'
+        const selectorRegex = new RegExp(
+          \`(selector:\\\\s*)(['"\\\`])\${originalTag}\\\\2\`,
+          'g'
+        );
+
+        const newContent = bundleContent.replace(
+          selectorRegex,
+          \`$1'\${transformedTag}'\`
+        );
+
+        if (newContent !== bundleContent) {
+          bundleContent = newContent;
+          patchedCount++;
+          console.log(\`[TransformTag] Patched selector for \${originalTag} -> \${transformedTag}\`);
+        }
+      }
+    }
+
+    // Inject setTagTransformer call with the user's transformer
+    // Find the export statement and add the call before it
+    const exportMatch = bundleContent.match(/export \\{ setTagTransformer/);
+    if (exportMatch && patchedCount > 0) {
+      const transformerCode = \`
+// Auto-injected by patch-transform-selectors
+// Call setTagTransformer with the user-provided transformer
+import { setTagTransformer as stencilSetTagTransformer } from '${stencilImportPath}';
+stencilSetTagTransformer(\${transformerArg});
+\`;
+      bundleContent = transformerCode + bundleContent;
+      console.log('[TransformTag] Injected setTagTransformer call into bundle');
+    }
+
+    // Write the patched bundle
+    if (patchedCount > 0) {
+      writeFileSync(bundlePath, bundleContent);
+      totalPatchedCount += patchedCount;
+      console.log(\`[TransformTag] Successfully patched \${patchedCount} component selectors in \${bundlePath}\`);
+    }
+  }
+
+  // Find and patch all .d.ts files
+  let totalTypePatchedCount = 0;
+
+  function patchTypeDefsInDir(dir) {
+    let files;
+    try {
+      files = readdirSync(dir);
+    } catch (e) {
+      return;
+    }
+
+    for (const file of files) {
+      const filePath = join(dir, file);
+      let stat;
+      try {
+        stat = statSync(filePath);
+      } catch (e) {
+        continue;
+      }
+
+      if (stat.isDirectory()) {
+        patchTypeDefsInDir(filePath);
+      } else if (file.endsWith('.d.ts')) {
+        let typeDefsContent;
+        try {
+          typeDefsContent = readFileSync(filePath, 'utf8');
+        } catch (e) {
+          continue;
+        }
+
+        let modified = false;
+
+        for (const [originalTag, pascalName] of Object.entries(TAG_MAPPINGS)) {
+          const transformedTag = TAG_TRANSFORMER(originalTag);
+
+          if (transformedTag !== originalTag) {
+            // Update selector in type definitions - format: ɵɵComponentDeclaration<ClassName, "tag-name", ...>
+            const typeDefRegex = new RegExp(
+              \`(ɵɵComponentDeclaration<\${pascalName},\\\\s*)"(\${originalTag})"\`,
+              'g'
+            );
+
+            const newTypeContent = typeDefsContent.replace(
+              typeDefRegex,
+              \`$1"\${transformedTag}"\`
+            );
+
+            if (newTypeContent !== typeDefsContent) {
+              typeDefsContent = newTypeContent;
+              modified = true;
+            }
+          }
+        }
+
+        if (modified) {
+          writeFileSync(filePath, typeDefsContent);
+          totalTypePatchedCount++;
+          console.log(\`[TransformTag] Patched type definitions in: \${filePath}\`);
+        }
+      }
+    }
+  }
+
+  patchTypeDefsInDir(parentDir);
+
+  if (totalTypePatchedCount > 0) {
+    console.log(\`[TransformTag] Successfully patched selectors in \${totalTypePatchedCount} type definition files.\`);
+  }
+
+  if (totalPatchedCount === 0 && totalTypePatchedCount === 0) {
+    console.log('[TransformTag] No selectors needed patching.');
+  }
+} catch (error) {
+  console.error('[TransformTag] Error patching selectors:', error.message);
+  console.error('Stack:', error.stack);
+  process.exit(1);
+}
+`;
+    await compilerCtx.fs.writeFile(path.join(scriptsDirectory, 'patch-transform-selectors.mjs'), patchSelectorsContent);
+}
+
 async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
     const pkgData = await readPackageJson(config, rootDir);
     const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
-    await Promise.all([
+    const tasks = [
         compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
         copyResources(config, outputTarget),
         generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
         generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
-    ]);
+    ];
+    // 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));
+    }
+    await Promise.all(tasks);
 }
 function getFilteredComponents(excludeComponents = [], cmps) {
     return sortBy(cmps, (cmp) => cmp.tagName).filter((c) => !excludeComponents.includes(c.tagName) && !c.internal);
@@ -489,16 +829,13 @@ function generateProxies(components, pkgData, outputTarget, rootDir) {
      */
     const angularCoreImports = ['ChangeDetectionStrategy', 'ChangeDetectorRef', 'Component', 'ElementRef'];
     if (includeOutputImports) {
-        angularCoreImports.push('EventEmitter');
+        angularCoreImports.push('EventEmitter', 'Output');
     }
     angularCoreImports.push('NgZone');
     /**
      * The collection of named imports from the angular-component-lib/utils.
      */
     const componentLibImports = ['ProxyCmp'];
-    if (includeOutputImports) {
-        componentLibImports.push('proxyOutputs');
-    }
     if (includeSingleComponentAngularModules) {
         angularCoreImports.push('NgModule');
     }
@@ -557,10 +894,6 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
             inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
         }
         const orderedInputs = sortBy(inputs, (cip) => cip.name);
-        const outputs = [];
-        if (cmpMeta.events) {
-            outputs.push(...cmpMeta.events.filter(filterInternalProps).map(mapPropName));
-        }
         const methods = [];
         if (cmpMeta.methods) {
             methods.push(...cmpMeta.methods.filter(filterInternalProps).map(mapPropName));
@@ -572,7 +905,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
          * 2. Optionally the @NgModule decorated class (if includeSingleComponentAngularModules is true)
          * 3. The component interface (using declaration merging for types).
          */
-        const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, outputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps);
+        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);
         proxyFileOutput.push(componentDefinition, '\n');

package/dist/output-angular.js

@@ -4,17 +4,43 @@ import { createAngularComponentDefinition, createComponentTypeDefinition } from
 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';
 export async function angularDirectiveProxyOutput(compilerCtx, outputTarget, components, config) {
     const filteredComponents = getFilteredComponents(outputTarget.excludeComponents, components);
     const rootDir = config.rootDir;
     const pkgData = await readPackageJson(config, rootDir);
     const finalText = generateProxies(filteredComponents, pkgData, outputTarget, config.rootDir);
-    await Promise.all([
+    const tasks = [
         compilerCtx.fs.writeFile(outputTarget.directivesProxyFile, finalText),
         copyResources(config, outputTarget),
         generateAngularDirectivesFile(compilerCtx, filteredComponents, outputTarget),
         generateValueAccessors(compilerCtx, filteredComponents, outputTarget, config),
-    ]);
+    ];
+    // 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));
+    }
+    await Promise.all(tasks);
 }
 function getFilteredComponents(excludeComponents = [], cmps) {
     return sortBy(cmps, (cmp) => cmp.tagName).filter((c) => !excludeComponents.includes(c.tagName) && !c.internal);
@@ -49,16 +75,13 @@ export function generateProxies(components, pkgData, outputTarget, rootDir) {
      */
     const angularCoreImports = ['ChangeDetectionStrategy', 'ChangeDetectorRef', 'Component', 'ElementRef'];
     if (includeOutputImports) {
-        angularCoreImports.push('EventEmitter');
+        angularCoreImports.push('EventEmitter', 'Output');
     }
     angularCoreImports.push('NgZone');
     /**
      * The collection of named imports from the angular-component-lib/utils.
      */
     const componentLibImports = ['ProxyCmp'];
-    if (includeOutputImports) {
-        componentLibImports.push('proxyOutputs');
-    }
     if (includeSingleComponentAngularModules) {
         angularCoreImports.push('NgModule');
     }
@@ -117,10 +140,6 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
             inputs.push(...cmpMeta.virtualProperties.map(mapInputProp));
         }
         const orderedInputs = sortBy(inputs, (cip) => cip.name);
-        const outputs = [];
-        if (cmpMeta.events) {
-            outputs.push(...cmpMeta.events.filter(filterInternalProps).map(mapPropName));
-        }
         const methods = [];
         if (cmpMeta.methods) {
             methods.push(...cmpMeta.methods.filter(filterInternalProps).map(mapPropName));
@@ -132,7 +151,7 @@ ${createImportStatement(componentLibImports, './angular-component-lib/utils')}\n
          * 2. Optionally the @NgModule decorated class (if includeSingleComponentAngularModules is true)
          * 3. The component interface (using declaration merging for types).
          */
-        const componentDefinition = createAngularComponentDefinition(cmpMeta.tagName, orderedInputs, outputs, methods, isCustomElementsBuild, isStandaloneBuild, inlineComponentProps);
+        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);
         proxyFileOutput.push(componentDefinition, '\n');

package/dist/types.d.ts

@@ -33,6 +33,42 @@ export interface OutputTargetAngular {
      * to type-check and show jsdocs when using the components in html-templates.
      */
     inlineProperties?: boolean;
+    /**
+     * Use `transformTag` to generate a build-time script.
+     * This script patches Angular `@Component` selectors in any installed Angular wrapper library
+     * enabling run-time tag transformation. Run the script as a postinstall script in your app.
+     *
+     * Setup:
+     * 1. Export `transformTag` and `setTagTransformer` from your component library:
+     * ```ts
+     * // src/index.ts
+     * export { transformTag, setTagTransformer } from '@stencil/core';
+     * ```
+     *
+     * 2. Add the patch script as a postinstall hook in your consuming app's package.json:
+     * ```json
+     * {
+     *   "scripts": {
+     *     "postinstall": "patch-transform-selectors \"(tag) => tag.startsWith('my-') ? `v1-${tag}` : tag\""
+     *   }
+     * }
+     * ```
+     *
+     * 3. Configure the transformer at runtime in your Angular app with the SAME transformer:
+     * ```ts
+     * // main.ts
+     * import { setTagTransformer } from 'component-library';
+     * setTagTransformer((tag) => tag.startsWith('my-') ? `v1-${tag}` : tag);
+     * ```
+     *
+     * Angular relies on a static selector string so the patch script is used to
+     * modify the installed Angular component library for transformed tags.
+     * For example, if `my-button` transforms to `v1-my-button`, the selector
+     * will be patched from `selector: 'my-button'` to `selector: 'v1-my-button'`.
+     *
+     * @default false
+     */
+    transformTag?: 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.1.0",
+  "version": "1.2.0",
   "description": "Angular output target for @stencil/core components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -50,7 +50,7 @@
   "devDependencies": {
     "@angular/core": "8.2.14",
     "@angular/forms": "8.2.14",
-    "@stencil/core": "4.35.1",
+    "@stencil/core": "4.41.0",
     "@types/node": "^18.0.0",
     "npm-run-all2": "^6.2.4",
     "rimraf": "^5.0.0",

package/resources/control-value-accessors/boolean-value-accessor.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef } from '@angular/core';
+import { Directive, ElementRef, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { ValueAccessor } from './value-accessor';
@@ -12,7 +12,7 @@ import { ValueAccessor } from './value-accessor';
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
-      useExisting: BooleanValueAccessor,
+      useExisting: forwardRef(() => BooleanValueAccessor),
       multi: true
     }
   ]<VALUE_ACCESSOR_STANDALONE>

package/resources/control-value-accessors/number-value-accessor.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef } from '@angular/core';
+import { Directive, ElementRef, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { ValueAccessor } from './value-accessor';
@@ -12,7 +12,7 @@ import { ValueAccessor } from './value-accessor';
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
-      useExisting: NumericValueAccessor,
+      useExisting: forwardRef(() => NumericValueAccessor),
       multi: true
     }
   ]<VALUE_ACCESSOR_STANDALONE>

package/resources/control-value-accessors/radio-value-accessor.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef } from '@angular/core';
+import { Directive, ElementRef, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { ValueAccessor } from './value-accessor';
@@ -12,7 +12,7 @@ import { ValueAccessor } from './value-accessor';
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
-      useExisting: RadioValueAccessor,
+      useExisting: forwardRef(() => RadioValueAccessor),
       multi: true
     }
   ]<VALUE_ACCESSOR_STANDALONE>

package/resources/control-value-accessors/select-value-accessor.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef } from '@angular/core';
+import { Directive, ElementRef, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { ValueAccessor } from './value-accessor';
@@ -12,7 +12,7 @@ import { ValueAccessor } from './value-accessor';
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
-      useExisting: SelectValueAccessor,
+      useExisting: forwardRef(() => SelectValueAccessor),
       multi: true
     }
   ]<VALUE_ACCESSOR_STANDALONE>

package/resources/control-value-accessors/text-value-accessor.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef } from '@angular/core';
+import { Directive, ElementRef, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { ValueAccessor } from './value-accessor';
@@ -12,7 +12,7 @@ import { ValueAccessor } from './value-accessor';
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
-      useExisting: TextValueAccessor,
+      useExisting: forwardRef(() => TextValueAccessor),
       multi: true
     }
   ]<VALUE_ACCESSOR_STANDALONE>