@builder.io/sdk-react-native 0.1.2 → 0.1.3

package/src/components/render-block/render-component.jsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { useContext } from "react";
+import BlockStyles from "./block-styles.js";
+import RenderBlock from "./render-block.js";
+import BuilderContext from "../../context/builder.context.js";
+
+export default function RenderComponent(props) {
+  const ComponentRefRef = props.componentRef;
+
+  return (
+    <BuilderContext.Provider
+      value={{
+        content: props.context.content,
+        state: props.context.state,
+        context: props.context.context,
+        apiKey: props.context.apiKey,
+        registeredComponents: props.context.registeredComponents,
+        inheritedStyles: props.context.inheritedStyles,
+      }}
+    >
+      {props.componentRef ? (
+        <>
+          <ComponentRefRef {...props.componentOptions}>
+            {props.blockChildren?.map((child) => (
+              <RenderBlock
+                key={"render-block-" + child.id}
+                block={child}
+                context={props.context}
+              />
+            ))}
+
+            {props.blockChildren?.map((child) => (
+              <BlockStyles
+                key={"block-style-" + child.id}
+                block={child}
+                context={props.context}
+              />
+            ))}
+          </ComponentRefRef>
+        </>
+      ) : null}
+    </BuilderContext.Provider>
+  );
+}

package/src/components/render-block/render-repeated-block.jsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { useContext } from "react";
+import BuilderContext from "../../context/builder.context.js";
+import RenderBlock from "./render-block.js";
+
+export default function RenderRepeatedBlock(props) {
+  return (
+    <BuilderContext.Provider
+      value={{
+        content: props.repeatContext.content,
+        state: props.repeatContext.state,
+        context: props.repeatContext.context,
+        apiKey: props.repeatContext.apiKey,
+        registeredComponents: props.repeatContext.registeredComponents,
+        inheritedStyles: props.repeatContext.inheritedStyles,
+      }}
+    >
+      <RenderBlock block={props.block} context={props.repeatContext} />
+    </BuilderContext.Provider>
+  );
+}

