@builder.io/sdk-react 0.2.0 → 0.2.2

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

@@ -26,6 +26,7 @@ import {
   getContextStateInitialValue,
 } from "./render-content.helpers.js";
 import { TARGET } from "../../constants/target.js";
+import { logger } from "../../helpers/logger.js";
 
 function RenderContent(props) {
   const elementRef = useRef(null);
@@ -233,8 +234,8 @@ function RenderContent(props) {
 
   useEffect(() => {
     if (!props.apiKey) {
-      console.error(
-        "[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."
+      logger.error(
+        "No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."
       );
     }
     if (isBrowser()) {
@@ -280,22 +281,24 @@ function RenderContent(props) {
       // override normal content in preview mode
       if (isPreviewing()) {
         const searchParams = new URL(location.href).searchParams;
-        const searchParamPreview = searchParams.get("builder.preview");
+        const searchParamPreviewModel = searchParams.get("builder.preview");
+        const searchParamPreviewId = searchParams.get(
+          `builder.preview.${searchParamPreviewModel}`
+        );
         const previewApiKey =
           searchParams.get("apiKey") || searchParams.get("builder.space");
 
         /**
          * Make sure that:
          * - the preview model name is the same as the one we're rendering, since there can be multiple models rendered  *  at the same time, e.g. header/page/footer.  * - the API key is the same, since we don't want to preview content from other organizations.
-         *
-         * TO-DO: should we check that the preview item ID is the same as the initial one being rendered? Or would
-         * this break scenarios where the item is not published yet?
+         * - if there is content, that the preview ID is the same as that of the one we receive.
          *
          * TO-DO: should we only update the state when there is a change?
          **/
         if (
-          searchParamPreview === props.model &&
-          previewApiKey === props.apiKey
+          searchParamPreviewModel === props.model &&
+          previewApiKey === props.apiKey &&
+          (!props.content || searchParamPreviewId === props.content.id)
         ) {
           getContent({
             model: props.model,

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

@@ -2,16 +2,16 @@ import * as React from "react";
 import { TARGET } from "../constants/target.js";
 
 function RenderInlinedStyles(props) {
-  function injectedStyleScript() {
-    return `<${tag()}>${props.styles}</${tag()}>`;
-  }
-
   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()}>`;
+  }
+
   const TagRef = tag();
 
   return (

package/packages/react/src/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/packages/react/src/functions/get-content/index.js

@@ -37,13 +37,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;
@@ -51,24 +52,29 @@ 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);
       }
-    } catch (e) {
-      console.error("[Builder.io]: Could not setup A/B testing. ", e);
+      return content;
+    } catch (error) {
+      logger.error("Error fetching data. ", error);
+      return null;
     }
-    return content;
   });
 }
 export {

package/packages/react/src/functions/track/index.js

@@ -50,6 +50,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";
@@ -95,7 +96,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/packages/react/src/helpers/logger.js

@@ -0,0 +1,9 @@
+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/packages/rsc/src/blocks/symbol/symbol.jsx

@@ -3,6 +3,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 _context = { ...props["_context"] };
@@ -51,10 +52,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/rsc/src/components/render-block/block-styles.jsx

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

package/packages/rsc/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/rsc/src/components/render-block/render-block.jsx

@@ -2,11 +2,11 @@ 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,
+  getProxyState,
   getRepeatItemData,
   isEmptyHtmlElement,
 } from "./render-block.helpers.js";
@@ -15,7 +15,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 _context = { ...props["_context"] };
@@ -25,9 +24,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
@@ -38,38 +38,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,
       });
     },
@@ -88,28 +71,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,
@@ -123,10 +84,6 @@ function RenderBlock(props) {
         ? state.useBlock.children ?? []
         : [];
     },
-    repeatItemData: getRepeatItemData({
-      block: props.block,
-      context: props.context,
-    }),
     get childrenContext() {
       const getInheritedTextStyles = () => {
         if (TARGET !== "reactNative") {
@@ -151,6 +108,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;

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

@@ -25,6 +25,7 @@ import {
   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"] };

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

@@ -5,14 +5,14 @@ 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;

package/packages/rsc/src/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/packages/rsc/src/functions/get-content/index.js

@@ -37,13 +37,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;
@@ -51,24 +52,29 @@ 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);
       }
-    } catch (e) {
-      console.error("[Builder.io]: Could not setup A/B testing. ", e);
+      return content;
+    } catch (error) {
+      logger.error("Error fetching data. ", error);
+      return null;
     }
-    return content;
   });
 }
 export {

package/packages/rsc/src/functions/track/index.js

@@ -50,6 +50,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";
@@ -95,7 +96,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/packages/rsc/src/helpers/logger.js

@@ -0,0 +1,9 @@
+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/packages/react/src/functions/get-block-tag.js

@@ -1,6 +0,0 @@
-function getBlockTag(block) {
-  return block.tagName || "div";
-}
-export {
-  getBlockTag
-};

package/packages/rsc/src/functions/get-block-tag.js

@@ -1,6 +0,0 @@
-function getBlockTag(block) {
-  return block.tagName || "div";
-}
-export {
-  getBlockTag
-};

package/src/blocks/BaseText.jsx

@@ -1,9 +0,0 @@
-import * as React from "react";
-import { useContext } from "react";
-import BuilderContext from "../context/builder.context.js";
-
-export default function BaseText(props) {
-  const builderContext = useContext(BuilderContext);
-
-  return <span style={builderContext.inheritedStyles}>{props.text}</span>;
-}

package/src/blocks/button/button.jsx

@@ -1,27 +0,0 @@
-import * as React from "react";
-
-export default function Button(props) {
-  return (
-    <>
-      {props.link ? (
-        <>
-          <a
-            role="button"
-            {...props.attributes}
-            href={props.link}
-            target={props.openLinkInNewTab ? "_blank" : undefined}
-          >
-            {props.text}
-          </a>
-        </>
-      ) : (
-        <button className="button-7028b0a4" {...props.attributes}>
-          {props.text}
-        </button>
-      )}
-      <style>{`.button-7028b0a4 {
-all: unset;
-}`}</style>
-    </>
-  );
-}

package/src/blocks/button/component-info.js

@@ -1,41 +0,0 @@
-const componentInfo = {
-  name: "Core:Button",
-  builtIn: true,
-  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
-  defaultStyles: {
-    appearance: "none",
-    paddingTop: "15px",
-    paddingBottom: "15px",
-    paddingLeft: "25px",
-    paddingRight: "25px",
-    backgroundColor: "#000000",
-    color: "white",
-    borderRadius: "4px",
-    textAlign: "center",
-    cursor: "pointer"
-  },
-  inputs: [
-    {
-      name: "text",
-      type: "text",
-      defaultValue: "Click me!",
-      bubble: true
-    },
-    {
-      name: "link",
-      type: "url",
-      bubble: true
-    },
-    {
-      name: "openLinkInNewTab",
-      type: "boolean",
-      defaultValue: false,
-      friendlyName: "Open link in new tab"
-    }
-  ],
-  static: true,
-  noWrap: true
-};
-export {
-  componentInfo
-};