@builder.io/sdk-solid 0.4.4 → 0.4.5

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+### 0.4.5
+
+- Fix: show dynamic symbols correctly in Preview mode.
+- Feature: SSR A/B test Symbols nested inside page content.
+
+### 0.4.4
+
+- Fix: tracking URL from `builder.io/api/v1/track` to `cdn.builder.io/api/v1/track` for improved reliability.
+
 ### 0.4.3
 
 - Fix: SSR A/B test environment check (`isHydrationTarget`) now accurately checks current environment.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "",
   "type": "module",
   "main": "./solid-index.jsx",

package/src/blocks/columns/columns.jsx

@@ -4,7 +4,7 @@ import { css } from "solid-styled-components";
 
 import RenderBlocks from "../../components/render-blocks.jsx";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
-import RenderInlinedStyles from "../../components/render-inlined-styles.jsx";
+import InlinedStyles from "../../components/inlined-styles.jsx";
 import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context.js";
 
@@ -143,7 +143,7 @@ function Columns(props) {
       }}
     >
       <Show when={TARGET !== "reactNative"}>
-        <RenderInlinedStyles styles={columnsStyles()}></RenderInlinedStyles>
+        <InlinedStyles styles={columnsStyles()}></InlinedStyles>
       </Show>
       <For each={props.columns}>
         {(column, _index) => {

package/src/blocks/symbol/symbol.jsx

@@ -1,6 +1,6 @@
 import { useContext, onMount, on, createEffect, createSignal } from "solid-js";
 
-import RenderContent from "../../components/render-content/render-content.jsx";
+import RenderContentVariants from "../../components/render-content-variants/render-content-variants.jsx";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { TARGET } from "../../constants/target";
@@ -44,9 +44,11 @@ function Symbol(props) {
         model: props.symbol.model,
         apiKey: builderContext.apiKey,
         apiVersion: builderContext.apiVersion,
-        query: {
-          id: props.symbol.entry,
-        },
+        ...(props.symbol?.entry && {
+          query: {
+            id: props.symbol.entry,
+          },
+        }),
       })
         .then((response) => {
           if (response) {
@@ -78,7 +80,8 @@ function Symbol(props) {
         class: className(),
       }}
     >
-      <RenderContent
+      <RenderContentVariants
+        __isNestedRender={true}
         apiVersion={builderContext.apiVersion}
         apiKey={builderContext.apiKey}
         context={builderContext.context}
@@ -90,7 +93,7 @@ function Symbol(props) {
         }}
         model={props.symbol?.model}
         content={contentToUse()}
-      ></RenderContent>
+      ></RenderContentVariants>
     </div>
   );
 }

package/src/blocks/text/text.jsx

