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

package/src/components/render-block/render-block.helpers.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+const EMPTY_HTML_ELEMENTS = [
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "keygen",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+];
+const isEmptyHtmlElement = (tagName) => {
+  return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
+};
+export {
+  isEmptyHtmlElement
+};

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

@@ -0,0 +1,116 @@
+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));
+import * as React from "react";
+import { useContext } from "react";
+import { TARGET } from "../../constants/target.js";
+import BuilderContext from "../../context/builder.context";
+import { getBlockActions } from "../../functions/get-block-actions.js";
+import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
+import { getBlockProperties } from "../../functions/get-block-properties.js";
+import { getBlockStyles } from "../../functions/get-block-styles.js";
+import { getBlockTag } from "../../functions/get-block-tag.js";
+import { getProcessedBlock } from "../../functions/get-processed-block.js";
+import BlockStyles from "./block-styles.js";
+import { isEmptyHtmlElement } from "./render-block.helpers.js";
+function RenderBlock(props) {
+  var _a, _b, _c, _d;
+  function component() {
+    var _a2;
+    const componentName = (_a2 = useBlock().component) == null ? void 0 : _a2.name;
+    if (!componentName) {
+      return null;
+    }
+    const ref = builderContext.registeredComponents[componentName];
+    if (!ref) {
+      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 void 0;
+    } else {
+      return ref;
+    }
+  }
+  function componentInfo() {
+    var _a2;
+    return (_a2 = component == null ? void 0 : component()) == null ? void 0 : _a2.info;
+  }
+  function componentRef() {
+    var _a2;
+    return (_a2 = component == null ? void 0 : component()) == null ? void 0 : _a2.component;
+  }
+  function tagName() {
+    return getBlockTag(useBlock());
+  }
+  function useBlock() {
+    return getProcessedBlock({
+      block: props.block,
+      state: builderContext.state,
+      context: builderContext.context
+    });
+  }
+  function propertiesAndActions() {
+    return __spreadValues(__spreadValues({}, getBlockProperties(useBlock())), getBlockActions({
+      block: useBlock(),
+      state: builderContext.state,
+      context: builderContext.context
+    }));
+  }
+  function css() {
+    return getBlockStyles(useBlock());
+  }
+  function componentOptions() {
+    return getBlockComponentOptions(useBlock());
+  }
+  function children() {
+    var _a2;
+    return (_a2 = useBlock().children) != null ? _a2 : [];
+  }
+  function noCompRefChildren() {
+    return componentRef() ? [] : children();
+  }
+  const builderContext = useContext(BuilderContext);
+  const ComponentRefRef = componentRef();
+  const TagNameRef = tagName();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, !((_a = componentInfo == null ? void 0 : componentInfo()) == null ? void 0 : _a.noWrap) ? /* @__PURE__ */ React.createElement(React.Fragment, null, !isEmptyHtmlElement(tagName()) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagNameRef, __spreadProps(__spreadValues({}, propertiesAndActions()), {
+    style: css()
+  }), TARGET === "vue" || TARGET === "svelte" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BlockStyles, {
+    block: useBlock()
+  })) : null, componentRef() ? /* @__PURE__ */ React.createElement(ComponentRefRef, __spreadProps(__spreadValues({}, componentOptions()), {
+    builderBlock: useBlock()
+  }), (_b = children()) == null ? void 0 : _b.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
+    key: child.id,
+    block: child
+  }))) : null, (_c = noCompRefChildren()) == null ? void 0 : _c.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
+    key: child.id,
+    block: child
+  })))) : /* @__PURE__ */ React.createElement(TagNameRef, __spreadProps(__spreadValues({}, propertiesAndActions()), {
+    style: css()
+  }))) : /* @__PURE__ */ React.createElement(ComponentRefRef, __spreadProps(__spreadValues({}, componentOptions()), {
+    attributes: propertiesAndActions(),
+    builderBlock: useBlock(),
+    style: css()
+  }), (_d = children()) == null ? void 0 : _d.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
+    key: child.id,
+    block: child
+  }))));
+}
+export {
+  RenderBlock as default
+};

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

