@builder.io/sdk-react-native 0.0.1-49 → 0.0.1-51

package/src/components/render-blocks.js

@@ -1,80 +1,54 @@
-import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { isEditing } from '../functions/is-editing';
-import RenderBlock from './render-block';
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+import { isEditing } from "../functions/is-editing.js";
+import RenderBlock from "./render-block/render-block.js";
 function RenderBlocks(props) {
   var _a;
   function className() {
     var _a2;
-    return (
-      'builder-blocks' +
-      (!((_a2 = props.blocks) == null ? void 0 : _a2.length)
-        ? ' no-blocks'
-        : '')
-    );
+    return "builder-blocks" + (!((_a2 = props.blocks) == null ? void 0 : _a2.length) ? " no-blocks" : "");
   }
   function onClick() {
     var _a2, _b;
     if (isEditing() && !((_a2 = props.blocks) == null ? void 0 : _a2.length)) {
-      (_b = window.parent) == null
-        ? void 0
-        : _b.postMessage(
-            {
-              type: 'builder.clickEmptyBlocks',
-              data: {
-                parentElementId: props.parent,
-                dataPath: props.path,
-              },
-            },
-            '*'
-          );
+      (_b = window.parent) == null ? void 0 : _b.postMessage({
+        type: "builder.clickEmptyBlocks",
+        data: {
+          parentElementId: props.parent,
+          dataPath: props.path
+        }
+      }, "*");
     }
   }
   function onMouseEnter() {
     var _a2, _b;
     if (isEditing() && !((_a2 = props.blocks) == null ? void 0 : _a2.length)) {
-      (_b = window.parent) == null
-        ? void 0
-        : _b.postMessage(
-            {
-              type: 'builder.hoverEmptyBlocks',
-              data: {
-                parentElementId: props.parent,
-                dataPath: props.path,
-              },
-            },
-            '*'
-          );
+      (_b = window.parent) == null ? void 0 : _b.postMessage({
+        type: "builder.hoverEmptyBlocks",
+        data: {
+          parentElementId: props.parent,
+          dataPath: props.path
+        }
+      }, "*");
     }
   }
-  return /* @__PURE__ */ React.createElement(
-    View,
-    {
-      'builder-path': props.path,
-      'builder-parent-id': props.parent,
-      dataSet: {
-        class: className(),
-      },
-      onClick: (event) => onClick(),
-      onMouseEnter: (event) => onMouseEnter(),
-      style: styles.view1,
+  return /* @__PURE__ */ React.createElement(View, {
+    "builder-path": props.path,
+    "builder-parent-id": props.parent,
+    dataSet: {
+      class: className()
     },
-    props.blocks
-      ? /* @__PURE__ */ React.createElement(
-          React.Fragment,
-          null,
-          (_a = props.blocks) == null
-            ? void 0
-            : _a.map((block) =>
-                /* @__PURE__ */ React.createElement(RenderBlock, {
-                  block,
-                })
-              )
-        )
-      : null
-  );
+    onClick: (event) => onClick(),
+    onMouseEnter: (event) => onMouseEnter(),
+    style: styles.view1
+  }, props.blocks ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = props.blocks) == null ? void 0 : _a.map((block) => /* @__PURE__ */ React.createElement(RenderBlock, {
+    key: block.id,
+    block
+  }))) : null);
 }
 const styles = StyleSheet.create({
-  view1: { display: 'flex', flexDirection: 'column', alignItems: 'stretch' },
+  view1: { display: "flex", flexDirection: "column", alignItems: "stretch" }
 });
-export { RenderBlocks as default };
+export {
+  RenderBlocks as default
+};

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

