@builder.io/sdk-svelte 0.4.1 → 0.4.3

package/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/package/CHANGELOG.md

@@ -1,3 +1,10 @@
+### 0.4.3
+- Fix: SSR A/B test environment check (`isHydrationTarget`) now accurately checks current environment.
+
+### 0.4.2
+
+- Feature: Added support for mutating Builder's `state` in custom element events and custom user code.
+
 ### 0.4.1
 
 - Fix: bring back `getBuilderSearchParams` export that was accidentally removed.
@@ -5,6 +12,8 @@
 ### 0.4.0
 
 - Feature: A/B tests are now rendered correctly during server-side rendering (SSR) when applicable. This behaviour is backwards compatible with previous versions.
+- Feature: Add support for `enrich` API flag.
+- Mark `noTraverse` and `includeRefs` as deprecated.
 
 ### 0.3.1
 

package/package/blocks/BaseText.svelte

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

package/package/blocks/columns/columns.svelte

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

package/package/blocks/embed/embed.svelte

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

package/package/blocks/img/component-info.js

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

package/package/blocks/symbol/symbol.svelte

@@ -50,11 +50,11 @@ function fetchContent() {
     if (!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,
             },
@@ -83,7 +83,7 @@ let contentToUse = symbol?.content;
 onMount(() => {
     fetchContent();
 });
-function onUpdateFn_0() {
+function onUpdateFn_0(..._args) {
     fetchContent();
 }
 $: onUpdateFn_0(...[symbol]);
@@ -98,13 +98,13 @@ $: onUpdateFn_0(...[symbol]);
   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/package/components/render-block/render-block.svelte

@@ -1,6 +1,7 @@
 <script context="module"></script>
 
-<script>import { getBlockActions } from "../../functions/get-block-actions.js";
+<script>import { writable } from "svelte/store";
+import { getBlockActions } from "../../functions/get-block-actions.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
 import { getBlockProperties } from "../../functions/get-block-properties.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
@@ -8,7 +9,7 @@ import BlockStyles from "./block-styles.svelte";
 import { getComponent, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
 import RenderRepeatedBlock from "./render-repeated-block.svelte";
 import { TARGET } from "../../constants/target.js";
-import { extractTextStyles } from "../../functions/extract-text-styles.js";
+import "../../functions/extract-text-styles.js";
 import RenderComponent from "./render-component.svelte";
 import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
 const setAttrs = (node, attrs = {}) => {
@@ -32,7 +33,7 @@ export let context;
 $: repeatItem = () => {
     return getRepeatItemData({
         block: block,
-        context: context,
+        context: $context,
     });
 };
 $: useBlock = () => {
@@ -40,10 +41,10 @@ $: useBlock = () => {
         ? 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,
         });
 };
@@ -59,10 +60,10 @@ $: canShowBlock = () => {
 $: 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 = () => {
@@ -73,7 +74,7 @@ $: attributes = () => {
             ? {
                 style: getReactNativeBlockStyles({
                     block: useBlock(),
-                    context: context,
+                    context: $context,
                     blockStyles: blockProperties.style,
                 }),
             }
@@ -90,29 +91,6 @@ $: childrenWithoutParentComponent = () => {
     const shouldRenderChildrenOutsideRef = !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 ?? [],
@@ -132,14 +110,15 @@ $: renderComponentProps = () => {
                     },
                 }),
         },
-        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()}
@@ -159,11 +138,11 @@ let Tag = block.tagName || "div";
         <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/package/components/render-block/render-block.svelte.d.ts

@@ -1,10 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 export type RenderBlockProps = {
     block: BuilderBlock;
-    context: BuilderContextInterface;
+    context: Writable<BuilderContextInterface>;
 };
 import type { BuilderContextInterface } from "../../context/types.js";
 import type { BuilderBlock } from "../../types/builder-block.js";
+import type { Writable } from "svelte/store";
 declare const __propDef: {
     props: {
         block: RenderBlockProps["block"];

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

@@ -15,7 +15,7 @@ export let context;
     {/each}
 
     {#each blockChildren as child ("block-style-" + child.id)}
-      <BlockStyles block={child} {context} />
+      <BlockStyles block={child} context={$context} />
     {/each}
   </svelte:component>
 {/if}

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

@@ -9,10 +9,11 @@ export interface RenderComponentProps {
     componentRef: any;
     componentOptions: ComponentOptions;
     blockChildren: BuilderBlock[];
-    context: BuilderContextInterface;
+    context: Writable<BuilderContextInterface>;
 }
 import type { BuilderBlock } from "../../types/builder-block.js";
 import type { BuilderContextInterface } from "../../context/types.js";
+import type { Writable } from "svelte/store";
 declare const __propDef: {
     props: {
         componentRef: RenderComponentProps["componentRef"];

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

@@ -1,30 +1,13 @@
-<script context="module">/**
- * We can't make this a generic `ProvideContext` function because Vue 2 won't support root slots, e.g.
- *
- * ```vue
- *
- *  <slot></slot>
- *
- * ```
- */
-</script>
+<script context="module"></script>
 
 <script>import { setContext } from "svelte";
+import { writable } from "svelte/store";
 import BuilderContext from "../../context/builder.context.js";
 import RenderBlock from "./render-block.svelte";
-export let block;
 export let 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,
-});
+export let block;
+let store = writable(repeatContext);
+setContext(BuilderContext.key, store);
 </script>
 
-<RenderBlock {block} context={repeatContext} />
+<RenderBlock {block} context={store} />

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

@@ -7,8 +7,8 @@ import type { BuilderContextInterface } from "../../context/types.js";
 import type { BuilderBlock } from "../../types/builder-block";
 declare const __propDef: {
     props: {
-        block: Props["block"];
         repeatContext: Props["repeatContext"];
+        block: Props["block"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/render-blocks.svelte

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

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

@@ -1,4 +1,5 @@
 <script>import { onDestroy, onMount, setContext } from "svelte";
+import { writable } from "svelte/store";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
 import { evaluate } from "../../functions/evaluate.js";
 import { getContent } from "../../functions/get-content/index.js";
@@ -46,47 +47,48 @@ const setAttrs = (node, attrs = {}) => {
         },
     };
 };
-export let content;
-export let data;
 export let canTrack;
-export let locale;
-export let customComponents;
 export let model;
 export let context;
 export let apiKey;
+export let content;
 export let parentContentId;
+export let data;
+export let locale;
+export let apiVersion;
+export let customComponents;
 export let hideContent;
 export let classNameProp;
 export let isSsrAbTest;
 export let includeRefs;
 export let enrich;
-export let apiVersion;
 function mergeNewContent(newContent) {
-    useContent = {
-        ...useContent,
+    $builderContextSignal.content = {
+        ...$builderContextSignal.content,
         ...newContent,
         data: {
-            ...useContent?.data,
+            ...$builderContextSignal.content?.data,
             ...newContent?.data,
         },
         meta: {
-            ...useContent?.meta,
+            ...$builderContextSignal.content?.meta,
             ...newContent?.meta,
-            breakpoints: newContent?.meta?.breakpoints || useContent?.meta?.breakpoints,
+            breakpoints: newContent?.meta?.breakpoints ||
+                $builderContextSignal.content?.meta?.breakpoints,
         },
     };
 }
 function setBreakpoints(breakpoints) {
-    useContent = {
-        ...useContent,
+    $builderContextSignal.content = {
+        ...$builderContextSignal.content,
         meta: {
-            ...useContent?.meta,
+            ...$builderContextSignal.content?.meta,
             breakpoints,
         },
     };
 }
 function contentSetState(newRootState) {
-    contentState = newRootState;
+    $builderContextSignal.rootState = newRootState;
 }
 function processMessage(event) {
     const { data } = event;
@@ -95,7 +97,7 @@ function processMessage(event) {
             case "builder.configureSdk": {
                 const messageContent = data.data;
                 const { breakpoints, contentId } = messageContent;
-                if (!contentId || contentId !== useContent?.id) {
+                if (!contentId || contentId !== $builderContextSignal.content?.id) {
                     return;
                 }
                 if (breakpoints) {
@@ -126,21 +128,21 @@ function processMessage(event) {
 }
 function evaluateJsCode() {
     // run any dynamic JS code attached to content
-    const jsCode = useContent?.data?.jsCode;
+    const jsCode = $builderContextSignal.content?.data?.jsCode;
     if (jsCode) {
         evaluate({
             code: jsCode,
             context: context || {},
             localState: undefined,
-            rootState: contentState,
+            rootState: $builderContextSignal.rootState,
             rootSetState: contentSetState,
         });
     }
 }
 function onClick(event) {
-    if (useContent) {
-        const variationId = useContent?.testVariationId;
-        const contentId = useContent?.id;
+    if ($builderContextSignal.content) {
+        const variationId = $builderContextSignal.content?.testVariationId;
+        const contentId = $builderContextSignal.content?.id;
         _track({
             type: "click",
             canTrack: canTrackToUse,
@@ -160,7 +162,7 @@ function evalExpression(expression) {
         code: group,
         context: context || {},
         localState: undefined,
-        rootState: contentState,
+        rootState: $builderContextSignal.rootState,
         rootSetState: contentSetState,
     }));
 }
@@ -169,7 +171,7 @@ function handleRequest({ url, key }) {
         .then((response) => response.json())
         .then((json) => {
         const newState = {
-            ...contentState,
+            ...$builderContextSignal.rootState,
             [key]: json,
         };
         contentSetState(newState);
@@ -179,7 +181,7 @@ function handleRequest({ url, key }) {
     });
 }
 function runHttpRequests() {
-    const requests = useContent?.data?.httpRequests ?? {};
+    const requests = $builderContextSignal.content?.data?.httpRequests ?? {};
     Object.entries(requests).forEach(([key, url]) => {
         if (url && (!httpReqsData[key] || isEditing())) {
             const evaluatedUrl = evalExpression(url);
@@ -194,7 +196,7 @@ function emitStateUpdate() {
     if (isEditing()) {
         window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
             detail: {
-                state: contentState,
+                state: $builderContextSignal.rootState,
                 ref: {
                     name: model,
                 },
@@ -205,33 +207,8 @@ function emitStateUpdate() {
 let elementRef;
 let forceReRenderCount = 0;
 let overrideContent = null;
-let useContent = getContentInitialValue({
-    content: content,
-    data: data,
-});
 let update = 0;
 let canTrackToUse = checkIsDefined(canTrack) ? canTrack : true;
-let contentState = getContextStateInitialValue({
-    content: content,
-    data: data,
-    locale: locale,
-});
-let allRegisteredComponents = [
-    ...getDefaultRegisteredComponents(),
-    // While this `components` object is deprecated, we must maintain support for it.
-    // Since users are able to override our default components, we need to make sure that we do not break such
-    // existing usage.
-    // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
-    // which is the new standard way of providing custom components, and must therefore take precedence.
-    ...components,
-    ...(customComponents || []),
-].reduce((acc, { component, ...curr }) => ({
-    ...acc,
-    [curr.name]: {
-        component: TARGET === "vue3" ? wrapComponentRef(component) : component,
-        ...curr,
-    },
-}), {});
 let httpReqsData = {};
 let clicked = false;
 let scriptStr = getRenderContentScriptString({
@@ -239,6 +216,39 @@ let scriptStr = getRenderContentScriptString({
     contentId: content?.id,
     parentContentId: parentContentId,
 });
+let builderContextSignal = writable({
+    content: getContentInitialValue({
+        content: content,
+        data: data,
+    }),
+    localState: undefined,
+    rootState: getContextStateInitialValue({
+        content: content,
+        data: data,
+        locale: locale,
+    }),
+    rootSetState: contentSetState,
+    context: context || {},
+    apiKey: apiKey,
+    apiVersion: apiVersion,
+    registeredComponents: [
+        ...getDefaultRegisteredComponents(),
+        // While this `components` object is deprecated, we must maintain support for it.
+        // Since users are able to override our default components, we need to make sure that we do not break such
+        // existing usage.
+        // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+        // which is the new standard way of providing custom components, and must therefore take precedence.
+        ...components,
+        ...(customComponents || []),
+    ].reduce((acc, { component, ...curr }) => ({
+        ...acc,
+        [curr.name]: {
+            component: TARGET === "vue3" ? wrapComponentRef(component) : component,
+            ...curr,
+        },
+    }), {}),
+    inheritedStyles: {},
+});
 onMount(() => {
     if (!apiKey) {
         logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
@@ -264,16 +274,16 @@ onMount(() => {
                     }
                     : {}),
             });
-            Object.values(allRegisteredComponents).forEach((registeredComponent) => {
+            Object.values($builderContextSignal.registeredComponents).forEach((registeredComponent) => {
                 const message = createRegisterComponentMessage(registeredComponent);
                 window.parent?.postMessage(message, "*");
             });
             window.addEventListener("message", processMessage);
             window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
         }
-        if (useContent) {
-            const variationId = useContent?.testVariationId;
-            const contentId = useContent?.id;
+        if ($builderContextSignal.content) {
+            const variationId = $builderContextSignal.content?.testVariationId;
+            const contentId = $builderContextSignal.content?.id;
             _track({
                 type: "impression",
                 canTrack: canTrackToUse,
@@ -316,53 +326,28 @@ onMount(() => {
         emitStateUpdate();
     }
 });
-function onUpdateFn_0() {
+function onUpdateFn_0(..._args) {
     if (content) {
         mergeNewContent(content);
     }
 }
 $: onUpdateFn_0(...[content]);
-function onUpdateFn_1() {
+function onUpdateFn_1(..._args) {
     evaluateJsCode();
 }
-$: onUpdateFn_1(...[useContent?.data?.jsCode, contentState]);
-function onUpdateFn_2() {
+$: onUpdateFn_1(...[
+    $builderContextSignal.content?.data?.jsCode,
+    $builderContextSignal.rootState,
+]);
+function onUpdateFn_2(..._args) {
     runHttpRequests();
 }
-$: onUpdateFn_2(...[useContent?.data?.httpRequests]);
-function onUpdateFn_3() {
+$: onUpdateFn_2(...[$builderContextSignal.content?.data?.httpRequests]);
+function onUpdateFn_3(..._args) {
     emitStateUpdate();
 }
-$: onUpdateFn_3(...[contentState]);
-setContext(builderContext.key, {
-    get content() {
-        return useContent;
-    },
-    get localState() {
-        return undefined;
-    },
-    get rootState() {
-        return contentState;
-    },
-    get rootSetState() {
-        return TARGET === "qwik" ? undefined : contentSetState;
-    },
-    get context() {
-        return context || {};
-    },
-    get apiKey() {
-        return apiKey;
-    },
-    get apiVersion() {
-        return apiVersion;
-    },
-    get registeredComponents() {
-        return allRegisteredComponents;
-    },
-    get inheritedStyles() {
-        return {};
-    },
-});
+$: onUpdateFn_3(...[$builderContextSignal.rootState]);
+setContext(builderContext.key, builderContextSignal);
 onDestroy(() => {
     if (isBrowser()) {
         window.removeEventListener("message", processMessage);
@@ -371,13 +356,13 @@ onDestroy(() => {
 });
 </script>
 
-{#if useContent}
+{#if $builderContextSignal.content}
   <div
     bind:this={elementRef}
     on:click={(event) => {
       onClick(event);
     }}
-    builder-content-id={useContent?.id}
+    builder-content-id={$builderContextSignal.content?.id}
     builder-model={model}
     {...filterAttrs(
       TARGET === "reactNative"
@@ -417,11 +402,14 @@ onDestroy(() => {
 
     {#if TARGET !== "reactNative"}
       <RenderContentStyles
-        contentId={useContent?.id}
-        cssCode={useContent?.data?.cssCode}
-        customFonts={useContent?.data?.customFonts}
+        contentId={$builderContextSignal.content?.id}
+        cssCode={$builderContextSignal.content?.data?.cssCode}
+        customFonts={$builderContextSignal.content?.data?.customFonts}
       />
     {/if}
-    <RenderBlocks blocks={useContent?.data?.blocks} key={forceReRenderCount} />
+    <RenderBlocks
+      blocks={$builderContextSignal.content?.data?.blocks}
+      key={forceReRenderCount}
+    />
   </div>
 {/if}