@builder.io/sdk-solid 0.4.4 → 0.5.0

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

@@ -0,0 +1,110 @@
+import { Show, For, onMount, createSignal } from "solid-js";
+
+import {
+  checkShouldRunVariants,
+  getScriptString,
+  getVariants,
+  getVariantsScriptString,
+} from "./helpers.js";
+import ContentComponent from "../content/content.jsx";
+import { getDefaultCanTrack } from "../../helpers/canTrack.js";
+import InlinedStyles from "../inlined-styles.jsx";
+import { handleABTestingSync } from "../../helpers/ab-tests.js";
+import InlinedScript from "../inlined-script.jsx";
+import { TARGET } from "../../constants/target.js";
+
+function ContentVariants(props) {
+  const [shouldRenderVariants, setShouldRenderVariants] = createSignal(
+    checkShouldRunVariants({
+      canTrack: getDefaultCanTrack(props.canTrack),
+      content: props.content,
+    })
+  );
+
+  function variantScriptStr() {
+    return getVariantsScriptString(
+      getVariants(props.content).map((value) => ({
+        id: value.testVariationId,
+        testRatio: value.testRatio,
+      })),
+      props.content?.id || ""
+    );
+  }
+
+  function hideVariantsStyleString() {
+    return getVariants(props.content)
+      .map((value) => `.variant-${value.testVariationId} { display: none; } `)
+      .join("");
+  }
+
+  onMount(() => {
+    /**
+     * We unmount the non-winning variants post-hydration in Vue.
+     */
+  });
+
+  return (
+    <>
+      <Show when={!props.__isNestedRender && TARGET !== "reactNative"}>
+        <InlinedScript scriptStr={getScriptString()}></InlinedScript>
+      </Show>
+      <Show when={shouldRenderVariants()}>
+        <InlinedStyles
+          id={`variants-styles-${props.content?.id}`}
+          styles={hideVariantsStyleString()}
+        ></InlinedStyles>
+        <InlinedScript scriptStr={variantScriptStr()}></InlinedScript>
+        <For each={getVariants(props.content)}>
+          {(variant, _index) => {
+            const index = _index();
+            return (
+              <ContentComponent
+                key={variant.testVariationId}
+                content={variant}
+                showContent={false}
+                classNameProp={undefined}
+                model={props.model}
+                data={props.data}
+                context={props.context}
+                apiKey={props.apiKey}
+                apiVersion={props.apiVersion}
+                customComponents={props.customComponents}
+                canTrack={props.canTrack}
+                locale={props.locale}
+                includeRefs={props.includeRefs}
+                enrich={props.enrich}
+                isSsrAbTest={shouldRenderVariants()}
+              ></ContentComponent>
+            );
+          }}
+        </For>
+      </Show>
+      <ContentComponent
+        {...{}}
+        content={
+          shouldRenderVariants()
+            ? props.content
+            : handleABTestingSync({
+                item: props.content,
+                canTrack: getDefaultCanTrack(props.canTrack),
+              })
+        }
+        classNameProp={`variant-${props.content?.id}`}
+        showContent={true}
+        model={props.model}
+        data={props.data}
+        context={props.context}
+        apiKey={props.apiKey}
+        apiVersion={props.apiVersion}
+        customComponents={props.customComponents}
+        canTrack={props.canTrack}
+        locale={props.locale}
+        includeRefs={props.includeRefs}
+        enrich={props.enrich}
+        isSsrAbTest={shouldRenderVariants()}
+      ></ContentComponent>
+    </>
+  );
+}
+
+export default ContentVariants;

package/src/components/{render-content-variants → content-variants}/helpers.js

@@ -1,23 +1,43 @@
-import { TARGET } from "../../constants/target";
-import { isBrowser } from "../../functions/is-browser";
-const getVariants = (content) => Object.values((content == null ? void 0 : content.variations) || {});
+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.js";
+import { isBrowser } from "../../functions/is-browser.js";
+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) {
-    return false;
-  }
-  if (!canTrack) {
-    return false;
-  }
-  if (isBrowser()) {
-    return false;
-  }
+  if (TARGET === "reactNative") return false;
+  if (!hasVariants) return false;
+  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 = "";
@@ -33,16 +53,14 @@ function bldrAbTest(contentId, variants, isHydrationTarget2) {
       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);
+        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);
+    const availableIDs = variants.map(vr => vr.id).concat(contentId);
     if (variantInCookie && availableIDs.includes(variantInCookie)) {
       return variantInCookie;
     }
@@ -61,13 +79,15 @@ 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) => {
+    const newStyleStr = variants.concat({
+      id: contentId
+    }).filter(variant => variant.id !== winningVariantId).map(value => {
       return `.variant-${value.id} {  display: none; }
         `;
     }).join("");
@@ -75,6 +95,7 @@ function bldrAbTest(contentId, variants, isHydrationTarget2) {
   }
 }
 function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2) {
+  var _a;
   if (!navigator.cookieEnabled) {
     return;
   }
@@ -83,16 +104,14 @@ function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2)
     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);
+      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 parentDiv = (_a = document.currentScript) == null ? void 0 : _a.parentElement;
   const variantIsDefaultContent = variantContentId === defaultContentId;
   if (variantId === variantContentId) {
     if (variantIsDefaultContent) {
@@ -113,29 +132,27 @@ 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})`;
-};
-export {
-  checkShouldRunVariants,
-  getRenderContentScriptString,
-  getVariants,
-  getVariantsScriptString
+  window.${CONTENT_FN_NAME}("${variationId}", "${contentId}", ${isHydrationTarget})`;
 };
