@builder.io/sdk-solid 0.1.2 → 0.1.3

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

@@ -1,6 +1,7 @@
 import { Show, onMount, on, createEffect, createSignal } from "solid-js";
-import { Dynamic } from "solid-js/web";
+
 import { createStore, reconcile } from "solid-js/store";
+
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
 import { TARGET } from "../../constants/target.js";
 import { evaluate } from "../../functions/evaluate.js";
@@ -9,89 +10,111 @@ import { fetch } from "../../functions/get-fetch.js";
 import { isBrowser } from "../../functions/is-browser.js";
 import { isEditing } from "../../functions/is-editing.js";
 import { isPreviewing } from "../../functions/is-previewing.js";
-import { components, createRegisterComponentMessage } from "../../functions/register-component.js";
-import { _track } from "../../functions/track.js";
+import {
+  components,
+  createRegisterComponentMessage,
+} from "../../functions/register-component.js";
+import { _track } from "../../functions/track/index.js";
 import RenderBlocks from "../render-blocks.jsx";
 import RenderContentStyles from "./components/render-styles.jsx";
-import BuilderContext from "../../context/builder.context.js";
-import { registerInsertMenu, setupBrowserForEditing } from "../../scripts/init-editing.js";
+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";
+
 function RenderContent(props) {
   const [forceReRenderCount, setForceReRenderCount] = createSignal(0);
+
   const [overrideContent, setOverrideContent] = createSignal(null);
+
   const [update, setUpdate] = createSignal(0);
+
   const [useBreakpoints, setUseBreakpoints] = createSignal(null);
+
+  const [canTrackToUse, setCanTrackToUse] = createSignal(
+    checkIsDefined(props.canTrack) ? props.canTrack : true
+  );
+
   const [overrideState, setOverrideState] = createSignal({});
-  function canTrackToUse() {
-    return checkIsDefined(props.canTrack) ? props.canTrack : true;
-  }
+
+  const [contextContext, setContextContext] = createSignal(props.context || {});
+
+  const [allRegisteredComponents, setAllRegisteredComponents] = createSignal(
+    [
+      ...getDefaultRegisteredComponents(),
+      // While this `components` object is deprecated, we must maintain support for it.
+      // Since users are able to override our default components, we need to make sure that we do not break such
+      // existing usage.
+      // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+      // which is the new standard way of providing custom components, and must therefore take precedence.
+      ...components,
+      ...(props.customComponents || []),
+    ].reduce(
+      (acc, curr) => ({
+        ...acc,
+        [curr.name]: curr,
+      }),
+      {}
+    )
+  );
+
+  const [httpReqsData, setHttpReqsData] = createSignal({});
+
+  const [clicked, setClicked] = createSignal(false);
+
   function contentState() {
     return {
       ...props.content?.data?.state,
       ...props.data,
-      ...(props.locale ? {
-        locale: props.locale
-      } : {}),
-      ...overrideState()
+      ...(props.locale
+        ? {
+            locale: props.locale,
+          }
+        : {}),
+      ...overrideState(),
     };
   }
-  function contextContext() {
-    return props.context || {};
-  }
-  function allRegisteredComponents() {
-    const allComponentsArray = [...getDefaultRegisteredComponents(),
-    // While this `components` object is deprecated, we must maintain support for it.
-    // Since users are able to override our default components, we need to make sure that we do not break such
-    // existing usage.
-    // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
-    // which is the new standard way of providing custom components, and must therefore take precedence.
-    ...components, ...(props.customComponents || [])];
-    const allComponents = allComponentsArray.reduce((acc, curr) => ({
-      ...acc,
-      [curr.name]: curr
-    }), {});
-    return allComponents;
-  }
+
   function processMessage(event) {
-    const {
-      data
-    } = event;
+    const { data } = event;
     if (data) {
       switch (data.type) {
-        case "builder.configureSdk":
-          {
-            const messageContent = data.data;
-            const {
-              breakpoints,
-              contentId
-            } = messageContent;
-            if (!contentId || contentId !== useContent?.id) {
-              return;
-            }
-            setUseBreakpoints(breakpoints);
+        case "builder.configureSdk": {
+          const messageContent = data.data;
+          const { breakpoints, contentId } = messageContent;
+          if (!contentId || contentId !== useContent?.id) {
+            return;
+          }
+          setUseBreakpoints(breakpoints);
+          setForceReRenderCount(forceReRenderCount() + 1); // This is a hack to force Qwik to re-render.
+          break;
+        }
+        case "builder.contentUpdate": {
+          const messageContent = data.data;
+          const key =
+            messageContent.key ||
+            messageContent.alias ||
+            messageContent.entry ||
+            messageContent.modelName;
+          const contentData = messageContent.data;
+          if (key === props.model) {
+            setOverrideContent(contentData);
             setForceReRenderCount(forceReRenderCount() + 1); // This is a hack to force Qwik to re-render.
-            break;
           }
-        case "builder.contentUpdate":
-          {
-            const messageContent = data.data;
-            const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
-            const contentData = messageContent.data;
-            if (key === props.model) {
-              setOverrideContent(contentData);
-              setForceReRenderCount(forceReRenderCount() + 1); // This is a hack to force Qwik to re-render.
-            }
 
-            break;
-          }
-        case "builder.patchUpdates":
-          {
-            // TODO
-            break;
-          }
+          break;
+        }
+        case "builder.patchUpdates": {
+          // TODO
+          break;
+        }
       }
     }
   }
+
   function evaluateJsCode() {
     // run any dynamic JS code attached to content
     const jsCode = useContent?.data?.jsCode;
@@ -99,14 +122,12 @@ function RenderContent(props) {
       evaluate({
         code: jsCode,
         context: contextContext(),
-        state: contentState()
+        state: contentState(),
       });
     }
   }
-  function httpReqsData() {
-    return {};
-  }
-  function onClick(_event) {
+
+  function onClick(event) {
     if (useContent) {
       const variationId = useContent?.testVariationId;
       const contentId = useContent?.id;
@@ -115,31 +136,41 @@ function RenderContent(props) {
         canTrack: canTrackToUse(),
         contentId,
         apiKey: props.apiKey,
-        variationId: variationId !== contentId ? variationId : undefined
+        variationId: variationId !== contentId ? variationId : undefined,
+        ...getInteractionPropertiesForEvent(event),
+        unique: !clicked(),
       });
     }
+    if (!clicked()) {
+      setClicked(true);
+    }
   }
+
   function evalExpression(expression) {
-    return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
-      code: group,
-      context: contextContext(),
-      state: contentState()
-    }));
+    return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
+      evaluate({
+        code: group,
+        context: contextContext(),
+        state: contentState(),
+      })
+    );
   }
