next-cache-toolbar 0.1.3 → 0.2.1

package/dist/cjs/{cache-entry-client-Cg2-NRrZ.js → cache-entry-client-C0CjMKC5.js}

@@ -5,7 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var reactSlot = require('@radix-ui/react-slot');
-var dialogClient = require('./dialog-client-AZHsTC7l.js');
+var dialogClient = require('./dialog-client-ChHtZVMD.js');
 var lucideReact = require('lucide-react');
 var JsonView = require('react18-json-view');
 
@@ -143,18 +143,16 @@ const Button = /*#__PURE__*/ React__namespace.forwardRef(({ className, variant,
 });
 Button.displayName = "Button";
 
+const getEntryRevalidateLeft = (cacheEntry)=>{
+    if (!cacheEntry.data?.headers.date || !cacheEntry.revalidate) {
+        return;
+    }
+    const cacheEntryDate = new Date(cacheEntry.data?.headers.date);
+    const msDiff = new Date().getTime() - cacheEntryDate.getTime();
+    return Math.floor(cacheEntry.revalidate - msDiff / 1000);
+};
 const CacheEntry = (props)=>{
-    const cacheEntryRevalidateLeft = React.useMemo(()=>{
-        if (!props.cacheEntry.data?.headers.date || !props.cacheEntry.revalidate) {
-            return;
-        }
-        const cacheEntryDate = new Date(props.cacheEntry.data?.headers.date);
-        const msDiff = new Date().getTime() - cacheEntryDate.getTime();
-        return Math.floor(props.cacheEntry.revalidate - msDiff / 1000);
-    }, [
-        props.cacheEntry.data?.headers.date,
-        props.cacheEntry.revalidate
-    ]);
+    const cacheEntryRevalidateLeft = getEntryRevalidateLeft(props.cacheEntry);
     const isStale = cacheEntryRevalidateLeft ? cacheEntryRevalidateLeft < 0 : false;
     return /*#__PURE__*/ jsxRuntime.jsxs(TableRow, {
         children: [
@@ -209,6 +207,7 @@ exports.Button = Button;
 exports.CacheEntry = CacheEntry;
 exports.Table = Table;
 exports.TableBody = TableBody;
+exports.TableCell = TableCell;
 exports.TableHead = TableHead;
 exports.TableHeader = TableHeader;
 exports.TableRow = TableRow;

package/dist/cjs/cache-panel-context-client-FIUru-uB.js

@@ -0,0 +1,115 @@
+'use client';
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const CachePanelContext = /*#__PURE__*/ React.createContext({
+    entries: [],
+    isOpen: false,
+    setEntries: ()=>{},
+    toggleOpen: ()=>{},
+    setSorting: ()=>{},
+    addFilter: ()=>{},
+    clearFilter: ()=>{}
+});
+const sortCacheEntryByKey = (key, a, b)=>{
+    switch(key){
+        case "url":
+            if (!a.data || !b.data) {
+                return 0;
+            }
+            return a.data.url.localeCompare(b.data.url);
+        case "revalidate":
+            return (a.revalidate ?? 0) - (b.revalidate ?? 0);
+        case "tags":
+            if (a.tags.length === 0 || b.tags.length === 0) {
+                return 0;
+            }
+            return a.tags[0]?.localeCompare(b.tags[0] ?? "") ?? 0;
+        case "timestamp":
+            {
+                if (!a.data?.headers.date || !b.data?.headers.date) {
+                    return 0;
+                }
+                return new Date(b.data.headers.date).getTime() - new Date(a.data.headers.date).getTime();
+            }
+    }
+};
+const useCachePanelContext = ()=>React__default.default.useContext(CachePanelContext);
+const CachePanelContextProvider = (props)=>{
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [entries, setEntries] = React.useState(props.entries);
+    const [filters, setFilters] = React.useState();
+    const [sorting, setSorting] = React.useState(undefined);
+    const toggleOpen = ()=>{
+        setIsOpen(!isOpen);
+    };
+    const addFilter = (key, value)=>{
+        setFilters((prev)=>{
+            if (!prev) {
+                return {
+                    [key]: value
+                };
+            }
+            return {
+                ...prev,
+                [key]: value
+            };
+        });
+    };
+    const clearFilter = (key)=>{
+        setFilters((prev)=>{
+            if (!prev) {
+                return;
+            }
+            delete prev[key];
+            return prev;
+        });
+    };
+    const derivedEntries = React.useMemo(()=>{
+        let copiedEntries = entries.slice();
+        if (filters) {
+            copiedEntries = copiedEntries.filter((entry)=>{
+                const { tags: tagsFilter, url: urlFilter } = filters;
+                if (tagsFilter && !entry[1].tags.some((tag)=>tag.match(tagsFilter))) {
+                    return false;
+                }
+                if (urlFilter && !entry[1].data.url.match(urlFilter)) {
+                    return false;
+                }
+                return true;
+            });
+        }
+        if (!sorting) {
+            return copiedEntries;
+        }
+        const { key, direction } = sorting;
+        return copiedEntries.toSorted((a, b)=>{
+            return sortCacheEntryByKey(key, a[1], b[1]) * (direction === "asc" ? 1 : -1);
+        });
+    }, [
+        entries,
+        sorting,
+        filters
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(CachePanelContext.Provider, {
+        value: {
+            isOpen,
+            toggleOpen,
+            setSorting,
+            sorting,
+            entries: derivedEntries,
+            setEntries,
+            filters,
+            addFilter,
+            clearFilter
+        },
+        children: props.children
+    });
+};
+
+exports.CachePanelContextProvider = CachePanelContextProvider;
+exports.useCachePanelContext = useCachePanelContext;

package/dist/cjs/cache-panel-head-client-Cs4uyFh7.js

@@ -0,0 +1,139 @@
+'use client';
+var jsxRuntime = require('react/jsx-runtime');
+var cacheEntryClient = require('./cache-entry-client-C0CjMKC5.js');
+var React = require('react');
+var lucideReact = require('lucide-react');
+var cachePanelContextClient = require('./cache-panel-context-client-FIUru-uB.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return n;
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const Input = /*#__PURE__*/ React__namespace.forwardRef(({ className, type, ...props }, ref)=>{
+    return /*#__PURE__*/ jsxRuntime.jsx("input", {
+        type: type,
+        className: cacheEntryClient.cn("nct-flex nct-h-10 nct-w-full nct-rounded-md nct-border nct-border-input nct-bg-background nct-px-3 nct-py-2 nct-text-sm nct-ring-offset-background file:nct-border-0 file:nct-bg-transparent file:nct-text-sm file:nct-font-medium placeholder:nct-text-muted-foreground focus-visible:nct-outline-none focus-visible:nct-ring-2 focus-visible:nct-ring-ring focus-visible:nct-ring-offset-2 disabled:nct-cursor-not-allowed disabled:nct-opacity-50", className),
+        ref: ref,
+        ...props
+    });
+});
+Input.displayName = "Input";
+
+const CachePanelHead = ({ sortingProperty, children, className, withFilter = false, ...props })=>{
+    const { setSorting, sorting, filters, addFilter, clearFilter } = cachePanelContextClient.useCachePanelContext();
+    const [filterInputVisible, setFilterInputVisible] = React.useState(false);
+    const inputRef = React.useCallback((node)=>{
+        if (!node) {
+            return;
+        }
+        node.focus();
+    }, []);
+    const sortingDirection = React.useMemo(()=>{
+        if (!sorting || sorting.key !== sortingProperty) {
+            return;
+        }
+        return sorting.direction;
+    }, [
+        sorting,
+        sortingProperty
+    ]);
+    const filterValue = React.useMemo(()=>{
+        if (sortingProperty !== "url" && sortingProperty !== "tags") {
+            return;
+        }
+        return filters?.[sortingProperty] ?? "";
+    }, [
+        sortingProperty,
+        filters
+    ]);
+    const onHeadClick = ()=>{
+        if (sorting && sorting.key === sortingProperty) {
+            setSorting({
+                key: sortingProperty,
+                direction: sorting.direction === "asc" ? "desc" : "asc"
+            });
+        } else {
+            setSorting({
+                key: sortingProperty,
+                direction: "asc"
+            });
+        }
+    };
+    const onFilterInputKeyDown = (event)=>{
+        if (sortingProperty !== "url" && sortingProperty !== "tags") {
+            return;
+        }
+        // clear value on esc
+        if (event.key === "Escape") {
+            clearFilter(sortingProperty);
+            setFilterInputVisible(false);
+        }
+    };
+    const onFilterInputChange = (event)=>{
+        if (sortingProperty !== "url" && sortingProperty !== "tags") {
+            return;
+        }
+        addFilter(sortingProperty, event.target.value);
+    };
+    const onFilterInputBlur = (event)=>{
+        if (sortingProperty !== "url" && sortingProperty !== "tags") {
+            return;
+        }
+        if (event.target.value === "") {
+            setFilterInputVisible(false);
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(cacheEntryClient.TableHead, {
+        className: cacheEntryClient.cn("group", className),
+        ...props,
+        children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+            className: cacheEntryClient.cn("nct-flex nct-items-center nct-gap-2 nct-py-2", sorting?.key === sortingProperty && "nct-underline"),
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    onClick: onHeadClick,
+                    onKeyDown: onHeadClick,
+                    children: children
+                }),
+                sortingDirection === "asc" && /*#__PURE__*/ jsxRuntime.jsx(lucideReact.ArrowDownAZIcon, {}),
+                sortingDirection === "desc" && /*#__PURE__*/ jsxRuntime.jsx(lucideReact.ArrowUpAZIcon, {}),
+                withFilter && /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                    className: "ml-auto",
+                    children: [
+                        !filterInputVisible && /*#__PURE__*/ jsxRuntime.jsx(cacheEntryClient.Button, {
+                            variant: "ghost",
+                            size: "icon",
+                            className: cacheEntryClient.cn(),
+                            onClick: ()=>setFilterInputVisible(true),
+                            children: /*#__PURE__*/ jsxRuntime.jsx(lucideReact.FilterIcon, {})
+                        }),
+                        filterInputVisible && /*#__PURE__*/ jsxRuntime.jsx(Input, {
+                            onKeyDown: onFilterInputKeyDown,
+                            value: filterValue,
+                            onChange: onFilterInputChange,
+                            onBlur: onFilterInputBlur,
+                            ref: inputRef
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+exports.CachePanelHead = CachePanelHead;

package/dist/cjs/cache-panel-table-client-9aBv-MjJ.js

@@ -0,0 +1,22 @@
+'use client';
+var jsxRuntime = require('react/jsx-runtime');
+var cacheEntryClient = require('./cache-entry-client-C0CjMKC5.js');
+var cachePanelContextClient = require('./cache-panel-context-client-FIUru-uB.js');
+
+const CachePanelTable = ()=>{
+    const { entries } = cachePanelContextClient.useCachePanelContext();
+    return /*#__PURE__*/ jsxRuntime.jsxs(cacheEntryClient.TableBody, {
+        children: [
+            entries.length === 0 && /*#__PURE__*/ jsxRuntime.jsx(cacheEntryClient.TableRow, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(cacheEntryClient.TableCell, {
+                    children: "No cache entries"
+                })
+            }),
+            entries.map(([file, cacheEntry])=>/*#__PURE__*/ jsxRuntime.jsx(cacheEntryClient.CacheEntry, {
+                    cacheEntry: cacheEntry
+                }, file))
+        ]
+    });
+};
+
+exports.CachePanelTable = CachePanelTable;

package/dist/cjs/{cache-panel-trigger-client-ChZncD_2.js → cache-panel-trigger-client-CGeo22Q8.js}

@@ -1,8 +1,8 @@
 'use client';
 var jsxRuntime = require('react/jsx-runtime');
-var cacheEntryClient = require('./cache-entry-client-Cg2-NRrZ.js');
+var cacheEntryClient = require('./cache-entry-client-C0CjMKC5.js');
 require('react');
-var cachePanelContextClient = require('./cache-panel-context-client-B1EgwMzI.js');
+var cachePanelContextClient = require('./cache-panel-context-client-FIUru-uB.js');
 
 function CachePanelTrigger(props) {
     const { toggleOpen } = cachePanelContextClient.useCachePanelContext();

package/dist/cjs/{cache-panel-wrapper-client-DE5QrmN0.js → cache-panel-wrapper-client-puZq7rcV.js}

@@ -1,8 +1,8 @@
 'use client';
 var jsxRuntime = require('react/jsx-runtime');
-var cacheEntryClient = require('./cache-entry-client-Cg2-NRrZ.js');
+var cacheEntryClient = require('./cache-entry-client-C0CjMKC5.js');
 require('react');
-var cachePanelContextClient = require('./cache-panel-context-client-B1EgwMzI.js');
+var cachePanelContextClient = require('./cache-panel-context-client-FIUru-uB.js');
 
 const CacheTable = (props)=>{
     const { isOpen } = cachePanelContextClient.useCachePanelContext();
@@ -10,7 +10,7 @@ const CacheTable = (props)=>{
         return null;
     }
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        className: "nct-fixed nct-bottom-0 nct-inset-x-0 nct-z-50 nct-bg-background nct-overflow-x-auto nct-max-h-[35vh]",
+        className: "nct-fixed nct-bottom-0 nct-inset-x-0 nct-z-50 nct-bg-background nct-overflow-x-auto nct-h-[480px]",
         children: /*#__PURE__*/ jsxRuntime.jsx(cacheEntryClient.Table, {
             children: props.children
         })

package/dist/cjs/cache-refresh-data-client-CrvqEMoX.js

@@ -0,0 +1,48 @@
+'use client';
+var jsxRuntime = require('react/jsx-runtime');
+var getCacheEntriesServer = require('./getCacheEntries-server-DMz68ZTt.js');
+var cacheEntryClient = require('./cache-entry-client-C0CjMKC5.js');
+var lucideReact = require('lucide-react');
+var navigation = require('next/navigation');
+var React = require('react');
+var cachePanelContextClient = require('./cache-panel-context-client-FIUru-uB.js');
+
+function RefreshDataButton({ enabled, interval }) {
+    const { setEntries } = cachePanelContextClient.useCachePanelContext();
+    const [isPending, startTransition] = React.useTransition();
+    const pathname = navigation.usePathname();
+    const refreshData = ()=>{
+        startTransition(async ()=>{
+            const files = await getCacheEntriesServer.getCacheFiles();
+            setEntries(files ?? []);
+        });
+    };
+    React.useEffect(()=>{
+        console.log("pathname changed", pathname);
+        refreshData();
+    }, [
+        pathname
+    ]);
+    React.useEffect(()=>{
+        if (!enabled) {
+            return;
+        }
+        const intervalId = setInterval(refreshData, interval);
+        return ()=>clearInterval(intervalId);
+    }, [
+        enabled,
+        interval
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(cacheEntryClient.Button, {
+        variant: "outline",
+        size: "icon",
+        onClick: refreshData,
+        children: /*#__PURE__*/ jsxRuntime.jsx(lucideReact.Loader2, {
+            className: cacheEntryClient.cn("nct-h-4 nct-w-4", {
+                "nct-animate-spin": isPending
+            })
+        })
+    });
+}
+
+exports.RefreshDataButton = RefreshDataButton;

package/dist/cjs/{dialog-client-AZHsTC7l.js → dialog-client-ChHtZVMD.js}

@@ -3,24 +3,24 @@ var jsxRuntime = require('react/jsx-runtime');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var lucideReact = require('lucide-react');
 var React = require('react');
-var cacheEntryClient = require('./cache-entry-client-Cg2-NRrZ.js');
+var cacheEntryClient = require('./cache-entry-client-C0CjMKC5.js');
 
 function _interopNamespace(e) {
-	if (e && e.__esModule) return e;
-	var n = Object.create(null);
-	if (e) {
-		Object.keys(e).forEach(function (k) {
-			if (k !== 'default') {
-				var d = Object.getOwnPropertyDescriptor(e, k);
-				Object.defineProperty(n, k, d.get ? d : {
-					enumerable: true,
-					get: function () { return e[k]; }
-				});
-			}
-		});
-	}
-	n.default = e;
-	return n;
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return n;
 }
 
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);

package/dist/cjs/getCacheEntries-server-DMz68ZTt.js

@@ -0,0 +1,72 @@
+'use server';
+var zod = require('zod');
+var node_fs = require('node:fs');
+
+const stringToJSONSchema = zod.z.string().transform((str, ctx)=>{
+    try {
+        return JSON.parse(str);
+    } catch (e) {
+        ctx.addIssue({
+            code: "custom",
+            message: "Encoded body is not in JSON format",
+            path: [
+                "data",
+                "body"
+            ]
+        });
+        return zod.z.NEVER;
+    }
+});
+const nextCacheFileSchema = zod.z.object({
+    data: zod.z.object({
+        body: zod.z.string(),
+        headers: zod.z.record(zod.z.string(), zod.z.string()),
+        status: zod.z.number(),
+        url: zod.z.string()
+    }),
+    kind: zod.z.union([
+        zod.z.literal("FETCH"),
+        zod.z.unknown()
+    ]),
+    revalidate: zod.z.number().optional(),
+    tags: zod.z.array(zod.z.string()).optional().default([])
+}).transform((cacheEntry)=>{
+    const body = stringToJSONSchema.parse(atob(cacheEntry.data.body));
+    return {
+        ...cacheEntry,
+        data: {
+            ...cacheEntry.data,
+            body
+        }
+    };
+});
+
+const cachePath = ".next/cache/fetch-cache";
+const getCacheFiles = async ()=>{
+    if (!node_fs.existsSync(cachePath)) {
+        return;
+    }
+    const files = await node_fs.promises.readdir(cachePath);
+    const cacheFiles = new Map();
+    for (const file of files){
+        // ignore tags-manifest file
+        if (file.match(/manifest/)) {
+            continue;
+        }
+        try {
+            const fileContent = await node_fs.promises.readFile(`${cachePath}/${file}`);
+            const cacheEntry = nextCacheFileSchema.parse(JSON.parse(fileContent.toString()));
+            cacheFiles.set(file, cacheEntry);
+        } catch (error) {
+            if (error instanceof zod.ZodError) {
+                const issues = error.issues;
+                console.error(`File ${file} do not match the schema`, issues);
+                continue;
+            }
+            console.error(`Error parsing ${file}`);
+        }
+    }
+    return Array.from(cacheFiles.entries());
+};
+
+exports.getCacheFiles = getCacheFiles;

package/dist/cjs/index.d.ts

@@ -1,5 +1,17 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function NextCacheToolbar(): Promise<react_jsx_runtime.JSX.Element>;
+type Props = {
+    /**
+     * If true, the cache table will automatically refresh when the pathname changes.
+     * @default false
+     */
+    autoRefresh?: boolean;
+    /**
+     * The interval in milliseconds to refresh the cache table.
+     * @default 10000
+     */
+    interval?: number;
+};
+declare function NextCacheToolbar({ autoRefresh, interval, }: Props): Promise<react_jsx_runtime.JSX.Element>;
 
 export { NextCacheToolbar };