@builder.io/sdk-react-native 0.5.8 → 0.6.0

package/src/functions/evaluate/edge-runtime/edge-runtime.js

@@ -0,0 +1,94 @@
+var __defProp = Object.defineProperty;
+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 __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]);
+  }
+  return a;
+};
+import { logger } from "../../../helpers/logger.js";
+import { set } from "../../set.js";
+import Interpreter from "./acorn-interpreter.js";
+import { getFunctionArguments } from "../helpers.js";
+const processCode = code => {
+  return code.split("\n").map(line => {
+    const trimmed = line.trim();
+    if (line.includes("__awaiter")) return void 0;
+    const isStateSetter = trimmed.startsWith("state.");
+    if (!isStateSetter) return line;
+    const [lhs, rhs] = trimmed.split("=");
+    const setStr = lhs.replace("state.", "").trim();
+    const setExpr = `setRootState('${setStr}', ${rhs.trim()})`;
+    return `
+  ${line}
+  ${setExpr}
+  `;
+  }).filter(Boolean).join("\n");
+};
+const getJSONValName = val => val + "JSON";
+const runInEdge = ({
+  builder,
+  context,
+  event,
+  rootState,
+  localState,
+  rootSetState,
+  code
+}) => {
+  const state = __spreadValues(__spreadValues({}, rootState), localState);
+  const properties = getFunctionArguments({
+    builder,
+    context,
+    event,
+    state
+  });
+  const prependedCode = properties.map(([key]) => {
+    const jsonValName = getJSONValName(key);
+    return `var ${key} = ${jsonValName} === undefined ? undefined : JSON.parse(${jsonValName});`;
+  }).join("\n");
+  const cleanedCode = processCode(code);
+  if (cleanedCode === "") {
+    logger.warn("Skipping evaluation of empty code block.");
+    return;
+  }
+  const transformed = `
+function theFunction() {
+  ${prependedCode}
+
+  ${cleanedCode}
+}
+theFunction();
+`;
+  const setRootState = (prop, value) => {
+    const newState = set(state, prop, value);
+    rootSetState == null ? void 0 : rootSetState(newState);
+  };
+  const initFunc = function (interpreter, globalObject) {
+    properties.forEach(([key, val]) => {
+      const jsonVal = JSON.stringify(val);
+      interpreter.setProperty(globalObject, getJSONValName(key), jsonVal);
+    });
+    interpreter.setProperty(globalObject, "setRootState", interpreter.createNativeFunction(setRootState));
+  };
+  try {
+    const myInterpreter = new Interpreter(transformed, initFunc);
+    myInterpreter.run();
+    const output = myInterpreter.pseudoToNative(myInterpreter.value);
+    return output;
+  } catch (e) {
+    logger.warn("Custom code error in edge runtime. NOTE: your code must be ES5 JavaScript.", {
+      e
+    });
+    return;
+  }
+};
+export { runInEdge }

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

@@ -0,0 +1,2 @@
+import { runInEdge } from "./edge-runtime.js";
+export { runInEdge as evaluator }

package/src/functions/evaluate/evaluate.js

@@ -1,8 +1,8 @@
 import { logger } from "../../helpers/logger.js";
 import { isBrowser } from "../is-browser.js";
 import { isEditing } from "../is-editing.js";