@@ -1,24 +1,24 @@
-import * as React from 'react';
-import { View, StyleSheet, Image, Text } from 'react-native';
-import { isEditing } from '../functions/is-editing';
-import RenderBlock from './render-block.lite';
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { isEditing } from "../functions/is-editing.js";
+import RenderBlock from "./render-block/render-block.lite";
 
 export default function RenderBlocks(props) {
   function className() {
-    return 'builder-blocks' + (!props.blocks?.length ? ' no-blocks' : '');
+    return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
   }
 
   function onClick() {
     if (isEditing() && !props.blocks?.length) {
       window.parent?.postMessage(
         {
-          type: 'builder.clickEmptyBlocks',
+          type: "builder.clickEmptyBlocks",
           data: {
             parentElementId: props.parent,
             dataPath: props.path,
           },
         },
-        '*'
+        "*"
       );
     }
   }
@@ -27,13 +27,13 @@ export default function RenderBlocks(props) {
     if (isEditing() && !props.blocks?.length) {
       window.parent?.postMessage(
         {
-          type: 'builder.hoverEmptyBlocks',
+          type: "builder.hoverEmptyBlocks",
           data: {
             parentElementId: props.parent,
             dataPath: props.path,
           },
         },
-        '*'
+        "*"
       );
     }
   }
@@ -52,7 +52,7 @@ export default function RenderBlocks(props) {
       {props.blocks ? (
         <>
           {props.blocks?.map((block) => (
-            <RenderBlock block={block} />
+            <RenderBlock key={block.id} block={block} />
           ))}
         </>
       ) : null}
@@ -61,5 +61,5 @@ export default function RenderBlocks(props) {
 }
 
 const styles = StyleSheet.create({
-  view1: { display: 'flex', flexDirection: 'column', alignItems: 'stretch' },
+  view1: { display: "flex", flexDirection: "column", alignItems: "stretch" },
 });

package/src/components/render-content/components/render-styles.js

@@ -0,0 +1,58 @@
+import * as React from "react";
+import RenderInlinedStyles from "../../render-inlined-styles.js";
+function RenderContentStyles(props) {
+  function getCssFromFont(font) {
+    var _a, _b;
+    const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+    const name = family.split(",")[0];
+    const url = (_b = font.fileUrl) != null ? _b : (_a = font == null ? void 0 : font.files) == null ? void 0 : _a.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({ customFonts }) {
+    var _a;
+    return ((_a = customFonts == null ? void 0 : customFonts.map((font) => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
+  }
+  function injectedStyles() {
+    return `
+${props.cssCode || ""}
+${getFontCss({
+      customFonts: props.customFonts
+    })}`;
+  }
+  return /* @__PURE__ */ React.createElement(RenderInlinedStyles, {
+    styles: injectedStyles()
+  });
+}
+export {
+  RenderContentStyles as default
+};

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

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import RenderInlinedStyles from "../../render-inlined-styles.lite";
+
+export default function RenderContentStyles(props) {
+  function getCssFromFont(font) {
+    // 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({ customFonts }) {
+    // TODO: flag for this
+    // if (!builder.allowCustomFonts) {
+    //   return '';
+    // }
+    // TODO: separate internal data from external
+    return customFonts?.map((font) => getCssFromFont(font))?.join(" ") || "";
+  }
+
+  function injectedStyles() {
+    return `
+${props.cssCode || ""}
+${getFontCss({
+  customFonts: props.customFonts,
+})}`;
+  }
+
+  return <RenderInlinedStyles styles={injectedStyles()} />;
+}

package/src/components/render-content/index.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { default as default2 } from "./render-content.js";
+export {
+  default2 as default
+};

package/src/components/render-content/render-content.js

@@ -0,0 +1,254 @@
+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 { useState, useEffect } from "react";
+import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
+import { TARGET } from "../../constants/target.js";
+import BuilderContext from "../../context/builder.context";
+import { evaluate } from "../../functions/evaluate.js";
+import {
+  convertSearchParamsToQueryObject,
+  getBuilderSearchParams
+} from "../../functions/get-builder-search-params/index.js";
+import { getContent } from "../../functions/get-content/index.js";
+import { getFetch } 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 { previewingModelName } from "../../functions/previewing-model-name.js";
+import {
+  components,
+  createRegisterComponentMessage
+} from "../../functions/register-component.js";
+import { track } from "../../functions/track.js";
+import RenderBlocks from "../render-blocks.js";
+import RenderContentStyles from "./components/render-styles.js";
+function RenderContent(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  function useContent() {
+    var _a2;
+    const mergedContent = __spreadProps(__spreadValues(__spreadValues({}, props.content), overrideContent), {
+      data: __spreadValues(__spreadValues(__spreadValues({}, (_a2 = props.content) == null ? void 0 : _a2.data), props.data), overrideContent == null ? void 0 : overrideContent.data)
+    });
+    return mergedContent;
+  }
+  const [overrideContent, setOverrideContent] = useState(() => null);
+  const [update, setUpdate] = useState(() => 0);
+  const [overrideState, setOverrideState] = useState(() => ({}));
+  function contentState() {
+    var _a2, _b2;
+    return __spreadValues(__spreadValues(__spreadValues({}, (_b2 = (_a2 = props.content) == null ? void 0 : _a2.data) == null ? void 0 : _b2.state), props.data), overrideState);
+  }
+  function context() {
+    return {};
+  }
+  function allRegisteredComponents() {
+    const allComponentsArray = [
+      ...getDefaultRegisteredComponents(),
+      ...components,
+      ...props.customComponents || []
+    ];
+    const allComponents = allComponentsArray.reduce((acc, curr) => __spreadProps(__spreadValues({}, acc), { [curr.info.name]: curr }), {});
+    return allComponents;
+  }
+  function processMessage(event) {
+    const { data } = event;
+    if (data) {
+      switch (data.type) {
+        case "builder.contentUpdate": {
+          const messageContent = data.data;
+          const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
+          const contentData = messageContent.data;
+          if (key === props.model) {
+            setOverrideContent(contentData);
+          }
+          break;
+        }
+        case "builder.patchUpdates": {
+          break;
+        }
+      }
+    }
+  }
+  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: contentState()
+      });
+    }
+  }
+  function httpReqsData() {
+    return {};
+  }
+  function evalExpression(expression) {
+    return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
+      code: group,
+      context: context(),
+      state: contentState()
+    }));
+  }
+  function handleRequest({ url, key }) {
+    const fetchAndSetState = () => __async(this, null, function* () {
+      const fetch = yield getFetch();
+      const response = yield fetch(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() {
+    if (isEditing()) {
+      window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
+        detail: {
+          state: contentState(),
+          ref: {
+            name: props.model
+          }
+        }
+      }));
+    }
+  }
+  useEffect(() => {
+    if (isBrowser()) {
+      if (isEditing()) {
+        Object.values(allRegisteredComponents()).forEach((registeredComponent) => {
+          var _a2;
+          const message = createRegisterComponentMessage(registeredComponent);
+          (_a2 = window.parent) == null ? void 0 : _a2.postMessage(message, "*");
+        });
+        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();
+  }, [contentState()]);
+  useEffect(() => {
+    return () => {
+      if (isBrowser()) {
+        window.removeEventListener("message", processMessage);
+        window.removeEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ React.createElement(BuilderContext.Provider, {
+    value: {
+      get content() {
+        return useContent();
+      },
+      get state() {
+        return contentState();
+      },
+      get context() {
+        return context();
+      },
+      get apiKey() {
+        return props.apiKey;
+      },
+      get registeredComponents() {
+        return allRegisteredComponents();
+      }
+    }
+  }, 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)) && TARGET !== "reactNative" ? /* @__PURE__ */ React.createElement(RenderContentStyles, {
+    cssCode: useContent().data.cssCode,
+    customFonts: useContent().data.customFonts
+  }) : 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
+};