@builder.io/sdk-svelte 0.4.4 → 0.5.0

package/src/components/{render-blocks.svelte → blocks/blocks-wrapper.svelte}

@@ -1,25 +1,21 @@
 <script context="module" lang="ts">
-  export type RenderBlockProps = {
-    blocks?: BuilderBlock[];
-    parent?: string;
-    path?: string;
-    styleProp?: Record<string, any>;
+  export type BlocksWrapperProps = {
+    blocks: BuilderBlock[] | undefined;
+    parent: string | undefined;
+    path: string | undefined;
+    styleProp: Record<string, any> | undefined;
   };
 </script>
 
 <script lang="ts">
-  import { getContext } from "svelte";
+  import { isEditing } from "../../functions/is-editing.js";
+  import type { BuilderBlock } from "../../types/builder-block.js";
+  import type { PropsWithChildren } from "../../types/typescript.js";
 
-  import BuilderContext from "../context/builder.context.js";
-  import { isEditing } from "../functions/is-editing.js";
-  import type { BuilderBlock } from "../types/builder-block.js";
-  import BlockStyles from "./render-block/block-styles.svelte";
-  import RenderBlock from "./render-block/render-block.svelte";
-
-  export let blocks: RenderBlockProps["blocks"];
-  export let parent: RenderBlockProps["parent"];
-  export let path: RenderBlockProps["path"];
-  export let styleProp: RenderBlockProps["styleProp"];
+  export let blocks: PropsWithChildren<BlocksWrapperProps>["blocks"];
+  export let parent: PropsWithChildren<BlocksWrapperProps>["parent"];
+  export let path: PropsWithChildren<BlocksWrapperProps>["path"];
+  export let styleProp: PropsWithChildren<BlocksWrapperProps>["styleProp"];
 
   function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {
@@ -31,8 +27,6 @@
     });
   }
 
