@builder.io/sdk-solid 0.5.8 → 0.6.0

package/src/components/content/components/enable-editor.jsx

@@ -1,347 +0,0 @@
-import { Show, onMount, on, createEffect, createSignal } from "solid-js";
-
-import { evaluate } from "../../../functions/evaluate/index.js";
-import { fetch } from "../../../functions/get-fetch.js";
-import { isBrowser } from "../../../functions/is-browser.js";
-import { isEditing } from "../../../functions/is-editing.js";
-import { createRegisterComponentMessage } from "../../../functions/register-component.js";
-import { _track } from "../../../functions/track/index.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";
-import { logger } from "../../../helpers/logger.js";
-import { fetchOneEntry } from "../../../functions/get-content/index.js";
-import { isPreviewing } from "../../../functions/is-previewing.js";
-import { postPreviewContent } from "../../../helpers/preview-lru-cache/set.js";
-import { fastClone } from "../../../functions/fast-clone.js";
-
-function EnableEditor(props) {
-  const [canTrackToUse, setCanTrackToUse] = createSignal(
-    checkIsDefined(props.canTrack) ? props.canTrack : true
-  );
-
-  const [forceReRenderCount, setForceReRenderCount] = createSignal(0);
-
-  const [lastUpdated, setLastUpdated] = createSignal(0);
-
-  const [shouldSendResetCookie, setShouldSendResetCookie] = createSignal(false);
-
-  const [httpReqsData, setHttpReqsData] = createSignal({});
-
-  const [clicked, setClicked] = createSignal(false);
-
-  function mergeNewContent(newContent) {
-    const newContentValue = {
-      ...props.builderContextSignal.content,
-      ...newContent,
-      data: {
-        ...props.builderContextSignal.content?.data,
-        ...newContent?.data,
-      },
-      meta: {
-        ...props.builderContextSignal.content?.meta,
-        ...newContent?.meta,
-        breakpoints:
-          newContent?.meta?.breakpoints ||
-          props.builderContextSignal.content?.meta?.breakpoints,
-      },
-    };
-    props.setBuilderContextSignal((PREVIOUS_VALUE) => ({
-      ...PREVIOUS_VALUE,
-      content: newContentValue,
-    }));
-  }
-
-  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 !== props.builderContextSignal.content?.id
-          ) {
-            return;
-          }
-          if (breakpoints) {
-            mergeNewContent({
-              meta: {
-                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;
-        }
-      }
-    }
-  }
-
-  function evaluateJsCode() {
-    // run any dynamic JS code attached to content
-    const jsCode = props.builderContextSignal.content?.data?.jsCode;
-    if (jsCode) {
-      evaluate({
-        code: jsCode,
-        context: props.context || {},
-        localState: undefined,
-        rootState: props.builderContextSignal.rootState,
-        rootSetState: props.builderContextSignal.rootSetState,
-      });
-    }
-  }
-
-  function onClick(event) {
-    if (props.builderContextSignal.content) {
-      const variationId = props.builderContextSignal.content?.testVariationId;
-      const contentId = props.builderContextSignal.content?.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: props.context || {},
-        localState: undefined,
-        rootState: props.builderContextSignal.rootState,
-        rootSetState: props.builderContextSignal.rootSetState,
-      })
-    );
-  }
-
-  function handleRequest({ url, key }) {
-    fetch(url)
-      .then((response) => response.json())
-      .then((json) => {
-        const newState = {
-          ...props.builderContextSignal.rootState,
-          [key]: json,
-        };
-        props.builderContextSignal.rootSetState?.(newState);
-        httpReqsData()[key] = true;
-      })
-      .catch((err) => {
-        console.error("error fetching dynamic data", url, err);
-      });
-  }
-
-  function runHttpRequests() {
-    const requests =
-      props.builderContextSignal.content?.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: fastClone(props.builderContextSignal.rootState),
-            ref: {
-              name: props.model,
-            },
-          },
-        })
-      );
-    }
-  }
-
-  let elementRef;
-
-  onMount(() => {
-    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);
-        window.addEventListener("message", processMessage);
-        registerInsertMenu();
-        setupBrowserForEditing({
-          ...(props.locale
-            ? {
-                locale: props.locale,
-              }
-            : {}),
-          ...(props.includeRefs
-            ? {
-                includeRefs: props.includeRefs,
-              }
-            : {}),
-          ...(props.enrich
-            ? {
-                enrich: props.enrich,
-              }
-            : {}),
-        });
-        Object.values(props.builderContextSignal.componentInfos).forEach(
-          (registeredComponent) => {
-            const message = createRegisterComponentMessage(registeredComponent);
-            window.parent?.postMessage(message, "*");
-          }
-        );
-        window.addEventListener(
-          "builder:component:stateChangeListenerActivated",
-          emitStateUpdate
-        );
-      }
-      if (props.builderContextSignal.content) {
-        const variationId = props.builderContextSignal.content?.testVariationId;
-        const contentId = props.builderContextSignal.content?.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)
-        ) {
-          fetchOneEntry({
-            model: props.model,
-            apiKey: props.apiKey,
-            apiVersion: props.builderContextSignal.apiVersion,
-          }).then((content) => {
-            if (content) {
-              mergeNewContent(content);
-            }
-          });
-        }
-      }
-      evaluateJsCode();
-      runHttpRequests();
-      emitStateUpdate();
-    }
-  });
-
-  function onUpdateFn_0() {
-    if (props.content) {
-      mergeNewContent(props.content);
-    }
-  }
-  createEffect(on(() => [props.content], onUpdateFn_0));
-
-  function onUpdateFn_1() {}
-  createEffect(on(() => [shouldSendResetCookie()], onUpdateFn_1));
-
-  function onUpdateFn_2() {
-    evaluateJsCode();
-  }
-  createEffect(
-    on(
-      () => [
-        props.builderContextSignal.content?.data?.jsCode,
-        props.builderContextSignal.rootState,
-      ],
-      onUpdateFn_2
-    )
-  );
-
-  function onUpdateFn_3() {
-    runHttpRequests();
-  }
-  createEffect(
-    on(
-      () => [props.builderContextSignal.content?.data?.httpRequests],
-      onUpdateFn_3
-    )
-  );
-
-  function onUpdateFn_4() {
-    emitStateUpdate();
-  }
-  createEffect(on(() => [props.builderContextSignal.rootState], onUpdateFn_4));
-
-  return (
-    <builderContext.Provider value={props.builderContextSignal}>
-      <Show when={props.builderContextSignal.content}>
-        <div
-          class={props.classNameProp}
-          key={forceReRenderCount()}
-          ref={elementRef}
-          onClick={(event) => onClick(event)}
-          builder-content-id={props.builderContextSignal.content?.id}
-          builder-model={props.model}
-          {...{}}
-          {...(props.showContent
-            ? {}
-            : {
-                hidden: true,
-                "aria-hidden": true,
-              })}
-        >
-          {props.children}
-        </div>
-      </Show>
-    </builderContext.Provider>
-  );
-}
-
-export default EnableEditor;

