@builder.io/sdk-solid 0.0.8-21 → 0.0.8-24

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

@@ -1,6 +1,5 @@
-import { Show, onMount, on, createEffect } from "solid-js";
+import { Show, onMount, on, createEffect, createSignal } from "solid-js";
 import { Dynamic } from "solid-js/web";
-import { createMutable } from "solid-js/store";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
 import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context";
@@ -14,172 +13,187 @@ import { components, createRegisterComponentMessage } from "../../functions/regi
 import { track } from "../../functions/track.js";
 import RenderBlocks from "../render-blocks.jsx";
 import RenderContentStyles from "./components/render-styles.jsx";
+import { registerInsertMenu, setupBrowserForEditing } from "../../scripts/init-editing.js";
 
 function RenderContent(props) {
-  const state = createMutable({
-    get useContent() {
-      const mergedContent = { ...props.content,
-        ...state.overrideContent,
-        data: { ...props.content?.data,
-          ...props.data,
-          ...state.overrideContent?.data
-        }
-      };
-      return mergedContent;
-    },
-
-    overrideContent: null,
-    update: 0,
-    overrideState: {},
-
-    get contentState() {
-      return { ...props.content?.data?.state,
+  const [forceReRenderCount, setForceReRenderCount] = createSignal(0);
+  const [overrideContent, setOverrideContent] = createSignal(null);
+  const [update, setUpdate] = createSignal(0);
+  const [overrideState, setOverrideState] = createSignal({});
+
+  function useContent() {
+    const mergedContent = { ...props.content,
+      ...overrideContent(),
+      data: { ...props.content?.data,
         ...props.data,
-        ...state.overrideState
-      };
-    },
+        ...overrideContent()?.data
+      }
+    };
+    return mergedContent;
+  }
 
-    get contextContext() {
-      return props.context || {};
-    },
+  function canTrackToUse() {
+    return props.canTrack || true;
+  }
 
-    get 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 contentState() {
+    return { ...props.content?.data?.state,
+      ...props.data,
+      ...overrideState()
+    };
+  }
 
-    processMessage(event) {
-      const {
-        data
-      } = event;
-
-      if (data) {
-        switch (data.type) {
-          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) {
-                state.overrideContent = contentData;
-              }
+  function contextContext() {
+    return props.context || {};
+  }
 
-              break;
-            }
+  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;
+  }
 
-          case "builder.patchUpdates":
-            {
-              // TODO
-              break;
+  function processMessage(event) {
+    const {
+      data
+    } = event;
+
+    if (data) {
+      switch (data.type) {
+        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);
             }
-        }
-      }
-    },
 
-    evaluateJsCode() {
-      // run any dynamic JS code attached to content
-      const jsCode = state.useContent?.data?.jsCode;
+            break;
+          }
 
-      if (jsCode) {
-        evaluate({
-          code: jsCode,
-          context: state.contextContext,
-          state: state.contentState
-        });
+        case "builder.patchUpdates":
+          {
+            // TODO
+            break;
+          }
       }
-    },
+    }
+  }
 
-    get httpReqsData() {
-      return {};
-    },
+  function evaluateJsCode() {
+    // run any dynamic JS code attached to content
+    const jsCode = useContent()?.data?.jsCode;
 
-    onClick(_event) {
-      if (state.useContent && props.canTrack !== false) {
-        track("click", {
-          contentId: state.useContent.id
-        });
-      }
-    },
+    if (jsCode) {
+      evaluate({
+        code: jsCode,
+        context: contextContext(),
+        state: contentState()
+      });
+    }
+  }
 
-    evalExpression(expression) {
-      return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
-        code: group,
-        context: state.contextContext,
-        state: state.contentState
-      }));
-    },
+  function httpReqsData() {
+    return {};
+  }
 
-    handleRequest({
-      url,
-      key
-    }) {
-      const fetchAndSetState = async () => {
-        const fetch = await getFetch();
-        const response = await fetch(url);
-        const json = await response.json();
-        const newOverrideState = { ...state.overrideState,
-          [key]: json
-        };
-        state.overrideState = newOverrideState;
-      };
+  function onClick(_event) {
+    if (useContent()) {
+      track({
+        type: "click",
+        canTrack: canTrackToUse(),
+        contentId: useContent().id,
+        orgId: props.apiKey
+      });
+    }
+  }
 
-      fetchAndSetState();
-    },
+  function evalExpression(expression) {
+    return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
+      code: group,
+      context: contextContext(),
+      state: contentState()
+    }));
+  }
 
