@builder.io/sdk-react-native 0.2.1 → 0.2.3

package/dist/blocks/button/button.js

@@ -32,8 +32,9 @@ const react_native_1 = require("react-native");
 function Button(props) {
     return (React.createElement(React.Fragment, null, props.link ? (React.createElement(React.Fragment, null,
         React.createElement(react_native_1.View, { role: "button", ...props.attributes, href: props.link, target: props.openLinkInNewTab ? "_blank" : undefined },
-            React.createElement(BaseText_1.default, null, props.text)))) : (React.createElement(react_native_1.View, { ...props.attributes, style: styles.view1 },
-        React.createElement(BaseText_1.default, null, props.text)))));
+            React.createElement(BaseText_1.default, null, props.text)))) : (React.createElement(React.Fragment, null,
+        React.createElement(react_native_1.View, { ...props.attributes, style: styles.view1 },
+            React.createElement(BaseText_1.default, null, props.text))))));
 }
 const styles = react_native_1.StyleSheet.create({ view1: { all: "unset" } });
 exports.default = Button;

package/dist/blocks/columns/columns.js

@@ -111,30 +111,30 @@ function Columns(props) {
     }
     function columnsStyles() {
         return `
-    @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
-      .${props.builderBlock.id}-breakpoints {
-        flex-direction: var(--flex-dir-tablet);
-        align-items: stretch;
-      }
+        @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
+          .${props.builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir-tablet);
+            align-items: stretch;
+          }
 
-      .${props.builderBlock.id}-breakpoints > .builder-column {
-        width: var(--column-width-tablet) !important;
-        margin-left: var(--column-margin-left-tablet) !important;
-      }
-    }
+          .${props.builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-tablet) !important;
+            margin-left: var(--column-margin-left-tablet) !important;
+          }
+        }
 
-    @media (max-width: ${getWidthForBreakpointSize("small")}px) {
-      .${props.builderBlock.id}-breakpoints {
-        flex-direction: var(--flex-dir);
-        align-items: stretch;
-      }
+        @media (max-width: ${getWidthForBreakpointSize("small")}px) {
+          .${props.builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir);
+            align-items: stretch;
+          }
 
-      .${props.builderBlock.id}-breakpoints > .builder-column {
-        width: var(--column-width-mobile) !important;
-        margin-left: var(--column-margin-left-mobile) !important;
-      }
-    },
-  `;
+          .${props.builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-mobile) !important;
+            margin-left: var(--column-margin-left-mobile) !important;
+          }
+        },
+      `;
     }
     const builderContext = (0, react_1.useContext)(builder_context_js_1.default);
     return (React.createElement(react_native_1.View, { style: columnsCssVars(), dataSet: {

package/dist/blocks/symbol/symbol.js

@@ -33,6 +33,7 @@ const render_content_1 = __importDefault(require("../../components/render-conten
 const builder_context_js_1 = __importDefault(require("../../context/builder.context.js"));
 const index_js_1 = require("../../functions/get-content/index.js");
 const target_1 = require("../../constants/target");
+const logger_1 = require("../../helpers/logger");
 function Symbol(props) {
     var _a, _b, _c;
     const [className, setClassName] = (0, react_1.useState)(() => {
@@ -81,7 +82,7 @@ function Symbol(props) {
                 }
             })
                 .catch((err) => {
-                console.error("[Builder.io]: Could not fetch symbol content: ", err);
+                logger_1.logger.error("Could not fetch symbol content: ", err);
             });
         }
     }

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

@@ -40,7 +40,6 @@ const target_js_1 = require("../../constants/target.js");
 const extract_text_styles_js_1 = require("../../functions/extract-text-styles.js");
 const render_component_1 = __importDefault(require("./render-component"));
 const get_react_native_block_styles_js_1 = require("../../functions/get-react-native-block-styles.js");
-const nullable_js_1 = require("../../helpers/nullable.js");
 function RenderBlock(props) {
     var _a, _b;
     const [component, setComponent] = (0, react_1.useState)(() => (0, render_block_helpers_js_1.getComponent)({
@@ -63,10 +62,10 @@ function RenderBlock(props) {
     }
     const [tag, setTag] = (0, react_1.useState)(() => props.block.tagName || "div");
     function canShowBlock() {
-        if ((0, nullable_js_1.checkIsDefined)(useBlock().hide)) {
+        if ("hide" in useBlock()) {
             return !useBlock().hide;
         }
-        if ((0, nullable_js_1.checkIsDefined)(useBlock().show)) {
+        if ("show" in useBlock()) {
             return useBlock().show;
         }
         return true;
@@ -158,6 +157,7 @@ function RenderBlock(props) {
             React.createElement(react_native_1.View, { ...attributes(), ...actions() },
                 React.createElement(render_component_1.default, { ...renderComponentProps() }), (_a = childrenWithoutParentComponent()) === null || _a === void 0 ? void 0 :
                 _a.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: childrenContext() }))), (_b = childrenWithoutParentComponent()) === null || _b === void 0 ? void 0 :
-                _b.map((child) => (React.createElement(block_styles_1.default, { key: "block-style-" + child.id, block: child, context: childrenContext() })))))) : null)) : (React.createElement(render_component_1.default, { ...renderComponentProps() })))) : null));
+                _b.map((child) => (React.createElement(block_styles_1.default, { key: "block-style-" + child.id, block: child, context: childrenContext() })))))) : null)) : (React.createElement(React.Fragment, null,
+        React.createElement(render_component_1.default, { ...renderComponentProps() }))))) : null));
 }
 exports.default = RenderBlock;

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

@@ -40,6 +40,7 @@ function RenderRepeatedBlock(props) {
             apiKey: props.repeatContext.apiKey,
             registeredComponents: props.repeatContext.registeredComponents,
             inheritedStyles: props.repeatContext.inheritedStyles,
+            apiVersion: props.repeatContext.apiVersion,
         } },
         React.createElement(render_block_1.default, { block: props.block, context: props.repeatContext })));
 }

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

@@ -43,16 +43,16 @@ ${(0, render_styles_helpers_2.getFontCss)({
     })}
 
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
-margin: 0;
+  margin: 0;
 }
 .builder-text > p, .builder-text > .builder-paragraph {
-color: inherit;
-line-height: inherit;
-letter-spacing: inherit;
-font-weight: inherit;
-font-size: inherit;
-text-align: inherit;
-font-family: inherit;
+  color: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  text-align: inherit;
+  font-family: inherit;
 }
 `);
     return React.createElement(render_inlined_styles_1.default, { styles: injectedStyles });

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

