Harvmaster/Native-Router-Vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve caching

Browse Source
This commit is contained in:
Harvey Zuccon
2026-07-21 18:45:59 +10:00
parent 92c61abcfe
commit 7d134ff8c9
24 changed files with 519 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
apps/demo/e2e/navigation.spec.ts
View File

@@ -169,7 +169,7 @@ test('accepts a second fast tab flick while the first spring is still settling',
await expect(routerView).not.toHaveAttribute('data-native-transaction')
})
test('renders a suspended deep sibling and keeps its pushed history entry', async ({ page }) => {
test('renders a suspended pushed sibling and evicts it after backing out', async ({ page }) => {
await page.goto('/profile')
await page.getByRole('link', { name: /Runtime stress lab/ }).click()
@@ -179,49 +179,71 @@ test('renders a suspended deep sibling and keeps its pushed history entry', asyn
await expect(page.getByRole('link', { name: /You/ })).toHaveAttribute('aria-current', 'page')
await expect(page.getByTestId('async-data-ready')).toBeVisible({ timeout: 2_000 })
const counter = page.locator('[data-native-route="/profile/runtime-lab"] [data-testid="mounted-seconds"]')
const before = Number(await counter.getAttribute('data-seconds'))
const lab = page.getByTestId('runtime-lab-view')
const firstMountId = await lab.getAttribute('data-mount-id')
await page.getByRole('button', { name: 'Back' }).click()
await expect(page).toHaveURL(/\/profile$/)
await waitForTransition(page)
// The route is out of view but still mounted, so its local interval advances.
await expect.poll(async () => Number(await counter.getAttribute('data-seconds')), { timeout: 2_500 }).toBeGreaterThan(before)
// Popping a pushed route removes it after the exit animation. Keeping the
// descriptor allows browser-forward navigation without retaining its DOM.
await expect(page.getByTestId('runtime-lab-view')).toHaveCount(0)
// browser forward exists only because this sibling opted into push history.
await page.evaluate(() => history.forward())
await expect(page).toHaveURL(/\/profile\/runtime-lab$/)
await expect(page.getByTestId('async-data-ready')).toBeVisible()
await expect(page.getByTestId('async-data-loading')).toBeVisible()
await expect(page.getByTestId('async-data-ready')).toBeVisible({ timeout: 2_000 })
await expect(page.getByTestId('runtime-lab-view')).not.toHaveAttribute('data-mount-id', firstMountId!)
})
test('a dynamic guard rejects an already-cached route without destroying it', async ({ page }) => {
await page.goto('/profile')
await page.getByRole('link', { name: /Runtime stress lab/ }).click()
await expect(page).toHaveURL(/\/profile\/runtime-lab$/)
await expect(page.getByTestId('async-data-ready')).toBeVisible({ timeout: 2_000 })
await page.getByRole('button', { name: 'Back' }).click()
test('lazily caches a visited sibling and pauses its active work while hidden', async ({ page }) => {
await page.goto('/stories')
const stories = page.getByTestId('stories-view')
const mountId = await stories.getAttribute('data-mount-id')
await expect.poll(async () => Number(await stories.getAttribute('data-active-ticks'))).toBeGreaterThan(1)
await page.getByRole('link', { name: /You/ }).click()
await expect(page).toHaveURL(/\/profile$/)
await waitForTransition(page)
await expect(stories).toHaveCount(1)
const cachedLab = page.locator('[data-native-route="/profile/runtime-lab"]')
const counter = cachedLab.getByTestId('mounted-seconds')
const beforeBlockedAttempt = Number(await counter.getAttribute('data-seconds'))
await page.getByRole('button', { name: 'Block Runtime Lab re-entry' }).click()
await expect(page.getByRole('button', { name: 'Block Runtime Lab re-entry' })).toHaveAttribute('aria-pressed', 'true')
const hiddenTicks = Number(await stories.getAttribute('data-active-ticks'))
await page.waitForTimeout(600)
await expect(stories).toHaveAttribute('data-active-ticks', String(hiddenTicks))
await page.getByRole('link', { name: /Runtime stress lab/ }).click()
await expect(cachedLab.getByTestId('lab-guard-status')).toHaveText('blocked')
await page.getByRole('link', { name: /Stories/ }).click()
await expect(page).toHaveURL(/\/stories$/)
await waitForTransition(page)
await expect(page).toHaveURL(/\/profile$/)
await expect(page.getByRole('heading', { name: 'You' })).toBeVisible()
await expect(cachedLab).toHaveCount(1)
await expect.poll(async () => Number(await counter.getAttribute('data-seconds')), { timeout: 2_500 }).toBeGreaterThan(beforeBlockedAttempt)
await expect(stories).toHaveAttribute('data-mount-id', mountId!)
await expect.poll(async () => Number(await stories.getAttribute('data-active-ticks'))).toBeGreaterThan(hiddenTicks)
})
await page.getByRole('button', { name: 'Block Runtime Lab re-entry' }).click()
await page.getByRole('link', { name: /Runtime stress lab/ }).click()
await expect(page).toHaveURL(/\/profile\/runtime-lab$/)
await expect(page.getByTestId('async-data-ready')).toBeVisible()
await expect(page.getByTestId('mounted-seconds')).toHaveAttribute('data-seconds', /[2-9]|[1-9]\d+/)
test('evicts a cached sibling when its dynamic entry guard rejects it', async ({ page }) => {
await page.goto('/stories')
const stories = page.getByTestId('stories-view')
const firstMountId = await stories.getAttribute('data-mount-id')
await page.getByRole('link', { name: /You/ }).click()
await expect(page).toHaveURL(/\/profile$/)
await waitForTransition(page)
await expect(stories).toHaveCount(1)
const guardToggle = page.getByRole('button', { name: 'Block Stories re-entry' })
await guardToggle.click()
await expect(guardToggle).toHaveAttribute('aria-pressed', 'true')
await page.getByRole('link', { name: /Stories/ }).click()
await expect(page).toHaveURL(/\/profile$/)
await expect(page.getByTestId('story-guard-status')).toHaveText('blocked')
await waitForTransition(page)
await expect(page.getByTestId('stories-view')).toHaveCount(0)
await guardToggle.click()
await page.getByRole('link', { name: /Stories/ }).click()
await expect(page).toHaveURL(/\/stories$/)
await waitForTransition(page)
await expect(page.getByTestId('stories-view')).not.toHaveAttribute('data-mount-id', firstMountId!)
})
test('opens and dismisses the compose sheet', async ({ page }) => {