-    runHttpRequests() {
-      const requests = state.useContent?.data?.httpRequests ?? {};
-      Object.entries(requests).forEach(([key, url]) => {
-        if (url && (!state.httpReqsData[key] || isEditing())) {
-          const evaluatedUrl = state.evalExpression(url);
-          state.handleRequest({
-            url: evaluatedUrl,
-            key
-          });
-        }
-      });
-    },
+  function handleRequest({
+    url,
+    key
+  }) {
+    const fetchAndSetState = async () => {
+      const fetch = await getFetch();
+      const response = await fetch(url);
+      const json = await response.json();
+      const newOverrideState = { ...overrideState(),
+        [key]: json
+      };
+      setOverrideState(newOverrideState);
+    };
 
-    emitStateUpdate() {
-      if (isEditing()) {
-        window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
-          detail: {
-            state: state.contentState,
-            ref: {
-              name: props.model
-            }
-          }
-        }));
+    fetchAndSetState();
+  }
+
+  function runHttpRequests() {
+    const requests = useContent()?.data?.httpRequests ?? {};
+    Object.entries(requests).forEach(([key, url]) => {
+      if (url && (!httpReqsData()[key] || isEditing())) {
+        const evaluatedUrl = evalExpression(url);
+        handleRequest({
+          url: evaluatedUrl,
+          key
+        });
       }
-    },
+    });
+  }
 
