@prismetic/next-preview-core 1.0.14 → 1.0.15

package/dist/index.d.mts

@@ -0,0 +1,43 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
+
+/**
+ * React Query provider for Preview Mode.
+ * Part of @prismetic/next-preview-core.
+ *
+ * Wrap the preview build's component tree in this provider to enable
+ * client-side caching of Strapi data. Layout data (Navbar, Footer)
+ * fetched once will be served from the cache on subsequent page navigations.
+ *
+ * @param {number} [staleTime=300000] - How long (ms) cached data is considered fresh. Default: 5 minutes.
+ * @param {boolean} [refetchOnWindowFocus=false] - Whether to refetch when the browser tab regains focus. Set to true in preview to auto-refresh after editing in Strapi.
+ */
+declare function PreviewProviders({ children, staleTime, refetchOnWindowFocus, }: {
+    children: React.ReactNode;
+    staleTime?: number;
+    refetchOnWindowFocus?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * A generic Higher-Order Component for Preview Mode data fetching.
+ * Part of @prismetic/next-preview-core.
+ *
+ * @param {React.Component} WrappedComponent - The pure UI component to render once data is fetched.
+ * @param {Function} fetcherFn - An async function that fetches data (receives component props as argument).
+ * @param {Function} cacheKeyGenerator - A function that returns a React Query queryKey array (receives component props).
+ *
+ * @example
+ * // In your project's preview wrapper:
+ * import { withLivePreview } from "@prismetic/next-preview-core";
+ * import HomeUI from "../HomeUI";
+ * import { fetchHomepageContent } from "@/api/queryModules";
+ *
+ * export const PreviewHome = withLivePreview(
+ *   HomeUI,
+ *   ({ locale }) => fetchHomepageContent(locale),
+ *   ({ locale }) => ["homepage", locale]
+ * );
+ */
+declare function withLivePreview<P extends object>(WrappedComponent: React$1.ComponentType<P>, fetcherFn: (props: P) => Promise<any>, cacheKeyGenerator: (props: P) => any[]): (props: P) => react_jsx_runtime.JSX.Element;
+
+export { PreviewProviders, withLivePreview };

package/dist/index.d.ts

@@ -0,0 +1,43 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
+
+/**
+ * React Query provider for Preview Mode.
+ * Part of @prismetic/next-preview-core.
+ *
+ * Wrap the preview build's component tree in this provider to enable
+ * client-side caching of Strapi data. Layout data (Navbar, Footer)
+ * fetched once will be served from the cache on subsequent page navigations.
+ *
+ * @param {number} [staleTime=300000] - How long (ms) cached data is considered fresh. Default: 5 minutes.
+ * @param {boolean} [refetchOnWindowFocus=false] - Whether to refetch when the browser tab regains focus. Set to true in preview to auto-refresh after editing in Strapi.
+ */
+declare function PreviewProviders({ children, staleTime, refetchOnWindowFocus, }: {
+    children: React.ReactNode;
+    staleTime?: number;
+    refetchOnWindowFocus?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * A generic Higher-Order Component for Preview Mode data fetching.
+ * Part of @prismetic/next-preview-core.
+ *
+ * @param {React.Component} WrappedComponent - The pure UI component to render once data is fetched.
+ * @param {Function} fetcherFn - An async function that fetches data (receives component props as argument).
+ * @param {Function} cacheKeyGenerator - A function that returns a React Query queryKey array (receives component props).
+ *
+ * @example
+ * // In your project's preview wrapper:
+ * import { withLivePreview } from "@prismetic/next-preview-core";
+ * import HomeUI from "../HomeUI";
+ * import { fetchHomepageContent } from "@/api/queryModules";
+ *
+ * export const PreviewHome = withLivePreview(
+ *   HomeUI,
+ *   ({ locale }) => fetchHomepageContent(locale),
+ *   ({ locale }) => ["homepage", locale]
+ * );
+ */
+declare function withLivePreview<P extends object>(WrappedComponent: React$1.ComponentType<P>, fetcherFn: (props: P) => Promise<any>, cacheKeyGenerator: (props: P) => any[]): (props: P) => react_jsx_runtime.JSX.Element;
+
+export { PreviewProviders, withLivePreview };

package/dist/index.js

@@ -0,0 +1,114 @@
+"use client";
+"use strict";
+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);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  PreviewProviders: () => PreviewProviders,
+  withLivePreview: () => withLivePreview
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/PreviewProviders.tsx
+var import_react_query = require("@tanstack/react-query");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function PreviewProviders({
+  children,
+  staleTime = 5 * 60 * 1e3,
+  refetchOnWindowFocus = false
+}) {
+  const [queryClient] = (0, import_react.useState)(
+    () => new import_react_query.QueryClient({
+      defaultOptions: {
+        queries: {
+          staleTime,
+          refetchOnWindowFocus,
+          retry: 1
+        }
+      }
+    })
+  );
+  (0, import_react.useEffect)(() => {
+    if (!refetchOnWindowFocus) return;
+    const handleFocus = () => {
+      if (document.visibilityState === "visible") {
+        queryClient.invalidateQueries({ refetchType: "active" });
+      }
+    };
+    document.addEventListener("visibilitychange", handleFocus);
+    window.addEventListener("focus", handleFocus);
+    return () => {
+      document.removeEventListener("visibilitychange", handleFocus);
+      window.removeEventListener("focus", handleFocus);
+    };
+  }, [queryClient, refetchOnWindowFocus]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children });
+}
+
+// src/withLivePreview.tsx
+var import_react_query2 = require("@tanstack/react-query");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function withLivePreview(WrappedComponent, fetcherFn, cacheKeyGenerator) {
+  return function PreviewComponent(props) {
+    const queryKey = cacheKeyGenerator(props);
+    const { data, isLoading } = (0, import_react_query2.useQuery)({
+      queryKey,
+      queryFn: () => fetcherFn(props)
+    });
+    if (isLoading) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          style: {
+            minHeight: "100vh",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: "Loading preview..."
+        }
+      );
+    }
+    if (!data) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            height: "100vh",
+            background: "white",
+            zIndex: 1e4,
+            width: "100%",
+            display: "grid",
+            placeContent: "center"
+          },
+          children: "Page not found"
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WrappedComponent, { ...props, ...data });
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PreviewProviders,
+  withLivePreview
+});

