@builder.io/sdk-svelte 0.1.1 → 0.1.3-0

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

@@ -1,17 +1,10 @@
 <script context="module" lang="ts">
-  import type {
-    BuilderContextInterface,
-    RegisteredComponent,
-  } from "../../context/types.js";
+  import type { BuilderContextInterface } from "../../context/types.js";
 
   import type { BuilderBlock } from "../../types/builder-block.js";
 
-  import type { Nullable } from "../../types/typescript.js";
-
   import type { RenderComponentProps } from "./render-component";
 
-  import type { RepeatData } from "./types.js";
-
   export type RenderBlockProps = {
     block: BuilderBlock;
     context: BuilderContextInterface;
@@ -24,25 +17,24 @@
   import { getBlockProperties } from "../../functions/get-block-properties.js";
   import { getBlockTag } from "../../functions/get-block-tag.js";
   import { getProcessedBlock } from "../../functions/get-processed-block.js";
-  import { evaluate } from "../../functions/evaluate.js";
   import BlockStyles from "./block-styles.svelte";
-  import { isEmptyHtmlElement } from "./render-block.helpers.js";
+  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 RenderComponentWithContext from "./render-component-with-context.svelte";
   import RenderComponent from "./render-component.svelte";
   import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
 
   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);
@@ -58,32 +50,11 @@
   export let block: RenderBlockProps["block"];
   export let context: RenderBlockProps["context"];
 
-  $: component = () => {
-    const componentName = getProcessedBlock({
-      block: block,
-      state: context.state,
-      context: context.context,
-      shouldEvaluateBindings: false,
-    }).component?.name;
-    if (!componentName) {
-      return null;
-    }
-    const ref = context.registeredComponents[componentName];
-    if (!ref) {
-      // TODO: Public doc page with more info about this message
-      console.warn(`
-        Could not find a registered component named "${componentName}". 
-        If you registered it, is the file that registered it imported by the file that needs to render it?`);
-      return undefined;
-    } else {
-      return ref;
-    }
-  };
   $: tag = () => {
     return getBlockTag(useBlock());
   };
   $: useBlock = () => {
-    return repeatItemData()
+    return repeatItemData
       ? block
       : getProcessedBlock({
           block: block,
@@ -114,20 +85,17 @@
         : {}),
     };
   };
