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

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

@@ -44,11 +44,11 @@ function getCssFromFont(font) {
 }
 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 `
@@ -59,4 +59,4 @@ ${getFontCss({
 };
 </script>
 
-<RenderInlinedStyles styles={injectedStyles()} />
+<RenderInlinedStyles styles={injectedStyles()} />

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

@@ -1,6 +1,6 @@
 <script context="module"></script>
 
-<script>import { onDestroy, onMount, setContext, } from "svelte";
+<script>import { onDestroy, onMount, setContext } from "svelte";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
 import { TARGET } from "../../constants/target.js";
 import { evaluate } from "../../functions/evaluate.js";
@@ -10,12 +10,13 @@ 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.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;
 export let data;
 export let canTrack;
@@ -25,7 +26,7 @@ export let customComponents;
 export let model;
 export let apiKey;
 export let includeRefs;
-setContext(BuilderContext.key, {
+setContext(builderContext.key, {
     get content() {
         return useContent();
     },
@@ -33,13 +34,13 @@ setContext(BuilderContext.key, {
         return contentState();
     },
     get context() {
-        return contextContext();
+        return contextContext;
     },
     get apiKey() {
         return apiKey;
     },
     get registeredComponents() {
-        return allRegisteredComponents();
+        return allRegisteredComponents;
     },
 });
 function processMessage(event) {
@@ -82,28 +83,33 @@ function evaluateJsCode() {
     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(),
     }));
 }
@@ -124,7 +130,7 @@ function handleRequest({ url, key }) {
 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,
@@ -149,7 +155,7 @@ $: useContent = () => {
     if (!content && !overrideContent) {
         return undefined;
     }
-    const mergedContent = {
+    return {
         ...content,
         ...overrideContent,
         data: {
@@ -165,10 +171,6 @@ $: useContent = () => {
                 content?.meta?.breakpoints,
         },
     };
-    return mergedContent;
-};
-$: canTrackToUse = () => {
-    return checkIsDefined(canTrack) ? canTrack : true;
 };
 $: contentState = () => {
     return {
@@ -182,29 +184,6 @@ $: contentState = () => {
         ...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 ||
         useContent?.()?.data?.customFonts?.length) &&
@@ -215,7 +194,24 @@ let forceReRenderCount = 0;
 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) {
         console.error("[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
@@ -236,7 +232,7 @@ onMount(() => {
                     }
                     : {}),
             });
-            Object.values(allRegisteredComponents()).forEach((registeredComponent) => {
+            Object.values(allRegisteredComponents).forEach((registeredComponent) => {
                 const message = createRegisterComponentMessage(registeredComponent);
                 window.parent?.postMessage(message, "*");
             });
@@ -248,7 +244,7 @@ onMount(() => {
             const contentId = useContent?.()?.id;
             _track({
                 type: "impression",
-                canTrack: canTrackToUse(),
+                canTrack: canTrackToUse,
                 contentId,
                 apiKey: apiKey,
                 variationId: variationId !== contentId ? variationId : undefined,
@@ -257,18 +253,28 @@ onMount(() => {
         // 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();
@@ -316,4 +322,4 @@ onDestroy(() => {
       key={forceReRenderCount}
     />
   </div>
-{/if}
+{/if}

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

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

package/package/functions/track/helpers.d.ts

@@ -0,0 +1,5 @@
+export declare const getUserAttributes: () => {
+    urlPath: string | undefined;
+    host: string | undefined;
+    device: string;
+};

package/package/functions/track/helpers.js

@@ -0,0 +1,56 @@
+import { TARGET } from '../../constants/target';
+import { isBrowser } from '../is-browser';
+const getLocation = () => {
+    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/package/functions/{track.d.ts → track/index.d.ts}

@@ -1,4 +1,5 @@
-import type { CanTrack } from '../types/can-track.js';
+import type { CanTrack } from '../../types/can-track.js';
+import type { Dictionary } from '../../types/typescript.js';
 interface Event {
     /**
      * The type of your event.
@@ -16,9 +17,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.
          */
@@ -34,17 +35,11 @@ interface Event {
         [index: string]: any;
     };
 }
-declare type EventProperties = Pick<Event, 'type'> & Pick<Event['data'], 'contentId' | 'variationId'> & {
+declare type EventProperties = Pick<Event, 'type'> & 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.
      */

package/package/functions/{track.js → track/index.js}

@@ -1,8 +1,9 @@
-import { TARGET } from '../constants/target.js';
-import { getSessionId } from '../helpers/sessionId.js';
-import { getVisitorId } from '../helpers/visitorId.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 { isBrowser } from '../is-browser.js';
+import { isEditing } from '../is-editing.js';
+import { getUserAttributes } from './helpers.js';
 const getTrackingEventData = async ({ canTrack, }) => {
     if (!canTrack) {
         return { visitorId: undefined, sessionId: undefined };
@@ -18,8 +19,12 @@ const createEvent = async ({ type: eventType, canTrack, apiKey, metadata, ...pro
     type: eventType,
     data: {
         ...properties,
-        metadata: JSON.stringify(metadata),
+        metadata: {
+            url: location.href,
+            ...metadata,
+        },
         ...(await getTrackingEventData({ canTrack })),
+        userAttributes: getUserAttributes(),
         ownerId: apiKey,
     },
 });

package/package/functions/track/interaction.d.ts

@@ -0,0 +1,13 @@
+declare type Offset = {
+    x: number;
+    y: number;
+};
+export declare const getInteractionPropertiesForEvent: (event: MouseEvent) => {
+    targetBuilderElement: string | undefined;
+    metadata: {
+        targetOffset: Offset | undefined;
+        builderTargetOffset: Offset | undefined;
+        builderElementIndex: number | undefined;
+    };
+};
+export {};

package/package/functions/track/interaction.js

@@ -0,0 +1,54 @@
+function round(num) {
+    return Math.round(num * 1000) / 1000;
+}
+const findParentElement = (target, callback, checkElement = true) => {
+    if (!(target instanceof HTMLElement)) {
+        return null;
+    }
+    let parent = 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) => findParentElement(target, (el) => {
+    const id = el.getAttribute('builder-id') || el.id;
+    return Boolean(id?.indexOf('builder-') === 0);
+});
+const computeOffset = ({ event, target, }) => {
+    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) => {
+    const target = event.target;
+    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
+                ? [].slice
+                    .call(document.getElementsByClassName(builderId))
+                    .indexOf(targetBuilderElement)
+                : undefined,
+        },
+    };
+};

package/package/index.d.ts

@@ -8,6 +8,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/index.js

@@ -8,4 +8,4 @@ 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';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.1.2",
+  "version": "0.1.3-1",
   "type": "module",
   "files": [
     "package",

package/src/blocks/BaseText.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <script lang="ts">
-  import { getContext, setContext } from "svelte";
+  import { getContext } from "svelte";
 
   import BuilderContext from "../context/builder.context.js";
 
@@ -24,4 +24,4 @@
   let builderContext = getContext(BuilderContext.key);
 </script>
 
-<span use:mitosis_styling={builderContext.inheritedStyles}>{text}</span>
+<span use:mitosis_styling={builderContext.inheritedStyles}>{text}</span>

package/src/blocks/button/button.svelte

@@ -10,8 +10,7 @@
 <script lang="ts">
   const isEvent = (attr) => attr.startsWith("on:");
   const isNonEvent = (attr) => !attr.startsWith("on:");
-
-  const filterAttrs = (attrs, filter) => {
+  const filterAttrs = (attrs = {}, filter) => {
     const validAttr = {};
     Object.keys(attrs).forEach((attr) => {
       if (filter(attr)) {
@@ -20,16 +19,12 @@
     });
     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);
@@ -72,4 +67,4 @@
   .button {
     all: unset;
   }
-</style>
+</style>

package/src/blocks/columns/columns.svelte

@@ -145,10 +145,10 @@
     `;
   };
   $: reactNativeColumnsStyles = () => {
-    return columnStyleObjects.columns.small;
+    return this.columnStyleObjects.columns.small;
   };
   $: reactNativeColumnStyles = () => {
-    return columnStyleObjects.column.small;
+    return this.columnStyleObjects.column.small;
   };
 </script>
 
