@builder.io/sdk-react 0.2.3-3 → 0.2.3-4

package/packages/react/src/components/render-content/render-content.tsx

@@ -0,0 +1,410 @@
+"use client";
+import * as React from "react";
+import { useState, useContext, useRef, useEffect } from "react";
+import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
+import type {
+  BuilderRenderState,
+  RegisteredComponent,
+  RegisteredComponents,
+} from "../../context/types.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 type {
+  Breakpoints,
+  BuilderContent,
+} from "../../types/builder-content.js";
+import type { Nullable } from "../../types/typescript.js";
+import RenderBlocks from "../render-blocks";
+import RenderContentStyles from "./components/render-styles";
+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";
+import type {
+  RenderContentProps,
+  BuilderComponentStateChange,
+} from "./render-content.types.js";
+import {
+  getContentInitialValue,
+  getContextStateInitialValue,
+} from "./render-content.helpers.js";
+import { TARGET } from "../../constants/target.js";
+import { logger } from "../../helpers/logger.js";
+
+function RenderContent(props: RenderContentProps) {
+  const elementRef = useRef<HTMLDivElement>(null);
+  const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
+
+  const [overrideContent, setOverrideContent] = useState(() => null);
+
+  const [useContent, setUseContent] = useState(() =>
+    getContentInitialValue({
+      content: props.content,
+      data: props.data,
+    })
+  );
+
+  function mergeNewContent(newContent: BuilderContent) {
+    setUseContent({
+      ...useContent,
+      ...newContent,
+      data: { ...useContent?.data, ...newContent?.data },
+      meta: {
+        ...useContent?.meta,
+        ...newContent?.meta,
+        breakpoints:
+          newContent?.meta?.breakpoints || useContent?.meta?.breakpoints,
+      },
+    });
+  }
+
+  function setBreakpoints(breakpoints: Breakpoints) {
+    setUseContent({
+      ...useContent,
+      meta: { ...useContent?.meta, breakpoints },
+    });
+  }
+
+  const [update, setUpdate] = useState(() => 0);
+
+  const [canTrackToUse, setCanTrackToUse] = useState(() =>
+    checkIsDefined(props.canTrack) ? props.canTrack : true
+  );
+
+  const [contentState, setContentState] = useState(() =>
+    getContextStateInitialValue({
+      content: props.content,
+      data: props.data,
+      locale: props.locale,
+    })
+  );
+
+  function setContextState(newState: BuilderRenderState) {
+    setContentState(newState);
+  }
+
+  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 }),
+      {} as RegisteredComponents
+    )
+  );
+
+  function processMessage(event: MessageEvent) {
+    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;
+          }
+
+          if (breakpoints) {
+            setBreakpoints(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) {
+            mergeNewContent(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: props.context || {},
+        state: contentState,
+      });
+    }
+  }
+
+  const [httpReqsData, setHttpReqsData] = useState(() => ({}));
+
+  const [clicked, setClicked] = useState(() => false);
+
+  function onClick(event: any) {
+    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: string) {
+    return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
+      evaluate({
+        code: group,
+        context: props.context || {},
+        state: contentState,
+      })
+    );
+  }
+
+  function handleRequest({ url, key }: { key: string; url: string }) {
+    fetch(url)
+      .then((response) => response.json())
+      .then((json) => {
+        const newState = { ...contentState, [key]: json };
+        setContextState(newState);
+      })
+      .catch((err) => {
+        console.error("error fetching dynamic data", url, err);
+      });
+  }
+
+  function runHttpRequests() {
+    const requests: {
+      [key: string]: string;
+    } = 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<BuilderComponentStateChange>(
+          "builder:component:stateChange",
+          {
+            detail: {
+              state: contentState,
+              ref: {
+                name: props.model,
+              },
+            },
+          }
+        )
+      );
+    }
+  }
+
+  useEffect(() => {
+    if (!props.apiKey) {
+      logger.error(
+        "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<RegisteredComponent>(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 searchParamPreviewModel = searchParams.get("builder.preview");
+        const searchParamPreviewId = searchParams.get(
+          `builder.preview.${searchParamPreviewModel}`
+        );
+        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.
+         * - if there is content, that the preview ID is the same as that of the one we receive.
+         *
+         * TO-DO: should we only update the state when there is a change?
+         **/
+
+        if (
+          searchParamPreviewModel === props.model &&
+          previewApiKey === props.apiKey &&
+          (!props.content || searchParamPreviewId === props.content.id)
+        ) {
+          getContent({
+            model: props.model,
+            apiKey: props.apiKey,
+            apiVersion: props.apiVersion,
+          }).then((content) => {
+            if (content) {
+              mergeNewContent(content);
+            }
+          });
+        }
+      }
+
+      evaluateJsCode();
+      runHttpRequests();
+      emitStateUpdate();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (props.content) {
+      mergeNewContent(props.content);
+    }
+  }, [props.content]);
+  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,
+        setState: setContextState,
+        context: props.context || {},
+        apiKey: props.apiKey,
+        apiVersion: props.apiVersion,
+        registeredComponents: allRegisteredComponents,
+        inheritedStyles: {},
+      }}
+    >
+      {useContent ? (
+        <>
+          <div
+            ref={elementRef}
+            onClick={(event) => onClick(event)}
+            builder-content-id={useContent?.id}
+            builder-model={props.model}
+          >
+            {TARGET !== "reactNative" ? (
+              <>
+                <RenderContentStyles
+                  contentId={useContent?.id}
+                  cssCode={useContent?.data?.cssCode}
+                  customFonts={useContent?.data?.customFonts}
+                />
+              </>
+            ) : null}
+
+            <RenderBlocks
+              blocks={useContent?.data?.blocks}
+              key={forceReRenderCount}
+            />
+          </div>
+        </>
+      ) : null}
+    </builderContext.Provider>
+  );
+}
+
+export default RenderContent;

