@shopify/shop-minis-react/dist/components/MinisContainer.js

React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)

import { jsx as r, jsxs as l } from "react/jsx-runtime";
import { useState as u, useCallback as f, useEffect as p } from "react";
import { useShopActions as v } from "../internal/useShopActions.js";
import { injectMocks as y } from "../mocks.js";
import { ImagePickerProvider as h } from "../providers/ImagePickerProvider.js";
import { ErrorBoundary as E } from "./ErrorBoundary.js";
import { MinisQueryProvider as g } from "../internal/reactQuery/MinisQueryProvider.js";
y();
function N({ children: a }) {
  const [i, n] = u(!1), t = v(), c = f(
    async (o) => {
      try {
        t && t.reportError && await t.reportError(o);
      } catch (e) {
        console.error("Failed to report error to app:", e);
      }
    },
    [t]
  );
  return p(() => {
    const o = () => window.minisSDK ? (n(!0), !0) : !1;
    if (o())
      return;
    const e = (d) => {
      const { type: m } = JSON.parse(d.data);
      m === "MINIS_SDK_READY" && n(!0);
    };
    window.addEventListener("message", e), document.addEventListener("message", e);
    const s = setInterval(() => {
      o() && clearInterval(s);
    }, 100);
    return () => {
      clearInterval(s), window.removeEventListener("message", e), document.removeEventListener("message", e);
    };
  }, []), i ? /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(E, { onError: c, children: /* @__PURE__ */ r(h, { children: a }) }) }) : /* @__PURE__ */ r("div", { className: "h-screen bg-gray-50 flex items-center justify-center", children: /* @__PURE__ */ l("div", { className: "text-center", children: [
    /* @__PURE__ */ r("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-4" }),
    /* @__PURE__ */ r("p", { className: "text-gray-600", children: "Loading..." })
  ] }) });
}
export {
  N as MinisContainer
};
//# sourceMappingURL=MinisContainer.js.map