@builder.io/sdk-react 0.1.1 → 0.1.3

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

@@ -0,0 +1,372 @@
+import * as React from "react";
+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() ? (
+        <>
+          <div
+            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}
+            />
+          </div>
+        </>
+      ) : null}
+    </builderContext.Provider>
+  );
+}

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

@@ -0,0 +1,28 @@
+import * as React from "react";
+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";
+  }
+
+  const TagRef = tag();
+
+  return (
+    <>
+      {TARGET === "svelte" ? (
+        <>
+          <div dangerouslySetInnerHTML={{ __html: injectedStyleScript() }} />
+        </>
+      ) : (
+        <TagRef>{props.styles}</TagRef>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,54 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { default as Button } from "../blocks/button/button.js";
+import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info.js";
+import { default as Columns } from "../blocks/columns/columns.js";
+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.js";
+import { componentInfo as imageComponentInfo } from "../blocks/image/component-info.js";
+import { default as Image } from "../blocks/image/image.js";
+import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info.js";
+import { default as Section } from "../blocks/section/section.js";
+import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info.js";
+import { default as Symbol } from "../blocks/symbol/symbol.js";
+import { componentInfo as textComponentInfo } from "../blocks/text/component-info.js";
+import { default as Text } from "../blocks/text/text.js";
+import { componentInfo as videoComponentInfo } from "../blocks/video/component-info.js";
+import { default as Video } from "../blocks/video/video.js";
+import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info.js";
+import { default as embed } from "../blocks/embed/embed.js";
+import { default as Img } from "../blocks/img/img.js";
+import { componentInfo as imgComponentInfo } from "../blocks/img/component-info.js";
+import { default as customCode } from "../blocks/custom-code/custom-code.js";
+import { componentInfo as customCodeInfo } from "../blocks/custom-code/component-info.js";
+const getDefaultRegisteredComponents = () => [
+  __spreadValues({ component: Columns }, columnsComponentInfo),
+  __spreadValues({ component: Image }, imageComponentInfo),
+  __spreadValues({ component: Img }, imgComponentInfo),
+  __spreadValues({ component: Text }, textComponentInfo),
+  __spreadValues({ component: Video }, videoComponentInfo),
+  __spreadValues({ component: Symbol }, symbolComponentInfo),
+  __spreadValues({ component: Button }, buttonComponentInfo),
+  __spreadValues({ component: Section }, sectionComponentInfo),
+  __spreadValues({ component: Fragment }, fragmentComponentInfo),
+  __spreadValues({ component: embed }, embedComponentInfo),
+  __spreadValues({ component: customCode }, customCodeInfo)
+];
+export {
+  getDefaultRegisteredComponents
+};

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

@@ -0,0 +1,48 @@
+import { fastClone } from "../functions/fast-clone";
+const SIZES = {
+  small: {
+    min: 320,
+    default: 321,
+    max: 640
+  },
+  medium: {
+    min: 641,
+    default: 642,
+    max: 991
+  },
+  large: {
+    min: 990,
+    default: 991,
+    max: 1200
+  }
+};
+const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
+const getSizesForBreakpoints = ({ small, medium }) => {
+  const newSizes = fastClone(SIZES);
+  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: 2e3,
+    min: largeMin,
+    default: largeMin + 1
+  };
+  return newSizes;
+};
+export {
+  getMaxWidthQueryForSize,
+  getSizesForBreakpoints
+};

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

@@ -0,0 +1,4 @@
+const TARGET = "react";
+export {
+  TARGET
+};

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

@@ -0,0 +1,12 @@
+import { createContext } from "react";
+var stdin_default = createContext({
+  content: null,
+  context: {},
+  state: {},
+  apiKey: null,
+  registeredComponents: {},
+  inheritedStyles: {}
+});
+export {
+  stdin_default as default
+};

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

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

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

@@ -0,0 +1,29 @@
+import { isBrowser } from "./is-browser.js";
+import { isEditing } from "./is-editing.js";
+function evaluate({
+  code,
+  context,
+  state,
+  event,
+  isExpression = true
+}) {
+  if (code === "") {
+    console.warn("Skipping evaluation of empty code block.");
+    return;
+  }
+  const builder = {
+    isEditing: isEditing(),
+    isBrowser: isBrowser(),
+    isServer: !isBrowser()
+  };
+  const useReturn = isExpression && !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
+  const useCode = useReturn ? `return (${code});` : code;
+  try {
+    return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
+  } catch (e) {
+    console.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e);
+  }
+}
+export {
+  evaluate
+};

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

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

package/packages/react/src/functions/extract-text-styles.js

@@ -0,0 +1,22 @@
+const TEXT_STYLE_KEYS = [
+  "color",
+  "whiteSpace",
+  "direction",
+  "hyphens",
+  "overflowWrap"
+];
+const isTextStyle = (key) => {
+  return TEXT_STYLE_KEYS.includes(key) || key.startsWith("font") || key.startsWith("text") || key.startsWith("letter") || key.startsWith("line") || key.startsWith("word") || key.startsWith("writing");
+};
+const extractTextStyles = (styles) => {
+  const textStyles = {};
+  Object.entries(styles).forEach(([key, value]) => {
+    if (isTextStyle(key)) {
+      textStyles[key] = value;
+    }
+  });
+  return textStyles;
+};
+export {
+  extractTextStyles
+};

package/packages/react/src/functions/fast-clone.js

@@ -0,0 +1,4 @@
+const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
+export {
+  fastClone
+};

package/packages/react/src/functions/get-block-actions-handler.js

@@ -0,0 +1,11 @@
+import { evaluate } from "./evaluate.js";
+const createEventHandler = (value, options) => (event) => evaluate({
+  code: value,
+  context: options.context,
+  state: options.state,
+  event,
+  isExpression: false
+});
+export {
+  createEventHandler
+};

package/packages/react/src/functions/get-block-actions.js

@@ -0,0 +1,18 @@
+import { getEventHandlerName } from "./event-handler-name.js";
+import { createEventHandler } from "./get-block-actions-handler.js";
+function getBlockActions(options) {
+  var _a;
+  const obj = {};
+  const optionActions = (_a = options.block.actions) != null ? _a : {};
+  for (const key in optionActions) {
+    if (!optionActions.hasOwnProperty(key)) {
+      continue;
+    }
+    const value = optionActions[key];
+    obj[getEventHandlerName(key)] = createEventHandler(value, options);
+  }
+  return obj;
+}
+export {
+  getBlockActions
+};

package/packages/{_rsc/src/blocks/textarea/textarea.js → react/src/functions/get-block-component-options.js}

@@ -17,16 +17,12 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import * as React from "react";
-function Textarea(props) {
-  const _context = __spreadValues({}, props["_context"]);
-  return /* @__PURE__ */ React.createElement("textarea", __spreadProps(__spreadValues({}, props.attributes), {
-    placeholder: props.placeholder,
-    name: props.name,
-    value: props.value,
-    defaultValue: props.defaultValue
-  }));
+function getBlockComponentOptions(block) {
+  var _a;
+  return __spreadProps(__spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options), {
+    builderBlock: block
+  });
 }
 export {
-  Textarea as default
+  getBlockComponentOptions
 };