@builder.io/sdk-solid 0.0.8-20 → 0.0.8-23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.0.8-20",
+  "version": "0.0.8-23",
   "description": "",
   "type": "module",
   "main": "./src/solid-index.jsx",

package/src/blocks/button/button.jsx

@@ -1,8 +1,13 @@
 import { Show } from "solid-js";
+import { css } from "solid-styled-components";
 
 function Button(props) {
   return <>
-      <Show fallback={<span {...props.attributes}>{props.text}</span>} when={props.link}>
+      <Show fallback={<button class={css({
+      all: "unset"
+    })} {...props.attributes}>
+            {props.text}
+          </button>} when={props.link}>
         <a {...props.attributes} role="button" href={props.link} target={props.openLinkInNewTab ? "_blank" : undefined}>
           {props.text}
         </a>

package/src/blocks/columns/columns.jsx

@@ -55,7 +55,7 @@ function Columns(props) {
     display: "flex",
     alignItems: "stretch",
     lineHeight: "normal",
-    "@media (max-width: 999px)": {
+    "@media (max-width: 991px)": {
       flexDirection: "var(--flex-dir-tablet)"
     },
     "@media (max-width: 639px)": {
@@ -68,7 +68,7 @@ function Columns(props) {
 
         return <div class={"builder-column " + css({
           flexGrow: "1",
-          "@media (max-width: 999px)": {
+          "@media (max-width: 991px)": {
             width: "var(--column-width-tablet) !important",
             marginLeft: "var(--column-margin-left-tablet) !important"
           },
@@ -81,7 +81,7 @@ function Columns(props) {
           "margin-left": `${index === 0 ? 0 : state.getGutterSize()}px`,
           ...state.columnCssVars
         }} key={index}>
-              <RenderBlocks blocks={column.blocks}></RenderBlocks>
+              <RenderBlocks blocks={column.blocks} path={`component.options.columns.${index}.blocks`} parent={props.builderBlock.id}></RenderBlocks>
             </div>;
       }}
       </For>

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

@@ -30,6 +30,11 @@ function RenderContent(props) {
 
     overrideContent: null,
     update: 0,
+
+    get canTrackToUse() {
+      return props.canTrack || true;
+    },
+
     overrideState: {},
 
     get contentState() {
@@ -102,6 +107,17 @@ function RenderContent(props) {
       return {};
     },
 
+    onClick(_event) {
+      if (state.useContent) {
+        track({
+          type: "click",
+          canTrack: state.canTrackToUse,
+          contentId: state.useContent.id,
+          orgId: props.apiKey
+        });
+      }
+    },
+
     evalExpression(expression) {
       return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
         code: group,
@@ -170,8 +186,11 @@ function RenderContent(props) {
       }
 
       if (state.useContent) {
-        track("impression", {
-          contentId: state.useContent.id
+        track({
+          type: "impression",
+          canTrack: state.canTrackToUse,
+          contentId: state.useContent.id,
+          orgId: props.apiKey
         });
       } // override normal content in preview mode
 
@@ -241,9 +260,7 @@ function RenderContent(props) {
 
   }} component={BuilderContext.Provider}>
       <Show when={state.useContent}>
-        <div onClick={event => track("click", {
-        contentId: state.useContent.id
-      })} builder-content-id={state.useContent?.id}>
+        <div onClick={event => state.onClick(event)} builder-content-id={state.useContent?.id}>
           <Show when={state.shouldRenderContentStyles}>
             <RenderContentStyles cssCode={state.useContent?.data?.cssCode} customFonts={state.useContent?.data?.customFonts}></RenderContentStyles>
           </Show>

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