@trieb.work/nextjs-turbo-redis-cache 1.10.0 → 1.11.0-beta.1

package/test/integration/next-app-16-1-1-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/integration/next-app-16-1-1-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/integration/next-app-16-1-1-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/tests/cache-lab.spec.ts

@@ -0,0 +1,157 @@
+import { test, expect } from '@playwright/test';
+
+// These tests assume the Cache Components Next.js app is already running on the same origin as baseURL.
+// Recommended:
+//   PLAYWRIGHT_BASE_URL=http://localhost:3001 pnpm test:e2e
+
+test.describe('Cache Lab (Cache Components)', () => {
+  test('use cache non-deterministic values are stable until updateTag', async ({
+    page,
+  }) => {
+    await page.goto('/cache-lab/use-cache-nondeterministic');
+
+    const random1 = page.getByTestId('random1');
+    const now = page.getByTestId('now');
+
+    await expect(random1).toBeVisible();
+
+    const beforeRandom = await random1.textContent();
+    const beforeNow = await now.textContent();
+
+    await page.reload();
+    await expect(random1).toBeVisible();
+
+    const afterReloadRandom = await random1.textContent();
+    const afterReloadNow = await now.textContent();
+
+    expect(afterReloadRandom).toBe(beforeRandom);
+    expect(afterReloadNow).toBe(beforeNow);
+
+    await page
+      .getByRole('button', { name: "updateTag('cache-lab:nondet')" })
+      .click();
+    await page.waitForLoadState('networkidle');
+
+    await expect(random1).toBeVisible();
+
+    const afterInvalidateRandom = await random1.textContent();
+    const afterInvalidateNow = await now.textContent();
+
+    expect(afterInvalidateRandom).not.toBe(beforeRandom);
+    expect(afterInvalidateNow).not.toBe(beforeNow);
+  });
+
+  test('tag invalidation changes cached values (updateTag + revalidateTag)', async ({
+    page,
+  }) => {
+    await page.goto('/cache-lab/tag-invalidation');
+
+    const createdAt = page.getByTestId('createdAt');
+    const value = page.getByTestId('value');
+
+    await expect(createdAt).toBeVisible();
+
+    const beforeCreatedAt = await createdAt.textContent();
+    const beforeValue = await value.textContent();
+
+    await page.reload();
+    await expect(createdAt).toBeVisible();
+    expect(await createdAt.textContent()).toBe(beforeCreatedAt);
+    expect(await value.textContent()).toBe(beforeValue);
+
+    await page
+      .getByRole('button', { name: "updateTag('cache-lab:tag')" })
+      .click();
+    await page.waitForLoadState('networkidle');
+
+    await expect(createdAt).toBeVisible();
+    expect(await createdAt.textContent()).not.toBe(beforeCreatedAt);
+    expect(await value.textContent()).not.toBe(beforeValue);
+
+    const afterUpdateCreatedAt = await createdAt.textContent();
+    const afterUpdateValue = await value.textContent();
+
+    await page
+      .getByRole('button', { name: "revalidateTag('cache-lab:tag')" })
+      .click();
+    await page.waitForLoadState('networkidle');
+
+    await expect(createdAt).toBeVisible();
+
+    const maybeStaleCreatedAt = await createdAt.textContent();
+    const maybeStaleValue = await value.textContent();
+
+    // Revalidate can be SWR; allow either immediate refresh or stale served,
+    // but the value should eventually change on subsequent reloads.
+    if (maybeStaleCreatedAt === afterUpdateCreatedAt) {
+      // give background refresh some time
+      await page.waitForTimeout(4000);
+      await page.reload();
+      await expect(createdAt).toBeVisible();
+    }
+
+    expect(await createdAt.textContent()).not.toBe(afterUpdateCreatedAt);
+    expect(await value.textContent()).not.toBe(afterUpdateValue);
+  });
+
+  test('runtime cookie changes cache key (cached payload differs per cookie)', async ({
+    page,
+  }) => {
+    await page.goto('/cache-lab/runtime-data-suspense');
+
+    const cookieValue = page.getByTestId('cookie');
+    const payload = page.getByTestId('payload');
+
+    await expect(cookieValue).toBeVisible();
+
+    await page.getByRole('button', { name: 'Set cookie: user-a' }).click();
+    await page.waitForLoadState('networkidle');
+
+    await expect(cookieValue).toHaveText('user-a');
+    const payloadA1 = await payload.textContent();
+
+    await page.reload();
+    await expect(cookieValue).toHaveText('user-a');
+    const payloadA2 = await payload.textContent();
+    expect(payloadA2).toBe(payloadA1);
+
+    await page.getByRole('button', { name: 'Set cookie: user-b' }).click();
+    await page.waitForLoadState('networkidle');
+
+    await expect(cookieValue).toHaveText('user-b');
+    const payloadB = await payload.textContent();
+
+    expect(payloadB).not.toBe(payloadA1);
+  });
+
+  test('stale-while-revalidate demo eventually produces a new value after revalidateTag', async ({
+    page,
+  }) => {
+    await page.goto('/cache-lab/stale-while-revalidate');
+
+    const computedAt = page.getByTestId('computedAt');
+    const value = page.getByTestId('value');
+
+    await expect(computedAt).toBeVisible();
+
+    const beforeComputedAt = await computedAt.textContent();
+    const beforeValue = await value.textContent();
+
+    // Ensure it becomes stale.
+    await page.waitForTimeout(3000);
+
+    await page
+      .getByRole('button', { name: "revalidateTag('cache-lab:swr')" })
+      .click();
+    await page.waitForLoadState('networkidle');
+
+    // Allow some time for background refresh to potentially complete.
+    await page.waitForTimeout(4500);
+
+    await page.reload();
+    await expect(computedAt).toBeVisible();
+
+    expect(await computedAt.textContent()).not.toBe(beforeComputedAt);
+    expect(await value.textContent()).not.toBe(beforeValue);
+  });
+});

package/vitest.cache-components.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'node',
+    include: ['test/cache-components/**/*.spec.ts'],
+    exclude: [
+      'node_modules',
+      'dist',
+      '.git',
+      '**/node_modules/**',
+      '**/node_modules',
+    ],
+  },
+});