-  let builderContext = getContext(BuilderContext.key);
-
   function onClick() {
     if (isEditing() && !blocks?.length) {
       window.parent?.postMessage(
@@ -71,9 +65,7 @@
   class={className() + " div"}
   builder-path={path}
   builder-parent-id={parent}
-  dataSet={{
-    class: className(),
-  }}
+  {...{}}
   on:click={(event) => {
     onClick();
   }}
@@ -84,17 +76,7 @@
     onClick();
   }}
 >
-  {#if blocks}
-    {#each blocks as block ("render-block-" + block.id)}
-      <RenderBlock {block} context={builderContext} />
-    {/each}
-  {/if}
-
-  {#if blocks}
-    {#each blocks as block ("block-style-" + block.id)}
-      <BlockStyles {block} context={$builderContext} />
-    {/each}
-  {/if}
+  <slot />
 </div>
 
 <style>

package/src/components/blocks/blocks.svelte

@@ -0,0 +1,39 @@
+<script context="module" lang="ts">
+  export type BlocksProps = Partial<BlocksWrapperProps> & {
+    context: Writable<BuilderContextInterface>;
+    registeredComponents: RegisteredComponents;
+  };
+</script>
+
+<script lang="ts">
+  import BlockStyles from "../block/components/block-styles.svelte";
+  import Block from "../block/block.svelte";
+  import type { BlocksWrapperProps } from "./blocks-wrapper.svelte";
+  import BlocksWrapper from "./blocks-wrapper.svelte";
+  import type {
+    BuilderContextInterface,
+    RegisteredComponents,
+  } from "../../context/types.js";
+  import type { Writable } from "svelte/store";
+
+  export let blocks: BlocksProps["blocks"];
+  export let parent: BlocksProps["parent"];
+  export let path: BlocksProps["path"];
+  export let styleProp: BlocksProps["styleProp"];
+  export let context: BlocksProps["context"];
+  export let registeredComponents: BlocksProps["registeredComponents"];
+</script>
+
+<BlocksWrapper {blocks} {parent} {path} {styleProp}>
+  {#if blocks}
+    {#each blocks as block ("render-block-" + block.id)}
+      <Block {block} {context} {registeredComponents} />
+    {/each}
+  {/if}
+
+  {#if blocks}
+    {#each blocks as block ("block-style-" + block.id)}
+      <BlockStyles {block} context={$context} />
+    {/each}
+  {/if}
+</BlocksWrapper>

package/src/components/{render-content/render-content.svelte → content/components/enable-editor.svelte}

@@ -1,98 +1,58 @@
+<script context="module" lang="ts">
+  type BuilderEditorProps = Omit<
+    ContentProps,
+    "customComponents" | "data" | "apiVersion" | "isSsrAbTest"
+  > & {
+    builderContextSignal: Writable<BuilderContextInterface>;
+    setBuilderContextSignal?: (signal: any) => any;
+    children?: any;
+  };
+</script>
+
 <script lang="ts">
   import { onDestroy, onMount, setContext } from "svelte";
-  import { writable } from "svelte/store";
 
-  import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
-  import type {
-    BuilderRenderState,
-    RegisteredComponent,
-    RegisteredComponents,
-  } from "../../context/types.js";
-  import { evaluate } from "../../functions/evaluate.js";
-  import { getContent } from "../../functions/get-content/index.js";
-  import { fetch } from "../../functions/get-fetch.js";
-  import { isBrowser } from "../../functions/is-browser.js";
-  import { isEditing } from "../../functions/is-editing.js";
-  import { isPreviewing } from "../../functions/is-previewing.js";
-  import {
-    components,
-    createRegisterComponentMessage,
-  } from "../../functions/register-component.js";
-  import { _track } from "../../functions/track/index.js";
-  import type {
-    Breakpoints,
-    BuilderContent,
-  } from "../../types/builder-content.js";
-  import type { Nullable } from "../../types/typescript.js";
-  import RenderBlocks from "../render-blocks.svelte";
-  import RenderContentStyles from "./components/render-styles.svelte";
-  import builderContext from "../../context/builder.context.js";
+  import type { BuilderContextInterface } from "../../../context/types.js";
+  import { evaluate } from "../../../functions/evaluate";
+  import { fetch } from "../../../functions/get-fetch.js";
+  import { isBrowser } from "../../../functions/is-browser.js";
+  import { isEditing } from "../../../functions/is-editing.js";
+  import { createRegisterComponentMessage } from "../../../functions/register-component.js";
+  import { _track } from "../../../functions/track/index.js";
+  import builderContext from "../../../context/builder.context";
   import {
     registerInsertMenu,
     setupBrowserForEditing,
-  } from "../../scripts/init-editing.js";
-  import { checkIsDefined } from "../../helpers/nullable.js";
-  import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
+  } from "../../../scripts/init-editing.js";
+  import { checkIsDefined } from "../../../helpers/nullable.js";
+  import { getInteractionPropertiesForEvent } from "../../../functions/track/interaction.js";
   import type {
-    RenderContentProps,
+    ContentProps,
     BuilderComponentStateChange,
-  } from "./render-content.types.js";
-  import {
-    getContentInitialValue,
-    getContextStateInitialValue,
-  } from "./render-content.helpers.js";
-  import { TARGET } from "../../constants/target.js";
-  import { logger } from "../../helpers/logger.js";
-  import { getRenderContentScriptString } from "../render-content-variants/helpers.js";
-  import { wrapComponentRef } from "./wrap-component-ref.js";
+  } from "../content.types.js";
+  import { logger } from "../../../helpers/logger.js";
+  import type { ComponentInfo } from "../../../types/components.js";
+  import { getContent } from "../../../functions/get-content/index.js";
+  import { isPreviewing } from "../../../functions/is-previewing.js";
+  import type { BuilderContent } from "../../../types/builder-content.js";
+  import { postPreviewContent } from "../../../helpers/preview-lru-cache/set.js";
+  import type { Writable } from "svelte/store";
 
-  const isEvent = (attr) => attr.startsWith("on:");
-  const isNonEvent = (attr) => !attr.startsWith("on:");
-  const filterAttrs = (attrs = {}, filter) => {
-    const validAttr = {};
-    Object.keys(attrs).forEach((attr) => {
-      if (filter(attr)) {
-        validAttr[attr] = attrs[attr];
-      }
-    });
-    return validAttr;
-  };
-  const setAttrs = (node, attrs = {}) => {
-    const attrKeys = Object.keys(attrs);
-    const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
-    const teardown = (attr) =>
-      node.removeEventListener(attr.substr(3), attrs[attr]);
-    attrKeys.map(setup);
-    return {
-      update(attrs = {}) {
-        const attrKeys = Object.keys(attrs);
-        attrKeys.map(teardown);
-        attrKeys.map(setup);
-      },
-      destroy() {
-        attrKeys.map(teardown);
-      },
-    };
-  };
+  export let canTrack: BuilderEditorProps["canTrack"];
+  export let builderContextSignal: BuilderEditorProps["builderContextSignal"];
+  export let model: BuilderEditorProps["model"];
+  export let context: BuilderEditorProps["context"];
+  export let apiKey: BuilderEditorProps["apiKey"];
+  export let showContent: BuilderEditorProps["showContent"];
+  export let classNameProp: BuilderEditorProps["classNameProp"];
 
-  export let canTrack: RenderContentProps["canTrack"];
-  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 content: BuilderEditorProps["content"];
+  export let locale: BuilderEditorProps["locale"];
+  export let includeRefs: BuilderEditorProps["includeRefs"];
+  export let enrich: BuilderEditorProps["enrich"];
 
   function mergeNewContent(newContent: BuilderContent) {
-    $builderContextSignal.content = {
+    const newContentValue = {
       ...$builderContextSignal.content,
       ...newContent,
       data: {
@@ -107,18 +67,7 @@
           $builderContextSignal.content?.meta?.breakpoints,
       },
     };
-  }
-  function setBreakpoints(breakpoints: Breakpoints) {
-    $builderContextSignal.content = {
-      ...$builderContextSignal.content,
-      meta: {
-        ...$builderContextSignal.content?.meta,
-        breakpoints,
-      },
-    };
-  }
-  function contentSetState(newRootState: BuilderRenderState) {
-    $builderContextSignal.rootState = newRootState;
+    $builderContextSignal.content = newContentValue;
   }
   function processMessage(event: MessageEvent) {
     const { data } = event;
@@ -131,7 +80,11 @@
             return;
           }
           if (breakpoints) {
-            setBreakpoints(breakpoints);
+            mergeNewContent({
+              meta: {
+                breakpoints,
+              },
+            });
           }
           forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
           break;
@@ -151,10 +104,6 @@
 
           break;
         }
-        case "builder.patchUpdates": {
-          // TODO
-          break;
-        }
       }
     }
   }
@@ -167,7 +116,7 @@
         context: context || {},
         localState: undefined,
         rootState: $builderContextSignal.rootState,
-        rootSetState: contentSetState,
+        rootSetState: $builderContextSignal.rootSetState,
       });
     }
   }
