@builder.io/sdk-react-native 0.0.1-34 → 0.0.1-35

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

@@ -0,0 +1,125 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { useState, useContext } from "react";
+import { getBlockComponentOptions } from "../functions/get-block-component-options";
+import { getBlockProperties } from "../functions/get-block-properties";
+import { getBlockStyles } from "../functions/get-block-styles";
+import { getBlockTag } from "../functions/get-block-tag";
+import { components } from "../functions/register-component";
+import BuilderContext from "../context/builder.context.lite";
+import { getBlockActions } from "../functions/get-block-actions";
+import { getProcessedBlock } from "../functions/get-processed-block";
+import BlockStyles from "./block-styles.lite";
+import RenderBlocks from "./render-blocks.lite";
+
+export default function RenderBlock(props) {
+  function component() {
+    const componentName = useBlock().component?.name;
+
+    if (!componentName) {
+      return null;
+    }
+
+    const ref = components[useBlock().component?.name];
+
+    if (componentName && !ref) {
+      // TODO: Public doc page with more info about this message
+      console.warn(`
+        Could not find a registered component named "${componentName}". 
+        If you registered it, is the file that registered it imported by the file that needs to render it?`);
+    }
+
+    return ref;
+  }
+
+  function componentInfo() {
+    return component?.()?.info;
+  }
+
+  function componentRef() {
+    return component?.()?.component;
+  }
+
+  function tagName() {
+    return getBlockTag(useBlock());
+  }
+
+  function properties() {
+    return getBlockProperties(useBlock());
+  }
+
+  function useBlock() {
+    return getProcessedBlock({
+      block: props.block,
+      state: builderContext.state,
+      context: builderContext.context,
+    });
+  }
+
+  function actions() {
+    return getBlockActions({
+      block: useBlock(),
+      state: builderContext.state,
+      context: builderContext.context,
+    });
+  }
+
+  function css() {
+    return getBlockStyles(useBlock());
+  }
+
+  function componentOptions() {
+    return getBlockComponentOptions(useBlock());
+  }
+
+  const builderContext = useContext(BuilderContext);
+
+  const ComponentRefRef = componentRef();
+  const TagNameRef = tagName();
+
+  return (
+    <>
+      {!componentInfo?.()?.noWrap ? (
+        <>
+          <TagNameRef {...properties()} style={css()}>
+            <BlockStyles block={useBlock()} />
+
+            {componentRef() ? (
+              <ComponentRefRef
+                {...componentOptions()}
+                builderBlock={useBlock()}
+              >
+                {useBlock().children ? (
+                  <>
+                    <RenderBlocks
+                      path="children"
+                      blocks={useBlock().children}
+                    />
+                  </>
+                ) : null}
+              </ComponentRefRef>
+            ) : null}
+
+            {!componentRef() &&
+            useBlock().children &&
+            useBlock().children.length ? (
+              <>
+                {useBlock().children?.map((child) => (
+                  <RenderBlock block={child} />
+                ))}
+              </>
+            ) : null}
+          </TagNameRef>
+        </>
+      ) : (
+        <ComponentRefRef
+          {...componentInfo?.()?.options}
+          attributes={properties()}
+          builderBlock={useBlock()}
+          style={css()}
+          children={useBlock().children}
+        />
+      )}
+    </>
+  );
+}

package/src/components/render-blocks.js

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

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

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

package/src/components/render-content.js

@@ -0,0 +1,143 @@
+import * as React from "react";
+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";
+function RenderContent(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  function useContent() {
+    return overrideContent || props.content;
+  }
+  const [update, setUpdate] = useState(() => 0);
+  const [state, setState] = useState(() => ({}));
+  const [context, setContext] = useState(() => ({}));
+  const [overrideContent, setOverrideContent] = useState(() => null);
+  function getCssFromFont(font, data) {
+    const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+    const name = family.split(",")[0];
+    const url = font.fileUrl ? font.fileUrl : font.files && 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;
+        }
+        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) {
+    return (data == null ? void 0 : data.customFonts) && data.customFonts.length && data.customFonts.map((font) => this.getCssFromFont(font, data)).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;
+          if (key === props.model) {
+            setOverrideContent(contentData);
+          }
+          break;
+        }
+        case "builder.patchUpdates": {
+          break;
+        }
+      }
+    }
+  }
+  useEffect(() => {
+    if (isBrowser()) {
+      if (isEditing()) {
+        window.addEventListener("message", processMessage);
+      }
+      if (useContent() && !isEditing()) {
+        track("impression", {
+          contentId: useContent().id
+        });
+      }
+      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;
+              }
+            });
+            getContent({
+              model: props.model,
+              apiKey,
+              options
+            }).then((content) => {
+              if (content) {
+                setOverrideContent(content);
+              }
+            });
+          }
+        }
+      }
+    }
+  }, []);
+  return /* @__PURE__ */ React.createElement(BuilderContext.Provider, {
+    value: {
+      get content() {
+        return useContent();
+      },
+      get state() {
+        return state;
+      },
+      get context() {
+        return context;
+      }
+    }
+  }, useContent() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, {
+    onClick: (event) => {
+      if (!isEditing()) {
+        track("click", {
+          contentId: useContent().id
+        });
+      }
+    },
+    "data-builder-content-id": (_a = useContent == null ? void 0 : useContent()) == null ? void 0 : _a.id
+  }, (((_c = (_b = useContent == null ? void 0 : useContent()) == null ? void 0 : _b.data) == null ? void 0 : _c.cssCode) || ((_e = (_d = useContent == null ? void 0 : useContent()) == null ? void 0 : _d.data) == null ? void 0 : _e.customFonts) && ((_g = (_f = useContent == null ? void 0 : useContent()) == null ? void 0 : _f.data) == null ? void 0 : _g.customFonts.length)) && !isReactNative() ? /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(Text, null, useContent().data.cssCode), /* @__PURE__ */ React.createElement(Text, null, getFontCss(useContent().data))) : null, (_j = (_i = (_h = useContent == null ? void 0 : useContent()) == null ? void 0 : _h.data) == null ? void 0 : _i.blocks) == null ? void 0 : _j.map((block) => /* @__PURE__ */ React.createElement(RenderBlock, {
+    key: block.id,
+    block
+  })))) : null);
+}
+export {
+  RenderContent as default
+};

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