package/src/components/content/components/styles.helpers.js

@@ -1,56 +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/src/components/content/components/styles.jsx

@@ -1,36 +0,0 @@
-import { createSignal } from "solid-js";
-
-import InlinedStyles from "../../inlined-styles";
-import { getCss } from "./styles.helpers.js";
-import { getFontCss } from "./styles.helpers.js";
-
-function ContentStyles(props) {
-  const [injectedStyles, setInjectedStyles] = createSignal(
-    `
-${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;
-}
-`.trim()
-  );
-
-  return <InlinedStyles styles={injectedStyles()}></InlinedStyles>;
-}
-
-export default ContentStyles;

package/src/components/content/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/src/components/content/content.jsx

@@ -1,136 +0,0 @@
-import { Show, createSignal } from "solid-js";
-
-import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
-import {
-  components,
-  serializeComponentInfo,
-} from "../../functions/register-component.js";
-import Blocks from "../blocks/blocks";
-import ContentStyles from "./components/styles";
-import {
-  getContentInitialValue,
-  getContextStateInitialValue,
-} from "./content.helpers.js";
-import { TARGET } from "../../constants/target.js";
-import { getRenderContentScriptString } from "../content-variants/helpers.js";
-import EnableEditor from "./components/enable-editor";
-import InlinedScript from "../inlined-script";
-import { wrapComponentRef } from "./wrap-component-ref.js";
-import ComponentsContext from "../../context/components.context.js";
-
-function ContentComponent(props) {
-  const [scriptStr, setScriptStr] = createSignal(
-    getRenderContentScriptString({
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
-      variationId: props.content?.testVariationId,
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
-      contentId: props.content?.id,
-    })
-  );
-
-  const [registeredComponents, setRegisteredComponents] = createSignal(
-    [
-      ...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, { component, ...info }) => ({
-        ...acc,
-        [info.name]: {
-          component: component,
-          ...serializeComponentInfo(info),
-        },
-      }),
-      {}
-    )
-  );
-
-  const [builderContextSignal, setBuilderContextSignal] = createSignal({
-    content: getContentInitialValue({
-      content: props.content,
-      data: props.data,
-    }),
-    localState: undefined,
-    rootState: getContextStateInitialValue({
-      content: props.content,
-      data: props.data,
-      locale: props.locale,
-    }),
-    rootSetState: contentSetState,
-    context: props.context || {},
-    apiKey: props.apiKey,
-    apiVersion: props.apiVersion,
-    componentInfos: [
-      ...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, { component: _, ...info }) => ({
-        ...acc,
-        [info.name]: serializeComponentInfo(info),
-      }),
-      {}
-    ),
-    inheritedStyles: {},
-  });
-
-  function contentSetState(newRootState) {
-    setBuilderContextSignal((PREVIOUS_VALUE) => ({
-      ...PREVIOUS_VALUE,
-      rootState: newRootState,
-    }));
-  }
-
-  return (
-    <ComponentsContext.Provider
-      value={{
-        registeredComponents: registeredComponents(),
-      }}
-    >
-      <EnableEditor
-        content={props.content}
-        model={props.model}
-        context={props.context}
-        apiKey={props.apiKey}
-        canTrack={props.canTrack}
-        locale={props.locale}
-        includeRefs={props.includeRefs}
-        enrich={props.enrich}
-        classNameProp={props.classNameProp}
-        showContent={props.showContent}
-        builderContextSignal={builderContextSignal()}
-        {...{
-          setBuilderContextSignal: setBuilderContextSignal,
-        }}
-      >
-        <Show when={props.isSsrAbTest}>
-          <InlinedScript scriptStr={scriptStr()}></InlinedScript>
-        </Show>
-        <Show when={TARGET !== "reactNative"}>
-          <ContentStyles
-            contentId={builderContextSignal().content?.id}
-            cssCode={builderContextSignal().content?.data?.cssCode}
-            customFonts={builderContextSignal().content?.data?.customFonts}
-          ></ContentStyles>
-        </Show>
-        <Blocks
-          blocks={builderContextSignal().content?.data?.blocks}
-          context={builderContextSignal()}
-          registeredComponents={registeredComponents()}
-        ></Blocks>
-      </EnableEditor>
-    </ComponentsContext.Provider>
-  );
-}
-
-export default ContentComponent;

package/src/components/content/index.js

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

package/src/components/content/wrap-component-ref.js

@@ -1,2 +0,0 @@
-const wrapComponentRef = component => component;
-export { wrapComponentRef }