@builder.io/sdk-react 0.2.0 → 0.2.2

package/src/components/render-blocks.jsx

@@ -1,89 +0,0 @@
-import * as React from "react";
-import { useContext } from "react";
-import BuilderContext from "../context/builder.context.js";
-import { isEditing } from "../functions/is-editing.js";
-import BlockStyles from "./render-block/block-styles.js";
-import RenderBlock from "./render-block/render-block.js";
-
-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,
-          },
-        },
-        "*"
-      );
-    }
-  }
-
-  const builderContext = useContext(BuilderContext);
-
-  return (
-    <>
-      <div
-        className={className() + " div-05727d92"}
-        builder-path={props.path}
-        builder-parent-id={props.parent}
-        dataSet={{
-          class: className(),
-        }}
-        style={props.styleProp}
-        onClick={(event) => onClick()}
-        onMouseEnter={(event) => onMouseEnter()}
-      >
-        {props.blocks ? (
-          <>
-            {props.blocks?.map((block) => (
-              <RenderBlock
-                key={"render-block-" + block.id}
-                block={block}
-                context={builderContext}
-              />
-            ))}
-          </>
-        ) : null}
-
-        {props.blocks ? (
-          <>
-            {props.blocks?.map((block) => (
-              <BlockStyles
-                key={"block-style-" + block.id}
-                block={block}
-                context={builderContext}
-              />
-            ))}
-          </>
-        ) : null}
-      </div>
-      <style>{`.div-05727d92 {
-display: flex;
-flex-direction: column;
-align-items: stretch;
-}`}</style>
-    </>
-  );
-}

package/src/components/render-content/builder-editing.jsx

@@ -1,5 +0,0 @@
-import * as React from "react";
-
-export default function BuilderEditing(props) {
-  return <div />;
-}

package/src/components/render-content/components/render-styles.jsx

@@ -1,64 +0,0 @@
-import * as React from "react";
-import RenderInlinedStyles from "../../render-inlined-styles.js";
-
-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/index.js

@@ -1,4 +0,0 @@
-import { default as default2 } from "./render-content.js";
-export {
-  default2 as default
-};

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

@@ -1,370 +0,0 @@
-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.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";
-
-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;
-    }
-    const mergedContent = {
-      ...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,
-      },
-    };
-    return mergedContent;
-  }
-
-  const [update, setUpdate] = useState(() => 0);
-
-  const [useBreakpoints, setUseBreakpoints] = useState(() => null);
-
-  function canTrackToUse() {
-    return 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,
-    };
-  }
-
-  function contextContext() {
-    return props.context || {};
-  }
-
-  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.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(),
-      });
-    }
-  }
-
-  function httpReqsData() {
-    return {};
-  }
-
-  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,
-      });
-    }
-  }
-
-  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;
-        if (
-          props.model &&
-          searchParams.get("builder.preview") === props.model
-        ) {
-          const previewApiKey =
-            searchParams.get("apiKey") || searchParams.get("builder.space");
-          if (previewApiKey) {
-            getContent({
-              model: props.model,
-              apiKey: previewApiKey,
-            }).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={{
-        get content() {
-          return useContent();
-        },
-        get state() {
-          return contentState();
-        },
-        get context() {
-          return contextContext();
-        },
-        get apiKey() {
-          return props.apiKey;
-        },
-        get registeredComponents() {
-          return 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/src/components/render-inlined-styles.jsx

@@ -1,28 +0,0 @@
-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/src/constants/builder-registered-components.js

@@ -1,54 +0,0 @@
-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/src/constants/device-sizes.js

@@ -1,48 +0,0 @@
-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/src/constants/target.js

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

package/src/context/builder.context.js

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

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

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