fix: ENG-9776 AI feature not working because of custom component name which includes colon (#1780)

* fix: ENG-9776 custom component name which includes colon

* chore: add changeset

* fix: review comment

* fix: test

* fix: remove unused variable

Author: midhunadarvin

.changeset/kind-steaks-study.md

@@ -0,0 +1,6 @@
+---
+'@builder.io/mitosis': patch
+'@builder.io/mitosis-cli': patch
+---
+
+fix: support for builder custom component with a colon in their name

packages/core/src/generators/builder/generator.ts

@@ -138,8 +138,11 @@ const findStateWithinMitosisComponent = (
 const omitMetaProperties = (obj: Record<string, any>) =>
   omitBy(obj, (_value, key) => key.startsWith('$'));
 
-const builderBlockPrefixes = ['Amp', 'Core', 'Builder', 'Raw', 'Form'];
-const mapComponentName = (name: string) => {
+export const builderBlockPrefixes = ['Amp', 'Core', 'Builder', 'Raw', 'Form'];
+const mapComponentName = (name: string, properties?: { [key: string]: string | undefined }) => {
+  if (properties?.['data-builder-originalName']) {
+    return properties['data-builder-originalName'];
+  }
   if (name === 'CustomCode') {
     return 'Custom Code';
   }
@@ -792,8 +795,8 @@ export const blockToBuilder = (
       }),
       ...(thisIsComponent && {
         component: {
-          name: mapComponentName(json.name),
-          options: componentOptions,
+          name: mapComponentName(json.name, json.properties),
+          options: omit(componentOptions, ['data-builder-originalName']),
         },
       }),
       code: {
@@ -905,7 +908,6 @@ export const componentToBuilder =
             { ...convertMitosisStateToBuilderState(component.state) },
             options.stateMap,
           );
-          console.log('stateData', stateData);
           return { state: stateData };
         })(),
         blocks: component.children

packages/core/src/parsers/builder/builder.test.ts

@@ -1,4 +1,7 @@
+import { componentToBuilder } from '@/generators/builder';
+import { componentToMitosis } from '@/generators/mitosis';
 import { BuilderContent } from '@builder.io/sdk';
+import { parseJsx } from '../jsx';
 import { builderContentToMitosisComponent } from './builder';
 
 describe('Unpaired Surrogates', () => {
@@ -28,4 +31,84 @@ describe('Unpaired Surrogates', () => {
     expect(output.children[0].children[0].properties._text).not.toContain('\uD800');
     expect(output.children[0].children[0].properties._text).not.toContain('\uDFFF');
   });
+
+  test('should handle builder component with/without a colon in the name', () => {
+    const builderContent: BuilderContent = {
+      data: {
+        blocks: [
+          {
+            '@type': '@builder.io/sdk:Element' as const,
+            component: {
+              name: 'Text:123',
+              options: {
+                text: 'Hello World',
+              },
+            },
+          },
+          {
+            '@type': '@builder.io/sdk:Element' as const,
+            component: {
+              name: 'Text123',
+              options: {
+                text: 'Hello World',
+              },
+            },
+          },
+        ],
+      },
+    };
+
+    const component = builderContentToMitosisComponent(builderContent);
+    expect(component.children[0].name).toBe('Text123');
+    expect(component.children[1].name).toBe('Text123');
+    const backToBuilder = componentToBuilder()({ component });
+    expect(backToBuilder?.data?.blocks?.[0]?.component?.name).toBe('Text:123');
+    expect(backToBuilder?.data?.blocks?.[1]?.component?.name).toBe('Text123');
+  });
+
+  test('should handle builder content -> mitosis json -> mitosis jsx -> mitosis json -> builder content', () => {
+    const builderContent: BuilderContent = {
+      data: {
+        blocks: [
+          {
+            '@type': '@builder.io/sdk:Element' as const,
+            component: {
+              name: 'Text:123',
+              options: {
+                text: 'Hello World',
+              },
+            },
+          },
+        ],
+      },
+    };
+
+    // Convert Builder JSON to Mitosis JSON
+    const mitosisCmp = builderContentToMitosisComponent(builderContent);
+    expect(mitosisCmp.children[0].name).toBe('Text123');
+    expect(mitosisCmp.children[0].properties['data-builder-originalName']).toBe('Text:123');
+
+    // Convert Mitosis JSON to Mitosis JSX
+    const mitosisJsx = componentToMitosis()({ component: mitosisCmp });
+    expect(mitosisJsx).toMatchInlineSnapshot(`
+      "import { Text123 } from \\"@components\\";
+
+      export default function MyComponent(props) {
+        return <Text123 text=\\"Hello World\\" data-builder-originalName=\\"Text:123\\" />;
+      }
+      "
+    `);
+
+    // Convert back Mitosis JSX to Mitosis JSON
+    const backToMitosisCmp = parseJsx(mitosisJsx);
+    expect(backToMitosisCmp.children[0].name).toBe('Text123');
+    expect(backToMitosisCmp.children[0].properties['data-builder-originalName']).toBe('Text:123');
+
+    // Convert back Mitosis JSON to Builder JSON
+    const backToBuilder = componentToBuilder()({ component: backToMitosisCmp });
+    expect(backToBuilder?.data?.blocks?.[0]?.component?.name).toBe('Text:123');
+    expect(backToBuilder?.data?.blocks?.[0]?.component?.options).not.toHaveProperty(
+      'data-builder-originalName',
+    );
+  });
 });

packages/core/src/parsers/builder/builder.ts

@@ -1,3 +1,4 @@
+import { builderBlockPrefixes } from '@/generators/builder/generator';
 import { hashCodeAsString } from '@/symbols/symbol-processor';
 import { MitosisComponent, MitosisState } from '@/types/mitosis-component';
 import * as babel from '@babel/core';
@@ -934,6 +935,13 @@ export const builderElementToMitosisNode = (
   if (block.groupLocked !== undefined) {
     dataAttributes['data-builder-groupLocked'] = String(block.groupLocked);
   }
+  if (
+    block.component?.name &&
+    /:/.test(block.component?.name) &&
+    !builderBlockPrefixes.includes(block.component?.name.split(':')[0])
+  ) {
+    dataAttributes['data-builder-originalName'] = block.component?.name;
+  }
 
   const node = createMitosisNode({
     name:
@@ -961,7 +969,9 @@ export const builderElementToMitosisNode = (
       ...slots,
     },
     ...(Object.keys(blocksSlots).length > 0 && { blocksSlots }),
-    meta: getMetaFromBlock(block, options),
+    meta: {
+      ...getMetaFromBlock(block, options),
+    },
     ...(Object.keys(localizedValues).length && { localizedValues }),
   });