fix: fix web-component tag name transform issue

BuilderIO · Jan 4, 2024 · e05a9eb · e05a9eb
1 parent 198ad21
commit e05a9eb
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/packages/core/src/generators/react/helpers.ts b/packages/core/src/generators/react/helpers.ts
@@ -8,7 +8,8 @@ import traverse from 'traverse';
 import { ToReactOptions } from './types';
 
 export const processBinding = (str: string, options: ToReactOptions) => {
-  if (options.stateType !== 'useState') {
+  // fix web-component tag transform issue with dashes by not transforming it
+  if (options.stateType !== 'useState' || str.includes('-')) {
     return str;
   }
 

diff --git a/packages/core/src/helpers/plugins/process-code/index.ts b/packages/core/src/helpers/plugins/process-code/index.ts
@@ -127,8 +127,12 @@ export const createCodeProcessorPlugin =
         }
       }
 
-      const result = codeProcessor('dynamic-jsx-elements', json)(node.name, '');
-
+      // Fix web component tag issue due to the babel transform
+      // For exmaple: we pass a tag called "swiper-container", and it will be renamed as "swiper - container" after babel transforming,
+      // because babel will automatically identify the "-" as an operator, and add a space before and after it.
+      const result = node.name.includes('-')
+        ? node.name
+        : codeProcessor('dynamic-jsx-elements', json)(node.name, '');
       if (typeof result === 'string') {
         node.name = result;
       } else {