@builder.io/sdk-react 0.1.4 → 0.1.6

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

@@ -1,259 +0,0 @@
-import * as React 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 _context = { ...props["_context"] };
-
-  const state = {
-    forceReRenderCount: 0,
-    overrideContent: null,
-    get useContent() {
-      if (!props.content && !state.overrideContent) {
-        return undefined;
-      }
-      const mergedContent = {
-        ...props.content,
-        ...state.overrideContent,
-        data: {
-          ...props.content?.data,
-          ...props.data,
-          ...state.overrideContent?.data,
-        },
-        meta: {
-          ...props.content?.meta,
-          ...state.overrideContent?.meta,
-          breakpoints:
-            state.useBreakpoints ||
-            state.overrideContent?.meta?.breakpoints ||
-            props.content?.meta?.breakpoints,
-        },
-      };
-      return mergedContent;
-    },
-    update: 0,
-    useBreakpoints: null,
-    get canTrackToUse() {
-      return checkIsDefined(props.canTrack) ? props.canTrack : true;
-    },
-    overrideState: {},
-    get contentState() {
-      return {
-        ...props.content?.data?.state,
-        ...props.data,
-        ...(props.locale
-          ? {
-              locale: props.locale,
-            }
-          : {}),
-        ...state.overrideState,
-      };
-    },
-    get contextContext() {
-      return props.context || {};
-    },
-    get 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;
-    },
-    processMessage(event) {
-      const { data } = event;
-      if (data) {
-        switch (data.type) {
-          case "builder.configureSdk": {
-            const messageContent = data.data;
-            const { breakpoints, contentId } = messageContent;
-            if (!contentId || contentId !== state.useContent?.id) {
-              return;
-            }
-            state.useBreakpoints = breakpoints;
-            state.forceReRenderCount = state.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) {
-              state.overrideContent = contentData;
-              state.forceReRenderCount = state.forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
-            }
-
-            break;
-          }
-          case "builder.patchUpdates": {
-            // TODO
-            break;
-          }
-        }
-      }
-    },
-    evaluateJsCode() {
-      // run any dynamic JS code attached to content
-      const jsCode = state.useContent?.data?.jsCode;
-      if (jsCode) {
-        evaluate({
-          code: jsCode,
-          context: state.contextContext,
-          state: state.contentState,
-        });
-      }
-    },
-    get httpReqsData() {
-      return {};
-    },
-    onClick(_event) {
-      if (state.useContent) {
-        const variationId = state.useContent?.testVariationId;
-        const contentId = state.useContent?.id;
-        _track({
-          type: "click",
-          canTrack: state.canTrackToUse,
-          contentId,
-          apiKey: props.apiKey,
-          variationId: variationId !== contentId ? variationId : undefined,
-        });
-      }
-    },
-    evalExpression(expression) {
-      return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
-        evaluate({
-          code: group,
-          context: state.contextContext,
-          state: state.contentState,
-        })
-      );
-    },
-    handleRequest({ url, key }) {
-      fetch(url)
-        .then((response) => response.json())
-        .then((json) => {
-          const newOverrideState = {
-            ...state.overrideState,
-            [key]: json,
-          };
-          state.overrideState = newOverrideState;
-        })
-        .catch((err) => {
-          console.log("error fetching dynamic data", url, err);
-        });
-    },
-    runHttpRequests() {
-      const requests = state.useContent?.data?.httpRequests ?? {};
-      Object.entries(requests).forEach(([key, url]) => {
-        if (url && (!state.httpReqsData[key] || isEditing())) {
-          const evaluatedUrl = state.evalExpression(url);
-          state.handleRequest({
-            url: evaluatedUrl,
-            key,
-          });
-        }
-      });
-    },
-    emitStateUpdate() {
-      if (isEditing()) {
-        window.dispatchEvent(
-          new CustomEvent("builder:component:stateChange", {
-            detail: {
-              state: state.contentState,
-              ref: {
-                name: props.model,
-              },
-            },
-          })
-        );
-      }
-    },
-    get shouldRenderContentStyles() {
-      return Boolean(
-        (state.useContent?.data?.cssCode ||
-          state.useContent?.data?.customFonts?.length) &&
-          TARGET !== "reactNative"
-      );
-    },
-  };
-
-  _context.BuilderContext = {
-    get content() {
-      return state.useContent;
-    },
-    get state() {
-      return state.contentState;
-    },
-    get context() {
-      return state.contextContext;
-    },
-    get apiKey() {
-      return props.apiKey;
-    },
-    get registeredComponents() {
-      return state.allRegisteredComponents;
-    },
-  };
-
-  return (
-    <>
-      {state.useContent ? (
-        <>
-          <div
-            builder-content-id={state.useContent?.id}
-            builder-model={props.model}
-          >
-            {state.shouldRenderContentStyles ? (
-              <RenderContentStyles
-                cssCode={state.useContent?.data?.cssCode}
-                customFonts={state.useContent?.data?.customFonts}
-                _context={_context}
-              />
-            ) : null}
-
-            <RenderBlocks
-              blocks={state.useContent?.data?.blocks}
-              key={state.forceReRenderCount}
-              _context={_context}
-            />
-          </div>
-        </>
-      ) : null}
-    </>
-  );
-}

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

