@builder.io/sdk-react-native 0.4.4 → 0.5.0

package/src/components/{render-content/render-content.jsx → content/components/enable-editor.jsx}

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import * as React from "react";
 import {
   FlatList,
@@ -9,80 +9,57 @@ import {
   Text,
 } from "react-native";
 import { useState, useContext, useRef, useEffect } from "react";
-import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
-import { evaluate } from "../../functions/evaluate.js";
-import { getContent } from "../../functions/get-content/index.js";
-import { fetch } from "../../functions/get-fetch.js";
-import { isBrowser } from "../../functions/is-browser.js";
-import { isEditing } from "../../functions/is-editing.js";
-import { isPreviewing } from "../../functions/is-previewing.js";
-import {
-  components,
-  createRegisterComponentMessage,
-} from "../../functions/register-component.js";
-import { _track } from "../../functions/track/index.js";
-import RenderBlocks from "../render-blocks";
-import RenderContentStyles from "./components/render-styles";
-import builderContext from "../../context/builder.context.js";
+import { evaluate } from "../../../functions/evaluate";
+import { fetch } from "../../../functions/get-fetch.js";
+import { isBrowser } from "../../../functions/is-browser.js";
+import { isEditing } from "../../../functions/is-editing.js";
+import { createRegisterComponentMessage } from "../../../functions/register-component.js";
+import { _track } from "../../../functions/track/index.js";
+import builderContext from "../../../context/builder.context";
 import {
   registerInsertMenu,
   setupBrowserForEditing,
-} from "../../scripts/init-editing.js";
-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";
-import { getRenderContentScriptString } from "../render-content-variants/helpers.js";
-import { wrapComponentRef } from "./wrap-component-ref.js";
+} from "../../../scripts/init-editing.js";
+import { checkIsDefined } from "../../../helpers/nullable.js";
+import { getInteractionPropertiesForEvent } from "../../../functions/track/interaction.js";
+import { logger } from "../../../helpers/logger.js";
+import { getContent } from "../../../functions/get-content/index.js";
+import { isPreviewing } from "../../../functions/is-previewing.js";
+import { postPreviewContent } from "../../../helpers/preview-lru-cache/set.js";
 
