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

package/packages/rsc/src/components/render-block/render-component.jsx

@@ -1,39 +0,0 @@
-import * as React from "react";
-import BlockStyles from "./block-styles";
-import RenderBlock from "./render-block";
-
-function RenderComponent(props) {
-  const _context = { ...props["_context"] };
-
-  const ComponentRefRef = props.componentRef;
-
-  return (
-    <>
-      {props.componentRef ? (
-        <>
-          <ComponentRefRef {...props.componentOptions} _context={_context}>
-            {props.blockChildren?.map((child) => (
-              <RenderBlock
-                key={"render-block-" + child.id}
-                block={child}
-                context={props.context}
-                _context={_context}
-              />
-            ))}
-
-            {props.blockChildren?.map((child) => (
-              <BlockStyles
-                key={"block-style-" + child.id}
-                block={child}
-                context={props.context}
-                _context={_context}
-              />
-            ))}
-          </ComponentRefRef>
-        </>
-      ) : null}
-    </>
-  );
-}
-
-export default RenderComponent;

package/packages/rsc/src/components/render-block/render-repeated-block.jsx

@@ -1,27 +0,0 @@
-import * as React from "react";
-import BuilderContext from "../../context/builder.context.js";
-import RenderBlock from "./render-block";
-
-function RenderRepeatedBlock(props) {
-  const _context = { ...props["_context"] };
-
-  _context.BuilderContext = {
-    content: props.repeatContext.content,
-    state: props.repeatContext.state,
-    setState: props.repeatContext.setState,
-    context: props.repeatContext.context,
-    apiKey: props.repeatContext.apiKey,
-    registeredComponents: props.repeatContext.registeredComponents,
-    inheritedStyles: props.repeatContext.inheritedStyles,
-  };
-
-  return (
-    <RenderBlock
-      block={props.block}
-      context={props.repeatContext}
-      _context={_context}
-    />
-  );
-}
-
-export default RenderRepeatedBlock;

package/packages/rsc/src/components/render-blocks.jsx

@@ -1,92 +0,0 @@
-import * as React from "react";
-import BuilderContext from "../context/builder.context.js";
-import { isEditing } from "../functions/is-editing.js";
-import BlockStyles from "./render-block/block-styles";
-import RenderBlock from "./render-block/render-block";
-
-function RenderBlocks(props) {
-  const _context = { ...props["_context"] };
-
-  const state = {
-    get className() {
-      return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
-    },
-    onClick() {
-      if (isEditing() && !props.blocks?.length) {
-        window.parent?.postMessage(
-          {
-            type: "builder.clickEmptyBlocks",
-            data: {
-              parentElementId: props.parent,
-              dataPath: props.path,
-            },
-          },
-          "*"
-        );
-      }
-    },
-    onMouseEnter() {
-      if (isEditing() && !props.blocks?.length) {
-        window.parent?.postMessage(
-          {
-            type: "builder.hoverEmptyBlocks",
-            data: {
-              parentElementId: props.parent,
-              dataPath: props.path,
-            },
-          },
-          "*"
-        );
-      }
-    },
-  };
-
-  const builderContext = _context["BuilderContext"];
-
-  return (
-    <>
-      <div
-        className={state.className + " div-7a14f25c"}
-        builder-path={props.path}
-        builder-parent-id={props.parent}
-        dataSet={{
-          class: state.className,
-        }}
-        style={props.styleProp}
-      >
-        {props.blocks ? (
-          <>
-            {props.blocks?.map((block) => (
-              <RenderBlock
-                key={"render-block-" + block.id}
-                block={block}
-                context={builderContext}
-                _context={_context}
-              />
-            ))}
-          </>
-        ) : null}
-
-        {props.blocks ? (
-          <>
-            {props.blocks?.map((block) => (
-              <BlockStyles
-                key={"block-style-" + block.id}
-                block={block}
-                context={builderContext}
-                _context={_context}
-              />
-            ))}
-          </>
-        ) : null}
-      </div>
-      <style>{`.div-7a14f25c {
-display: flex;
-flex-direction: column;
-align-items: stretch;
-}`}</style>
-    </>
-  );
-}
-
-export default RenderBlocks;

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