-    get shouldRenderContentStyles() {
-      return Boolean((state.useContent?.data?.cssCode || state.useContent?.data?.customFonts?.length) && TARGET !== "reactNative");
+  function emitStateUpdate() {
+    if (isEditing()) {
+      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");
+  }
+
+  let elementRef;
   onMount(() => {
     if (isBrowser()) {
       if (isEditing()) {
-        Object.values(state.allRegisteredComponents).forEach(registeredComponent => {
+        setForceReRenderCount(forceReRenderCount() + 1); // QWIK-REPLACE: _useMutableProps
+
+        registerInsertMenu();
+        setupBrowserForEditing();
+        Object.values(allRegisteredComponents()).forEach(registeredComponent => {
           const message = createRegisterComponentMessage(registeredComponent);
           window.parent?.postMessage(message, "*");
         });
-        window.addEventListener("message", state.processMessage);
-        window.addEventListener("builder:component:stateChangeListenerActivated", state.emitStateUpdate);
+        window.addEventListener("message", processMessage);
+        window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
       }
 
-      if (state.useContent && props.canTrack !== false) {
-        track("impression", {
-          contentId: state.useContent.id
+      if (useContent()) {
+        track({
+          type: "impression",
+          canTrack: canTrackToUse(),
+          contentId: useContent().id,
+          orgId: props.apiKey
         });
       } // override normal content in preview mode
 
@@ -196,47 +210,47 @@ function RenderContent(props) {
               apiKey: previewApiKey
             }).then(content => {
               if (content) {
-                state.overrideContent = content;
+                setOverrideContent(content);
               }
             });
           }
         }
       }
 
-      state.evaluateJsCode();
-      state.runHttpRequests();
-      state.emitStateUpdate();
+      evaluateJsCode();
+      runHttpRequests();
+      emitStateUpdate();
     }
   });
 
   function onUpdateFn_0() {
-    state.evaluateJsCode();
+    evaluateJsCode();
   }
 
-  createEffect(on(() => [state.useContent?.data?.jsCode], onUpdateFn_0));
+  createEffect(on(() => [useContent()?.data?.jsCode], onUpdateFn_0));
 
   function onUpdateFn_1() {
-    state.runHttpRequests();
+    runHttpRequests();
   }
 
-  createEffect(on(() => [state.useContent?.data?.httpRequests], onUpdateFn_1));
+  createEffect(on(() => [useContent()?.data?.httpRequests], onUpdateFn_1));
 
   function onUpdateFn_2() {
-    state.emitStateUpdate();
+    emitStateUpdate();
   }
 
-  createEffect(on(() => [state.contentState], onUpdateFn_2));
+  createEffect(on(() => [contentState()], onUpdateFn_2));
   return <Dynamic value={{
     get content() {
-      return state.useContent;
+      return useContent();
     },
 
     get state() {
-      return state.contentState;
+      return contentState();
     },
 
     get context() {
-      return state.contextContext;
+      return contextContext();
     },
 
     get apiKey() {
@@ -244,16 +258,16 @@ function RenderContent(props) {
     },
 
     get registeredComponents() {
-      return state.allRegisteredComponents;
+      return allRegisteredComponents();
     }
 
   }} component={BuilderContext.Provider}>
-      <Show when={state.useContent}>
-        <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 when={useContent()}>
+        <div ref={elementRef} onClick={event => onClick(event)} builder-content-id={useContent()?.id}>
+          <Show when={shouldRenderContentStyles()}>
+            <RenderContentStyles cssCode={useContent()?.data?.cssCode} customFonts={useContent()?.data?.customFonts}></RenderContentStyles>
           </Show>
-          <RenderBlocks blocks={state.useContent?.data?.blocks}></RenderBlocks>
+          <RenderBlocks blocks={useContent()?.data?.blocks} key={forceReRenderCount()}></RenderBlocks>
         </div>
       </Show>
     </Dynamic>;

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

@@ -1,23 +1,20 @@
 import { Show } from "solid-js";
 import { Dynamic } from "solid-js/web";
-import { createMutable } from "solid-js/store";
 import { TARGET } from "../constants/target.js";
 
 function RenderInlinedStyles(props) {
-  const state = createMutable({
-    get injectedStyleScript() {
-      return `<${state.tagName}>${props.styles}</${state.tagName}>`;
-    },
+  function injectedStyleScript() {
+    return `<${tagName()}>${props.styles}</${tagName()}>`;
+  }
 
-    get tagName() {
-      // 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";
-    }
+  function tagName() {
+    // 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={state.tagName}>{props.styles}</Dynamic>} when={TARGET === "svelte"}>
-      <div innerHTML={state.injectedStyleScript}></div>
+  return <Show fallback={<Dynamic component={tagName()}>{props.styles}</Dynamic>} when={TARGET === "svelte"}>
+      <div innerHTML={injectedStyleScript()}></div>
     </Show>;
 }
 

package/src/constants/builder-registered-components.js

@@ -32,9 +32,12 @@ import { componentInfo as videoComponentInfo } from "../blocks/video/component-i
 import { default as Video } from "../blocks/video/video.jsx";
 import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info";
 import { default as embed } from "../blocks/embed/embed.jsx";
+import { default as Img } from "../blocks/img/img.jsx";
+import { componentInfo as imgComponentInfo } from "../blocks/img/component-info";
 const getDefaultRegisteredComponents = () => [
   __spreadValues({ component: Columns }, columnsComponentInfo),
   __spreadValues({ component: Image }, imageComponentInfo),
+  __spreadValues({ component: Img }, imgComponentInfo),
   __spreadValues({ component: Text }, textComponentInfo),
   __spreadValues({ component: Video }, videoComponentInfo),
   __spreadValues({ component: Symbol }, symbolComponentInfo),

package/src/functions/get-fetch.js

@@ -24,9 +24,9 @@ function getFetch() {
     const globalFetch = getGlobalThis().fetch;
     if (typeof globalFetch === "undefined" && typeof global !== "undefined") {
       const nodeFetch = import("node-fetch").then((d) => d.default);
-      return nodeFetch;
+      return nodeFetch.default || nodeFetch;
     }
-    return globalFetch;
+    return globalFetch.default || globalFetch;
   });
 }
 export {

package/src/functions/get-processed-block.js

@@ -39,13 +39,17 @@ const evaluateBindings = ({
   }
   return copied;
 };
-function getProcessedBlock(options) {
-  const { state, context } = options;
-  const block = transformBlock(options.block);
-  if (evaluateBindings) {
-    return evaluateBindings({ block, state, context });
+function getProcessedBlock({
+  block,
+  context,
+  shouldEvaluateBindings,
+  state
+}) {
+  const transformedBlock = transformBlock(block);
+  if (shouldEvaluateBindings) {
+    return evaluateBindings({ block: transformedBlock, state, context });
   } else {
-    return block;
+    return transformedBlock;
   }
 }
 export {

package/src/functions/get-processed-block.test.js

@@ -21,7 +21,7 @@ test("Can process bindings", () => {
     block,
     context: {},
     state: { test: "hello" },
-    evaluateBindings: true
+    shouldEvaluateBindings: true
   });
   expect(processed).not.toEqual(block);
   expect((_a = processed.properties) == null ? void 0 : _a.foo).toEqual("baz");

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