@builder.io/sdk-svelte 0.0.1-29 → 0.0.1-31

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.1-29",
+  "version": "0.0.1-31",
   "type": "module",
   "files": [
     "src"

package/src/blocks/button/button.svelte

@@ -15,5 +15,13 @@
     {text}
   </a>
 {:else}
-  <span {...attributes}>{text}</span>
+  <button {...attributes} class="button">
+    {text}
+  </button>
 {/if}
+
+<style>
+  .button {
+    all: unset;
+  }
+</style>

package/src/blocks/columns/columns.svelte

@@ -5,6 +5,7 @@
   export let columns;
   export let stackColumnsAt;
   export let reverseColumnsWhenStacked;
+  export let builderBlock;
 
   function mitosis_styling(node, vars) {
     Object.entries(vars).forEach(([p, v]) => {
@@ -72,7 +73,11 @@
       }}
       class="builder-column div-2"
     >
-      <RenderBlocks blocks={column.blocks} />
+      <RenderBlocks
+        blocks={column.blocks}
+        path={`component.options.columns.${index}.blocks`}
+        parent={builderBlock.id}
+      />
     </div>
   {/each}
 </div>
@@ -83,7 +88,7 @@
     align-items: stretch;
     line-height: normal;
   }
-  @media (max-width: 999px) {
+  @media (max-width: 991px) {
     .div {
       flex-direction: var(--flex-dir-tablet);
     }
@@ -96,7 +101,7 @@
   .div-2 {
     flex-grow: 1;
   }
-  @media (max-width: 999px) {
+  @media (max-width: 991px) {
     .div-2 {
       width: var(--column-width-tablet) !important;
       margin-left: var(--column-margin-left-tablet) !important;

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

@@ -24,10 +24,10 @@
 
   export let content;
   export let data;
+  export let canTrack;
   export let context;
   export let customComponents;
   export let model;
-  export let canTrack;
   export let apiKey;
 
   const processMessage = function processMessage(event) {
@@ -73,9 +73,12 @@
   };
 
   const onClick = function onClick(_event) {
-    if (useContent() && canTrack !== false) {
-      track("click", {
+    if (useContent()) {
+      track({
+        type: "click",
+        canTrack: canTrackToUse(),
         contentId: useContent().id,
+        orgId: apiKey,
       });
     }
   };
@@ -138,6 +141,10 @@
     return mergedContent;
   };
 
+  $: canTrackToUse = () => {
+    return canTrack || true;
+  };
+
   $: contentState = () => {
     return { ...content?.data?.state, ...data, ...overrideState };
   };
@@ -212,9 +219,12 @@
         );
       }
 
-      if (useContent() && canTrack !== false) {
-        track("impression", {
+      if (useContent()) {
+        track({
+          type: "impression",
+          canTrack: canTrackToUse(),
           contentId: useContent().id,
+          orgId: apiKey,
         });
       } // override normal content in preview mode
 

package/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/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/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/src/helpers/nullable.js

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

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