@prismetic/next-preview-core 1.0.0 → 1.0.2

package/dist/index.d.mts

@@ -0,0 +1,41 @@
+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.
+ */
+declare function PreviewProviders({ children, staleTime }: {
+    children: React.ReactNode;
+    staleTime?: number;
+}): 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,41 @@
+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.
+ */
+declare function PreviewProviders({ children, staleTime }: {
+    children: React.ReactNode;
+    staleTime?: number;
+}): 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,71 @@
+"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 }) {
+  const [queryClient] = (0, import_react.useState)(
+    () => new import_react_query.QueryClient({
+      defaultOptions: {
+        queries: {
+          staleTime,
+          refetchOnWindowFocus: false,
+          retry: 1
+        }
+      }
+    })
+  );
+  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", { 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,44 @@
+"use client";
+
+// src/PreviewProviders.tsx
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function PreviewProviders({ children, staleTime = 5 * 60 * 1e3 }) {
+  const [queryClient] = useState(
+    () => new QueryClient({
+      defaultOptions: {
+        queries: {
+          staleTime,
+          refetchOnWindowFocus: false,
+          retry: 1
+        }
+      }
+    })
+  );
+  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", { children: "Page not found" });
+    }
+    return /* @__PURE__ */ jsx2(WrappedComponent, { ...props, ...data });
+  };
+}
+export {
+  PreviewProviders,
+  withLivePreview
+};

package/package.json

@@ -1,10 +1,16 @@
 {
   "name": "@prismetic/next-preview-core",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Hybrid static/preview architecture for Next.js + Strapi projects",
-  "main": "./src/index.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./src/index.ts"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
   },
   "keywords": [
     "next.js",
@@ -12,9 +18,19 @@
     "preview",
     "static"
   ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
   "license": "MIT",
   "peerDependencies": {
-    "react": ">=18",
-    "@tanstack/react-query": ">=5"
+    "@tanstack/react-query": ">=5",
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/node": "^25.3.0",
+    "@types/react": "^19.2.14",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
   }
-}
+}

package/src/PreviewProviders.tsx

@@ -1,3 +1,4 @@
+
 "use client";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -12,15 +13,24 @@ import { useState } from "react";
  * 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.
  */
-export function PreviewProviders({ children, staleTime = 5 * 60 * 1000 }) {
+export function PreviewProviders({
+  children,
+  staleTime = 5 * 60 * 1000,
+  refetchOnWindowFocus = false,
+}: {
+  children: React.ReactNode;
+  staleTime?: number;
+  refetchOnWindowFocus?: boolean;
+}) {
   const [queryClient] = useState(
     () =>
       new QueryClient({
         defaultOptions: {
           queries: {
             staleTime,
-            refetchOnWindowFocus: false,
+            refetchOnWindowFocus,
             retry: 1,
           },
         },

package/src/withLivePreview.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useQuery } from "@tanstack/react-query";
+import React from "react";
 
 /**
  * A generic Higher-Order Component for Preview Mode data fetching.
@@ -22,8 +23,12 @@ import { useQuery } from "@tanstack/react-query";
  *   ({ locale }) => ["homepage", locale]
  * );
  */
-export function withLivePreview(WrappedComponent, fetcherFn, cacheKeyGenerator) {
-  return function PreviewComponent(props) {
+export function withLivePreview<P extends object>(
+  WrappedComponent: React.ComponentType<P>,
+  fetcherFn: (props: P) => Promise<any>,
+  cacheKeyGenerator: (props: P) => any[]
+) {
+  return function PreviewComponent(props: P) {
     const queryKey = cacheKeyGenerator(props);
 
     const { data, isLoading } = useQuery({

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "module": "esnext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "strict": true,
+    "jsx": "react-jsx",
+    "declaration": true,
+    "baseUrl": "."
+  },
+  "include": ["src/**/*"]
+}

package/tsup.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  dts: true,
+  clean: true,
+  external: ["react", "react-dom", "@tanstack/react-query"],
+  esbuildOptions(options) {
+    // Force Next.js App Router client directive on the output bundles
+    options.banner = {
+      js: '"use client";',
+    };
+  },
+});