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 <[email protected]>
BuilderIO · Mar 6, 2024 · 20efa15 · 20efa15
1 parent de4b4ad
commit 20efa15
Show file tree

Hide file tree

Showing 7 changed files with 345 additions and 21 deletions.
diff --git a/.changeset/quick-pans-rush.md 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
@@ -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
@@ -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
@@ -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%"
+          }
+        }
+      }
+    ]
+  }
+}