+export { checkShouldRunVariants, getRenderContentScriptString, getScriptString, getVariants, getVariantsScriptString }

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/constants/builder-registered-components.js

@@ -2,16 +2,17 @@ var __defProp = Object.defineProperty;
 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 __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]);
-    }
+  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;
 };
 import { default as Button } from "../blocks/button/button";
@@ -36,19 +37,27 @@ import { default as Img } from "../blocks/img/img";
 import { componentInfo as imgComponentInfo } from "../blocks/img/component-info.js";
 import { default as customCode } from "../blocks/custom-code/custom-code";
 import { componentInfo as customCodeInfo } from "../blocks/custom-code/component-info.js";
-const getDefaultRegisteredComponents = () => [
-  __spreadValues({ component: Button }, buttonComponentInfo),
-  __spreadValues({ component: Columns }, columnsComponentInfo),
-  __spreadValues({ component: customCode }, customCodeInfo),
-  __spreadValues({ component: embed }, embedComponentInfo),
-  __spreadValues({ component: Fragment }, fragmentComponentInfo),
-  __spreadValues({ component: Image }, imageComponentInfo),
-  __spreadValues({ component: Img }, imgComponentInfo),
-  __spreadValues({ component: Section }, sectionComponentInfo),
-  __spreadValues({ component: Symbol }, symbolComponentInfo),
-  __spreadValues({ component: Text }, textComponentInfo),
-  __spreadValues({ component: Video }, videoComponentInfo)
-];
-export {
-  getDefaultRegisteredComponents
-};
+const getDefaultRegisteredComponents = () => [__spreadValues({
+  component: Button
+}, buttonComponentInfo), __spreadValues({
+  component: Columns
+}, columnsComponentInfo), __spreadValues({
+  component: customCode
+}, customCodeInfo), __spreadValues({
+  component: embed
+}, embedComponentInfo), __spreadValues({
+  component: Fragment
+}, fragmentComponentInfo), __spreadValues({
+  component: Image
+}, imageComponentInfo), __spreadValues({
+  component: Img
+}, imgComponentInfo), __spreadValues({
+  component: Section
+}, sectionComponentInfo), __spreadValues({
+  component: Symbol
+}, symbolComponentInfo), __spreadValues({
+  component: Text
+}, textComponentInfo), __spreadValues({
+  component: Video
+}, videoComponentInfo)];
+export { getDefaultRegisteredComponents }

package/src/constants/device-sizes.js

@@ -1,4 +1,4 @@
-import { fastClone } from "../functions/fast-clone";
+import { fastClone } from "../functions/fast-clone.js";
 const SIZES = {
   small: {
     min: 320,
@@ -17,7 +17,10 @@ const SIZES = {
   }
 };
 const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-const getSizesForBreakpoints = ({ small, medium }) => {
+const getSizesForBreakpoints = ({
+  small,
+  medium
+}) => {
   const newSizes = fastClone(SIZES);
   if (!small || !medium) {
     return newSizes;
@@ -42,7 +45,4 @@ const getSizesForBreakpoints = ({ small, medium }) => {
   };
   return newSizes;
 };
-export {
-  getMaxWidthQueryForSize,
-  getSizesForBreakpoints
-};
+export { getMaxWidthQueryForSize, getSizesForBreakpoints }

package/src/constants/sdk-version.js

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

package/src/context/builder.context.js

@@ -8,7 +8,7 @@ var stdin_default = createContext({
   rootState: {},
   apiKey: null,
   apiVersion: void 0,
-  registeredComponents: {},
+  componentInfos: {},
   inheritedStyles: {}
 });
 export {

package/src/functions/apply-patch-with-mutation.js

@@ -0,0 +1,66 @@
+var __defProp = Object.defineProperty;
+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;
+};
+const applyPatchWithMinimalMutationChain = (obj, patch, preserveRoot = false) => {
+  if (Object(obj) !== obj) {
+    return obj;
+  }
+  const {
+    path,
+    op,
+    value
+  } = patch;
+  const pathArr = path.split(/\//);
+  if (pathArr[0] === "") {
+    pathArr.shift();
+  }
+  const newObj = preserveRoot ? obj : __spreadValues({}, obj);
+  let objPart = newObj;
+  for (let i = 0; i < pathArr.length; i++) {
+    const isLast = i === pathArr.length - 1;
+    const property = pathArr[i];
+    if (isLast) {
+      if (op === "replace") {
+        objPart[property] = value;
+      } else if (op === "add") {
+        const index = Number(property);
+        if (Array.isArray(objPart)) {
+          if (property === "-") {
+            objPart.push(value);
+          } else {
+            objPart.splice(index, 0, value);
+          }
+        } else {
+          objPart[property] = value;
+        }
+      } else if (op === "remove") {
+        const index = Number(property);
+        if (Array.isArray(objPart)) {
+          objPart.splice(index, 1);
+        } else {
+          delete objPart[property];
+        }
+      }
+    } else {
+      const nextProperty = pathArr[i + 1];
+      const newPart = Object(objPart[property]) === objPart[property] ? objPart[property] : String(Number(nextProperty)) === nextProperty ? [] : {};
+      objPart = objPart[property] = Array.isArray(newPart) ? [...newPart] : __spreadValues({}, newPart);
+    }
+  }
+  return newObj;
+};
+export { applyPatchWithMinimalMutationChain }

package/src/functions/camel-to-kebab-case.js

@@ -1,4 +1,2 @@
-const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
-export {
-  camelToKebabCase
-};
+const camelToKebabCase = string => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+export { camelToKebabCase }