@@ -196,7 +145,7 @@
         context: context || {},
         localState: undefined,
         rootState: $builderContextSignal.rootState,
-        rootSetState: contentSetState,
+        rootSetState: $builderContextSignal.rootSetState,
       })
     );
   }
@@ -208,7 +157,8 @@
           ...$builderContextSignal.rootState,
           [key]: json,
         };
-        contentSetState(newState);
+        $builderContextSignal.rootSetState?.(newState);
+        httpReqsData[key] = true;
       })
       .catch((err) => {
         console.error("error fetching dynamic data", url, err);
@@ -248,54 +198,12 @@
 
   let elementRef;
 
-  let forceReRenderCount = 0;
-  let overrideContent = null;
-  let update = 0;
   let canTrackToUse = checkIsDefined(canTrack) ? canTrack : true;
+  let forceReRenderCount = 0;
+  let lastUpdated = 0;
+  let shouldSendResetCookie = false;
   let httpReqsData = {};
   let clicked = false;
-  let scriptStr = getRenderContentScriptString({
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
-    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) {
@@ -306,6 +214,7 @@
     if (isBrowser()) {
       if (isEditing()) {
         forceReRenderCount = forceReRenderCount + 1;
+        window.addEventListener("message", processMessage);
         registerInsertMenu();
         setupBrowserForEditing({
           ...(locale
@@ -324,13 +233,12 @@
               }
             : {}),
         });
-        Object.values<RegisteredComponent>(
-          $builderContextSignal.registeredComponents
+        Object.values<ComponentInfo>(
+          $builderContextSignal.componentInfos
         ).forEach((registeredComponent) => {
           const message = createRegisterComponentMessage(registeredComponent);
           window.parent?.postMessage(message, "*");
         });
-        window.addEventListener("message", processMessage);
         window.addEventListener(
           "builder:component:stateChangeListenerActivated",
           emitStateUpdate
@@ -347,7 +255,6 @@
           variationId: variationId !== contentId ? variationId : undefined,
         });
       }
-
       // override normal content in preview mode
       if (isPreviewing()) {
         const searchParams = new URL(location.href).searchParams;
@@ -375,7 +282,7 @@
           getContent({
             model: model,
             apiKey: apiKey,
-            apiVersion: apiVersion,
+            apiVersion: $builderContextSignal.apiVersion,
           }).then((content) => {
             if (content) {
               mergeNewContent(content);
@@ -395,23 +302,25 @@
     }
   }
   $: onUpdateFn_0(...[content]);
-  function onUpdateFn_1(..._args: any[]) {
+  function onUpdateFn_1(..._args: any[]) {}
+  $: onUpdateFn_1(...[shouldSendResetCookie]);
+  function onUpdateFn_2(..._args: any[]) {
     evaluateJsCode();
   }
-  $: onUpdateFn_1(
+  $: onUpdateFn_2(
     ...[
       $builderContextSignal.content?.data?.jsCode,
       $builderContextSignal.rootState,
     ]
   );
-  function onUpdateFn_2(..._args: any[]) {
+  function onUpdateFn_3(..._args: any[]) {
     runHttpRequests();
   }
-  $: onUpdateFn_2(...[$builderContextSignal.content?.data?.httpRequests]);
-  function onUpdateFn_3(..._args: any[]) {
+  $: onUpdateFn_3(...[$builderContextSignal.content?.data?.httpRequests]);
+  function onUpdateFn_4(..._args: any[]) {
     emitStateUpdate();
   }
-  $: onUpdateFn_3(...[$builderContextSignal.rootState]);
+  $: onUpdateFn_4(...[$builderContextSignal.rootState]);
 
   setContext(builderContext.key, builderContextSignal);
 
@@ -428,58 +337,22 @@
 
 {#if $builderContextSignal.content}
   <div
+    key={forceReRenderCount}
     bind:this={elementRef}
     on:click={(event) => {
       onClick(event);
     }}
     builder-content-id={$builderContextSignal.content?.id}
     builder-model={model}
-    {...filterAttrs(
-      TARGET === "reactNative"
-        ? {
-            dataSet: {
-              // currently, we can't set the actual ID here.
-              // we don't need it right now, we just need to identify content divs for testing.
-              "builder-content-id": "",
-            },
-          }
-        : {},
-      isNonEvent
-    )}
-    {...hideContent
-      ? {
+    {...{}}
+    {...showContent
+      ? {}
+      : {
           hidden: true,
           "aria-hidden": true,
-        }
-      : {}}
+        }}
     class={classNameProp}
-    use:setAttrs={filterAttrs(
-      TARGET === "reactNative"
-        ? {
-            dataSet: {
-              // currently, we can't set the actual ID here.
-              // we don't need it right now, we just need to identify content divs for testing.
-              "builder-content-id": "",
-            },
-          }
-        : {},
-      isEvent
-    )}
   >
-    {#if isSsrAbTest}
-      <svelte:element this={"script"}>{@html scriptStr}</svelte:element>
-    {/if}
-
-    {#if TARGET !== "reactNative"}
-      <RenderContentStyles
-        contentId={$builderContextSignal.content?.id}
-        cssCode={$builderContextSignal.content?.data?.cssCode}
-        customFonts={$builderContextSignal.content?.data?.customFonts}
-      />
-    {/if}
-    <RenderBlocks
-      blocks={$builderContextSignal.content?.data?.blocks}
-      key={forceReRenderCount}
-    />
+    <slot />
   </div>
 {/if}

package/src/components/{render-content/components/render-styles.helpers.ts → content/components/styles.helpers.ts}

@@ -6,12 +6,9 @@ export interface CustomFont {
     [key: string]: string;
   };
 }
-
 const getCssFromFont = (font: CustomFont) => {
   // TODO: compute what font sizes are used and only load those.......
-  const family =
-    font.family +
-    (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
+  const family = font.family + (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
   const name = family.split(',')[0];
   const url = font.fileUrl ?? font?.files?.regular;
   let str = '';
@@ -25,7 +22,6 @@ font-weight: 400;
 }
       `.trim();
   }
-
   if (font.files) {
     for (const weight in font.files) {
       const isNumber = String(Number(weight)) === weight;
@@ -48,19 +44,21 @@ font-weight: ${weight};
   }
   return str;
 };
-
-export const getFontCss = ({ customFonts }: { customFonts?: CustomFont[] }) => {
+export const getFontCss = ({
+  customFonts
+}: {
+  customFonts?: CustomFont[];
+}) => {
   // TODO: flag for this
   // if (!this.builder.allowCustomFonts) {
   //   return '';
   // }
   // TODO: separate internal data from external
-  return customFonts?.map((font) => getCssFromFont(font))?.join(' ') || '';
+  return customFonts?.map(font => getCssFromFont(font))?.join(' ') || '';
 };
-
 export const getCss = ({
   cssCode,
-  contentId,
+  contentId
 }: {
   cssCode?: string;
   contentId?: string;
@@ -76,4 +74,4 @@ export const getCss = ({
   // E.g. `& .foobar { ... }` to scope CSS
   // TODO: handle if '&' is within a string like `content: "&"`
   return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || '';
-};
+}

package/src/components/{render-content/components/render-styles.svelte → content/components/styles.svelte}

@@ -7,10 +7,10 @@
 </script>
 
 <script lang="ts">
-  import RenderInlinedStyles from "../../render-inlined-styles.svelte";
-  import type { CustomFont } from "./render-styles.helpers";
-  import { getCss } from "./render-styles.helpers";
-  import { getFontCss } from "./render-styles.helpers";
+  import InlinedStyles from "../../inlined-styles.svelte";
+  import type { CustomFont } from "./styles.helpers.js";
+  import { getCss } from "./styles.helpers.js";
+  import { getFontCss } from "./styles.helpers.js";
 
   export let cssCode: Props["cssCode"];
   export let contentId: Props["contentId"];
@@ -40,4 +40,4 @@ ${getFontCss({
 `.trim();
 </script>
 
-<RenderInlinedStyles styles={injectedStyles} />
+<InlinedStyles styles={injectedStyles} />

package/src/components/content/content.helpers.ts

@@ -0,0 +1,42 @@
+import type { BuilderRenderState } from '../../context/types.js';
+import type { BuilderContent } from '../../types/builder-content.js';
+import type { Nullable } from '../../types/typescript.js';
+import type { ContentProps } from './content.types.js';
+export const getContextStateInitialValue = ({
+  content,
+  data,
+  locale
+}: Pick<ContentProps, 'content' | 'data' | 'locale'>) => {
+  const defaultValues: BuilderRenderState = {};
+
+  // set default values for content state inputs
+  content?.data?.inputs?.forEach(input => {
+    if (input.name && input.defaultValue !== undefined && content?.data?.state && content.data.state[input.name] === undefined) {
+      defaultValues[input.name] = input.defaultValue;
+    }
+  });
+  const stateToUse: BuilderRenderState = {
+    ...content?.data?.state,
+    ...data,
+    ...(locale ? {
+      locale
+    } : {})
+  };
+  return {
+    ...defaultValues,
+    ...stateToUse
+  };
+};
+export const getContentInitialValue = ({
+  content,
+  data
+}: Pick<ContentProps, 'content' | 'data'>): Nullable<BuilderContent> => {
+  return !content ? undefined : {
+    ...content,
+    data: {
+      ...content?.data,
+      ...data
+    },
+    meta: content?.meta
+  };
+}