@builder.io/sdk-svelte 0.1.6 → 0.1.7

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.6",
   "type": "module",
   "files": [
     "package",

package/package/CHANGELOG.md

@@ -1,3 +1,7 @@
+### 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/render-block.svelte

@@ -99,7 +99,6 @@ $: renderComponentProps = () => {
                         ...actions(),
                     },
                 }),
-            customBreakpoints: childrenContext?.()?.content?.meta?.breakpoints,
         },
         context: childrenContext(),
     };

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.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "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/render-block.svelte

@@ -125,7 +125,6 @@
                 ...actions(),
               },
             }),
-        customBreakpoints: childrenContext?.()?.content?.meta?.breakpoints,
       },
       context: childrenContext(),
     };

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>