package/packages/react/src/components/render-content/render-content.types.ts

@@ -0,0 +1,33 @@
+import type {
+  BuilderRenderContext,
+  RegisteredComponent,
+  BuilderRenderState,
+} from '../../context/types';
+import type { BuilderContent } from '../../types/builder-content';
+import type { Nullable } from '../../types/typescript';
+import type { ApiVersion } from '../../types/api-version';
+
+export type RenderContentProps = {
+  content?: Nullable<BuilderContent>;
+  model?: string;
+  data?: { [key: string]: any };
+  context?: BuilderRenderContext;
+  apiKey: string;
+  apiVersion?: ApiVersion;
+  customComponents?: RegisteredComponent[];
+  canTrack?: boolean;
+  locale?: string;
+  includeRefs?: boolean;
+};
+
+export interface BuilderComponentStateChange {
+  state: BuilderRenderState;
+  ref: {
+    name?: string;
+    props?: {
+      builderBlock?: {
+        id?: string;
+      };
+    };
+  };
+}

package/packages/react/src/components/render-inlined-styles.tsx

@@ -0,0 +1,36 @@
+"use client";
+import * as React from "react";
+
+interface Props {
+  styles: string;
+}
+
+import { TARGET } from "../constants/target.js";
+
+function RenderInlinedStyles(props: Props) {
+  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 "style" as "style";
+  }
+
+  function injectedStyleScript() {
+    return `<${tag()}>${props.styles}</${tag()}>`;
+  }
+
+  const TagRef = tag();
+
+  return (
+    <>
+      {TARGET === "svelte" || TARGET === "qwik" ? (
+        <>
+          <TagRef dangerouslySetInnerHTML={{ __html: props.styles }} />
+        </>
+      ) : (
+        <TagRef>{props.styles}</TagRef>
+      )}
+    </>
+  );
+}
+
+export default RenderInlinedStyles;

package/packages/react/src/constants/builder-registered-components.ts

