@prismetic/next-preview-core 1.0.8 → 1.0.14

package/README.md

@@ -88,7 +88,10 @@ export default async function LocaleHomePage({ params }) {
 ```
 
 ## Deployment
+```
+npm login
 npm run build && npm version patch && npm publish --access public
+```
 
 ## Build Commands
 

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@prismetic/next-preview-core",
-  "version": "1.0.8",
+  "version": "1.0.14",
   "description": "Hybrid static/preview architecture for Next.js + Strapi projects",
+  "author": "Prismetic Group FZ LLC",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/withLivePreview.tsx

@@ -38,14 +38,35 @@ export function withLivePreview<P extends object>(
 
     if (isLoading) {
       return (
-        <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center" }}>
+        <div
+          style={{
+            minHeight: "100vh",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
           Loading preview...
         </div>
       );
     }
 
     if (!data) {
-      return <div>Page not found</div>;
+      return (
+        <div
+          style={{
+            position: "fixed",
+            height: "100vh",
+            background: "white",
+            zIndex: 10000,
+            width: "100%",
+            display: "grid",
+            placeContent: "center",
+          }}
+        >
+          Page not found
+        </div>
+      );
     }
 
     // Props spread first, then fetched data takes priority

package/dist/index.d.mts

@@ -1,43 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,89 +0,0 @@
-"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", { 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

@@ -1,62 +0,0 @@
-"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", { children: "Page not found" });
-    }
-    return /* @__PURE__ */ jsx2(WrappedComponent, { ...props, ...data });
-  };
-}
-export {
-  PreviewProviders,
-  withLivePreview
-};