-function RenderContent(props) {
+function EnableEditor(props) {
   const elementRef = useRef(null);
-  const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
+  const [canTrackToUse, setCanTrackToUse] = useState(() =>
+    checkIsDefined(props.canTrack) ? props.canTrack : true
+  );
 
-  const [overrideContent, setOverrideContent] = useState(() => null);
+  const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
 
   function mergeNewContent(newContent) {
-    builderContextSignal.content = {
-      ...builderContextSignal.content,
+    const newContentValue = {
+      ...props.builderContextSignal.content,
       ...newContent,
       data: {
-        ...builderContextSignal.content?.data,
+        ...props.builderContextSignal.content?.data,
         ...newContent?.data,
       },
       meta: {
-        ...builderContextSignal.content?.meta,
+        ...props.builderContextSignal.content?.meta,
         ...newContent?.meta,
         breakpoints:
           newContent?.meta?.breakpoints ||
-          builderContextSignal.content?.meta?.breakpoints,
+          props.builderContextSignal.content?.meta?.breakpoints,
       },
     };
+    props.builderContextSignal.content = newContentValue;
   }
 
-  function setBreakpoints(breakpoints) {
-    builderContextSignal.content = {
-      ...builderContextSignal.content,
-      meta: {
-        ...builderContextSignal.content?.meta,
-        breakpoints,
-      },
-    };
-  }
-
-  const [update, setUpdate] = useState(() => 0);
+  const [lastUpdated, setLastUpdated] = useState(() => 0);
 
-  const [canTrackToUse, setCanTrackToUse] = useState(() =>
-    checkIsDefined(props.canTrack) ? props.canTrack : true
+  const [shouldSendResetCookie, setShouldSendResetCookie] = useState(
+    () => false
   );
 
-  function contentSetState(newRootState) {
-    builderContextSignal.rootState = newRootState;
-  }
-
   function processMessage(event) {
     const { data } = event;
     if (data) {
@@ -90,11 +67,18 @@ function RenderContent(props) {
         case "builder.configureSdk": {
           const messageContent = data.data;
           const { breakpoints, contentId } = messageContent;
-          if (!contentId || contentId !== builderContextSignal.content?.id) {
+          if (
+            !contentId ||
+            contentId !== props.builderContextSignal.content?.id
+          ) {
             return;
           }
           if (breakpoints) {
-            setBreakpoints(breakpoints);
+            mergeNewContent({
+              meta: {
+                breakpoints,
+              },
+            });
           }
           setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
           break;
@@ -114,24 +98,20 @@ function RenderContent(props) {
 
           break;
         }
-        case "builder.patchUpdates": {
-          // TODO
-          break;
-        }
       }
     }
   }
 
   function evaluateJsCode() {
     // run any dynamic JS code attached to content
-    const jsCode = builderContextSignal.content?.data?.jsCode;
+    const jsCode = props.builderContextSignal.content?.data?.jsCode;
     if (jsCode) {
       evaluate({
         code: jsCode,
         context: props.context || {},
         localState: undefined,
-        rootState: builderContextSignal.rootState,
-        rootSetState: contentSetState,
+        rootState: props.builderContextSignal.rootState,
+        rootSetState: props.builderContextSignal.rootSetState,
       });
     }
   }
@@ -141,9 +121,9 @@ function RenderContent(props) {
   const [clicked, setClicked] = useState(() => false);
 
   function onClick(event) {
-    if (builderContextSignal.content) {
-      const variationId = builderContextSignal.content?.testVariationId;
-      const contentId = builderContextSignal.content?.id;
+    if (props.builderContextSignal.content) {
+      const variationId = props.builderContextSignal.content?.testVariationId;
+      const contentId = props.builderContextSignal.content?.id;
       _track({
         type: "click",
         canTrack: canTrackToUse,
@@ -165,8 +145,8 @@ function RenderContent(props) {
         code: group,
         context: props.context || {},
         localState: undefined,
-        rootState: builderContextSignal.rootState,
-        rootSetState: contentSetState,
+        rootState: props.builderContextSignal.rootState,
+        rootSetState: props.builderContextSignal.rootSetState,
       })
     );
   }
@@ -176,10 +156,11 @@ function RenderContent(props) {
       .then((response) => response.json())
       .then((json) => {
         const newState = {
-          ...builderContextSignal.rootState,
+          ...props.builderContextSignal.rootState,
           [key]: json,
         };
-        contentSetState(newState);
+        props.builderContextSignal.rootSetState?.(newState);
+        httpReqsData[key] = true;
       })
       .catch((err) => {
         console.error("error fetching dynamic data", url, err);
@@ -187,7 +168,8 @@ function RenderContent(props) {
   }
 
   function runHttpRequests() {
-    const requests = builderContextSignal.content?.data?.httpRequests ?? {};
+    const requests =
+      props.builderContextSignal.content?.data?.httpRequests ?? {};
     Object.entries(requests).forEach(([key, url]) => {
       if (url && (!httpReqsData[key] || isEditing())) {
         const evaluatedUrl = evalExpression(url);
@@ -204,7 +186,7 @@ function RenderContent(props) {
       window.dispatchEvent(
         new CustomEvent("builder:component:stateChange", {
           detail: {
-            state: builderContextSignal.rootState,
+            state: props.builderContextSignal.rootState,
             ref: {
               name: props.model,
             },
@@ -214,52 +196,6 @@ function RenderContent(props) {
     }
   }
 
-  const [scriptStr, setScriptStr] = useState(() =>
-    getRenderContentScriptString({
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
-      contentId: props.content?.id,
-      parentContentId: props.parentContentId,
-    })
-  );
-
-  const [builderContextSignal, setBuilderContextSignal] = useState(() => ({
-    content: getContentInitialValue({
-      content: props.content,
-      data: props.data,
-    }),
-    localState: undefined,
-    rootState: getContextStateInitialValue({
-      content: props.content,
-      data: props.data,
-      locale: props.locale,
-    }),
-    rootSetState: contentSetState,
-    context: props.context || {},
-    apiKey: props.apiKey,
-    apiVersion: props.apiVersion,
-    registeredComponents: [
-      ...getDefaultRegisteredComponents(),
-      // While this `components` object is deprecated, we must maintain support for it.
-      // Since users are able to override our default components, we need to make sure that we do not break such
-      // existing usage.
-      // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
-      // which is the new standard way of providing custom components, and must therefore take precedence.
-      ...components,
-      ...(props.customComponents || []),
-    ].reduce(
-      (acc, { component, ...curr }) => ({
-        ...acc,
-        [curr.name]: {
-          component:
-            TARGET === "vue3" ? wrapComponentRef(component) : component,
-          ...curr,
-        },
-      }),
-      {}
-    ),
-    inheritedStyles: {},
-  }));
-
   useEffect(() => {
     if (!props.apiKey) {
       logger.error(
@@ -269,6 +205,7 @@ function RenderContent(props) {
     if (isBrowser()) {
       if (isEditing()) {
         setForceReRenderCount(forceReRenderCount + 1);
+        window.addEventListener("message", processMessage);
         registerInsertMenu();
         setupBrowserForEditing({
           ...(props.locale
@@ -287,21 +224,20 @@ function RenderContent(props) {
               }
             : {}),
         });
-        Object.values(builderContextSignal.registeredComponents).forEach(
+        Object.values(props.builderContextSignal.componentInfos).forEach(
           (registeredComponent) => {
             const message = createRegisterComponentMessage(registeredComponent);
             window.parent?.postMessage(message, "*");
           }
         );
-        window.addEventListener("message", processMessage);
         window.addEventListener(
           "builder:component:stateChangeListenerActivated",
           emitStateUpdate
         );
       }
-      if (builderContextSignal.content) {
-        const variationId = builderContextSignal.content?.testVariationId;
-        const contentId = builderContextSignal.content?.id;
+      if (props.builderContextSignal.content) {
+        const variationId = props.builderContextSignal.content?.testVariationId;
+        const contentId = props.builderContextSignal.content?.id;
         _track({
           type: "impression",
           canTrack: canTrackToUse,
@@ -310,7 +246,6 @@ function RenderContent(props) {
           variationId: variationId !== contentId ? variationId : undefined,
         });
       }
-
       // override normal content in preview mode
       if (isPreviewing()) {
         const searchParams = new URL(location.href).searchParams;
@@ -336,7 +271,7 @@ function RenderContent(props) {
           getContent({
             model: props.model,
             apiKey: props.apiKey,
-            apiVersion: props.apiVersion,
+            apiVersion: props.builderContextSignal.apiVersion,
           }).then((content) => {
             if (content) {
               mergeNewContent(content);
@@ -355,18 +290,19 @@ function RenderContent(props) {
       mergeNewContent(props.content);
     }
   }, [props.content]);
+  useEffect(() => {}, [shouldSendResetCookie]);
   useEffect(() => {
     evaluateJsCode();
   }, [
-    builderContextSignal.content?.data?.jsCode,
-    builderContextSignal.rootState,
+    props.builderContextSignal.content?.data?.jsCode,
+    props.builderContextSignal.rootState,
   ]);
   useEffect(() => {
     runHttpRequests();
-  }, [builderContextSignal.content?.data?.httpRequests]);
+  }, [props.builderContextSignal.content?.data?.httpRequests]);
   useEffect(() => {
     emitStateUpdate();
-  }, [builderContextSignal.rootState]);
+  }, [props.builderContextSignal.rootState]);
 
   useEffect(() => {
     return () => {
@@ -381,54 +317,34 @@ function RenderContent(props) {
   }, []);
 
   return (
-    <builderContext.Provider value={builderContextSignal}>
-      {builderContextSignal.content ? (
+    <builderContext.Provider value={props.builderContextSignal}>
+      {props.builderContextSignal.content ? (
         <>
-          <ScrollView
+          <View
+            key={forceReRenderCount}
             ref={elementRef}
             onClick={(event) => onClick(event)}
-            builder-content-id={builderContextSignal.content?.id}
+            builder-content-id={props.builderContextSignal.content?.id}
             builder-model={props.model}
-            {...(TARGET === "reactNative"
-              ? {
-                  dataSet: {
-                    // currently, we can't set the actual ID here. // we don't need it right now, we just need to identify content divs for testing.
-                    "builder-content-id": "",
-                  },
-                }
-              : {})}
-            {...(props.hideContent
-              ? {
+            {...{
+              // currently, we can't set the actual ID here. // we don't need it right now, we just need to identify content divs for testing.
+              dataSet: {
+                "builder-content-id": "",
+              },
+            }}
+            {...(props.showContent
+              ? {}
+              : {
                   hidden: true,
                   "aria-hidden": true,
-                }
-              : {})}
+                })}
           >
-            {props.isSsrAbTest ? (
-              <>
-                <ScrollView dangerouslySetInnerHTML={{ __html: scriptStr }} />
-              </>
-            ) : null}
-
-            {TARGET !== "reactNative" ? (
-              <>
-                <RenderContentStyles
-                  contentId={builderContextSignal.content?.id}
-                  cssCode={builderContextSignal.content?.data?.cssCode}
-                  customFonts={builderContextSignal.content?.data?.customFonts}
-                />
-              </>
-            ) : null}
-
-            <RenderBlocks
-              blocks={builderContextSignal.content?.data?.blocks}
-              key={forceReRenderCount}
-            />
-          </ScrollView>
+            {props.children}
+          </View>
         </>
       ) : null}
     </builderContext.Provider>
   );
 }
 
-export default RenderContent;
+export default EnableEditor;

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

@@ -1,4 +1,4 @@
-const getCssFromFont = (font) => {
+const getCssFromFont = font => {
   var _a, _b;
   const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
   const name = family.split(",")[0];
@@ -35,9 +35,11 @@ font-weight: ${weight};
   }
   return str;
 };
-const getFontCss = ({ customFonts }) => {
+const getFontCss = ({
+  customFonts
+}) => {
   var _a;
-  return ((_a = customFonts == null ? void 0 : customFonts.map((font) => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
+  return ((_a = customFonts == null ? void 0 : customFonts.map(font => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
 };
 const getCss = ({
   cssCode,
@@ -51,7 +53,4 @@ const getCss = ({
   }
   return (cssCode == null ? void 0 : cssCode.replace(/&/g, `div[builder-content-id="${contentId}"]`)) || "";
 };
-export {
-  getCss,
-  getFontCss
-};
+export { getCss, getFontCss }

package/src/components/{render-content/components/render-styles.jsx → content/components/styles.jsx}

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import * as React from "react";
 import {
   FlatList,
@@ -9,11 +9,11 @@ import {
   Text,
 } from "react-native";
 import { useState } from "react";
-import RenderInlinedStyles from "../../render-inlined-styles";
-import { getCss } from "./render-styles.helpers";
-import { getFontCss } from "./render-styles.helpers";
+import InlinedStyles from "../../inlined-styles";
+import { getCss } from "./styles.helpers.js";
+import { getFontCss } from "./styles.helpers.js";
 
-function RenderContentStyles(props) {
+function ContentStyles(props) {
   const [injectedStyles, setInjectedStyles] = useState(() =>
     `
 ${getCss({
@@ -39,7 +39,7 @@ ${getFontCss({
 `.trim()
   );
 
-  return <RenderInlinedStyles styles={injectedStyles} />;
+  return <InlinedStyles styles={injectedStyles} />;
 }
 
-export default RenderContentStyles;
+export default ContentStyles;

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

@@ -4,16 +4,17 @@ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
 var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
+  for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols) for (var prop of __getOwnPropSymbols(b)) {
+    if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+  }
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
@@ -24,13 +25,15 @@ const getContextStateInitialValue = ({
 }) => {
   var _a, _b, _c;
   const defaultValues = {};
-  (_b = (_a = content == null ? void 0 : content.data) == null ? void 0 : _a.inputs) == null ? void 0 : _b.forEach((input) => {
+  (_b = (_a = content == null ? void 0 : content.data) == null ? void 0 : _a.inputs) == null ? void 0 : _b.forEach(input => {
     var _a2;
     if (input.name && input.defaultValue !== void 0 && ((_a2 = content == null ? void 0 : content.data) == null ? void 0 : _a2.state) && content.data.state[input.name] === void 0) {
       defaultValues[input.name] = input.defaultValue;
     }
   });
-  const stateToUse = __spreadValues(__spreadValues(__spreadValues({}, (_c = content == null ? void 0 : content.data) == null ? void 0 : _c.state), data), locale ? { locale } : {});
+  const stateToUse = __spreadValues(__spreadValues(__spreadValues({}, (_c = content == null ? void 0 : content.data) == null ? void 0 : _c.state), data), locale ? {
+    locale
+  } : {});
   return __spreadValues(__spreadValues({}, defaultValues), stateToUse);
 };
 const getContentInitialValue = ({
@@ -42,7 +45,4 @@ const getContentInitialValue = ({
     meta: content == null ? void 0 : content.meta
   });
 };
-export {
-  getContentInitialValue,
-  getContextStateInitialValue
-};
+export { getContentInitialValue, getContextStateInitialValue }

package/src/components/content/content.jsx

@@ -0,0 +1,141 @@
+"use client";
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
+import { useState } from "react";
+import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
+import {
+  components,
+  serializeComponentInfo,
+} from "../../functions/register-component.js";
+import Blocks from "../blocks/blocks";
+import ContentStyles from "./components/styles";
+import {
+  getContentInitialValue,
+  getContextStateInitialValue,
+} from "./content.helpers.js";
+import { TARGET } from "../../constants/target.js";
+import { getRenderContentScriptString } from "../content-variants/helpers.js";
+import EnableEditor from "./components/enable-editor";
+import InlinedScript from "../inlined-script";
+import { wrapComponentRef } from "./wrap-component-ref.js";
+
+function ContentComponent(props) {
+  const [scriptStr, setScriptStr] = useState(() =>
+    getRenderContentScriptString({
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+      variationId: props.content?.testVariationId,
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+      contentId: props.content?.id,
+    })
+  );
+
+  function contentSetState(newRootState) {
+    builderContextSignal.rootState = newRootState;
+  }
+
+  const [registeredComponents, setRegisteredComponents] = useState(() =>
+    [
+      ...getDefaultRegisteredComponents(),
+      // While this `components` object is deprecated, we must maintain support for it.
+      // Since users are able to override our default components, we need to make sure that we do not break such
+      // existing usage.
+      // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+      // which is the new standard way of providing custom components, and must therefore take precedence.
+      ...components,
+      ...(props.customComponents || []),
+    ].reduce(
+      (acc, { component, ...info }) => ({
+        ...acc,
+        [info.name]: {
+          component: component,
+          ...serializeComponentInfo(info),
+        },
+      }),
+      {}
+    )
+  );
+
+  const [builderContextSignal, setBuilderContextSignal] = useState(() => ({
+    content: getContentInitialValue({
+      content: props.content,
+      data: props.data,
+    }),
+    localState: undefined,
+    rootState: getContextStateInitialValue({
+      content: props.content,
+      data: props.data,
+      locale: props.locale,
+    }),
+    rootSetState: contentSetState,
+    context: props.context || {},
+    apiKey: props.apiKey,
+    apiVersion: props.apiVersion,
+    componentInfos: [
+      ...getDefaultRegisteredComponents(),
+      // While this `components` object is deprecated, we must maintain support for it.
+      // Since users are able to override our default components, we need to make sure that we do not break such
+      // existing usage.
+      // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+      // which is the new standard way of providing custom components, and must therefore take precedence.
+      ...components,
+      ...(props.customComponents || []),
+    ].reduce(
+      (acc, { component: _, ...info }) => ({
+        ...acc,
+        [info.name]: serializeComponentInfo(info),
+      }),
+      {}
+    ),
+    inheritedStyles: {},
+  }));
+
+  return (
+    <EnableEditor
+      content={props.content}
+      model={props.model}
+      context={props.context}
+      apiKey={props.apiKey}
+      canTrack={props.canTrack}
+      locale={props.locale}
+      includeRefs={props.includeRefs}
+      enrich={props.enrich}
+      classNameProp={props.classNameProp}
+      showContent={props.showContent}
+      builderContextSignal={builderContextSignal}
+      {...{
+        setBuilderContextSignal: setBuilderContextSignal,
+      }}
+    >
+      {props.isSsrAbTest ? (
+        <>
+          <InlinedScript scriptStr={scriptStr} />
+        </>
+      ) : null}
+
+      {TARGET !== "reactNative" ? (
+        <>
+          <ContentStyles
+            contentId={builderContextSignal.content?.id}
+            cssCode={builderContextSignal.content?.data?.cssCode}
+            customFonts={builderContextSignal.content?.data?.customFonts}
+          />
+        </>
+      ) : null}
+
+      <Blocks
+        blocks={builderContextSignal.content?.data?.blocks}
+        context={builderContextSignal}
+        registeredComponents={registeredComponents}
+      />
+    </EnableEditor>
+  );
+}
+
+export default ContentComponent;

package/src/components/content/index.js

@@ -0,0 +1,2 @@
+import { default as default2 } from "./content";
+export { default2 as default }

package/src/components/content/wrap-component-ref.js

@@ -0,0 +1,2 @@
+const wrapComponentRef = component => component;
+export { wrapComponentRef }