@wordpress/server-side-render/build/server-side-render.js

The component used with WordPress to server-side render a preview of dynamic blocks to display in the editor.

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/server-side-render/src/server-side-render.js
var server_side_render_exports = {};
__export(server_side_render_exports, {
  ServerSideRender: () => ServerSideRender,
  ServerSideRenderWithPostId: () => ServerSideRenderWithPostId
});
module.exports = __toCommonJS(server_side_render_exports);
var import_element = require("@wordpress/element");
var import_i18n = require("@wordpress/i18n");
var import_components = require("@wordpress/components");
var import_data = require("@wordpress/data");
var import_hook = require("./hook");
var import_jsx_runtime = require("react/jsx-runtime");
var EMPTY_OBJECT = {};
function DefaultEmptyResponsePlaceholder({ className }) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Placeholder, { className, children: (0, import_i18n.__)("Block rendered as empty.") });
}
function DefaultErrorResponsePlaceholder({ message, className }) {
  const errorMessage = (0, import_i18n.sprintf)(
    // translators: %s: error message describing the problem
    (0, import_i18n.__)("Error loading block: %s"),
    message
  );
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Placeholder, { className, children: errorMessage });
}
function DefaultLoadingResponsePlaceholder({ children }) {
  const [showLoader, setShowLoader] = (0, import_element.useState)(false);
  (0, import_element.useEffect)(() => {
    const timeout = setTimeout(() => {
      setShowLoader(true);
    }, 1e3);
    return () => clearTimeout(timeout);
  }, []);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative" }, children: [
    showLoader && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      "div",
      {
        style: {
          position: "absolute",
          top: "50%",
          left: "50%",
          marginTop: "-9px",
          marginLeft: "-9px"
        },
        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {})
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { opacity: showLoader ? "0.3" : 1 }, children })
  ] });
}
function ServerSideRender(props) {
  const prevContentRef = (0, import_element.useRef)("");
  const {
    className,
    EmptyResponsePlaceholder = DefaultEmptyResponsePlaceholder,
    ErrorResponsePlaceholder = DefaultErrorResponsePlaceholder,
    LoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,
    ...restProps
  } = props;
  const { content, status, error } = (0, import_hook.useServerSideRender)(restProps);
  (0, import_element.useEffect)(() => {
    if (content) {
      prevContentRef.current = content;
    }
  }, [content]);
  if (status === "loading") {
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingResponsePlaceholder, { ...props, children: !!prevContentRef.current && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_element.RawHTML, { className, children: prevContentRef.current }) });
  }
  if (status === "success" && !content) {
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyResponsePlaceholder, { ...props });
  }
  if (status === "error") {
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorResponsePlaceholder, { message: error, ...props });
  }
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_element.RawHTML, { className, children: content });
}
function ServerSideRenderWithPostId({
  urlQueryArgs = EMPTY_OBJECT,
  ...props
}) {
  const currentPostId = (0, import_data.useSelect)((select) => {
    const postId = select("core/editor")?.getCurrentPostId();
    return postId && typeof postId === "number" ? postId : null;
  }, []);
  const newUrlQueryArgs = (0, import_element.useMemo)(() => {
    if (!currentPostId) {
      return urlQueryArgs;
    }
    return {
      post_id: currentPostId,
      ...urlQueryArgs
    };
  }, [currentPostId, urlQueryArgs]);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ServerSideRender, { urlQueryArgs: newUrlQueryArgs, ...props });
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  ServerSideRender,
  ServerSideRenderWithPostId
});
//# sourceMappingURL=server-side-render.js.map