-  function handleRequest({
-    url,
-    key
-  }) {
-    fetch(url).then(response => response.json()).then(json => {
-      const newOverrideState = {
-        ...overrideState(),
-        [key]: json
-      };
-      setOverrideState(newOverrideState);
-    }).catch(err => {
-      console.log("error fetching dynamic data", url, err);
-    });
+
+  function handleRequest({ url, key }) {
+    fetch(url)
+      .then((response) => response.json())
+      .then((json) => {
+        const newOverrideState = {
+          ...overrideState(),
+          [key]: json,
+        };
+        setOverrideState(newOverrideState);
+      })
+      .catch((err) => {
+        console.log("error fetching dynamic data", url, err);
+      });
   }
+
   function runHttpRequests() {
     const requests = useContent?.data?.httpRequests ?? {};
     Object.entries(requests).forEach(([key, url]) => {
@@ -147,71 +178,99 @@ function RenderContent(props) {
         const evaluatedUrl = evalExpression(url);
         handleRequest({
           url: evaluatedUrl,
-          key
+          key,
         });
       }
     });
   }
+
   function emitStateUpdate() {
     if (isEditing()) {
-      window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
-        detail: {
-          state: contentState(),
-          ref: {
-            name: props.model
-          }
-        }
-      }));
+      window.dispatchEvent(
+        new CustomEvent("builder:component:stateChange", {
+          detail: {
+            state: contentState(),
+            ref: {
+              name: props.model,
+            },
+          },
+        })
+      );
     }
   }
+
   function shouldRenderContentStyles() {
-    return Boolean((useContent?.data?.cssCode || useContent?.data?.customFonts?.length) && TARGET !== "reactNative");
+    return Boolean(
+      (useContent?.data?.cssCode || useContent?.data?.customFonts?.length) &&
+        TARGET !== "reactNative"
+    );
   }
+
   const updateUseContent = function useContent() {
     if (!props.content && !overrideContent()) {
       return undefined;
     }
-    const mergedContent = {
+    return {
       ...props.content,
       ...overrideContent(),
       data: {
         ...props.content?.data,
         ...props.data,
-        ...overrideContent()?.data
+        ...overrideContent()?.data,
       },
       meta: {
         ...props.content?.meta,
         ...overrideContent()?.meta,
-        breakpoints: useBreakpoints() || overrideContent()?.meta?.breakpoints || props.content?.meta?.breakpoints
-      }
+        breakpoints:
+          useBreakpoints() ||
+          overrideContent()?.meta?.breakpoints ||
+          props.content?.meta?.breakpoints,
+      },
     };
-    return mergedContent;
   };
   const [useContent, setUseContent] = createStore(updateUseContent());
