@builder.io/sdk-solid 0.4.5 → 0.5.1

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+### 0.5.1
+
+- Fix: make `RenderBlocks` properties `context` and `registeredComponents` optional for external use.
+
+### 0.5.0
+
+- Feature: Added support for rudimentary data-bindings in Non-Node.js (edge, serverless, etc.) server runtimes.
+
 ### 0.4.5
 
 - Fix: show dynamic symbols correctly in Preview mode.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.4.5",
+  "version": "0.5.1",
   "description": "",
   "type": "module",
   "main": "./solid-index.jsx",

package/src/blocks/BaseText.jsx

@@ -1,6 +1,6 @@
 import { useContext } from "solid-js";
 
-import BuilderContext from "../context/builder.context.js";
+import BuilderContext from "../context/builder.context";
 
 function BaseText(props) {
   const builderContext = useContext(BuilderContext);

package/src/blocks/button/button.jsx

@@ -2,22 +2,23 @@ import { Show } from "solid-js";
 
 import { css } from "solid-styled-components";
 
+import { filterAttrs } from "../helpers.js";
+
 function Button(props) {
   return (
     <Show
       fallback={
         <button
           class={
-            /**
-             * We have to explicitly provide `class` so that Mitosis knows to merge it with `css`.
-             */
             props.attributes.class +
             " " +
             css({
               all: "unset",
             })
           }
+          {...{}}
           {...props.attributes}
+          style={props.attributes.style}
         >
           {props.text}
         </button>
@@ -26,6 +27,7 @@ function Button(props) {
     >
       <a
         role="button"
+        {...{}}
         {...props.attributes}
         href={props.link}
         target={props.openLinkInNewTab ? "_blank" : undefined}

package/src/blocks/button/component-info.js

@@ -13,28 +13,22 @@ const componentInfo = {
     textAlign: "center",
     cursor: "pointer"
   },
-  inputs: [
-    {
-      name: "text",
-      type: "text",
-      defaultValue: "Click me!",
-      bubble: true
-    },
-    {
-      name: "link",
-      type: "url",
-      bubble: true
-    },
-    {
-      name: "openLinkInNewTab",
-      type: "boolean",
-      defaultValue: false,
-      friendlyName: "Open link in new tab"
-    }
-  ],
+  inputs: [{
+    name: "text",
+    type: "text",
+    defaultValue: "Click me!",
+    bubble: true
+  }, {
+    name: "link",
+    type: "url",
+    bubble: true
+  }, {
+    name: "openLinkInNewTab",
+    type: "boolean",
+    defaultValue: false,
+    friendlyName: "Open link in new tab"
+  }],
   static: true,
   noWrap: true
 };
-export {
-  componentInfo
-};
+export { componentInfo }

package/src/blocks/columns/columns.jsx

@@ -1,12 +1,11 @@
-import { useContext, Show, For, createSignal } from "solid-js";
+import { Show, For, createSignal } from "solid-js";
 
 import { css } from "solid-styled-components";
 
-import RenderBlocks from "../../components/render-blocks.jsx";
-import { getSizesForBreakpoints } from "../../constants/device-sizes";
+import Blocks from "../../components/blocks/blocks.jsx";
+import { getSizesForBreakpoints } from "../../constants/device-sizes.js";
 import InlinedStyles from "../../components/inlined-styles.jsx";
 import { TARGET } from "../../constants/target.js";
-import BuilderContext from "../../context/builder.context.js";
 
 function Columns(props) {
   const [gutterSize, setGutterSize] = createSignal(
@@ -43,11 +42,6 @@ function Columns(props) {
   }
 
   function columnsCssVars() {
-    if (TARGET === "reactNative") {
-      return {
-        flexDirection: flexDir(),
-      };
-    }
     return {
       "--flex-dir": flexDir(),
       "--flex-dir-tablet": getTabletStyle({
@@ -68,9 +62,10 @@ function Columns(props) {
     const gutterPixels = `${gutter}px`;
     const mobileWidth = "100%";
     const mobileMarginLeft = 0;
+    const marginLeftKey = "margin-left";
     return {
       width,
-      "margin-left": gutterPixels,
+      [marginLeftKey]: gutterPixels,
       "--column-width-mobile": getMobileStyle({
         stackedStyle: mobileWidth,
         desktopStyle: width,
@@ -92,7 +87,7 @@ function Columns(props) {
 
   function getWidthForBreakpointSize(size) {
     const breakpointSizes = getSizesForBreakpoints(
-      builderContext.content?.meta?.breakpoints || {}
+      props.builderContext.content?.meta?.breakpoints || {}
     );
     return breakpointSizes[size].max;
   }
@@ -125,8 +120,6 @@ function Columns(props) {
       `;
   }
 
-  const builderContext = useContext(BuilderContext);
-
   return (
     <div
       class={
@@ -138,9 +131,7 @@ function Columns(props) {
         })
       }
       style={columnsCssVars()}
-      dataSet={{
-        "builder-block-name": "builder-columns",
-      }}
+      {...{}}
     >
       <Show when={TARGET !== "reactNative"}>
         <InlinedStyles styles={columnsStyles()}></InlinedStyles>
@@ -159,19 +150,19 @@ function Columns(props) {
                 })
               }
               style={columnCssVars(index)}
-              dataSet={{
-                "builder-block-name": "builder-column",
-              }}
+              {...{}}
               key={index}
             >
-              <RenderBlocks
+              <Blocks
                 blocks={column.blocks}
                 path={`component.options.columns.${index}.blocks`}
                 parent={props.builderBlock.id}
                 styleProp={{
                   flexGrow: "1",
                 }}
-              ></RenderBlocks>
+                context={props.builderContext}
+                registeredComponents={props.builderComponents}
+              ></Blocks>
             </div>
           );
         }}

package/src/blocks/columns/component-info.js

@@ -1,241 +1,218 @@
-import { serializeFn } from "../util.js";
 const componentInfo = {
   name: "Columns",
-  inputs: [
-    {
-      name: "columns",
+  isRSC: true,
+  inputs: [{
+    name: "columns",
+    type: "array",
+    broadcast: true,
+    subFields: [{
+      name: "blocks",
       type: "array",
-      broadcast: true,
-      subFields: [
-        {
-          name: "blocks",
-          type: "array",
-          hideFromUI: true,
-          defaultValue: [
-            {
-              "@type": "@builder.io/sdk:Element",
-              responsiveStyles: {
-                large: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                  flexShrink: "0",
-                  position: "relative",
-                  marginTop: "30px",
-                  textAlign: "center",
-                  lineHeight: "normal",
-                  height: "auto",
-                  minHeight: "20px",
-                  minWidth: "20px",
-                  overflow: "hidden"
-                }
-              },
-              component: {
-                name: "Image",
-                options: {
-                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-                  backgroundPosition: "center",
-                  backgroundSize: "cover",
-                  aspectRatio: 0.7004048582995948
-                }
-              }
-            },
-            {
-              "@type": "@builder.io/sdk:Element",
-              responsiveStyles: {
-                large: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                  flexShrink: "0",
-                  position: "relative",
-                  marginTop: "30px",
-                  textAlign: "center",
-                  lineHeight: "normal",
-                  height: "auto"
-                }
-              },
-              component: {
-                name: "Text",
-                options: {
-                  text: "<p>Enter some text...</p>"
-                }
-              }
-            }
-          ]
+      hideFromUI: true,
+      defaultValue: [{
+        "@type": "@builder.io/sdk:Element",
+        responsiveStyles: {
+          large: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            flexShrink: "0",
+            position: "relative",
+            marginTop: "30px",
+            textAlign: "center",
+            lineHeight: "normal",
+            height: "auto",
+            minHeight: "20px",
+            minWidth: "20px",
+            overflow: "hidden"
+          }
         },
-        {
-          name: "width",
-          type: "number",
-          hideFromUI: true,
-          helperText: "Width %, e.g. set to 50 to fill half of the space"
+        component: {
+          name: "Image",
+          options: {
+            image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+            backgroundPosition: "center",
+            backgroundSize: "cover",
+            aspectRatio: 0.7004048582995948
+          }
+        }
+      }, {
+        "@type": "@builder.io/sdk:Element",
+        responsiveStyles: {
+          large: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            flexShrink: "0",
+            position: "relative",
+            marginTop: "30px",
+            textAlign: "center",
+            lineHeight: "normal",
+            height: "auto"
+          }
         },
-        {
-          name: "link",
-          type: "url",
-          helperText: "Optionally set a url that clicking this column will link to"
+        component: {
+          name: "Text",
+          options: {
+            text: "<p>Enter some text...</p>"
+          }
         }
-      ],
-      defaultValue: [
-        {
-          blocks: [
-            {
-              "@type": "@builder.io/sdk:Element",
-              responsiveStyles: {
-                large: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                  flexShrink: "0",
-                  position: "relative",
-                  marginTop: "30px",
-                  textAlign: "center",
-                  lineHeight: "normal",
-                  height: "auto",
-                  minHeight: "20px",
-                  minWidth: "20px",
-                  overflow: "hidden"
-                }
-              },
-              component: {
-                name: "Image",
-                options: {
-                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-                  backgroundPosition: "center",
-                  backgroundSize: "cover",
-                  aspectRatio: 0.7004048582995948
-                }
-              }
-            },
-            {
-              "@type": "@builder.io/sdk:Element",
-              responsiveStyles: {
-                large: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                  flexShrink: "0",
-                  position: "relative",
-                  marginTop: "30px",
-                  textAlign: "center",
-                  lineHeight: "normal",
-                  height: "auto"
-                }
-              },
-              component: {
-                name: "Text",
-                options: {
-                  text: "<p>Enter some text...</p>"
-                }
-              }
-            }
-          ]
+      }]
+    }, {
+      name: "width",
+      type: "number",
+      hideFromUI: true,
+      helperText: "Width %, e.g. set to 50 to fill half of the space"
+    }, {
+      name: "link",
+      type: "url",
+      helperText: "Optionally set a url that clicking this column will link to"
+    }],
+    defaultValue: [{
+      blocks: [{
+        "@type": "@builder.io/sdk:Element",
+        responsiveStyles: {
+          large: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            flexShrink: "0",
+            position: "relative",
+            marginTop: "30px",
+            textAlign: "center",
+            lineHeight: "normal",
+            height: "auto",
+            minHeight: "20px",
+            minWidth: "20px",
+            overflow: "hidden"
+          }
         },
-        {
-          blocks: [
-            {
-              "@type": "@builder.io/sdk:Element",
-              responsiveStyles: {
-                large: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                  flexShrink: "0",
-                  position: "relative",
-                  marginTop: "30px",
-                  textAlign: "center",
-                  lineHeight: "normal",
-                  height: "auto",
-                  minHeight: "20px",
-                  minWidth: "20px",
-                  overflow: "hidden"
-                }
-              },
-              component: {
-                name: "Image",
-                options: {
-                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-                  backgroundPosition: "center",
-                  backgroundSize: "cover",
-                  aspectRatio: 0.7004048582995948
-                }
-              }
-            },
-            {
-              "@type": "@builder.io/sdk:Element",
-              responsiveStyles: {
-                large: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                  flexShrink: "0",
-                  position: "relative",
-                  marginTop: "30px",
-                  textAlign: "center",
-                  lineHeight: "normal",
-                  height: "auto"
-                }
-              },
-              component: {
-                name: "Text",
-                options: {
-                  text: "<p>Enter some text...</p>"
-                }
-              }
-            }
-          ]
+        component: {
+          name: "Image",
+          options: {
+            image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+            backgroundPosition: "center",
+            backgroundSize: "cover",
+            aspectRatio: 0.7004048582995948
+          }
+        }
+      }, {
+        "@type": "@builder.io/sdk:Element",
+        responsiveStyles: {
+          large: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            flexShrink: "0",
+            position: "relative",
+            marginTop: "30px",
+            textAlign: "center",
+            lineHeight: "normal",
+            height: "auto"
+          }
+        },
+        component: {
+          name: "Text",
+          options: {
+            text: "<p>Enter some text...</p>"
+          }
+        }
+      }]
+    }, {
+      blocks: [{
+        "@type": "@builder.io/sdk:Element",
+        responsiveStyles: {
+          large: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            flexShrink: "0",
+            position: "relative",
+            marginTop: "30px",
+            textAlign: "center",
+            lineHeight: "normal",
+            height: "auto",
+            minHeight: "20px",
+            minWidth: "20px",
+            overflow: "hidden"
+          }
+        },
+        component: {
+          name: "Image",
+          options: {
+            image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+            backgroundPosition: "center",
+            backgroundSize: "cover",
+            aspectRatio: 0.7004048582995948
+          }
         }
-      ],
-      onChange: serializeFn((options) => {
-        function clearWidths() {
-          columns.forEach((col) => {
-            col.delete("width");
-          });
+      }, {
+        "@type": "@builder.io/sdk:Element",
+        responsiveStyles: {
+          large: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            flexShrink: "0",
+            position: "relative",
+            marginTop: "30px",
+            textAlign: "center",
+            lineHeight: "normal",
+            height: "auto"
+          }
+        },
+        component: {
+          name: "Text",
+          options: {
+            text: "<p>Enter some text...</p>"
+          }
         }
-        const columns = options.get("columns");
-        if (Array.isArray(columns)) {
-          const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
-          if (containsColumnWithWidth) {
-            const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
-            if (containsColumnWithoutWidth) {
+      }]
+    }],
+    onChange: options => {
+      function clearWidths() {
+        columns.forEach(col => {
+          col.delete("width");
+        });
+      }
+      const columns = options.get("columns");
+      if (Array.isArray(columns)) {
+        const containsColumnWithWidth = !!columns.find(col => col.get("width"));
+        if (containsColumnWithWidth) {
+          const containsColumnWithoutWidth = !!columns.find(col => !col.get("width"));
+          if (containsColumnWithoutWidth) {
+            clearWidths();
+          } else {
+            const sumWidths = columns.reduce((memo, col) => {
+              return memo + col.get("width");
+            }, 0);
+            const widthsDontAddUp = sumWidths !== 100;
+            if (widthsDontAddUp) {
               clearWidths();
-            } else {
-              const sumWidths = columns.reduce((memo, col) => {
-                return memo + col.get("width");
-              }, 0);
-              const widthsDontAddUp = sumWidths !== 100;
-              if (widthsDontAddUp) {
-                clearWidths();
-              }
             }
           }
         }
-      })
-    },
-    {
-      name: "space",
-      type: "number",
-      defaultValue: 20,
-      helperText: "Size of gap between columns",
-      advanced: true
-    },
-    {
-      name: "stackColumnsAt",
-      type: "string",
-      defaultValue: "tablet",
-      helperText: "Convert horizontal columns to vertical at what device size",
-      enum: ["tablet", "mobile", "never"],
-      advanced: true
-    },
-    {
-      name: "reverseColumnsWhenStacked",
-      type: "boolean",
-      defaultValue: false,
-      helperText: "When stacking columns for mobile devices, reverse the ordering",
-      advanced: true
+      }
     }
-  ]
-};
-export {
-  componentInfo
+  }, {
+    name: "space",
+    type: "number",
+    defaultValue: 20,
+    helperText: "Size of gap between columns",
+    advanced: true
+  }, {
+    name: "stackColumnsAt",
+    type: "string",
+    defaultValue: "tablet",
+    helperText: "Convert horizontal columns to vertical at what device size",
+    enum: ["tablet", "mobile", "never"],
+    advanced: true
+  }, {
+    name: "reverseColumnsWhenStacked",
+    type: "boolean",
+    defaultValue: false,
+    helperText: "When stacking columns for mobile devices, reverse the ordering",
+    advanced: true
+  }]
 };
+export { componentInfo }