@builder.io/sdk-svelte 0.4.0 → 0.4.2

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onDestroy, onMount, setContext } from "svelte";
+  import { writable } from "svelte/store";
 
   import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
   import type {
@@ -74,49 +75,50 @@
     };
   };
 
-  export let content: RenderContentProps["content"];
-  export let data: RenderContentProps["data"];
   export let canTrack: RenderContentProps["canTrack"];
-  export let locale: RenderContentProps["locale"];
-  export let customComponents: RenderContentProps["customComponents"];
   export let model: RenderContentProps["model"];
   export let context: RenderContentProps["context"];
   export let apiKey: RenderContentProps["apiKey"];
+  export let content: RenderContentProps["content"];
   export let parentContentId: RenderContentProps["parentContentId"];
+  export let data: RenderContentProps["data"];
+  export let locale: RenderContentProps["locale"];
+  export let apiVersion: RenderContentProps["apiVersion"];
+  export let customComponents: RenderContentProps["customComponents"];
   export let hideContent: RenderContentProps["hideContent"];
   export let classNameProp: RenderContentProps["classNameProp"];
   export let isSsrAbTest: RenderContentProps["isSsrAbTest"];
   export let includeRefs: RenderContentProps["includeRefs"];
   export let enrich: RenderContentProps["enrich"];
-  export let apiVersion: RenderContentProps["apiVersion"];
 
   function mergeNewContent(newContent: BuilderContent) {
-    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,
+          newContent?.meta?.breakpoints ||
+          $builderContextSignal.content?.meta?.breakpoints,
       },
     };
   }
   function setBreakpoints(breakpoints: Breakpoints) {
-    useContent = {
-      ...useContent,
+    $builderContextSignal.content = {
+      ...$builderContextSignal.content,
       meta: {
-        ...useContent?.meta,
+        ...$builderContextSignal.content?.meta,
         breakpoints,
       },
     };
   }
   function contentSetState(newRootState: BuilderRenderState) {
-    contentState = newRootState;
+    $builderContextSignal.rootState = newRootState;
   }
   function processMessage(event: MessageEvent) {
     const { data } = event;
@@ -125,7 +127,7 @@
         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) {
@@ -158,21 +160,21 @@
   }
   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: any) {
-    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,
@@ -193,7 +195,7 @@
         code: group,
         context: context || {},
         localState: undefined,
-        rootState: contentState,
+        rootState: $builderContextSignal.rootState,
         rootSetState: contentSetState,
       })
     );
@@ -203,7 +205,7 @@
       .then((response) => response.json())
       .then((json) => {
         const newState = {
-          ...contentState,
+          ...$builderContextSignal.rootState,
           [key]: json,
         };
         contentSetState(newState);
@@ -215,7 +217,7 @@
   function runHttpRequests() {
     const requests: {
       [key: string]: string;
-    } = useContent?.data?.httpRequests ?? {};
+    } = $builderContextSignal.content?.data?.httpRequests ?? {};
     Object.entries(requests).forEach(([key, url]) => {
       if (url && (!httpReqsData[key] || isEditing())) {
         const evaluatedUrl = evalExpression(url);
@@ -233,7 +235,7 @@
           "builder:component:stateChange",
           {
             detail: {
-              state: contentState,
+              state: $builderContextSignal.rootState,
               ref: {
                 name: model,
               },
@@ -248,36 +250,8 @@
 
   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,
-      },
-    }),
-    {} as RegisteredComponents
-  );
   let httpReqsData = {};
   let clicked = false;
   let scriptStr = getRenderContentScriptString({
@@ -285,6 +259,43 @@
     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,
+        },
+      }),
+      {} as RegisteredComponents
+    ),
+    inheritedStyles: {},
+  });
 
   onMount(() => {
     if (!apiKey) {
@@ -313,21 +324,21 @@
               }
             : {}),
         });
-        Object.values<RegisteredComponent>(allRegisteredComponents).forEach(
-          (registeredComponent) => {
-            const message = createRegisterComponentMessage(registeredComponent);
-            window.parent?.postMessage(message, "*");
-          }
-        );
+        Object.values<RegisteredComponent>(
+          $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,
@@ -378,54 +389,31 @@
     }
   });
 
-  function onUpdateFn_0() {
+  function onUpdateFn_0(..._args: any[]) {
     if (content) {
       mergeNewContent(content);
     }
   }
   $: onUpdateFn_0(...[content]);
-  function onUpdateFn_1() {
+  function onUpdateFn_1(..._args: any[]) {
     evaluateJsCode();
   }
-  $: onUpdateFn_1(...[useContent?.data?.jsCode, contentState]);
-  function onUpdateFn_2() {
+  $: onUpdateFn_1(
+    ...[
+      $builderContextSignal.content?.data?.jsCode,
+      $builderContextSignal.rootState,
+    ]
+  );
+  function onUpdateFn_2(..._args: any[]) {
     runHttpRequests();
   }
-  $: onUpdateFn_2(...[useContent?.data?.httpRequests]);
-  function onUpdateFn_3() {
+  $: onUpdateFn_2(...[$builderContextSignal.content?.data?.httpRequests]);
+  function onUpdateFn_3(..._args: any[]) {
     emitStateUpdate();
   }
-  $: onUpdateFn_3(...[contentState]);
+  $: onUpdateFn_3(...[$builderContextSignal.rootState]);
 
-  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 {};
-    },
-  });
+  setContext(builderContext.key, builderContextSignal);
 
   onDestroy(() => {
     if (isBrowser()) {
@@ -438,13 +426,13 @@
   });
 </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"
@@ -484,11 +472,14 @@
 
     {#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}

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "0.4.0"
+export const SDK_VERSION = "0.4.2"

package/src/context/builder.context.ts

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

package/src/functions/get-builder-search-params/index.ts

@@ -14,6 +14,12 @@ export const convertSearchParamsToQueryObject = (
   return options;
 };
 
+/**
+ * Receives a `URLSearchParams` object or a regular query object, and returns the subset of query params that are
+ * relevant to the Builder SDK.
+ *
+ * @returns
+ */
 export const getBuilderSearchParams = (
   _options: QueryObject | URLSearchParams | undefined
 ) => {

package/src/index.ts

@@ -17,6 +17,8 @@ export {
   processContentResult,
 } from './functions/get-content/index.js';
 
+export { getBuilderSearchParams } from './functions/get-builder-search-params/index.js';
+
 export { track } from './functions/track/index.js';
 
 export type { RegisteredComponent } from './context/types';