@builder.io/sdk-react-native 0.0.1-22 → 0.0.1-26

package/src/components/render-blocks.js

@@ -1,47 +1,71 @@
-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';
+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
-        }
-      }, "*");
+      (_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
-        }
-      }, "*");
+      (_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
-  }))));
+  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" }
+  view1: { display: 'flex', flexDirection: 'column', alignItems: 'stretch' },
 });
-export {
-  RenderBlocks as default
-};
+export { RenderBlocks as default };

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

@@ -1,21 +1,21 @@
-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 * 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",
+          type: 'builder.clickEmptyBlocks',
           data: {
             parentElementId: props.parent,
             dataPath: props.path,
           },
         },
-        "*"
+        '*'
       );
     }
   }
@@ -24,13 +24,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,
           },
         },
-        "*"
+        '*'
       );
     }
   }
@@ -39,22 +39,22 @@ export default function RenderBlocks(props) {
     <View
       builder-path={props.path}
       builder-parent-id={props.parent}
-      onClick={(event) => onClick}
-      onMouseEnter={(event) => onMouseEnter}
-      className={"builder-blocks" + (!props.blocks?.length ? " no-blocks" : "")}
+      onClick={event => onClick}
+      onMouseEnter={event => onMouseEnter}
+      className={'builder-blocks' + (!props.blocks?.length ? ' no-blocks' : '')}
       style={styles.view1}
     >
-      {props.blocks && (
+      {props.blocks ? (
         <>
-          {props.blocks?.map((block) => (
+          {props.blocks?.map(block => (
             <RenderBlock block={block} />
           ))}
         </>
-      )}
+      ) : null}
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  view1: { display: "flex", flexDirection: "column", alignItems: "stretch" },
+  view1: { display: 'flex', flexDirection: 'column', alignItems: 'stretch' },
 });

package/src/components/render-content.js

@@ -1,13 +1,17 @@
-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 * 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;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   function useContent() {
     return overrideContent || props.content;
   }
@@ -15,11 +19,55 @@ function RenderContent(props) {
   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": {
+        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) {
@@ -27,7 +75,7 @@ function RenderContent(props) {
           }
           break;
         }
-        case "builder.patchUpdates": {
+        case 'builder.patchUpdates': {
           break;
         }
       }
@@ -35,33 +83,109 @@ function RenderContent(props) {
   }
   useEffect(() => {
     if (isBrowser()) {
-      window.addEventListener("message", processMessage);
+      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 props.content;
+  return /* @__PURE__ */ React.createElement(
+    BuilderContext.Provider,
+    {
+      value: {
+        get content() {
+          return useContent();
+        },
+        get state() {
+          return state;
+        },
+        get context() {
+          return context;
+        },
       },
-      get state() {
-        return state;
-      },
-      get context() {
-        return context;
-      }
-    }
-  }, /* @__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) && !isReactNative() && /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(Text, null, useContent().data.cssCode)), (_f = (_e = (_d = useContent == null ? void 0 : useContent()) == null ? void 0 : _d.data) == null ? void 0 : _e.blocks) == null ? void 0 : _f.map((block) => /* @__PURE__ */ React.createElement(RenderBlock, {
-    key: block.id,
-    block
-  }))));
+    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
-};
+export { RenderContent as default };

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

@@ -1,13 +1,17 @@
-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 * 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() {
@@ -22,17 +26,71 @@ export default function RenderContent(props) {
 
   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;
+        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) {
@@ -42,7 +100,7 @@ export default function RenderContent(props) {
           break;
         }
 
-        case "builder.patchUpdates": {
+        case 'builder.patchUpdates': {
           // TODO
           break;
         }
@@ -52,10 +110,42 @@ export default function RenderContent(props) {
 
   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);
+      }
+
+      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
+        }
+      }
     }
   }, []);
 
@@ -63,7 +153,7 @@ export default function RenderContent(props) {
     <BuilderContext.Provider
       value={{
         get content() {
-          return props.content;
+          return useContent();
         },
 
         get state() {
@@ -75,24 +165,34 @@ export default function RenderContent(props) {
         },
       }}
     >
-      <View
-        onClick={(event) => {
-          track("click", {
-            contentId: props.content.id,
-          });
-        }}
-        data-builder-content-id={props.content?.id}
-      >
-        {useContent?.()?.data?.cssCode && !isReactNative() && (
-          <View>
-            <Text>{useContent().data.cssCode}</Text>
-          </View>
-        )}
+      {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>
+            {useContent?.()?.data?.blocks?.map(block => (
+              <RenderBlock key={block.id} block={block} />
+            ))}
+          </View>
+        </>
+      ) : null}
     </BuilderContext.Provider>
   );
 }