package/dist/index.mjs

@@ -0,0 +1,87 @@
+"use client";
+
+// src/PreviewProviders.tsx
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+function PreviewProviders({
+  children,
+  staleTime = 5 * 60 * 1e3,
+  refetchOnWindowFocus = false
+}) {
+  const [queryClient] = useState(
+    () => new QueryClient({
+      defaultOptions: {
+        queries: {
+          staleTime,
+          refetchOnWindowFocus,
+          retry: 1
+        }
+      }
+    })
+  );
+  useEffect(() => {
+    if (!refetchOnWindowFocus) return;
+    const handleFocus = () => {
+      if (document.visibilityState === "visible") {
+        queryClient.invalidateQueries({ refetchType: "active" });
+      }
+    };
+    document.addEventListener("visibilitychange", handleFocus);
+    window.addEventListener("focus", handleFocus);
+    return () => {
+      document.removeEventListener("visibilitychange", handleFocus);
+      window.removeEventListener("focus", handleFocus);
+    };
+  }, [queryClient, refetchOnWindowFocus]);
+  return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children });
+}
+
+// src/withLivePreview.tsx
+import { useQuery } from "@tanstack/react-query";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function withLivePreview(WrappedComponent, fetcherFn, cacheKeyGenerator) {
+  return function PreviewComponent(props) {
+    const queryKey = cacheKeyGenerator(props);
+    const { data, isLoading } = useQuery({
+      queryKey,
+      queryFn: () => fetcherFn(props)
+    });
+    if (isLoading) {
+      return /* @__PURE__ */ jsx2(
+        "div",
+        {
+          style: {
+            minHeight: "100vh",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: "Loading preview..."
+        }
+      );
+    }
+    if (!data) {
+      return /* @__PURE__ */ jsx2(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            height: "100vh",
+            background: "white",
+            zIndex: 1e4,
+            width: "100%",
+            display: "grid",
+            placeContent: "center"
+          },
+          children: "Page not found"
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx2(WrappedComponent, { ...props, ...data });
+  };
+}
+export {
+  PreviewProviders,
+  withLivePreview
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prismetic/next-preview-core",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "Hybrid static/preview architecture for Next.js + Strapi projects",
   "author": "Prismetic Group FZ LLC",
   "main": "./dist/index.js",