-  $: shouldWrap = () => {
-    return !component?.()?.noWrap;
-  };
   $: renderComponentProps = () => {
     return {
-      blockChildren: useChildren(),
-      componentRef: component?.()?.component,
+      blockChildren: useBlock().children ?? [],
+      componentRef: component?.component,
       componentOptions: {
         ...getBlockComponentOptions(useBlock()),
         /**
          * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
          * they are provided to the component itself directly.
          */
-        ...(shouldWrap()
+        ...(!component?.noWrap
           ? {}
           : {
               attributes: {
@@ -140,13 +108,6 @@
       context: childrenContext(),
     };
   };
-  $: useChildren = () => {
-    // TO-DO: When should `canHaveChildren` dictate rendering?
-    // This is currently commented out because some Builder components (e.g. Box) do not have `canHaveChildren: true`,
-    // but still receive and need to render children.
-    // return componentInfo?.canHaveChildren ? useBlock().children : [];
-    return useBlock().children ?? [];
-  };
   $: childrenWithoutParentComponent = () => {
     /**
      * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
@@ -155,94 +116,56 @@
      * blocks, and the children will be repeated within those blocks.
      */
     const shouldRenderChildrenOutsideRef =
-      !component?.()?.component && !repeatItemData();
-    return shouldRenderChildrenOutsideRef ? useChildren() : [];
-  };
-  $: repeatItemData = () => {
-    /**
-     * we don't use `useBlock()` here because the processing done within its logic includes evaluating the block's bindings,
-     * which will not work if there is a repeat.
-     */
-    const { repeat, ...blockWithoutRepeat } = block;
-    if (!repeat?.collection) {
-      return undefined;
-    }
-    const itemsArray = evaluate({
-      code: repeat.collection,
-      state: context.state,
-      context: context.context,
-    });
-    if (!Array.isArray(itemsArray)) {
-      return undefined;
-    }
-    const collectionName = repeat.collection.split(".").pop();
-    const itemNameToUse =
-      repeat.itemName || (collectionName ? collectionName + "Item" : "item");
-    const repeatArray = itemsArray.map((item, index) => ({
-      context: {
-        ...context,
-        state: {
-          ...context.state,
-          $index: index,
-          $item: item,
-          [itemNameToUse]: item,
-          [`$${itemNameToUse}Index`]: index,
-        },
-      },
-      block: blockWithoutRepeat,
-    }));
-    return repeatArray;
-  };
-  $: inheritedTextStyles = () => {
-    if (TARGET !== "reactNative") {
-      return {};
-    }
-    const styles = getReactNativeBlockStyles({
-      block: useBlock(),
-      context: context,
-      blockStyles: attributes().style,
-    });
-    return extractTextStyles(styles);
+      !component?.component && !repeatItemData;
+    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,
       state: context.state,
       content: context.content,
       context: context.context,
       registeredComponents: context.registeredComponents,
-      inheritedStyles: inheritedTextStyles(),
+      inheritedStyles: getInheritedTextStyles(),
     };
   };
-  $: renderComponentTag = () => {
-    if (TARGET === "reactNative") {
-      return RenderComponentWithContext;
-    } else if (TARGET === "vue3") {
-      // vue3 expects a string for the component tag
-      return "RenderComponent";
-    } else {
-      return RenderComponent;
-    }
-  };
+
+  let component = getComponent({
+    block: block,
+    context: context,
+  });
+  let repeatItemData = getRepeatItemData({
+    block: block,
+    context: context,
+  });
 </script>
 
-{#if shouldWrap()}
+{#if !component?.noWrap}
   {#if isEmptyHtmlElement(tag())}
     <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()} />
   {/if}
 
-  {#if !isEmptyHtmlElement(tag()) && repeatItemData()}
-    {#each repeatItemData() as data, index (index)}
+  {#if !isEmptyHtmlElement(tag()) && repeatItemData}
+    {#each repeatItemData as data, index (index)}
       <RenderRepeatedBlock repeatContext={data.context} block={data.block} />
     {/each}
   {/if}
 
-  {#if !isEmptyHtmlElement(tag()) && !repeatItemData()}
+  {#if !isEmptyHtmlElement(tag()) && !repeatItemData}
     <svelte:element this={tag()} {...attributes()} use:setAttrs={actions()}>
-      <svelte:component
-        this={renderComponentTag()}
-        {...renderComponentProps()}
-      />
+      <RenderComponent {...renderComponentProps()} />
 
       {#each childrenWithoutParentComponent() as child ("render-block-" + child.id)}
         <svelte:self block={child} context={childrenContext()} />
@@ -254,5 +177,5 @@
     </svelte:element>
   {/if}
 {:else}
-  <svelte:component this={renderComponentTag()} {...renderComponentProps()} />
-{/if}
+  <RenderComponent {...renderComponentProps()} />
+{/if}

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

@@ -34,4 +34,4 @@
       <BlockStyles block={child} {context} />
     {/each}
   </svelte:component>
-{/if}
+{/if}

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

@@ -20,7 +20,7 @@
 </script>
 
 <script lang="ts">
-  import { getContext, setContext } from "svelte";
+  import { setContext } from "svelte";
 
   import BuilderContext from "../../context/builder.context.js";
   import RenderBlock from "./render-block.svelte";
@@ -29,25 +29,13 @@
   export let repeatContext: Props["repeatContext"];
 
   setContext(BuilderContext.key, {
-    get content() {
-      return repeatContext.content;
-    },
-    get state() {
-      return repeatContext.state;
-    },
-    get context() {
-      return repeatContext.context;
-    },
-    get apiKey() {
-      return repeatContext.apiKey;
-    },
-    get registeredComponents() {
-      return repeatContext.registeredComponents;
-    },
-    get inheritedStyles() {
-      return repeatContext.inheritedStyles;
-    },
+    content: repeatContext.content,
+    state: repeatContext.state,
+    context: repeatContext.context,
+    apiKey: repeatContext.apiKey,
+    registeredComponents: repeatContext.registeredComponents,
+    inheritedStyles: repeatContext.inheritedStyles,
   });
 </script>
 
-<RenderBlock {block} context={repeatContext} />
+<RenderBlock {block} context={repeatContext} />

package/src/components/render-blocks.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <script lang="ts">
-  import { getContext, setContext } from "svelte";
+  import { getContext } from "svelte";
 
   import BuilderContext from "../context/builder.context.js";
   import { isEditing } from "../functions/is-editing.js";
@@ -101,4 +101,4 @@
     flex-direction: column;
     align-items: stretch;
   }
-</style>
+</style>

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

@@ -1,4 +1,4 @@
 <script lang="ts">
 </script>
 
-<div />
+<div />

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

@@ -62,11 +62,13 @@
   }
   function getFontCss({ customFonts }) {
     // TODO: flag for this
-    // if (!builder.allowCustomFonts) {
+    // if (!this.builder.allowCustomFonts) {
     //   return '';
     // }
     // TODO: separate internal data from external
-    return customFonts?.map((font) => getCssFromFont(font))?.join(" ") || "";
+    return (
+      customFonts?.map((font) => this.getCssFromFont(font))?.join(" ") || ""
+    );
   }
   $: injectedStyles = () => {
     return `
@@ -77,4 +79,4 @@ ${getFontCss({
   };
 </script>
 
-<RenderInlinedStyles styles={injectedStyles()} />
+<RenderInlinedStyles styles={injectedStyles()} />

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

@@ -11,7 +11,7 @@
     BuilderContent,
   } from "../../types/builder-content.js";
 
-  import type { Dictionary, Nullable } from "../../types/typescript.js";
+  import type { Nullable } from "../../types/typescript.js";
 
   export type RenderContentProps = {
     content?: Nullable<BuilderContent>;
@@ -41,13 +41,7 @@
 </script>
 
 <script lang="ts">
-  import {
-    afterUpdate,
-    getContext,
-    onDestroy,
-    onMount,
-    setContext,
-  } from "svelte";
+  import { onDestroy, onMount, setContext } from "svelte";
 
   import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
   import { TARGET } from "../../constants/target.js";
@@ -61,14 +55,15 @@
     components,
     createRegisterComponentMessage,
   } from "../../functions/register-component.js";
-  import { _track } from "../../functions/track.js";
+  import { _track } from "../../functions/track/index.js";
   import RenderBlocks from "../render-blocks.svelte";
   import RenderContentStyles from "./components/render-styles.svelte";
-  import BuilderContext from "../../context/builder.context.js";
+  import builderContext from "../../context/builder.context.js";
   import {
     registerInsertMenu,
     setupBrowserForEditing,
   } from "../../scripts/init-editing.js";
+  import { checkIsDefined } from "../../helpers/nullable.js";
 
   export let content: RenderContentProps["content"];
   export let data: RenderContentProps["data"];
@@ -80,7 +75,7 @@
   export let apiKey: RenderContentProps["apiKey"];
   export let includeRefs: RenderContentProps["includeRefs"];
 
-  setContext(BuilderContext.key, {
+  setContext(builderContext.key, {
     get content() {
       return useContent();
     },
@@ -88,13 +83,13 @@
       return contentState();
     },
     get context() {
-      return contextContext();
+      return contextContext;
     },
     get apiKey() {
       return apiKey;
     },
     get registeredComponents() {
-      return allRegisteredComponents();
+      return allRegisteredComponents;
     },
   });
 
@@ -140,7 +135,7 @@
     if (jsCode) {
       evaluate({
         code: jsCode,
-        context: contextContext(),
+        context: contextContext,
         state: contentState(),
       });
     }
@@ -151,7 +146,7 @@
       const contentId = useContent?.()?.id;
       _track({
         type: "click",
-        canTrack: canTrackToUse(),
+        canTrack: canTrackToUse,
         contentId,
         apiKey: apiKey,
         variationId: variationId !== contentId ? variationId : undefined,
@@ -162,7 +157,7 @@
     return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
       evaluate({
         code: group,
-        context: contextContext(),
+        context: contextContext,
         state: contentState(),
       })
     );
@@ -184,7 +179,7 @@
   function runHttpRequests() {
     const requests = useContent?.()?.data?.httpRequests ?? {};
     Object.entries(requests).forEach(([key, url]) => {
-      if (url && (!httpReqsData()[key] || isEditing())) {
+      if (url && (!httpReqsData[key] || isEditing())) {
         const evaluatedUrl = evalExpression(url);
         handleRequest({
           url: evaluatedUrl,
@@ -211,7 +206,7 @@
     if (!content && !overrideContent) {
       return undefined;
     }
-    const mergedContent = {
+    return {
       ...content,
       ...overrideContent,
       data: {
@@ -228,10 +223,6 @@
           content?.meta?.breakpoints,
       },
     };
-    return mergedContent;
-  };
-  $: canTrackToUse = () => {
-    return canTrack || true;
   };
   $: contentState = () => {
     return {
@@ -245,32 +236,6 @@
       ...overrideState,
     };
   };
-  $: contextContext = () => {
-    return context || {};
-  };
-  $: allRegisteredComponents = () => {
-    const allComponentsArray = [
-      ...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 `customComponents`,
-      // which is the new standard way of providing custom components, and must therefore take precedence.
-      ...components,
-      ...(customComponents || []),
-    ];
-    const allComponents = allComponentsArray.reduce(
-      (acc, curr) => ({
-        ...acc,
-        [curr.name]: curr,
-      }),
-      {}
-    );
-    return allComponents;
-  };
-  $: httpReqsData = () => {
-    return {};
-  };
   $: shouldRenderContentStyles = () => {
     return Boolean(
       (useContent?.()?.data?.cssCode ||
@@ -285,7 +250,26 @@
   let overrideContent = null;
   let update = 0;
   let useBreakpoints = null;
+  let canTrackToUse = checkIsDefined(canTrack) ? canTrack : true;
   let overrideState = {};
+  let contextContext = context || {};
+  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, curr) => ({
+      ...acc,
+      [curr.name]: curr,
+    }),
+    {}
+  );
+  let httpReqsData = {};
 
   onMount(() => {
     if (!apiKey) {
@@ -309,7 +293,7 @@
               }
             : {}),
         });
-        Object.values(allRegisteredComponents()).forEach(
+        Object.values(allRegisteredComponents).forEach(
           (registeredComponent) => {
             const message = createRegisterComponentMessage(registeredComponent);
             window.parent?.postMessage(message, "*");
@@ -326,7 +310,7 @@
         const contentId = useContent?.()?.id;
         _track({
           type: "impression",
-          canTrack: canTrackToUse(),
+          canTrack: canTrackToUse,
           contentId,
           apiKey: apiKey,
           variationId: variationId !== contentId ? variationId : undefined,
@@ -336,19 +320,30 @@
       // override normal content in preview mode
       if (isPreviewing()) {
         const searchParams = new URL(location.href).searchParams;
-        if (model && searchParams.get("builder.preview") === model) {
-          const previewApiKey =
-            searchParams.get("apiKey") || searchParams.get("builder.space");
-          if (previewApiKey) {
-            getContent({
-              model: model,
-              apiKey: previewApiKey,
-            }).then((content) => {
-              if (content) {
-                overrideContent = content;
-              }
-            });
-          }
+        const searchParamPreview = searchParams.get("builder.preview");
+        const previewApiKey =
+          searchParams.get("apiKey") || searchParams.get("builder.space");
+
+        /**
+         * Make sure that:
+         * - the preview model name is the same as the one we're rendering, since there can be multiple models rendered
+         *  at the same time, e.g. header/page/footer.
+         * - the API key is the same, since we don't want to preview content from other organizations.
+         *
+         * TO-DO: should we check that the preview item ID is the same as the initial one being rendered? Or would
+         * this break scenarios where the item is not published yet?
+         *
+         * TO-DO: should we only update the state when there is a change?
+         **/
+        if (searchParamPreview === model && previewApiKey === apiKey) {
+          getContent({
+            model: model,
+            apiKey: apiKey,
+          }).then((content) => {
+            if (content) {
+              overrideContent = content;
+            }
+          });
         }
       }
       evaluateJsCode();
@@ -401,4 +396,4 @@
       key={forceReRenderCount}
     />
   </div>
-{/if}
+{/if}

package/src/components/render-inlined-styles.svelte

@@ -23,4 +23,4 @@
   {@html injectedStyleScript()}
 {:else}
   <svelte:element this={tag()}>{styles}</svelte:element>
-{/if}
+{/if}

package/src/functions/track/helpers.ts

@@ -0,0 +1,67 @@
+import { TARGET } from '../../constants/target';
+import type { Nullable } from '../../helpers/nullable';
+import { isBrowser } from '../is-browser';
+
+const getLocation = (): Nullable<URL> => {
+  if (TARGET === 'reactNative') {
+    return null;
+  } else if (isBrowser()) {
+    const parsedLocation = new URL(location.href);
+
+    // IE11 bug with parsed path being empty string
+    // causes issues with our user targeting
+    if (parsedLocation.pathname === '') {
+      parsedLocation.pathname = '/';
+    }
+
+    return parsedLocation;
+  } else {
+    console.warn('Cannot get location for tracking in non-browser environment');
+    return null;
+  }
+};
+
+const getUserAgent = () =>
+  (typeof navigator === 'object' && navigator.userAgent) || '';
+
+export const getUserAttributes = () => {
+  const userAgent = getUserAgent();
+
+  const isMobile = {
+    Android() {
+      return userAgent.match(/Android/i);
+    },
+    BlackBerry() {
+      return userAgent.match(/BlackBerry/i);
+    },
+    iOS() {
+      return userAgent.match(/iPhone|iPod/i);
+    },
+    Opera() {
+      return userAgent.match(/Opera Mini/i);
+    },
+    Windows() {
+      return userAgent.match(/IEMobile/i) || userAgent.match(/WPDesktop/i);
+    },
+    any() {
+      return (
+        isMobile.Android() ||
+        isMobile.BlackBerry() ||
+        isMobile.iOS() ||
+        isMobile.Opera() ||
+        isMobile.Windows() ||
+        TARGET === 'reactNative'
+      );
+    },
+  };
+
+  const isTablet = userAgent.match(/Tablet|iPad/i);
+
+  const url = getLocation();
+
+  return {
+    urlPath: url?.pathname,
+    host: url?.host || url?.hostname,
+    device: isTablet ? 'tablet' : isMobile.any() ? 'mobile' : 'desktop',
+  };
+};