@builder.io/sdk-svelte 0.11.2 → 0.11.4

package/lib/browser/blocks/button/button.svelte

@@ -1,8 +1,3 @@
-<script context="module">/**
- * This import is used by the Svelte SDK. Do not remove.
- */
-</script>
-
 <script>import { filterAttrs } from "../helpers.js";
 import { setAttrs } from "../helpers.js";
 export let attributes = undefined;

package/lib/browser/blocks/button/button.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { ButtonProps } from "./button.types.js";
+declare const __propDef: {
+    props: {
+        attributes?: ButtonProps["attributes"];
+        text?: ButtonProps["text"];
+        link?: ButtonProps["link"];
+        openLinkInNewTab?: ButtonProps["openLinkInNewTab"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type ButtonProps_ = typeof __propDef.props;
+export { ButtonProps_ as ButtonProps };
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
+}

package/lib/browser/blocks/button/button.types.d.ts

@@ -0,0 +1,6 @@
+export interface ButtonProps {
+    attributes?: any;
+    text?: string;
+    link?: string;
+    openLinkInNewTab?: boolean;
+}

package/lib/browser/blocks/button/button.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,18 +1,6 @@
 import { SvelteComponent } from "svelte";
-type Column = {
-    blocks: BuilderBlock[];
-    width?: number;
-};
-type StackColumnsAt = "tablet" | "mobile" | "never";
-export interface ColumnProps extends BuilderComponentsProp {
-    columns?: Column[];
-    builderBlock: BuilderBlock;
-    space?: number;
-    stackColumnsAt?: StackColumnsAt;
-    reverseColumnsWhenStacked?: boolean;
-}
-import type { BuilderBlock } from "../../types/builder-block.js";
-import type { BuilderComponentsProp, PropsWithBuilderData } from "../../types/builder-props.js";
+import type { PropsWithBuilderData } from "../../types/builder-props.js";
+import type { ColumnProps } from "./columns.types.js";
 declare const __propDef: {
     props: {
         js: any;

package/lib/browser/blocks/columns/columns.types.d.ts

@@ -0,0 +1,15 @@
+import type { BuilderBlock } from '../../types/builder-block.js';
+import type { BuilderComponentsProp } from '../../types/builder-props.js';
+type Column = {
+    blocks: BuilderBlock[];
+    width?: number;
+};
+type StackColumnsAt = 'tablet' | 'mobile' | 'never';
+export interface ColumnProps extends BuilderComponentsProp {
+    columns?: Column[];
+    builderBlock: BuilderBlock;
+    space?: number;
+    stackColumnsAt?: StackColumnsAt;
+    reverseColumnsWhenStacked?: boolean;
+}
+export {};

package/lib/browser/blocks/columns/columns.types.js

@@ -0,0 +1 @@
+export {};

package/lib/browser/blocks/fragment/fragment.svelte

@@ -1,5 +1,3 @@
-<script context="module"></script>
-
 <script></script>
 
 <span><slot /></span>

package/lib/browser/blocks/fragment/fragment.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { FragmentProps } from "./fragment.types.js";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+type FragmentProps_ = typeof __propDef.props;
+export { FragmentProps_ as FragmentProps };
+export type FragmentEvents = typeof __propDef.events;
+export type FragmentSlots = typeof __propDef.slots;
+export default class Fragment extends SvelteComponent<FragmentProps, FragmentEvents, FragmentSlots> {
+}

package/lib/browser/blocks/fragment/fragment.types.d.ts

@@ -0,0 +1,5 @@
+export interface FragmentProps {
+    maxWidth?: number;
+    attributes?: any;
+    children?: any;
+}

package/lib/browser/blocks/fragment/fragment.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,5 +1,3 @@
-<script context="module"></script>
-
 <script>import { getSrcSet } from "./image.helpers.js";
 export let image;
 export let src = undefined;

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

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+import type { ImageProps } from "./image.types.js";
+declare const __propDef: {
+    props: {
+        image: ImageProps["image"];
+        src?: ImageProps["src"];
+        srcset?: ImageProps["srcset"];
+        noWebp?: ImageProps["noWebp"];
+        aspectRatio?: ImageProps["aspectRatio"];
+        altText?: ImageProps["altText"];
+        backgroundPosition?: ImageProps["backgroundPosition"];
+        backgroundSize?: ImageProps["backgroundSize"];
+        className?: ImageProps["className"];
+        sizes?: ImageProps["sizes"];
+        builderBlock?: ImageProps["builderBlock"];
+        fitContent?: ImageProps["fitContent"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+type ImageProps_ = typeof __propDef.props;
+export { ImageProps_ as ImageProps };
+export type ImageEvents = typeof __propDef.events;
+export type ImageSlots = typeof __propDef.slots;
+export default class Image extends SvelteComponent<ImageProps, ImageEvents, ImageSlots> {
+}

package/lib/browser/blocks/image/image.types.d.ts

@@ -0,0 +1,19 @@
+import type { BuilderBlock } from '../../types/builder-block.js';
+export interface ImageProps {
+    className?: string;
+    image: string;
+    sizes?: string;
+    lazy?: boolean;
+    height?: number;
+    width?: number;
+    altText?: string;
+    backgroundSize?: 'cover' | 'contain';
+    backgroundPosition?: string;
+    srcset?: string;
+    aspectRatio?: number;
+    children?: any;
+    fitContent?: boolean;
+    builderBlock?: BuilderBlock;
+    noWebp?: boolean;
+    src?: string;
+}

package/lib/browser/blocks/image/image.types.js

@@ -0,0 +1 @@
+export {};

package/lib/browser/blocks/section/section.svelte

@@ -1,8 +1,3 @@
-<script context="module">/**
- * This import is used by the Svelte SDK. Do not remove.
- */
-</script>
-
 <script>import { filterAttrs } from "../helpers.js";
 import { setAttrs } from "../helpers.js";
 export let attributes = undefined;

package/lib/browser/blocks/section/section.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { SectionProps } from "./section.types.js";
+declare const __propDef: {
+    props: {
+        attributes?: SectionProps["attributes"];
+        maxWidth?: SectionProps["maxWidth"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+type SectionProps_ = typeof __propDef.props;
+export { SectionProps_ as SectionProps };
+export type SectionEvents = typeof __propDef.events;
+export type SectionSlots = typeof __propDef.slots;
+export default class Section extends SvelteComponent<SectionProps, SectionEvents, SectionSlots> {
+}

package/lib/browser/blocks/section/section.types.d.ts

@@ -0,0 +1,6 @@
+export interface SectionProps {
+    maxWidth?: number;
+    attributes?: any;
+    children?: any;
+    builderBlock?: any;
+}

package/lib/browser/blocks/section/section.types.js

@@ -0,0 +1 @@
+export {};

package/lib/browser/blocks/symbol/symbol.svelte

@@ -1,8 +1,3 @@
-<script context="module">/**
- * This import is used by the Svelte SDK. Do not remove.
- */
-</script>
-
 <script>import { onMount } from "svelte";
 import ContentVariants from "../../components/content-variants/content-variants.svelte";
 import { filterAttrs } from "../helpers.js";

package/lib/browser/blocks/symbol/symbol.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { PropsWithBuilderData } from "../../types/builder-props.js";
+import type { SymbolProps } from "./symbol.types.js";
+declare const __propDef: {
+    props: {
+        js: any;
+        attributes?: PropsWithBuilderData<SymbolProps>["attributes"];
+        symbol?: PropsWithBuilderData<SymbolProps>["symbol"];
+        dynamic?: PropsWithBuilderData<SymbolProps>["dynamic"];
+        builderContext: PropsWithBuilderData<SymbolProps>["builderContext"];
+        builderComponents: PropsWithBuilderData<SymbolProps>["builderComponents"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type SymbolProps_ = typeof __propDef.props;
+export { SymbolProps_ as SymbolProps };
+export type SymbolEvents = typeof __propDef.events;
+export type SymbolSlots = typeof __propDef.slots;
+export default class Symbol extends SvelteComponent<SymbolProps, SymbolEvents, SymbolSlots> {
+}

package/lib/browser/blocks/symbol/symbol.types.d.ts

@@ -0,0 +1,18 @@
+import type { BuilderContent } from '../../types/builder-content.js';
+import type { BuilderComponentsProp } from '../../types/builder-props.js';
+interface SymbolInfo {
+    model?: string;
+    entry?: string;
+    data?: any;
+    content?: BuilderContent;
+    inline?: boolean;
+    dynamic?: boolean;
+}
+export interface SymbolProps extends BuilderComponentsProp {
+    symbol?: SymbolInfo;
+    dataOnly?: boolean;
+    dynamic?: boolean;
+    attributes?: any;
+    inheritState?: boolean;
+}
+export {};

package/lib/browser/blocks/symbol/symbol.types.js

@@ -0,0 +1 @@
+export {};

package/lib/browser/blocks/text/text.svelte

@@ -1,5 +1,3 @@
-<script context="module"></script>
-
 <script>export let text = undefined;
 function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {

package/lib/browser/blocks/text/text.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { TextProps } from "./text.types.js";
+declare const __propDef: {
+    props: {
+        text?: TextProps["text"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type TextProps_ = typeof __propDef.props;
+export { TextProps_ as TextProps };
+export type TextEvents = typeof __propDef.events;
+export type TextSlots = typeof __propDef.slots;
+export default class Text extends SvelteComponent<TextProps, TextEvents, TextSlots> {
+}

package/lib/browser/blocks/text/text.types.d.ts

@@ -0,0 +1,3 @@
+export type TextProps = {
+    text?: string;
+};

package/lib/browser/blocks/text/text.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,5 +1,3 @@
-<script context="module"></script>
-
 <script>export let autoPlay = undefined;
 export let muted = undefined;
 export let controls = undefined;

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

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+import type { VideoProps } from "./video.types.js";
+declare const __propDef: {
+    props: {
+        autoPlay?: VideoProps["autoPlay"];
+        muted?: VideoProps["muted"];
+        controls?: VideoProps["controls"];
+        loop?: VideoProps["loop"];
+        playsInline?: VideoProps["playsInline"];
+        preload?: VideoProps["preload"];
+        attributes?: VideoProps["attributes"];
+        fit?: VideoProps["fit"];
+        position?: VideoProps["position"];
+        aspectRatio?: VideoProps["aspectRatio"];
+        video?: VideoProps["video"];
+        posterImage?: VideoProps["posterImage"];
+        lazyLoad?: VideoProps["lazyLoad"];
+        fitContent?: VideoProps["fitContent"];
+        builderBlock?: VideoProps["builderBlock"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+type VideoProps_ = typeof __propDef.props;
+export { VideoProps_ as VideoProps };
+export type VideoEvents = typeof __propDef.events;
+export type VideoSlots = typeof __propDef.slots;
+export default class Video extends SvelteComponent<VideoProps, VideoEvents, VideoSlots> {
+}

package/lib/browser/blocks/video/video.types.d.ts

@@ -0,0 +1,21 @@
+import type { BuilderBlock } from '../../types/builder-block.js';
+export interface VideoProps {
+    attributes?: any;
+    video?: string;
+    autoPlay?: boolean;
+    controls?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    playsInline?: boolean;
+    aspectRatio?: number;
+    width?: number;
+    height?: number;
+    fit?: 'contain' | 'cover' | 'fill';
+    preload?: 'auto' | 'metadata' | 'none';
+    position?: 'center' | 'top' | 'left' | 'right' | 'bottom' | 'top left' | 'top right' | 'bottom left' | 'bottom right';
+    posterImage?: string;
+    lazyLoad?: boolean;
+    children?: any;
+    fitContent?: boolean;
+    builderBlock?: BuilderBlock;
+}

package/lib/browser/blocks/video/video.types.js

@@ -0,0 +1 @@
+export {};

package/lib/browser/components/block/block.svelte

@@ -88,6 +88,8 @@ let childrenContext = writable($context);
 </script>
 
 {#if canShowBlock()}
+  <BlockStyles {block} context={$context} />
+
   {#if !blockComponent?.()?.noWrap}
     {#if isEmptyHtmlElement(Tag())}
       <BlockWrapper
@@ -126,17 +128,13 @@ let childrenContext = writable($context);
           isInteractive={componentRefProps().isInteractive}
         />
 
-        {#each childrenWithoutParentComponent() as child ("block-" + child.id)}
+        {#each childrenWithoutParentComponent() as child (child.id)}
           <svelte:self
             block={child}
             context={childrenContext}
             {registeredComponents}
           />
         {/each}
-
-        {#each childrenWithoutParentComponent() as child ("block-style-" + child.id)}
-          <BlockStyles block={child} context={$childrenContext} />
-        {/each}
       </BlockWrapper>
     {/if}
   {:else}

package/lib/browser/components/block/components/component-ref/component-ref.svelte

@@ -1,6 +1,5 @@
 <script>import "../../../content/wrap-component-ref.js";
 import Block from "../../block.svelte";
-import BlockStyles from "../block-styles.svelte";
 import InteractiveElement from "../interactive-element.svelte";
 import { getWrapperProps } from "./component-ref.helpers.js";
 export let isInteractive;
@@ -27,12 +26,8 @@ let Wrapper = isInteractive ? InteractiveElement : componentRef;
       contextValue: $context,
     })}
   >
-    {#each blockChildren as child ("block-" + child.id)}
+    {#each blockChildren as child (child.id)}
       <Block block={child} {context} {registeredComponents} />
     {/each}
-
-    {#each blockChildren as child ("block-style-" + child.id)}
-      <BlockStyles block={child} context={$context} />
-    {/each}
   </svelte:component>
 {/if}

package/lib/browser/components/blocks/blocks.svelte

@@ -1,10 +1,7 @@
-<script context="module"></script>
-
 <script>import { getContext } from "svelte";
 import BuilderContext from "../../context/builder.context.js";
 import ComponentsContext from "../../context/components.context.js";
 import Block from "../block/block.svelte";
-import BlockStyles from "../block/components/block-styles.svelte";
 import BlocksWrapper from "./blocks-wrapper.svelte";
 export let blocks;
 export let parent;
@@ -25,7 +22,7 @@ let componentsContext = getContext(ComponentsContext.key);
   BlocksWrapperProps={$context?.BlocksWrapperProps}
 >
   {#if blocks}
-    {#each blocks as block ("render-block-" + block.id)}
+    {#each blocks as block (block.id)}
       <Block
         {block}
         context={context || builderContext}
@@ -34,10 +31,4 @@ let componentsContext = getContext(ComponentsContext.key);
       />
     {/each}
   {/if}
-
-  {#if blocks}
-    {#each blocks as block ("block-style-" + block.id)}
-      <BlockStyles {block} context={$context || $builderContext} />
-    {/each}
-  {/if}
 </BlocksWrapper>

package/lib/browser/components/blocks/blocks.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { BlocksProps } from "./blocks.types.js";
+declare const __propDef: {
+    props: {
+        blocks: BlocksProps["blocks"];
+        parent: BlocksProps["parent"];
+        path: BlocksProps["path"];
+        styleProp: BlocksProps["styleProp"];
+        context?: BlocksProps["context"];
+        registeredComponents?: BlocksProps["registeredComponents"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type BlocksProps_ = typeof __propDef.props;
+export { BlocksProps_ as BlocksProps };
+export type BlocksEvents = typeof __propDef.events;
+export type BlocksSlots = typeof __propDef.slots;
+export default class Blocks extends SvelteComponent<BlocksProps, BlocksEvents, BlocksSlots> {
+}

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

@@ -0,0 +1,8 @@
+/// <reference types="svelte" />
+import type { Writable } from "svelte/store";
+import type { BuilderContextInterface, RegisteredComponents } from '../../context/types.js';
+import type { BlocksWrapperProps } from './blocks-wrapper.svelte';
+export type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps'>> & {
+    context?: Writable<BuilderContextInterface>;
+    registeredComponents?: RegisteredComponents;
+};

package/lib/browser/components/blocks/blocks.types.js

@@ -0,0 +1 @@
+export {};

package/lib/browser/components/content/components/enable-editor.svelte

@@ -28,6 +28,19 @@ export let enrich = undefined;
 export let content = undefined;
 export let showContent;
 export let contentWrapperProps = undefined;
+export let data = undefined;
+function mergeNewRootState(newData) {
+    const combinedState = {
+        ...$builderContextSignal.rootState,
+        ...newData,
+    };
+    if ($builderContextSignal.rootSetState) {
+        $builderContextSignal.rootSetState?.(combinedState);
+    }
+    else {
+        $builderContextSignal.rootState = combinedState;
+    }
+}
 function mergeNewContent(newContent) {
     const newContentValue = {
         ...$builderContextSignal.content,
@@ -217,6 +230,7 @@ function elementRef_onInitpreviewingbldr(event) {
 }
 let elementRef;
 let forceReRenderCount = 0;
+let firstRender = true;
 let lastUpdated = 0;
 let shouldSendResetCookie = false;
 let ContentWrapper = contentWrapper || "div";
@@ -277,6 +291,20 @@ function onUpdateFn_4(..._args) {
     emitStateUpdate();
 }
 $: onUpdateFn_4(...[$builderContextSignal.rootState]);
+function onUpdateFn_5(..._args) {
+    if (data) {
+        mergeNewRootState(data);
+    }
+}
+$: onUpdateFn_5(...[data]);
+function onUpdateFn_6(..._args) {
+    if (locale) {
+        mergeNewRootState({
+            locale: locale,
+        });
+    }
+}
+$: onUpdateFn_6(...[locale]);
 setContext(builderContext.key, builderContextSignal);
 onDestroy(() => {
     if (isBrowser()) {

package/lib/browser/components/content/components/enable-editor.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-type BuilderEditorProps = Omit<ContentProps, "customComponents" | "data" | "apiVersion" | "isSsrAbTest" | "blocksWrapper" | "blocksWrapperProps"> & {
+type BuilderEditorProps = Omit<ContentProps, "customComponents" | "apiVersion" | "isSsrAbTest" | "blocksWrapper" | "blocksWrapperProps"> & {
     builderContextSignal: Writable<BuilderContextInterface>;
     setBuilderContextSignal?: (signal: any) => any;
     children?: any;
@@ -21,6 +21,7 @@ declare const __propDef: {
         content?: BuilderEditorProps["content"];
         showContent: BuilderEditorProps["showContent"];
         contentWrapperProps?: BuilderEditorProps["contentWrapperProps"];
+        data?: BuilderEditorProps["data"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/browser/components/content/content.helpers.d.ts

@@ -1,7 +1,7 @@
 import type { BuilderContent } from '../../types/builder-content.js';
 import type { Nullable } from '../../types/typescript.js';
 import type { ContentProps } from './content.types.js';
-export declare const getContextStateInitialValue: ({ content, data, locale }: Pick<ContentProps, 'content' | 'data' | 'locale'>) => {
+export declare const getRootStateInitialValue: ({ content, data, locale }: Pick<ContentProps, 'content' | 'data' | 'locale'>) => {
     locale?: string | undefined;
 };
 export declare const getContentInitialValue: ({ content, data }: Pick<ContentProps, 'content' | 'data'>) => Nullable<BuilderContent>;

package/lib/browser/components/content/content.helpers.js

@@ -1,4 +1,4 @@
-export const getContextStateInitialValue = ({ content, data, locale }) => {
+export const getRootStateInitialValue = ({ content, data, locale }) => {
     const defaultValues = {};
     const initialState = content?.data?.state || {};
     // set default values for content state inputs

package/lib/browser/components/content/content.svelte

@@ -9,7 +9,7 @@ import { getUpdateVariantVisibilityScript } from "../content-variants/helpers.js
 import InlinedScript from "../inlined-script.svelte";
 import EnableEditor from "./components/enable-editor.svelte";
 import ContentStyles from "./components/styles.svelte";
-import { getContentInitialValue, getContextStateInitialValue, } from "./content.helpers.js";
+import { getContentInitialValue, getRootStateInitialValue, } from "./content.helpers.js";
 import "./wrap-component-ref.js";
 export let content = undefined;
 export let customComponents = undefined;
@@ -59,7 +59,7 @@ let builderContextSignal = writable({
         data: data,
     }),
     localState: undefined,
-    rootState: getContextStateInitialValue({
+    rootState: getRootStateInitialValue({
         content: content,
         data: data,
         locale: locale,
@@ -92,6 +92,7 @@ setContext(ComponentsContext.key, {
 
 <EnableEditor
   {content}
+  {data}
   {model}
   {context}
   {apiKey}