@builder.io/sdk-svelte 0.1.2 → 0.1.3-1

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,15 +55,16 @@
     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";
+  import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
 
   export let content: RenderContentProps["content"];
   export let data: RenderContentProps["data"];
@@ -81,7 +76,7 @@
   export let apiKey: RenderContentProps["apiKey"];
   export let includeRefs: RenderContentProps["includeRefs"];
 
-  setContext(BuilderContext.key, {
+  setContext(builderContext.key, {
     get content() {
       return useContent();
     },
@@ -89,13 +84,13 @@
       return contentState();
     },
     get context() {
-      return contextContext();
+      return contextContext;
     },
     get apiKey() {
       return apiKey;
     },
     get registeredComponents() {
-      return allRegisteredComponents();
+      return allRegisteredComponents;
     },
   });
 
@@ -141,29 +136,34 @@
     if (jsCode) {
       evaluate({
         code: jsCode,
-        context: contextContext(),
+        context: contextContext,
         state: contentState(),
       });
     }
   }
-  function onClick(_event) {
+  function onClick(event) {
     if (useContent()) {
       const variationId = useContent?.()?.testVariationId;
       const contentId = useContent?.()?.id;
       _track({
         type: "click",
-        canTrack: canTrackToUse(),
+        canTrack: canTrackToUse,
         contentId,
         apiKey: apiKey,
         variationId: variationId !== contentId ? variationId : undefined,
+        ...getInteractionPropertiesForEvent(event),
+        unique: !clicked,
       });
     }
+    if (!clicked) {
+      clicked = true;
+    }
   }
   function evalExpression(expression) {
     return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
       evaluate({
         code: group,
-        context: contextContext(),
+        context: contextContext,
         state: contentState(),
       })
     );
@@ -185,7 +185,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,
@@ -212,7 +212,7 @@
     if (!content && !overrideContent) {
       return undefined;
     }
-    const mergedContent = {
+    return {
       ...content,
       ...overrideContent,
       data: {
@@ -229,10 +229,6 @@
           content?.meta?.breakpoints,
       },
     };
-    return mergedContent;
-  };
-  $: canTrackToUse = () => {
-    return checkIsDefined(canTrack) ? canTrack : true;
   };
   $: contentState = () => {
     return {
@@ -246,32 +242,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 ||
@@ -286,7 +256,27 @@
   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 = {};
+  let clicked = false;
 
   onMount(() => {
     if (!apiKey) {
@@ -310,7 +300,7 @@
               }
             : {}),
         });
-        Object.values(allRegisteredComponents()).forEach(
+        Object.values(allRegisteredComponents).forEach(
           (registeredComponent) => {
             const message = createRegisterComponentMessage(registeredComponent);
             window.parent?.postMessage(message, "*");
@@ -327,7 +317,7 @@
         const contentId = useContent?.()?.id;
         _track({
           type: "impression",
-          canTrack: canTrackToUse(),
+          canTrack: canTrackToUse,
           contentId,
           apiKey: apiKey,
           variationId: variationId !== contentId ? variationId : undefined,
@@ -337,19 +327,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();
@@ -402,4 +403,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',
+  };
+};

package/src/functions/{track.ts → track/index.ts}

@@ -1,9 +1,11 @@
-import { TARGET } from '../constants/target.js';
-import { getSessionId } from '../helpers/sessionId.js';
-import { getVisitorId } from '../helpers/visitorId.js';
-import type { CanTrack } from '../types/can-track.js';
-import { isBrowser } from './is-browser.js';
-import { isEditing } from './is-editing.js';
+import { TARGET } from '../../constants/target.js';
+import { getSessionId } from '../../helpers/sessionId.js';
+import { getVisitorId } from '../../helpers/visitorId.js';
+import type { CanTrack } from '../../types/can-track.js';
+import type { Dictionary } from '../../types/typescript.js';
+import { isBrowser } from '../is-browser.js';
+import { isEditing } from '../is-editing.js';
+import { getUserAttributes } from './helpers.js';
 
 interface Event {
   /**
@@ -22,9 +24,9 @@ interface Event {
      */
     ownerId: string;
     /**
-     * Stringified JSON object containing any additional metadata you want to track.
+     * (Optional) metadata that you want to provide with your event.
      */
-    metadata?: string;
+    metadata?: Dictionary<any>;
     /**
      * Session ID of the user. This is provided by the SDK by checking session storage.
      */
@@ -63,18 +65,11 @@ const getTrackingEventData = async ({
 };
 
 type EventProperties = Pick<Event, 'type'> &
-  Pick<Event['data'], 'contentId' | 'variationId'> & {
+  Pick<Event['data'], 'contentId' | 'variationId' | 'metadata'> & {
     /**
      * Your organization's API key.
      */
     apiKey: Event['data']['ownerId'];
-    /**
-     * (Optional) metadata that you want to provide with your event.
-     */
-    metadata?: {
-      [index: string]: any;
-    };
-
     /**
      * (Optional) Any additional (non-metadata) properties to add to the event.
      */
@@ -93,8 +88,12 @@ const createEvent = async ({
   type: eventType,
   data: {
     ...properties,
-    metadata: JSON.stringify(metadata),
+    metadata: {
+      url: location.href,
+      ...metadata,
+    },
     ...(await getTrackingEventData({ canTrack })),
+    userAttributes: getUserAttributes(),
     ownerId: apiKey,
   },
 });

package/src/functions/track/interaction.ts

@@ -0,0 +1,80 @@
+function round(num: number) {
+  return Math.round(num * 1000) / 1000;
+}
+const findParentElement = (
+  target: HTMLElement,
+  callback: (element: HTMLElement) => boolean,
+  checkElement = true
+): HTMLElement | null => {
+  if (!(target instanceof HTMLElement)) {
+    return null;
+  }
+  let parent: HTMLElement | null = checkElement ? target : target.parentElement;
+  do {
+    if (!parent) {
+      return null;
+    }
+
+    const matches = callback(parent);
+    if (matches) {
+      return parent;
+    }
+  } while ((parent = parent.parentElement));
+
+  return null;
+};
+
+const findBuilderParent = (target: HTMLElement) =>
+  findParentElement(target, (el) => {
+    const id = el.getAttribute('builder-id') || el.id;
+    return Boolean(id?.indexOf('builder-') === 0);
+  });
+
+type Offset = {
+  x: number;
+  y: number;
+};
+
+const computeOffset = ({
+  event,
+  target,
+}: {
+  event: MouseEvent;
+  target: HTMLElement;
+}): Offset => {
+  const targetRect = target.getBoundingClientRect();
+  const xOffset = event.clientX - targetRect.left;
+  const yOffset = event.clientY - targetRect.top;
+
+  const xRatio = round(xOffset / targetRect.width);
+  const yRatio = round(yOffset / targetRect.height);
+
+  return {
+    x: xRatio,
+    y: yRatio,
+  };
+};
+
+export const getInteractionPropertiesForEvent = (event: MouseEvent) => {
+  const target = event.target as HTMLElement | null;
+  const targetBuilderElement = target && findBuilderParent(target);
+  const builderId =
+    targetBuilderElement?.getAttribute('builder-id') ||
+    targetBuilderElement?.id;
+
+  return {
+    targetBuilderElement: builderId || undefined,
+    metadata: {
+      targetOffset: target ? computeOffset({ event, target }) : undefined,
+      builderTargetOffset: targetBuilderElement
+        ? computeOffset({ event, target: targetBuilderElement })
+        : undefined,
+      builderElementIndex:
+        targetBuilderElement && builderId
+          ? ([] as Element[]).slice
+              .call(document.getElementsByClassName(builderId))
+              .indexOf(targetBuilderElement)
+          : undefined,
+    },
+  };
+};

package/src/index.ts

@@ -10,6 +10,6 @@ export * from './functions/register.js';
 export * from './functions/set-editor-settings.js';
 export * from './functions/get-content/index.js';
 export * from './functions/get-builder-search-params/index.js';
-export { track } from './functions/track';
+export { track } from './functions/track/index.js';
 export type { RegisteredComponent } from './context/types';
 export type { ComponentInfo } from './types/components';

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

@@ -1,32 +0,0 @@
-<script context="module"></script>
-
-<script>import { setContext } from "svelte";
-import BuilderContext from "../../context/builder.context.js";
-import RenderComponent from "./render-component.svelte";
-export let componentRef;
-export let componentOptions;
-export let blockChildren;
-export let context;
-setContext(BuilderContext.key, {
-    get content() {
-        return context.content;
-    },
-    get state() {
-        return context.state;
-    },
-    get context() {
-        return context.context;
-    },
-    get apiKey() {
-        return context.apiKey;
-    },
-    get registeredComponents() {
-        return context.registeredComponents;
-    },
-    get inheritedStyles() {
-        return context.inheritedStyles;
-    },
-});
-</script>
-
-<RenderComponent {componentRef} {componentOptions} {blockChildren} {context} />

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

@@ -1,19 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        componentRef: RenderComponentProps;
-        componentOptions: RenderComponentProps;
-        blockChildren: RenderComponentProps;
-        context: RenderComponentProps;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type RenderComponentWithContextProps = typeof __propDef.props;
-export declare type RenderComponentWithContextEvents = typeof __propDef.events;
-export declare type RenderComponentWithContextSlots = typeof __propDef.slots;
-export default class RenderComponentWithContext extends SvelteComponentTyped<RenderComponentWithContextProps, RenderComponentWithContextEvents, RenderComponentWithContextSlots> {
-}
-export {};

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

@@ -1,38 +0,0 @@
-<script context="module" lang="ts">
-  import type { RenderComponentProps } from "./render-component";
-</script>
-
-<script lang="ts">
-  import { getContext, setContext } from "svelte";
-
-  import BuilderContext from "../../context/builder.context.js";
-  import RenderComponent from "./render-component.svelte";
-
-  export let componentRef: RenderComponentProps["componentRef"];
-  export let componentOptions: RenderComponentProps["componentOptions"];
-  export let blockChildren: RenderComponentProps["blockChildren"];
-  export let context: RenderComponentProps["context"];
-
-  setContext(BuilderContext.key, {
-    get content() {
-      return context.content;
-    },
-    get state() {
-      return context.state;
-    },
-    get context() {
-      return context.context;
-    },
-    get apiKey() {
-      return context.apiKey;
-    },
-    get registeredComponents() {
-      return context.registeredComponents;
-    },
-    get inheritedStyles() {
-      return context.inheritedStyles;
-    },
-  });
-</script>
-
-<RenderComponent {componentRef} {componentOptions} {blockChildren} {context} />