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

package/src/components/render-content.js

@@ -1,26 +1,128 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+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 __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;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 import * as React from "react";
-import { View } from "react-native";
+import { View, Text } from "react-native";
 import { useState, useEffect } from "react";
 import { isBrowser } from "../functions/is-browser";
-import RenderBlock from "./render-block";
 import BuilderContext from "../context/builder.context";
 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";
+import { evaluate } from "../functions/evaluate";
+import { getFetch } from "../functions/get-fetch";
 function RenderContent(props) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   function useContent() {
-    return overrideContent || props.content;
+    var _a2;
+    const mergedContent = __spreadProps(__spreadValues(__spreadValues({}, props.content), overrideContent), {
+      data: __spreadValues(__spreadValues({}, (_a2 = props.content) == null ? void 0 : _a2.data), overrideContent == null ? void 0 : overrideContent.data)
+    });
+    return mergedContent;
   }
-  const [update, setUpdate] = useState(() => 0);
-  const [state, setState] = useState(() => ({}));
-  const [context, setContext] = useState(() => ({}));
   const [overrideContent, setOverrideContent] = useState(() => null);
+  const [update, setUpdate] = useState(() => 0);
+  const [overrideState, setOverrideState] = useState(() => ({}));
+  function state() {
+    var _a2, _b2;
+    return __spreadValues(__spreadValues({}, (_b2 = (_a2 = props.content) == null ? void 0 : _a2.data) == null ? void 0 : _b2.state), overrideState);
+  }
+  function context() {
+    return {};
+  }
+  function getCssFromFont(font, data) {
+    var _a2, _b2;
+    const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+    const name = family.split(",")[0];
+    const url = (_b2 = font.fileUrl) != null ? _b2 : (_a2 = font == null ? void 0 : font.files) == null ? void 0 : _a2.regular;
+    let str = "";
+    if (url && family && name) {
+      str += `
+@font-face {
+  font-family: "${family}";
+  src: local("${name}"), url('${url}') format('woff2');
+  font-display: fallback;
+  font-weight: 400;
+}
+        `.trim();
+    }
+    if (font.files) {
+      for (const weight in font.files) {
+        const isNumber = String(Number(weight)) === weight;
+        if (!isNumber) {
+          continue;
+        }
+        const weightUrl = font.files[weight];
+        if (weightUrl && weightUrl !== url) {
+          str += `
+@font-face {
+  font-family: "${family}";
+  src: url('${weightUrl}') format('woff2');
+  font-display: fallback;
+  font-weight: ${weight};
+}
+          `.trim();
+        }
+      }
+    }
+    return str;
+  }
+  function getFontCss(data) {
+    var _a2, _b2;
+    return ((_b2 = (_a2 = data == null ? void 0 : data.customFonts) == null ? void 0 : _a2.map((font) => getCssFromFont(font, data))) == null ? void 0 : _b2.join(" ")) || "";
+  }
   function processMessage(event) {
     const { data } = event;
     if (data) {
       switch (data.type) {
         case "builder.contentUpdate": {
-          const key = data.data.key || data.data.alias || data.data.entry || data.data.modelName;
-          const contentData = data.data.data;
+          const messageContent = data.data;
+          const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
+          const contentData = messageContent.data;
           if (key === props.model) {
             setOverrideContent(contentData);
           }
@@ -32,34 +134,132 @@ function RenderContent(props) {
       }
     }
   }
+  function evaluateJsCode() {
+    var _a2, _b2;
+    const jsCode = (_b2 = (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.data) == null ? void 0 : _b2.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(this, null, function* () {
+      const response = yield getFetch()(url);
+      const json = yield response.json();
+      const newOverrideState = __spreadProps(__spreadValues({}, overrideState), { [key]: json });
+      setOverrideState(newOverrideState);
+    });
+    fetchAndSetState();
+  }
+  function runHttpRequests() {
+    var _a2, _b2, _c2;
+    const requests = (_c2 = (_b2 = (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.data) == null ? void 0 : _b2.httpRequests) != null ? _c2 : {};
+    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()) {
-      window.addEventListener("message", processMessage);
+      if (isEditing()) {
+        window.addEventListener("message", processMessage);
+        window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
+      }
+      if (useContent()) {
+        track("impression", {
+          contentId: useContent().id
+        });
+      }
+      if (isPreviewing()) {
+        if (props.model && previewingModelName() === props.model) {
+          const currentUrl = new URL(location.href);
+          const previewApiKey = currentUrl.searchParams.get("apiKey");
+          if (previewApiKey) {
+            getContent({
+              model: props.model,
+              apiKey: previewApiKey,
+              options: getBuilderSearchParams(convertSearchParamsToQueryObject(currentUrl.searchParams))
+            }).then((content) => {
+              if (content) {
+                setOverrideContent(content);
+              }
+            });
+          }
+        }
+      }
+      evaluateJsCode();
+      runHttpRequests();
+      emitStateUpdate();
     }
   }, []);
+  useEffect(() => {
+    evaluateJsCode();
+  }, [(_b = (_a = useContent == null ? void 0 : useContent()) == null ? void 0 : _a.data) == null ? void 0 : _b.jsCode]);
+  useEffect(() => {
+    runHttpRequests();
+  }, [(_d = (_c = useContent == null ? void 0 : useContent()) == null ? void 0 : _c.data) == null ? void 0 : _d.httpRequests]);
+  useEffect(() => {
+    emitStateUpdate();
+  }, [state()]);
+  useEffect(() => {
+    return () => {
+      if (isBrowser()) {
+        window.removeEventListener("message", processMessage);
+        window.removeEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
+      }
+    };
+  }, []);
   return /* @__PURE__ */ React.createElement(BuilderContext.Provider, {
     value: {
       get content() {
-        return props.content;
+        return useContent();
       },
       get state() {
-        return state;
+        return state();
       },
       get context() {
-        return context;
+        return context();
+      },
+      get apiKey() {
+        return props.apiKey;
       }
     }
-  }, /* @__PURE__ */ React.createElement(View, {
-    onClick: (event) => {
-      track("click", {
-        contentId: props.content.id
-      });
-    },
-    "data-builder-content-id": (_a = props.content) == null ? void 0 : _a.id
-  }, ((_c = (_b = useContent == null ? void 0 : useContent()) == null ? void 0 : _b.data) == null ? void 0 : _c.cssCode) && /* @__PURE__ */ React.createElement(View, null, useContent().data.cssCode), (_e = (_d = useContent == null ? void 0 : useContent()) == null ? void 0 : _d.data) == null ? void 0 : _e.blocks.map((block) => /* @__PURE__ */ React.createElement(RenderBlock, {
-    key: block.id,
-    block
-  }))));
+  }, useContent() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, {
+    onClick: (event) => track("click", {
+      contentId: useContent().id
+    }),
+    "data-builder-content-id": (_e = useContent == null ? void 0 : useContent()) == null ? void 0 : _e.id
+  }, (((_g = (_f = useContent == null ? void 0 : useContent()) == null ? void 0 : _f.data) == null ? void 0 : _g.cssCode) || ((_j = (_i = (_h = useContent == null ? void 0 : useContent()) == null ? void 0 : _h.data) == null ? void 0 : _i.customFonts) == null ? void 0 : _j.length)) && !isReactNative() ? /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(Text, null, useContent().data.cssCode), /* @__PURE__ */ React.createElement(Text, null, state().getFontCss(useContent().data))) : null, /* @__PURE__ */ React.createElement(RenderBlocks, {
+    blocks: (_l = (_k = useContent == null ? void 0 : useContent()) == null ? void 0 : _k.data) == null ? void 0 : _l.blocks
+  }))) : null);
 }
 export {
   RenderContent as default

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

@@ -2,24 +2,104 @@ 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 { 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];
+    const url = font.fileUrl ?? font?.files?.regular;
+    let str = "";
+
+    if (url && family && name) {
+      str += `
+@font-face {
+  font-family: "${family}";
+  src: local("${name}"), url('${url}') format('woff2');
+  font-display: fallback;
+  font-weight: 400;
+}
+        `.trim();
+    }
+
+    if (font.files) {
+      for (const weight in font.files) {
+        const isNumber = String(Number(weight)) === weight;
+
+        if (!isNumber) {
+          continue;
+        } // TODO: maybe limit number loaded
+
+        const weightUrl = font.files[weight];
+
+        if (weightUrl && weightUrl !== url) {
+          str += `
+@font-face {
+  font-family: "${family}";
+  src: url('${weightUrl}') format('woff2');
+  font-display: fallback;
+  font-weight: ${weight};
+}
+          `.trim();
+        }
+      }
+    }
+
+    return str;
+  }
+
+  function getFontCss(data) {
+    // TODO: flag for this
+    // if (!builder.allowCustomFonts) {
+    //   return '';
+    // }
+    // TODO: separate internal data from external
+    return (
+      data?.customFonts?.map((font) => getCssFromFont(font, data))?.join(" ") ||
+      ""
+    );
+  }
 
   function processMessage(event) {
     const { data } = event;
@@ -27,12 +107,13 @@ export default function RenderContent(props) {
     if (data) {
       switch (data.type) {
         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);
@@ -49,47 +130,179 @@ 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()) {
-      window.addEventListener("message", processMessage); // TODO: run this when content is defined
-      // track('impression', {
-      //   contentId: props.content!.id,
-      // });
+      if (isEditing()) {
+        window.addEventListener("message", processMessage);
+        window.addEventListener(
+          "builder:component:stateChangeListenerActivated",
+          emitStateUpdate
+        );
+      }
+
+      if (useContent()) {
+        track("impression", {
+          contentId: useContent().id,
+        });
+      } // override normal content in preview mode
+
+      if (isPreviewing()) {
+        if (props.model && previewingModelName() === props.model) {
+          const currentUrl = new URL(location.href);
+          const previewApiKey = currentUrl.searchParams.get("apiKey");
+
+          if (previewApiKey) {
+            getContent({
+              model: props.model,
+              apiKey: previewApiKey,
+              options: getBuilderSearchParams(
+                convertSearchParamsToQueryObject(currentUrl.searchParams)
+              ),
+            }).then((content) => {
+              if (content) {
+                setOverrideContent(content);
+              }
+            });
+          }
+        }
+      }
+
+      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={{
         get content() {
-          return props.content;
+          return useContent();
         },
 
         get state() {
-          return state;
+          return state();
         },
 
         get context() {
-          return context;
+          return context();
+        },
+
+        get apiKey() {
+          return props.apiKey;
         },
       }}
     >
-      <View
-        onClick={(event) => {
-          track("click", {
-            contentId: props.content.id,
-          });
-        }}
-        data-builder-content-id={props.content?.id}
-      >
-        {useContent?.()?.data?.cssCode && (
-          <View>{useContent().data.cssCode}</View>
-        )}
-
-        {useContent?.()?.data?.blocks.map((block) => (
-          <RenderBlock key={block.id} block={block} />
-        ))}
-      </View>
+      {useContent() ? (
+        <>
+          <View
+            onClick={(event) =>
+              track("click", {
+                contentId: useContent().id,
+              })
+            }
+            data-builder-content-id={useContent?.()?.id}
+          >
+            {(useContent?.()?.data?.cssCode ||
+              useContent?.()?.data?.customFonts?.length) &&
+            !isReactNative() ? (
+              <View>
+                <Text>{useContent().data.cssCode}</Text>
+
+                <Text>{state().getFontCss(useContent().data)}</Text>
+              </View>
+            ) : null}
+
+            <RenderBlocks blocks={useContent?.()?.data?.blocks} />
+          </View>
+        </>
+      ) : null}
     </BuilderContext.Provider>
   );
 }

package/src/context/builder.context.js

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

package/src/functions/evaluate.js

@@ -1,18 +1,27 @@
 import * as React from 'react';
 import { isBrowser } from "./is-browser";
 import { isEditing } from "./is-editing";
-function evaluate(options) {
-  const { code } = options;
+function evaluate({
+  code,
+  context,
+  state,
+  event
+}) {
+  if (code === "") {
+    console.warn("Skipping evaluation of empty code block.");
+    return;
+  }
   const builder = {
     isEditing: isEditing(),
-    isBrowser: isBrowser()
+    isBrowser: isBrowser(),
+    isServer: !isBrowser()
   };
   const useReturn = !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
-  const useCode = `${useReturn ? `return (${code});` : code}`;
+  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 {

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+const getEventHandlerName = (key) => `on${capitalizeFirstLetter(key)}`;
+export {
+  getEventHandlerName
+};