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

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.js → render-content/render-content.js}

@@ -38,82 +38,56 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import * as React from "react";
-import { View, Text } from "react-native";
+import { View } from "react-native";
 import { useState, useEffect } from "react";
-import { isBrowser } from "../functions/is-browser";
-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";
+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";
-import RenderBlocks from "./render-blocks";
-import { evaluate } from "../functions/evaluate";
-import { getFetch } from "../functions/get-fetch";
+} 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({}, (_a2 = props.content) == null ? void 0 : _a2.data), overrideContent == null ? void 0 : overrideContent.data)
+      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 state() {
+  function contentState() {
     var _a2, _b2;
-    return __spreadValues(__spreadValues({}, (_b2 = (_a2 = props.content) == null ? void 0 : _a2.data) == null ? void 0 : _b2.state), overrideState);
+    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 getCssFromFont(font, data) {
-    var _a2, _b2;
-    const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
-    const name = family.split(",")[0];
-    const url = (_b2 = font.fileUrl) != null ? _b2 : (_a2 = font == null ? void 0 : font.files) == null ? void 0 : _a2.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) {
-    var _a2, _b2;
-    return ((_b2 = (_a2 = data == null ? void 0 : data.customFonts) == null ? void 0 : _a2.map((font) => getCssFromFont(font, data))) == null ? void 0 : _b2.join(" ")) || "";
+  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;
@@ -141,7 +115,7 @@ function RenderContent(props) {
       evaluate({
         code: jsCode,
         context: context(),
-        state: state()
+        state: contentState()
       });
     }
   }
@@ -152,12 +126,13 @@ function RenderContent(props) {
     return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
       code: group,
       context: context(),
-      state: state()
+      state: contentState()
     }));
   }
   function handleRequest({ url, key }) {
     const fetchAndSetState = () => __async(this, null, function* () {
-      const response = yield getFetch()(url);
+      const fetch = yield getFetch();
+      const response = yield fetch(url);
       const json = yield response.json();
       const newOverrideState = __spreadProps(__spreadValues({}, overrideState), { [key]: json });
       setOverrideState(newOverrideState);
@@ -178,18 +153,25 @@ function RenderContent(props) {
     });
   }
   function emitStateUpdate() {
-    window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
-      detail: {
-        state: state(),
-        ref: {
-          name: props.model
+    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);
       }
@@ -228,7 +210,7 @@ function RenderContent(props) {
   }, [(_d = (_c = useContent == null ? void 0 : useContent()) == null ? void 0 : _c.data) == null ? void 0 : _d.httpRequests]);
   useEffect(() => {
     emitStateUpdate();
-  }, [state()]);
+  }, [contentState()]);
   useEffect(() => {
     return () => {
       if (isBrowser()) {
@@ -243,13 +225,16 @@ function RenderContent(props) {
         return useContent();
       },
       get state() {
-        return 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, {
@@ -257,7 +242,10 @@ function RenderContent(props) {
       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)) && !isReactNative() ? /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(Text, null, useContent().data.cssCode), /* @__PURE__ */ React.createElement(Text, null, state().getFontCss(useContent().data))) : null, /* @__PURE__ */ React.createElement(RenderBlocks, {
+  }, (((_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);
 }

package/src/components/{render-content.lite.tsx → render-content/render-content.lite.tsx}

@@ -1,30 +1,34 @@
 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 BuilderContext from "../context/builder.context.lite";
-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";
+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";
-import RenderBlocks from "./render-blocks.lite";
-import { evaluate } from "../functions/evaluate";
-import { getFetch } from "../functions/get-fetch";
-import { onChange } from "../functions/on-change";
-import { ifTarget } from "../functions/if-target";
+} 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.lite";
+import RenderContentStyles from "./components/render-styles.lite";
 
 export default function RenderContent(props) {
   function useContent() {
     const mergedContent = {
       ...props.content,
       ...overrideContent,
-      data: { ...props.content?.data, ...overrideContent?.data },
+      data: { ...props.content?.data, ...props.data, ...overrideContent?.data },
     };
     return mergedContent;
   }
@@ -35,70 +39,29 @@ export default function RenderContent(props) {
 
   const [overrideState, setOverrideState] = useState(() => ({}));
 
-  function state() {
-    return { ...props.content?.data?.state, ...overrideState };
+  function contentState() {
+    return { ...props.content?.data?.state, ...props.data, ...overrideState };
   }
 
   function context() {
     return {};
   }
 
-  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?.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 (!builder.allowCustomFonts) {
-    //   return '';
-    // }
-    // TODO: separate internal data from external
-    return (
-      data?.customFonts?.map((font) => getCssFromFont(font, data))?.join(" ") ||
-      ""
+  function allRegisteredComponents() {
+    const allComponentsArray = [
+      ...getDefaultRegisteredComponents(), // While this `components` object is deprecated, we must maintain support for it.
+      // Since users are able to override our default components, we need to make sure that we do not break such
+      // existing usage.
+      // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+      // which is the new standard way of providing custom components, and must therefore take precedence.
+      ...components,
+      ...(props.customComponents || []),
+    ];
+    const allComponents = allComponentsArray.reduce(
+      (acc, curr) => ({ ...acc, [curr.info.name]: curr }),
+      {}
     );
+    return allComponents;
   }
 
   function processMessage(event) {
@@ -138,7 +101,7 @@ export default function RenderContent(props) {
       evaluate({
         code: jsCode,
         context: context(),
-        state: state(),
+        state: contentState(),
       });
     }
   }
@@ -152,14 +115,15 @@ export default function RenderContent(props) {
       evaluate({
         code: group,
         context: context(),
-        state: state(),
+        state: contentState(),
       })
     );
   }
 
   function handleRequest({ url, key }) {
     const fetchAndSetState = async () => {
-      const response = await getFetch()(url);
+      const fetch = await getFetch();
+      const response = await fetch(url);
       const json = await response.json();
       const newOverrideState = { ...overrideState, [key]: json };
       setOverrideState(newOverrideState);
@@ -182,21 +146,29 @@ export default function RenderContent(props) {
   }
 
   function emitStateUpdate() {
-    window.dispatchEvent(
-      new CustomEvent("builder:component:stateChange", {
-        detail: {
-          state: state(),
-          ref: {
-            name: props.model,
+    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) => {
+            const message = createRegisterComponentMessage(registeredComponent);
+            window.parent?.postMessage(message, "*");
+          }
+        );
         window.addEventListener("message", processMessage);
         window.addEventListener(
           "builder:component:stateChangeListenerActivated",
@@ -245,7 +217,7 @@ export default function RenderContent(props) {
   }, [useContent?.()?.data?.httpRequests]);
   useEffect(() => {
     emitStateUpdate();
-  }, [state()]);
+  }, [contentState()]);
 
   useEffect(() => {
     return () => {
@@ -267,7 +239,7 @@ export default function RenderContent(props) {
         },
 
         get state() {
-          return state();
+          return contentState();
         },
 
         get context() {
@@ -277,6 +249,10 @@ export default function RenderContent(props) {
         get apiKey() {
           return props.apiKey;
         },
+
+        get registeredComponents() {
+          return allRegisteredComponents();
+        },
       }}
     >
       {useContent() ? (
@@ -291,12 +267,11 @@ export default function RenderContent(props) {
           >
             {(useContent?.()?.data?.cssCode ||
               useContent?.()?.data?.customFonts?.length) &&
-            !isReactNative() ? (
-              <View>
-                <Text>{useContent().data.cssCode}</Text>
-
-                <Text>{state().getFontCss(useContent().data)}</Text>
-              </View>
+            TARGET !== "reactNative" ? (
+              <RenderContentStyles
+                cssCode={useContent().data.cssCode}
+                customFonts={useContent().data.customFonts}
+              />
             ) : null}
 
             <RenderBlocks blocks={useContent?.()?.data?.blocks} />

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

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { View, Text } from "react-native";
+import { TARGET } from "../constants/target.js";
+function RenderInlinedStyles(props) {
+  function injectedStyleScript() {
+    return `<${tagName()}>${props.styles}</${tagName()}>`;
+  }
+  function tagName() {
+    return "style";
+  }
+  const TagNameRef = tagName();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, TARGET === "svelte" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, {
+    dangerouslySetInnerHTML: { __html: injectedStyleScript() }
+  })) : /* @__PURE__ */ React.createElement(TagNameRef, null, /* @__PURE__ */ React.createElement(Text, null, props.styles)));
+}
+export {
+  RenderInlinedStyles as default
+};

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

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { TARGET } from "../constants/target.js";
+
+export default function RenderInlinedStyles(props) {
+  function injectedStyleScript() {
+    return `<${tagName()}>${props.styles}</${tagName()}>`;
+  }
+
+  function tagName() {
+    // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
+    // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
+    return "sty" + "le";
+  }
+
+  const TagNameRef = tagName();
+
+  return (
+    <>
+      {TARGET === "svelte" ? (
+        <>
+          <View dangerouslySetInnerHTML={{ __html: injectedStyleScript() }} />
+        </>
+      ) : (
+        <TagNameRef>
+          <Text>{props.styles}</Text>
+        </TagNameRef>
+      )}
+    </>
+  );
+}

package/src/constants/builder-registered-components.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { default as Button } from "../blocks/button/button.js";
+import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info";
+import { default as Columns } from "../blocks/columns/columns.js";
+import { componentInfo as columnsComponentInfo } from "../blocks/columns/component-info";
+import { componentInfo as fragmentComponentInfo } from "../blocks/fragment/component-info";
+import { default as Fragment } from "../blocks/fragment/fragment.js";
+import { componentInfo as imageComponentInfo } from "../blocks/image/component-info";
+import { default as Image } from "../blocks/image/image.js";
+import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info";
+import { default as Section } from "../blocks/section/section.js";
+import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info";
+import { default as Symbol } from "../blocks/symbol/symbol.js";
+import { componentInfo as textComponentInfo } from "../blocks/text/component-info";
+import { default as Text } from "../blocks/text/text.js";
+const getDefaultRegisteredComponents = () => [
+  { component: Columns, info: columnsComponentInfo },
+  { component: Image, info: imageComponentInfo },
+  { component: Text, info: textComponentInfo },
+  { component: Symbol, info: symbolComponentInfo },
+  { component: Button, info: buttonComponentInfo },
+  { component: Section, info: sectionComponentInfo },
+  { component: Fragment, info: fragmentComponentInfo }
+];
+export {
+  getDefaultRegisteredComponents
+};

package/src/constants/target.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+const TARGET = "reactNative";
+export {
+  TARGET
+};

package/src/context/builder.context.js

@@ -3,7 +3,8 @@ var stdin_default = createContext({
   content: null,
   context: {},
   state: {},
-  apiKey: null
+  apiKey: null,
+  registeredComponents: {}
 });
 export {
   stdin_default as default

package/src/functions/evaluate.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { isBrowser } from "./is-browser";
-import { isEditing } from "./is-editing";
+import { isBrowser } from "./is-browser.js";
+import { isEditing } from "./is-editing.js";
 function evaluate({
   code,
   context,

package/src/functions/fast-clone.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
+export {
+  fastClone
+};

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { evaluate } from "./evaluate";
-import { getEventHandlerName } from "./event-handler-name";
+import { evaluate } from "./evaluate.js";
+import { getEventHandlerName } from "./event-handler-name.js";
 function getBlockActions(options) {
   var _a;
   const obj = {};

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

@@ -18,8 +18,8 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { findDOMNode } from "react-dom";
 import { isEditing } from "./is-editing";
+import { findDOMNode } from "react-dom";
 function getBlockProperties(block) {
   return __spreadProps(__spreadValues({}, block.properties), {
     ref: (ref) => {