@@ -1,64 +0,0 @@
-import React, { useEffect } from 'react';
-import { setupBrowserForEditing } from '../../scripts/init-editing.js';
-// import type { RegisteredComponent } from '../../context/types.js';
-// import type { BuilderContent } from '../../types/builder-content.js';
-
-/**
- * @typedef {object} RegisteredComponent
- * @typedef {object} BuilderContent
- * @typedef {(data: {data: object, key: string }) => void} OnUpdateCallback
- * @typedef {{
- *   model: string,
- *   components?: RegisteredComponent[],
- *   children: any,
- *   onUpdate?: OnUpdateCallback,
- * }} BuilderEditingProps
- */
-
-/**
- * @param {BuilderEditingProps} props
- */
-export function BuilderEditingWrapper(props) {
-  useEffect(() => {
-    setupBrowserForEditing();
-
-    if (props.components) {
-      for (const component of props.components) {
-        window.parent.postMessage(
-          {
-            type: 'builder.registerComponent',
-            data: component,
-          },
-          '*'
-        );
-      }
-    }
-
-    /**
-     *
-     * @param {MessageEvent} e
-     */
-    function onMessage(e) {
-      switch (e.data?.type) {
-        case 'builder.contentUpdate': {
-          props.onUpdate?.(e.data.data);
-        }
-      }
-    }
-
-    addEventListener('message', onMessage);
-
-    return () => window.removeEventListener('message', onMessage);
-  }, [props.model]);
-  return (
-    <div
-      onMouseDown={(e) => e.preventDefault()}
-      onClickCapture={(e) => {
-        e.stopPropagation();
-        e.preventDefault();
-      }}
-    >
-      {props.children}
-    </div>
-  );
-}

package/packages/rsc/src/components/render-content/components/render-styles.helpers.js

