@builder.io/sdk-vue 0.0.1-68 → 0.0.1-69

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-vue",
   "description": "Builder.io SDK for Vue",
-  "version": "0.0.1-68",
+  "version": "0.0.1-69",
   "dependencies": {
     "node-fetch": "^2.6.1"
   },

package/vue2/src/blocks/button/button.vue

@@ -8,7 +8,7 @@
   >
     {{ text }}
   </a>
-  <button v-bind="attributes" class="button-16nol0lwi20" v-else>
+  <button v-bind="attributes" class="button-2fnk003dqad" v-else>
     {{ text }}
   </button>
 </template>
@@ -20,7 +20,7 @@ export default {
 };
 </script>
 <style scoped>
-.button-16nol0lwi20 {
+.button-2fnk003dqad {
   all: unset;
 }
 </style>

package/vue2/src/blocks/columns/columns.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="builder-columns div-2fnk003dqad" :style="columnsCssVars">
+  <div class="builder-columns div-4wbls88y960" :style="columnsCssVars">
     <div
-      class="builder-column div-2fnk003dqad-2"
+      class="builder-column div-4wbls88y960-2"
       v-for="(column, index) in columns"
       :style="{
         width: getColumnCssWidth(index),
@@ -84,32 +84,32 @@ export default {
 };
 </script>
 <style scoped>
-.div-2fnk003dqad {
+.div-4wbls88y960 {
   display: flex;
   align-items: stretch;
   line-height: normal;
 }
 @media (max-width: 991px) {
-  .div-2fnk003dqad {
+  .div-4wbls88y960 {
     flex-direction: var(--flex-dir-tablet);
   }
 }
 @media (max-width: 639px) {
-  .div-2fnk003dqad {
+  .div-4wbls88y960 {
     flex-direction: var(--flex-dir);
   }
 }
-.div-2fnk003dqad-2 {
+.div-4wbls88y960-2 {
   flex-grow: 1;
 }
 @media (max-width: 991px) {
-  .div-2fnk003dqad-2 {
+  .div-4wbls88y960-2 {
     width: var(--column-width-tablet) !important;
     margin-left: var(--column-margin-left-tablet) !important;
   }
 }
 @media (max-width: 639px) {
-  .div-2fnk003dqad-2 {
+  .div-4wbls88y960-2 {
     width: var(--column-width) !important;
     margin-left: var(--column-margin-left) !important;
   }

package/vue2/src/blocks/form/form.vue

@@ -28,7 +28,7 @@
     ></builder-blocks>
 
     <pre
-      class="builder-form-error-text pre-2brhoa1k8gd"
+      class="builder-form-error-text pre-t43jfuqn6g"
       v-if="submissionState === 'error' && responseData"
     >
         {{ JSON.stringify(responseData, null, 2) }}
@@ -301,7 +301,7 @@ export default {
 };
 </script>
 <style scoped>
-.pre-2brhoa1k8gd {
+.pre-t43jfuqn6g {
   padding: 10px;
   color: red;
   text-align: center;

package/vue2/src/blocks/image/image.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="div-20351ewpue7">
+  <div class="div-cvp1sc2nsao">
     <picture>
       <source type="image/webp" v-if="webpSrcSet" :srcset="webpSrcSet" />
 
@@ -15,7 +15,7 @@
           _classStringToObject(
             'builder-image' +
               (this.className ? ' ' + this.className : '') +
-              ' img-20351ewpue7'
+              ' img-cvp1sc2nsao'
           )
         "
         :src="image"
@@ -26,7 +26,7 @@
     </picture>
 
     <div
-      class="builder-image-sizer div-20351ewpue7-2"
+      class="builder-image-sizer div-cvp1sc2nsao-2"
       v-if="aspectRatio && !(fitContent && ((builderBlock && builderBlock.children) && (builderBlock && builderBlock.children).length))"
       :style="{
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -36,7 +36,7 @@
 
     <slot></slot>
 
-    <div class="div-20351ewpue7-3" v-if="!fitContent">
+    <div class="div-cvp1sc2nsao-3" v-if="!fitContent">
       <slot></slot>
     </div>
   </div>
@@ -110,10 +110,10 @@ export default {
 };
 </script>
 <style scoped>
-.div-20351ewpue7 {
+.div-cvp1sc2nsao {
   position: relative;
 }
-.img-20351ewpue7 {
+.img-cvp1sc2nsao {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
   position: absolute;
@@ -122,12 +122,12 @@ export default {
   top: 0px;
   left: 0px;
 }
-.div-20351ewpue7-2 {
+.div-cvp1sc2nsao-2 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
 }
-.div-20351ewpue7-3 {
+.div-cvp1sc2nsao-3 {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/vue2/src/components/render-blocks.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="_classStringToObject(this.className + ' div-21azgz5avex')"
+    :class="_classStringToObject(this.className + ' div-23e8fqt91nf')"
     :builder-path="path"
     :builder-parent-id="parent"
     :dataSet="{
@@ -84,7 +84,7 @@ export default {
 };
 </script>
 <style scoped>
-.div-21azgz5avex {
+.div-23e8fqt91nf {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/vue2/src/components/render-content/render-content.vue

@@ -40,10 +40,10 @@ export default {
   props: [
     "content",
     "data",
+    "canTrack",
     "context",
     "customComponents",
     "model",
-    "canTrack",
     "apiKey",
   ],
 
@@ -88,9 +88,12 @@ export default {
         );
       }
 
-      if (this.useContent && this.canTrack !== false) {
-        track("impression", {
+      if (this.useContent) {
+        track({
+          type: "impression",
+          canTrack: this.canTrackToUse,
           contentId: this.useContent.id,
+          orgId: this.apiKey,
         });
       } // override normal content in preview mode
 
@@ -154,6 +157,9 @@ export default {
       };
       return mergedContent;
     },
+    canTrackToUse() {
+      return this.canTrack || true;
+    },
     contentState() {
       return {
         ...this.content?.data?.state,
@@ -249,9 +255,12 @@ export default {
       }
     },
     onClick(_event) {
-      if (this.useContent && this.canTrack !== false) {
-        track("click", {
+      if (this.useContent) {
+        track({
+          type: "click",
+          canTrack: this.canTrackToUse,
           contentId: this.useContent.id,
+          orgId: this.apiKey,
         });
       }
     },

package/vue2/src/functions/track.js

@@ -1,7 +1,74 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 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";
-function track(event, properties) {
+const getTrackingEventData = ({ canTrack }) => {
+  if (!canTrack) {
+    return { visitorId: void 0, sessionId: void 0 };
+  }
+  const sessionId = getSessionId({ canTrack });
+  const visitorId = getVisitorId({ canTrack });
+  return {
+    sessionId,
+    visitorId
+  };
+};
+const createEvent = (_a) => {
+  var _b = _a, {
+    type: eventType,
+    canTrack,
+    orgId,
+    contentId
+  } = _b, properties = __objRest(_b, [
+    "type",
+    "canTrack",
+    "orgId",
+    "contentId"
+  ]);
+  return {
+    type: eventType,
+    data: __spreadProps(__spreadValues(__spreadValues({}, properties), getTrackingEventData({ canTrack })), {
+      ownerId: orgId,
+      contentId
+    })
+  };
+};
+function track(eventProps) {
+  if (!eventProps.canTrack) {
+    return;
+  }
   if (isEditing()) {
     return;
   }
@@ -10,7 +77,9 @@ function track(event, properties) {
   }
   return fetch(`https://builder.io/api/v1/track`, {
     method: "POST",
-    body: JSON.stringify({ events: [{ type: event, data: properties }] }),
+    body: JSON.stringify({
+      events: [createEvent(eventProps)]
+    }),
     headers: {
       "content-type": "application/json"
     },

package/vue2/src/helpers/cookie.js

@@ -0,0 +1,59 @@
+import { isBrowser } from "../functions/is-browser";
+import { getTopLevelDomain } from "./url";
+const getCookie = ({
+  name,
+  canTrack
+}) => {
+  var _a;
+  try {
+    if (!canTrack) {
+      return void 0;
+    }
+    return (_a = document.cookie.split("; ").find((row) => row.startsWith(`${name}=`))) == null ? void 0 : _a.split("=")[1];
+  } catch (err) {
+    console.debug("[COOKIE] GET error: ", err);
+  }
+};
+const stringifyCookie = (cookie) => cookie.map(([key, value]) => value ? `${key}=${value}` : key).join("; ");
+const SECURE_CONFIG = [
+  ["secure", ""],
+  ["SameSite", "None"]
+];
+const createCookieString = ({
+  name,
+  value,
+  expires
+}) => {
+  const secure = isBrowser() ? location.protocol === "https:" : true;
+  const secureObj = secure ? SECURE_CONFIG : [[]];
+  const expiresObj = expires ? [["expires", expires.toUTCString()]] : [[]];
+  const cookieValue = [
+    [name, value],
+    ...expiresObj,
+    ["path", "/"],
+    ["domain", getTopLevelDomain(window.location.hostname)],
+    ...secureObj
+  ];
+  const cookie = stringifyCookie(cookieValue);
+  return cookie;
+};
+const setCookie = ({
+  name,
+  value,
+  expires,
+  canTrack
+}) => {
+  try {
+    if (!canTrack) {
+      return void 0;
+    }
+    const cookie = createCookieString({ name, value, expires });
+    document.cookie = cookie;
+  } catch (err) {
+    console.warn("[COOKIE] SET error: ", err);
+  }
+};
+export {
+  getCookie,
+  setCookie
+};

package/vue2/src/helpers/localStorage.js

@@ -0,0 +1,34 @@
+import { isBrowser } from "../functions/is-browser";
+const getLocalStorage = () => isBrowser() && typeof localStorage !== "undefined" ? localStorage : void 0;
+const getLocalStorageItem = ({
+  key,
+  canTrack
+}) => {
+  var _a;
+  try {
+    if (canTrack) {
+      return (_a = getLocalStorage()) == null ? void 0 : _a.getItem(key);
+    }
+    return void 0;
+  } catch (err) {
+    console.debug("[LocalStorage] GET error: ", err);
+  }
+};
+const setLocalStorageItem = ({
+  key,
+  canTrack,
+  value
+}) => {
+  var _a;
+  try {
+    if (canTrack) {
+      (_a = getLocalStorage()) == null ? void 0 : _a.setItem(key, value);
+    }
+  } catch (err) {
+    console.debug("[LocalStorage] SET error: ", err);
+  }
+};
+export {
+  getLocalStorageItem,
+  setLocalStorageItem
+};

package/vue2/src/helpers/nullable.js

@@ -0,0 +1,4 @@
+const checkIsDefined = (maybeT) => maybeT !== null && maybeT !== void 0;
+export {
+  checkIsDefined
+};

package/vue2/src/helpers/sessionId.js

@@ -0,0 +1,26 @@
+import { getCookie, setCookie } from "./cookie";
+import { checkIsDefined } from "./nullable";
+import { uuid } from "./uuid";
+const SESSION_LOCAL_STORAGE_KEY = "builderSessionId";
+const getSessionId = ({ canTrack }) => {
+  if (!canTrack) {
+    return void 0;
+  }
+  const sessionId = getCookie({ name: SESSION_LOCAL_STORAGE_KEY, canTrack });
+  if (checkIsDefined(sessionId)) {
+    return sessionId;
+  } else {
+    const newSessionId = createSessionId();
+    setSessionId({ id: newSessionId, canTrack });
+  }
+};
+const createSessionId = () => uuid();
+const setSessionId = ({
+  id,
+  canTrack
+}) => setCookie({ name: SESSION_LOCAL_STORAGE_KEY, value: id, canTrack });
+export {
+  createSessionId,
+  getSessionId,
+  setSessionId
+};

package/vue2/src/helpers/time.js

@@ -0,0 +1,5 @@
+const MINUTE_TO_MILLESECONDS_MULTIPLIER = 6e4;
+const getCurrentDatePlusMinutes = (minutes = 30) => new Date(Date.now() + minutes * MINUTE_TO_MILLESECONDS_MULTIPLIER);
+export {
+  getCurrentDatePlusMinutes
+};

package/vue2/src/helpers/url.js

@@ -0,0 +1,10 @@
+const getTopLevelDomain = (host) => {
+  const parts = host.split(".");
+  if (parts.length > 2) {
+    return parts.slice(1).join(".");
+  }
+  return host;
+};
+export {
+  getTopLevelDomain
+};

package/vue2/src/helpers/url.test.js

@@ -0,0 +1,15 @@
+import { getTopLevelDomain } from "./url.js";
+describe("getTopLevelDomain", () => {
+  test("handles root domain", () => {
+    const output = getTopLevelDomain("example.com");
+    expect(output).toBe("example.com");
+  });
+  test("handles subdomain", () => {
+    const output = getTopLevelDomain("wwww.example.com");
+    expect(output).toBe("example.com");
+  });
+  test("handles subdomain with long suffix", () => {
+    const output = getTopLevelDomain("www.example.co.uk");
+    expect(output).toBe("example.co.uk");
+  });
+});

package/vue2/src/helpers/uuid.js

@@ -0,0 +1,13 @@
+function uuidv4() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+    const r = Math.random() * 16 | 0, v = c == "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+function uuid() {
+  return uuidv4().replace(/-/g, "");
+}
+export {
+  uuid,
+  uuidv4
+};

package/vue2/src/helpers/visitorId.js

@@ -0,0 +1,33 @@
+import { getLocalStorageItem, setLocalStorageItem } from "./localStorage";
+import { checkIsDefined } from "./nullable";
+import { uuid } from "./uuid";
+const VISITOR_LOCAL_STORAGE_KEY = "builderVisitorId";
+const getVisitorId = ({ canTrack }) => {
+  if (!canTrack) {
+    return void 0;
+  }
+  const visitorId = getLocalStorageItem({
+    key: VISITOR_LOCAL_STORAGE_KEY,
+    canTrack
+  });
+  if (checkIsDefined(visitorId)) {
+    return visitorId;
+  } else {
+    const newVisitorId = createVisitorId();
+    setVisitorId({ id: newVisitorId, canTrack });
+  }
+};
+const createVisitorId = () => uuid();
+const setVisitorId = ({
+  id,
+  canTrack
+}) => setLocalStorageItem({
+  key: VISITOR_LOCAL_STORAGE_KEY,
+  value: id,
+  canTrack
+});
+export {
+  createVisitorId,
+  getVisitorId,
+  setVisitorId
+};

package/vue3/src/blocks/button/button.vue

@@ -11,7 +11,7 @@
   </template>
 
   <template v-else>
-    <button v-bind="attributes" class="button-1hjwvu3r5mj">
+    <button v-bind="attributes" class="button-2oa2wtipkzk">
       {{ text }}
     </button>
   </template>
@@ -26,7 +26,7 @@ export default {
 };
 </script>
 <style scoped>
-.button-1hjwvu3r5mj {
+.button-2oa2wtipkzk {
   all: unset;
 }
 </style>

package/vue3/src/blocks/columns/columns.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="builder-columns div-2oa2wtipkzk" :style="columnsCssVars">
+  <div class="builder-columns div-361b1o6wv2k" :style="columnsCssVars">
     <template :key="index" v-for="(column, index) in columns">
       <div
-        class="builder-column div-2oa2wtipkzk-2"
+        class="builder-column div-361b1o6wv2k-2"
         :style="{
           width: getColumnCssWidth(index),
           marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
@@ -86,32 +86,32 @@ export default {
 };
 </script>
 <style scoped>
-.div-2oa2wtipkzk {
+.div-361b1o6wv2k {
   display: flex;
   align-items: stretch;
   line-height: normal;
 }
 @media (max-width: 991px) {
-  .div-2oa2wtipkzk {
+  .div-361b1o6wv2k {
     flex-direction: var(--flex-dir-tablet);
   }
 }
 @media (max-width: 639px) {
-  .div-2oa2wtipkzk {
+  .div-361b1o6wv2k {
     flex-direction: var(--flex-dir);
   }
 }
-.div-2oa2wtipkzk-2 {
+.div-361b1o6wv2k-2 {
   flex-grow: 1;
 }
 @media (max-width: 991px) {
-  .div-2oa2wtipkzk-2 {
+  .div-361b1o6wv2k-2 {
     width: var(--column-width-tablet) !important;
     margin-left: var(--column-margin-left-tablet) !important;
   }
 }
 @media (max-width: 639px) {
-  .div-2oa2wtipkzk-2 {
+  .div-361b1o6wv2k-2 {
     width: var(--column-width) !important;
     margin-left: var(--column-margin-left) !important;
   }

package/vue3/src/blocks/form/form.vue

@@ -29,7 +29,7 @@
     </template>
 
     <template v-if="submissionState === 'error' && responseData">
-      <pre class="builder-form-error-text pre-4o9pb21oca6">
+      <pre class="builder-form-error-text pre-7jvpanrlkn">
         {{ JSON.stringify(responseData, null, 2) }}
       </pre>
     </template>
@@ -306,7 +306,7 @@ export default {
 };
 </script>
 <style scoped>
-.pre-4o9pb21oca6 {
+.pre-7jvpanrlkn {
   padding: 10px;
   color: red;
   text-align: center;

package/vue3/src/blocks/image/image.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="div-1eih9th5ow6">
+  <div class="div-1fogms4bee0">
     <picture>
       <template v-if="webpSrcSet">
         <source type="image/webp" :srcset="webpSrcSet" />
@@ -17,7 +17,7 @@
           _classStringToObject(
             'builder-image' +
               (this.className ? ' ' + this.className : '') +
-              ' img-1eih9th5ow6'
+              ' img-1fogms4bee0'
           )
         "
         :src="image"
@@ -31,7 +31,7 @@
       v-if="aspectRatio && !(fitContent && ((builderBlock && builderBlock.children) && (builderBlock && builderBlock.children).length))"
     >
       <div
-        class="builder-image-sizer div-1eih9th5ow6-2"
+        class="builder-image-sizer div-1fogms4bee0-2"
         :style="{
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           paddingTop: aspectRatio * 100 + '%',
@@ -44,7 +44,7 @@
     </template>
 
     <template v-if="!fitContent">
-      <div class="div-1eih9th5ow6-3">
+      <div class="div-1fogms4bee0-3">
         <slot></slot>
       </div>
     </template>
@@ -121,10 +121,10 @@ export default {
 };
 </script>
 <style scoped>
-.div-1eih9th5ow6 {
+.div-1fogms4bee0 {
   position: relative;
 }
-.img-1eih9th5ow6 {
+.img-1fogms4bee0 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
   position: absolute;
@@ -133,12 +133,12 @@ export default {
   top: 0px;
   left: 0px;
 }
-.div-1eih9th5ow6-2 {
+.div-1fogms4bee0-2 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
 }
-.div-1eih9th5ow6-3 {
+.div-1fogms4bee0-3 {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/vue3/src/components/render-blocks.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="_classStringToObject(this.className + ' div-1yj9n7yt24z')"
+    :class="_classStringToObject(this.className + ' div-3q96myty4lk')"
     :builder-path="path"
     :builder-parent-id="parent"
     :dataSet="{
@@ -93,7 +93,7 @@ export default {
 };
 </script>
 <style scoped>
-.div-1yj9n7yt24z {
+.div-3q96myty4lk {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/vue3/src/components/render-content/render-content.vue

@@ -41,10 +41,10 @@ export default {
   props: [
     "content",
     "data",
+    "canTrack",
     "context",
     "customComponents",
     "model",
-    "canTrack",
     "apiKey",
   ],
 
@@ -89,9 +89,12 @@ export default {
         );
       }
 
-      if (this.useContent && this.canTrack !== false) {
-        track("impression", {
+      if (this.useContent) {
+        track({
+          type: "impression",
+          canTrack: this.canTrackToUse,
           contentId: this.useContent.id,
+          orgId: this.apiKey,
         });
       } // override normal content in preview mode
 
@@ -155,6 +158,9 @@ export default {
       };
       return mergedContent;
     },
+    canTrackToUse() {
+      return this.canTrack || true;
+    },
     contentState() {
       return {
         ...this.content?.data?.state,
@@ -250,9 +256,12 @@ export default {
       }
     },
     onClick(_event) {
-      if (this.useContent && this.canTrack !== false) {
-        track("click", {
+      if (this.useContent) {
+        track({
+          type: "click",
+          canTrack: this.canTrackToUse,
           contentId: this.useContent.id,
+          orgId: this.apiKey,
         });
       }
     },

package/vue3/src/functions/track.js

@@ -1,7 +1,74 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 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";
-function track(event, properties) {
+const getTrackingEventData = ({ canTrack }) => {
+  if (!canTrack) {
+    return { visitorId: void 0, sessionId: void 0 };
+  }
+  const sessionId = getSessionId({ canTrack });
+  const visitorId = getVisitorId({ canTrack });
+  return {
+    sessionId,
+    visitorId
+  };
+};
+const createEvent = (_a) => {
+  var _b = _a, {
+    type: eventType,
+    canTrack,
+    orgId,
+    contentId
+  } = _b, properties = __objRest(_b, [
+    "type",
+    "canTrack",
+    "orgId",
+    "contentId"
+  ]);
+  return {
+    type: eventType,
+    data: __spreadProps(__spreadValues(__spreadValues({}, properties), getTrackingEventData({ canTrack })), {
+      ownerId: orgId,
+      contentId
+    })
+  };
+};
+function track(eventProps) {
+  if (!eventProps.canTrack) {
+    return;
+  }
   if (isEditing()) {
     return;
   }
@@ -10,7 +77,9 @@ function track(event, properties) {
   }
   return fetch(`https://builder.io/api/v1/track`, {
     method: "POST",
-    body: JSON.stringify({ events: [{ type: event, data: properties }] }),
+    body: JSON.stringify({
+      events: [createEvent(eventProps)]
+    }),
     headers: {
       "content-type": "application/json"
     },

package/vue3/src/helpers/cookie.js

@@ -0,0 +1,59 @@
+import { isBrowser } from "../functions/is-browser";
+import { getTopLevelDomain } from "./url";
+const getCookie = ({
+  name,
+  canTrack
+}) => {
+  var _a;
+  try {
+    if (!canTrack) {
+      return void 0;
+    }
+    return (_a = document.cookie.split("; ").find((row) => row.startsWith(`${name}=`))) == null ? void 0 : _a.split("=")[1];
+  } catch (err) {
+    console.debug("[COOKIE] GET error: ", err);
+  }
+};
+const stringifyCookie = (cookie) => cookie.map(([key, value]) => value ? `${key}=${value}` : key).join("; ");
+const SECURE_CONFIG = [
+  ["secure", ""],
+  ["SameSite", "None"]
+];
+const createCookieString = ({
+  name,
+  value,
+  expires
+}) => {
+  const secure = isBrowser() ? location.protocol === "https:" : true;
+  const secureObj = secure ? SECURE_CONFIG : [[]];
+  const expiresObj = expires ? [["expires", expires.toUTCString()]] : [[]];
+  const cookieValue = [
+    [name, value],
+    ...expiresObj,
+    ["path", "/"],
+    ["domain", getTopLevelDomain(window.location.hostname)],
+    ...secureObj
+  ];
+  const cookie = stringifyCookie(cookieValue);
+  return cookie;
+};
+const setCookie = ({
+  name,
+  value,
+  expires,
+  canTrack
+}) => {
+  try {
+    if (!canTrack) {
+      return void 0;
+    }
+    const cookie = createCookieString({ name, value, expires });
+    document.cookie = cookie;
+  } catch (err) {
+    console.warn("[COOKIE] SET error: ", err);
+  }
+};
+export {
+  getCookie,
+  setCookie
+};

package/vue3/src/helpers/localStorage.js

@@ -0,0 +1,34 @@
+import { isBrowser } from "../functions/is-browser";
+const getLocalStorage = () => isBrowser() && typeof localStorage !== "undefined" ? localStorage : void 0;
+const getLocalStorageItem = ({
+  key,
+  canTrack
+}) => {
+  var _a;
+  try {
+    if (canTrack) {
+      return (_a = getLocalStorage()) == null ? void 0 : _a.getItem(key);
+    }
+    return void 0;
+  } catch (err) {
+    console.debug("[LocalStorage] GET error: ", err);
+  }
+};
+const setLocalStorageItem = ({
+  key,
+  canTrack,
+  value
+}) => {
+  var _a;
+  try {
+    if (canTrack) {
+      (_a = getLocalStorage()) == null ? void 0 : _a.setItem(key, value);
+    }
+  } catch (err) {
+    console.debug("[LocalStorage] SET error: ", err);
+  }
+};
+export {
+  getLocalStorageItem,
+  setLocalStorageItem
+};

package/vue3/src/helpers/nullable.js

@@ -0,0 +1,4 @@
+const checkIsDefined = (maybeT) => maybeT !== null && maybeT !== void 0;
+export {
+  checkIsDefined
+};

package/vue3/src/helpers/sessionId.js

@@ -0,0 +1,26 @@
+import { getCookie, setCookie } from "./cookie";
+import { checkIsDefined } from "./nullable";
+import { uuid } from "./uuid";
+const SESSION_LOCAL_STORAGE_KEY = "builderSessionId";
+const getSessionId = ({ canTrack }) => {
+  if (!canTrack) {
+    return void 0;
+  }
+  const sessionId = getCookie({ name: SESSION_LOCAL_STORAGE_KEY, canTrack });
+  if (checkIsDefined(sessionId)) {
+    return sessionId;
+  } else {
+    const newSessionId = createSessionId();
+    setSessionId({ id: newSessionId, canTrack });
+  }
+};
+const createSessionId = () => uuid();
+const setSessionId = ({
+  id,
+  canTrack
+}) => setCookie({ name: SESSION_LOCAL_STORAGE_KEY, value: id, canTrack });
+export {
+  createSessionId,
+  getSessionId,
+  setSessionId
+};

package/vue3/src/helpers/time.js

@@ -0,0 +1,5 @@
+const MINUTE_TO_MILLESECONDS_MULTIPLIER = 6e4;
+const getCurrentDatePlusMinutes = (minutes = 30) => new Date(Date.now() + minutes * MINUTE_TO_MILLESECONDS_MULTIPLIER);
+export {
+  getCurrentDatePlusMinutes
+};

package/vue3/src/helpers/url.js

@@ -0,0 +1,10 @@
+const getTopLevelDomain = (host) => {
+  const parts = host.split(".");
+  if (parts.length > 2) {
+    return parts.slice(1).join(".");
+  }
+  return host;
+};
+export {
+  getTopLevelDomain
+};

package/vue3/src/helpers/url.test.js

@@ -0,0 +1,15 @@
+import { getTopLevelDomain } from "./url.js";
+describe("getTopLevelDomain", () => {
+  test("handles root domain", () => {
+    const output = getTopLevelDomain("example.com");
+    expect(output).toBe("example.com");
+  });
+  test("handles subdomain", () => {
+    const output = getTopLevelDomain("wwww.example.com");
+    expect(output).toBe("example.com");
+  });
+  test("handles subdomain with long suffix", () => {
+    const output = getTopLevelDomain("www.example.co.uk");
+    expect(output).toBe("example.co.uk");
+  });
+});

package/vue3/src/helpers/uuid.js

@@ -0,0 +1,13 @@
+function uuidv4() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+    const r = Math.random() * 16 | 0, v = c == "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+function uuid() {
+  return uuidv4().replace(/-/g, "");
+}
+export {
+  uuid,
+  uuidv4
+};

package/vue3/src/helpers/visitorId.js

@@ -0,0 +1,33 @@
+import { getLocalStorageItem, setLocalStorageItem } from "./localStorage";
+import { checkIsDefined } from "./nullable";
+import { uuid } from "./uuid";
+const VISITOR_LOCAL_STORAGE_KEY = "builderVisitorId";
+const getVisitorId = ({ canTrack }) => {
+  if (!canTrack) {
+    return void 0;
+  }
+  const visitorId = getLocalStorageItem({
+    key: VISITOR_LOCAL_STORAGE_KEY,
+    canTrack
+  });
+  if (checkIsDefined(visitorId)) {
+    return visitorId;
+  } else {
+    const newVisitorId = createVisitorId();
+    setVisitorId({ id: newVisitorId, canTrack });
+  }
+};
+const createVisitorId = () => uuid();
+const setVisitorId = ({
+  id,
+  canTrack
+}) => setLocalStorageItem({
+  key: VISITOR_LOCAL_STORAGE_KEY,
+  value: id,
+  canTrack
+});
+export {
+  createVisitorId,
+  getVisitorId,
+  setVisitorId
+};