From 20efa1587ec8053b4a32c7f9d5337a6e1cd9529c Mon Sep 17 00:00:00 2001
From: Korey Kassir <korey@builder.io>
Date: Wed, 6 Mar 2024 15:26:13 -0800
Subject: [PATCH] feat(react): update logic for prop slots (#1377)

* feat(react): update logic for prop slots

* fix builds

* Create quick-pans-rush.md

---------

Co-authored-by: Sami Jaber <jabersami@gmail.com>
---
 .changeset/quick-pans-rush.md                 |   5 +
 .../__snapshots__/builder.test.ts.snap        | 203 +++++++++++++++++-
 packages/core/src/__tests__/builder.test.ts   |  14 ++
 .../custom-component-slot-property.json       | 105 +++++++++
 packages/core/src/generators/react/blocks.ts  |  13 ++
 packages/core/src/parsers/builder/builder.ts  |  21 +-
 packages/core/src/types/mitosis-node.ts       |   5 +
 7 files changed, 345 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/quick-pans-rush.md
 create mode 100644 packages/core/src/__tests__/data/builder/custom-component-slot-property.json

diff --git a/.changeset/quick-pans-rush.md b/.changeset/quick-pans-rush.md
new file mode 100644
index 0000000000..74a4f94b4a
--- /dev/null
+++ b/.changeset/quick-pans-rush.md
@@ -0,0 +1,5 @@
+---
+"@builder.io/mitosis": patch
+---
+
+feat: add slots property for nodes. add support for it in react generator. 
diff --git a/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap b/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap
index d7bec0fb48..d4a692afa8 100644
--- a/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap
@@ -1033,6 +1033,7 @@ exports[`Builder > Regenerate custom Hero 3`] = `
         "title": "Your Title Here",
       },
       "scope": {},
+      "slots": {},
     },
   ],
   "context": {
@@ -1642,6 +1643,170 @@ export default function MyComponent(props) {
 "
 `;
 
+exports[`Builder > customComponentSlotProperty 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {
+        "css": {
+          "code": "{\\"position\\":\\"relative\\",\\"width\\":\\"100%\\",\\"@media (max-width: 991px)\\":{\\"maxWidth\\":\\"100%\\"}}",
+          "type": "single",
+        },
+      },
+      "children": [],
+      "meta": {},
+      "name": "Navigation",
+      "properties": {
+        "$tagName": undefined,
+      },
+      "scope": {},
+      "slots": {
+        "logo": [
+          {
+            "@type": "@builder.io/mitosis/node",
+            "bindings": {
+              "css": {
+                "code": "{\\"alignItems\\":\\"flex-start\\",\\"alignSelf\\":\\"stretch\\",\\"display\\":\\"flex\\",\\"flexBasis\\":\\"0%\\",\\"flexDirection\\":\\"column\\",\\"justifyContent\\":\\"center\\"}",
+                "type": "single",
+              },
+            },
+            "children": [],
+            "meta": {},
+            "name": "Logo",
+            "properties": {},
+            "scope": {},
+            "slots": {},
+          },
+        ],
+        "logoMultiple": [
+          {
+            "@type": "@builder.io/mitosis/node",
+            "bindings": {
+              "css": {
+                "code": "{\\"alignItems\\":\\"flex-start\\",\\"alignSelf\\":\\"stretch\\",\\"display\\":\\"flex\\",\\"flexBasis\\":\\"0%\\",\\"flexDirection\\":\\"column\\",\\"justifyContent\\":\\"center\\"}",
+                "type": "single",
+              },
+            },
+            "children": [],
+            "meta": {},
+            "name": "Logo",
+            "properties": {},
+            "scope": {},
+            "slots": {},
+          },
+          {
+            "@type": "@builder.io/mitosis/node",
+            "bindings": {
+              "css": {
+                "code": "{\\"alignItems\\":\\"flex-start\\",\\"alignSelf\\":\\"stretch\\",\\"display\\":\\"flex\\",\\"flexBasis\\":\\"0%\\",\\"flexDirection\\":\\"column\\",\\"justifyContent\\":\\"center\\"}",
+                "type": "single",
+              },
+            },
+            "children": [],
+            "meta": {},
+            "name": "LogoTwo",
+            "properties": {},
+            "scope": {},
+            "slots": {},
+          },
+        ],
+        "logoSingle": [
+          {
+            "@type": "@builder.io/mitosis/node",
+            "bindings": {
+              "css": {
+                "code": "{\\"alignItems\\":\\"flex-start\\",\\"alignSelf\\":\\"stretch\\",\\"display\\":\\"flex\\",\\"flexBasis\\":\\"0%\\",\\"flexDirection\\":\\"column\\",\\"justifyContent\\":\\"center\\"}",
+                "type": "single",
+              },
+            },
+            "children": [],
+            "meta": {},
+            "name": "Logo",
+            "properties": {},
+            "scope": {},
+            "slots": {},
+          },
+        ],
+      },
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": undefined,
+  "meta": {
+    "useMetadata": {
+      "httpRequests": undefined,
+    },
+  },
+  "name": "MyComponent",
+  "refs": {},
+  "state": {},
+  "subComponents": [],
+}
+`;
+
+exports[`Builder > customComponentSlotProperty 2`] = `
+"import * as React from \\"react\\";
+
+function MyComponent(props) {
+  return (
+    <>
+      <Navigation
+        className=\\"navigation\\"
+        logo={<Logo className=\\"logo\\" />}
+        logoSingle={<Logo className=\\"logo\\" />}
+        logoMultiple={
+          <>
+            <Logo className=\\"logo\\" />
+            <LogoTwo className=\\"logo-two\\" />
+          </>
+        }
+      />
+      <style jsx>{\`
+        .navigation {
+          position: relative;
+          width: 100%;
+        }
+        @media (max-width: 991px) {
+          .navigation {
+            max-width: 100%;
+          }
+        }
+        .logo {
+          align-items: flex-start;
+          align-self: stretch;
+          display: flex;
+          flex-basis: 0%;
+          flex-direction: column;
+          justify-content: center;
+        }
+        .logo-two {
+          align-items: flex-start;
+          align-self: stretch;
+          display: flex;
+          flex-basis: 0%;
+          flex-direction: column;
+          justify-content: center;
+        }
+      \`}</style>
+    </>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`Builder > extractStateHook 1`] = `
 {
   "code": "alert('hi');",
@@ -1662,10 +1827,6 @@ exports[`Builder > slots 1`] = `
     {
       "@type": "@builder.io/mitosis/node",
       "bindings": {
-        "avatar": {
-          "code": "<Avatar  />",
-          "type": "single",
-        },
         "css": {
           "code": "{\\"width\\":\\"100%\\",\\"@media (max-width: 991px)\\":{\\"maxWidth\\":\\"100%\\"}}",
           "type": "single",
@@ -1680,6 +1841,20 @@ exports[`Builder > slots 1`] = `
         "title": "The Burgler",
       },
       "scope": {},
+      "slots": {
+        "avatar": [
+          {
+            "@type": "@builder.io/mitosis/node",
+            "bindings": {},
+            "children": [],
+            "meta": {},
+            "name": "Avatar",
+            "properties": {},
+            "scope": {},
+            "slots": {},
+          },
+        ],
+      },
     },
   ],
   "context": {
@@ -1741,10 +1916,6 @@ exports[`Builder > slots2 1`] = `
     {
       "@type": "@builder.io/mitosis/node",
       "bindings": {
-        "control": {
-          "code": "<Radio  />",
-          "type": "single",
-        },
         "css": {
           "code": "{\\"fontStyle\\":\\"italic\\"}",
           "type": "single",
@@ -1763,6 +1934,20 @@ exports[`Builder > slots2 1`] = `
         "labelPlacement": "end",
       },
       "scope": {},
