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

package/packages/react/src/components/render-content/components/render-styles.helpers.ts

@@ -1,79 +0,0 @@
-export interface CustomFont {
-  family?: string;
-  kind?: string;
-  fileUrl?: string;
-  files?: {
-    [key: string]: string;
-  };
-}
-
-const getCssFromFont = (font: CustomFont) => {
-  // 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;
-};
-
-export const getFontCss = ({ customFonts }: { customFonts?: CustomFont[] }) => {
-  // TODO: flag for this
-  // if (!this.builder.allowCustomFonts) {
-  //   return '';
-  // }
-  // TODO: separate internal data from external
-  return customFonts?.map((font) => getCssFromFont(font))?.join(' ') || '';
-};
-
-export const getCss = ({
-  cssCode,
-  contentId,
-}: {
-  cssCode?: string;
-  contentId?: string;
-}) => {
-  if (!cssCode) {
-    return '';
-  }
-  if (!contentId) {
-    return cssCode;
-  }
-
-  // Allow using `&` in custom CSS code like @emotion
-  // E.g. `& .foobar { ... }` to scope CSS
-  // TODO: handle if '&' is within a string like `content: "&"`
-  return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || '';
-};

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

@@ -1,45 +0,0 @@
-"use client";
-import * as React from "react";
-import { useState } from "react";
-
-interface Props {
-  cssCode?: string;
-  customFonts?: CustomFont[];
-  contentId?: string;
-}
-
-import RenderInlinedStyles from "../../render-inlined-styles";
-import type { CustomFont } from "./render-styles.helpers";
-import { getCss } from "./render-styles.helpers";
-import { getFontCss } from "./render-styles.helpers";
-
-function RenderContentStyles(props: Props) {
-  const [injectedStyles, setInjectedStyles] = useState(
-    () => `
-${getCss({
-  cssCode: props.cssCode,
-  contentId: props.contentId,
-})}
-${getFontCss({
-  customFonts: props.customFonts,
-})}
-
-.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
-  margin: 0;
-}
-.builder-text > p, .builder-text > .builder-paragraph {
-  color: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  font-weight: inherit;
-  font-size: inherit;
-  text-align: inherit;
-  font-family: inherit;
-}
-`
-  );
-
-  return <RenderInlinedStyles styles={injectedStyles} />;
-}
-
-export default RenderContentStyles;

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

@@ -1 +0,0 @@
-export { default } from './render-content';

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

@@ -1,48 +0,0 @@
-import type { BuilderRenderState } from '../../context/types';
-import type { BuilderContent } from '../../types/builder-content';
-import type { Nullable } from '../../types/typescript';
-import type { RenderContentProps } from './render-content.types';
-
-export const getContextStateInitialValue = ({
-  content,
-  data,
-  locale,
-}: Pick<RenderContentProps, 'content' | 'data' | 'locale'>) => {
-  const defaultValues: BuilderRenderState = {};
-
-  // set default values for content state inputs
-  content?.data?.inputs?.forEach((input) => {
-    if (
-      input.name &&
-      input.defaultValue !== undefined &&
-      content?.data?.state &&
-      content.data.state[input.name] === undefined
-    ) {
-      defaultValues[input.name] = input.defaultValue;
-    }
-  });
-
-  const stateToUse: BuilderRenderState = {
-    ...content?.data?.state,
-    ...data,
-    ...(locale ? { locale } : {}),
-  };
-
-  return { ...defaultValues, ...stateToUse };
-};
-
-export const getContentInitialValue = ({
-  content,
-  data,
-}: Pick<RenderContentProps, 'content' | 'data'>): Nullable<BuilderContent> => {
-  return !content
-    ? undefined
-    : {
-        ...content,
-        data: {
-          ...content?.data,
-          ...data,
-        },
-        meta: content?.meta,
-      };
-};

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

@@ -1,410 +0,0 @@
-"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

@@ -1,33 +0,0 @@
-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

@@ -1,36 +0,0 @@
-"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

@@ -1,42 +0,0 @@
-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 },
-  ];