@builder.io/sdk-vue 0.0.1-66 → 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-66",
+  "version": "0.0.1-69",
   "dependencies": {
     "node-fetch": "^2.6.1"
   },

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

@@ -8,7 +8,9 @@
   >
     {{ text }}
   </a>
-  <span v-bind="attributes" v-else>{{ text }}</span>
+  <button v-bind="attributes" class="button-2fnk003dqad" v-else>
+    {{ text }}
+  </button>
 </template>
 <script>
 export default {
@@ -17,3 +19,8 @@ export default {
   props: ["attributes", "text", "link", "openLinkInNewTab"],
 };
 </script>
+<style scoped>
+.button-2fnk003dqad {
+  all: unset;
+}
+</style>

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

@@ -1,7 +1,7 @@
 <template>
-  <div class="builder-columns div-20351ewpue7" :style="columnsCssVars">
+  <div class="builder-columns div-4wbls88y960" :style="columnsCssVars">
     <div
-      class="builder-column div-20351ewpue7-2"
+      class="builder-column div-4wbls88y960-2"
       v-for="(column, index) in columns"
       :style="{
         width: getColumnCssWidth(index),
@@ -10,7 +10,11 @@
       }"
       :key="index"
     >
-      <render-blocks :blocks="column.blocks"></render-blocks>
+      <render-blocks
+        :blocks="column.blocks"
+        :path="`component.options.columns.${index}.blocks`"
+        :parent="builderBlock.id"
+      ></render-blocks>
     </div>
   </div>
 </template>
