@builder.io/sdk-solid 0.2.3 → 0.4.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+### 0.4.0
+
+- Feature: A/B tests are now rendered correctly during server-side rendering (SSR) when applicable. This behaviour is backwards compatible with previous versions.
+
+### 0.3.1
+
+- Feature: Added SDK version to data sent to visual editor for improved debugging.
+- Fix: Columns block: removed redundant margin-left in first column.
+
+### 0.3.0
+
+- No Changes.
+
 ### 0.2.3
 
 - No Changes.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.2.3",
+  "version": "0.4.0",
   "description": "",
   "type": "module",
   "main": "./solid-index.jsx",
@@ -12,10 +12,7 @@
     }
   },
   "scripts": {
-    "build": "echo 'no need to build solid SDK'",
-    "release:patch": "yarn run build && npm version patch && npm publish",
-    "release:minor": "yarn run build && npm version minor && npm publish",
-    "release:dev": "yarn run build && npm version prerelease && npm publish --tag dev"
+    "build": "echo 'no need to build solid SDK'"
   },
   "dependencies": {
     "solid-styled-components": "^0.27.6"

package/src/blocks/columns/columns.jsx

@@ -65,7 +65,7 @@ function Columns(props) {
       };
     }
     const width = getColumnCssWidth(index);
-    const gutterPixels = `${gutterSize()}px`;
+    const gutterPixels = `${gutter}px`;
     const mobileWidth = "100%";
     const mobileMarginLeft = 0;
     return {

package/src/blocks/symbol/symbol.jsx

@@ -85,7 +85,7 @@ function Symbol(props) {
         customComponents={Object.values(builderContext.registeredComponents)}
         data={{
           ...props.symbol?.data,
-          ...builderContext.state,
+          ...builderContext.localState,
           ...contentToUse()?.data?.state,
         }}
         model={props.symbol?.model}

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

@@ -14,7 +14,9 @@ function BlockStyles(props) {
   function useBlock() {
     return getProcessedBlock({
       block: props.block,
-      state: props.context.state,
+      localState: props.context.localState,
+      rootState: props.context.rootState,
+      rootSetState: props.context.rootSetState,
       context: props.context.context,
       shouldEvaluateBindings: true,
     });

package/src/components/render-block/render-block.helpers.js

@@ -58,7 +58,9 @@ const getComponent = ({
   var _a;
   const componentName = (_a = getProcessedBlock({
     block,
-    state: context.state,
+    localState: context.localState,
+    rootState: context.rootState,
+    rootSetState: context.rootSetState,
     context: context.context,
     shouldEvaluateBindings: false
   }).component) == null ? void 0 : _a.name;
@@ -85,7 +87,9 @@ const getRepeatItemData = ({
   }
   const itemsArray = evaluate({
     code: repeat.collection,
-    state: context.state,
+    localState: context.localState,
+    rootState: context.rootState,
+    rootSetState: context.rootSetState,
     context: context.context
   });
   if (!Array.isArray(itemsArray)) {
@@ -95,7 +99,7 @@ const getRepeatItemData = ({
   const itemNameToUse = repeat.itemName || (collectionName ? collectionName + "Item" : "item");
   const repeatArray = itemsArray.map((item, index) => ({
     context: __spreadProps(__spreadValues({}, context), {
-      state: __spreadProps(__spreadValues({}, context.state), {
+      localState: __spreadProps(__spreadValues({}, context.localState), {
         $index: index,
         $item: item,
         [itemNameToUse]: item,
@@ -106,24 +110,8 @@ const getRepeatItemData = ({
   }));
   return repeatArray;
 };
-const getProxyState = (context) => {
-  if (typeof Proxy === "undefined") {
-    console.error("no Proxy available in this environment, cannot proxy state.");
-    return context.state;
-  }
-  const useState = new Proxy(context.state, {
-    set: (obj, prop, value) => {
-      var _a;
-      obj[prop] = value;
-      (_a = context.setState) == null ? void 0 : _a.call(context, obj);
-      return true;
-    }
-  });
-  return useState;
-};
 export {
   getComponent,
-  getProxyState,
   getRepeatItemData,
   isEmptyHtmlElement
 };

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

@@ -8,7 +8,6 @@ import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import BlockStyles from "./block-styles.jsx";
 import {
   getComponent,
-  getProxyState,
   getRepeatItemData,
   isEmptyHtmlElement,
 } from "./render-block.helpers.js";
@@ -26,25 +25,23 @@ function RenderBlock(props) {
     })
   );
 
-  const [repeatItemData, setRepeatItemData] = createSignal(
-    getRepeatItemData({
+  const [Tag, setTag] = createSignal(props.block.tagName || "div");
+
+  function repeatItem() {
+    return getRepeatItemData({
       block: props.block,
       context: props.context,
-    })
-  );
-
-  const [tag, setTag] = createSignal(props.block.tagName || "div");
-
-  const [proxyState, setProxyState] = createSignal(
-    getProxyState(props.context)
-  );
+    });
+  }
 
   function useBlock() {
-    return repeatItemData()
+    return repeatItem()
       ? props.block
       : getProcessedBlock({
           block: props.block,
-          state: props.context.state,
+          localState: props.context.localState,
+          rootState: props.context.rootState,
+          rootSetState: props.context.rootSetState,
           context: props.context.context,
           shouldEvaluateBindings: true,
         });
@@ -63,7 +60,9 @@ function RenderBlock(props) {
   function actions() {
     return getBlockActions({
       block: useBlock(),
-      state: TARGET === "qwik" ? props.context.state : proxyState(),
+      rootState: props.context.rootState,
+      rootSetState: props.context.rootSetState,
+      localState: props.context.localState,
       context: props.context.context,
     });
   }
@@ -92,7 +91,7 @@ function RenderBlock(props) {
      * blocks, and the children will be repeated within those blocks.
      */
     const shouldRenderChildrenOutsideRef =
-      !component()?.component && !repeatItemData();
+      !component()?.component && !repeatItem();
     return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
   }
 
@@ -112,10 +111,11 @@ function RenderBlock(props) {
     return {
       apiKey: props.context.apiKey,
       apiVersion: props.context.apiVersion,
-      state: props.context.state,
+      localState: props.context.localState,
+      rootState: props.context.rootState,
+      rootSetState: props.context.rootSetState,
       content: props.context.content,
       context: props.context.context,
-      setState: props.context.setState,
       registeredComponents: props.context.registeredComponents,
       inheritedStyles: getInheritedTextStyles(),
     };
@@ -152,11 +152,11 @@ function RenderBlock(props) {
         }
         when={!component()?.noWrap}
       >
-        <Show when={isEmptyHtmlElement(tag())}>
-          <Dynamic {...attributes()} {...actions()} component={tag()}></Dynamic>
+        <Show when={isEmptyHtmlElement(Tag())}>
+          <Dynamic {...attributes()} {...actions()} component={Tag()}></Dynamic>
         </Show>
-        <Show when={!isEmptyHtmlElement(tag()) && repeatItemData()}>
-          <For each={repeatItemData()}>
+        <Show when={!isEmptyHtmlElement(Tag()) && repeatItem()}>
+          <For each={repeatItem()}>
             {(data, _index) => {
               const index = _index();
               return (
@@ -169,8 +169,8 @@ function RenderBlock(props) {
             }}
           </For>
         </Show>
-        <Show when={!isEmptyHtmlElement(tag()) && !repeatItemData()}>
-          <Dynamic {...attributes()} {...actions()} component={tag()}>
+        <Show when={!isEmptyHtmlElement(Tag()) && !repeatItem()}>
+          <Dynamic {...attributes()} {...actions()} component={Tag()}>
             <RenderComponent {...renderComponentProps()}></RenderComponent>
             <For each={childrenWithoutParentComponent()}>
               {(child, _index) => {

package/src/components/render-block/render-repeated-block.jsx

@@ -6,8 +6,9 @@ function RenderRepeatedBlock(props) {
     <BuilderContext.Provider
       value={{
         content: props.repeatContext.content,
-        state: props.repeatContext.state,
-        setState: props.repeatContext.setState,
+        localState: props.repeatContext.localState,
+        rootState: props.repeatContext.rootState,
+        rootSetState: props.repeatContext.rootSetState,
         context: props.repeatContext.context,
         apiKey: props.repeatContext.apiKey,
         registeredComponents: props.repeatContext.registeredComponents,

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

@@ -5,7 +5,8 @@ import { getCss } from "./render-styles.helpers";
 import { getFontCss } from "./render-styles.helpers";
 
 function RenderContentStyles(props) {
-  const [injectedStyles, setInjectedStyles] = createSignal(`
+  const [injectedStyles, setInjectedStyles] = createSignal(
+    `
 ${getCss({
   cssCode: props.cssCode,
   contentId: props.contentId,
@@ -26,7 +27,8 @@ ${getFontCss({
   text-align: inherit;
   font-family: inherit;
 }
-`);
+`.trim()
+  );
 
   return <RenderInlinedStyles styles={injectedStyles()}></RenderInlinedStyles>;
 }

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

@@ -29,6 +29,8 @@ import {
 } from "./render-content.helpers.js";
 import { TARGET } from "../../constants/target.js";
 import { logger } from "../../helpers/logger.js";
+import { getRenderContentScriptString } from "../render-content-variants/helpers.js";
+import { wrapComponentRef } from "./wrap-component-ref.js";
 
 function RenderContent(props) {
   const [forceReRenderCount, setForceReRenderCount] = createSignal(0);
@@ -60,9 +62,13 @@ function RenderContent(props) {
       ...components,
       ...(props.customComponents || []),
     ].reduce(
-      (acc, curr) => ({
+      (acc, { component, ...curr }) => ({
         ...acc,
-        [curr.name]: curr,
+        [curr.name]: {
+          component:
+            TARGET === "vue3" ? wrapComponentRef(component) : component,
+          ...curr,
+        },
       }),
       {}
     )
@@ -72,6 +78,14 @@ function RenderContent(props) {
 
   const [clicked, setClicked] = createSignal(false);
 
+  const [scriptStr, setScriptStr] = createSignal(
+    getRenderContentScriptString({
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+      contentId: props.content?.id,
+      parentContentId: props.parentContentId,
+    })
+  );
+
   function mergeNewContent(newContent) {
     setUseContent({
       ...useContent,
@@ -99,8 +113,8 @@ function RenderContent(props) {
     });
   }
 
-  function setContextState(newState) {
-    setContentState(newState);
+  function contentSetState(newRootState) {
+    setContentState(newRootState);
   }
 
   function processMessage(event) {
@@ -149,7 +163,9 @@ function RenderContent(props) {
       evaluate({
         code: jsCode,
         context: props.context || {},
-        state: contentState(),
+        localState: undefined,
+        rootState: contentState(),
+        rootSetState: contentSetState,
       });
     }
   }
@@ -178,7 +194,9 @@ function RenderContent(props) {
       evaluate({
         code: group,
         context: props.context || {},
-        state: contentState(),
+        localState: undefined,
+        rootState: contentState(),
+        rootSetState: contentSetState,
       })
     );
   }
@@ -191,7 +209,7 @@ function RenderContent(props) {
           ...contentState(),
           [key]: json,
         };
-        setContextState(newState);
+        contentSetState(newState);
       })
       .catch((err) => {
         console.error("error fetching dynamic data", url, err);
@@ -255,6 +273,11 @@ function RenderContent(props) {
                 includeRefs: props.includeRefs,
               }
             : {}),
+          ...(props.enrich
+            ? {
+                enrich: props.enrich,
+              }
+            : {}),
         });
         Object.values(allRegisteredComponents()).forEach(
           (registeredComponent) => {
@@ -349,8 +372,9 @@ function RenderContent(props) {
     <builderContext.Provider
       value={{
         content: useContent,
-        state: contentState(),
-        setState: setContextState,
+        localState: undefined,
+        rootState: contentState(),
+        rootSetState: TARGET === "qwik" ? undefined : contentSetState,
         context: props.context || {},
         apiKey: props.apiKey,
         apiVersion: props.apiVersion,
@@ -360,11 +384,30 @@ function RenderContent(props) {
     >
       <Show when={useContent}>
         <div
+          class={props.classNameProp}
           ref={elementRef}
           onClick={(event) => onClick(event)}
           builder-content-id={useContent?.id}
           builder-model={props.model}
+          {...(TARGET === "reactNative"
+            ? {
+                dataSet: {
+                  // currently, we can't set the actual ID here.
+                  // we don't need it right now, we just need to identify content divs for testing.
+                  "builder-content-id": "",
+                },
+              }
+            : {})}
+          {...(props.hideContent
+            ? {
+                hidden: true,
+                "aria-hidden": true,
+              }
+            : {})}
         >
+          <Show when={props.isSsrAbTest}>
+            <script innerHTML={scriptStr()}></script>
+          </Show>
           <Show when={TARGET !== "reactNative"}>
             <RenderContentStyles
               contentId={useContent?.id}

package/src/components/render-content/wrap-component-ref.js

@@ -0,0 +1,4 @@
+const wrapComponentRef = (component) => component;
+export {
+  wrapComponentRef
+};

package/src/components/render-content-variants/helpers.js

@@ -0,0 +1,139 @@
+import { isBrowser } from "../../functions/is-browser";
+const getVariants = (content) => Object.values((content == null ? void 0 : content.variations) || {});
+const checkShouldRunVariants = ({
+  canTrack,
+  content
+}) => {
+  const hasVariants = getVariants(content).length > 0;
+  if (!hasVariants) {
+    return false;
+  }
+  if (!canTrack) {
+    return false;
+  }
+  if (isBrowser()) {
+    return false;
+  }
+  return true;
+};
+function bldrAbTest(contentId, variants, isHydrationTarget2) {
+  function getAndSetVariantId() {
+    function setCookie(name, value, days) {
+      let expires = "";
+      if (days) {
+        const date = new Date();
+        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1e3);
+        expires = "; expires=" + date.toUTCString();
+      }
+      document.cookie = name + "=" + (value || "") + expires + "; path=/; Secure; SameSite=None";
+    }
+    function getCookie(name) {
+      const nameEQ = name + "=";
+      const ca = document.cookie.split(";");
+      for (let i = 0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) === " ")
+          c = c.substring(1, c.length);
+        if (c.indexOf(nameEQ) === 0)
+          return c.substring(nameEQ.length, c.length);
+      }
+      return null;
+    }
+    const cookieName = `builder.tests.${contentId}`;
+    const variantInCookie = getCookie(cookieName);
+    const availableIDs = variants.map((vr) => vr.id).concat(contentId);
+    if (variantInCookie && availableIDs.includes(variantInCookie)) {
+      return variantInCookie;
+    }
+    let n = 0;
+    const random = Math.random();
+    for (let i = 0; i < variants.length; i++) {
+      const variant = variants[i];
+      const testRatio = variant.testRatio;
+      n += testRatio;
+      if (random < n) {
+        setCookie(cookieName, variant.id);
+        return variant.id;
+      }
+    }
+    setCookie(cookieName, contentId);
+    return contentId;
+  }
+  const winningVariantId = getAndSetVariantId();
+  const styleEl = document.getElementById(`variants-styles-${contentId}`);
+  if (isHydrationTarget2) {
+    styleEl.remove();
+    const thisScriptEl = document.getElementById(`variants-script-${contentId}`);
+    thisScriptEl == null ? void 0 : thisScriptEl.remove();
+  } else {
+    const newStyleStr = variants.concat({ id: contentId }).filter((variant) => variant.id !== winningVariantId).map((value) => {
+      return `.variant-${value.id} {  display: none; }
+        `;
+    }).join("");
+    styleEl.innerHTML = newStyleStr;
+  }
+}
+function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2) {
+  if (!navigator.cookieEnabled) {
+    return;
+  }
+  function getCookie(name) {
+    const nameEQ = name + "=";
+    const ca = document.cookie.split(";");
+    for (let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) === " ")
+        c = c.substring(1, c.length);
+      if (c.indexOf(nameEQ) === 0)
+        return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+  }
+  const cookieName = `builder.tests.${defaultContentId}`;
+  const variantId = getCookie(cookieName);
+  const parentDiv = document.querySelector(`[builder-content-id="${variantContentId}"]`);
+  const variantIsDefaultContent = variantContentId === defaultContentId;
+  if (variantId === variantContentId) {
+    if (variantIsDefaultContent) {
+      return;
+    }
+    parentDiv == null ? void 0 : parentDiv.removeAttribute("hidden");
+    parentDiv == null ? void 0 : parentDiv.removeAttribute("aria-hidden");
+  } else {
+    if (variantIsDefaultContent) {
+      if (isHydrationTarget2) {
+        parentDiv == null ? void 0 : parentDiv.remove();
+      } else {
+        parentDiv == null ? void 0 : parentDiv.setAttribute("hidden", "true");
+        parentDiv == null ? void 0 : parentDiv.setAttribute("aria-hidden", "true");
+      }
+    }
+    return;
+  }
+  return;
+}
+const isHydrationTarget = (target) => target === "react" || target === "reactNative" || target === "vue3" || target === "vue2";
+const AB_TEST_FN_NAME = "bldrAbTest";
+const CONTENT_FN_NAME = "bldrCntntScrpt";
+const getVariantsScriptString = (variants, contentId) => {
+  const fnStr = bldrAbTest.toString().replace(/\s+/g, " ");
+  const fnStr2 = bldrCntntScrpt.toString().replace(/\s+/g, " ");
+  return `
+  const ${AB_TEST_FN_NAME} = ${fnStr}
+  const ${CONTENT_FN_NAME} = ${fnStr2}
+  ${AB_TEST_FN_NAME}("${contentId}", ${JSON.stringify(variants)}, ${isHydrationTarget})
+  `;
+};
+const getRenderContentScriptString = ({
+  parentContentId,
+  contentId
+}) => {
+  return `
+  ${CONTENT_FN_NAME}("${contentId}", "${parentContentId}", ${isHydrationTarget})`;
+};
+export {
+  checkShouldRunVariants,
+  getRenderContentScriptString,
+  getVariants,
+  getVariantsScriptString
+};

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

@@ -0,0 +1,94 @@
+import { Show, For, createSignal } from "solid-js";
+
+import {
+  checkShouldRunVariants,
+  getVariants,
+  getVariantsScriptString,
+} from "./helpers";
+import RenderContent from "../render-content/render-content.jsx";
+import { getDefaultCanTrack } from "../../helpers/canTrack";
+import RenderInlinedStyles from "../render-inlined-styles.jsx";
+import { handleABTestingSync } from "../../helpers/ab-tests";
+
+function RenderContentVariants(props) {
+  const [variantScriptStr, setVariantScriptStr] = createSignal(
+    getVariantsScriptString(
+      getVariants(props.content).map((value) => ({
+        id: value.id,
+        testRatio: value.testRatio,
+      })),
+      props.content?.id || ""
+    )
+  );
+
+  const [shouldRenderVariants, setShouldRenderVariants] = createSignal(
+    checkShouldRunVariants({
+      canTrack: getDefaultCanTrack(props.canTrack),
+      content: props.content,
+    })
+  );
+
+  const [hideVariantsStyleString, setHideVariantsStyleString] = createSignal(
+    getVariants(props.content)
+      .map((value) => `.variant-${value.id} { display: none; } `)
+      .join("")
+  );
+
+  const [contentToRender, setContentToRender] = createSignal(
+    checkShouldRunVariants({
+      canTrack: getDefaultCanTrack(props.canTrack),
+      content: props.content,
+    })
+      ? props.content
+      : handleABTestingSync({
+          item: props.content,
+          canTrack: getDefaultCanTrack(props.canTrack),
+        })
+  );
+
+  return (
+    <>
+      <Show when={shouldRenderVariants()}>
+        <RenderInlinedStyles
+          id={`variants-styles-${props.content?.id}`}
+          styles={hideVariantsStyleString()}
+        ></RenderInlinedStyles>
+        <script
+          id={`variants-script-${props.content?.id}`}
+          innerHTML={variantScriptStr()}
+        ></script>
+        <For each={getVariants(props.content)}>
+          {(variant, _index) => {
+            const index = _index();
+            return (
+              <RenderContent
+                key={variant.id}
+                content={variant}
+                apiKey={props.apiKey}
+                apiVersion={props.apiVersion}
+                canTrack={props.canTrack}
+                customComponents={props.customComponents}
+                hideContent={true}
+                parentContentId={props.content?.id}
+                isSsrAbTest={shouldRenderVariants()}
+              ></RenderContent>
+            );
+          }}
+        </For>
+      </Show>
+      <RenderContent
+        model={props.model}
+        content={contentToRender()}
+        apiKey={props.apiKey}
+        apiVersion={props.apiVersion}
+        canTrack={props.canTrack}
+        customComponents={props.customComponents}
+        classNameProp={`variant-${props.content?.id}`}
+        parentContentId={props.content?.id}
+        isSsrAbTest={shouldRenderVariants()}
+      ></RenderContent>
+    </>
+  );
+}
+
+export default RenderContentVariants;

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

@@ -1,27 +1,5 @@
-import { Show, createSignal } from "solid-js";
-import { Dynamic } from "solid-js/web";
-
-import { TARGET } from "../constants/target.js";
-
 function RenderInlinedStyles(props) {
-  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";
-  }
-
-  function injectedStyleScript() {
-    return `<${tag()}>${props.styles}</${tag()}>`;
-  }
-
-  return (
-    <Show
-      fallback={<Dynamic component={tag()}>{props.styles}</Dynamic>}
-      when={TARGET === "svelte" || TARGET === "qwik"}
-    >
-      <Dynamic innerHTML={props.styles} component={tag()}></Dynamic>
-    </Show>
-  );
+  return <style innerHTML={props.styles} id={props.id}></style>;
 }
 
 export default RenderInlinedStyles;

package/src/constants/sdk-version.js

@@ -0,0 +1 @@
+export const SDK_VERSION = "0.4.0"

package/src/context/builder.context.js

@@ -2,9 +2,10 @@ import { createContext } from "solid-js";
 var stdin_default = createContext({
   content: null,
   context: {},
-  state: {},
-  setState() {
+  localState: void 0,
+  rootSetState() {
   },
+  rootState: {},
   apiKey: null,
   apiVersion: void 0,
   registeredComponents: {},