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

package/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-0",
   "type": "module",
   "files": [
     "package",
@@ -118,6 +118,7 @@
     "./functions/set": "./functions/set.js",
     "./functions/track/helpers": "./functions/track/helpers.js",
     "./functions/track": "./functions/track/index.js",
+    "./functions/track/interaction": "./functions/track/interaction.js",
     "./functions/transform-block-properties": "./functions/transform-block-properties.js",
     "./functions/transform-block": "./functions/transform-block.js",
     "./helpers/ab-tests": "./helpers/ab-tests.js",

package/package/blocks/button/button.svelte

@@ -2,7 +2,7 @@
 
 <script>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)) {

package/package/blocks/form/form.svelte

@@ -8,7 +8,7 @@ import BuilderBlocks from "../../components/render-blocks.svelte";
 import { isEditing } from "../../functions/is-editing.js";
 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)) {

package/package/blocks/img/img.svelte

@@ -3,7 +3,7 @@
 <script>import { isEditing } from "../../functions/is-editing.js";
 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)) {

package/package/blocks/input/input.svelte

@@ -3,7 +3,7 @@
 <script>import { isEditing } from "../../functions/is-editing.js";
 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)) {

package/package/blocks/section/section.svelte

@@ -2,7 +2,7 @@
 
 <script>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)) {

package/package/blocks/select/select.svelte

@@ -3,7 +3,7 @@
 <script>import { isEditing } from "../../functions/is-editing.js";
 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)) {

package/package/blocks/submit-button/submit-button.svelte

@@ -2,7 +2,7 @@
 
 <script>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)) {

package/package/blocks/symbol/symbol.svelte

@@ -7,7 +7,7 @@ import { getContent } from "../../functions/get-content/index.js";
 import { TARGET } from "../../constants/target";
 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)) {

package/package/blocks/textarea/textarea.svelte

@@ -2,7 +2,7 @@
 
 <script>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)) {

package/package/blocks/video/video.svelte

@@ -2,7 +2,7 @@
 
 <script>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)) {

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

@@ -16,6 +16,7 @@ import RenderContentStyles from "./components/render-styles.svelte";
 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;
@@ -87,7 +88,7 @@ function evaluateJsCode() {
         });
     }
 }
-function onClick(_event) {
+function onClick(event) {
     if (useContent()) {
         const variationId = useContent?.()?.testVariationId;
         const contentId = useContent?.()?.id;
@@ -97,8 +98,13 @@ function onClick(_event) {
             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({
@@ -205,6 +211,7 @@ let allRegisteredComponents = [
     [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.");

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.json

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

package/src/blocks/button/button.svelte

@@ -10,7 +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)) {

package/src/blocks/form/form.svelte

@@ -66,7 +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)) {

package/src/blocks/img/img.svelte

@@ -23,7 +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)) {

package/src/blocks/input/input.svelte

@@ -15,7 +15,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)) {

package/src/blocks/section/section.svelte

@@ -10,7 +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)) {

package/src/blocks/select/select.svelte

@@ -16,7 +16,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)) {

package/src/blocks/submit-button/submit-button.svelte

@@ -8,7 +8,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)) {

package/src/blocks/symbol/symbol.svelte

@@ -34,7 +34,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)) {

package/src/blocks/textarea/textarea.svelte

@@ -11,7 +11,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)) {

package/src/blocks/video/video.svelte

@@ -29,7 +29,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)) {

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

@@ -64,6 +64,7 @@
     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"];
@@ -140,7 +141,7 @@
       });
     }
   }
-  function onClick(_event) {
+  function onClick(event) {
     if (useContent()) {
       const variationId = useContent?.()?.testVariationId;
       const contentId = useContent?.()?.id;
@@ -150,8 +151,13 @@
         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) =>
@@ -270,6 +276,7 @@
     {}
   );
   let httpReqsData = {};
+  let clicked = false;
 
   onMount(() => {
     if (!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,
+    },
+  };
+};