@builder.io/sdk-svelte 3.0.2 → 3.0.5

package/lib/browser/blocks/accordion/accordion.svelte

@@ -113,7 +113,7 @@ let open = [];
 </script>
 
 <div style={stringifyStyles(accordionStyles())} class="builder-accordion">
-  {#each items as item, index}
+  {#each items as item, index (index)}
     <div
       style={stringifyStyles({
         ...accordionTitleStyles(),

package/lib/browser/blocks/columns/columns.svelte

@@ -170,13 +170,13 @@ $: flexDir = () => {
       ><Blocks
         path={`columns.${index}.blocks`}
         parent={builderBlock.id}
-        styleProp={{
-          flexGrow: "1",
-        }}
         context={builderContext}
         registeredComponents={builderComponents}
         linkComponent={builderLinkComponent}
         blocks={column.blocks}
+        styleProp={{
+          flexGrow: "1",
+        }}
       /></DynamicRenderer
     >
   {/each}

package/lib/browser/blocks/form/form/form.svelte

@@ -3,8 +3,7 @@
  */
 </script>
 
-<script>import Block from "../../../components/block/block.svelte";
-import Blocks from "../../../components/blocks/blocks.svelte";
+<script>import Blocks from "../../../components/blocks/blocks.svelte";
 import { getEnv } from "../../../functions/get-env";
 import { get } from "../../../functions/get";
 import { isEditing } from "../../../functions/is-editing";
@@ -27,9 +26,6 @@ export let resetFormOnSubmit = undefined;
 export let successUrl = undefined;
 export let validate = undefined;
 export let attributes = undefined;
-export let builderBlock;
-export let builderComponents;
-export let builderLinkComponent = undefined;
 export let errorMessage = undefined;
 export let sendingMessage = undefined;
 export let successMessage = undefined;
@@ -254,16 +250,7 @@ let formErrorMessage = "";
   {...filterAttrs(attributes, "on:", false)}
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 >
-  {#if builderBlock && builderBlock.children}
-    {#each builderBlock?.children as block, idx (`form-block-${idx}`)}
-      <Block
-        {block}
-        context={builderContext}
-        registeredComponents={builderComponents}
-        linkComponent={builderLinkComponent}
-      />
-    {/each}
-  {/if}
+  <slot />
   {#if submissionState() === "error"}
     <Blocks
       path="errorMessage"

package/lib/browser/blocks/image/image.svelte

@@ -1,5 +1,4 @@
-<script>import { onMount } from "svelte";
-import { getSrcSet } from "./image.helpers";
+<script>import { getSrcSet } from "./image.helpers";
 export let image;
 export let src = undefined;
 export let srcset = undefined;
@@ -66,7 +65,6 @@ $: aspectRatioCss = () => {
     const out = aspectRatio ? aspectRatioStyles : undefined;
     return out;
 };
-onMount(() => { });
 </script>
 
 <picture>

package/lib/browser/blocks/video/video.svelte

@@ -73,7 +73,6 @@ $: spreadProps = () => {
       objectPosition: position,
       // Hack to get object fit to work as expected and
       // not have the video overflow
-      zIndex: 2,
       borderRadius: "1px",
       ...(aspectRatio
         ? {

package/lib/browser/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "3.0.2";
+export declare const SDK_VERSION = "3.0.5";

package/lib/browser/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "3.0.2";
+export const SDK_VERSION = "3.0.5";

package/lib/browser/types/builder-content.d.ts

@@ -33,6 +33,7 @@ export interface BuilderContent extends BuilderContentVariation {
     published?: 'published' | 'draft' | 'archived';
     modelId?: string;
     priority?: number;
+    firstPublished?: number;
     lastUpdated?: number;
     startDate?: number;
     endDate?: number;

package/lib/browser/types/components.d.ts

@@ -122,7 +122,7 @@ export interface ComponentInfo {
         /**
          * Whether or not the component should receive the `builderBlock` prop, containing the current Builder block being rendered.
          *
-         * Defaults to `true`.
+         * Defaults to `false`.
          */
         builderBlock?: boolean;
         /**
@@ -130,7 +130,7 @@ export interface ComponentInfo {
          * The Builder Context contains a lot of data relevant to the current `Content` render.
          * You can see more information [here](https://github.com/BuilderIO/builder/blob/main/packages/sdks/src/context/types.ts).
          *
-         * Defaults to `true`.
+         * Defaults to `false`.
          */
         builderContext?: boolean;
         /**

package/lib/browser/types/input.d.ts

@@ -19,6 +19,16 @@ export interface Input {
     /** @hidden */
     autoFocus?: boolean;
     subFields?: Input[];
+    /**
+     * When input is of `type` `object`, use this field to collapse multiple inputs
+     * in the Visual Editor by default and preserve screen space.
+     */
+    folded?: boolean;
+    /**
+     * When input is of `type` `object`, provide guidance in the Visual Editor
+     * on how to edit this object's contents.
+     */
+    keysHelperText?: string;
     /**
      * Additional text to render in the UI to give guidance on how to use this
      *

package/lib/edge/blocks/accordion/accordion.svelte

@@ -113,7 +113,7 @@ let open = [];
 </script>
 
 <div style={stringifyStyles(accordionStyles())} class="builder-accordion">
-  {#each items as item, index}
+  {#each items as item, index (index)}
     <div
       style={stringifyStyles({
         ...accordionTitleStyles(),

package/lib/edge/blocks/columns/columns.svelte

@@ -170,13 +170,13 @@ $: flexDir = () => {
       ><Blocks
         path={`columns.${index}.blocks`}
         parent={builderBlock.id}
-        styleProp={{
-          flexGrow: "1",
-        }}
         context={builderContext}
         registeredComponents={builderComponents}
         linkComponent={builderLinkComponent}
         blocks={column.blocks}
+        styleProp={{
+          flexGrow: "1",
+        }}
       /></DynamicRenderer
     >
   {/each}

package/lib/edge/blocks/form/form/form.svelte

@@ -3,8 +3,7 @@
  */
 </script>
 
-<script>import Block from "../../../components/block/block.svelte";
-import Blocks from "../../../components/blocks/blocks.svelte";
+<script>import Blocks from "../../../components/blocks/blocks.svelte";
 import { getEnv } from "../../../functions/get-env";
 import { get } from "../../../functions/get";
 import { isEditing } from "../../../functions/is-editing";
@@ -27,9 +26,6 @@ export let resetFormOnSubmit = undefined;
 export let successUrl = undefined;
 export let validate = undefined;
 export let attributes = undefined;
-export let builderBlock;
-export let builderComponents;
-export let builderLinkComponent = undefined;
 export let errorMessage = undefined;
 export let sendingMessage = undefined;
 export let successMessage = undefined;
@@ -254,16 +250,7 @@ let formErrorMessage = "";
   {...filterAttrs(attributes, "on:", false)}
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 >
-  {#if builderBlock && builderBlock.children}
-    {#each builderBlock?.children as block, idx (`form-block-${idx}`)}
-      <Block
-        {block}
-        context={builderContext}
-        registeredComponents={builderComponents}
-        linkComponent={builderLinkComponent}
-      />
-    {/each}
-  {/if}
+  <slot />
   {#if submissionState() === "error"}
     <Blocks
       path="errorMessage"

package/lib/edge/blocks/image/image.svelte

@@ -1,5 +1,4 @@
-<script>import { onMount } from "svelte";
-import { getSrcSet } from "./image.helpers";
+<script>import { getSrcSet } from "./image.helpers";
 export let image;
 export let src = undefined;
 export let srcset = undefined;
@@ -66,7 +65,6 @@ $: aspectRatioCss = () => {
     const out = aspectRatio ? aspectRatioStyles : undefined;
     return out;
 };
-onMount(() => { });
 </script>
 
 <picture>

package/lib/edge/blocks/video/video.svelte

@@ -73,7 +73,6 @@ $: spreadProps = () => {
       objectPosition: position,
       // Hack to get object fit to work as expected and
       // not have the video overflow
-      zIndex: 2,
       borderRadius: "1px",
       ...(aspectRatio
         ? {

package/lib/edge/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "3.0.2";
+export declare const SDK_VERSION = "3.0.5";

package/lib/edge/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "3.0.2";
+export const SDK_VERSION = "3.0.5";

package/lib/edge/types/builder-content.d.ts

@@ -33,6 +33,7 @@ export interface BuilderContent extends BuilderContentVariation {
     published?: 'published' | 'draft' | 'archived';
     modelId?: string;
     priority?: number;
+    firstPublished?: number;
     lastUpdated?: number;
     startDate?: number;
     endDate?: number;

package/lib/edge/types/components.d.ts

@@ -122,7 +122,7 @@ export interface ComponentInfo {
         /**
          * Whether or not the component should receive the `builderBlock` prop, containing the current Builder block being rendered.
          *
-         * Defaults to `true`.
+         * Defaults to `false`.
          */
         builderBlock?: boolean;
         /**
@@ -130,7 +130,7 @@ export interface ComponentInfo {
          * The Builder Context contains a lot of data relevant to the current `Content` render.
          * You can see more information [here](https://github.com/BuilderIO/builder/blob/main/packages/sdks/src/context/types.ts).
          *
-         * Defaults to `true`.
+         * Defaults to `false`.
          */
         builderContext?: boolean;
         /**

package/lib/edge/types/input.d.ts

@@ -19,6 +19,16 @@ export interface Input {
     /** @hidden */
     autoFocus?: boolean;
     subFields?: Input[];
+    /**
+     * When input is of `type` `object`, use this field to collapse multiple inputs
+     * in the Visual Editor by default and preserve screen space.
+     */
+    folded?: boolean;
+    /**
+     * When input is of `type` `object`, provide guidance in the Visual Editor
+     * on how to edit this object's contents.
+     */
+    keysHelperText?: string;
     /**
      * Additional text to render in the UI to give guidance on how to use this
      *

package/lib/node/blocks/accordion/accordion.svelte

@@ -113,7 +113,7 @@ let open = [];
 </script>
 
 <div style={stringifyStyles(accordionStyles())} class="builder-accordion">
-  {#each items as item, index}
+  {#each items as item, index (index)}
     <div
       style={stringifyStyles({
         ...accordionTitleStyles(),

package/lib/node/blocks/columns/columns.svelte

@@ -170,13 +170,13 @@ $: flexDir = () => {
       ><Blocks
         path={`columns.${index}.blocks`}
         parent={builderBlock.id}
-        styleProp={{
-          flexGrow: "1",
-        }}
         context={builderContext}
         registeredComponents={builderComponents}
         linkComponent={builderLinkComponent}
         blocks={column.blocks}
+        styleProp={{
+          flexGrow: "1",
+        }}
       /></DynamicRenderer
     >
   {/each}

package/lib/node/blocks/form/form/form.svelte

@@ -3,8 +3,7 @@
  */
 </script>
 
-<script>import Block from "../../../components/block/block.svelte";
-import Blocks from "../../../components/blocks/blocks.svelte";
+<script>import Blocks from "../../../components/blocks/blocks.svelte";
 import { getEnv } from "../../../functions/get-env";
 import { get } from "../../../functions/get";
 import { isEditing } from "../../../functions/is-editing";
@@ -27,9 +26,6 @@ export let resetFormOnSubmit = undefined;
 export let successUrl = undefined;
 export let validate = undefined;
 export let attributes = undefined;
-export let builderBlock;
-export let builderComponents;
-export let builderLinkComponent = undefined;
 export let errorMessage = undefined;
 export let sendingMessage = undefined;
 export let successMessage = undefined;
@@ -254,16 +250,7 @@ let formErrorMessage = "";
   {...filterAttrs(attributes, "on:", false)}
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 >
-  {#if builderBlock && builderBlock.children}
-    {#each builderBlock?.children as block, idx (`form-block-${idx}`)}
-      <Block
-        {block}
-        context={builderContext}
-        registeredComponents={builderComponents}
-        linkComponent={builderLinkComponent}
-      />
-    {/each}
-  {/if}
+  <slot />
   {#if submissionState() === "error"}
     <Blocks
       path="errorMessage"

package/lib/node/blocks/image/image.svelte

@@ -1,5 +1,4 @@
-<script>import { onMount } from "svelte";
-import { getSrcSet } from "./image.helpers";
+<script>import { getSrcSet } from "./image.helpers";
 export let image;
 export let src = undefined;
 export let srcset = undefined;
@@ -66,7 +65,6 @@ $: aspectRatioCss = () => {
     const out = aspectRatio ? aspectRatioStyles : undefined;
     return out;
 };
-onMount(() => { });
 </script>
 
 <picture>

package/lib/node/blocks/video/video.svelte

@@ -73,7 +73,6 @@ $: spreadProps = () => {
       objectPosition: position,
       // Hack to get object fit to work as expected and
       // not have the video overflow
-      zIndex: 2,
       borderRadius: "1px",
       ...(aspectRatio
         ? {

package/lib/node/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "3.0.2";
+export declare const SDK_VERSION = "3.0.5";

package/lib/node/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "3.0.2";
+export const SDK_VERSION = "3.0.5";

package/lib/node/types/builder-content.d.ts

@@ -33,6 +33,7 @@ export interface BuilderContent extends BuilderContentVariation {
     published?: 'published' | 'draft' | 'archived';
     modelId?: string;
     priority?: number;
+    firstPublished?: number;
     lastUpdated?: number;
     startDate?: number;
     endDate?: number;

package/lib/node/types/components.d.ts

@@ -122,7 +122,7 @@ export interface ComponentInfo {
         /**
          * Whether or not the component should receive the `builderBlock` prop, containing the current Builder block being rendered.
          *
-         * Defaults to `true`.
+         * Defaults to `false`.
          */
         builderBlock?: boolean;
         /**
@@ -130,7 +130,7 @@ export interface ComponentInfo {
          * The Builder Context contains a lot of data relevant to the current `Content` render.
          * You can see more information [here](https://github.com/BuilderIO/builder/blob/main/packages/sdks/src/context/types.ts).
          *
-         * Defaults to `true`.
+         * Defaults to `false`.
          */
         builderContext?: boolean;
         /**

package/lib/node/types/input.d.ts

@@ -19,6 +19,16 @@ export interface Input {
     /** @hidden */
     autoFocus?: boolean;
     subFields?: Input[];
+    /**
+     * When input is of `type` `object`, use this field to collapse multiple inputs
+     * in the Visual Editor by default and preserve screen space.
+     */
+    folded?: boolean;
+    /**
+     * When input is of `type` `object`, provide guidance in the Visual Editor
+     * on how to edit this object's contents.
+     */
+    keysHelperText?: string;
     /**
      * Additional text to render in the UI to give guidance on how to use this
      *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "3.0.2",
+  "version": "3.0.5",
   "type": "module",
   "files": [
     "lib",
@@ -60,7 +60,7 @@
     "svelte-preprocess": "^5.0.4",
     "tslib": "^2.3.1",
     "typescript": "^5.1.6",
-    "vite": "^4.4.8"
+    "vite": "^4.5.6"
   },
   "nx": {
     "targets": {

package/src/blocks/accordion/accordion.svelte

@@ -150,7 +150,7 @@
 </script>
 
 <div style={stringifyStyles(accordionStyles())} class="builder-accordion">
-  {#each items as item, index}
+  {#each items as item, index (index)}
     <div
       style={stringifyStyles({
         ...accordionTitleStyles(),

package/src/blocks/columns/columns.svelte

@@ -194,13 +194,13 @@
       ><Blocks
         path={`columns.${index}.blocks`}
         parent={builderBlock.id}
-        styleProp={{
-          flexGrow: "1",
-        }}
         context={builderContext}
         registeredComponents={builderComponents}
         linkComponent={builderLinkComponent}
         blocks={column.blocks}
+        styleProp={{
+          flexGrow: "1",
+        }}
       /></DynamicRenderer
     >
   {/each}

package/src/blocks/form/form/form.svelte

@@ -25,6 +25,7 @@
       sendingMessage?: BuilderBlock[];
       resetFormOnSubmit?: boolean;
       errorMessagePath?: string;
+      children?: any;
     };
 
   /**
@@ -35,7 +36,6 @@
 </script>
 
 <script lang="ts">
-  import Block from "../../../components/block/block.svelte";
   import Blocks from "../../../components/blocks/blocks.svelte";
   import { getEnv } from "../../../functions/get-env";
   import { get } from "../../../functions/get";
@@ -68,10 +68,7 @@
   export let successUrl: FormProps["successUrl"] = undefined;
   export let validate: FormProps["validate"] = undefined;
   export let attributes: FormProps["attributes"] = undefined;
-  export let builderBlock: FormProps["builderBlock"];
-  export let builderComponents: FormProps["builderComponents"];
-  export let builderLinkComponent: FormProps["builderLinkComponent"] =
-    undefined;
+
   export let errorMessage: FormProps["errorMessage"] = undefined;
   export let sendingMessage: FormProps["sendingMessage"] = undefined;
   export let successMessage: FormProps["successMessage"] = undefined;
@@ -307,16 +304,7 @@
   {...filterAttrs(attributes, "on:", false)}
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 >
-  {#if builderBlock && builderBlock.children}
-    {#each builderBlock?.children as block, idx (`form-block-${idx}`)}
-      <Block
-        {block}
-        context={builderContext}
-        registeredComponents={builderComponents}
-        linkComponent={builderLinkComponent}
-      />
-    {/each}
-  {/if}
+  <slot />
   {#if submissionState() === "error"}
     <Blocks
       path="errorMessage"

package/src/blocks/image/image.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-
   import { getSrcSet } from "./image.helpers";
   import type { ImageProps } from "./image.types";
 
@@ -74,8 +72,6 @@
     const out = aspectRatio ? aspectRatioStyles : undefined;
     return out;
   };
-
-  onMount(() => {});
 </script>
 
 <picture>

package/src/blocks/video/video.svelte

@@ -78,7 +78,6 @@
       objectPosition: position,
       // Hack to get object fit to work as expected and
       // not have the video overflow
-      zIndex: 2,
       borderRadius: "1px",
       ...(aspectRatio
         ? {

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "3.0.2"
+export const SDK_VERSION = "3.0.5"

package/src/types/builder-content.ts

@@ -36,6 +36,7 @@ export interface BuilderContent extends BuilderContentVariation {
   published?: 'published' | 'draft' | 'archived';
   modelId?: string;
   priority?: number;
+  firstPublished?: number;
   lastUpdated?: number;
   startDate?: number;
   endDate?: number;

package/src/types/components.ts

@@ -134,7 +134,7 @@ export interface ComponentInfo {
     /**
      * Whether or not the component should receive the `builderBlock` prop, containing the current Builder block being rendered.
      *
-     * Defaults to `true`.
+     * Defaults to `false`.
      */
     builderBlock?: boolean;
 
@@ -143,7 +143,7 @@ export interface ComponentInfo {
      * The Builder Context contains a lot of data relevant to the current `Content` render.
      * You can see more information [here](https://github.com/BuilderIO/builder/blob/main/packages/sdks/src/context/types.ts).
      *
-     * Defaults to `true`.
+     * Defaults to `false`.
      */
     builderContext?: boolean;
 

package/src/types/input.ts

@@ -19,6 +19,16 @@ export interface Input {
   /** @hidden */
   autoFocus?: boolean;
   subFields?: Input[];
+  /**
+   * When input is of `type` `object`, use this field to collapse multiple inputs
+   * in the Visual Editor by default and preserve screen space.
+   */
+  folded?: boolean;
+  /**
+   * When input is of `type` `object`, provide guidance in the Visual Editor
+   * on how to edit this object's contents.
+   */
+  keysHelperText?: string;
   /**
    * Additional text to render in the UI to give guidance on how to use this
    *