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

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

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