@@ -195,4 +195,4 @@
     flex-direction: column;
     align-items: stretch;
   }
-</style>
+</style>

package/src/blocks/custom-code/custom-code.svelte

@@ -63,4 +63,4 @@
   class={"builder-custom-code" + (replaceNodes ? " replace-nodes" : "")}
 >
   {@html code}
-</div>
+</div>

package/src/blocks/embed/embed.svelte

@@ -5,8 +5,6 @@
 </script>
 
 <script lang="ts">
-  import { afterUpdate } from "svelte";
-
   import { isJsScript } from "./helpers.js";
 
   export let content: EmbedProps["content"];
@@ -48,4 +46,4 @@
   $: onUpdateFn_0(...[elem, ranInitFn]);
 </script>
 
-<div class="builder-embed" bind:this={elem}>{@html content}</div>
+<div class="builder-embed" bind:this={elem}>{@html content}</div>

package/src/blocks/form/form.svelte

@@ -58,7 +58,7 @@
 </script>
 
 <script lang="ts">
-  import { getContext, setContext } from "svelte";
+  import { getContext } from "svelte";
 
   import RenderBlock from "../../components/render-block/render-block.svelte";
   import BuilderBlocks from "../../components/render-blocks.svelte";
@@ -66,8 +66,7 @@
 
   const isEvent = (attr) => attr.startsWith("on:");
   const isNonEvent = (attr) => !attr.startsWith("on:");
-
-  const filterAttrs = (attrs, filter) => {
+  const filterAttrs = (attrs = {}, filter) => {
     const validAttr = {};
     Object.keys(attrs).forEach((attr) => {
       if (filter(attr)) {
@@ -76,16 +75,12 @@
     });
     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);
@@ -364,4 +359,4 @@
     color: red;
     text-align: center;
   }
-</style>
+</style>

package/src/blocks/fragment/fragment.svelte

@@ -9,4 +9,4 @@
 <script lang="ts">
 </script>
 
-<span><slot /></span>
+<span><slot /></span>

package/src/blocks/image/image.svelte

@@ -106,7 +106,6 @@
     srcset={srcSetToUse()}
     {sizes}
   />
-  <source srcset={srcSetToUse()} />
 </picture>
 
 {#if aspectRatio && !(builderBlock?.children?.length && fitContent)}
@@ -150,4 +149,4 @@
     width: 100%;
     height: 100%;
   }
-</style>
+</style>

package/src/blocks/img/img.svelte

@@ -23,8 +23,7 @@
 
   const isEvent = (attr) => attr.startsWith("on:");
   const isNonEvent = (attr) => !attr.startsWith("on:");
-
-  const filterAttrs = (attrs, filter) => {
+  const filterAttrs = (attrs = {}, filter) => {
     const validAttr = {};
     Object.keys(attrs).forEach((attr) => {
       if (filter(attr)) {
@@ -33,16 +32,12 @@
     });
     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);
@@ -83,4 +78,4 @@
   src={imgSrc || image}
   {...filterAttrs(attributes, isNonEvent)}
   use:setAttrs={filterAttrs(attributes, isEvent)}
-/>
+/>