@trieb.work/nextjs-turbo-redis-cache 1.16.2 → 1.18.0

package/test/nextjs-test-projects/next-app-16-3-0-cache-components/src/app/revalidation-interface.tsx

@@ -0,0 +1,267 @@
+'use client';
+
+import { useState } from 'react';
+
+// Define API routes for path-based revalidation
+const apiRoutePaths: Record<string, string> = {
+  'Cached Static Fetch': '/api/cached-static-fetch',
+  'Uncached Fetch': '/api/uncached-fetch',
+  'Revalidated Fetch': '/api/revalidated-fetch',
+  'Nested Fetch in API Route':
+    '/api/nested-fetch-in-api-route/revalidated-fetch',
+};
+
+// Define API routes with tags for tag-based revalidation
+const apiRouteTags: Record<string, string> = {
+  'Revalidated Fetch in Nested API Route':
+    'revalidated-fetch-revalidate3-nested-fetch-in-api-route',
+  'Revalidated Fetch API': 'revalidated-fetch-api',
+  'Cached Static Fetch API': 'cached-static-fetch-api',
+  'Uncached Fetch API': 'uncached-fetch-api',
+};
+
+// Revalidation Interface Component
+export function RevalidationInterface() {
+  const [selectedPathRoute, setSelectedPathRoute] = useState('');
+  const [selectedTagRoute, setSelectedTagRoute] = useState('');
+  const [revalidationStatus, setRevalidationStatus] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handlePathRevalidate = async () => {
+    if (!selectedPathRoute) {
+      setRevalidationStatus('Please select an API route to revalidate by path');
+      return;
+    }
+
+    setIsLoading(true);
+    setRevalidationStatus('Revalidating API route by path...');
+
+    try {
+      const path = apiRoutePaths[selectedPathRoute];
+      const response = await fetch(`/api/revalidatePath?path=${path}`);
+      const data = await response.json();
+
+      if (response.ok) {
+        setRevalidationStatus(
+          `Successfully revalidated API route by path: ${selectedPathRoute} (${path})`,
+        );
+      } else {
+        setRevalidationStatus(`Error: ${data.error || 'Unknown error'}`);
+      }
+    } catch (error: unknown) {
+      const errorMessage =
+        error instanceof Error ? error.message : 'Unknown error';
+      setRevalidationStatus(`Error: ${errorMessage}`);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleTagRevalidate = async () => {
+    if (!selectedTagRoute) {
+      setRevalidationStatus('Please select an API route to revalidate by tag');
+      return;
+    }
+
+    setIsLoading(true);
+    setRevalidationStatus('Revalidating API route by tag...');
+
+    try {
+      const tag = apiRouteTags[selectedTagRoute];
+      const response = await fetch(`/api/revalidateTag?tag=${tag}`);
+      const data = await response.json();
+
+      if (response.ok) {
+        setRevalidationStatus(
+          `Successfully revalidated API route by tag: ${selectedTagRoute} (tag: ${tag})`,
+        );
+      } else {
+        setRevalidationStatus(`Error: ${data.error || 'Unknown error'}`);
+      }
+    } catch (error: unknown) {
+      const errorMessage =
+        error instanceof Error ? error.message : 'Unknown error';
+      setRevalidationStatus(`Error: ${errorMessage}`);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        border: '1px solid #eaeaea',
+        padding: '25px',
+        borderRadius: '8px',
+        boxShadow: '0 4px 6px rgba(0,0,0,0.05)',
+        backgroundColor: '#fff',
+        marginBottom: '30px',
+      }}
+    >
+      <h3
+        style={{
+          fontSize: '1.4rem',
+          color: '#0070f3',
+          marginTop: '0',
+          marginBottom: '15px',
+          borderBottom: '1px solid #eaeaea',
+          paddingBottom: '10px',
+        }}
+      >
+        API Route Revalidation Interface
+      </h3>
+
+      {/* Path-based revalidation section */}
+      <div
+        style={{
+          padding: '15px',
+          marginBottom: '20px',
+          backgroundColor: '#f9f9f9',
+          borderRadius: '5px',
+          border: '1px solid #eaeaea',
+        }}
+      >
+        <h4
+          style={{
+            fontSize: '1.1rem',
+            color: '#0070f3',
+            marginTop: '0',
+            marginBottom: '15px',
+          }}
+        >
+          Revalidate API Route by Path
+        </h4>
+
+        <div style={{ marginBottom: '15px' }}>
+          <label
+            style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}
+          >
+            Select API Route:
+          </label>
+          <select
+            value={selectedPathRoute}
+            onChange={(e) => setSelectedPathRoute(e.target.value)}
+            style={{
+              width: '100%',
+              padding: '10px',
+              borderRadius: '5px',
+              border: '1px solid #ddd',
+              fontSize: '1rem',
+            }}
+          >
+            <option value="">-- Select an API route --</option>
+            {Object.keys(apiRoutePaths).map((route) => (
+              <option key={route} value={route}>
+                {route}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <button
+          onClick={handlePathRevalidate}
+          disabled={isLoading || !selectedPathRoute}
+          style={{
+            backgroundColor: '#0070f3',
+            color: 'white',
+            border: 'none',
+            padding: '10px 20px',
+            borderRadius: '5px',
+            fontSize: '1rem',
+            fontWeight: '500',
+            cursor: isLoading || !selectedPathRoute ? 'not-allowed' : 'pointer',
+            opacity: isLoading || !selectedPathRoute ? 0.7 : 1,
+            transition: 'all 0.2s',
+          }}
+        >
+          {isLoading ? 'Revalidating...' : 'Revalidate by Path'}
+        </button>
+      </div>
+
+      {/* Tag-based revalidation section */}
+      <div
+        style={{
+          padding: '15px',
+          marginBottom: '20px',
+          backgroundColor: '#f9f9f9',
+          borderRadius: '5px',
+          border: '1px solid #eaeaea',
+        }}
+      >
+        <h4
+          style={{
+            fontSize: '1.1rem',
+            color: '#0070f3',
+            marginTop: '0',
+            marginBottom: '15px',
+          }}
+        >
+          Revalidate API Route by Tag
+        </h4>
+
+        <div style={{ marginBottom: '15px' }}>
+          <label
+            style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}
+          >
+            Select API Route with Tag:
+          </label>
+          <select
+            value={selectedTagRoute}
+            onChange={(e) => setSelectedTagRoute(e.target.value)}
+            style={{
+              width: '100%',
+              padding: '10px',
+              borderRadius: '5px',
+              border: '1px solid #ddd',
+              fontSize: '1rem',
+            }}
+          >
+            <option value="">-- Select an API route with tag --</option>
+            {Object.keys(apiRouteTags).map((route) => (
+              <option key={route} value={route}>
+                {route}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <button
+          onClick={handleTagRevalidate}
+          disabled={isLoading || !selectedTagRoute}
+          style={{
+            backgroundColor: '#0070f3',
+            color: 'white',
+            border: 'none',
+            padding: '10px 20px',
+            borderRadius: '5px',
+            fontSize: '1rem',
+            fontWeight: '500',
+            cursor: isLoading || !selectedTagRoute ? 'not-allowed' : 'pointer',
+            opacity: isLoading || !selectedTagRoute ? 0.7 : 1,
+            transition: 'all 0.2s',
+          }}
+        >
+          {isLoading ? 'Revalidating...' : 'Revalidate by Tag'}
+        </button>
+      </div>
+
+      {/* Status display */}
+      {revalidationStatus && (
+        <div
+          style={{
+            marginTop: '15px',
+            padding: '10px',
+            borderRadius: '5px',
+            backgroundColor: revalidationStatus.includes('Error')
+              ? '#ffebee'
+              : '#e3f2fd',
+            color: revalidationStatus.includes('Error') ? '#c62828' : '#0070f3',
+            border: `1px solid ${revalidationStatus.includes('Error') ? '#ffcdd2' : '#bbdefb'}`,
+          }}
+        >
+          {revalidationStatus}
+        </div>
+      )}
+    </div>
+  );
+}

package/test/nextjs-test-projects/next-app-16-3-0-cache-components/src/app/update-tag-test/page.tsx

@@ -0,0 +1,22 @@
+import { updateTag } from 'next/cache';
+
+let clicks = 0;
+
+async function increment() {
+  'use server';
+
+  clicks++;
+  updateTag('update-tag-test');
+}
+
+export default function UpdateTagTestPage() {
+  return (
+    <main style={{ padding: 40, fontFamily: 'system-ui, sans-serif' }}>
+      <h1>UpdateTag Test</h1>
+      <form action={increment}>
+        <p data-testid="clicks">Clicks: {clicks}</p>
+        <button type="submit">Increment</button>
+      </form>
+    </main>
+  );
+}

package/test/nextjs-test-projects/next-app-16-3-0-cache-components/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}

package/test/nextjs-test-projects/next-pages-16-2-6/pnpm-lock.yaml

@@ -469,7 +469,7 @@ packages:
   '@trieb.work/nextjs-turbo-redis-cache@file:../../..':
     resolution: {directory: ../../.., type: directory}
     peerDependencies:
-      next: '>=15.0.3 <16.3.0'
+      next: '>=15.0.3 <17.0.0'
       redis: 4.7.0
 
   '@tybys/wasm-util@0.10.3':
@@ -2768,7 +2768,7 @@ snapshots:
       eslint: 9.39.5
       eslint-import-resolver-node: 0.3.10
       eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.64.0(eslint@9.39.5)(typescript@5.9.3))(eslint@9.39.5))(eslint@9.39.5)
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.64.0(eslint@9.39.5)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.5)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.64.0(eslint@9.39.5)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.64.0(eslint@9.39.5)(typescript@5.9.3))(eslint@9.39.5))(eslint@9.39.5))(eslint@9.39.5)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@9.39.5)
       eslint-plugin-react: 7.37.5(eslint@9.39.5)
       eslint-plugin-react-hooks: 7.1.1(eslint@9.39.5)
