-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix component and data cache when using FS driver (#47)
- Loading branch information
Showing
16 changed files
with
294 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -20,3 +20,5 @@ coverage | |
docs/.vitepress/cache | ||
docs/.vitepress/dist | ||
docs/.vitepress/.temp | ||
playground-disk/cache | ||
__cache__ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
<template> | ||
<div class="app"> | ||
<NuxtLayout> | ||
<NuxtPage /> | ||
</NuxtLayout> | ||
</div> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
import { type H3Event, getQuery, getHeader } from 'h3' | ||
import fsDriver from 'unstorage/drivers/fs' | ||
import { defineMultiCacheOptions } from './../../src/runtime/serverOptions/defineMultiCacheOptions' | ||
|
||
function getCacheKeyPrefix(event: H3Event): string { | ||
const query = getQuery(event) | ||
if (query.language && typeof query.language === 'string') { | ||
return query.language | ||
} | ||
|
||
const acceptLanguage = getHeader(event, 'accept-language') || '' | ||
|
||
if ( | ||
acceptLanguage && | ||
typeof acceptLanguage === 'string' && | ||
acceptLanguage.includes('de') | ||
) { | ||
return 'de' | ||
} | ||
return 'en' | ||
} | ||
|
||
export default defineMultiCacheOptions({ | ||
data: { | ||
storage: { | ||
driver: fsDriver({ | ||
base: './__cache__/data', | ||
}), | ||
}, | ||
}, | ||
route: { | ||
alterCachedHeaders(headers) { | ||
const cookie = headers['set-cookie'] | ||
// Remove the SESSION cookie. | ||
if (cookie) { | ||
if (typeof cookie === 'string') { | ||
if (cookie.includes('SESSION')) { | ||
headers['set-cookie'] = undefined | ||
} | ||
} else if (Array.isArray(cookie)) { | ||
const remaining = cookie.filter((v) => !v.includes('SESSION')) | ||
if (!remaining.length) { | ||
headers['set-cookie'] = undefined | ||
} else { | ||
headers['set-cookie'] = remaining | ||
} | ||
} | ||
} | ||
return headers | ||
}, | ||
storage: { | ||
driver: fsDriver({ | ||
base: './__cache__/route', | ||
}), | ||
}, | ||
}, | ||
component: { | ||
storage: { | ||
driver: fsDriver({ | ||
base: './__cache__/component', | ||
}), | ||
}, | ||
}, | ||
cacheKeyPrefix: (event: H3Event): Promise<string> => { | ||
return Promise.resolve(getCacheKeyPrefix(event)) | ||
}, | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
<template> | ||
<div> | ||
<div id="cached-component-number">{{ random }}</div> | ||
</div> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { useAsyncData } from '#imports' | ||
const { data: random } = await useAsyncData( | ||
'random_data_in_cached_component', | ||
() => { | ||
return Promise.resolve('RANDOM_NUMBER__' + Date.now()) | ||
}, | ||
) | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
<template> | ||
<div class="main-layout"> | ||
<main> | ||
<slot /> | ||
</main> | ||
</div> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import { defineNuxtConfig } from 'nuxt/config' | ||
import NuxtMultiCache from './../src/module' | ||
|
||
export default defineNuxtConfig({ | ||
modules: [NuxtMultiCache], | ||
imports: { | ||
autoImport: false, | ||
}, | ||
multiCache: { | ||
debug: true, | ||
component: { | ||
enabled: true, | ||
}, | ||
route: { | ||
enabled: true, | ||
}, | ||
|
||
data: { | ||
enabled: true, | ||
}, | ||
|
||
cdn: { | ||
enabled: true, | ||
}, | ||
api: { | ||
enabled: true, | ||
cacheTagInvalidationDelay: 5000, | ||
authorization: false, | ||
}, | ||
}, | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
<template> | ||
<div> | ||
<RenderCacheable :async-data-keys="['random_data_in_cached_component']"> | ||
<TestComponent /> | ||
</RenderCacheable> | ||
</div> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import { useRouteCache } from '#imports' | ||
import TestComponent from './../components/Test.vue' | ||
useRouteCache((helper) => { | ||
helper.setUncacheable() | ||
}) | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
<template> | ||
<div id="random-number">{{ random }}</div> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import { useRouteCache, useState } from '#imports' | ||
const random = useState('random_data', () => { | ||
return 'RANDOM_NUMBER__' + Math.round(Math.random() * 1000000000) + '__' | ||
}) | ||
useRouteCache((helper) => { | ||
helper.setCacheable() | ||
}) | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
<template> | ||
<div id="random-number">{{ random }}</div> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import { useRouteCache, useState } from '#imports' | ||
const random = useState('random_data', () => { | ||
return 'RANDOM_NUMBER__' + Math.round(Math.random() * 1000000000) + '__' | ||
}) | ||
useRouteCache((helper) => { | ||
helper.setUncacheable() | ||
}) | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"extends": "./.nuxt/tsconfig.json" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
<template> | ||
<div id="random-number">{{ random }}</div> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import { computed } from 'vue' | ||
import { useRouteCache } from '#imports' | ||
const random = computed(() => { | ||
return 'RANDOM_NUMBER__' + Math.round(Math.random() * 1000000000) + '__' | ||
}) | ||
useRouteCache((helper) => { | ||
helper.setCacheable() | ||
}) | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
import path from 'path' | ||
import { setup } from '@nuxt/test-utils/e2e' | ||
import { describe, test, expect } from 'vitest' | ||
import type { NuxtMultiCacheOptions } from '../src/runtime/types' | ||
import { createPageWithoutHydration } from './__helpers__' | ||
import purgeAll from './__helpers__/purgeAll' | ||
|
||
const multiCache: NuxtMultiCacheOptions = { | ||
route: { | ||
enabled: true, | ||
}, | ||
data: { | ||
enabled: true, | ||
}, | ||
api: { | ||
enabled: true, | ||
authorization: false, | ||
cacheTagInvalidationDelay: 5000, | ||
}, | ||
} | ||
|
||
const nuxtConfig: any = { | ||
multiCache, | ||
} | ||
|
||
await setup({ | ||
server: true, | ||
logLevel: 0, | ||
runner: 'vitest', | ||
build: true, | ||
// browser: true, | ||
rootDir: path.resolve(__dirname, './../playground-disk'), | ||
nuxtConfig, | ||
}) | ||
|
||
describe('Caching with the file system driver', () => { | ||
test('correctly serves a cached page', async () => { | ||
await purgeAll() | ||
const page1 = await createPageWithoutHydration('/cachedPageFromDisk', 'en') | ||
const text1 = await page1.locator('#random-number').innerText() | ||
const page2 = await createPageWithoutHydration('/cachedPageFromDisk', 'en') | ||
const text2 = await page2.locator('#random-number').innerText() | ||
|
||
expect(text1).toEqual(text2) | ||
|
||
await purgeAll() | ||
|
||
const page3 = await createPageWithoutHydration('/cachedPageFromDisk', 'en') | ||
const text3 = await page3.locator('#random-number').innerText() | ||
expect(text3).to.not.equal(text1) | ||
}) | ||
|
||
test('correctly returns a cached component', async () => { | ||
await purgeAll() | ||
|
||
const page1 = await createPageWithoutHydration('/cachedComponent', 'en') | ||
const text1 = await page1.locator('#cached-component-number').innerText() | ||
const page2 = await createPageWithoutHydration('/cachedComponent', 'en') | ||
const text2 = await page2.locator('#cached-component-number').innerText() | ||
|
||
expect(text1).toEqual(text2) | ||
|
||
await purgeAll() | ||
|
||
const page3 = await createPageWithoutHydration('/cachedComponent', 'en') | ||
const text3 = await page3.locator('#cached-component-number').innerText() | ||
expect(text3).to.not.equal(text1) | ||
}) | ||
}) |