@builder.io/sdk-react-native 0.0.1-57 → 0.0.1-58

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

@@ -1,84 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-interface CustomFont {
-  family?: string;
-  kind?: string;
-  fileUrl?: string;
-  files?: {
-    [key: string]: string;
-  };
-}
-interface Props {
-  cssCode?: string;
-  customFonts?: CustomFont[];
-}
-
-import RenderInlinedStyles from "../../render-inlined-styles.lite";
-
-export default function RenderContentStyles(props: 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/render-content.lite.tsx

@@ -1,310 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useState, useContext, useEffect } from "react";
-
-export type RenderContentProps = {
-  content?: BuilderContent;
-  model?: string;
-  data?: {
-    [key: string]: any;
-  };
-  context?: {
-    [key: string]: any;
-  };
-  apiKey: string;
-  customComponents?: RegisteredComponent[];
-};
-interface BuilderComponentStateChange {
-  state: {
-    [key: string]: any;
-  };
-  ref: {
-    name?: string;
-    props?: {
-      builderBlock?: {
-        id?: string;
-      };
-    };
-  };
-}
-
-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/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: RenderContentProps) {
-  function useContent() {
-    const mergedContent = {
-      ...props.content,
-      ...overrideContent,
-      data: { ...props.content?.data, ...props.data, ...overrideContent?.data },
-    };
-    return mergedContent;
-  }
-
-  const [overrideContent, setOverrideContent] = useState(() => null);
-
-  const [update, setUpdate] = useState(() => 0);
-
-  const [overrideState, setOverrideState] = useState(() => ({}));
-
-  function contentState() {
-    return { ...props.content?.data?.state, ...props.data, ...overrideState };
-  }
-
-  function context() {
-    return {};
-  }
-
-  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.name]: curr }),
-      {}
-    );
-    return allComponents;
-  }
-
-  function processMessage(event) {
-    const { data } = event;
-
-    if (data) {
-      switch (data.type) {
-        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);
-          }
-
-          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: context(),
-        state: contentState(),
-      });
-    }
-  }
-
-  function httpReqsData() {
-    return {};
-  }
-
-  function evalExpression(expression) {
-    return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
-      evaluate({
-        code: group,
-        context: context(),
-        state: contentState(),
-      })
-    );
-  }
-
-  function handleRequest({ url, key }) {
-    const fetchAndSetState = async () => {
-      const fetch = await getFetch();
-      const response = await fetch(url);
-      const json = await response.json();
-      const newOverrideState = { ...overrideState, [key]: json };
-      setOverrideState(newOverrideState);
-    };
-
-    fetchAndSetState();
-  }
-
-  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,
-            },
-          },
-        })
-      );
-    }
-  }
-
-  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",
-          emitStateUpdate
-        );
-      }
-
-      if (useContent()) {
-        track("impression", {
-          contentId: useContent().id,
-        });
-      } // override normal content in preview mode
-
-      if (isPreviewing()) {
-        if (props.model && previewingModelName() === props.model) {
-          const currentUrl = new URL(location.href);
-          const previewApiKey = currentUrl.searchParams.get("apiKey");
-
-          if (previewApiKey) {
-            getContent({
-              model: props.model,
-              apiKey: previewApiKey,
-              options: getBuilderSearchParams(
-                convertSearchParamsToQueryObject(currentUrl.searchParams)
-              ),
-            }).then((content) => {
-              if (content) {
-                setOverrideContent(content);
-              }
-            });
-          }
-        }
-      }
-
-      evaluateJsCode();
-      runHttpRequests();
-      emitStateUpdate();
-    }
-  }, []);
-
-  useEffect(() => {
-    evaluateJsCode();
-  }, [useContent?.()?.data?.jsCode]);
-  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={{
-        get content() {
-          return useContent();
-        },
-
-        get state() {
-          return contentState();
-        },
-
-        get context() {
-          return context();
-        },
-
-        get apiKey() {
-          return props.apiKey;
-        },
-
-        get registeredComponents() {
-          return allRegisteredComponents();
-        },
-      }}
-    >
-      {useContent() ? (
-        <>
-          <View
-            onClick={(event) =>
-              track("click", {
-                contentId: useContent().id,
-              })
-            }
-            data-builder-content-id={useContent?.()?.id}
-          >
-            {(useContent?.()?.data?.cssCode ||
-              useContent?.()?.data?.customFonts?.length) &&
-            TARGET !== "reactNative" ? (
-              <RenderContentStyles
-                cssCode={useContent().data.cssCode}
-                customFonts={useContent().data.customFonts}
-              />
-            ) : null}
-
-            <RenderBlocks blocks={useContent?.()?.data?.blocks} />
-          </View>
-        </>
-      ) : null}
-    </BuilderContext.Provider>
-  );
-}

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

@@ -1,36 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-interface Props {
-  styles: string;
-}
-
-import { TARGET } from "../constants/target.js";
-
-export default function RenderInlinedStyles(props: 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>
-      )}
-    </>
-  );
-}