@@ -0,0 +1,139 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { useContext } from "react";
+import { TARGET } from "../../constants/target.js";
+import BuilderContext from "../../context/builder.context";
+import { getBlockActions } from "../../functions/get-block-actions.js";
+import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
+import { getBlockProperties } from "../../functions/get-block-properties.js";
+import { getBlockStyles } from "../../functions/get-block-styles.js";
+import { getBlockTag } from "../../functions/get-block-tag.js";
+import { getProcessedBlock } from "../../functions/get-processed-block.js";
+import BlockStyles from "./block-styles.lite";
+import { isEmptyHtmlElement } from "./render-block.helpers.js";
+
+export default function RenderBlock(props) {
+  function component() {
+    const componentName = useBlock().component?.name;
+
+    if (!componentName) {
+      return null;
+    }
+
+    const ref = builderContext.registeredComponents[componentName];
+
+    if (!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 undefined;
+    } else {
+      return ref;
+    }
+  }
+
+  function componentInfo() {
+    return component?.()?.info;
+  }
+
+  function componentRef() {
+    return component?.()?.component;
+  }
+
+  function tagName() {
+    return getBlockTag(useBlock());
+  }
+
+  function useBlock() {
+    return getProcessedBlock({
+      block: props.block,
+      state: builderContext.state,
+      context: builderContext.context,
+    });
+  }
+
+  function propertiesAndActions() {
+    return {
+      ...getBlockProperties(useBlock()),
+      ...getBlockActions({
+        block: useBlock(),
+        state: builderContext.state,
+        context: builderContext.context,
+      }),
+    };
+  }
+
+  function css() {
+    return getBlockStyles(useBlock());
+  }
+
+  function componentOptions() {
+    return getBlockComponentOptions(useBlock());
+  }
+
+  function children() {
+    // TO-DO: When should `canHaveChildren` dictate rendering?
+    // This is currently commented out because some Builder components (e.g. Box) do not have `canHaveChildren: true`,
+    // but still receive and need to render children.
+    // return componentInfo?.()?.canHaveChildren ? useBlock().children : [];
+    return useBlock().children ?? [];
+  }
+
+  function noCompRefChildren() {
+    return componentRef() ? [] : children();
+  }
+
+  const builderContext = useContext(BuilderContext);
+
+  const ComponentRefRef = componentRef();
+  const TagNameRef = tagName();
+
+  return (
+    <>
+      {!componentInfo?.()?.noWrap ? (
+        <>
+          {!isEmptyHtmlElement(tagName()) ? (
+            <>
+              <TagNameRef {...propertiesAndActions()} style={css()}>
+                {TARGET === "vue" || TARGET === "svelte" ? (
+                  <>
+                    <BlockStyles block={useBlock()} />
+                  </>
+                ) : null}
+
+                {componentRef() ? (
+                  <ComponentRefRef
+                    {...componentOptions()}
+                    builderBlock={useBlock()}
+                  >
+                    {children()?.map((child) => (
+                      <RenderBlock key={child.id} block={child} />
+                    ))}
+                  </ComponentRefRef>
+                ) : null}
+
+                {noCompRefChildren()?.map((child) => (
+                  <RenderBlock key={child.id} block={child} />
+                ))}
+              </TagNameRef>
+            </>
+          ) : (
+            <TagNameRef {...propertiesAndActions()} style={css()} />
+          )}
+        </>
+      ) : (
+        <ComponentRefRef
+          {...componentOptions()}
+          attributes={propertiesAndActions()}
+          builderBlock={useBlock()}
+          style={css()}
+        >
+          {children()?.map((child) => (
+            <RenderBlock key={child.id} block={child} />
+          ))}
+        </ComponentRefRef>
+      )}
+    </>
+  );
+}

package/src/components/render-blocks.js

@@ -1,9 +1,13 @@
 import * as React from "react";
 import { View, StyleSheet } from "react-native";
-import { isEditing } from "../functions/is-editing";
-import RenderBlock from "./render-block";
+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" : "");
+  }
   function onClick() {
     var _a2, _b;
     if (isEditing() && !((_a2 = props.blocks) == null ? void 0 : _a2.length)) {
@@ -29,15 +33,18 @@ function RenderBlocks(props) {
     }
   }
   return /* @__PURE__ */ React.createElement(View, {
-    className: "builder-blocks" + (!((_a = props.blocks) == null ? void 0 : _a.length) ? " no-blocks" : ""),
     "builder-path": props.path,
     "builder-parent-id": props.parent,
-    onClick: (event) => onClick,
-    onMouseEnter: (event) => onMouseEnter,
+    dataSet: {
+      class: className()
+    },
+    onClick: (event) => onClick(),
+    onMouseEnter: (event) => onMouseEnter(),
     style: styles.view1
-  }, props.blocks.map((block) => /* @__PURE__ */ React.createElement(RenderBlock, {
+  }, 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" }

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

@@ -1,10 +1,13 @@
 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";
+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" : "");
+  }
+
   function onClick() {
     if (isEditing() && !props.blocks?.length) {
       window.parent?.postMessage(
@@ -37,16 +40,22 @@ export default function RenderBlocks(props) {
 
   return (
     <View
-      className={"builder-blocks" + (!props.blocks?.length ? " no-blocks" : "")}
       builder-path={props.path}
       builder-parent-id={props.parent}
-      onClick={(event) => onClick}
-      onMouseEnter={(event) => onMouseEnter}
+      dataSet={{
+        class: className(),
+      }}
+      onClick={(event) => onClick()}
+      onMouseEnter={(event) => onMouseEnter()}
       style={styles.view1}
     >
-      {props.blocks.map((block) => (
-        <RenderBlock block={block} />
-      ))}
+      {props.blocks ? (
+        <>
+          {props.blocks?.map((block) => (
+            <RenderBlock key={block.id} block={block} />
+          ))}
+        </>
+      ) : null}
     </View>
   );
 }

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
+};