@@ -1,33 +0,0 @@
-import * as React from "react";
-import { TARGET } from "../constants/target.js";
-
-export default function RenderInlinedStyles(props) {
-  const _context = { ...props["_context"] };
-
-  const state = {
-    get injectedStyleScript() {
-      return `<${state.tag}>${props.styles}</${state.tag}>`;
-    },
-    get 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 = state.tag;
-
-  return (
-    <>
-      {TARGET === "svelte" ? (
-        <>
-          <div
-            dangerouslySetInnerHTML={{ __html: state.injectedStyleScript }}
-          />
-        </>
-      ) : (
-        <TagRef>{props.styles}</TagRef>
-      )}
-    </>
-  );
-}

package/packages/_rsc/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/packages/_rsc/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/packages/_rsc/src/constants/target.js

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

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

@@ -1,11 +0,0 @@
-var stdin_default = {
-  content: null,
-  context: {},
-  state: {},
-  apiKey: null,
-  registeredComponents: {},
-  inheritedStyles: {}
-};
-export {
-  stdin_default as default
-};

package/packages/_rsc/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
-};

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

@@ -1,6 +0,0 @@
-function evaluate() {
-  return null;
-}
-export {
-  evaluate
-};

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

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

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

@@ -1,22 +0,0 @@
-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/_rsc/src/functions/fast-clone.js

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

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

@@ -1,11 +0,0 @@
-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/_rsc/src/functions/get-block-actions.js

@@ -1,18 +0,0 @@
-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/functions/get-block-component-options.js

@@ -1,28 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-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;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-function getBlockComponentOptions(block) {
-  var _a;
-  return __spreadProps(__spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options), {
-    builderBlock: block
-  });
-}
-export {
-  getBlockComponentOptions
-};

package/packages/_rsc/src/functions/get-block-properties.js

@@ -1,50 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-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;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { TARGET } from "../constants/target.js";
-import { convertStyleMapToCSSArray } from "../helpers/css.js";
-import { transformBlockProperties } from "./transform-block-properties.js";
-function getBlockProperties(block) {
-  var _a;
-  const properties = __spreadProps(__spreadValues({}, block.properties), {
-    "builder-id": block.id,
-    style: getStyleAttribute(block.style),
-    class: [block.id, "builder-block", block.class, (_a = block.properties) == null ? void 0 : _a.class].filter(Boolean).join(" ")
-  });
-  return transformBlockProperties(properties);
-}
-function getStyleAttribute(style) {
-  if (!style) {
-    return void 0;
-  }
-  switch (TARGET) {
-    case "svelte":
-    case "vue2":
-    case "vue3":
-    case "solid":
-      return convertStyleMapToCSSArray(style).join(" ");
-    case "qwik":
-    case "reactNative":
-    case "react":
-      return style;
-  }
-}
-export {
-  getBlockProperties
-};

package/packages/_rsc/src/functions/get-block-tag.js

@@ -1,6 +0,0 @@
-function getBlockTag(block) {
-  return block.tagName || "div";
-}
-export {
-  getBlockTag
-};

package/packages/_rsc/src/functions/get-builder-search-params/fn.test.js

@@ -1,13 +0,0 @@
-import { convertSearchParamsToQueryObject, getBuilderSearchParams } from ".";
-const querystring = "someotherValue=jklsjfdal&abc=klfdjklgfds&builder.cachebust=true&builder.preview=page&builder.noCache=true&__builder_editing__=true&builder.overrides.page=037948e52eaf4743afed464f02c70da4&builder.overrides.037948e52eaf4743afed464f02c70da4=037948e52eaf4743afed464f02c70da4&builder.overrides.page%3A%2F=037948e52eaf4743afed464f02c70da4&preview_theme_id=128854393017";
-const url = new URL(`localhost:3000/about-us?${querystring}`);
-describe("Get Builder SearchParams", () => {
-  test("correctly converts URLSearchParams to object", () => {
-    const output = convertSearchParamsToQueryObject(url.searchParams);
-    expect(output).toMatchSnapshot();
-  });
-  test("correctly extracts all builder params from a query object", () => {
-    const output = getBuilderSearchParams(convertSearchParamsToQueryObject(url.searchParams));
-    expect(output).toMatchSnapshot();
-  });
-});

package/packages/_rsc/src/functions/get-builder-search-params/index.js

@@ -1,38 +0,0 @@
-import { isBrowser } from "../is-browser.js";
-const BUILDER_SEARCHPARAMS_PREFIX = "builder.";
-const BUILDER_OPTIONS_PREFIX = "options.";
-const convertSearchParamsToQueryObject = (searchParams) => {
-  const options = {};
-  searchParams.forEach((value, key) => {
-    options[key] = value;
-  });
-  return options;
-};
-const getBuilderSearchParams = (_options) => {
-  if (!_options) {
-    return {};
-  }
-  const options = normalizeSearchParams(_options);
-  const newOptions = {};
-  Object.keys(options).forEach((key) => {
-    if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
-      const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, "").replace(BUILDER_OPTIONS_PREFIX, "");
-      newOptions[trimmedKey] = options[key];
-    }
-  });
-  return newOptions;
-};
-const getBuilderSearchParamsFromWindow = () => {
-  if (!isBrowser()) {
-    return {};
-  }
-  const searchParams = new URLSearchParams(window.location.search);
-  return getBuilderSearchParams(searchParams);
-};
-const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;
-export {
-  convertSearchParamsToQueryObject,
-  getBuilderSearchParams,
-  getBuilderSearchParamsFromWindow,
-  normalizeSearchParams
-};