@builder.io/sdk-react 0.2.0 → 0.2.2

package/dist/rsc/components/render-block/render-block.js

@@ -2,16 +2,14 @@ import * as React from "react";
 import { getBlockActions } from "../../functions/get-block-actions.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
 import { getBlockProperties } from "../../functions/get-block-properties.js";
-import { getBlockTag } from "../../functions/get-block-tag.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import BlockStyles from "./block-styles";
-import { getComponent, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
+import { getComponent, getProxyState, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
 import RenderRepeatedBlock from "./render-repeated-block";
 import { TARGET } from "../../constants/target.js";
 import { extractTextStyles } from "../../functions/extract-text-styles.js";
 import RenderComponent from "./render-component";
 import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
-import { checkIsDefined } from "../../helpers/nullable.js";
 function RenderBlock(props) {
     const _context = { ...props["_context"] };
     const state = {
@@ -19,9 +17,10 @@ function RenderBlock(props) {
             block: props.block,
             context: props.context,
         }),
-        get tag() {
-            return getBlockTag(state.useBlock);
-        },
+        repeatItemData: getRepeatItemData({
+            block: props.block,
+            context: props.context,
+        }),
         get useBlock() {
             return state.repeatItemData
                 ? props.block
@@ -32,35 +31,21 @@ function RenderBlock(props) {
                     shouldEvaluateBindings: true,
                 });
         },
+        tag: props.block.tagName || "div",
         get canShowBlock() {
-            if (checkIsDefined(state.useBlock.hide)) {
+            if ("hide" in state.useBlock) {
                 return !state.useBlock.hide;
             }
-            if (checkIsDefined(state.useBlock.show)) {
+            if ("show" in state.useBlock) {
                 return state.useBlock.show;
             }
             return true;
         },
-        get proxyState() {
-            if (typeof Proxy === "undefined") {
-                console.error("no Proxy available in this environment, cannot proxy state.");
-                return props.context.state;
-            }
-            const useState = new Proxy(props.context.state, {
-                set: (obj, prop, value) => {
-                    // set the value on the state object, so that the event handler instantly gets the update.
-                    obj[prop] = value;
-                    // set the value in the context, so that the rest of the app gets the update.
-                    props.context.setState?.(obj);
-                    return true;
-                },
-            });
-            return useState;
-        },
+        proxyState: getProxyState(props.context),
         get actions() {
             return getBlockActions({
                 block: state.useBlock,
-                state: state.proxyState,
+                state: TARGET === "qwik" ? props.context.state : state.proxyState,
                 context: props.context.context,
             });
         },
@@ -79,28 +64,6 @@ function RenderBlock(props) {
                     : {}),
             };
         },
-        get renderComponentProps() {
-            return {
-                blockChildren: state.useBlock.children ?? [],
-                componentRef: state.component?.component,
-                componentOptions: {
-                    ...getBlockComponentOptions(state.useBlock),
-                    /**
-                     * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
-                     * they are provided to the component itself directly.
-                     */
-                    ...(!state.component?.noWrap
-                        ? {}
-                        : {
-                            attributes: {
-                                ...state.attributes,
-                                ...state.actions,
-                            },
-                        }),
-                },
-                context: state.childrenContext,
-            };
-        },
         get childrenWithoutParentComponent() {
             /**
              * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
@@ -113,10 +76,6 @@ function RenderBlock(props) {
                 ? state.useBlock.children ?? []
                 : [];
         },
-        repeatItemData: getRepeatItemData({
-            block: props.block,
-            context: props.context,
-        }),
         get childrenContext() {
             const getInheritedTextStyles = () => {
                 if (TARGET !== "reactNative") {
@@ -139,6 +98,28 @@ function RenderBlock(props) {
                 inheritedStyles: getInheritedTextStyles(),
             };
         },
+        get renderComponentProps() {
+            return {
+                blockChildren: state.useBlock.children ?? [],
+                componentRef: state.component?.component,
+                componentOptions: {
+                    ...getBlockComponentOptions(state.useBlock),
+                    /**
+                     * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
+                     * they are provided to the component itself directly.
+                     */
+                    ...(!state.component?.noWrap
+                        ? {}
+                        : {
+                            attributes: {
+                                ...state.attributes,
+                                ...state.actions,
+                            },
+                        }),
+                },
+                context: state.childrenContext,
+            };
+        },
     };
     const TagRef = state.tag;
     return (React.createElement(React.Fragment, null, state.canShowBlock ? (React.createElement(React.Fragment, null, !state.component?.noWrap ? (React.createElement(React.Fragment, null,

package/dist/rsc/components/render-content/render-content.js

@@ -16,6 +16,7 @@ import { checkIsDefined } from "../../helpers/nullable.js";
 import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
 import { getContentInitialValue, getContextStateInitialValue, } from "./render-content.helpers.js";
 import { TARGET } from "../../constants/target.js";
+import { logger } from "../../helpers/logger.js";
 function RenderContent(props) {
     const _context = { ...props["_context"] };
     const state = {

package/dist/rsc/components/render-content-variants/helpers.js

@@ -0,0 +1,99 @@
+const variantScriptFn = function main(contentId, variants) {
+    console.log("Running variant script", JSON.stringify({ contentId, variants }));
+    if (!navigator.cookieEnabled) {
+        console.log("Cookies are disabled, skipping variant script");
+        return;
+    }
+    const templateSelectorById = (id) => `template[data-template-variant-id="${id}"]`;
+    function removeTemplates() {
+        console.log("Removing variants");
+        variants.forEach((template) => {
+            const el2 = document.querySelector(templateSelectorById(template.id));
+            if (el2) {
+                console.log("Removing variant", template.id);
+                el2.remove();
+            }
+        });
+        const el = document.getElementById(`variants-script-${contentId}`);
+        if (el) {
+            console.log("Removing variant script");
+            el.remove();
+        }
+    }
+    if (typeof document.createElement("template").content === "undefined") {
+        console.log("Template polyfill not found, skipping variant script");
+        removeTemplates();
+        return;
+    }
+    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;
+    }
+    function getAndSetVariantId() {
+        const cookieName = `builder.tests.${contentId}`;
+        const variantInCookie = getCookie(cookieName);
+        const availableIDs = variants.map((vr) => vr.id).concat(contentId);
+        if (variantInCookie && availableIDs.indexOf(variantInCookie) > -1) {
+            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 variantId = getAndSetVariantId();
+    if (variantId !== contentId) {
+        console.log("Variant found", variantId);
+        const winningTemplate = document.querySelector(templateSelectorById(variantId));
+        console.log("winningTemplate", winningTemplate);
+        if (!winningTemplate) {
+            console.log("No template found for variant", variantId);
+            console.log("selector: ", templateSelectorById(variantId));
+            return;
+        }
+        const templatesParent = winningTemplate.parentNode;
+        if (templatesParent) {
+            const defaultContent = templatesParent.querySelector(`div[builder-content-id="${contentId}"]`);
+            templatesParent.replaceChild(winningTemplate.content.firstElementChild, defaultContent);
+        }
+    }
+    else if (variants.length > 0) {
+        console.log("No variant found, removing all variants");
+    }
+    removeTemplates();
+    console.log("Variant script complete");
+};
+const getVariantsScriptString = (variants, contentId) => {
+    const fnStr = variantScriptFn.toString().replace(/\s+/g, " ");
+    return `
+  ${fnStr}
+  main("${contentId}", ${JSON.stringify(variants)})
+  `;
+};
+export { getVariantsScriptString };

package/dist/rsc/components/render-content-variants/render-content-variants.js

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { useEffect } from "react";
+import { isBrowser } from "../../functions/is-browser";
+import { getVariantsScriptString } from "./helpers";
+import RenderContent from "../render-content/render-content";
+import { checkIsDefined } from "../../helpers/nullable";
+import { handleABTestingSync } from "../../helpers/ab-tests";
+import { TARGET } from "../../constants/target";
+function RenderContentVariants(props) {
+    const _context = { ...props["_context"] };
+    const state = {
+        variantScriptStr: getVariantsScriptString(Object.values(props.content?.variations || {}).map((value) => ({
+            id: value.id,
+            testRatio: value.testRatio,
+        })), props.content?.id || ""),
+        contentToUse: ((isBrowser() && props.canTrack) || !isBrowser()) &&
+            Object.keys(props.content?.variations || {}).length > 0
+            ? undefined
+            : handleABTestingSync({
+                item: props.content,
+                canTrack: checkIsDefined(props.canTrack) ? props.canTrack : true,
+            }),
+        shouldRenderVariants: ((isBrowser() && props.canTrack) || !isBrowser()) &&
+            Object.keys(props.content?.variations || {}).length > 0,
+        variants: null,
+    };
+    useEffect(() => {
+        if (TARGET === "svelte" && state.shouldRenderVariants) {
+            // get first template in loop
+            const templates = document.querySelectorAll(`template[data-template-variant-id="${state.variants[0]?.id}"]`);
+            const lastTemplate = templates[templates.length - 1];
+            // create and append script as sibling of template
+            const script = document.createElement("script");
+            script.id = `variants-script-${props.content?.id}`;
+            script.innerHTML = state.variantScriptStr;
+            lastTemplate?.parentNode?.append(script, lastTemplate);
+        }
+    }, []);
+    return (React.createElement(React.Fragment, null, state.shouldRenderVariants ? (React.createElement(React.Fragment, null,
+        Object.values(props.content.variations)?.map((variant) => (React.createElement("template", { key: variant?.id, "data-template-variant-id": variant?.id },
+            React.createElement(RenderContent, { content: variant, apiKey: props.apiKey, apiVersion: props.apiVersion, canTrack: props.canTrack, customComponents: props.customComponents, _context: _context })))),
+        React.createElement("script", { id: `variants-script-${props.content?.id}`, dangerouslySetInnerHTML: { __html: state.variantScriptStr } }),
+        React.createElement(RenderContent, { content: state.contentToUse, apiKey: props.apiKey, apiVersion: props.apiVersion, canTrack: props.canTrack, customComponents: props.customComponents, _context: _context }))) : (React.createElement(RenderContent, { content: state.contentToUse, apiKey: props.apiKey, apiVersion: props.apiVersion, canTrack: props.canTrack, customComponents: props.customComponents, _context: _context }))));
+}
+export default RenderContentVariants;

package/dist/rsc/components/render-inlined-styles.js

@@ -3,14 +3,14 @@ import { TARGET } from "../constants/target.js";
 function RenderInlinedStyles(props) {
     const _context = { ...props["_context"] };
     const state = {
-        get injectedStyleScript() {
-            return `<${state.tag}>${props.styles}</${state.tag}>`;
-        },
         get 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";
         },
+        get injectedStyleScript() {
+            return `<${state.tag}>${props.styles}</${state.tag}>`;
+        },
     };
     const TagRef = state.tag;
     return (React.createElement(React.Fragment, null, TARGET === "svelte" || TARGET === "qwik" ? (React.createElement(React.Fragment, null,

package/dist/rsc/functions/get-block-properties.js

@@ -20,9 +20,12 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { TARGET } from "../constants/target.js";
 import { convertStyleMapToCSSArray } from "../helpers/css.js";
 import { transformBlockProperties } from "./transform-block-properties.js";
+const extractRelevantRootBlockProperties = (block) => {
+    return { href: block.href };
+};
 function getBlockProperties(block) {
     var _a;
-    const properties = __spreadProps(__spreadValues({}, block.properties), {
+    const properties = __spreadProps(__spreadValues(__spreadValues({}, extractRelevantRootBlockProperties(block)), block.properties), {
         "builder-id": block.id,
         style: getStyleAttribute(block.style),
         class: [block.id, "builder-block", block.class, (_a = block.properties) == null ? void 0 : _a.class].filter(Boolean).join(" ")

package/dist/rsc/functions/get-content/index.js

@@ -39,13 +39,14 @@ var __async = (__this, __arguments, generator) => {
         step((generator = generator.apply(__this, __arguments)).next());
     });
 };
+import { logger } from "../../helpers/logger.js";
 import { fetch } from "../get-fetch.js";
 import { handleABTesting } from "./ab-testing.js";
 import { generateContentUrl } from "./generate-content-url.js";
 function getContent(options) {
     return __async(this, null, function* () {
         const allContent = yield getAllContent(__spreadProps(__spreadValues({}, options), { limit: 1 }));
-        if ("results" in allContent) {
+        if (allContent && "results" in allContent) {
             return (allContent == null ? void 0 : allContent.results[0]) || null;
         }
         return null;
@@ -53,25 +54,31 @@ function getContent(options) {
 }
 function getAllContent(options) {
     return __async(this, null, function* () {
-        const url = generateContentUrl(options);
-        const res = yield fetch(url.href);
-        const content = yield res.json();
-        if ("status" in content && !("results" in content)) {
-            console.error("[Builder.io]: Error fetching data. ", content, options);
-            return content;
-        }
-        const canTrack = options.canTrack !== false;
         try {
-            if (canTrack && Array.isArray(content.results)) {
-                for (const item of content.results) {
-                    yield handleABTesting({ item, canTrack });
+            const url = generateContentUrl(options);
+            const res = yield fetch(url.href);
+            const content = yield res.json();
+            if ("status" in content && !("results" in content)) {
+                logger.error("Error fetching data. ", content, options);
+                return content;
+            }
+            const canTrack = options.canTrack !== false;
+            try {
+                if (canTrack && Array.isArray(content.results)) {
+                    for (const item of content.results) {
+                        yield handleABTesting({ item, canTrack });
+                    }
                 }
             }
+            catch (e) {
+                logger.error("Could not setup A/B testing. ", e);
+            }
+            return content;
         }
-        catch (e) {
-            console.error("[Builder.io]: Could not setup A/B testing. ", e);
+        catch (error) {
+            logger.error("Error fetching data. ", error);
+            return null;
         }
-        return content;
     });
 }
 export { getAllContent, getContent };

package/dist/rsc/functions/track/index.js

@@ -52,6 +52,7 @@ var __async = (__this, __arguments, generator) => {
     });
 };
 import { TARGET } from "../../constants/target.js";
+import { logger } from "../../helpers/logger.js";
 import { getSessionId } from "../../helpers/sessionId.js";
 import { getVisitorId } from "../../helpers/visitorId.js";
 import { isBrowser } from "../is-browser.js";
@@ -90,7 +91,7 @@ const createEvent = (_a) => __async(void 0, null, function* () {
 function _track(eventProps) {
     return __async(this, null, function* () {
         if (!eventProps.apiKey) {
-            console.error("[Builder.io]: Missing API key for track call. Please provide your API key.");
+            logger.error("Missing API key for track call. Please provide your API key.");
             return;
         }
         if (!eventProps.canTrack) {

package/dist/rsc/helpers/logger.js

@@ -0,0 +1,7 @@
+const MSG_PREFIX = "[Builder.io]: ";
+const logger = {
+    log: (...message) => console.log(MSG_PREFIX, ...message),
+    error: (...message) => console.error(MSG_PREFIX, ...message),
+    warn: (...message) => console.warn(MSG_PREFIX, ...message)
+};
+export { logger };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react",
   "description": "Builder.io SDK for React",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "main": "src/index.js",
   "type": "module",
   "exports": {

package/packages/react/src/blocks/symbol/symbol.jsx

@@ -4,6 +4,7 @@ import RenderContent from "../../components/render-content/render-content";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { TARGET } from "../../constants/target";
+import { logger } from "../../helpers/logger";
 
 function Symbol(props) {
   const [className, setClassName] = useState(() =>
@@ -53,7 +54,7 @@ function Symbol(props) {
           }
         })
         .catch((err) => {
-          console.error("[Builder.io]: Could not fetch symbol content: ", err);
+          logger.error("Could not fetch symbol content: ", err);
         });
     }
   }

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

@@ -40,6 +40,9 @@ function BlockStyles(props) {
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
     const className = useBlock().id;
+    if (!className) {
+      return "";
+    }
     const largeStylesClass = largeStyles
       ? createCssClass({
           className,

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

@@ -106,8 +106,24 @@ 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/packages/react/src/components/render-block/render-block.jsx

@@ -3,11 +3,11 @@ import { useState } from "react";
 import { getBlockActions } from "../../functions/get-block-actions.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
 import { getBlockProperties } from "../../functions/get-block-properties.js";
-import { getBlockTag } from "../../functions/get-block-tag.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import BlockStyles from "./block-styles";
 import {
   getComponent,
+  getProxyState,
   getRepeatItemData,
   isEmptyHtmlElement,
 } from "./render-block.helpers.js";
@@ -16,7 +16,6 @@ import { TARGET } from "../../constants/target.js";
 import { extractTextStyles } from "../../functions/extract-text-styles.js";
 import RenderComponent from "./render-component";
 import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
-import { checkIsDefined } from "../../helpers/nullable.js";
 
 function RenderBlock(props) {
   const [component, setComponent] = useState(() =>
@@ -26,9 +25,12 @@ function RenderBlock(props) {
     })
   );
 
-  function tag() {
-    return getBlockTag(useBlock());
-  }
+  const [repeatItemData, setRepeatItemData] = useState(() =>
+    getRepeatItemData({
+      block: props.block,
+      context: props.context,
+    })
+  );
 
   function useBlock() {
     return repeatItemData
@@ -41,40 +43,26 @@ function RenderBlock(props) {
         });
   }
 
+  const [tag, setTag] = useState(() => props.block.tagName || "div");
+
   function canShowBlock() {
-    if (checkIsDefined(useBlock().hide)) {
+    if ("hide" in useBlock()) {
       return !useBlock().hide;
     }
-    if (checkIsDefined(useBlock().show)) {
+    if ("show" in useBlock()) {
       return useBlock().show;
     }
     return true;
   }
 
-  function proxyState() {
-    if (typeof Proxy === "undefined") {
-      console.error(
-        "no Proxy available in this environment, cannot proxy state."
-      );
-      return props.context.state;
-    }
-    const useState = new Proxy(props.context.state, {
-      set: (obj, prop, value) => {
-        // set the value on the state object, so that the event handler instantly gets the update.
-        obj[prop] = value;
-
-        // set the value in the context, so that the rest of the app gets the update.
-        props.context.setState?.(obj);
-        return true;
-      },
-    });
-    return useState;
-  }
+  const [proxyState, setProxyState] = useState(() =>
+    getProxyState(props.context)
+  );
 
   function actions() {
     return getBlockActions({
       block: useBlock(),
-      state: proxyState(),
+      state: TARGET === "qwik" ? props.context.state : proxyState,
       context: props.context.context,
     });
   }
@@ -95,29 +83,6 @@ function RenderBlock(props) {
     };
   }
 
-  function renderComponentProps() {
-    return {
-      blockChildren: useBlock().children ?? [],
-      componentRef: component?.component,
-      componentOptions: {
-        ...getBlockComponentOptions(useBlock()),
-        /**
-         * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
-         * they are provided to the component itself directly.
-         */
-        ...(!component?.noWrap
-          ? {}
-          : {
-              attributes: {
-                ...attributes(),
-                ...actions(),
-              },
-            }),
-      },
-      context: childrenContext(),
-    };
-  }
-
   function childrenWithoutParentComponent() {
     /**
      * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
@@ -130,13 +95,6 @@ function RenderBlock(props) {
     return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
   }
 
-  const [repeatItemData, setRepeatItemData] = useState(() =>
-    getRepeatItemData({
-      block: props.block,
-      context: props.context,
-    })
-  );
-
   function childrenContext() {
     const getInheritedTextStyles = () => {
       if (TARGET !== "reactNative") {
@@ -162,7 +120,30 @@ function RenderBlock(props) {
     };
   }
 
-  const TagRef = tag();
+  function renderComponentProps() {
+    return {
+      blockChildren: useBlock().children ?? [],
+      componentRef: component?.component,
+      componentOptions: {
+        ...getBlockComponentOptions(useBlock()),
+        /**
+         * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
+         * they are provided to the component itself directly.
+         */
+        ...(!component?.noWrap
+          ? {}
+          : {
+              attributes: {
+                ...attributes(),
+                ...actions(),
+              },
+            }),
+      },
+      context: childrenContext(),
+    };
+  }
+
+  const TagRef = tag;
 
   return (
     <>
@@ -170,12 +151,12 @@ function RenderBlock(props) {
         <>
           {!component?.noWrap ? (
             <>
-              {isEmptyHtmlElement(tag()) ? (
+              {isEmptyHtmlElement(tag) ? (
                 <>
                   <TagRef {...attributes()} {...actions()} />
                 </>
               ) : null}
-              {!isEmptyHtmlElement(tag()) && repeatItemData ? (
+              {!isEmptyHtmlElement(tag) && repeatItemData ? (
                 <>
                   {repeatItemData?.map((data, index) => (
                     <RenderRepeatedBlock
@@ -186,7 +167,7 @@ function RenderBlock(props) {
                   ))}
                 </>
               ) : null}
-              {!isEmptyHtmlElement(tag()) && !repeatItemData ? (
+              {!isEmptyHtmlElement(tag) && !repeatItemData ? (
                 <>
                   <TagRef {...attributes()} {...actions()}>
                     <RenderComponent {...renderComponentProps()} />