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

package/src/components/render-content.js

@@ -0,0 +1,215 @@
+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,37 @@
+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,3 @@
+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,29 @@
+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/event-handler-name.js

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

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { evaluate } from './evaluate';
+import { getEventHandlerName } from './name-event-handlers';
+function getBlockActions(options) {
+  const obj = {};
+  if (options.block.actions) {
+    for (const key in options.block.actions) {
+      if (!options.block.actions.hasOwnProperty(key)) {
+        continue;
+      }
+      const value = options.block.actions[key];
+      obj[getEventHandlerName(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,31 @@
+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 };

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

@@ -0,0 +1,47 @@
+import * as React from 'react';
+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 { findDOMNode } from 'react-dom';
+import { isBrowser } from './is-browser';
+import { isReactNative } from './is-react-native';
+function getBlockProperties(block) {
+  return __spreadProps(__spreadValues({}, block.properties), {
+    ref: (ref) => {
+      if (isBrowser() && !isReactNative()) {
+        const el = findDOMNode(ref);
+        if (el) {
+          el.setAttribute('builder-id', block.id);
+          el.classList.add(block.id);
+        }
+      }
+    },
+    dataSet: {
+      'builder-id': block.id,
+      class: [block.id, 'builder-block', block.class].filter(Boolean).join(' '),
+    },
+  });
+}
+export { getBlockProperties };

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

@@ -0,0 +1,78 @@
+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;
+};
+const propertiesThatMustBeNumber = new Set(['lineHeight']);
+const displayValues = new Set(['flex', 'none']);
+const SHOW_WARNINGS = false;
+function validateReactNativeStyles(styles) {
+  for (const key in styles) {
+    const propertyValue = styles[key];
+    if (key === 'display' && !displayValues.has(propertyValue)) {
+      if (SHOW_WARNINGS) {
+        console.warn(
+          `Style value for key "display" must be "flex" or "none" but had ${propertyValue}`
+        );
+      }
+      delete styles[key];
+    }
+    if (typeof propertyValue === 'string' && propertyValue.match(/^\-?\d/)) {
+      const newValue = parseFloat(propertyValue);
+      if (!isNaN(newValue)) {
+        styles[key] = newValue;
+      }
+      if (typeof newValue === 'number' && newValue < 0) {
+        styles[key] = 0;
+      }
+    }
+    if (
+      propertiesThatMustBeNumber.has(key) &&
+      typeof styles[key] !== 'number'
+    ) {
+      if (SHOW_WARNINGS) {
+        console.warn(
+          `Style key ${key} must be a number, but had value \`${styles[key]}\``
+        );
+      }
+      delete styles[key];
+    }
+  }
+}
+function getBlockStyles(block) {
+  var _a, _b, _c;
+  const styles = __spreadValues(
+    __spreadValues(
+      {},
+      (_a = block.responsiveStyles) == null ? void 0 : _a.large
+    ),
+    block.styles
+  );
+  if ((_b = block.responsiveStyles) == null ? void 0 : _b.medium) {
+    Object.assign(styles, block.responsiveStyles.medium);
+  }
+  if ((_c = block.responsiveStyles) == null ? void 0 : _c.small) {
+    Object.assign(styles, block.responsiveStyles.small);
+  }
+  validateReactNativeStyles(styles);
+  return styles;
+}
+export { getBlockStyles };

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { View } from 'react-native';
+function getBlockTag(block) {
+  return View;
+}
+export { getBlockTag };