@builder.io/sdk-qwik 0.16.6 → 0.16.7

package/lib/node/components/content/components/enable-editor.qwik.cjs

@@ -0,0 +1,405 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const qwik = require("@builder.io/qwik");
+const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
+const builder_context = require("../../../context/builder.context.qwik.cjs");
+const evaluate = require("../../../functions/evaluate/evaluate.qwik.cjs");
+const fastClone = require("../../../functions/fast-clone.qwik.cjs");
+const index = require("../../../functions/get-content/index.qwik.cjs");
+const getFetch = require("../../../functions/get-fetch.qwik.cjs");
+const isBrowser = require("../../../functions/is-browser.qwik.cjs");
+const isEditing = require("../../../functions/is-editing.qwik.cjs");
+const isPreviewing = require("../../../functions/is-previewing.qwik.cjs");
+const registerComponent = require("../../../functions/register-component.qwik.cjs");
+const index$1 = require("../../../functions/track/index.qwik.cjs");
+const interaction = require("../../../functions/track/interaction.qwik.cjs");
+const canTrack = require("../../../helpers/canTrack.qwik.cjs");
+const logger = require("../../../helpers/logger.qwik.cjs");
+const subscribeToEditor = require("../../../helpers/subscribe-to-editor.qwik.cjs");
+const initEditing = require("../../../scripts/init-editing.qwik.cjs");
+const animator = require("../../block/animator.qwik.cjs");
+const styles_helpers = require("./styles.helpers.qwik.cjs");
+const mergeNewRootState = function mergeNewRootState2(props, state, showContentProps, elementRef, newData) {
+  var _a, _b;
+  const combinedState = {
+    ...props.builderContextSignal.rootState,
+    ...newData
+  };
+  if (props.builderContextSignal.rootSetState)
+    (_b = (_a = props.builderContextSignal).rootSetState) == null ? void 0 : _b.call(_a, combinedState);
+  else
+    props.builderContextSignal.rootState = combinedState;
+};
+const mergeNewContent = function mergeNewContent2(props, state, showContentProps, elementRef, newContent) {
+  var _a, _b, _c, _d, _e;
+  const newContentValue = {
+    ...props.builderContextSignal.content,
+    ...newContent,
+    data: {
+      ...(_a = props.builderContextSignal.content) == null ? void 0 : _a.data,
+      ...newContent == null ? void 0 : newContent.data
+    },
+    meta: {
+      ...(_b = props.builderContextSignal.content) == null ? void 0 : _b.meta,
+      ...newContent == null ? void 0 : newContent.meta,
+      breakpoints: ((_c = newContent == null ? void 0 : newContent.meta) == null ? void 0 : _c.breakpoints) || ((_e = (_d = props.builderContextSignal.content) == null ? void 0 : _d.meta) == null ? void 0 : _e.breakpoints)
+    }
+  };
+  props.builderContextSignal.content = newContentValue;
+};
+const processMessage = function processMessage2(props, state, showContentProps, elementRef, event) {
+  return subscribeToEditor.createEditorListener({
+    model: props.model,
+    trustedHosts: props.trustedHosts,
+    callbacks: {
+      configureSdk: (messageContent) => {
+        var _a;
+        const { breakpoints, contentId } = messageContent;
+        if (!contentId || contentId !== ((_a = props.builderContextSignal.content) == null ? void 0 : _a.id))
+          return;
+        if (breakpoints)
+          mergeNewContent(props, state, showContentProps, elementRef, {
+            meta: {
+              breakpoints
+            }
+          });
+      },
+      animation: (animation) => {
+        animator.triggerAnimation(animation);
+      },
+      contentUpdate: (newContent) => {
+        mergeNewContent(props, state, showContentProps, elementRef, newContent);
+      }
+    }
+  })(event);
+};
+const evaluateJsCode = function evaluateJsCode2(props, state, showContentProps, elementRef) {
+  var _a, _b;
+  const jsCode = (_b = (_a = props.builderContextSignal.content) == null ? void 0 : _a.data) == null ? void 0 : _b.jsCode;
+  if (jsCode)
+    evaluate.evaluate({
+      code: jsCode,
+      context: props.context || {},
+      localState: void 0,
+      rootState: props.builderContextSignal.rootState,
+      rootSetState: props.builderContextSignal.rootSetState,
+      /**
+      * We don't want to cache the result of the JS code, since it's arbitrary side effect code.
+      */
+      enableCache: false
+    });
+};
+const onClick = function onClick2(props, state, showContentProps, elementRef, event) {
+  var _a, _b;
+  if (props.builderContextSignal.content) {
+    const variationId = (_a = props.builderContextSignal.content) == null ? void 0 : _a.testVariationId;
+    const contentId = (_b = props.builderContextSignal.content) == null ? void 0 : _b.id;
+    index$1._track({
+      type: "click",
+      canTrack: canTrack.getDefaultCanTrack(props.canTrack),
+      contentId,
+      apiKey: props.apiKey,
+      variationId: variationId !== contentId ? variationId : void 0,
+      ...interaction.getInteractionPropertiesForEvent(event),
+      unique: !state.clicked
+    });
+  }
+  if (!state.clicked)
+    state.clicked = true;
+};
+const runHttpRequests = function runHttpRequests2(props, state, showContentProps, elementRef) {
+  var _a, _b;
+  const requests = ((_b = (_a = props.builderContextSignal.content) == null ? void 0 : _a.data) == null ? void 0 : _b.httpRequests) ?? {};
+  Object.entries(requests).forEach(([key, url]) => {
+    if (!url)
+      return;
+    if (state.httpReqsPending[key])
+      return;
+    if (state.httpReqsData[key] && !isEditing.isEditing())
+      return;
+    state.httpReqsPending[key] = true;
+    const evaluatedUrl = url.replace(/{{([^}]+)}}/g, (_match, group) => String(evaluate.evaluate({
+      code: group,
+      context: props.context || {},
+      localState: void 0,
+      rootState: props.builderContextSignal.rootState,
+      rootSetState: props.builderContextSignal.rootSetState,
+      enableCache: true
+    })));
+    getFetch.fetch(evaluatedUrl).then((response) => response.json()).then((json) => {
+      mergeNewRootState(props, state, showContentProps, elementRef, {
+        [key]: json
+      });
+      state.httpReqsData[key] = true;
+    }).catch((err) => {
+      console.error("error fetching dynamic data", url, err);
+    }).finally(() => {
+      state.httpReqsPending[key] = false;
+    });
+  });
+};
+const emitStateUpdate = function emitStateUpdate2(props, state, showContentProps, elementRef) {
+  if (isEditing.isEditing())
+    window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
+      detail: {
+        state: fastClone.fastClone(props.builderContextSignal.rootState),
+        ref: {
+          name: props.model
+        }
+      }
+    }));
+};
+const EnableEditor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
+  var _a, _b;
+  qwik._jsxBranch();
+  const showContentProps = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2] = qwik.useLexicalScope();
+    return props2.showContent ? {} : {
+      hidden: true,
+      "aria-hidden": true
+    };
+  }, "EnableEditor_component_showContentProps_useComputed_aHr3V0Y8sNs", [
+    props
+  ]));
+  const elementRef = qwik.useSignal();
+  const state = qwik.useStore({
+    ContentWrapper: props.contentWrapper || "div",
+    clicked: false,
+    httpReqsData: {},
+    httpReqsPending: {}
+  }, {
+    deep: true
+  });
+  qwik.useOn("initeditingbldr", /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
+    const [elementRef2, props2, showContentProps2, state2] = qwik.useLexicalScope();
+    window.addEventListener("message", processMessage.bind(null, props2, state2, showContentProps2, elementRef2));
+    initEditing.registerInsertMenu();
+    initEditing.setupBrowserForEditing({
+      ...props2.locale ? {
+        locale: props2.locale
+      } : {},
+      ...props2.enrich ? {
+        enrich: props2.enrich
+      } : {},
+      ...props2.trustedHosts ? {
+        trustedHosts: props2.trustedHosts
+      } : {}
+    });
+    Object.values(props2.builderContextSignal.componentInfos).forEach((registeredComponent) => {
+      var _a2;
+      const message = registerComponent.createRegisterComponentMessage(registeredComponent);
+      (_a2 = window.parent) == null ? void 0 : _a2.postMessage(message, "*");
+    });
+    window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate.bind(null, props2, state2, showContentProps2, elementRef2));
+  }, "EnableEditor_component_useOn_Qs8c0yql2i0", [
+    elementRef,
+    props,
+    showContentProps,
+    state
+  ]));
+  qwik.useOn("initpreviewingbldr", /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
+    const [elementRef2, props2, showContentProps2, state2] = qwik.useLexicalScope();
+    const searchParams = new URL(location.href).searchParams;
+    const searchParamPreviewModel = searchParams.get("builder.preview");
+    const searchParamPreviewId = searchParams.get(`builder.overrides.${searchParamPreviewModel}`);
+    const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
+    if (searchParamPreviewModel === props2.model && previewApiKey === props2.apiKey && (!props2.content || searchParamPreviewId === props2.content.id))
+      index.fetchOneEntry({
+        model: props2.model,
+        apiKey: props2.apiKey,
+        apiVersion: props2.builderContextSignal.apiVersion
+      }).then((content) => {
+        if (content)
+          mergeNewContent(props2, state2, showContentProps2, elementRef2, content);
+      });
+  }, "EnableEditor_component_useOn_1_F94YipmknvI", [
+    elementRef,
+    props,
+    showContentProps,
+    state
+  ]));
+  qwik.useOn("qvisible", /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
+    var _a2, _b2, _c, _d;
+    if (isBrowser.isBrowser()) {
+      if (isEditing.isEditing()) {
+        if (element)
+          element.dispatchEvent(new CustomEvent("initeditingbldr"));
+      }
+      const shouldTrackImpression = ((_a2 = element.attributes.getNamedItem("shouldTrack")) == null ? void 0 : _a2.value) === "true";
+      if (shouldTrackImpression) {
+        const variationId = (_b2 = element.attributes.getNamedItem("variationId")) == null ? void 0 : _b2.value;
+        const contentId = (_c = element.attributes.getNamedItem("contentId")) == null ? void 0 : _c.value;
+        const apiKeyProp = (_d = element.attributes.getNamedItem("apiKey")) == null ? void 0 : _d.value;
+        index$1._track({
+          type: "impression",
+          canTrack: true,
+          contentId,
+          apiKey: apiKeyProp,
+          variationId: variationId !== contentId ? variationId : void 0
+        });
+      }
+      if (isPreviewing.isPreviewing() && !isEditing.isEditing()) {
+        if (element)
+          element.dispatchEvent(new CustomEvent("initpreviewingbldr"));
+      }
+    }
+  }, "EnableEditor_component_useOn_2_FyR0YPSlJlw"));
+  qwik.useContextProvider(builder_context, props.builderContextSignal);
+  qwik.useTaskQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [elementRef2, props2, showContentProps2, state2] = qwik.useLexicalScope();
+    if (!props2.apiKey)
+      logger.logger.error("No API key provided to `Content` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
+    evaluateJsCode(props2);
+    runHttpRequests(props2, state2, showContentProps2, elementRef2);
+    emitStateUpdate(props2);
+  }, "EnableEditor_component_useTask_Nb2VI04qp0M", [
+    elementRef,
+    props,
+    showContentProps,
+    state
+  ]));
+  qwik.useTaskQrl(/* @__PURE__ */ qwik.inlinedQrl(({ track }) => {
+    const [elementRef2, props2, showContentProps2, state2] = qwik.useLexicalScope();
+    track(() => props2.content);
+    if (props2.content)
+      mergeNewContent(props2, state2, showContentProps2, elementRef2, props2.content);
+  }, "EnableEditor_component_useTask_1_m0y1Z9vk4eQ", [
+    elementRef,
+    props,
+    showContentProps,
+    state
+  ]));
+  qwik.useTaskQrl(/* @__PURE__ */ qwik.inlinedQrl(({ track }) => {
+    const [elementRef2, props2, showContentProps2, state2] = qwik.useLexicalScope();
+    track(() => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = props2.builderContextSignal.content) == null ? void 0 : _a2.data) == null ? void 0 : _b2.jsCode;
+    });
+    evaluateJsCode(props2);
+  }, "EnableEditor_component_useTask_2_xVyv0tDqZLs", [
+    elementRef,
+    props,
+    showContentProps,
+    state
+  ]));
+  qwik.useTaskQrl(/* @__PURE__ */ qwik.inlinedQrl(({ track }) => {
+    const [elementRef2, props2, showContentProps2, state2] = qwik.useLexicalScope();
+    track(() => {
+      var _a2, _b2;
+      return (_b2 = (_a2 = props2.builderContextSignal.content) == null ? void 0 : _a2.data) == null ? void 0 : _b2.httpRequests;
+    });
+    runHttpRequests(props2, state2, showContentProps2, elementRef2);
+  }, "EnableEditor_component_useTask_3_bQ0e5LHZwWE", [
+    elementRef,
+    props,
+    showContentProps,
+    state
+  ]));
+  qwik.useTaskQrl(/* @__PURE__ */ qwik.inlinedQrl(({ track }) => {
+    const [elementRef2, props2, showContentProps2, state2] = qwik.useLexicalScope();
+    track(() => props2.builderContextSignal.rootState);
+    emitStateUpdate(props2);
+  }, "EnableEditor_component_useTask_4_moHYZG8uNVU", [
+    elementRef,
+    props,
+    showContentProps,
+    state
+  ]));
+  qwik.useTaskQrl(/* @__PURE__ */ qwik.inlinedQrl(({ track }) => {
+    const [elementRef2, props2, showContentProps2, state2] = qwik.useLexicalScope();
+    track(() => props2.data);
+    if (props2.data)
+      mergeNewRootState(props2, state2, showContentProps2, elementRef2, props2.data);
+  }, "EnableEditor_component_useTask_5_24QxS0r0KF8", [
+    elementRef,
+    props,
+    showContentProps,
+    state
+  ]));
+  qwik.useTaskQrl(/* @__PURE__ */ qwik.inlinedQrl(({ track }) => {
+    const [elementRef2, props2, showContentProps2, state2] = qwik.useLexicalScope();
+    track(() => props2.locale);
+    if (props2.locale)
+      mergeNewRootState(props2, state2, showContentProps2, elementRef2, {
+        locale: props2.locale
+      });
+  }, "EnableEditor_component_useTask_6_0CaFTUOgv08", [
+    elementRef,
+    props,
+    showContentProps,
+    state
+  ]));
+  return /* @__PURE__ */ qwik._jsxC(jsxRuntime.Fragment, {
+    children: props.builderContextSignal.content ? /* @__PURE__ */ qwik._jsxC(state.ContentWrapper, {
+      get apiKey() {
+        return props.apiKey;
+      },
+      get contentId() {
+        var _a2;
+        return (_a2 = props.builderContextSignal.content) == null ? void 0 : _a2.id;
+      },
+      get variationId() {
+        var _a2;
+        return (_a2 = props.builderContextSignal.content) == null ? void 0 : _a2.testVariationId;
+      },
+      onClick$: /* @__PURE__ */ qwik.inlinedQrl((event) => {
+        const [elementRef2, props2, showContentProps2, state2] = qwik.useLexicalScope();
+        return onClick(props2, state2, showContentProps2, elementRef2, event);
+      }, "EnableEditor_component__Fragment_onClick_b4nYT3DrjEk", [
+        elementRef,
+        props,
+        showContentProps,
+        state
+      ]),
+      ref: elementRef,
+      shouldTrack: String(props.builderContextSignal.content && canTrack.getDefaultCanTrack(props.canTrack)),
+      get "builder-content-id"() {
+        var _a2;
+        return (_a2 = props.builderContextSignal.content) == null ? void 0 : _a2.id;
+      },
+      get "builder-model"() {
+        return props.model;
+      },
+      ...showContentProps.value,
+      ...props.contentWrapperProps,
+      children: /* @__PURE__ */ qwik._jsxC(qwik.Slot, null, 3, "06_0"),
+      class: styles_helpers.getWrapperClassName(((_a = props.content) == null ? void 0 : _a.testVariationId) || ((_b = props.content) == null ? void 0 : _b.id)),
+      [qwik._IMMUTABLE]: {
+        apiKey: qwik._fnSignal((p0) => p0.apiKey, [
+          props
+        ], "p0.apiKey"),
+        "builder-content-id": qwik._fnSignal((p0) => {
+          var _a2;
+          return (_a2 = p0.builderContextSignal.content) == null ? void 0 : _a2.id;
+        }, [
+          props
+        ], "p0.builderContextSignal.content?.id"),
+        "builder-model": qwik._fnSignal((p0) => p0.model, [
+          props
+        ], "p0.model"),
+        contentId: qwik._fnSignal((p0) => {
+          var _a2;
+          return (_a2 = p0.builderContextSignal.content) == null ? void 0 : _a2.id;
+        }, [
+          props
+        ], "p0.builderContextSignal.content?.id"),
+        ref: qwik._IMMUTABLE,
+        variationId: qwik._fnSignal((p0) => {
+          var _a2;
+          return (_a2 = p0.builderContextSignal.content) == null ? void 0 : _a2.testVariationId;
+        }, [
+          props
+        ], "p0.builderContextSignal.content?.testVariationId")
+      }
+    }, 0, "06_1") : null
+  }, 1, "06_2");
+}, "EnableEditor_component_ko1mO8oaj8k"));
+exports.EnableEditor = EnableEditor;
+exports.default = EnableEditor;
+exports.emitStateUpdate = emitStateUpdate;
+exports.evaluateJsCode = evaluateJsCode;
+exports.mergeNewContent = mergeNewContent;
+exports.mergeNewRootState = mergeNewRootState;
+exports.onClick = onClick;
+exports.processMessage = processMessage;
+exports.runHttpRequests = runHttpRequests;