@@ -46,6 +46,7 @@ const nullable_js_1 = require("../../helpers/nullable.js");
 const interaction_js_1 = require("../../functions/track/interaction.js");
 const render_content_helpers_js_1 = require("./render-content.helpers.js");
 const target_js_1 = require("../../constants/target.js");
+const logger_js_1 = require("../../helpers/logger.js");
 function RenderContent(props) {
     var _a, _b, _c, _d, _e;
     const elementRef = (0, react_1.useRef)(null);
@@ -219,7 +220,7 @@ function RenderContent(props) {
     }
     (0, react_1.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_js_1.logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
         }
         if ((0, is_browser_js_1.isBrowser)()) {
             if ((0, is_editing_js_1.isEditing)()) {
@@ -259,19 +260,19 @@ function RenderContent(props) {
             // override normal content in preview mode
             if ((0, is_previewing_js_1.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) {
+                if (searchParamPreviewModel === props.model &&
+                    previewApiKey === props.apiKey &&
+                    (!props.content || searchParamPreviewId === props.content.id)) {
                     (0, index_js_1.getContent)({
                         model: props.model,
                         apiKey: props.apiKey,
@@ -318,6 +319,7 @@ function RenderContent(props) {
             apiKey: props.apiKey,
             apiVersion: props.apiVersion,
             registeredComponents: allRegisteredComponents,
+            inheritedStyles: {},
         } }, useContent ? (React.createElement(React.Fragment, null,
         React.createElement(react_native_1.ScrollView, { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": useContent === null || useContent === void 0 ? void 0 : useContent.id, "builder-model": props.model },
             target_js_1.TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,

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

@@ -23,9 +23,12 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const target_js_1 = require("../constants/target.js");
 const css_js_1 = require("../helpers/css.js");
 const transform_block_properties_js_1 = require("./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/functions/get-content/index.js

@@ -42,13 +42,14 @@ var __async = (__this, __arguments, generator) => {
         step((generator = generator.apply(__this, __arguments)).next());
     });
 };
+const logger_js_1 = require("../../helpers/logger.js");
 const get_fetch_js_1 = require("../get-fetch.js");
 const ab_testing_js_1 = require("./ab-testing.js");
 const generate_content_url_js_1 = require("./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;
@@ -57,25 +58,31 @@ function getContent(options) {
 exports.getContent = getContent;
 function getAllContent(options) {
     return __async(this, null, function* () {
-        const url = (0, generate_content_url_js_1.generateContentUrl)(options);
-        const res = yield (0, get_fetch_js_1.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 (0, ab_testing_js_1.handleABTesting)({ item, canTrack });
+            const url = (0, generate_content_url_js_1.generateContentUrl)(options);
+            const res = yield (0, get_fetch_js_1.fetch)(url.href);
+            const content = yield res.json();
+            if ("status" in content && !("results" in content)) {
+                logger_js_1.logger.error("Error fetching data. ", { url, content, options });
+                return content;
+            }
+            const canTrack = options.canTrack !== false;
+            try {
+                if (canTrack && Array.isArray(content.results)) {
+                    for (const item of content.results) {
+                        yield (0, ab_testing_js_1.handleABTesting)({ item, canTrack });
+                    }
                 }
             }
+            catch (e) {
+                logger_js_1.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_js_1.logger.error("Error fetching data. ", error);
+            return null;
         }
-        return content;
     });
 }
 exports.getAllContent = getAllContent;

package/dist/functions/track/index.js

@@ -55,6 +55,7 @@ var __async = (__this, __arguments, generator) => {
     });
 };
 const target_js_1 = require("../../constants/target.js");
+const logger_js_1 = require("../../helpers/logger.js");
 const sessionId_js_1 = require("../../helpers/sessionId.js");
 const visitorId_js_1 = require("../../helpers/visitorId.js");
 const is_browser_js_1 = require("../is-browser.js");
@@ -93,7 +94,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_js_1.logger.error("Missing API key for track call. Please provide your API key.");
             return;
         }
         if (!eventProps.canTrack) {

package/dist/helpers/logger.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.logger = void 0;
+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)
+};
+exports.logger = logger;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/blocks/button/button.jsx

@@ -24,9 +24,11 @@ function Button(props) {
           </View>
         </>
       ) : (
-        <View {...props.attributes} style={styles.view1}>
-          <BaseText>{props.text}</BaseText>
-        </View>
+        <>
+          <View {...props.attributes} style={styles.view1}>
+            <BaseText>{props.text}</BaseText>
+          </View>
+        </>
       )}
     </>
   );

package/src/blocks/columns/columns.jsx

@@ -107,30 +107,30 @@ function Columns(props) {
 
   function columnsStyles() {
     return `
-    @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
-      .${props.builderBlock.id}-breakpoints {
-        flex-direction: var(--flex-dir-tablet);
-        align-items: stretch;
-      }
-
-      .${props.builderBlock.id}-breakpoints > .builder-column {
-        width: var(--column-width-tablet) !important;
-        margin-left: var(--column-margin-left-tablet) !important;
-      }
-    }
-
-    @media (max-width: ${getWidthForBreakpointSize("small")}px) {
-      .${props.builderBlock.id}-breakpoints {
-        flex-direction: var(--flex-dir);
-        align-items: stretch;
-      }
-
-      .${props.builderBlock.id}-breakpoints > .builder-column {
-        width: var(--column-width-mobile) !important;
-        margin-left: var(--column-margin-left-mobile) !important;
-      }
-    },
-  `;
+        @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
+          .${props.builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir-tablet);
+            align-items: stretch;
+          }
+
+          .${props.builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-tablet) !important;
+            margin-left: var(--column-margin-left-tablet) !important;
+          }
+        }
+
+        @media (max-width: ${getWidthForBreakpointSize("small")}px) {
+          .${props.builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir);
+            align-items: stretch;
+          }
+
+          .${props.builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-mobile) !important;
+            margin-left: var(--column-margin-left-mobile) !important;
+          }
+        },
+      `;
   }
 
   const builderContext = useContext(BuilderContext);

package/src/blocks/symbol/symbol.jsx

@@ -12,6 +12,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(() =>
@@ -61,7 +62,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/src/components/render-block/render-block.jsx

@@ -24,7 +24,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(() =>
@@ -55,10 +54,10 @@ 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;
@@ -199,7 +198,9 @@ function RenderBlock(props) {
               ) : null}
             </>
           ) : (
-            <RenderComponent {...renderComponentProps()} />
+            <>
+              <RenderComponent {...renderComponentProps()} />
+            </>
           )}
         </>
       ) : null}

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

@@ -22,6 +22,7 @@ function RenderRepeatedBlock(props) {
         apiKey: props.repeatContext.apiKey,
         registeredComponents: props.repeatContext.registeredComponents,
         inheritedStyles: props.repeatContext.inheritedStyles,
+        apiVersion: props.repeatContext.apiVersion,
       }}
     >
       <RenderBlock block={props.block} context={props.repeatContext} />

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

@@ -24,16 +24,16 @@ ${getFontCss({
 })}
 
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
-margin: 0;
+  margin: 0;
 }
 .builder-text > p, .builder-text > .builder-paragraph {
-color: inherit;
-line-height: inherit;
-letter-spacing: inherit;
-font-weight: inherit;
-font-size: inherit;
-text-align: inherit;
-font-family: inherit;
+  color: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  text-align: inherit;
+  font-family: inherit;
 }
 `
   );

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

@@ -34,6 +34,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);
@@ -241,8 +242,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()) {
@@ -288,22 +289,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,
@@ -359,6 +362,7 @@ function RenderContent(props) {
         apiKey: props.apiKey,
         apiVersion: props.apiVersion,
         registeredComponents: allRegisteredComponents,
+        inheritedStyles: {},
       }}
     >
       {useContent ? (

package/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/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. ", { url, 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/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/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
+};