@builder.io/sdk-react-native 0.0.1-44 → 0.0.1-50

package/src/components/render-content.lite.tsx

@@ -1,39 +1,56 @@
-import * as React from 'react';
-import { View, StyleSheet, Image, Text } from 'react-native';
-import { useState, useContext, useEffect } from 'react';
-import { isBrowser } from '../functions/is-browser';
-import RenderBlock from './render-block.lite';
-import BuilderContext from '../context/builder.context.lite';
-import { track } from '../functions/track';
-import { ifTarget } from '../functions/if-target';
-import { onChange } from '../functions/on-change';
-import { isReactNative } from '../functions/is-react-native';
-import { isEditing } from '../functions/is-editing';
-import { isPreviewing } from '../functions/is-previewing';
-import { previewingModelName } from '../functions/previewing-model-name';
-import { getContent } from '../functions/get-content';
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { useState, useContext, useEffect } from "react";
+import { isBrowser } from "../functions/is-browser";
+import BuilderContext from "../context/builder.context.lite";
+import { track } from "../functions/track";
+import { isReactNative } from "../functions/is-react-native";
+import { isEditing } from "../functions/is-editing";
+import { isPreviewing } from "../functions/is-previewing";
+import { previewingModelName } from "../functions/previewing-model-name";
+import { getContent } from "../functions/get-content";
+import {
+  convertSearchParamsToQueryObject,
+  getBuilderSearchParams,
+} from "../functions/get-builder-search-params";
+import RenderBlocks from "./render-blocks.lite";
+import { evaluate } from "../functions/evaluate";
+import { getFetch } from "../functions/get-fetch";
+import { onChange } from "../functions/on-change";
+import { ifTarget } from "../functions/if-target";
 
 export default function RenderContent(props) {
   function useContent() {
-    return overrideContent || props.content;
+    const mergedContent = {
+      ...props.content,
+      ...overrideContent,
+      data: { ...props.content?.data, ...overrideContent?.data },
+    };
+    return mergedContent;
   }
 
+  const [overrideContent, setOverrideContent] = useState(() => null);
+
   const [update, setUpdate] = useState(() => 0);
 
-  const [state, setState] = useState(() => ({}));
+  const [overrideState, setOverrideState] = useState(() => ({}));
 
-  const [context, setContext] = useState(() => ({}));
+  function state() {
+    return { ...props.content?.data?.state, ...overrideState };
+  }
 
-  const [overrideContent, setOverrideContent] = useState(() => null);
+  function context() {
+    return {};
+  }
 
   function getCssFromFont(font, data) {
     // TODO: compute what font sizes are used and only load those.......
     const family =
       font.family +
-      (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
-    const name = family.split(',')[0];
+      (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+    const name = family.split(",")[0];
     const url = font.fileUrl ?? font?.files?.regular;
-    let str = '';
+    let str = "";
 
     if (url && family && name) {
       str += `
@@ -79,8 +96,8 @@ export default function RenderContent(props) {
     // }
     // TODO: separate internal data from external
     return (
-      data?.customFonts?.map((font) => getCssFromFont(font, data))?.join(' ') ||
-      ''
+      data?.customFonts?.map((font) => getCssFromFont(font, data))?.join(" ") ||
+      ""
     );
   }
 
@@ -89,13 +106,14 @@ export default function RenderContent(props) {
 
     if (data) {
       switch (data.type) {
-        case 'builder.contentUpdate': {
+        case "builder.contentUpdate": {
+          const messageContent = data.data;
           const key =
-            data.data.key ||
-            data.data.alias ||
-            data.data.entry ||
-            data.data.modelName;
-          const contentData = data.data.data; // oof
+            messageContent.key ||
+            messageContent.alias ||
+            messageContent.entry ||
+            messageContent.modelName;
+          const contentData = messageContent.data;
 
           if (key === props.model) {
             setOverrideContent(contentData);
@@ -104,7 +122,7 @@ export default function RenderContent(props) {
           break;
         }
 
-        case 'builder.patchUpdates': {
+        case "builder.patchUpdates": {
           // TODO
           break;
         }
@@ -112,47 +130,135 @@ export default function RenderContent(props) {
     }
   }
 
+  function evaluateJsCode() {
+    // run any dynamic JS code attached to content
+    const jsCode = useContent?.()?.data?.jsCode;
+
+    if (jsCode) {
+      evaluate({
+        code: jsCode,
+        context: context(),
+        state: state(),
+      });
+    }
+  }
+
+  function httpReqsData() {
+    return {};
+  }
+
+  function evalExpression(expression) {
+    return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
+      evaluate({
+        code: group,
+        context: context(),
+        state: state(),
+      })
+    );
+  }
+
+  function handleRequest({ url, key }) {
+    const fetchAndSetState = async () => {
+      const response = await getFetch()(url);
+      const json = await response.json();
+      const newOverrideState = { ...overrideState, [key]: json };
+      setOverrideState(newOverrideState);
+    };
+
+    fetchAndSetState();
+  }
+
+  function runHttpRequests() {
+    const requests = useContent?.()?.data?.httpRequests ?? {};
+    Object.entries(requests).forEach(([key, url]) => {
+      if (url && (!httpReqsData()[key] || isEditing())) {
+        const evaluatedUrl = evalExpression(url);
+        handleRequest({
+          url: evaluatedUrl,
+          key,
+        });
+      }
+    });
+  }
+
+  function emitStateUpdate() {
+    window.dispatchEvent(
+      new CustomEvent("builder:component:stateChange", {
+        detail: {
+          state: state(),
+          ref: {
+            name: props.model,
+          },
+        },
+      })
+    );
+  }
+
   useEffect(() => {
     if (isBrowser()) {
       if (isEditing()) {
-        window.addEventListener('message', processMessage);
+        window.addEventListener("message", processMessage);
+        window.addEventListener(
+          "builder:component:stateChangeListenerActivated",
+          emitStateUpdate
+        );
       }
 
-      if (useContent() && !isEditing()) {
-        track('impression', {
+      if (useContent()) {
+        track("impression", {
           contentId: useContent().id,
         });
-      }
+      } // override normal content in preview mode
 
       if (isPreviewing()) {
         if (props.model && previewingModelName() === props.model) {
-          const options = {};
           const currentUrl = new URL(location.href);
-          const apiKey = currentUrl.searchParams.get('apiKey');
-
-          if (apiKey) {
-            const builderPrefix = 'builder.';
-            currentUrl.searchParams.forEach((value, key) => {
-              if (key.startsWith(builderPrefix)) {
-                options[key.replace(builderPrefix, '')] = value;
-              }
-            }); // TODO: need access to API key
+          const previewApiKey = currentUrl.searchParams.get("apiKey");
 
+          if (previewApiKey) {
             getContent({
               model: props.model,
-              apiKey,
-              options,
+              apiKey: previewApiKey,
+              options: getBuilderSearchParams(
+                convertSearchParamsToQueryObject(currentUrl.searchParams)
+              ),
             }).then((content) => {
               if (content) {
                 setOverrideContent(content);
               }
             });
-          } // TODO: fetch content and override. Forward all builder.* params
+          }
         }
       }
+
+      evaluateJsCode();
+      runHttpRequests();
+      emitStateUpdate();
     }
   }, []);
 
+  useEffect(() => {
+    evaluateJsCode();
+  }, [useContent?.()?.data?.jsCode]);
+  useEffect(() => {
+    runHttpRequests();
+  }, [useContent?.()?.data?.httpRequests]);
+  useEffect(() => {
+    emitStateUpdate();
+  }, [state()]);
+
+  useEffect(() => {
+    return () => {
+      if (isBrowser()) {
+        window.removeEventListener("message", processMessage);
+        window.removeEventListener(
+          "builder:component:stateChangeListenerActivated",
+          emitStateUpdate
+        );
+      }
+    };
+  }, []);
+
   return (
     <BuilderContext.Provider
       value={{
@@ -161,24 +267,26 @@ export default function RenderContent(props) {
         },
 
         get state() {
-          return state;
+          return state();
         },
 
         get context() {
-          return context;
+          return context();
+        },
+
+        get apiKey() {
+          return props.apiKey;
         },
       }}
     >
       {useContent() ? (
         <>
           <View
-            onClick={(event) => {
-              if (!isEditing()) {
-                track('click', {
-                  contentId: useContent().id,
-                });
-              }
-            }}
+            onClick={(event) =>
+              track("click", {
+                contentId: useContent().id,
+              })
+            }
             data-builder-content-id={useContent?.()?.id}
           >
             {(useContent?.()?.data?.cssCode ||
@@ -187,13 +295,11 @@ export default function RenderContent(props) {
               <View>
                 <Text>{useContent().data.cssCode}</Text>
 
-                <Text>{getFontCss(useContent().data)}</Text>
+                <Text>{state().getFontCss(useContent().data)}</Text>
               </View>
             ) : null}
 
-            {useContent?.()?.data?.blocks?.map((block) => (
-              <RenderBlock key={block.id} block={block} />
-            ))}
+            <RenderBlocks blocks={useContent?.()?.data?.blocks} />
           </View>
         </>
       ) : null}

package/src/constants/device-sizes.js

@@ -1,25 +1,25 @@
 import * as React from 'react';
-const sizeNames = ['xsmall', 'small', 'medium', 'large'];
+const sizeNames = ["xsmall", "small", "medium", "large"];
 const sizes = {
   xsmall: {
     min: 0,
     default: 0,
-    max: 0,
+    max: 0
   },
   small: {
     min: 320,
     default: 321,
-    max: 640,
+    max: 640
   },
   medium: {
     min: 641,
     default: 642,
-    max: 991,
+    max: 991
   },
   large: {
     min: 990,
     default: 991,
-    max: 1200,
+    max: 1200
   },
   getWidthForSize(size) {
     return this[size].default;
@@ -31,7 +31,10 @@ const sizes = {
         return size;
       }
     }
-    return 'large';
-  },
+    return "large";
+  }
+};
+export {
+  sizeNames,
+  sizes
 };
-export { sizeNames, sizes };

package/src/context/builder.context.js

@@ -1,3 +1,10 @@
-import { createContext } from 'react';
-var stdin_default = createContext({ content: null, context: {}, state: {} });
-export { stdin_default as default };
+import { createContext } from "react";
+var stdin_default = createContext({
+  content: null,
+  context: {},
+  state: {},
+  apiKey: null
+});
+export {
+  stdin_default as default
+};

package/src/functions/evaluate.js

@@ -1,29 +1,29 @@
 import * as React from 'react';
-import { isBrowser } from './is-browser';
-import { isEditing } from './is-editing';
-function evaluate(options) {
-  const { code } = options;
+import { isBrowser } from "./is-browser";
+import { isEditing } from "./is-editing";
+function evaluate({
+  code,
+  context,
+  state,
+  event
+}) {
+  if (code === "") {
+    console.warn("Skipping evaluation of empty code block.");
+    return;
+  }
   const builder = {
     isEditing: isEditing(),
     isBrowser: isBrowser(),
+    isServer: !isBrowser()
   };
-  const useReturn = !(
-    code.includes(';') ||
-    code.includes(' return ') ||
-    code.trim().startsWith('return ')
-  );
-  const useCode = `${useReturn ? `return (${code});` : code}`;
+  const useReturn = !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
+  const useCode = useReturn ? `return (${code});` : code;
   try {
-    return new Function(
-      'builder',
-      'Builder',
-      'state',
-      'context',
-      'event',
-      useCode
-    )(builder, builder, options.state, options.context, options.event);
+    return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
   } catch (e) {
-    console.warn('Builder custom code error: ', e);
+    console.warn("Builder custom code error: ", e);
   }
 }
-export { evaluate };
+export {
+  evaluate
+};

package/src/functions/event-handler-name.js

@@ -3,4 +3,6 @@ function capitalizeFirstLetter(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 const getEventHandlerName = (key) => `on${capitalizeFirstLetter(key)}`;
-export { getEventHandlerName };
+export {
+  getEventHandlerName
+};

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

@@ -1,23 +1,24 @@
 import * as React from 'react';
-import { evaluate } from './evaluate';
-import { getEventHandlerName } from './event-handler-name';
+import { evaluate } from "./evaluate";
+import { getEventHandlerName } from "./event-handler-name";
 function getBlockActions(options) {
+  var _a;
   const obj = {};
-  if (options.block.actions) {
-    for (const key in options.block.actions) {
-      if (!options.block.actions.hasOwnProperty(key)) {
-        continue;
-      }
-      const value = options.block.actions[key];
-      obj[getEventHandlerName(key)] = (event) =>
-        evaluate({
-          code: value,
-          context: options.context,
-          state: options.state,
-          event,
-        });
+  const optionActions = (_a = options.block.actions) != null ? _a : {};
+  for (const key in optionActions) {
+    if (!optionActions.hasOwnProperty(key)) {
+      continue;
     }
+    const value = optionActions[key];
+    obj[getEventHandlerName(key)] = (event) => evaluate({
+      code: value,
+      context: options.context,
+      state: options.state,
+      event
+    });
   }
   return obj;
 }
-export { getBlockActions };
+export {
+  getBlockActions
+};

package/src/functions/get-block-component-options.js

@@ -3,29 +3,22 @@ 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 __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 (__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]);
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
   return a;
 };
 function getBlockComponentOptions(block) {
   var _a;
-  return __spreadValues(
-    __spreadValues({}, (_a = block.component) == null ? void 0 : _a.options),
-    block.options
-  );
+  return __spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options);
 }
-export { getBlockComponentOptions };
+export {
+  getBlockComponentOptions
+};

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

@@ -5,42 +5,38 @@ 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 (__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]);
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { findDOMNode } from 'react-dom';
-import { isEditing } from './is-editing';
+import { findDOMNode } from "react-dom";
+import { isEditing } from "./is-editing";
 function getBlockProperties(block) {
   return __spreadProps(__spreadValues({}, block.properties), {
     ref: (ref) => {
       if (isEditing()) {
         const el = findDOMNode(ref);
         if (el) {
-          el.setAttribute('builder-id', block.id);
+          el.setAttribute("builder-id", block.id);
           el.classList.add(block.id);
         }
       }
     },
     dataSet: {
-      'builder-id': block.id,
-      class: [block.id, 'builder-block', block.class].filter(Boolean).join(' '),
-    },
+      "builder-id": block.id,
+      class: [block.id, "builder-block", block.class].filter(Boolean).join(" ")
+    }
   });
 }
-export { getBlockProperties };
+export {
+  getBlockProperties
+};

package/src/functions/get-block-styles.js

@@ -3,55 +3,42 @@ 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 __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 (__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]);
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
   return a;
 };
-const propertiesThatMustBeNumber = new Set(['lineHeight']);
-const displayValues = new Set(['flex', 'none']);
+const propertiesThatMustBeNumber = new Set(["lineHeight"]);
+const displayValues = new Set(["flex", "none"]);
 const SHOW_WARNINGS = false;
 function validateReactNativeStyles(styles) {
   for (const key in styles) {
     const propertyValue = styles[key];
-    if (key === 'display' && !displayValues.has(propertyValue)) {
+    if (key === "display" && !displayValues.has(propertyValue)) {
       if (SHOW_WARNINGS) {
-        console.warn(
-          `Style value for key "display" must be "flex" or "none" but had ${propertyValue}`
-        );
+        console.warn(`Style value for key "display" must be "flex" or "none" but had ${propertyValue}`);
       }
       delete styles[key];
     }
-    if (typeof propertyValue === 'string' && propertyValue.match(/^\-?\d/)) {
+    if (typeof propertyValue === "string" && propertyValue.match(/^\-?\d/)) {
       const newValue = parseFloat(propertyValue);
       if (!isNaN(newValue)) {
         styles[key] = newValue;
       }
-      if (typeof newValue === 'number' && newValue < 0) {
+      if (typeof newValue === "number" && newValue < 0) {
         styles[key] = 0;
       }
     }
-    if (
-      propertiesThatMustBeNumber.has(key) &&
-      typeof styles[key] !== 'number'
-    ) {
+    if (propertiesThatMustBeNumber.has(key) && typeof styles[key] !== "number") {
       if (SHOW_WARNINGS) {
-        console.warn(
-          `Style key ${key} must be a number, but had value \`${styles[key]}\``
-        );
+        console.warn(`Style key ${key} must be a number, but had value \`${styles[key]}\``);
       }
       delete styles[key];
     }
@@ -59,13 +46,7 @@ function validateReactNativeStyles(styles) {
 }
 function getBlockStyles(block) {
   var _a, _b, _c;
-  const styles = __spreadValues(
-    __spreadValues(
-      {},
-      (_a = block.responsiveStyles) == null ? void 0 : _a.large
-    ),
-    block.styles
-  );
+  const styles = __spreadValues(__spreadValues({}, (_a = block.responsiveStyles) == null ? void 0 : _a.large), block.styles);
   if ((_b = block.responsiveStyles) == null ? void 0 : _b.medium) {
     Object.assign(styles, block.responsiveStyles.medium);
   }
@@ -75,4 +56,6 @@ function getBlockStyles(block) {
   validateReactNativeStyles(styles);
   return styles;
 }
-export { getBlockStyles };
+export {
+  getBlockStyles
+};

package/src/functions/get-block-tag.js

@@ -1,6 +1,8 @@
 import * as React from 'react';
-import { View } from 'react-native';
+import { View } from "react-native";
 function getBlockTag(block) {
   return View;
 }
-export { getBlockTag };
+export {
+  getBlockTag
+};