next-cache-toolbar 0.1.3 → 0.2.0

package/dist/es/{cache-entry-client-CtWrVYTN.js → cache-entry-client-Ceh-eYDl.js}

@@ -2,11 +2,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import * as React from 'react';
-import { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Slot } from '@radix-ui/react-slot';
-import { D as Dialog, a as DialogTrigger, b as DialogContent } from './dialog-client-D5Q_DDEF.js';
+import { D as Dialog, a as DialogTrigger, b as DialogContent } from './dialog-client-C319YNfG.js';
 import { Braces } from 'lucide-react';
 import JsonView from 'react18-json-view';
 
@@ -121,18 +120,16 @@ const Button = /*#__PURE__*/ React.forwardRef(({ className, variant, size, asChi
 });
 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 = 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__*/ jsxs(TableRow, {
         children: [
@@ -183,4 +180,4 @@ const CacheEntry = (props)=>{
     });
 };
 
-export { Button as B, CacheEntry as C, TableHead as T, TableBody as a, Table as b, cn as c, TableHeader as d, TableRow as e };
+export { Button as B, CacheEntry as C, TableHead as T, TableBody as a, TableRow as b, cn as c, TableCell as d, Table as e, TableHeader as f };

package/dist/es/cache-panel-context-client-DCXKayLF.js

@@ -0,0 +1,110 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useState, useMemo, createContext } from 'react';
+
+const CachePanelContext = /*#__PURE__*/ 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.useContext(CachePanelContext);
+const CachePanelContextProvider = (props)=>{
+    const [isOpen, setIsOpen] = useState(false);
+    const [entries, setEntries] = useState(props.entries);
+    const [filters, setFilters] = useState();
+    const [sorting, setSorting] = 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 = 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__*/ jsx(CachePanelContext.Provider, {
+        value: {
+            isOpen,
+            toggleOpen,
+            setSorting,
+            sorting,
+            entries: derivedEntries,
+            setEntries,
+            filters,
+            addFilter,
+            clearFilter
+        },
+        children: props.children
+    });
+};
+
+export { CachePanelContextProvider as C, useCachePanelContext as u };

package/dist/es/cache-panel-head-client-BBfig3xH.js

@@ -0,0 +1,120 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { c as cn, T as TableHead, B as Button } from './cache-entry-client-Ceh-eYDl.js';
+import * as React from 'react';
+import { useState, useCallback, useMemo } from 'react';
+import { ArrowDownAZIcon, ArrowUpAZIcon, FilterIcon } from 'lucide-react';
+import { u as useCachePanelContext } from './cache-panel-context-client-DCXKayLF.js';
+
+const Input = /*#__PURE__*/ React.forwardRef(({ className, type, ...props }, ref)=>{
+    return /*#__PURE__*/ jsx("input", {
+        type: type,
+        className: 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 } = useCachePanelContext();
+    const [filterInputVisible, setFilterInputVisible] = useState(false);
+    const inputRef = useCallback((node)=>{
+        if (!node) {
+            return;
+        }
+        node.focus();
+    }, []);
+    const sortingDirection = useMemo(()=>{
+        if (!sorting || sorting.key !== sortingProperty) {
+            return;
+        }
+        return sorting.direction;
+    }, [
+        sorting,
+        sortingProperty
+    ]);
+    const filterValue = 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__*/ jsx(TableHead, {
+        className: cn("group", className),
+        ...props,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: cn("nct-flex nct-items-center nct-gap-2 nct-py-2", sorting?.key === sortingProperty && "nct-underline"),
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    onClick: onHeadClick,
+                    onKeyDown: onHeadClick,
+                    children: children
+                }),
+                sortingDirection === "asc" && /*#__PURE__*/ jsx(ArrowDownAZIcon, {}),
+                sortingDirection === "desc" && /*#__PURE__*/ jsx(ArrowUpAZIcon, {}),
+                withFilter && /*#__PURE__*/ jsxs("div", {
+                    className: "ml-auto",
+                    children: [
+                        !filterInputVisible && /*#__PURE__*/ jsx(Button, {
+                            variant: "ghost",
+                            size: "icon",
+                            className: cn(),
+                            onClick: ()=>setFilterInputVisible(true),
+                            children: /*#__PURE__*/ jsx(FilterIcon, {})
+                        }),
+                        filterInputVisible && /*#__PURE__*/ jsx(Input, {
+                            onKeyDown: onFilterInputKeyDown,
+                            value: filterValue,
+                            onChange: onFilterInputChange,
+                            onBlur: onFilterInputBlur,
+                            ref: inputRef
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+export { CachePanelHead as C };

package/dist/es/cache-panel-table-client-C9YfopmF.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { a as TableBody, b as TableRow, d as TableCell, C as CacheEntry } from './cache-entry-client-Ceh-eYDl.js';
+import { u as useCachePanelContext } from './cache-panel-context-client-DCXKayLF.js';
+
+const CachePanelTable = ()=>{
+    const { entries } = useCachePanelContext();
+    return /*#__PURE__*/ jsxs(TableBody, {
+        children: [
+            entries.length === 0 && /*#__PURE__*/ jsx(TableRow, {
+                children: /*#__PURE__*/ jsx(TableCell, {
+                    children: "No cache entries"
+                })
+            }),
+            entries.map(([file, cacheEntry])=>/*#__PURE__*/ jsx(CacheEntry, {
+                    cacheEntry: cacheEntry
+                }, file))
+        ]
+    });
+};
+
+export { CachePanelTable as C };

package/dist/es/{cache-panel-trigger-client-GrlxjSO5.js → cache-panel-trigger-client-CGReagL-.js}

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { B as Button } from './cache-entry-client-CtWrVYTN.js';
+import { B as Button } from './cache-entry-client-Ceh-eYDl.js';
 import 'react';
-import { u as useCachePanelContext } from './cache-panel-context-client-D5NKXXpF.js';
+import { u as useCachePanelContext } from './cache-panel-context-client-DCXKayLF.js';
 
 function CachePanelTrigger(props) {
     const { toggleOpen } = useCachePanelContext();

package/dist/es/{cache-panel-wrapper-client-BosTuysv.js → cache-panel-wrapper-client-Cv0HcuJC.js}

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { b as Table } from './cache-entry-client-CtWrVYTN.js';
+import { e as Table } from './cache-entry-client-Ceh-eYDl.js';
 import 'react';
-import { u as useCachePanelContext } from './cache-panel-context-client-D5NKXXpF.js';
+import { u as useCachePanelContext } from './cache-panel-context-client-DCXKayLF.js';
 
 const CacheTable = (props)=>{
     const { isOpen } = useCachePanelContext();

package/dist/es/cache-refresh-data-client-BjsJkQ5H.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { g as getCacheFiles } from './getCacheEntries-server-CgNUCSp3.js';
+import { B as Button, c as cn } from './cache-entry-client-Ceh-eYDl.js';
+import { Loader2 } from 'lucide-react';
+import { usePathname } from 'next/navigation';
+import { useTransition, useEffect } from 'react';
+import { u as useCachePanelContext } from './cache-panel-context-client-DCXKayLF.js';
+
+function RefreshDataButton({ enabled, interval }) {
+    const { setEntries } = useCachePanelContext();
+    const [isPending, startTransition] = useTransition();
+    const pathname = usePathname();
+    const refreshData = ()=>{
+        startTransition(async ()=>{
+            const files = await getCacheFiles();
+            setEntries(files ?? []);
+        });
+    };
+    useEffect(()=>{
+        console.log("pathname changed", pathname);
+        refreshData();
+    }, [
+        pathname
+    ]);
+    useEffect(()=>{
+        if (!enabled) {
+            return;
+        }
+        const intervalId = setInterval(refreshData, interval);
+        return ()=>clearInterval(intervalId);
+    }, [
+        enabled,
+        interval
+    ]);
+    return /*#__PURE__*/ jsx(Button, {
+        variant: "outline",
+        size: "icon",
+        onClick: refreshData,
+        children: /*#__PURE__*/ jsx(Loader2, {
+            className: cn("nct-h-4 nct-w-4", {
+                "nct-animate-spin": isPending
+            })
+        })
+    });
+}
+
+export { RefreshDataButton as R };

package/dist/es/{dialog-client-D5Q_DDEF.js → dialog-client-C319YNfG.js}

@@ -3,7 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
 import * as React from 'react';
-import { c as cn } from './cache-entry-client-CtWrVYTN.js';
+import { c as cn } from './cache-entry-client-Ceh-eYDl.js';
 
 const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;

package/dist/es/getCacheEntries-server-CgNUCSp3.js

@@ -0,0 +1,72 @@
+'use server';
+import { existsSync, promises } from 'fs';
+import { z, ZodError } from 'zod';
+
+const stringToJSONSchema = 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 z.NEVER;
+    }
+});
+const nextCacheFileSchema = z.object({
+    data: z.object({
+        body: z.string(),
+        headers: z.record(z.string(), z.string()),
+        status: z.number(),
+        url: z.string()
+    }),
+    kind: z.union([
+        z.literal("FETCH"),
+        z.unknown()
+    ]),
+    revalidate: z.number().optional(),
+    tags: z.array(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 (!existsSync(cachePath)) {
+        return;
+    }
+    const files = await 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 promises.readFile(`${cachePath}/${file}`);
+            const cacheEntry = nextCacheFileSchema.parse(JSON.parse(fileContent.toString()));
+            cacheFiles.set(file, cacheEntry);
+        } catch (error) {
+            if (error instanceof 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());
+};
+
+export { getCacheFiles as g };

package/dist/es/index.d.mts

@@ -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 };

package/dist/es/index.mjs

@@ -1,90 +1,21 @@
-'use server';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { d as TableHeader, e as TableRow, T as TableHead } from './cache-entry-client-CtWrVYTN.js';
 import { Braces, PanelBottomCloseIcon } from 'lucide-react';
-import { existsSync, promises } from 'fs';
-import { z, ZodError } from 'zod';
-import { C as CachePanelContextProvider } from './cache-panel-context-client-D5NKXXpF.js';
-import { C as CachePanelHead } from './cache-panel-head-client-CZC6pddt.js';
-import { C as CachePanelTable } from './cache-panel-table-client-Qc84cSj6.js';
-import { C as CachePanelTrigger } from './cache-panel-trigger-client-GrlxjSO5.js';
-import { C as CacheTable } from './cache-panel-wrapper-client-BosTuysv.js';
-import { R as RefreshDataButton } from './refresh-data-button-client-DaxVafNg.js';
+import { g as getCacheFiles } from './getCacheEntries-server-CgNUCSp3.js';
+import { f as TableHeader, b as TableRow, T as TableHead } from './cache-entry-client-Ceh-eYDl.js';
+import { C as CachePanelContextProvider } from './cache-panel-context-client-DCXKayLF.js';
+import { C as CachePanelTable } from './cache-panel-table-client-C9YfopmF.js';
+import { C as CachePanelTrigger } from './cache-panel-trigger-client-CGReagL-.js';
+import { C as CacheTable } from './cache-panel-wrapper-client-Cv0HcuJC.js';
+import { R as RefreshDataButton } from './cache-refresh-data-client-BjsJkQ5H.js';
+import { C as CachePanelHead } from './cache-panel-head-client-BBfig3xH.js';
 
-const stringToJSONSchema = 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 z.NEVER;
-    }
-});
-const nextCacheFileSchema = z.object({
-    data: z.object({
-        body: z.string(),
-        headers: z.record(z.string(), z.string()),
-        status: z.number(),
-        url: z.string()
-    }),
-    kind: z.union([
-        z.literal("FETCH"),
-        z.unknown()
-    ]),
-    revalidate: z.number().optional(),
-    tags: z.array(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 (!existsSync(cachePath)) {
-        return;
-    }
-    const files = await 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 promises.readFile(`${cachePath}/${file}`);
-            const cacheEntry = nextCacheFileSchema.parse(JSON.parse(fileContent.toString()));
-            cacheFiles.set(file, cacheEntry);
-        } catch (error) {
-            if (error instanceof ZodError) {
-                const issues = error.issues;
-                console.error(`File ${file} do not match the schema`, issues);
-                continue;
-            }
-            console.error(`Error parsing ${file}`);
-        }
-    }
-    return cacheFiles;
-};
-
-async function NextCacheToolbar() {
+async function NextCacheToolbar({ autoRefresh = false, interval = 10000 }) {
     const files = await getCacheFiles();
-    const cacheEntries = Array.from(files?.entries() ?? []);
     return /*#__PURE__*/ jsx("div", {
         id: "next-cache-toolbar",
         className: "nct-text-primary nct-font-mono",
         children: /*#__PURE__*/ jsxs(CachePanelContextProvider, {
+            entries: files ?? [],
             children: [
                 /*#__PURE__*/ jsx(CachePanelTrigger, {
                     className: "nct-fixed nct-rounded-full nct-bottom-4 nct-right-4 nct-bg-gradient-to-r nct-from-fuchsia-500 nct-to-cyan-500",
@@ -99,14 +30,16 @@ async function NextCacheToolbar() {
                                     /*#__PURE__*/ jsx(CachePanelHead, {
                                         sortingProperty: "url",
                                         className: "nct-w-[300px]",
+                                        withFilter: true,
                                         children: "URL"
                                     }),
                                     /*#__PURE__*/ jsx(CachePanelHead, {
                                         sortingProperty: "revalidate",
-                                        children: "Revalidate"
+                                        children: "Revalidate (ms)"
                                     }),
                                     /*#__PURE__*/ jsx(CachePanelHead, {
                                         sortingProperty: "tags",
+                                        withFilter: true,
                                         children: "Tags"
                                     }),
                                     /*#__PURE__*/ jsx(CachePanelHead, {
@@ -118,7 +51,10 @@ async function NextCacheToolbar() {
                                         children: /*#__PURE__*/ jsxs("div", {
                                             className: "nct-flex nct-items-center nct-justify-end nct-gap-2",
                                             children: [
-                                                /*#__PURE__*/ jsx(RefreshDataButton, {}),
+                                                /*#__PURE__*/ jsx(RefreshDataButton, {
+                                                    enabled: autoRefresh,
+                                                    interval: interval
+                                                }),
                                                 /*#__PURE__*/ jsx(CachePanelTrigger, {
                                                     children: /*#__PURE__*/ jsx(PanelBottomCloseIcon, {})
                                                 })
@@ -128,9 +64,7 @@ async function NextCacheToolbar() {
                                 ]
                             })
                         }),
-                        /*#__PURE__*/ jsx(CachePanelTable, {
-                            entries: cacheEntries
-                        })
+                        /*#__PURE__*/ jsx(CachePanelTable, {})
                     ]
                 })
             ]