@stencil/angular-output-target 1.1.0 → 1.2.0

package/dist/index.cjs.js

@@ -194,15 +194,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;
@@ -231,7 +232,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
@@ -245,16 +257,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;
@@ -452,17 +461,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__default["default"].join(path__default["default"].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__default["default"].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__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));
+    }
+    await Promise.all(tasks);
 }
 function getFilteredComponents(excludeComponents = [], cmps) {
     return sortBy(cmps, (cmp) => cmp.tagName).filter((c) => !excludeComponents.includes(c.tagName) && !c.internal);
@@ -497,16 +837,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');
     }
@@ -565,10 +902,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));
@@ -580,7 +913,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');