@@ -20,7 +24,13 @@ const RenderBlocks = () => import("../../components/render-blocks.vue");
 export default {
   name: "builder-columns",
   components: { "render-blocks": RenderBlocks },
-  props: ["space", "columns", "stackColumnsAt", "reverseColumnsWhenStacked"],
+  props: [
+    "space",
+    "columns",
+    "stackColumnsAt",
+    "reverseColumnsWhenStacked",
+    "builderBlock",
+  ],
 
   computed: {
     columnsCssVars() {
@@ -74,32 +84,32 @@ export default {
 };
 </script>
 <style scoped>
-.div-20351ewpue7 {
+.div-4wbls88y960 {
   display: flex;
   align-items: stretch;
   line-height: normal;
 }
-@media (max-width: 999px) {
-  .div-20351ewpue7 {
+@media (max-width: 991px) {
+  .div-4wbls88y960 {
     flex-direction: var(--flex-dir-tablet);
   }
 }
 @media (max-width: 639px) {
-  .div-20351ewpue7 {
+  .div-4wbls88y960 {
     flex-direction: var(--flex-dir);
   }
 }
-.div-20351ewpue7-2 {
+.div-4wbls88y960-2 {
   flex-grow: 1;
 }
-@media (max-width: 999px) {
-  .div-20351ewpue7-2 {
+@media (max-width: 991px) {
+  .div-4wbls88y960-2 {
     width: var(--column-width-tablet) !important;
     margin-left: var(--column-margin-left-tablet) !important;
   }
 }
 @media (max-width: 639px) {
-  .div-20351ewpue7-2 {
+  .div-4wbls88y960-2 {
     width: var(--column-width) !important;
     margin-left: var(--column-margin-left) !important;
   }

package/vue2/src/blocks/embed/embed.vue

@@ -23,7 +23,7 @@ export default {
   computed: {
     onUpdateHook0() {
       return {
-        0: elem,
+        0: this.$refs.elem,
         1: this.ranInitFn,
       };
     },

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

@@ -28,7 +28,7 @@
     ></builder-blocks>
 
     <pre
-      class="builder-form-error-text pre-29wpyomtntv"
+      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-29wpyomtntv {
+.pre-t43jfuqn6g {
   padding: 10px;
   color: red;
   text-align: center;

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="div-1ifnufbde19">
+  <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-1ifnufbde19'
+              ' img-cvp1sc2nsao'
           )
         "
         :src="image"
@@ -26,7 +26,7 @@
     </picture>
 
     <div
-      class="builder-image-sizer div-1ifnufbde19-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-1ifnufbde19-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-1ifnufbde19 {
+.div-cvp1sc2nsao {
   position: relative;
 }
-.img-1ifnufbde19 {
+.img-cvp1sc2nsao {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
   position: absolute;
@@ -122,12 +122,12 @@ export default {
   top: 0px;
   left: 0px;
 }
-.div-1ifnufbde19-2 {
+.div-cvp1sc2nsao-2 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
 }
-.div-1ifnufbde19-3 {
+.div-cvp1sc2nsao-3 {
   display: flex;
   flex-direction: column;
   align-items: stretch;

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

@@ -1,11 +1,7 @@
 <template>
   <div
     v-if="useContent"
-    @click="
-      track('click', {
-        contentId: useContent.id,
-      })
-    "
+    @click="onClick($event)"
     :builder-content-id="(useContent && useContent.id)"
   >
     <render-content-styles
@@ -41,9 +37,17 @@ export default {
     "render-content-styles": RenderContentStyles,
     "render-blocks": RenderBlocks,
   },
-  props: ["content", "data", "context", "customComponents", "model", "apiKey"],
+  props: [
+    "content",
+    "data",
+    "canTrack",
+    "context",
+    "customComponents",
+    "model",
+    "apiKey",
+  ],
 
-  data: () => ({ overrideContent: null, update: 0, overrideState: {}, track }),
+  data: () => ({ overrideContent: null, update: 0, overrideState: {} }),
 
   provide() {
     const _this = this;
@@ -85,8 +89,11 @@ export default {
       }
 
       if (this.useContent) {
-        track("impression", {
+        track({
+          type: "impression",
+          canTrack: this.canTrackToUse,
           contentId: this.useContent.id,
+          orgId: this.apiKey,
         });
       } // override normal content in preview mode
 
@@ -150,6 +157,9 @@ export default {
       };
       return mergedContent;
     },
+    canTrackToUse() {
+      return this.canTrack || true;
+    },
     contentState() {
       return {
         ...this.content?.data?.state,
@@ -244,6 +254,16 @@ export default {
         });
       }
     },
+    onClick(_event) {
+      if (this.useContent) {
+        track({
+          type: "click",
+          canTrack: this.canTrackToUse,
+          contentId: this.useContent.id,
+          orgId: this.apiKey,
+        });
+      }
+    },
     evalExpression(expression) {
       return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
         evaluate({

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,9 @@
   </template>
 
   <template v-else>
-    <span v-bind="attributes">{{ text }}</span>
+    <button v-bind="attributes" class="button-2oa2wtipkzk">
+      {{ text }}
+    </button>
   </template>
 </template>
 <script>
@@ -23,3 +25,8 @@ export default {
   props: ["attributes", "text", "link", "openLinkInNewTab"],
 };
 </script>
+<style scoped>
+.button-2oa2wtipkzk {
+  all: unset;
+}
+</style>

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

@@ -1,15 +1,19 @@
 <template>
-  <div class="builder-columns div-2btisl9m7v3" :style="columnsCssVars">
+  <div class="builder-columns div-361b1o6wv2k" :style="columnsCssVars">
     <template :key="index" v-for="(column, index) in columns">
       <div
-        class="builder-column div-2btisl9m7v3-2"
+        class="builder-column div-361b1o6wv2k-2"
         :style="{
           width: getColumnCssWidth(index),
           marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
           ...columnCssVars,
         }"
       >
-        <render-blocks :blocks="column.blocks"></render-blocks>
+        <render-blocks
+          :blocks="column.blocks"
+          :path="`component.options.columns.${index}.blocks`"
+          :parent="builderBlock.id"
+        ></render-blocks>
       </div>
     </template>
   </div>
@@ -22,7 +26,13 @@ const RenderBlocks = () => import("../../components/render-blocks.vue");
 export default {
   name: "builder-columns",
   components: { "render-blocks": defineAsyncComponent(RenderBlocks) },
-  props: ["space", "columns", "stackColumnsAt", "reverseColumnsWhenStacked"],
+  props: [
+    "space",
+    "columns",
+    "stackColumnsAt",
+    "reverseColumnsWhenStacked",
+    "builderBlock",
+  ],
 
   computed: {
     columnsCssVars() {
@@ -76,32 +86,32 @@ export default {
 };
 </script>
 <style scoped>
-.div-2btisl9m7v3 {
+.div-361b1o6wv2k {
   display: flex;
   align-items: stretch;
   line-height: normal;
 }
-@media (max-width: 999px) {
-  .div-2btisl9m7v3 {
+@media (max-width: 991px) {
+  .div-361b1o6wv2k {
     flex-direction: var(--flex-dir-tablet);
   }
 }
 @media (max-width: 639px) {
-  .div-2btisl9m7v3 {
+  .div-361b1o6wv2k {
     flex-direction: var(--flex-dir);
   }
 }
-.div-2btisl9m7v3-2 {
+.div-361b1o6wv2k-2 {
   flex-grow: 1;
 }
-@media (max-width: 999px) {
-  .div-2btisl9m7v3-2 {
+@media (max-width: 991px) {
+  .div-361b1o6wv2k-2 {
     width: var(--column-width-tablet) !important;
     margin-left: var(--column-margin-left-tablet) !important;
   }
 }
 @media (max-width: 639px) {
-  .div-2btisl9m7v3-2 {
+  .div-361b1o6wv2k-2 {
     width: var(--column-width) !important;
     margin-left: var(--column-margin-left) !important;
   }

package/vue3/src/blocks/embed/embed.vue

@@ -25,7 +25,7 @@ export default {
   computed: {
     onUpdateHook0() {
       return {
-        0: elem,
+        0: this.$refs.elem,
         1: this.ranInitFn,
       };
     },

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-b9953mjwo3c">
+      <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-b9953mjwo3c {
+.pre-7jvpanrlkn {
   padding: 10px;
   color: red;
   text-align: center;

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

@@ -1,13 +1,6 @@
 <template>
   <template v-if="useContent">
-    <div
-      @click="
-        track('click', {
-          contentId: useContent.id,
-        })
-      "
-      :builder-content-id="(useContent && useContent.id)"
-    >
+    <div @click="onClick($event)" :builder-content-id="(useContent && useContent.id)">
       <template v-if="shouldRenderContentStyles">
         <render-content-styles
           :cssCode="((useContent && useContent.data) && (useContent && useContent.data).cssCode)"
@@ -45,9 +38,17 @@ export default {
     "render-content-styles": defineAsyncComponent(RenderContentStyles),
     "render-blocks": defineAsyncComponent(RenderBlocks),
   },
-  props: ["content", "data", "context", "customComponents", "model", "apiKey"],
+  props: [
+    "content",
+    "data",
+    "canTrack",
+    "context",
+    "customComponents",
+    "model",
+    "apiKey",
+  ],
 
-  data: () => ({ overrideContent: null, update: 0, overrideState: {}, track }),
+  data: () => ({ overrideContent: null, update: 0, overrideState: {} }),
 
   provide() {
     const _this = this;
@@ -89,8 +90,11 @@ export default {
       }
 
       if (this.useContent) {
-        track("impression", {
+        track({
+          type: "impression",
+          canTrack: this.canTrackToUse,
           contentId: this.useContent.id,
+          orgId: this.apiKey,
         });
       } // override normal content in preview mode
 
@@ -154,6 +158,9 @@ export default {
       };
       return mergedContent;
     },
+    canTrackToUse() {
+      return this.canTrack || true;
+    },
     contentState() {
       return {
         ...this.content?.data?.state,
@@ -248,6 +255,16 @@ export default {
         });
       }
     },
+    onClick(_event) {
+      if (this.useContent) {
+        track({
+          type: "click",
+          canTrack: this.canTrackToUse,
+          contentId: this.useContent.id,
+          orgId: this.apiKey,
+        });
+      }
+    },
     evalExpression(expression) {
       return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
         evaluate({

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
+};