package/src/components/render-blocks.jsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { useContext } from "react";
+import BuilderContext from "../context/builder.context.js";
+import { isEditing } from "../functions/is-editing.js";
+import BlockStyles from "./render-block/block-styles.js";
+import RenderBlock from "./render-block/render-block.js";
+
+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(
+        {
+          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,
+          },
+        },
+        "*"
+      );
+    }
+  }
+
+  const builderContext = useContext(BuilderContext);
+
+  return (
+    <View
+      builder-path={props.path}
+      builder-parent-id={props.parent}
+      dataSet={{
+        class: className(),
+      }}
+      style={styles.view1}
+      onClick={(event) => onClick()}
+      onMouseEnter={(event) => onMouseEnter()}
+    >
+      {props.blocks ? (
+        <>
+          {props.blocks?.map((block) => (
+            <RenderBlock
+              key={"render-block-" + block.id}
+              block={block}
+              context={builderContext}
+            />
+          ))}
+        </>
+      ) : null}
+
+      {props.blocks ? (
+        <>
+          {props.blocks?.map((block) => (
+            <BlockStyles
+              key={"block-style-" + block.id}
+              block={block}
+              context={builderContext}
+            />
+          ))}
+        </>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  view1: { display: "flex", flexDirection: "column", alignItems: "stretch" },
+});

package/src/components/render-content/builder-editing.jsx

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+
+export default function BuilderEditing(props) {
+  return <View />;
+}

package/src/components/render-content/components/{render-styles.js → render-styles.jsx}

@@ -1,11 +1,15 @@
 import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
 import RenderInlinedStyles from "../../render-inlined-styles.js";
-function RenderContentStyles(props) {
+
+export default function RenderContentStyles(props) {
   function getCssFromFont(font) {
-    var _a, _b;
-    const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+    // 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 = (_b = font.fileUrl) != null ? _b : (_a = font == null ? void 0 : font.files) == null ? void 0 : _a.regular;
+    const url = font.fileUrl ?? font?.files?.regular;
     let str = "";
     if (url && family && name) {
       str += `
@@ -23,6 +27,7 @@ function RenderContentStyles(props) {
         if (!isNumber) {
           continue;
         }
+        // TODO: maybe limit number loaded
         const weightUrl = font.files[weight];
         if (weightUrl && weightUrl !== url) {
           str += `
@@ -38,21 +43,23 @@ function RenderContentStyles(props) {
     }
     return str;
   }
+
   function getFontCss({ customFonts }) {
-    var _a;
-    return ((_a = customFonts == null ? void 0 : customFonts.map((font) => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
+    // 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
-    })}`;
+  customFonts: props.customFonts,
+})}`;
   }
-  return /* @__PURE__ */ React.createElement(RenderInlinedStyles, {
-    styles: injectedStyles()
-  });
+
+  return <RenderInlinedStyles styles={injectedStyles()} />;
 }
-export {
-  RenderContentStyles as default
-};

package/src/components/render-content/render-content.jsx

@@ -0,0 +1,373 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { useState, useContext, useRef, useEffect } from "react";
+import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
+import { TARGET } from "../../constants/target.js";
+import { evaluate } from "../../functions/evaluate.js";
+import { getContent } from "../../functions/get-content/index.js";
+import { fetch } 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 {
+  components,
+  createRegisterComponentMessage,
+} from "../../functions/register-component.js";
+import { _track } from "../../functions/track/index.js";
+import RenderBlocks from "../render-blocks.js";
+import RenderContentStyles from "./components/render-styles.js";
+import builderContext from "../../context/builder.context.js";
+import {
+  registerInsertMenu,
+  setupBrowserForEditing,
+} from "../../scripts/init-editing.js";
+import { checkIsDefined } from "../../helpers/nullable.js";
+import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
+
+export default function RenderContent(props) {
+  const elementRef = useRef(null);
+  const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
+
+  const [overrideContent, setOverrideContent] = useState(() => null);
+
+  function useContent() {
+    if (!props.content && !overrideContent) {
+      return undefined;
+    }
+    return {
+      ...props.content,
+      ...overrideContent,
+      data: {
+        ...props.content?.data,
+        ...props.data,
+        ...overrideContent?.data,
+      },
+      meta: {
+        ...props.content?.meta,
+        ...overrideContent?.meta,
+        breakpoints:
+          useBreakpoints ||
+          overrideContent?.meta?.breakpoints ||
+          props.content?.meta?.breakpoints,
+      },
+    };
+  }
+
+  const [update, setUpdate] = useState(() => 0);
+
+  const [useBreakpoints, setUseBreakpoints] = useState(() => null);
+
+  const [canTrackToUse, setCanTrackToUse] = useState(() =>
+    checkIsDefined(props.canTrack) ? props.canTrack : true
+  );
+
+  const [overrideState, setOverrideState] = useState(() => ({}));
+
+  function contentState() {
+    return {
+      ...props.content?.data?.state,
+      ...props.data,
+      ...(props.locale
+        ? {
+            locale: props.locale,
+          }
+        : {}),
+      ...overrideState,
+    };
+  }
+
+  const [contextContext, setContextContext] = useState(
+    () => props.context || {}
+  );
+
+  const [allRegisteredComponents, setAllRegisteredComponents] = useState(() =>
+    [
+      ...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 || []),
+    ].reduce(
+      (acc, curr) => ({
+        ...acc,
+        [curr.name]: curr,
+      }),
+      {}
+    )
+  );
+
+  function processMessage(event) {
+    const { data } = event;
+    if (data) {
+      switch (data.type) {
+        case "builder.configureSdk": {
+          const messageContent = data.data;
+          const { breakpoints, contentId } = messageContent;
+          if (!contentId || contentId !== useContent?.()?.id) {
+            return;
+          }
+          setUseBreakpoints(breakpoints);
+          setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
+          break;
+        }
+        case "builder.contentUpdate": {
+          const messageContent = data.data;
+          const key =
+            messageContent.key ||
+            messageContent.alias ||
+            messageContent.entry ||
+            messageContent.modelName;
+          const contentData = messageContent.data;
+          if (key === props.model) {
+            setOverrideContent(contentData);
+            setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
+          }
+
+          break;
+        }
+        case "builder.patchUpdates": {
+          // TODO
+          break;
+        }
+      }
+    }
+  }
+
+  function evaluateJsCode() {
+    // run any dynamic JS code attached to content
+    const jsCode = useContent?.()?.data?.jsCode;
+    if (jsCode) {
+      evaluate({
+        code: jsCode,
+        context: contextContext,
+        state: contentState(),
+      });
+    }
+  }
+
+  const [httpReqsData, setHttpReqsData] = useState(() => ({}));
+
+  const [clicked, setClicked] = useState(() => false);
+
+  function onClick(event) {
+    if (useContent()) {
+      const variationId = useContent?.()?.testVariationId;
+      const contentId = useContent?.()?.id;
+      _track({
+        type: "click",
+        canTrack: canTrackToUse,
+        contentId,
+        apiKey: props.apiKey,
+        variationId: variationId !== contentId ? variationId : undefined,
+        ...getInteractionPropertiesForEvent(event),
+        unique: !clicked,
+      });
+    }
+    if (!clicked) {
+      setClicked(true);
+    }
+  }
+
+  function evalExpression(expression) {
+    return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
+      evaluate({
+        code: group,
+        context: contextContext,
+        state: contentState(),
+      })
+    );
+  }
+
+  function handleRequest({ url, key }) {
+    fetch(url)
+      .then((response) => response.json())
+      .then((json) => {
+        const newOverrideState = {
+          ...overrideState,
+          [key]: json,
+        };
+        setOverrideState(newOverrideState);
+      })
+      .catch((err) => {
+        console.log("error fetching dynamic data", url, err);
+      });
+  }
+
+  function runHttpRequests() {
+    const requests = useContent?.()?.data?.httpRequests ?? {};
+    Object.entries(requests).forEach(([key, url]) => {
+      if (url && (!httpReqsData[key] || isEditing())) {
+        const evaluatedUrl = evalExpression(url);
+        handleRequest({
+          url: evaluatedUrl,
+          key,
+        });
+      }
+    });
+  }
+
+  function emitStateUpdate() {
+    if (isEditing()) {
+      window.dispatchEvent(
+        new CustomEvent("builder:component:stateChange", {
+          detail: {
+            state: contentState(),
+            ref: {
+              name: props.model,
+            },
+          },
+        })
+      );
+    }
+  }
+
+  function shouldRenderContentStyles() {
+    return Boolean(
+      (useContent?.()?.data?.cssCode ||
+        useContent?.()?.data?.customFonts?.length) &&
+        TARGET !== "reactNative"
+    );
+  }
+
+  useEffect(() => {
+    if (!props.apiKey) {
+      console.error(
+        "[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."
+      );
+    }
+    if (isBrowser()) {
+      if (isEditing()) {
+        setForceReRenderCount(forceReRenderCount + 1);
+        registerInsertMenu();
+        setupBrowserForEditing({
+          ...(props.locale
+            ? {
+                locale: props.locale,
+              }
+            : {}),
+          ...(props.includeRefs
+            ? {
+                includeRefs: props.includeRefs,
+              }
+            : {}),
+        });
+        Object.values(allRegisteredComponents).forEach(
+          (registeredComponent) => {
+            const message = createRegisterComponentMessage(registeredComponent);
+            window.parent?.postMessage(message, "*");
+          }
+        );
+        window.addEventListener("message", processMessage);
+        window.addEventListener(
+          "builder:component:stateChangeListenerActivated",
+          emitStateUpdate
+        );
+      }
+      if (useContent()) {
+        const variationId = useContent?.()?.testVariationId;
+        const contentId = useContent?.()?.id;
+        _track({
+          type: "impression",
+          canTrack: canTrackToUse,
+          contentId,
+          apiKey: props.apiKey,
+          variationId: variationId !== contentId ? variationId : undefined,
+        });
+      }
+
+      // override normal content in preview mode
+      if (isPreviewing()) {
+        const searchParams = new URL(location.href).searchParams;
+        const searchParamPreview = searchParams.get("builder.preview");
+        const previewApiKey =
+          searchParams.get("apiKey") || searchParams.get("builder.space");
+
+        /**
+         * Make sure that:
+         * - the preview model name is the same as the one we're rendering, since there can be multiple models rendered    *  at the same time, e.g. header/page/footer.    * - the API key is the same, since we don't want to preview content from other organizations.
+         *
+         * TO-DO: should we check that the preview item ID is the same as the initial one being rendered? Or would
+         * this break scenarios where the item is not published yet?
+         *
+         * TO-DO: should we only update the state when there is a change?
+         **/
+        if (
+          searchParamPreview === props.model &&
+          previewApiKey === props.apiKey
+        ) {
+          getContent({
+            model: props.model,
+            apiKey: props.apiKey,
+          }).then((content) => {
+            if (content) {
+              setOverrideContent(content);
+            }
+          });
+        }
+      }
+      evaluateJsCode();
+      runHttpRequests();
+      emitStateUpdate();
+    }
+  }, []);
+
+  useEffect(() => {
+    evaluateJsCode();
+  }, [useContent?.()?.data?.jsCode, contentState()]);
+  useEffect(() => {
+    runHttpRequests();
+  }, [useContent?.()?.data?.httpRequests]);
+  useEffect(() => {
+    emitStateUpdate();
+  }, [contentState()]);
+
+  useEffect(() => {
+    return () => {
+      if (isBrowser()) {
+        window.removeEventListener("message", processMessage);
+        window.removeEventListener(
+          "builder:component:stateChangeListenerActivated",
+          emitStateUpdate
+        );
+      }
+    };
+  }, []);
+
+  return (
+    <builderContext.Provider
+      value={{
+        content: useContent(),
+        state: contentState(),
+        context: contextContext,
+        apiKey: props.apiKey,
+        registeredComponents: allRegisteredComponents,
+      }}
+    >
+      {useContent() ? (
+        <>
+          <View
+            ref={elementRef}
+            onClick={(event) => onClick(event)}
+            builder-content-id={useContent?.()?.id}
+            builder-model={props.model}
+          >
+            {shouldRenderContentStyles() ? (
+              <RenderContentStyles
+                cssCode={useContent?.()?.data?.cssCode}
+                customFonts={useContent?.()?.data?.customFonts}
+              />
+            ) : null}
+
+            <RenderBlocks
+              blocks={useContent?.()?.data?.blocks}
+              key={forceReRenderCount}
+            />
+          </View>
+        </>
+      ) : null}
+    </builderContext.Provider>
+  );
+}

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

@@ -0,0 +1,29 @@
+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 `<${tag()}>${props.styles}</${tag()}>`;
+  }
+
+  function tag() {
+    // 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";
+  }
+
+  return (
+    <>
+      {TARGET === "svelte" ? (
+        <>
+          <View dangerouslySetInnerHTML={{ __html: injectedStyleScript() }} />
+        </>
+      ) : (
+        <View>
+          <Text>{props.styles}</Text>
+        </View>
+      )}
+    </>
+  );
+}