@@ -1,57 +0,0 @@
-const getCssFromFont = (font) => {
-  var _a, _b;
-  const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
-  const name = family.split(",")[0];
-  const url = (_b = font.fileUrl) != null ? _b : (_a = font == null ? void 0 : font.files) == null ? void 0 : _a.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;
-      }
-      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;
-};
-const getFontCss = ({ customFonts }) => {
-  var _a;
-  return ((_a = customFonts == null ? void 0 : customFonts.map((font) => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
-};
-const getCss = ({
-  cssCode,
-  contentId
-}) => {
-  if (!cssCode) {
-    return "";
-  }
-  if (!contentId) {
-    return cssCode;
-  }
-  return (cssCode == null ? void 0 : cssCode.replace(/&/g, `div[builder-content-id="${contentId}"]`)) || "";
-};
-export {
-  getCss,
-  getFontCss
-};

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

@@ -1,39 +0,0 @@
-import * as React from "react";
-import RenderInlinedStyles from "../../render-inlined-styles";
-import { getCss } from "./render-styles.helpers";
-import { getFontCss } from "./render-styles.helpers";
-
-function RenderContentStyles(props) {
-  const _context = { ...props["_context"] };
-
-  const state = {
-    injectedStyles: `
-${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={state.injectedStyles} _context={_context} />
-  );
-}
-
-export default RenderContentStyles;

package/packages/rsc/src/components/render-content/index.js

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

package/packages/rsc/src/components/render-content/render-content.helpers.js

@@ -1,48 +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));
-const getContextStateInitialValue = ({
-  content,
-  data,
-  locale
-}) => {
-  var _a, _b, _c;
-  const defaultValues = {};
-  (_b = (_a = content == null ? void 0 : content.data) == null ? void 0 : _a.inputs) == null ? void 0 : _b.forEach((input) => {
-    var _a2;
-    if (input.name && input.defaultValue !== void 0 && ((_a2 = content == null ? void 0 : content.data) == null ? void 0 : _a2.state) && content.data.state[input.name] === void 0) {
-      defaultValues[input.name] = input.defaultValue;
-    }
-  });
-  const stateToUse = __spreadValues(__spreadValues(__spreadValues({}, (_c = content == null ? void 0 : content.data) == null ? void 0 : _c.state), data), locale ? { locale } : {});
-  return __spreadValues(__spreadValues({}, defaultValues), stateToUse);
-};
-const getContentInitialValue = ({
-  content,
-  data
-}) => {
-  return !content ? void 0 : __spreadProps(__spreadValues({}, content), {
-    data: __spreadValues(__spreadValues({}, content == null ? void 0 : content.data), data),
-    meta: content == null ? void 0 : content.meta
-  });
-};
-export {
-  getContentInitialValue,
-  getContextStateInitialValue
-};

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

@@ -1,253 +0,0 @@
-import * as React from "react";
-import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.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";
-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 {
-  getContentInitialValue,
-  getContextStateInitialValue,
-} from "./render-content.helpers.js";
-import { TARGET } from "../../constants/target.js";
-import { logger } from "../../helpers/logger.js";
-
-function RenderContent(props) {
-  const _context = { ...props["_context"] };
-
-  const state = {
-    forceReRenderCount: 0,
-    overrideContent: null,
-    useContent: getContentInitialValue({
-      content: props.content,
-      data: props.data,
-    }),
-    mergeNewContent(newContent) {
-      state.useContent = {
-        ...state.useContent,
-        ...newContent,
-        data: {
-          ...state.useContent?.data,
-          ...newContent?.data,
-        },
-        meta: {
-          ...state.useContent?.meta,
-          ...newContent?.meta,
-          breakpoints:
-            newContent?.meta?.breakpoints ||
-            state.useContent?.meta?.breakpoints,
-        },
-      };
-    },
-    setBreakpoints(breakpoints) {
-      state.useContent = {
-        ...state.useContent,
-        meta: {
-          ...state.useContent?.meta,
-          breakpoints,
-        },
-      };
-    },
-    update: 0,
-    canTrackToUse: checkIsDefined(props.canTrack) ? props.canTrack : true,
-    contentState: getContextStateInitialValue({
-      content: props.content,
-      data: props.data,
-      locale: props.locale,
-    }),
-    setContextState(newState) {
-      state.contentState = newState;
-    },
-    allRegisteredComponents: [
-      ...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,
-      }),
-      {}
-    ),
-    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;
-            }
-            if (breakpoints) {
-              state.setBreakpoints(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.mergeNewContent(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: props.context || {},
-          state: state.contentState,
-        });
-      }
-    },
-    httpReqsData: {},
-    clicked: false,
-    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,
-          ...getInteractionPropertiesForEvent(event),
-          unique: !state.clicked,
-        });
-      }
-      if (!state.clicked) {
-        state.clicked = true;
-      }
-    },
-    evalExpression(expression) {
-      return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
-        evaluate({
-          code: group,
-          context: props.context || {},
-          state: state.contentState,
-        })
-      );
-    },
-    handleRequest({ url, key }) {
-      fetch(url)
-        .then((response) => response.json())
-        .then((json) => {
-          const newState = {
-            ...state.contentState,
-            [key]: json,
-          };
-          state.setContextState(newState);
-        })
-        .catch((err) => {
-          console.error("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,
-              },
-            },
-          })
-        );
-      }
-    },
-  };
-
-  _context.builderContext = {
-    content: state.useContent,
-    state: state.contentState,
-    setState: state.setContextState,
-    context: props.context || {},
-    apiKey: props.apiKey,
-    apiVersion: props.apiVersion,
-    registeredComponents: state.allRegisteredComponents,
-  };
-
-  return (
-    <>
-      {state.useContent ? (
-        <>
-          <div
-            builder-content-id={state.useContent?.id}
-            builder-model={props.model}
-          >
-            {TARGET !== "reactNative" ? (
-              <>
-                <RenderContentStyles
-                  contentId={state.useContent?.id}
-                  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}
-    </>
-  );
-}
-
-export default RenderContent;

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

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