@builder.io/sdk-svelte 0.4.1 → 0.4.3

package/package/components/render-content/render-content.svelte.d.ts

@@ -2,21 +2,21 @@ import { SvelteComponentTyped } from "svelte";
 import type { RenderContentProps } from "./render-content.types.js";
 declare const __propDef: {
     props: {
-        content: RenderContentProps["content"];
-        data: RenderContentProps["data"];
         canTrack: RenderContentProps["canTrack"];
-        locale: RenderContentProps["locale"];
-        customComponents: RenderContentProps["customComponents"];
         model: RenderContentProps["model"];
         context: RenderContentProps["context"];
         apiKey: RenderContentProps["apiKey"];
+        content: RenderContentProps["content"];
         parentContentId: RenderContentProps["parentContentId"];
+        data: RenderContentProps["data"];
+        locale: RenderContentProps["locale"];
+        apiVersion: RenderContentProps["apiVersion"];
+        customComponents: RenderContentProps["customComponents"];
         hideContent: RenderContentProps["hideContent"];
         classNameProp: RenderContentProps["classNameProp"];
         isSsrAbTest: RenderContentProps["isSsrAbTest"];
         includeRefs: RenderContentProps["includeRefs"];
         enrich: RenderContentProps["enrich"];
-        apiVersion: RenderContentProps["apiVersion"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/render-content-variants/helpers.js

@@ -1,3 +1,4 @@
+import { TARGET } from '../../constants/target';
 import { isBrowser } from '../../functions/is-browser';
 export const getVariants = (content) => Object.values(content?.variations || {});
 export const checkShouldRunVariants = ({ canTrack, content, }) => {
@@ -155,10 +156,11 @@ function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget) {
     }
     return;
 }
-const isHydrationTarget = (target) => target === 'react' ||
+const getIsHydrationTarget = (target) => target === 'react' ||
     target === 'reactNative' ||
     target === 'vue3' ||
     target === 'vue2';
+const isHydrationTarget = getIsHydrationTarget(TARGET);
 /**
  * We hardcode explicit function names here, because the `.toString()` of a function can change depending on the bundler.
  * Some bundlers will minify the fn name, etc.

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.4.1";
+export declare const SDK_VERSION = "0.4.3";

package/package/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.4.1";
+export const SDK_VERSION = "0.4.3";

package/package/context/builder.context.d.ts

@@ -1,5 +1,5 @@
 declare const _default: {
-    Builder: {
+    Builder: import("svelte/store").Writable<{
         content: null;
         context: {};
         localState: undefined;
@@ -9,7 +9,7 @@ declare const _default: {
         apiVersion: undefined;
         registeredComponents: {};
         inheritedStyles: {};
-    };
+    }>;
     key: symbol;
 };
 export default _default;

package/package/context/builder.context.js

@@ -1,6 +1,7 @@
 const key = Symbol();
+import { writable } from "svelte/store";
 export default {
-    Builder: {
+    Builder: writable({
         content: null,
         context: {},
         localState: undefined,
@@ -10,6 +11,6 @@ export default {
         apiVersion: undefined,
         registeredComponents: {},
         inheritedStyles: {},
-    },
+    }),
     key,
 };

package/package.json

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

package/src/blocks/BaseText.svelte

@@ -24,4 +24,6 @@
   let builderContext = getContext(BuilderContext.key);
 </script>
 
-<span use:mitosis_styling={builderContext.inheritedStyles}>{text}</span>
+<span use:mitosis_styling={$builderContext.inheritedStyles}>
+  {text}
+</span>

package/src/blocks/columns/columns.svelte

@@ -106,7 +106,7 @@
   }
   function getWidthForBreakpointSize(size: SizeName) {
     const breakpointSizes = getSizesForBreakpoints(
-      builderContext.content?.meta?.breakpoints || {}
+      $builderContext.content?.meta?.breakpoints || {}
     );
     return breakpointSizes[size].max;
   }

package/src/blocks/embed/embed.svelte

@@ -37,7 +37,7 @@
   let scriptsRun = [];
   let ranInitFn = false;
 
-  function onUpdateFn_0() {
+  function onUpdateFn_0(..._args: any[]) {
     if (elem && !ranInitFn) {
       ranInitFn = true;
       findAndRunScripts();

package/src/blocks/img/component-info.ts

@@ -12,7 +12,7 @@ export const componentInfo: ComponentInfo = {
       name: 'image',
       bubble: true,
       type: 'file',
-      allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg'],
+      allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg', 'gif', 'webp'],
       required: true,
     },
   ],

package/src/blocks/symbol/symbol.svelte

@@ -78,12 +78,12 @@
       !contentToUse &&
       symbol?.model &&
       // This is a hack, we should not need to check for this, but it is needed for Svelte.
-      builderContext?.apiKey
+      $builderContext?.apiKey
     ) {
       getContent({
         model: symbol.model,
-        apiKey: builderContext.apiKey,
-        apiVersion: builderContext.apiVersion,
+        apiKey: $builderContext.apiKey,
+        apiVersion: $builderContext.apiVersion,
         query: {
           id: symbol.entry,
         },
@@ -115,7 +115,7 @@
     fetchContent();
   });
 
-  function onUpdateFn_0() {
+  function onUpdateFn_0(..._args: any[]) {
     fetchContent();
   }
   $: onUpdateFn_0(...[symbol]);
@@ -130,13 +130,13 @@
   use:setAttrs={filterAttrs(attributes, isEvent)}
 >
   <RenderContent
-    apiVersion={builderContext.apiVersion}
-    apiKey={builderContext.apiKey}
-    context={builderContext.context}
-    customComponents={Object.values(builderContext.registeredComponents)}
+    apiVersion={$builderContext.apiVersion}
+    apiKey={$builderContext.apiKey}
+    context={$builderContext.context}
+    customComponents={Object.values($builderContext.registeredComponents)}
     data={{
       ...symbol?.data,
-      ...builderContext.localState,
+      ...$builderContext.localState,
       ...contentToUse?.data?.state,
     }}
     model={symbol?.model}

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

@@ -1,11 +1,13 @@
 <script context="module" lang="ts">
   export type RenderBlockProps = {
     block: BuilderBlock;
-    context: BuilderContextInterface;
+    context: Writable<BuilderContextInterface>;
   };
 </script>
 
 <script lang="ts">
+  import { writable } from "svelte/store";
+
   import type { BuilderContextInterface } from "../../context/types.js";
   import { getBlockActions } from "../../functions/get-block-actions.js";
   import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
@@ -24,6 +26,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 type { Writable } from "svelte/store";
 
   const setAttrs = (node, attrs = {}) => {
     const attrKeys = Object.keys(attrs);
@@ -49,7 +52,7 @@
   $: repeatItem = () => {
     return getRepeatItemData({
       block: block,
-      context: context,
+      context: $context,
     });
   };
   $: useBlock = () => {
@@ -57,10 +60,10 @@
       ? block
       : getProcessedBlock({
           block: block,
-          localState: context.localState,
-          rootState: context.rootState,
-          rootSetState: context.rootSetState,
-          context: context.context,
+          localState: $context.localState,
+          rootState: $context.rootState,
+          rootSetState: $context.rootSetState,
+          context: $context.context,
           shouldEvaluateBindings: true,
         });
   };
@@ -76,10 +79,10 @@
   $: actions = () => {
     return getBlockActions({
       block: useBlock(),
-      rootState: context.rootState,
-      rootSetState: context.rootSetState,
-      localState: context.localState,
-      context: context.context,
+      rootState: $context.rootState,
+      rootSetState: $context.rootSetState,
+      localState: $context.localState,
+      context: $context.context,
     });
   };
   $: attributes = () => {
@@ -90,7 +93,7 @@
         ? {
             style: getReactNativeBlockStyles({
               block: useBlock(),
-              context: context,
+              context: $context,
               blockStyles: blockProperties.style,
             }),
           }
@@ -108,31 +111,6 @@
       !component?.component && !repeatItem();
     return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
   };
-  $: childrenContext = () => {
-    const getInheritedTextStyles = () => {
-      if (TARGET !== "reactNative") {
-        return {};
-      }
-      return extractTextStyles(
-        getReactNativeBlockStyles({
-          block: useBlock(),
-          context: context,
-          blockStyles: attributes().style,
-        })
-      );
-    };
-    return {
-      apiKey: context.apiKey,
-      apiVersion: context.apiVersion,
-      localState: context.localState,
-      rootState: context.rootState,
-      rootSetState: context.rootSetState,
-      content: context.content,
-      context: context.context,
-      registeredComponents: context.registeredComponents,
-      inheritedStyles: getInheritedTextStyles(),
-    };
-  };
   $: renderComponentProps = () => {
     return {
       blockChildren: useBlock().children ?? [],
@@ -152,15 +130,16 @@
               },
             }),
       },
-      context: childrenContext(),
+      context: childrenContext,
     };
   };
 
   let component = getComponent({
     block: block,
-    context: context,
+    context: $context,
   });
   let Tag = block.tagName || "div";
+  let childrenContext = writable($context);
 </script>
 
 {#if canShowBlock()}
@@ -180,11 +159,11 @@
         <RenderComponent {...renderComponentProps()} />
 
         {#each childrenWithoutParentComponent() as child ("render-block-" + child.id)}
-          <svelte:self block={child} context={childrenContext()} />
+          <svelte:self block={child} context={childrenContext} />
         {/each}
 
         {#each childrenWithoutParentComponent() as child ("block-style-" + child.id)}
-          <BlockStyles block={child} context={childrenContext()} />
+          <BlockStyles block={child} context={$childrenContext} />
         {/each}
       </svelte:element>
     {/if}

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

@@ -10,7 +10,7 @@
     componentRef: any;
     componentOptions: ComponentOptions;
     blockChildren: BuilderBlock[];
-    context: BuilderContextInterface;
+    context: Writable<BuilderContextInterface>;
   }
 </script>
 
@@ -19,6 +19,7 @@
   import BlockStyles from "./block-styles.svelte";
   import RenderBlock from "./render-block.svelte";
   import type { BuilderContextInterface } from "../../context/types.js";
+  import type { Writable } from "svelte/store";
 
   export let componentRef: RenderComponentProps["componentRef"];
   export let componentOptions: RenderComponentProps["componentOptions"];
@@ -33,7 +34,7 @@
     {/each}
 
     {#each blockChildren as child ("block-style-" + child.id)}
-      <BlockStyles block={child} {context} />
+      <BlockStyles block={child} context={$context} />
     {/each}
   </svelte:component>
 {/if}

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

@@ -3,40 +3,23 @@
     block: BuilderBlock;
     repeatContext: BuilderContextInterface;
   };
-
-  /**
-   * We can't make this a generic `ProvideContext` function because Vue 2 won't support root slots, e.g.
-   *
-   * ```vue
-   * <template>
-   *  <slot></slot>
-   * </template>
-   * ```
-   */
 </script>
 
 <script lang="ts">
   import { setContext } from "svelte";
+  import { writable } from "svelte/store";
 
   import BuilderContext from "../../context/builder.context.js";
   import type { BuilderContextInterface } from "../../context/types.js";
   import type { BuilderBlock } from "../../types/builder-block";
   import RenderBlock from "./render-block.svelte";
 
-  export let block: Props["block"];
   export let repeatContext: Props["repeatContext"];
+  export let block: Props["block"];
+
+  let store = writable(repeatContext);
 
-  setContext(BuilderContext.key, {
-    content: repeatContext.content,
-    localState: repeatContext.localState,
-    rootState: repeatContext.rootState,
-    rootSetState: repeatContext.rootSetState,
-    context: repeatContext.context,
-    apiKey: repeatContext.apiKey,
-    registeredComponents: repeatContext.registeredComponents,
-    inheritedStyles: repeatContext.inheritedStyles,
-    apiVersion: repeatContext.apiVersion,
-  });
+  setContext(BuilderContext.key, store);
 </script>
 
-<RenderBlock {block} context={repeatContext} />
+<RenderBlock {block} context={store} />

package/src/components/render-blocks.svelte

@@ -80,6 +80,9 @@
   on:mouseenter={(event) => {
     onMouseEnter();
   }}
+  on:keypress={(event) => {
+    onClick();
+  }}
 >
   {#if blocks}
     {#each blocks as block ("render-block-" + block.id)}
@@ -89,7 +92,7 @@
 
   {#if blocks}
     {#each blocks as block ("block-style-" + block.id)}
-      <BlockStyles {block} context={builderContext} />
+      <BlockStyles {block} context={$builderContext} />
     {/each}
   {/if}
 </div>