@@ -0,0 +1,42 @@
+import { default as Button } from '../blocks/button/button';
+import { componentInfo as buttonComponentInfo } from '../blocks/button/component-info.js';
+import { default as Columns } from '../blocks/columns/columns';
+import { componentInfo as columnsComponentInfo } from '../blocks/columns/component-info.js';
+import { componentInfo as fragmentComponentInfo } from '../blocks/fragment/component-info.js';
+import { default as Fragment } from '../blocks/fragment/fragment';
+import { componentInfo as imageComponentInfo } from '../blocks/image/component-info.js';
+import { default as Image } from '../blocks/image/image';
+import { componentInfo as sectionComponentInfo } from '../blocks/section/component-info.js';
+import { default as Section } from '../blocks/section/section';
+import { componentInfo as symbolComponentInfo } from '../blocks/symbol/component-info.js';
+import { default as Symbol } from '../blocks/symbol/symbol';
+import { componentInfo as textComponentInfo } from '../blocks/text/component-info.js';
+import { default as Text } from '../blocks/text/text';
+import { componentInfo as videoComponentInfo } from '../blocks/video/component-info.js';
+import { default as Video } from '../blocks/video/video';
+import type { RegisteredComponent } from '../context/types.js';
+import { componentInfo as embedComponentInfo } from '../blocks/embed/component-info.js';
+import { default as embed } from '../blocks/embed/embed';
+import { default as Img } from '../blocks/img/img';
+import { componentInfo as imgComponentInfo } from '../blocks/img/component-info.js';
+import { default as customCode } from '../blocks/custom-code/custom-code';
+import { componentInfo as customCodeInfo } from '../blocks/custom-code/component-info.js';
+
+/**
+ * Returns a list of all registered components.
+ * NOTE: This needs to be a function to work around ESM circular dependencies.
+ */
+export const getDefaultRegisteredComponents: () => RegisteredComponent[] =
+  () => [
+    { component: Button, ...buttonComponentInfo },
+    { component: Columns, ...columnsComponentInfo },
+    { component: customCode, ...customCodeInfo },
+    { component: embed, ...embedComponentInfo },
+    { component: Fragment, ...fragmentComponentInfo },
+    { component: Image, ...imageComponentInfo },
+    { component: Img, ...imgComponentInfo },
+    { component: Section, ...sectionComponentInfo },
+    { component: Symbol, ...symbolComponentInfo },
+    { component: Text, ...textComponentInfo },
+    { component: Video, ...videoComponentInfo },
+  ];

package/packages/react/src/constants/device-sizes.ts

@@ -0,0 +1,65 @@
+import { fastClone } from '../functions/fast-clone';
+export type SizeName = 'large' | 'medium' | 'small';
+
+interface Size {
+  min: number;
+  default: number;
+  max: number;
+}
+
+const SIZES: Record<SizeName, Size> = {
+  small: {
+    min: 320,
+    default: 321,
+    max: 640,
+  },
+  medium: {
+    min: 641,
+    default: 642,
+    max: 991,
+  },
+  large: {
+    min: 990,
+    default: 991,
+    max: 1200,
+  },
+};
+
+export const getMaxWidthQueryForSize = (size: SizeName, sizeValues = SIZES) =>
+  `@media (max-width: ${sizeValues[size].max}px)`;
+
+interface Breakpoints {
+  small?: number;
+  medium?: number;
+}
+
+export const getSizesForBreakpoints = ({ small, medium }: Breakpoints) => {
+  const newSizes = fastClone(SIZES); // Note: this helps to get a deep clone of fields like small, medium etc
+
+  if (!small || !medium) {
+    return newSizes;
+  }
+
+  const smallMin = Math.floor(small / 2);
+  newSizes.small = {
+    max: small,
+    min: smallMin,
+    default: smallMin + 1,
+  };
+
+  const mediumMin = newSizes.small.max + 1;
+  newSizes.medium = {
+    max: medium,
+    min: mediumMin,
+    default: mediumMin + 1,
+  };
+
+  const largeMin = newSizes.medium.max + 1;
+  newSizes.large = {
+    max: 2000, // TODO: decide upper limit
+    min: largeMin,
+    default: largeMin + 1,
+  };
+
+  return newSizes;
+};