package/src/functions/track/helpers.js

@@ -0,0 +1,50 @@
+import { TARGET } from "../../constants/target";
+import { isBrowser } from "../is-browser";
+const getLocation = () => {
+  if (TARGET === "reactNative") {
+    return null;
+  } else if (isBrowser()) {
+    const parsedLocation = new URL(location.href);
+    if (parsedLocation.pathname === "") {
+      parsedLocation.pathname = "/";
+    }
+    return parsedLocation;
+  } else {
+    console.warn("Cannot get location for tracking in non-browser environment");
+    return null;
+  }
+};
+const getUserAgent = () => typeof navigator === "object" && navigator.userAgent || "";
+const getUserAttributes = () => {
+  const userAgent = getUserAgent();
+  const isMobile = {
+    Android() {
+      return userAgent.match(/Android/i);
+    },
+    BlackBerry() {
+      return userAgent.match(/BlackBerry/i);
+    },
+    iOS() {
+      return userAgent.match(/iPhone|iPod/i);
+    },
+    Opera() {
+      return userAgent.match(/Opera Mini/i);
+    },
+    Windows() {
+      return userAgent.match(/IEMobile/i) || userAgent.match(/WPDesktop/i);
+    },
+    any() {
+      return isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows() || TARGET === "reactNative";
+    }
+  };
+  const isTablet = userAgent.match(/Tablet|iPad/i);
+  const url = getLocation();
+  return {
+    urlPath: url == null ? void 0 : url.pathname,
+    host: (url == null ? void 0 : url.host) || (url == null ? void 0 : url.hostname),
+    device: isTablet ? "tablet" : isMobile.any() ? "mobile" : "desktop"
+  };
+};
+export {
+  getUserAttributes
+};