@builder.io/sdk-react-native 0.6.4 → 0.7.1-0

package/lib/node/typescript/functions/evaluate/node-runtime/safeDynamicRequire.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"safeDynamicRequire.d.ts","sourceRoot":"","sources":["../../../../../../src/functions/evaluate/node-runtime/safeDynamicRequire.js"],"names":[],"mappings":"AAAA,2CAAuB"}

package/lib/node/typescript/functions/get-content/generate-content-url.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generate-content-url.d.ts","sourceRoot":"","sources":["../../../../../src/functions/get-content/generate-content-url.js"],"names":[],"mappings":"AAoBA,sDAqCC"}
+{"version":3,"file":"generate-content-url.d.ts","sourceRoot":"","sources":["../../../../../src/functions/get-content/generate-content-url.js"],"names":[],"mappings":"AAqBA,sDAyEC"}

package/lib/node/typescript/functions/is-edge-runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"is-edge-runtime.d.ts","sourceRoot":"","sources":["../../../../src/functions/is-edge-runtime.js"],"names":[],"mappings":"AACA,yCAMC"}
+{"version":3,"file":"is-edge-runtime.d.ts","sourceRoot":"","sources":["../../../../src/functions/is-edge-runtime.js"],"names":[],"mappings":"AAEA,yCAEC"}

package/lib/node/typescript/functions/is-node-runtime.d.ts

@@ -0,0 +1,2 @@
+export function isNodeRuntime(): boolean;
+//# sourceMappingURL=is-node-runtime.d.ts.map

package/lib/node/typescript/functions/is-node-runtime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-node-runtime.d.ts","sourceRoot":"","sources":["../../../../src/functions/is-node-runtime.js"],"names":[],"mappings":"AACA,yCAGC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "0.6.4",
+  "version": "0.7.1-0",
   "type": "module",
   "main": "lib/browser/commonjs/index.js",
   "module": "lib/browser/module/index.js",