-  createEffect(on(() => [overrideContent(), useBreakpoints(), props.content, props.data], () => setUseContent(reconcile(updateUseContent()))));
+  createEffect(
+    on(
+      () => [overrideContent(), useBreakpoints(), props.content, props.data],
+      () => setUseContent(reconcile(updateUseContent()))
+    )
+  );
+
   let elementRef;
+
   onMount(() => {
     if (!props.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.");
+      console.error(
+        "[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."
+      );
     }
     if (isBrowser()) {
       if (isEditing()) {
         setForceReRenderCount(forceReRenderCount() + 1);
         registerInsertMenu();
         setupBrowserForEditing({
-          ...(props.locale ? {
-            locale: props.locale
-          } : {}),
-          ...(props.includeRefs ? {
-            includeRefs: props.includeRefs
-          } : {})
-        });
-        Object.values(allRegisteredComponents()).forEach(registeredComponent => {
-          const message = createRegisterComponentMessage(registeredComponent);
-          window.parent?.postMessage(message, "*");
+          ...(props.locale
+            ? {
+                locale: props.locale,
+              }
+            : {}),
+          ...(props.includeRefs
+            ? {
+                includeRefs: props.includeRefs,
+              }
+            : {}),
         });
+        Object.values(allRegisteredComponents()).forEach(
+          (registeredComponent) => {
+            const message = createRegisterComponentMessage(registeredComponent);
+            window.parent?.postMessage(message, "*");
+          }
+        );
         window.addEventListener("message", processMessage);
-        window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
+        window.addEventListener(
+          "builder:component:stateChangeListenerActivated",
+          emitStateUpdate
+        );
       }
       if (useContent) {
         const variationId = useContent?.testVariationId;
@@ -221,25 +280,40 @@ function RenderContent(props) {
           canTrack: canTrackToUse(),
           contentId,
           apiKey: props.apiKey,
-          variationId: variationId !== contentId ? variationId : undefined
+          variationId: variationId !== contentId ? variationId : undefined,
         });
       }
 
       // override normal content in preview mode
       if (isPreviewing()) {
         const searchParams = new URL(location.href).searchParams;
-        if (props.model && searchParams.get("builder.preview") === props.model) {
-          const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
-          if (previewApiKey) {
-            getContent({
-              model: props.model,
-              apiKey: previewApiKey
-            }).then(content => {
-              if (content) {
-                setOverrideContent(content);
-              }
-            });
-          }
+        const searchParamPreview = searchParams.get("builder.preview");
+        const previewApiKey =
+          searchParams.get("apiKey") || searchParams.get("builder.space");
+
+        /**
+         * Make sure that:
+         * - the preview model name is the same as the one we're rendering, since there can be multiple models rendered
+         *  at the same time, e.g. header/page/footer.
+         * - the API key is the same, since we don't want to preview content from other organizations.
+         *
+         * TO-DO: should we check that the preview item ID is the same as the initial one being rendered? Or would
+         * this break scenarios where the item is not published yet?
+         *
+         * TO-DO: should we only update the state when there is a change?
+         **/
+        if (
+          searchParamPreview === props.model &&
+          previewApiKey === props.apiKey
+        ) {
+          getContent({
+            model: props.model,
+            apiKey: props.apiKey,
+          }).then((content) => {
+            if (content) {
+              setOverrideContent(content);
+            }
+          });
         }
       }
       evaluateJsCode();
@@ -247,43 +321,55 @@ function RenderContent(props) {
       emitStateUpdate();
     }
   });
+
   function onUpdateFn_0() {
     evaluateJsCode();
   }
-  createEffect(on(() => [useContent?.data?.jsCode, contentState()], onUpdateFn_0));
+  createEffect(
+    on(() => [useContent?.data?.jsCode, contentState()], onUpdateFn_0)
+  );
+
   function onUpdateFn_1() {
     runHttpRequests();
   }
   createEffect(on(() => [useContent?.data?.httpRequests], onUpdateFn_1));
+
   function onUpdateFn_2() {
     emitStateUpdate();
   }
   createEffect(on(() => [contentState()], onUpdateFn_2));
-  return <Dynamic value={{
-    get content() {
-      return useContent;
-    },
-    get state() {
-      return contentState();
-    },
-    get context() {
-      return contextContext();
-    },
-    get apiKey() {
-      return props.apiKey;
-    },
-    get registeredComponents() {
-      return allRegisteredComponents();
-    }
-  }} component={BuilderContext.Provider}>
+
+  return (
+    <builderContext.Provider
+      value={{
+        content: useContent,
+        state: contentState(),
+        context: contextContext(),
+        apiKey: props.apiKey,
+        registeredComponents: allRegisteredComponents(),
+      }}
+    >
       <Show when={useContent}>
-        <div ref={elementRef} onClick={event => onClick(event)} builder-content-id={useContent?.id} builder-model={props.model}>
+        <div
+          ref={elementRef}
+          onClick={(event) => onClick(event)}
+          builder-content-id={useContent?.id}
+          builder-model={props.model}
+        >
           <Show when={shouldRenderContentStyles()}>
-            <RenderContentStyles cssCode={useContent?.data?.cssCode} customFonts={useContent?.data?.customFonts}></RenderContentStyles>
+            <RenderContentStyles
+              cssCode={useContent?.data?.cssCode}
+              customFonts={useContent?.data?.customFonts}
+            ></RenderContentStyles>
           </Show>
-          <RenderBlocks blocks={useContent?.data?.blocks} key={forceReRenderCount()}></RenderBlocks>
+          <RenderBlocks
+            blocks={useContent?.data?.blocks}
+            key={forceReRenderCount()}
+          ></RenderBlocks>
         </div>
       </Show>
-    </Dynamic>;
+    </builderContext.Provider>
+  );
 }