@@ -2,7 +2,7 @@ function Text(props) {
   return (
     <span
       class="builder-text"
-      innerHTML={props.text}
+      innerHTML={props.text?.toString()}
       style={{
         outline: "none",
       }}

package/src/components/inlined-script.jsx

@@ -0,0 +1,5 @@
+function InlinedScript(props) {
+  return <script innerHTML={props.scriptStr} id={props.id}></script>;
+}
+
+export default InlinedScript;

package/src/components/inlined-styles.jsx

@@ -0,0 +1,5 @@
+function InlinedStyles(props) {
+  return <style innerHTML={props.styles} id={props.id}></style>;
+}
+
+export default InlinedStyles;

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

@@ -8,7 +8,7 @@ import { TARGET } from "../../constants/target.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { createCssClass } from "../../helpers/css.js";
 import { checkIsDefined } from "../../helpers/nullable.js";
-import RenderInlinedStyles from "../render-inlined-styles.jsx";
+import InlinedStyles from "../inlined-styles";
 
 function BlockStyles(props) {
   function useBlock() {
@@ -77,7 +77,7 @@ function BlockStyles(props) {
 
   return (
     <Show when={TARGET !== "reactNative" && css() && canShowBlock()}>
-      <RenderInlinedStyles styles={css()}></RenderInlinedStyles>
+      <InlinedStyles styles={css()}></InlinedStyles>
     </Show>
   );
 }

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

@@ -1,6 +1,6 @@
 import { createSignal } from "solid-js";
 
-import RenderInlinedStyles from "../../render-inlined-styles.jsx";
+import InlinedStyles from "../../inlined-styles.jsx";
 import { getCss } from "./render-styles.helpers";
 import { getFontCss } from "./render-styles.helpers";
 
@@ -30,7 +30,7 @@ ${getFontCss({
 `.trim()
   );
 
-  return <RenderInlinedStyles styles={injectedStyles()}></RenderInlinedStyles>;
+  return <InlinedStyles styles={injectedStyles()}></InlinedStyles>;
 }
 
 export default RenderContentStyles;

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

@@ -29,6 +29,7 @@ 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";
+import InlinedScript from "../inlined-script";
 
 function RenderContent(props) {
   const [forceReRenderCount, setForceReRenderCount] = createSignal(0);
@@ -47,9 +48,10 @@ function RenderContent(props) {
 
   const [scriptStr, setScriptStr] = createSignal(
     getRenderContentScriptString({
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+      variationId: props.content?.testVariationId,
       // 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,
     })
   );
 
@@ -403,15 +405,15 @@ function RenderContent(props) {
                 },
               }
             : {})}
-          {...(props.hideContent
-            ? {
+          {...(props.showContent
+            ? {}
+            : {
                 hidden: true,
                 "aria-hidden": true,
-              }
-            : {})}
+              })}
         >
           <Show when={props.isSsrAbTest}>
-            <script innerHTML={scriptStr()}></script>
+            <InlinedScript scriptStr={scriptStr()}></InlinedScript>
           </Show>
           <Show when={TARGET !== "reactNative"}>
             <RenderContentStyles

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

@@ -1,23 +1,47 @@
+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));
 import { TARGET } from "../../constants/target";
 import { isBrowser } from "../../functions/is-browser";
-const getVariants = (content) => Object.values((content == null ? void 0 : content.variations) || {});
+const getVariants = (content) => Object.values((content == null ? void 0 : content.variations) || {}).map((variant) => __spreadProps(__spreadValues({}, variant), {
+  testVariationId: variant.id,
+  id: content == null ? void 0 : content.id
+}));
 const checkShouldRunVariants = ({
   canTrack,
   content
 }) => {
   const hasVariants = getVariants(content).length > 0;
-  if (!hasVariants) {
+  if (TARGET === "reactNative")
     return false;
-  }
-  if (!canTrack) {
+  if (!hasVariants)
     return false;
-  }
-  if (isBrowser()) {
+  if (!canTrack)
+    return false;
+  if (TARGET === "vue2" || TARGET === "vue3")
+    return true;
+  if (isBrowser())
     return false;
-  }
   return true;
 };
 function bldrAbTest(contentId, variants, isHydrationTarget2) {
+  var _a;
   function getAndSetVariantId() {
     function setCookie(name, value, days) {
       let expires = "";
@@ -61,10 +85,10 @@ function bldrAbTest(contentId, variants, isHydrationTarget2) {
     return contentId;
   }
   const winningVariantId = getAndSetVariantId();
-  const styleEl = document.getElementById(`variants-styles-${contentId}`);
+  const styleEl = (_a = document.currentScript) == null ? void 0 : _a.previousElementSibling;
   if (isHydrationTarget2) {
     styleEl.remove();
-    const thisScriptEl = document.getElementById(`variants-script-${contentId}`);
+    const thisScriptEl = document.currentScript;
     thisScriptEl == null ? void 0 : thisScriptEl.remove();
   } else {
     const newStyleStr = variants.concat({ id: contentId }).filter((variant) => variant.id !== winningVariantId).map((value) => {
@@ -75,6 +99,7 @@ function bldrAbTest(contentId, variants, isHydrationTarget2) {
   }
 }
 function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2) {
+  var _a;
   if (!navigator.cookieEnabled) {
     return;
   }
@@ -92,7 +117,7 @@ function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2)
   }
   const cookieName = `builder.tests.${defaultContentId}`;
   const variantId = getCookie(cookieName);
-  const parentDiv = document.querySelector(`[builder-content-id="${variantContentId}"]`);
+  const parentDiv = (_a = document.currentScript) == null ? void 0 : _a.parentElement;
   const variantIsDefaultContent = variantContentId === defaultContentId;
   if (variantId === variantContentId) {
     if (variantIsDefaultContent) {
@@ -113,29 +138,33 @@ function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2)
   }
   return;
 }
-const getIsHydrationTarget = (target) => target === "react" || target === "reactNative" || target === "vue3" || target === "vue2";
+const getIsHydrationTarget = (target) => target === "react" || target === "reactNative";
 const isHydrationTarget = getIsHydrationTarget(TARGET);
-const AB_TEST_FN_NAME = "bldrAbTest";
-const CONTENT_FN_NAME = "bldrCntntScrpt";
-const getVariantsScriptString = (variants, contentId) => {
+const AB_TEST_FN_NAME = "builderIoAbTest";
+const CONTENT_FN_NAME = "builderIoRenderContent";
+const getScriptString = () => {
   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})
+  window.${AB_TEST_FN_NAME} = ${fnStr}
+  window.${CONTENT_FN_NAME} = ${fnStr2}
   `;
 };
+const getVariantsScriptString = (variants, contentId) => {
+  return `
+  window.${AB_TEST_FN_NAME}("${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget})`;
+};
 const getRenderContentScriptString = ({
-  parentContentId,
-  contentId
+  contentId,
+  variationId
 }) => {
   return `
-  ${CONTENT_FN_NAME}("${contentId}", "${parentContentId}", ${isHydrationTarget})`;
+  window.${CONTENT_FN_NAME}("${variationId}", "${contentId}", ${isHydrationTarget})`;
 };
 export {
   checkShouldRunVariants,
   getRenderContentScriptString,
+  getScriptString,
   getVariants,
   getVariantsScriptString
 };

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

@@ -1,75 +1,81 @@
-import { Show, For, createSignal } from "solid-js";
+import { Show, For, onMount, createSignal } from "solid-js";
 
 import {
   checkShouldRunVariants,
+  getScriptString,
   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 InlinedStyles from "../inlined-styles.jsx";
 import { handleABTestingSync } from "../../helpers/ab-tests";
+import InlinedScript from "../inlined-script.jsx";
+import { TARGET } from "../../constants/target";
 
 function RenderContentVariants(props) {
+  const [shouldRenderVariants, setShouldRenderVariants] = createSignal(
+    checkShouldRunVariants({
+      canTrack: getDefaultCanTrack(props.canTrack),
+      content: props.content,
+    })
+  );
+
   const [variantScriptStr, setVariantScriptStr] = createSignal(
     getVariantsScriptString(
       getVariants(props.content).map((value) => ({
-        id: value.id,
+        id: value.testVariationId,
         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; } `)
+      .map((value) => `.variant-${value.testVariationId} { 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),
-        })
-  );
+  onMount(() => {
+    /**
+     * We unmount the non-winning variants post-hydration in Vue.
+     */
+    if (TARGET === "vue2" || TARGET === "vue3") {
+      setShouldRenderVariants(false);
+    }
+  });
 
   return (
     <>
+      <Show when={!props.__isNestedRender && TARGET !== "reactNative"}>
+        <InlinedScript scriptStr={getScriptString()}></InlinedScript>
+      </Show>
       <Show when={shouldRenderVariants()}>
-        <RenderInlinedStyles
+        <InlinedStyles
           id={`variants-styles-${props.content?.id}`}
           styles={hideVariantsStyleString()}
-        ></RenderInlinedStyles>
-        <script
-          id={`variants-script-${props.content?.id}`}
-          innerHTML={variantScriptStr()}
-        ></script>
+        ></InlinedStyles>
+        <InlinedScript scriptStr={variantScriptStr()}></InlinedScript>
         <For each={getVariants(props.content)}>
           {(variant, _index) => {
             const index = _index();
             return (
               <RenderContent
-                key={variant.id}
+                key={variant.testVariationId}
                 content={variant}
+                showContent={false}
+                classNameProp={undefined}
+                model={props.model}
+                data={props.data}
+                context={props.context}
                 apiKey={props.apiKey}
                 apiVersion={props.apiVersion}
-                canTrack={props.canTrack}
                 customComponents={props.customComponents}
-                hideContent={true}
-                parentContentId={props.content?.id}
+                canTrack={props.canTrack}
+                locale={props.locale}
+                includeRefs={props.includeRefs}
+                enrich={props.enrich}
                 isSsrAbTest={shouldRenderVariants()}
               ></RenderContent>
             );
@@ -77,14 +83,27 @@ function RenderContentVariants(props) {
         </For>
       </Show>
       <RenderContent
+        {...{}}
+        content={
+          shouldRenderVariants()
+            ? props.content
+            : handleABTestingSync({
+                item: props.content,
+                canTrack: getDefaultCanTrack(props.canTrack),
+              })
+        }
+        classNameProp={`variant-${props.content?.id}`}
+        showContent={true}
         model={props.model}
-        content={contentToRender()}
+        data={props.data}
+        context={props.context}
         apiKey={props.apiKey}
         apiVersion={props.apiVersion}
-        canTrack={props.canTrack}
         customComponents={props.customComponents}
-        classNameProp={`variant-${props.content?.id}`}
-        parentContentId={props.content?.id}
+        canTrack={props.canTrack}
+        locale={props.locale}
+        includeRefs={props.includeRefs}
+        enrich={props.enrich}
         isSsrAbTest={shouldRenderVariants()}
       ></RenderContent>
     </>

package/src/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.4.4"
+export const SDK_VERSION = "0.4.5"

package/src/helpers/ab-tests.js

@@ -37,6 +37,7 @@ var __async = (__this, __arguments, generator) => {
 import { getCookie, getCookieSync, setCookie } from "./cookie.js";
 import { checkIsDefined } from "../helpers/nullable.js";
 import { logger } from "./logger.js";
+import { TARGET } from "../constants/target.js";
 const BUILDER_STORE_PREFIX = "builder.tests";
 const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
 const getContentVariationCookie = ({ contentId }) => getCookie({ name: getContentTestKey(contentId), canTrack: true });
@@ -94,6 +95,8 @@ const handleABTestingSync = ({
   item,
   canTrack
 }) => {
+  if (TARGET === "reactNative")
+    return item;
   if (!canTrack) {
     return item;
   }

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

@@ -1,5 +0,0 @@
-function RenderInlinedStyles(props) {
-  return <style innerHTML={props.styles} id={props.id}></style>;
-}
-
-export default RenderInlinedStyles;