handle converting symbol components back to Symbol for Builder

Author: NKoech123

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

@@ -2175,4 +2175,67 @@ describe('Symbol Serialization', () => {
     expect(roundtripSymbol?.component?.name).toBeDefined();
     expect(roundtripSymbol?.component?.options?.symbol).toBeDefined();
   });
+
+  test('Symbol roundtrip: Named symbol converts back to "Symbol" component name', () => {
+    const original = JSON.parse(symbolWithInputs) as BuilderContent;
+
+    // Step 1: Builder -> Mitosis (named component)
+    const mitosisComponent = builderContentToMitosisComponent(original);
+    expect(mitosisComponent.children[0].name).toBe('SymbolButtonComponent');
+
+    // Step 2: Mitosis -> Builder (should be "Symbol" not "SymbolButtonComponent")
+    const backToBuilder = componentToBuilder()({ component: mitosisComponent });
+    const roundtripSymbol = backToBuilder.data?.blocks?.[0];
+
+    // CRITICAL: Builder Editor requires component.name === "Symbol"
+    expect(roundtripSymbol?.component?.name).toBe('Symbol');
+
+    // Verify symbol metadata is preserved
+    expect(roundtripSymbol?.component?.options?.symbol).toBeDefined();
+    expect(roundtripSymbol?.component?.options?.symbol?.entry).toBeDefined();
+
+    // Verify the display name is preserved for next roundtrip
+    expect(roundtripSymbol?.component?.options?.symbol?.name).toBe('Button Component');
+
+    // Verify inputs are merged back into symbol.data
+    expect(roundtripSymbol?.component?.options?.symbol?.data).toBeDefined();
+    expect(roundtripSymbol?.component?.options?.symbol?.data?.buttonText).toBe('Click me!');
+  });
+
+  test('Symbol roundtrip preserves symbol.name for re-conversion to JSX', () => {
+    // Simulate what MCP returns: symbol with name field
+    const builderWithSymbolName: BuilderContent = {
+      data: {
+        blocks: [
+          {
+            '@type': '@builder.io/sdk:Element',
+            '@version': 2,
+            id: 'builder-roundtrip-test',
+            component: {
+              name: 'Symbol',
+              options: {
+                symbol: {
+                  entry: 'test-entry-123',
+                  model: 'symbol',
+                  name: 'Copyright Reserved', // This should be used for component naming
+                  data: {},
+                },
+              },
+            },
+          },
+        ],
+      },
+    };
+
+    // Builder -> Mitosis: should use symbol.name for component name
+    const mitosisComponent = builderContentToMitosisComponent(builderWithSymbolName);
+    expect(mitosisComponent.children[0].name).toBe('SymbolCopyrightReserved');
+
+    // Mitosis -> Builder: should preserve name and use "Symbol" as component name
+    const backToBuilder = componentToBuilder()({ component: mitosisComponent });
+    const symbol = backToBuilder.data?.blocks?.[0];
+
+    expect(symbol?.component?.name).toBe('Symbol');
+    expect(symbol?.component?.options?.symbol?.name).toBe('Copyright Reserved');
+  });
 });

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

@@ -656,6 +656,52 @@ export const blockToBuilder = (
     const element = mapper(json, options);
     return processLocalizedValues(element, json);
   }
+
+  // Handle Symbol* components (e.g., SymbolCopyrightReserved) - convert back to "Symbol" for Builder
+  // These are generated by the parser for LLM readability but Builder needs component.name = "Symbol"
+  if (json.name.startsWith('Symbol') && json.name !== 'Symbol' && json.bindings.symbol?.code) {
+    const symbolOptions = attempt(() => json5.parse(json.bindings.symbol!.code));
+
+    if (!(symbolOptions instanceof Error)) {
+      if (!symbolOptions.name) {
+        const displayName = json.name
+          .replace(/^Symbol/, '')
+          .replace(/([A-Z])/g, ' $1')
+          .trim();
+        if (displayName) {
+          symbolOptions.name = displayName;
+        }
+      }
+
+      // Merge any top-level input props back into symbol.data
+      const inputData: Record<string, any> = {};
+      for (const key of Object.keys(json.bindings)) {
+        if (key !== 'symbol' && key !== 'css' && key !== 'style') {
+          const value = attempt(() => json5.parse(json.bindings[key]!.code));
+          if (!(value instanceof Error)) {
+            inputData[key] = value;
+          }
+        }
+      }
+      if (Object.keys(inputData).length > 0) {
+        symbolOptions.data = { ...symbolOptions.data, ...inputData };
+      }
+
+      const element = el(
+        {
+          component: {
+            name: 'Symbol', // Always use "Symbol" for Builder compatibility
+            options: {
+              symbol: symbolOptions,
+            },
+          },
+        },
+        options,
+      );
+      return processLocalizedValues(element, json);
+    }
+  }
+
   if (json.properties._text || json.bindings._text?.code) {
     const element = el(
       {