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

package/dist/rsc/index-helpers/blocks-exports.d.ts

@@ -0,0 +1,11 @@
+import { default as default2 } from "../blocks/button/button";
+import { default as default3 } from "../blocks/columns/columns";
+import { default as default4 } from "../blocks/fragment/fragment";
+import { default as default5 } from "../blocks/image/image";
+import { default as default6 } from "../components/render-blocks";
+import { default as default7 } from "../components/render-content/render-content";
+import { default as default8 } from "../blocks/section/section";
+import { default as default9 } from "../blocks/symbol/symbol";
+import { default as default10 } from "../blocks/text/text";
+import { default as default11 } from "../blocks/video/video";
+export { default2 as Button, default3 as Columns, default4 as Fragment, default5 as Image, default6 as RenderBlocks, default7 as RenderContent, default8 as Section, default9 as Symbol, default10 as Text, default11 as Video };

package/dist/rsc/index-helpers/top-of-file.d.ts

@@ -0,0 +1,2 @@
+export * from "../components/render-content/builder-editing";
+export * from "../constants/builder-registered-components";

package/dist/rsc/index.d.ts

@@ -0,0 +1,11 @@
+export * from "./index-helpers/top-of-file.js";
+export * from "./index-helpers/blocks-exports.js";
+export * from "./functions/is-editing.js";
+export * from "./functions/is-previewing.js";
+export * from "./functions/register-component.js";
+export * from "./functions/register.js";
+export * from "./functions/set-editor-settings.js";
+export * from "./functions/get-content/index.js";
+export * from "./functions/get-builder-search-params/index.js";
+export { track };
+import { track } from "./functions/track/index.js";

package/dist/rsc/scripts/init-editing.d.ts

@@ -0,0 +1,2 @@
+export function registerInsertMenu(): void;
+export function setupBrowserForEditing(options?: {}): void;

package/dist/rsc/types/api-version.d.ts

@@ -0,0 +1 @@
+export const DEFAULT_API_VERSION: "v3";

package/package.json

@@ -1,18 +1,12 @@
 {
   "name": "@builder.io/sdk-react",
   "description": "Builder.io SDK for React",
-  "version": "0.2.1",
-  "main": "src/index.js",
+  "version": "0.2.3-0",
   "type": "module",
   "exports": {
-    ".": {
-      "import": "./dist/react/index.js",
-      "require": "./dist/react/index.js"
-    },
-    "./rsc": {
-      "import": "./dist/rsc/index.js",
-      "require": "./dist/rsc/index.js"
-    }
+    ".": "./dist/react/index.js",
+    "./get-content": "./dist/react/functions/get-content/index.js",
+    "./rsc": "./dist/rsc/index.js"
   },
   "scripts": {
     "build:react": "tsc -p ./tsconfig.react.json",

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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { useContext } from "react";
 import BuilderContext from "../context/builder.context.js";

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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 
 function Button(props) {

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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { useState, useContext } from "react";
 import RenderBlocks from "../../components/render-blocks";

package/packages/react/src/blocks/custom-code/custom-code.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { useState, useRef, useEffect } from "react";
 

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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { useState, useRef, useEffect } from "react";
 import { isJsScript } from "./helpers.js";

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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { useState, useContext, useRef } from "react";
 import RenderBlock from "../../components/render-block/render-block";

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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 
 function FragmentComponent(props) {

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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { getSrcSet } from "./image.helpers.js";
 

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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { isEditing } from "../../functions/is-editing.js";
 

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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { isEditing } from "../../functions/is-editing.js";
 

package/packages/react/src/blocks/raw-text/raw-text.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 
 function RawText(props) {

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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 
 function SectionComponent(props) {

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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { isEditing } from "../../functions/is-editing.js";
 

package/packages/react/src/blocks/submit-button/submit-button.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 
 function SubmitButton(props) {

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

@@ -1,9 +1,11 @@
+"use client";
 import * as React from "react";
 import { useState, useContext, useEffect } from "react";
 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 +55,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/blocks/text/text.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 
 function Text(props) {

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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 
 function Textarea(props) {

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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 
 function Video(props) {

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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import {
   getMaxWidthQueryForSize,

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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { useState } from "react";
 import { getBlockActions } from "../../functions/get-block-actions.js";
@@ -16,7 +17,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(() =>
@@ -47,10 +47,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;

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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import BlockStyles from "./block-styles";
 import RenderBlock from "./render-block";

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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { useContext } from "react";
 import BuilderContext from "../../context/builder.context.js";

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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { useContext } from "react";
 import BuilderContext from "../context/builder.context.js";

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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 
 function BuilderEditing(props) {

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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { useState } from "react";
 import RenderInlinedStyles from "../../render-inlined-styles";

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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { useState, useContext, useRef, useEffect } from "react";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
@@ -26,6 +27,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 +235,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 +282,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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { TARGET } from "../constants/target.js";
 

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. ", { 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/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/render-block.jsx

@@ -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"] };
@@ -41,10 +40,10 @@ function RenderBlock(props) {
     },
     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;

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/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. ", { 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/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/tsconfig.base.json

@@ -2,7 +2,11 @@
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": false,
@@ -13,6 +17,7 @@
     "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react"
+    "jsx": "react",
+    "declaration": true
   }
-}
+}

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>;
-}