@builder.io/sdk-svelte 0.1.6 → 0.1.8

package/package/--package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "type": "module",
   "files": [
     "package",

package/package/CHANGELOG.md

@@ -1,3 +1,11 @@
+### 0.1.7
+
+- No changes.
+
+### 0.1.6
+
+- Types: removed redundant `builtIn` field in `customComponents` prop types
+
 ### 0.1.5
 
 - Feature: Global CSS Nesting (`&` operator) support

package/package/blocks/columns/columns.svelte

@@ -1,15 +1,16 @@
 <script context="module"></script>
 
-<script>import RenderBlocks from "../../components/render-blocks.svelte";
+<script>import { getContext } from "svelte";
+import RenderBlocks from "../../components/render-blocks.svelte";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
 import RenderInlinedStyles from "../../components/render-inlined-styles.svelte";
 import { TARGET } from "../../constants/target.js";
 import { convertStyleMapToCSS } from "../../helpers/css";
+import BuilderContext from "../../context/builder.context.js";
 export let space;
 export let columns;
 export let stackColumnsAt;
 export let reverseColumnsWhenStacked;
-export let customBreakpoints;
 export let builderBlock;
 function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {
@@ -21,6 +22,7 @@ function mitosis_styling(node, vars) {
         }
     });
 }
+let builderContext = getContext(BuilderContext.key);
 function getGutterSize() {
     return typeof space === "number" ? space || 0 : 20;
 }