@@ -91,6 +91,7 @@
     "src/"
   ],
   "scripts": {
+    "release": "npm publish",
     "build:one": "bob build",
     "/**/": "the command below cannot be run in parallel because build:browser MUST run first.",
     "build": "nx run-many -p @builder.io/sdk-react-native -t build:browser build:node build:edge --parallel=false",
@@ -105,6 +106,7 @@
     "react-native-video": "^5.1.1"
   },
   "peerDependencies": {
+    "isolated-vm": "^4.6.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-native": ">=0.64.3",

package/src/blocks/button/button.jsx

@@ -1,6 +1,5 @@
-"use client";
-import BaseText from "../BaseText";
 import * as React from "react";
+import BaseText from "../BaseText";
 import {
   FlatList,
   ScrollView,

package/src/blocks/columns/columns.jsx

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

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

@@ -1,4 +1,3 @@
-"use client";
 import * as React from "react";
 import {
   FlatList,
@@ -11,57 +10,55 @@ import {
 import { useState, useRef, useEffect } from "react";
 
 function CustomCode(props) {
-  const elem = useRef(null);
+  const elementRef = useRef(null);
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
 
   const [scriptsRun, setScriptsRun] = useState(() => []);
 
-  function findAndRunScripts() {
+  useEffect(() => {
     // TODO: Move this function to standalone one in '@builder.io/utils'
     if (
-      elem.current &&
-      elem.current.getElementsByTagName &&
-      typeof window !== "undefined"
+      !elementRef.current?.getElementsByTagName ||
+      typeof window === "undefined"
     ) {
-      const scripts = elem.current.getElementsByTagName("script");
-      for (let i = 0; i < scripts.length; i++) {
-        const script = scripts[i];
-        if (script.src) {
-          if (scriptsInserted.includes(script.src)) {
-            continue;
-          }
-          scriptsInserted.push(script.src);
-          const newScript = document.createElement("script");
-          newScript.async = true;
-          newScript.src = script.src;
-          document.head.appendChild(newScript);
-        } else if (
-          !script.type ||
-          [
-            "text/javascript",
-            "application/javascript",
-            "application/ecmascript",
-          ].includes(script.type)
-        ) {
-          if (scriptsRun.includes(script.innerText)) {
-            continue;
-          }
-          try {
-            scriptsRun.push(script.innerText);
-            new Function(script.innerText)();
-          } catch (error) {
-            console.warn("`CustomCode`: Error running script:", error);
-          }
+      return;
+    }
+    const scripts = elementRef.current.getElementsByTagName("script");
+    for (let i = 0; i < scripts.length; i++) {
+      const script = scripts[i];
+      if (script.src) {
+        if (scriptsInserted.includes(script.src)) {
+          continue;
+        }
+        scriptsInserted.push(script.src);
+        const newScript = document.createElement("script");
+        newScript.async = true;
+        newScript.src = script.src;
+        document.head.appendChild(newScript);
+      } else if (
+        !script.type ||
+        [
+          "text/javascript",
+          "application/javascript",
+          "application/ecmascript",
+        ].includes(script.type)
+      ) {
+        if (scriptsRun.includes(script.innerText)) {
+          continue;
+        }
+        try {
+          scriptsRun.push(script.innerText);
+          new Function(script.innerText)();
+        } catch (error) {
+          console.warn("`CustomCode`: Error running script:", error);
         }
       }
     }
-  }
-
-  useEffect(() => {
-    findAndRunScripts();
   }, []);
 
-  return <View ref={elem} dangerouslySetInnerHTML={{ __html: props.code }} />;
+  return (
+    <View ref={elementRef} dangerouslySetInnerHTML={{ __html: props.code }} />
+  );
 }
 
 export default CustomCode;

package/src/blocks/embed/embed.jsx

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

package/src/blocks/form/form.jsx

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

package/src/blocks/fragment/fragment.jsx

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

package/src/blocks/img/img.jsx

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

package/src/blocks/input/input.jsx

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

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

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

package/src/blocks/section/section.jsx

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

package/src/blocks/select/select.jsx

@@ -1,6 +1,5 @@
-"use client";
-import BaseText from "../BaseText";
 import * as React from "react";
+import BaseText from "../BaseText";
 import {
   FlatList,
   ScrollView,

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

@@ -1,6 +1,5 @@
-"use client";
-import BaseText from "../BaseText";
 import * as React from "react";
+import BaseText from "../BaseText";
 import {
   FlatList,
   ScrollView,

package/src/blocks/symbol/symbol.jsx

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

package/src/blocks/textarea/textarea.jsx

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

package/src/components/block/block.jsx

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

package/src/components/block/components/block-styles.jsx

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

package/src/components/block/components/block-wrapper.jsx

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

package/src/components/block/components/component-ref/component-ref.jsx

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

package/src/components/block/components/interactive-element.jsx

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

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

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

package/src/components/blocks/blocks-wrapper.jsx

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

package/src/components/blocks/blocks.jsx

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

package/src/components/content/components/enable-editor.jsx

@@ -1,4 +1,3 @@
-"use client";
 import * as React from "react";
 import {
   FlatList,
@@ -20,20 +19,16 @@ import {
   registerInsertMenu,
   setupBrowserForEditing,
 } 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 { fetchOneEntry } from "../../../functions/get-content/index.js";
 import { isPreviewing } from "../../../functions/is-previewing.js";
 import { postPreviewContent } from "../../../helpers/preview-lru-cache/set.js";
 import { fastClone } from "../../../functions/fast-clone.js";
+import { logger } from "../../../helpers/logger.js";
+import { getDefaultCanTrack } from "../../../helpers/canTrack.js";
 
 function EnableEditor(props) {
   const elementRef = useRef(null);
-  const [canTrackToUse, setCanTrackToUse] = useState(() =>
-    checkIsDefined(props.canTrack) ? props.canTrack : true
-  );
-
   const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
 
   function mergeNewContent(newContent) {
@@ -127,7 +122,7 @@ function EnableEditor(props) {
       const contentId = props.builderContextSignal.content?.id;
       _track({
         type: "click",
-        canTrack: canTrackToUse,
+        canTrack: getDefaultCanTrack(props.canTrack),
         contentId,
         apiKey: props.apiKey,
         variationId: variationId !== contentId ? variationId : undefined,
@@ -197,94 +192,133 @@ function EnableEditor(props) {
     }
   }
 
+  function elementRef_onIniteditingbldr(event) {
+    setForceReRenderCount(forceReRenderCount + 1);
+    window.addEventListener("message", processMessage);
+    registerInsertMenu();
+    setupBrowserForEditing({
+      ...(props.locale
+        ? {
+            locale: props.locale,
+          }
+        : {}),
+      ...(props.includeRefs
+        ? {
+            includeRefs: props.includeRefs,
+          }
+        : {}),
+      ...(props.enrich
+        ? {
+            enrich: props.enrich,
+          }
+        : {}),
+    });
+    Object.values(props.builderContextSignal.componentInfos).forEach(
+      (registeredComponent) => {
+        const message = createRegisterComponentMessage(registeredComponent);
+        window.parent?.postMessage(message, "*");
+      }
+    );
+    window.addEventListener(
+      "builder:component:stateChangeListenerActivated",
+      emitStateUpdate
+    );
+  }
+
+  function elementRef_onInitpreviewingbldr(event) {
+    const searchParams = new URL(location.href).searchParams;
+    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.
+     * - 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 (
+      searchParamPreviewModel === props.model &&
+      previewApiKey === props.apiKey &&
+      (!props.content || searchParamPreviewId === props.content.id)
+    ) {
+      fetchOneEntry({
+        model: props.model,
+        apiKey: props.apiKey,
+        apiVersion: props.builderContextSignal.apiVersion,
+      }).then((content) => {
+        if (content) {
+          mergeNewContent(content);
+        }
+      });
+    }
+  }
+
   useEffect(() => {
-    if (!props.apiKey) {
-      logger.error(
-        "No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."
+    elementRef.current?.addEventListener(
+      "initeditingbldr",
+      elementRef_onIniteditingbldr
+    );
+    return () =>
+      elementRef.current?.removeEventListener(
+        "initeditingbldr",
+        elementRef_onIniteditingbldr
       );
-    }
+  }, []);
+
+  useEffect(() => {
+    elementRef.current?.addEventListener(
+      "initpreviewingbldr",
+      elementRef_onInitpreviewingbldr
+    );
+    return () =>
+      elementRef.current?.removeEventListener(
+        "initpreviewingbldr",
+        elementRef_onInitpreviewingbldr
+      );
+  }, []);
+
+  useEffect(() => {
     if (isBrowser()) {
-      if (isEditing()) {
-        setForceReRenderCount(forceReRenderCount + 1);
-        window.addEventListener("message", processMessage);
-        registerInsertMenu();
-        setupBrowserForEditing({
-          ...(props.locale
-            ? {
-                locale: props.locale,
-              }
-            : {}),
-          ...(props.includeRefs
-            ? {
-                includeRefs: props.includeRefs,
-              }
-            : {}),
-          ...(props.enrich
-            ? {
-                enrich: props.enrich,
-              }
-            : {}),
-        });
-        Object.values(props.builderContextSignal.componentInfos).forEach(
-          (registeredComponent) => {
-            const message = createRegisterComponentMessage(registeredComponent);
-            window.parent?.postMessage(message, "*");
-          }
-        );
-        window.addEventListener(
-          "builder:component:stateChangeListenerActivated",
-          emitStateUpdate
-        );
+      if (isEditing() && elementRef.current) {
+        elementRef.current.dispatchEvent(new CustomEvent("initeditingbldr"));
       }
-      if (props.builderContextSignal.content) {
+      const shouldTrackImpression =
+        props.builderContextSignal.content &&
+        getDefaultCanTrack(props.canTrack);
+      if (shouldTrackImpression) {
         const variationId = props.builderContextSignal.content?.testVariationId;
         const contentId = props.builderContextSignal.content?.id;
+        const apiKeyProp = props.apiKey;
         _track({
           type: "impression",
-          canTrack: canTrackToUse,
+          canTrack: true,
           contentId,
-          apiKey: props.apiKey,
+          apiKey: apiKeyProp,
           variationId: variationId !== contentId ? variationId : undefined,
         });
       }
-      // override normal content in preview mode
-      if (isPreviewing()) {
-        const searchParams = new URL(location.href).searchParams;
-        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.
-         * - 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 (
-          searchParamPreviewModel === props.model &&
-          previewApiKey === props.apiKey &&
-          (!props.content || searchParamPreviewId === props.content.id)
-        ) {
-          fetchOneEntry({
-            model: props.model,
-            apiKey: props.apiKey,
-            apiVersion: props.builderContextSignal.apiVersion,
-          }).then((content) => {
-            if (content) {
-              mergeNewContent(content);
-            }
-          });
-        }
+      // override normal content in preview mode
+      if (isPreviewing() && elementRef.current) {
+        elementRef.current.dispatchEvent(new CustomEvent("initpreviewingbldr"));
       }
-      evaluateJsCode();
-      runHttpRequests();
-      emitStateUpdate();
     }
   }, []);
+  useEffect(() => {
+    if (!props.apiKey) {
+      logger.error(
+        "No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."
+      );
+    }
+    evaluateJsCode();
+    runHttpRequests();
+    emitStateUpdate();
+  }, []);
 
   useEffect(() => {
     if (props.content) {
@@ -322,6 +356,7 @@ function EnableEditor(props) {
       {props.builderContextSignal.content ? (
         <>
           <ScrollView
+            {...{}}
             key={forceReRenderCount}
             ref={elementRef}
             onClick={(event) => onClick(event)}

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

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

package/src/components/content/content.jsx

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

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

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

package/src/components/inlined-script.jsx

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

package/src/components/inlined-styles.jsx

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

package/src/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.6.4"
+export const SDK_VERSION = "0.7.1-0"

package/src/functions/evaluate/choose-eval.js

@@ -0,0 +1,5 @@
+import { runInBrowser } from "./browser-runtime/browser.js";
+import { isBrowser } from "../is-browser.js";
+import { evaluator } from "placeholder-runtime";
+const chooseBrowserOrServerEval = args => isBrowser() ? runInBrowser(args) : evaluator(args);
+export { chooseBrowserOrServerEval }

package/src/functions/evaluate/evaluate.js

@@ -1,8 +1,6 @@
 import { logger } from "../../helpers/logger.js";
-import { isBrowser } from "../is-browser.js";
-import { isEditing } from "../is-editing.js";
-import { getUserAttributes } from "../track/helpers.js";
-import { evaluator } from "placeholder-runtime";
+import { getBuilderGlobals, parseCode } from "./helpers.js";
+import { chooseBrowserOrServerEval } from "./choose-eval.js";
 function evaluate({
   code,
   context,
@@ -16,17 +14,11 @@ function evaluate({
     logger.warn("Skipping evaluation of empty code block.");
     return;
   }
-  const builder = {
-    isEditing: isEditing(),
-    isBrowser: isBrowser(),
-    isServer: !isBrowser(),
-    getUserAttributes: () => getUserAttributes()
-  };
-  const useReturn = isExpression && !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
-  const useCode = useReturn ? `return (${code});` : code;
   const args = {
-    code: useCode,
-    builder,
+    code: parseCode(code, {
+      isExpression
+    }),
+    builder: getBuilderGlobals(),
     context,
     event,
     rootSetState,
@@ -34,7 +26,7 @@ function evaluate({
     localState
   };
   try {
-    return evaluator(args);
+    return chooseBrowserOrServerEval(args);
   } catch (e) {
     logger.error("Failed code evaluation: " + e.message, {
       code

package/src/functions/evaluate/helpers.js

@@ -1,3 +1,6 @@
+import { isBrowser } from "../is-browser.js";
+import { isEditing } from "../is-editing.js";
+import { getUserAttributes } from "../track/helpers.js";
 const getFunctionArguments = ({
   builder,
   context,
@@ -12,4 +15,17 @@ const getFunctionArguments = ({
     event
   });
 };
-export { getFunctionArguments }
+const getBuilderGlobals = () => ({
+  isEditing: isEditing(),
+  isBrowser: isBrowser(),
+  isServer: !isBrowser(),
+  getUserAttributes: () => getUserAttributes()
+});
+const parseCode = (code, {
+  isExpression = true
+}) => {
+  const useReturn = isExpression && !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
+  const useCode = useReturn ? `return (${code});` : code;
+  return useCode;
+};
+export { getBuilderGlobals, getFunctionArguments, parseCode }

package/src/functions/evaluate/node-runtime/index.js

@@ -1,2 +1,2 @@
-import { evaluator } from "../browser-runtime/index.js";
-export { evaluator }
+import { runInNode } from "./node-runtime.js";
+export { runInNode as evaluator }