package/packages/react/src/constants/target.ts

@@ -0,0 +1,2 @@
+/** This file should be overriden for each framework. Ideally this would be implemented in Mitosis.  */
+export const TARGET = 'react' as any;

package/packages/react/src/context/builder.context.ts

@@ -0,0 +1,12 @@
+import { createContext } from "react";
+
+export default createContext<any>({
+  content: null,
+  context: {},
+  state: {},
+  setState() {},
+  apiKey: null,
+  apiVersion: undefined,
+  registeredComponents: {},
+  inheritedStyles: {},
+});

package/packages/react/src/context/types.ts

@@ -0,0 +1,26 @@
+import type { BuilderContent } from '../types/builder-content.js';
+import type { ComponentInfo } from '../types/components.js';
+import type { Dictionary, Nullable } from '../types/typescript.js';
+import type { ApiVersion } from '../types/api-version.js';
+
+export type RegisteredComponent = ComponentInfo & {
+  component: any;
+};
+
+export type RegisteredComponents = Dictionary<RegisteredComponent>;
+
+export type BuilderRenderState = Record<string, unknown>;
+
+export type BuilderRenderContext = Record<string, unknown>;
+
+export interface BuilderContextInterface {
+  content: Nullable<BuilderContent>;
+  context: BuilderRenderContext;
+  state: BuilderRenderState;
+  setState?: (state: BuilderRenderState) => void;
+  apiKey: string | null;
+  apiVersion: ApiVersion | undefined;
+  registeredComponents: RegisteredComponents;
+  // Used to recursively store all CSS coming from a parent that would apply to a Text block
+  inheritedStyles: Record<string, unknown>;
+}

package/packages/react/src/functions/camel-to-kebab-case.ts

@@ -0,0 +1,2 @@
+export const camelToKebabCase = (string: string) =>
+  string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();

package/packages/react/src/functions/evaluate.ts

@@ -0,0 +1,57 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import { isBrowser } from './is-browser.js';
+import { isEditing } from './is-editing.js';
+
+export function evaluate({
+  code,
+  context,
+  state,
+  event,
+  isExpression = true,
+}: {
+  code: string;
+  event?: Event;
+  isExpression?: boolean;
+} & Pick<BuilderContextInterface, 'state' | 'context'>): any {
+  if (code === '') {
+    console.warn('Skipping evaluation of empty code block.');
+    return;
+  }
+
+  const builder = {
+    isEditing: isEditing(),
+    isBrowser: isBrowser(),
+    isServer: !isBrowser(),
+  };
+
+  // Be able to handle simple expressions like "state.foo" or "1 + 1"
+  // as well as full blocks like "var foo = "bar"; return foo"
+  const useReturn =
+    // we disable this for cases where we definitely don't want a return
+    isExpression &&
+    !(
+      code.includes(';') ||
+      code.includes(' return ') ||
+      code.trim().startsWith('return ')
+    );
+
+  const useCode = useReturn ? `return (${code});` : code;
+
+  try {
+    return new Function(
+      'builder',
+      'Builder' /* <- legacy */,
+      'state',
+      'context',
+      'event',
+      useCode
+    )(builder, builder, state, context, event);
+  } catch (e) {
+    console.warn(
+      'Builder custom code error: \n While Evaluating: \n ',
+      useCode,
+      '\n',
+      e
+    );
+  }
+}

package/packages/react/src/functions/event-handler-name.ts

@@ -0,0 +1,6 @@
+function capitalizeFirstLetter(string: string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+export const getEventHandlerName = (key: string) =>
+  `on${capitalizeFirstLetter(key)}`;