@@ -0,0 +1,207 @@
+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";
+
+export default function RenderContent(props) {
+  function useContent() {
+    return overrideContent || props.content;
+  }
+
+  const [update, setUpdate] = useState(() => 0);
+
+  const [state, setState] = useState(() => ({}));
+
+  const [context, setContext] = useState(() => ({}));
+
+  const [overrideContent, setOverrideContent] = useState(() => null);
+
+  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.fileUrl : font.files && 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 (!this.builder.allowCustomFonts) {
+    //   return '';
+    // }
+    // TODO: separate internal data from external
+    return (
+      (data?.customFonts &&
+        data.customFonts.length &&
+        data.customFonts
+          .map((font) => this.getCssFromFont(font, data))
+          .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; // oof
+
+          if (key === props.model) {
+            setOverrideContent(contentData);
+          }
+
+          break;
+        }
+
+        case "builder.patchUpdates": {
+          // TODO
+          break;
+        }
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (isBrowser()) {
+      if (isEditing()) {
+        window.addEventListener("message", processMessage);
+      }
+
+      if (useContent() && !isEditing()) {
+        track("impression", {
+          contentId: useContent().id,
+        });
+      }
+
+      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
+
+            getContent({
+              model: props.model,
+              apiKey,
+              options,
+            }).then((content) => {
+              if (content) {
+                setOverrideContent(content);
+              }
+            });
+          } // TODO: fetch content and override. Forward all builder.* params
+        }
+      }
+    }
+  }, []);
+
+  return (
+    <BuilderContext.Provider
+      value={{
+        get content() {
+          return useContent();
+        },
+
+        get state() {
+          return state;
+        },
+
+        get context() {
+          return context;
+        },
+      }}
+    >
+      {useContent() ? (
+        <>
+          <View
+            onClick={(event) => {
+              if (!isEditing()) {
+                track("click", {
+                  contentId: useContent().id,
+                });
+              }
+            }}
+            data-builder-content-id={useContent?.()?.id}
+          >
+            {(useContent?.()?.data?.cssCode ||
+              (useContent?.()?.data?.customFonts &&
+                useContent?.()?.data?.customFonts.length)) &&
+            !isReactNative() ? (
+              <View>
+                <Text>{useContent().data.cssCode}</Text>
+
+                <Text>{getFontCss(useContent().data)}</Text>
+              </View>
+            ) : null}
+
+            {useContent?.()?.data?.blocks?.map((block) => (
+              <RenderBlock key={block.id} block={block} />
+            ))}
+          </View>
+        </>
+      ) : null}
+    </BuilderContext.Provider>
+  );
+}

package/src/constants/device-sizes.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+const sizeNames = ["xsmall", "small", "medium", "large"];
+const sizes = {
+  xsmall: {
+    min: 0,
+    default: 0,
+    max: 0
+  },
+  small: {
+    min: 320,
+    default: 321,
+    max: 640
+  },
+  medium: {
+    min: 641,
+    default: 642,
+    max: 991
+  },
+  large: {
+    min: 990,
+    default: 991,
+    max: 1200
+  },
+  getWidthForSize(size) {
+    return this[size].default;
+  },
+  getSizeForWidth(width) {
+    for (const size of sizeNames) {
+      const value = this[size];
+      if (width <= value.max) {
+        return size;
+      }
+    }
+    return "large";
+  }
+};
+export {
+  sizeNames,
+  sizes
+};

package/src/context/builder.context.js

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

package/src/functions/evaluate.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { isBrowser } from "./is-browser";
+import { isEditing } from "./is-editing";
+function evaluate(options) {
+  const { code } = options;
+  const builder = {
+    isEditing: isEditing(),
+    isBrowser: isBrowser()
+  };
+  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);
+  } catch (e) {
+    console.warn("Builder custom code error", e);
+  }
+}
+export {
+  evaluate
+};

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { evaluate } from "./evaluate";
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+function getBlockActions(options) {
+  const obj = {};
+  if (options.block.actions) {
+    for (const key in options.block.actions) {
+      const value = options.block.actions[key];
+      obj["on" + capitalizeFirstLetter(key)] = (event) => evaluate({
+        code: value,
+        context: options.context,
+        state: options.state,
+        event
+      });
+    }
+  }
+  return obj;
+}
+export {
+  getBlockActions
+};

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+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;
+};
+function getBlockComponentOptions(block) {
+  var _a;
+  return __spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options);
+}
+export {
+  getBlockComponentOptions
+};