-export default RenderContent;
+
+export default RenderContent;

package/src/components/render-inlined-styles.jsx

@@ -1,17 +1,27 @@
-import { Show } from "solid-js";
+import { Show, createSignal } from "solid-js";
 import { Dynamic } from "solid-js/web";
+
 import { TARGET } from "../constants/target.js";
+
 function RenderInlinedStyles(props) {
   function injectedStyleScript() {
     return `<${tag()}>${props.styles}</${tag()}>`;
   }
+
   function tag() {
     // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
     // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
     return "sty" + "le";
   }
-  return <Show fallback={<Dynamic component={tag()}>{props.styles}</Dynamic>} when={TARGET === "svelte"}>
+
+  return (
+    <Show
+      fallback={<Dynamic component={tag()}>{props.styles}</Dynamic>}
+      when={TARGET === "svelte"}
+    >
       <div innerHTML={injectedStyleScript()}></div>
-    </Show>;
+    </Show>
+  );
 }
-export default RenderInlinedStyles;
+
+export default RenderInlinedStyles;

package/src/functions/track/helpers.js

@@ -0,0 +1,50 @@
+import { TARGET } from "../../constants/target";
+import { isBrowser } from "../is-browser";
+const getLocation = () => {
+  if (TARGET === "reactNative") {
+    return null;
+  } else if (isBrowser()) {
+    const parsedLocation = new URL(location.href);
+    if (parsedLocation.pathname === "") {
+      parsedLocation.pathname = "/";
+    }
+    return parsedLocation;
+  } else {
+    console.warn("Cannot get location for tracking in non-browser environment");
+    return null;
+  }
+};
+const getUserAgent = () => typeof navigator === "object" && navigator.userAgent || "";
+const getUserAttributes = () => {
+  const userAgent = getUserAgent();
+  const isMobile = {
+    Android() {
+      return userAgent.match(/Android/i);
+    },
+    BlackBerry() {
+      return userAgent.match(/BlackBerry/i);
+    },
+    iOS() {
+      return userAgent.match(/iPhone|iPod/i);
+    },
+    Opera() {
+      return userAgent.match(/Opera Mini/i);
+    },
+    Windows() {
+      return userAgent.match(/IEMobile/i) || userAgent.match(/WPDesktop/i);
+    },
+    any() {
+      return isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows() || TARGET === "reactNative";
+    }
+  };
+  const isTablet = userAgent.match(/Tablet|iPad/i);
+  const url = getLocation();
+  return {
+    urlPath: url == null ? void 0 : url.pathname,
+    host: (url == null ? void 0 : url.host) || (url == null ? void 0 : url.hostname),
+    device: isTablet ? "tablet" : isMobile.any() ? "mobile" : "desktop"
+  };
+};
+export {
+  getUserAttributes
+};

package/src/functions/{track.js → track/index.js}

@@ -49,11 +49,12 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-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";
+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";
+import { getUserAttributes } from "./helpers.js";
 const getTrackingEventData = (_0) => __async(void 0, [_0], function* ({
   canTrack
 }) {
@@ -82,8 +83,11 @@ const createEvent = (_a) => __async(void 0, null, function* () {
   return {
     type: eventType,
     data: __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, properties), {
-      metadata: JSON.stringify(metadata)
+      metadata: __spreadValues({
+        url: location.href
+      }, metadata)
     }), yield getTrackingEventData({ canTrack })), {
+      userAttributes: getUserAttributes(),
       ownerId: apiKey
     })
   };