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

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

@@ -1,144 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useContext } from "react";
-import { TARGET } from "../../constants/target.js";
-import BuilderContext from "../../context/builder.context";
-import { getBlockActions } from "../../functions/get-block-actions.js";
-import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
-import { getBlockProperties } from "../../functions/get-block-properties.js";
-import { getBlockStyles } from "../../functions/get-block-styles.js";
-import { getBlockTag } from "../../functions/get-block-tag.js";
-import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import BlockStyles from "./block-styles.lite";
-import { isEmptyHtmlElement } from "./render-block.helpers.js";
-
-export default function RenderBlock(props) {
-  function component() {
-    const componentName = useBlock().component?.name;
-
-    if (!componentName) {
-      return null;
-    }
-
-    const ref = builderContext.registeredComponents[componentName];
-
-    if (!ref) {
-      // TODO: Public doc page with more info about this message
-      console.warn(`
-        Could not find a registered component named "${componentName}". 
-        If you registered it, is the file that registered it imported by the file that needs to render it?`);
-      return undefined;
-    } else {
-      return ref;
-    }
-  }
-
-  function componentInfo() {
-    if (component()) {
-      const { component: _, ...info } = component();
-      return info;
-    } else {
-      return undefined;
-    }
-  }
-
-  function componentRef() {
-    return component?.()?.component;
-  }
-
-  function tagName() {
-    return getBlockTag(useBlock());
-  }
-
-  function useBlock() {
-    return getProcessedBlock({
-      block: props.block,
-      state: builderContext.state,
-      context: builderContext.context,
-    });
-  }
-
-  function propertiesAndActions() {
-    return {
-      ...getBlockProperties(useBlock()),
-      ...getBlockActions({
-        block: useBlock(),
-        state: builderContext.state,
-        context: builderContext.context,
-      }),
-    };
-  }
-
-  function css() {
-    return getBlockStyles(useBlock());
-  }
-
-  function componentOptions() {
-    return getBlockComponentOptions(useBlock());
-  }
-
-  function children() {
-    // TO-DO: When should `canHaveChildren` dictate rendering?
-    // This is currently commented out because some Builder components (e.g. Box) do not have `canHaveChildren: true`,
-    // but still receive and need to render children.
-    // return componentInfo?.()?.canHaveChildren ? useBlock().children : [];
-    return useBlock().children ?? [];
-  }
-
-  function noCompRefChildren() {
-    return componentRef() ? [] : children();
-  }
-
-  const builderContext = useContext(BuilderContext);
-
-  const ComponentRefRef = componentRef();
-  const TagNameRef = tagName();
-
-  return (
-    <>
-      {!componentInfo?.()?.noWrap ? (
-        <>
-          {!isEmptyHtmlElement(tagName()) ? (
-            <>
-              <TagNameRef {...propertiesAndActions()} style={css()}>
-                {TARGET === "vue" || TARGET === "svelte" ? (
-                  <>
-                    <BlockStyles block={useBlock()} />
-                  </>
-                ) : null}
-
-                {componentRef() ? (
-                  <ComponentRefRef
-                    {...componentOptions()}
-                    builderBlock={useBlock()}
-                  >
-                    {children()?.map((child) => (
-                      <RenderBlock key={child.id} block={child} />
-                    ))}
-                  </ComponentRefRef>
-                ) : null}
-
-                {noCompRefChildren()?.map((child) => (
-                  <RenderBlock key={child.id} block={child} />
-                ))}
-              </TagNameRef>
-            </>
-          ) : (
-            <TagNameRef {...propertiesAndActions()} style={css()} />
-          )}
-        </>
-      ) : (
-        <ComponentRefRef
-          {...componentOptions()}
-          attributes={propertiesAndActions()}
-          builderBlock={useBlock()}
-          style={css()}
-        >
-          {children()?.map((child) => (
-            <RenderBlock key={child.id} block={child} />
-          ))}
-        </ComponentRefRef>
-      )}
-    </>
-  );
-}

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

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

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

@@ -1,70 +0,0 @@
-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/render-content.lite.tsx

@@ -1,283 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useState, useContext, useEffect } from "react";
-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) {
-  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,31 +0,0 @@
-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>
-      )}
-    </>
-  );
-}