@builder.io/sdk-solid 0.1.6 → 0.1.8

package/package.json

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

package/src/blocks/columns/columns.jsx

@@ -1,4 +1,4 @@
-import { Show, For, createSignal } from "solid-js";
+import { useContext, Show, For, createSignal } from "solid-js";
 
 import { css } from "solid-styled-components";
 
@@ -7,6 +7,7 @@ import { getSizesForBreakpoints } from "../../constants/device-sizes";
 import RenderInlinedStyles from "../../components/render-inlined-styles.jsx";
 import { TARGET } from "../../constants/target.js";
 import { convertStyleMapToCSS } from "../../helpers/css";
+import BuilderContext from "../../context/builder.context.js";
 
 function Columns(props) {
   function getGutterSize() {
@@ -60,7 +61,7 @@ function Columns(props) {
 
   function getWidthForBreakpointSize(size) {
     const breakpointSizes = getSizesForBreakpoints(
-      props.customBreakpoints || {}
+      builderContext.content?.meta?.breakpoints || {}
     );
     return breakpointSizes[size].max;
   }
@@ -122,6 +123,8 @@ function Columns(props) {
     return this.columnStyleObjects.column.small;
   }
 
+  const builderContext = useContext(BuilderContext);
+
   return (
     <div
       class={

package/src/components/render-block/block-styles.jsx

@@ -7,6 +7,7 @@ import {
 import { TARGET } from "../../constants/target.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { createCssClass } from "../../helpers/css.js";
+import { checkIsDefined } from "../../helpers/nullable.js";
 import RenderInlinedStyles from "../render-inlined-styles.jsx";
 
 function BlockStyles(props) {
@@ -19,6 +20,17 @@ function BlockStyles(props) {
     });
   }
 
+  function canShowBlock() {
+    // only render styles for blocks that are visible
+    if (checkIsDefined(useBlock().hide)) {
+      return !useBlock().hide;
+    }
+    if (checkIsDefined(useBlock().show)) {
+      return useBlock().show;
+    }
+    return true;
+  }
+
   function css() {
     const styles = useBlock().responsiveStyles;
     const content = props.context.content;
@@ -59,7 +71,7 @@ function BlockStyles(props) {
   }
 
   return (
-    <Show when={TARGET !== "reactNative" && css()}>
+    <Show when={TARGET !== "reactNative" && css() && canShowBlock()}>
       <RenderInlinedStyles styles={css()}></RenderInlinedStyles>
     </Show>
   );

package/src/components/render-block/render-block.jsx

@@ -17,6 +17,7 @@ import { TARGET } from "../../constants/target.js";
 import { extractTextStyles } from "../../functions/extract-text-styles.js";
 import RenderComponent from "./render-component.jsx";
 import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
+import { checkIsDefined } from "../../helpers/nullable.js";
 
 function RenderBlock(props) {
   const [component, setComponent] = createSignal(
@@ -48,6 +49,16 @@ function RenderBlock(props) {
         });
   }
 
+  function canShowBlock() {
+    if (checkIsDefined(useBlock().hide)) {
+      return !useBlock().hide;
+    }
+    if (checkIsDefined(useBlock().show)) {
+      return useBlock().show;
+    }
+    return true;
+  }
+
   function proxyState() {
     if (typeof Proxy === "undefined") {
       console.error(
@@ -110,7 +121,6 @@ function RenderBlock(props) {
                 ...actions(),
               },
             }),
-        customBreakpoints: childrenContext()?.content?.meta?.breakpoints,
       },
       context: childrenContext(),
     };
@@ -153,55 +163,59 @@ function RenderBlock(props) {
   }
 
   return (
-    <Show
-      fallback={<RenderComponent {...renderComponentProps()}></RenderComponent>}
-      when={!component()?.noWrap}
-    >
-      <Show when={isEmptyHtmlElement(tag())}>
-        <Dynamic {...attributes()} {...actions()} component={tag()}></Dynamic>
-      </Show>
-      <Show when={!isEmptyHtmlElement(tag()) && repeatItemData()}>
-        <For each={repeatItemData()}>
-          {(data, _index) => {
-            const index = _index();
-            return (
-              <RenderRepeatedBlock
-                key={index}
-                repeatContext={data.context}
-                block={data.block}
-              ></RenderRepeatedBlock>
-            );
-          }}
-        </For>
-      </Show>
-      <Show when={!isEmptyHtmlElement(tag()) && !repeatItemData()}>
-        <Dynamic {...attributes()} {...actions()} component={tag()}>
+    <Show when={canShowBlock()}>
+      <Show
+        fallback={
           <RenderComponent {...renderComponentProps()}></RenderComponent>
-          <For each={childrenWithoutParentComponent()}>
-            {(child, _index) => {
-              const index = _index();
-              return (
-                <RenderBlock
-                  key={"render-block-" + child.id}
-                  block={child}
-                  context={childrenContext()}
-                ></RenderBlock>
-              );
-            }}
-          </For>
-          <For each={childrenWithoutParentComponent()}>
-            {(child, _index) => {
+        }
+        when={!component()?.noWrap}
+      >
+        <Show when={isEmptyHtmlElement(tag())}>
+          <Dynamic {...attributes()} {...actions()} component={tag()}></Dynamic>
+        </Show>
+        <Show when={!isEmptyHtmlElement(tag()) && repeatItemData()}>
+          <For each={repeatItemData()}>
+            {(data, _index) => {
               const index = _index();
               return (
-                <BlockStyles
-                  key={"block-style-" + child.id}
-                  block={child}
-                  context={childrenContext()}
-                ></BlockStyles>
+                <RenderRepeatedBlock
+                  key={index}
+                  repeatContext={data.context}
+                  block={data.block}
+                ></RenderRepeatedBlock>
               );
             }}
           </For>
-        </Dynamic>
+        </Show>
+        <Show when={!isEmptyHtmlElement(tag()) && !repeatItemData()}>
+          <Dynamic {...attributes()} {...actions()} component={tag()}>
+            <RenderComponent {...renderComponentProps()}></RenderComponent>
+            <For each={childrenWithoutParentComponent()}>
+              {(child, _index) => {
+                const index = _index();
+                return (
+                  <RenderBlock
+                    key={"render-block-" + child.id}
+                    block={child}
+                    context={childrenContext()}
+                  ></RenderBlock>
+                );
+              }}
+            </For>
+            <For each={childrenWithoutParentComponent()}>
+              {(child, _index) => {
+                const index = _index();
+                return (
+                  <BlockStyles
+                    key={"block-style-" + child.id}
+                    block={child}
+                    context={childrenContext()}
+                  ></BlockStyles>
+                );
+              }}
+            </For>
+          </Dynamic>
+        </Show>
       </Show>
     </Show>
   );