add slots support for builder and mitosis jsx

.changeset/poor-fans-help.md

@@ -0,0 +1,5 @@
+---
+"@builder.io/mitosis": patch
+---
+
+[Builder,Mitosis] Feature: add Slots support.

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

@@ -1951,7 +1951,7 @@ exports[`Builder > Text with bindings 3`] = `
 }
 `;
 
-exports[`Builder > binding 1`] = `
+exports[`Builder > bindings 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
   "children": [
@@ -2036,7 +2036,7 @@ exports[`Builder > binding 1`] = `
 }
 `;
 
-exports[`Builder > binding 2`] = `
+exports[`Builder > bindings 2`] = `
 "import { Button } from \\"@components\\";
 
 export default function MyComponent(props) {
@@ -2314,6 +2314,176 @@ alert('hi');",
 }
 `;
 
+exports[`Builder > nodes as props 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [],
+      "meta": {},
+      "name": "Foo",
+      "properties": {
+        "$tagName": undefined,
+      },
+      "scope": {},
+      "slots": {
+        "prop": [
+          {
+            "@type": "@builder.io/mitosis/node",
+            "bindings": {},
+            "children": [],
+            "meta": {},
+            "name": "Bar",
+            "properties": {
+              "hello": "world",
+            },
+            "scope": {},
+            "slots": {},
+          },
+        ],
+      },
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": undefined,
+  "meta": {
+    "useMetadata": {
+      "httpRequests": undefined,
+    },
+  },
+  "name": "MyComponent",
+  "refs": {},
+  "state": {},
+  "subComponents": [],
+}
+`;
+
+exports[`Builder > nodes as props 2`] = `
+"import { Foo, Bar } from \\"@components\\";
+
+export default function MyComponent(props) {
+  return <Foo prop={<Bar hello=\\"world\\" />} />;
+}
+"
+`;
+
+exports[`Builder > nodes as props 3`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {
+        "prop": {
+          "code": "<Bar hello=\\"world\\" />",
+          "type": "single",
+        },
+      },
+      "children": [],
+      "meta": {},
+      "name": "Foo",
+      "properties": {},
+      "scope": {},
+      "slots": {
+        "prop": [
+          {
+            "@type": "@builder.io/mitosis/node",
+            "bindings": {},
+            "children": [],
+            "meta": {},
+            "name": "Bar",
+            "properties": {
+              "hello": "world",
+            },
+            "scope": {},
+          },
+        ],
+      },
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [
+    {
+      "importKind": "value",
+      "imports": {
+        "Bar": "Bar",
+        "Foo": "Foo",
+      },
+      "path": "@components",
+    },
+  ],
+  "inputs": [],
+  "meta": {},
+  "name": "MyComponent",
+  "refs": {},
+  "state": {},
+  "subComponents": [],
+}
+`;
+
+exports[`Builder > nodes as props 4`] = `
+{
+  "data": {
+    "blocks": [
+      {
+        "@type": "@builder.io/sdk:Element",
+        "actions": {},
+        "bindings": {},
+        "children": [],
+        "code": {
+          "actions": {},
+          "bindings": {},
+        },
+        "component": {
+          "name": "Foo",
+          "options": {
+            "prop": [
+              {
+                "@type": "@builder.io/sdk:Element",
+                "actions": {},
+                "bindings": {},
+                "children": [],
+                "code": {
+                  "actions": {},
+                  "bindings": {},
+                },
+                "component": {
+                  "name": "Bar",
+                  "options": {
+                    "hello": "world",
+                  },
+                },
+              },
+            ],
+          },
+        },
+      },
+    ],
+    "jsCode": "",
+    "tsCode": "",
+  },
+}
+`;
+
 exports[`Builder > preserve cssCode when converting 1`] = `
 ".foo {
   background: green;

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

@@ -418,7 +418,7 @@ describe('Builder', () => {
     expect(out).toMatchSnapshot();
   });
 
-  test('binding', () => {
+  test('bindings', () => {
     const component = builderContentToMitosisComponent(bindingJson as any as BuilderContent);
     expect(component).toMatchSnapshot();
     const mitosis = componentToMitosis(mitosisOptions)({
@@ -546,6 +546,51 @@ describe('Builder', () => {
     });
     expect(mitosis.trim()).toEqual(code.trim());
   });
+
+  test('nodes as props', () => {
+    const content = {
+      data: {
+        blocks: [
+          {
+            '@type': '@builder.io/sdk:Element' as const,
+            component: {
+              name: 'Foo',
+              options: {
+                prop: [
+                  {
+                    '@type': '@builder.io/sdk:Element' as const,
+                    component: {
+                      name: 'Bar',
+                      options: {
+                        hello: 'world',
+                      },
+                    },
+                  },
+                ],
+              },
+            },
+          },
+        ],
+      },
+    };
+
+    const mitosisJson = builderContentToMitosisComponent(content);
+    expect(mitosisJson).toMatchSnapshot();
+    const mitosis = componentToMitosis(mitosisOptions)({
+      component: mitosisJson,
+    });
+
+    expect(mitosis).toMatchSnapshot();
+
+    const builder = parseJsx(mitosis);
+    expect(builder).toMatchSnapshot();
+    const json = componentToBuilder()({ component: builder });
+    expect(json).toMatchSnapshot();
+    expect(json.data?.blocks?.[0]?.component?.name).toBe('Foo');
+    expect(json.data?.blocks?.[0]?.component?.options?.prop?.[0]?.component?.options.hello).toBe(
+      'world',
+    );
+  });
 });
 
 const bindingJson = {

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

@@ -103,7 +103,6 @@ const componentMappers: {
       'Personalization',
     ];
     block.children!.forEach((item) => {
-      console.log('item', item);
       if (item.component && validFakeNodeNames.includes(item.component?.name)) {
         let query: any;
         if (item.component.options.query) {
@@ -297,11 +296,17 @@ export const blockToBuilder = (
       if (!(parsed instanceof Error)) {
         componentOptions[key] = parsed;
       } else {
-        builderBindings[`component.options.${key}`] = bindings[key]!.code;
+        if (!json.slots?.[key]) {
+          builderBindings[`component.options.${key}`] = bindings[key]!.code;
+        }
       }
     }
   }
 
+  for (const key in json.slots) {
+    componentOptions[key] = json.slots[key].map((node) => blockToBuilder(node, options));
+  }
+
   const hasCss = !!bindings.css?.code;
 
   let responsiveStyles: {
@@ -338,7 +343,9 @@ export const blockToBuilder = (
 
   if (thisIsComponent) {
     for (const key in json.bindings) {
-      builderBindings[`component.options.${key}`] = json.bindings[key]!.code;
+      if (!json.slots?.[key]) {
+        builderBindings[`component.options.${key}`] = json.bindings[key]!.code;
+      }
     }
   }
 

packages/core/src/generators/context/angular.ts

@@ -35,7 +35,9 @@ export default class ${context.name}Context {
           ],
         });
       } catch (err) {
-        console.error('Format error for file:', str);
+        if (process.env.NODE_ENV !== 'test') {
+          console.error('Format error for file:', str);
+        }
         throw err;
       }
     }

packages/core/src/generators/context/helpers/context-with-symbol-key.ts

@@ -24,7 +24,9 @@ export const getContextWithSymbolKey =
           ],
         });
       } catch (err) {
-        console.error('Format error for file:', str);
+        if (process.env.NODE_ENV !== 'test') {
+          console.error('Format error for file:', str);
+        }
         throw err;
       }
     }

packages/core/src/generators/context/qwik.ts

@@ -23,7 +23,9 @@ export const contextToQwik =
           ],
         });
       } catch (err) {
-        console.error('Format error for file:', str);
+        if (process.env.NODE_ENV !== 'test') {
+          console.error('Format error for file:', str);
+        }
         throw err;
       }
     }

packages/core/src/generators/context/react.ts

@@ -28,7 +28,9 @@ export const contextToReact =
           ],
         });
       } catch (err) {
-        console.error('Format error for file:', str);
+        if (process.env.NODE_ENV !== 'test') {
+          console.error('Format error for file:', str);
+        }
         throw err;
       }
     }

packages/core/src/generators/context/rsc.ts

@@ -26,7 +26,9 @@ export const contextToRsc =
           ],
         });
       } catch (err) {
-        console.error('Format error for file:', str);
+        if (process.env.NODE_ENV !== 'test') {
+          console.error('Format error for file:', str);
+        }
         throw err;
       }
     }

packages/core/src/generators/context/solid.ts

@@ -24,7 +24,9 @@ export const contextToSolid =
           ],
         });
       } catch (err) {
-        console.error('Format error for file:', str);
+        if (process.env.NODE_ENV !== 'test') {
+          console.error('Format error for file:', str);
+        }
         throw err;
       }
     }

packages/core/src/generators/context/svelte.ts

@@ -38,7 +38,9 @@ export default {
           ],
         });
       } catch (err) {
-        console.error('Format error for file:', str);
+        if (process.env.NODE_ENV !== 'test') {
+          console.error('Format error for file:', str);
+        }
         throw err;
       }
     }