@@ -42,7 +44,7 @@ function maybeApplyForTablet(prop) {
     return _stackColumnsAt === "tablet" ? prop : "inherit";
 }
 function getWidthForBreakpointSize(size) {
-    const breakpointSizes = getSizesForBreakpoints(customBreakpoints || {});
+    const breakpointSizes = getSizesForBreakpoints(builderContext.content?.meta?.breakpoints || {});
     return breakpointSizes[size].max;
 }
 $: columnsCssVars = () => {

package/package/blocks/columns/columns.svelte.d.ts

@@ -1,6 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
 import type { BuilderBlock } from "../../types/builder-block";
-import type { Breakpoints } from "../../types/builder-content";
 declare type Column = {
     blocks: any;
     width?: number;
@@ -12,7 +11,6 @@ export interface ColumnProps {
     space?: number;
     stackColumnsAt?: StackColumnsAt;
     reverseColumnsWhenStacked?: boolean;
-    customBreakpoints?: Breakpoints;
 }
 declare const __propDef: {
     props: {
@@ -20,7 +18,6 @@ declare const __propDef: {
         columns: ColumnProps["columns"];
         stackColumnsAt: ColumnProps["stackColumnsAt"];
         reverseColumnsWhenStacked: ColumnProps["reverseColumnsWhenStacked"];
-        customBreakpoints: ColumnProps["customBreakpoints"];
         builderBlock: ColumnProps["builderBlock"];
     };
     events: {

package/package/components/render-block/block-styles.svelte

@@ -4,6 +4,7 @@
 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.svelte";
 export let block;
 export let context;
@@ -15,6 +16,16 @@ $: useBlock = () => {
         shouldEvaluateBindings: true,
     });
 };
+$: 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;
+};
 $: css = () => {
     const styles = useBlock().responsiveStyles;
     const content = context.content;
@@ -47,6 +58,6 @@ $: css = () => {
 };
 </script>
 
-{#if TARGET !== "reactNative" && css()}
+{#if TARGET !== "reactNative" && css() && canShowBlock()}
   <RenderInlinedStyles styles={css()} />
 {/if}

package/package/components/render-block/render-block.svelte

@@ -12,6 +12,7 @@ import { TARGET } from "../../constants/target.js";
 import { extractTextStyles } from "../../functions/extract-text-styles.js";
 import RenderComponent from "./render-component.svelte";
 import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
+import { checkIsDefined } from "../../helpers/nullable.js";
 const setAttrs = (node, attrs = {}) => {
     const attrKeys = Object.keys(attrs);
     const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
@@ -43,6 +44,15 @@ $: useBlock = () => {
             shouldEvaluateBindings: true,
         });
 };
+$: canShowBlock = () => {
+    if (checkIsDefined(useBlock().hide)) {
+        return !useBlock().hide;
+    }
+    if (checkIsDefined(useBlock().show)) {
+        return useBlock().show;
+    }
+    return true;
+};
 $: proxyState = () => {
     if (typeof Proxy === "undefined") {
         console.error("no Proxy available in this environment, cannot proxy state.");
@@ -99,7 +109,6 @@ $: renderComponentProps = () => {
                         ...actions(),
                     },
                 }),
-            customBreakpoints: childrenContext?.()?.content?.meta?.breakpoints,
         },
         context: childrenContext(),
     };
@@ -145,30 +154,32 @@ let repeatItemData = getRepeatItemData({
 });
 </script>
 
-{#if !component?.noWrap}
-  {#if isEmptyHtmlElement(tag())}
-    <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()} />
-  {/if}
+{#if canShowBlock()}
+  {#if !component?.noWrap}
+    {#if isEmptyHtmlElement(tag())}
+      <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()} />
+    {/if}
 
-  {#if !isEmptyHtmlElement(tag()) && repeatItemData}
-    {#each repeatItemData as data, index (index)}
-      <RenderRepeatedBlock repeatContext={data.context} block={data.block} />
-    {/each}
-  {/if}
+    {#if !isEmptyHtmlElement(tag()) && repeatItemData}
+      {#each repeatItemData as data, index (index)}
+        <RenderRepeatedBlock repeatContext={data.context} block={data.block} />
+      {/each}
+    {/if}
 
-  {#if !isEmptyHtmlElement(tag()) && !repeatItemData}
-    <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()}>
-      <RenderComponent {...renderComponentProps()} />
+    {#if !isEmptyHtmlElement(tag()) && !repeatItemData}
+      <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()}>
+        <RenderComponent {...renderComponentProps()} />
 
-      {#each childrenWithoutParentComponent() as child ("render-block-" + child.id)}
-        <svelte:self block={child} context={childrenContext()} />
-      {/each}
+        {#each childrenWithoutParentComponent() as child ("render-block-" + child.id)}
+          <svelte:self block={child} context={childrenContext()} />
+        {/each}
 
-      {#each childrenWithoutParentComponent() as child ("block-style-" + child.id)}
-        <BlockStyles block={child} context={childrenContext()} />
-      {/each}
-    </svelte:element>
+        {#each childrenWithoutParentComponent() as child ("block-style-" + child.id)}
+          <BlockStyles block={child} context={childrenContext()} />
+        {/each}
+      </svelte:element>
+    {/if}
+  {:else}
+    <RenderComponent {...renderComponentProps()} />
   {/if}
-{:else}
-  <RenderComponent {...renderComponentProps()} />
 {/if}

package/package/components/render-block/render-component.svelte.d.ts

@@ -1,10 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 import type { BuilderBlock } from "../../types/builder-block.js";
 import type { BuilderContextInterface } from "../../context/types.js";
-import type { Breakpoints } from "../../types/builder-content.js";
 declare type ComponentOptions = {
     [index: string]: any;
-    customBreakpoints?: Breakpoints;
     attributes?: {
         [index: string]: any;
     };
@@ -14,7 +12,6 @@ export interface RenderComponentProps {
     componentOptions: ComponentOptions;
     blockChildren: BuilderBlock[];
     context: BuilderContextInterface;
-    customBreakpoints?: Breakpoints;
 }
 declare const __propDef: {
     props: {

package/package/types/builder-block.d.ts

@@ -54,5 +54,13 @@ export interface BuilderBlock {
     } | null;
     animations?: any[];
     style?: Partial<CSSStyleDeclaration>;
+    /**
+     * generated by the "Hide If" binding
+     */
+    hide?: boolean;
+    /**
+     * generated by the "Show If" binding
+     */
+    show?: boolean;
 }
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "type": "module",
   "files": [
     "package",

package/src/blocks/columns/columns.svelte

@@ -3,8 +3,6 @@
 
   import type { SizeName } from "../../constants/device-sizes";
 
-  import type { Breakpoints } from "../../types/builder-content";
-
   type Column = {
     blocks: any;
     // TODO: Implement this when support for dynamic CSS lands
@@ -23,22 +21,23 @@
     stackColumnsAt?: StackColumnsAt;
     // TODO: Implement this when support for dynamic CSS lands
     reverseColumnsWhenStacked?: boolean;
-    customBreakpoints?: Breakpoints;
   }
 </script>
 
 <script lang="ts">
+  import { getContext } from "svelte";
+
   import RenderBlocks from "../../components/render-blocks.svelte";
   import { getSizesForBreakpoints } from "../../constants/device-sizes";
   import RenderInlinedStyles from "../../components/render-inlined-styles.svelte";
   import { TARGET } from "../../constants/target.js";
   import { convertStyleMapToCSS } from "../../helpers/css";
+  import BuilderContext from "../../context/builder.context.js";
 
   export let space: ColumnProps["space"];
   export let columns: ColumnProps["columns"];
   export let stackColumnsAt: ColumnProps["stackColumnsAt"];
   export let reverseColumnsWhenStacked: ColumnProps["reverseColumnsWhenStacked"];
-  export let customBreakpoints: ColumnProps["customBreakpoints"];
   export let builderBlock: ColumnProps["builderBlock"];
 
   function mitosis_styling(node, vars) {
@@ -51,6 +50,8 @@
     });
   }
 
+  let builderContext = getContext(BuilderContext.key);
+
   function getGutterSize() {
     return typeof space === "number" ? space || 0 : 20;
   }
@@ -72,7 +73,9 @@
     return _stackColumnsAt === "tablet" ? prop : "inherit";
   }
   function getWidthForBreakpointSize(size) {
-    const breakpointSizes = getSizesForBreakpoints(customBreakpoints || {});
+    const breakpointSizes = getSizesForBreakpoints(
+      builderContext.content?.meta?.breakpoints || {}
+    );
     return breakpointSizes[size].max;
   }
   $: columnsCssVars = () => {

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

@@ -17,6 +17,7 @@
   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.svelte";
 
   export let block: BlockStylesProps["block"];
@@ -30,6 +31,16 @@
       shouldEvaluateBindings: true,
     });
   };
+  $: 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;
+  };
   $: css = () => {
     const styles = useBlock().responsiveStyles;
     const content = context.content;
@@ -70,6 +81,6 @@
   };
 </script>
 
-{#if TARGET !== "reactNative" && css()}
+{#if TARGET !== "reactNative" && css() && canShowBlock()}
   <RenderInlinedStyles styles={css()} />
 {/if}

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

@@ -31,6 +31,7 @@
   import { extractTextStyles } from "../../functions/extract-text-styles.js";
   import RenderComponent from "./render-component.svelte";
   import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
+  import { checkIsDefined } from "../../helpers/nullable.js";
 
   const setAttrs = (node, attrs = {}) => {
     const attrKeys = Object.keys(attrs);
@@ -66,6 +67,15 @@
           shouldEvaluateBindings: true,
         });
   };
+  $: canShowBlock = () => {
+    if (checkIsDefined(useBlock().hide)) {
+      return !useBlock().hide;
+    }
+    if (checkIsDefined(useBlock().show)) {
+      return useBlock().show;
+    }
+    return true;
+  };
   $: proxyState = () => {
     if (typeof Proxy === "undefined") {
       console.error(
@@ -125,7 +135,6 @@
                 ...actions(),
               },
             }),
-        customBreakpoints: childrenContext?.()?.content?.meta?.breakpoints,
       },
       context: childrenContext(),
     };
@@ -175,30 +184,32 @@
   });
 </script>
 
-{#if !component?.noWrap}
-  {#if isEmptyHtmlElement(tag())}
-    <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()} />
-  {/if}
+{#if canShowBlock()}
+  {#if !component?.noWrap}
+    {#if isEmptyHtmlElement(tag())}
+      <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()} />
+    {/if}
 
-  {#if !isEmptyHtmlElement(tag()) && repeatItemData}
-    {#each repeatItemData as data, index (index)}
-      <RenderRepeatedBlock repeatContext={data.context} block={data.block} />
-    {/each}
-  {/if}
+    {#if !isEmptyHtmlElement(tag()) && repeatItemData}
+      {#each repeatItemData as data, index (index)}
+        <RenderRepeatedBlock repeatContext={data.context} block={data.block} />
+      {/each}
+    {/if}
 
-  {#if !isEmptyHtmlElement(tag()) && !repeatItemData}
-    <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()}>
-      <RenderComponent {...renderComponentProps()} />
+    {#if !isEmptyHtmlElement(tag()) && !repeatItemData}
+      <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()}>
+        <RenderComponent {...renderComponentProps()} />
 
-      {#each childrenWithoutParentComponent() as child ("render-block-" + child.id)}
-        <svelte:self block={child} context={childrenContext()} />
-      {/each}
+        {#each childrenWithoutParentComponent() as child ("render-block-" + child.id)}
+          <svelte:self block={child} context={childrenContext()} />
+        {/each}
 
-      {#each childrenWithoutParentComponent() as child ("block-style-" + child.id)}
-        <BlockStyles block={child} context={childrenContext()} />
-      {/each}
-    </svelte:element>
+        {#each childrenWithoutParentComponent() as child ("block-style-" + child.id)}
+          <BlockStyles block={child} context={childrenContext()} />
+        {/each}
+      </svelte:element>
+    {/if}
+  {:else}
+    <RenderComponent {...renderComponentProps()} />
   {/if}
-{:else}
-  <RenderComponent {...renderComponentProps()} />
 {/if}

package/src/components/render-block/render-component.svelte

@@ -3,11 +3,8 @@
 
   import type { BuilderContextInterface } from "../../context/types.js";
 
-  import type { Breakpoints } from "../../types/builder-content.js";
-
   type ComponentOptions = {
     [index: string]: any;
-    customBreakpoints?: Breakpoints;
     attributes?: {
       [index: string]: any;
     };
@@ -18,7 +15,6 @@
     componentOptions: ComponentOptions;
     blockChildren: BuilderBlock[];
     context: BuilderContextInterface;
-    customBreakpoints?: Breakpoints;
   }
 </script>
 

package/src/types/builder-block.ts

@@ -56,4 +56,14 @@ export interface BuilderBlock {
   } | null;
   animations?: any[]; // TODO: type the animation spec
   style?: Partial<CSSStyleDeclaration>;
+
+  /**
+   * generated by the "Hide If" binding
+   */
+  hide?: boolean;
+
+  /**
+   * generated by the "Show If" binding
+   */
+  show?: boolean;
 }