-import { isNonNodeServer } from "../is-non-node-server.js";
-import { runInNonNode } from "./non-node-runtime/index.js";
+import { getUserAttributes } from "../track/helpers.js";
+import { evaluator } from "placeholder-runtime";
 function evaluate({
   code,
   context,
@@ -19,12 +19,13 @@ function evaluate({
   const builder = {
     isEditing: isEditing(),
     isBrowser: isBrowser(),
-    isServer: !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 = {
-    useCode,
+    code: useCode,
     builder,
     context,
     event,
@@ -32,48 +33,13 @@ function evaluate({
     rootState,
     localState
   };
-  if (isBrowser()) return runInBrowser(args);
-  if (isNonNodeServer()) return runInNonNode(args);
-  return runInNode(args);
-}
-const runInBrowser = ({
-  useCode,
-  builder,
-  context,
-  event,
-  localState,
-  rootSetState,
-  rootState
-}) => {
-  const state = flattenState(rootState, localState, rootSetState);
   try {
-    return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
+    return evaluator(args);
   } catch (e) {
-    logger.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e);
-  }
-};
-const runInNode = args => {
-  return runInBrowser(args);
-};
-function flattenState(rootState, localState, rootSetState) {
-  if (rootState === localState) {
-    throw new Error("rootState === localState");
+    logger.error("Failed code evaluation: " + e.message, {
+      code
+    });
+    return void 0;
   }
-  return new Proxy(rootState, {
-    get: (_, prop) => {
-      if (localState && prop in localState) {
-        return localState[prop];
-      }
-      return rootState[prop];
-    },
-    set: (_, prop, value) => {
-      if (localState && prop in localState) {
-        throw new Error("Writing to local state is not allowed as it is read-only.");
-      }
-      rootState[prop] = value;
-      rootSetState == null ? void 0 : rootSetState(rootState);
-      return true;
-    }
-  });
 }
-export { evaluate, flattenState, runInBrowser, runInNode }
+export { evaluate }

package/src/functions/evaluate/helpers.js

@@ -0,0 +1,15 @@
+const getFunctionArguments = ({
+  builder,
+  context,
+  event,
+  state
+}) => {
+  return Object.entries({
+    state,
+    Builder: builder,
+    builder,
+    context,
+    event
+  });
+};
+export { getFunctionArguments }

package/src/functions/evaluate/index.js

@@ -1,2 +1,2 @@
-import { evaluate } from "./evaluate";
+import { evaluate } from "./evaluate.js";
 export { evaluate }

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

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

package/src/functions/evaluate/placeholder-runtime.js

@@ -0,0 +1,4 @@
+const evaluator = _args => {
+  throw new Error("Placeholder evaluator not implemented. Make sure the SDK is properly replacing the import to the evaluator with one of edge/node/browser runtime evaluators.");
+};
+export { evaluator }

package/src/functions/get-block-actions-handler.js

@@ -1,4 +1,4 @@
-import { evaluate } from "./evaluate";
+import { evaluate } from "./evaluate/index.js";
 const createEventHandler = (value, options) => event => evaluate({
   code: value,
   context: options.context,

package/src/functions/is-edge-runtime.js

@@ -0,0 +1,9 @@
+import { isBrowser } from "./is-browser.js";
+function isEdgeRuntime() {
+  const hasNode = () => {
+    var _a;
+    return typeof process !== "undefined" && ((_a = process == null ? void 0 : process.versions) == null ? void 0 : _a.node);
+  };
+  return !isBrowser() && !hasNode();
+}
+export { isEdgeRuntime }

package/src/helpers/cookie.js

@@ -35,6 +35,8 @@ const initStorage = () => {
 };
 const storage = initStorage();
 const getStorageName = (name) => `builderio.${name}`;
+const getCookieSync = () => {
+};
 const getCookie = (_0) => __async(void 0, [_0], function* ({
   name,
   canTrack
@@ -73,5 +75,6 @@ const setCookie = (_0) => __async(void 0, [_0], function* ({
 });
 export {
   getCookie,
+  getCookieSync,
   setCookie
 };

package/src/index.js

@@ -1,12 +1,3 @@
 export * from "./index-helpers/top-of-file.js";
 export * from "./index-helpers/blocks-exports.js";
-import { isEditing } from "./functions/is-editing.js";
-import { isPreviewing } from "./functions/is-previewing.js";
-import { createRegisterComponentMessage } from "./functions/register-component.js";
-import { register } from "./functions/register.js";
-import { setEditorSettings } from "./functions/set-editor-settings.js";
-import { fetchEntries, fetchOneEntry, getAllContent, getContent, _processContentResult } from "./functions/get-content/index.js";
-import { getBuilderSearchParams } from "./functions/get-builder-search-params/index.js";
-import { track } from "./functions/track/index.js";
-import { fetchBuilderProps } from "./functions/fetch-builder-props.js";
-export { _processContentResult, createRegisterComponentMessage, fetchBuilderProps, fetchEntries, fetchOneEntry, getAllContent, getBuilderSearchParams, getContent, isEditing, isPreviewing, register, setEditorSettings, track }
+export * from "./server-index.js"

package/src/server-index.js

@@ -0,0 +1,11 @@
+export * from "./index-helpers/top-of-file.js";
+import { isEditing } from "./functions/is-editing.js";
+import { isPreviewing } from "./functions/is-previewing.js";
+import { createRegisterComponentMessage } from "./functions/register-component.js";
+import { register } from "./functions/register.js";
+import { setEditorSettings } from "./functions/set-editor-settings.js";
+import { fetchEntries, fetchOneEntry, getAllContent, getContent, _processContentResult } from "./functions/get-content/index.js";
+import { getBuilderSearchParams } from "./functions/get-builder-search-params/index.js";
+import { track } from "./functions/track/index.js";
+import { fetchBuilderProps } from "./functions/fetch-builder-props.js";
+export { _processContentResult, createRegisterComponentMessage, fetchBuilderProps, fetchEntries, fetchOneEntry, getAllContent, getBuilderSearchParams, getContent, isEditing, isPreviewing, register, setEditorSettings, track }

package/dist/blocks/BaseText.js

@@ -1,40 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const builder_context_1 = __importDefault(require("../context/builder.context"));
-/**
- * Implements CSS-like inheritance for `Text` by replacing all calls to `Text` with a custom `BaseText` component that
- * applies the `inheritedStyles` context styles, which contain all styles from all parents that might apply to a `Text`.
- */
-function BaseText(props) {
-    const builderContext = React.useContext(builder_context_1.default);
-    return (React.createElement(react_native_1.Text, { ...props, style: { ...builderContext.inheritedStyles, ...props.style } }));
-}
-exports.default = BaseText;

package/dist/blocks/button/button.js

@@ -1,45 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const BaseText_1 = __importDefault(require("../BaseText"));
-("use client");
-const React = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const helpers_js_1 = require("../helpers.js");
-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.Fragment, null,
-        React.createElement(react_native_1.View, { ...{}, ...props.attributes, style: {
-                ...styles.view1,
-                ...props.attributes.style,
-            } },
-            React.createElement(BaseText_1.default, null, props.text))))));
-}
-const styles = react_native_1.StyleSheet.create({ view1: { all: "unset" } });
-exports.default = Button;

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

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

package/dist/blocks/columns/columns.js

@@ -1,157 +0,0 @@
-"use strict";
-"use client";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const react_1 = require("react");
-const blocks_1 = __importDefault(require("../../components/blocks/blocks"));
-const device_sizes_js_1 = require("../../constants/device-sizes.js");
-const inlined_styles_1 = __importDefault(require("../../components/inlined-styles"));
-const target_js_1 = require("../../constants/target.js");
-function Columns(props) {
-    var _a;
-    const [gutterSize, setGutterSize] = (0, react_1.useState)(() => typeof props.space === "number" ? props.space || 0 : 20);
-    const [cols, setCols] = (0, react_1.useState)(() => props.columns || []);
-    const [stackAt, setStackAt] = (0, react_1.useState)(() => props.stackColumnsAt || "tablet");
-    function getWidth(index) {
-        var _a;
-        return ((_a = cols[index]) === null || _a === void 0 ? void 0 : _a.width) || 100 / cols.length;
-    }
-    function getColumnCssWidth(index) {
-        const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
-        return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
-    }
-    function getTabletStyle({ stackedStyle, desktopStyle }) {
-        return stackAt === "tablet" ? stackedStyle : desktopStyle;
-    }
-    function getMobileStyle({ stackedStyle, desktopStyle }) {
-        return stackAt === "never" ? desktopStyle : stackedStyle;
-    }
-    const [flexDir, setFlexDir] = (0, react_1.useState)(() => props.stackColumnsAt === "never"
-        ? "row"
-        : props.reverseColumnsWhenStacked
-            ? "column-reverse"
-            : "column");
-    function columnsCssVars() {
-        return {
-            flexDirection: flexDir,
-        };
-    }
-    function columnCssVars(index) {
-        const gutter = index === 0 ? 0 : gutterSize;
-        if (target_js_1.TARGET === "reactNative") {
-            return {
-                marginLeft: props.stackColumnsAt === "never" ? gutter : 0,
-            };
-        }
-        const width = getColumnCssWidth(index);
-        const gutterPixels = `${gutter}px`;
-        const mobileWidth = "100%";
-        const mobileMarginLeft = 0;
-        const marginLeftKey = "margin-left";
-        return {
-            width,
-            [marginLeftKey]: gutterPixels,
-            "--column-width-mobile": getMobileStyle({
-                stackedStyle: mobileWidth,
-                desktopStyle: width,
-            }),
-            "--column-margin-left-mobile": getMobileStyle({
-                stackedStyle: mobileMarginLeft,
-                desktopStyle: gutterPixels,
-            }),
-            "--column-width-tablet": getTabletStyle({
-                stackedStyle: mobileWidth,
-                desktopStyle: width,
-            }),
-            "--column-margin-left-tablet": getTabletStyle({
-                stackedStyle: mobileMarginLeft,
-                desktopStyle: gutterPixels,
-            }),
-        };
-    }
-    function getWidthForBreakpointSize(size) {
-        var _a, _b;
-        const breakpointSizes = (0, device_sizes_js_1.getSizesForBreakpoints)(((_b = (_a = props.builderContext.content) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.breakpoints) || {});
-        return breakpointSizes[size].max;
-    }
-    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;
-          }
-        },
-      `;
-    }
-    return (React.createElement(react_native_1.View, { style: {
-            ...styles.view1,
-            ...columnsCssVars(),
-        }, ...{
-            dataSet: {
-                "builder-block-name": "builder-columns",
-            },
-        } },
-        target_js_1.TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
-            React.createElement(inlined_styles_1.default, { styles: columnsStyles() }))) : null, (_a = props.columns) === null || _a === void 0 ? void 0 :
-        _a.map((column, index) => (React.createElement(react_native_1.View, { style: {
-                ...styles.view2,
-                ...columnCssVars(index),
-            }, ...{
-                dataSet: {
-                    "builder-block-name": "builder-column",
-                },
-            }, key: index },
-            React.createElement(blocks_1.default, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
-                    flexGrow: "1",
-                }, context: props.builderContext, registeredComponents: props.builderComponents }))))));
-}
-const styles = react_native_1.StyleSheet.create({
-    view1: { display: "flex" },
-    view2: { display: "flex", flexDirection: "column", alignItems: "stretch" },
-});
-exports.default = Columns;