@@ -2801,7 +2801,7 @@ snapshots:
       tinyglobby: 0.2.17
       unrs-resolver: 1.12.2
     optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.64.0(eslint@9.39.5)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.5)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.64.0(eslint@9.39.5)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.64.0(eslint@9.39.5)(typescript@5.9.3))(eslint@9.39.5))(eslint@9.39.5))(eslint@9.39.5)
     transitivePeerDependencies:
       - supports-color
 
@@ -2816,7 +2816,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.64.0(eslint@9.39.5)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.5):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.64.0(eslint@9.39.5)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.64.0(eslint@9.39.5)(typescript@5.9.3))(eslint@9.39.5))(eslint@9.39.5))(eslint@9.39.5):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9

package/test/nextjs-test-projects/next-pages-16-3-0/README.md

@@ -0,0 +1,16 @@
+# next-pages-16-3-0
+
+Next.js 16.3.0 **Pages Router** fixture for integration testing the Redis
+cache handler with Pages Router cache entry kinds:
+
+- `PAGES` — ISR pages via `getStaticProps` + `revalidate` and
+  `getStaticPaths` with `fallback: 'blocking'` (`/isr/[slug]`)
+- `REDIRECT` — `getStaticProps` returning `redirect:` (`/isr/redirect`)
+- `null` value entries — `getStaticProps` returning `notFound: true`
+  (`/isr/not-found`)
+- `revalidate: false` TTL fallback (`/static-forever`)
+- On-demand revalidation via `res.revalidate(path)`
+  (`/api/revalidate?path=...`), used by the two-instance cross-server
+  revalidation test
+
+Used by `test/vitest/integration/pages-router.integration.test.ts`.

package/test/nextjs-test-projects/next-pages-16-3-0/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

package/test/nextjs-test-projects/next-pages-16-3-0/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  cacheHandler: require.resolve('@trieb.work/nextjs-turbo-redis-cache'),
+};
+
+export default nextConfig;

package/test/nextjs-test-projects/next-pages-16-3-0/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "next-pages-16-3-0",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "next": "16.3.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "redis": "4.7.0",
+    "@trieb.work/nextjs-turbo-redis-cache": "file:../../../"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.3.0",
+    "typescript": "^5"
+  }
+}