+      "slots": {
+        "control": [
+          {
+            "@type": "@builder.io/mitosis/node",
+            "bindings": {},
+            "children": [],
+            "meta": {},
+            "name": "Radio",
+            "properties": {},
+            "scope": {},
+            "slots": {},
+          },
+        ],
+      },
     },
   ],
   "context": {
@@ -1798,8 +1983,8 @@ function MyComponent(props) {
         label=\\"Label\\"
         labelPlacement=\\"end\\"
         className=\\"form-control-label\\"
-        control={<Radio />}
         disabled={false}
+        control={<Radio />}
       />
       <style jsx>{\`
         .form-control-label {
diff --git a/packages/core/src/__tests__/builder.test.ts b/packages/core/src/__tests__/builder.test.ts
index 4dccb4d11f..1f4792cce3 100644
--- a/packages/core/src/__tests__/builder.test.ts
+++ b/packages/core/src/__tests__/builder.test.ts
@@ -13,6 +13,7 @@ import customCode from './data/blocks/custom-code.raw.tsx?raw';
 import embed from './data/blocks/embed.raw.tsx?raw';
 import image from './data/blocks/image.raw.tsx?raw';
 import stamped from './data/blocks/stamped-io.raw.tsx?raw';
+import customComponentSlotPropertyContent from './data/builder/custom-component-slot-property.json?raw';
 import lazyLoadSection from './data/builder/lazy-load-section.json?raw';
 import slotsContent from './data/builder/slots.json?raw';
 import slots2Content from './data/builder/slots2.json?raw';
@@ -374,4 +375,17 @@ describe('Builder', () => {
     expect(component).toMatchSnapshot();
     expect(out).toMatchSnapshot();
   });
+
+  test('customComponentSlotProperty', async () => {
+    const component = builderContentToMitosisComponent(
+      JSON.parse(customComponentSlotPropertyContent),
+    );
+
+    const out = await componentToReact({
+      plugins: [compileAwayBuilderComponents()],
+    })({ component });
+
+    expect(component).toMatchSnapshot();
+    expect(out).toMatchSnapshot();
+  });
 });
diff --git a/packages/core/src/__tests__/data/builder/custom-component-slot-property.json b/packages/core/src/__tests__/data/builder/custom-component-slot-property.json
new file mode 100644
index 0000000000..4615549517
--- /dev/null
+++ b/packages/core/src/__tests__/data/builder/custom-component-slot-property.json
@@ -0,0 +1,105 @@
+{
+  "data": {
+    "blocks": [
+      {
+        "@type": "@builder.io/sdk:Element",
+        "@version": 2,
+        "id": "builder-d132f30a08a1-43a7-9f53-ffe14416d372",
+        "component": {
+          "name": "Navigation",
+          "options": {
+            "logo": [
+              {
+                "@type": "@builder.io/sdk:Element",
+                "@version": 2,
+                "id": "builder-12c13962d5b2-4496-b7e3-7f90a7a0ac15",
+                "component": {
+                  "name": "Logo",
+                  "options": {}
+                },
+                "responsiveStyles": {
+                  "large": {
+                    "alignItems": "flex-start",
+                    "alignSelf": "stretch",
+                    "display": "flex",
+                    "flexBasis": "0%",
+                    "flexDirection": "column",
+                    "justifyContent": "center"
+                  }
+                }
+              }
+            ],
+            "logoSingle": {
+              "@type": "@builder.io/sdk:Element",
+              "@version": 2,
+              "id": "builder-12c13962d5b2-4496-b7e3-7f90a7a0ac45",
+              "component": {
+                "name": "Logo",
+                "options": {}
+              },
+              "responsiveStyles": {
+                "large": {
+                  "alignItems": "flex-start",
+                  "alignSelf": "stretch",
+                  "display": "flex",
+                  "flexBasis": "0%",
+                  "flexDirection": "column",
+                  "justifyContent": "center"
+                }
+              }
+            },
+            "logoMultiple": [
+              {
+                "@type": "@builder.io/sdk:Element",
+                "@version": 2,
+                "id": "builder-12c13962d5b2-4496-b7e3-7f90a7a0ac45",
+                "component": {
+                  "name": "Logo",
+                  "options": {}
+                },
+                "responsiveStyles": {
+                  "large": {
+                    "alignItems": "flex-start",
+                    "alignSelf": "stretch",
+                    "display": "flex",
+                    "flexBasis": "0%",
+                    "flexDirection": "column",
+                    "justifyContent": "center"
+                  }
+                }
+              },
+              {
+                "@type": "@builder.io/sdk:Element",
+                "@version": 2,
+                "id": "builder-12c13962d5b2-4496-b7e3-7f90a7a0ac45",
+                "component": {
+                  "name": "LogoTwo",
+                  "options": {}
+                },
+                "responsiveStyles": {
+                  "large": {
+                    "alignItems": "flex-start",
+                    "alignSelf": "stretch",
+                    "display": "flex",
+                    "flexBasis": "0%",
+                    "flexDirection": "column",
+                    "justifyContent": "center"
+                  }
+                }
+              }
+            ]
+          }
+        },
+        "responsiveStyles": {
+          "large": {
+            "position": "relative",
+            "width": "100%"
+          },
+          "medium": {
+            "maxWidth": "100%"
+          }
+        }
+      }
+    ]
+  }
+}
diff --git a/packages/core/src/generators/react/blocks.ts b/packages/core/src/generators/react/blocks.ts
index 76e070787b..eee3f87fbc 100644
--- a/packages/core/src/generators/react/blocks.ts
+++ b/packages/core/src/generators/react/blocks.ts
@@ -244,6 +244,19 @@ export const blockToReact = (
     }
   }
 
+  if (json.slots) {
+    for (const key in json.slots) {
+      const value = json.slots[key];
+      if (!value?.length) {
+        continue;
+      }
+      const reactComponents = value.map((node) => blockToReact(node, options, component));
+      const slotStringValue =
+        reactComponents.length === 1 ? reactComponents[0] : `<>${reactComponents.join('\n')}</>`;
+      str += ` ${key}={${slotStringValue}} `;
+    }
+  }
+
   if (SELF_CLOSING_HTML_TAGS.has(json.name)) {
     return str + ' />';
   }
diff --git a/packages/core/src/parsers/builder/builder.ts b/packages/core/src/parsers/builder/builder.ts
index adff783d9e..9a4dd53a78 100644
--- a/packages/core/src/parsers/builder/builder.ts
+++ b/packages/core/src/parsers/builder/builder.ts
@@ -1,4 +1,3 @@
-import { blockToMitosis } from '@/generators/mitosis';
 import { hashCodeAsString } from '@/symbols/symbol-processor';
 import { MitosisComponent, MitosisState } from '@/types/mitosis-component';
 import * as babel from '@babel/core';
@@ -583,6 +582,7 @@ export const builderElementToMitosisNode = (
 
   const bindings: MitosisNode['bindings'] = {};
   const children: MitosisNode[] = [];
+  const slots: MitosisNode['slots'] = {};
 
   if (blockBindings) {
     for (const key in blockBindings) {
@@ -625,20 +625,17 @@ export const builderElementToMitosisNode = (
       const value = block.component.options[key];
       const valueIsArrayOfBuilderElements = Array.isArray(value) && value.every(isBuilderElement);
 
-      const transformBldrElementToBinding = (item: BuilderElement) => {
+      const transformBldrElementToMitosisNode = (item: BuilderElement) => {
         const node = builderElementToMitosisNode(item, {
           ...options,
           includeSpecialBindings: false,
         });
 
-        // For now, stringify to Mitosis nodes even though that only really works in React, due to syntax overlap.
-        // the correct long term solution is to hold on to the Mitosis Node, and have a plugin for each framework
-        // which processes any Mitosis nodes set into the attribute and moves them as slots when relevant (Svelte/Vue)
-        return blockToMitosis(node, {}, null as any);
+        return node;
       };
 
       if (isBuilderElement(value)) {
-        bindings[key] = createSingleBinding({ code: transformBldrElementToBinding(value) });
+        slots[key] = [transformBldrElementToMitosisNode(value)];
       } else if (typeof value === 'string') {
         properties[key] = value;
       } else if (valueIsArrayOfBuilderElements) {
@@ -649,12 +646,9 @@ export const builderElementToMitosisNode = (
             }
             return true;
           })
-          .map(transformBldrElementToBinding);
+          .map(transformBldrElementToMitosisNode);
 
-        const strVal =
-          childrenElements.length === 1 ? childrenElements[0] : `<>${childrenElements.join('')}</>`;
-
-        bindings[key] = createSingleBinding({ code: strVal });
+        slots[key] = childrenElements;
       } else {
         bindings[key] = createSingleBinding({ code: json5.stringify(value) });
       }
@@ -697,6 +691,9 @@ export const builderElementToMitosisNode = (
           css: createSingleBinding({ code: JSON.stringify(css) }),
         }),
     },
+    slots: {
+      ...slots,
+    },
   });
 
   // Has single text node child
diff --git a/packages/core/src/types/mitosis-node.ts b/packages/core/src/types/mitosis-node.ts
index 6ba5b12a06..14e815a64a 100644
--- a/packages/core/src/types/mitosis-node.ts
+++ b/packages/core/src/types/mitosis-node.ts
@@ -47,6 +47,11 @@ export type BaseNode = {
     [key: string]: Binding | undefined;
   };
   children: MitosisNode[];
+  /**
+   * Key-value store of slots. The key is the slot name and the value is an array of nodes.
+   * It is used when components have props that are also nodes
+   */
+  slots?: { [key: string]: MitosisNode[] };
 };
 
 export type SpecialNodesNames = 'For' | 'Fragment' | 'Show' | 'Slot';