From 88c54ae5bfc93b053906b51d3dfc4a2e52db19bc Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Wed, 26 Mar 2025 17:53:56 +0100
Subject: [PATCH] Add tag name transformer support to defineCustomElement

---
 .../custom-elements-types.ts                  |  3 +-
 .../add-define-custom-element-function.ts     | 54 ++++++++++++++++---
 2 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/src/compiler/output-targets/dist-custom-elements/custom-elements-types.ts b/src/compiler/output-targets/dist-custom-elements/custom-elements-types.ts
index a2fdf9de981..b357510fca0 100644
--- a/src/compiler/output-targets/dist-custom-elements/custom-elements-types.ts
+++ b/src/compiler/output-targets/dist-custom-elements/custom-elements-types.ts
@@ -195,10 +195,11 @@ const generateCustomElementType = (componentsDtsRelPath: string, cmp: d.Componen
     `    prototype: ${tagNameAsPascal};`,
     `    new (): ${tagNameAsPascal};`,
     `};`,
+    `type TagNameTransformer = (tagName: string) => string;`,
     `/**`,
     ` * Used to define this component and all nested components recursively.`,
     ` */`,
-    `export const defineCustomElement: () => void;`,
+    `export const defineCustomElement: (tagNameTransformer?: TagNameTransformer) => void;`,
     ``,
   ];
 
diff --git a/src/compiler/transformers/component-native/add-define-custom-element-function.ts b/src/compiler/transformers/component-native/add-define-custom-element-function.ts
index 1d830e331cf..28ec8d49bd7 100644
--- a/src/compiler/transformers/component-native/add-define-custom-element-function.ts
+++ b/src/compiler/transformers/component-native/add-define-custom-element-function.ts
@@ -83,7 +83,9 @@ const setupComponentDependencies = (
       newStatements.push(createImportStatement([`defineCustomElement as ${importAs}`], foundDep.sourceFilePath));
 
       // define a dependent component by recursively calling their own `defineCustomElement()`
-      const callExpression = ts.factory.createCallExpression(ts.factory.createIdentifier(importAs), undefined, []);
+      const callExpression = ts.factory.createCallExpression(ts.factory.createIdentifier(importAs), undefined, [
+        ts.factory.createIdentifier('tagNameTransformer'),
+      ]);
       // `case` blocks that define the dependent components. We'll add them to our switch statement later.
       caseStatements.push(createCustomElementsDefineCase(foundDep.tagName, callExpression));
     });
@@ -107,7 +109,7 @@ const setupComponentDependencies = (
  * @returns ts AST CaseClause
  */
 const createCustomElementsDefineCase = (tagName: string, actionExpression: ts.Expression): ts.CaseClause => {
-  return ts.factory.createCaseClause(ts.factory.createStringLiteral(tagName), [
+  return ts.factory.createCaseClause(wrapTagNameWithTransformer(tagName), [
     ts.factory.createIfStatement(
       ts.factory.createPrefixUnaryExpression(
         ts.SyntaxKind.ExclamationToken,
@@ -158,7 +160,43 @@ const addDefineCustomElementFunction = (
     undefined,
     ts.factory.createIdentifier('defineCustomElement'),
     undefined,
-    [],
+    [
+      ts.factory.createParameterDeclaration(
+        undefined,
+        undefined,
+        ts.factory.createIdentifier('tagNameTransformer'),
+        undefined,
+        ts.factory.createFunctionTypeNode(
+          undefined,
+          [
+            ts.factory.createParameterDeclaration(
+              undefined,
+              undefined,
+              ts.factory.createIdentifier('tagName'),
+              undefined,
+              ts.factory.createKeywordTypeNode(ts.SyntaxKind.StringKeyword),
+            ),
+          ],
+          ts.factory.createKeywordTypeNode(ts.SyntaxKind.StringKeyword),
+        ),
+        ts.factory.createArrowFunction(
+          undefined,
+          undefined,
+          [
+            ts.factory.createParameterDeclaration(
+              undefined,
+              undefined,
+              ts.factory.createIdentifier('tagName'),
+              undefined,
+              undefined,
+            ),
+          ],
+          undefined,
+          ts.factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken),
+          ts.factory.createBlock([ts.factory.createReturnStatement(ts.factory.createIdentifier('tagName'))], true),
+        ),
+      ),
+    ],
     undefined,
     ts.factory.createBlock(
       [
@@ -177,9 +215,7 @@ const addDefineCustomElementFunction = (
                 'components',
                 undefined,
                 undefined,
-                ts.factory.createArrayLiteralExpression(
-                  tagNames.map((tagName) => ts.factory.createStringLiteral(tagName)),
-                ),
+                ts.factory.createArrayLiteralExpression(tagNames.map((tagName) => wrapTagNameWithTransformer(tagName))),
               ),
             ],
             ts.NodeFlags.Const,
@@ -236,3 +272,9 @@ function createAutoDefinitionExpression(componentName: string): ts.ExpressionSta
     ]),
   );
 }
+
+function wrapTagNameWithTransformer(tagName: string) {
+  return ts.factory.createCallExpression(ts.factory.createIdentifier('tagNameTransformer'), undefined, [
+    ts.factory.createStringLiteral(tagName),
+  ]);
+}