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

Add prettier. Format.

Browse Source
This commit is contained in:
Harvmaster
2026-07-22 02:12:05 +00:00
parent d28b09dc21
commit 18baa96848
45 changed files with 4520 additions and 2613 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
README.md
View File

@@ -48,31 +48,35 @@ An installed web app cannot access `WKWebView.allowsBackForwardNavigationGesture
## Minimal integration
```ts
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import { createNativeRouter } from '@native-vue-router/core'
import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import { createNativeRouter } from "@native-vue-router/core";
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: Home },
{ path: "/", component: Home },
{
path: '/chat/:id',
path: "/chat/:id",
component: Chat,
meta: {
native: { presentation: 'push', parent: '/', gesture: 'edge' },
native: { presentation: "push", parent: "/", gesture: "edge" },
},
},
],
})
});
const nativeRouter = createNativeRouter({ router })
createApp(App).use(router).use(nativeRouter).mount('#app')
const nativeRouter = createNativeRouter({ router });
createApp(App).use(router).use(nativeRouter).mount("#app");
```
```vue
<script setup lang="ts">
import { NativeGestureLink, NativeNavigator, NativeRouterView } from '@native-vue-router/core'
import {
NativeGestureLink,
NativeNavigator,
NativeRouterView,
} from "@native-vue-router/core";
</script>
<template>
@@ -100,16 +104,16 @@ The Navigation Lab contains an opt-in profiler. Tap **Start profiling**, leave t
The core API is also available directly:
```ts
import { createNativeNavigationProfiler } from '@native-vue-router/core'
import { createNativeNavigationProfiler } from "@native-vue-router/core";
const profiler = createNativeNavigationProfiler(nativeRouter, {
metadata: { build: import.meta.env.VITE_BUILD_ID },
})
});
profiler.start()
profiler.start();
// Reproduce the navigation issue.
const report = profiler.stop()
const json = profiler.toJSON(report)
const report = profiler.stop();
const json = profiler.toJSON(report);
```
No rAF loop or browser performance observer runs before `start()`, and `stop()` removes them. Reports contain frame intervals, refresh-rate estimates, per-navigation timing, cold-mount preparation, route loading, cache eviction, visibility changes, and browser-supported Long Task/layout-shift/resource timing. Route params, query values, and application state are omitted.

24
apps/capacitor/capacitor.config.ts
View File

@@ -1,21 +1,21 @@
import type { CapacitorConfig } from '@capacitor/cli'
import type { CapacitorConfig } from "@capacitor/cli";
const config: CapacitorConfig = {
appId: 'dev.nativevuerouter.messenger',
appName: 'Native Vue Messenger',
webDir: '../demo/dist',
backgroundColor: '#0b0d12',
appId: "dev.nativevuerouter.messenger",
appName: "Native Vue Messenger",
webDir: "../demo/dist",
backgroundColor: "#0b0d12",
plugins: {
App: { disableBackButtonHandler: true },
SplashScreen: {
launchAutoHide: true,
backgroundColor: '#0b0d12',
androidScaleType: 'CENTER_CROP',
backgroundColor: "#0b0d12",
androidScaleType: "CENTER_CROP",
},
StatusBar: { style: 'DARK', backgroundColor: '#0b0d12' },
StatusBar: { style: "DARK", backgroundColor: "#0b0d12" },
},
android: { backgroundColor: '#0b0d12' },
ios: { backgroundColor: '#0b0d12', contentInset: 'never' },
}
android: { backgroundColor: "#0b0d12" },
ios: { backgroundColor: "#0b0d12", contentInset: "never" },
};
export default config
export default config;

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

@@ -1,400 +1,542 @@
import { expect, test, type Page } from '@playwright/test'
import { expect, test, type Page } from "@playwright/test";
async function captureTransitions(page: Page) {
await page.evaluate(() => {
const state = window as typeof window & {
__nvrEvents?: Array<{ direction: string | null; presentation: string | null }>
__nvrObserver?: MutationObserver
}
state.__nvrObserver?.disconnect()
state.__nvrEvents = []
const view = document.querySelector('.nvr-router-view')
if (!view) throw new Error('Native router view did not render')
__nvrEvents?: Array<{
direction: string | null;
presentation: string | null;
}>;
__nvrObserver?: MutationObserver;
};
state.__nvrObserver?.disconnect();
state.__nvrEvents = [];
const view = document.querySelector(".nvr-router-view");
if (!view) throw new Error("Native router view did not render");
state.__nvrObserver = new MutationObserver(() => {
if (view.classList.contains('nvr-router-view--interactive')) {
if (view.classList.contains("nvr-router-view--interactive")) {
state.__nvrEvents?.push({
direction: view.getAttribute('data-native-direction'),
presentation: view.getAttribute('data-native-presentation'),
})
direction: view.getAttribute("data-native-direction"),
presentation: view.getAttribute("data-native-presentation"),
});
}
})
state.__nvrObserver.observe(view, { attributes: true })
})
});
state.__nvrObserver.observe(view, { attributes: true });
});
}
async function recordedTransitions(page: Page) {
return await page.evaluate(() => (window as typeof window & {
__nvrEvents?: Array<{ direction: string | null; presentation: string | null }>
}).__nvrEvents ?? [])
return await page.evaluate(
() =>
(
window as typeof window & {
__nvrEvents?: Array<{
direction: string | null;
presentation: string | null;
}>;
}
).__nvrEvents ?? [],
);
}
async function waitForTransition(page: Page) {
await expect(page.locator('.nvr-router-view')).not.toHaveClass(/nvr-router-view--interactive/)
await expect(page.locator(".nvr-router-view")).not.toHaveClass(
/nvr-router-view--interactive/,
);
}
async function flickToNextTab(page: Page, leaveSlowSpring = false) {
// Start on the route header, outside conversation-owned drag targets.
const surface = await page.locator('.nvr-router-view').boundingBox()
const header = await page.locator('[data-native-role="active"] .app-header, [data-native-role="to"] .app-header').last().boundingBox()
if (!surface || !header) throw new Error('Active route header did not render')
const y = header.y + header.height * 0.5
await page.mouse.move(surface.x + surface.width * 0.72, y)
await page.mouse.down()
const surface = await page.locator(".nvr-router-view").boundingBox();
const header = await page
.locator(
'[data-native-role="active"] .app-header, [data-native-role="to"] .app-header',
)
.last()
.boundingBox();
if (!surface || !header)
throw new Error("Active route header did not render");
const y = header.y + header.height * 0.5;
await page.mouse.move(surface.x + surface.width * 0.72, y);
await page.mouse.down();
if (leaveSlowSpring) {
await page.mouse.move(surface.x + surface.width * 0.3, y, { steps: 10 })
await page.waitForTimeout(90)
await page.mouse.move(surface.x + surface.width * 0.3, y, { steps: 10 });
await page.waitForTimeout(90);
}
await page.mouse.move(surface.x + surface.width * 0.27, y)
await page.mouse.up()
await page.mouse.move(surface.x + surface.width * 0.27, y);
await page.mouse.up();
}
test('navigates a conversation and returns through the native runtime', async ({ page }) => {
await page.goto('/inbox')
await expect(page.getByRole('heading', { name: 'Messages' })).toBeVisible()
await page.getByText('Maya Chen').last().click()
await expect(page).toHaveURL(/\/chat\/maya$/)
await expect(page.getByRole('heading', { name: 'Maya Chen' })).toBeVisible()
await page.getByRole('button', { name: 'Back' }).click()
await expect(page).toHaveURL(/\/inbox$/)
await waitForTransition(page)
await expect(page.getByRole('heading', { name: 'Messages' })).toBeVisible()
})
test("navigates a conversation and returns through the native runtime", async ({
page,
}) => {
await page.goto("/inbox");
await expect(page.getByRole("heading", { name: "Messages" })).toBeVisible();
await page.getByText("Maya Chen").last().click();
await expect(page).toHaveURL(/\/chat\/maya$/);
await expect(page.getByRole("heading", { name: "Maya Chen" })).toBeVisible();
await page.getByRole("button", { name: "Back" }).click();
await expect(page).toHaveURL(/\/inbox$/);
await waitForTransition(page);
await expect(page.getByRole("heading", { name: "Messages" })).toBeVisible();
});
test('switches sibling routes without growing the primary history flow', async ({ page }) => {
await page.goto('/inbox')
await page.getByRole('link', { name: /Stories/ }).click()
await expect(page).toHaveURL(/\/stories$/)
await waitForTransition(page)
await expect(page.getByRole('heading', { name: 'Stories' })).toBeVisible()
await page.getByRole('link', { name: /You/ }).click()
await expect(page).toHaveURL(/\/profile$/)
await waitForTransition(page)
await expect(page.getByRole('heading', { name: 'You' })).toBeVisible()
})
test("switches sibling routes without growing the primary history flow", async ({
page,
}) => {
await page.goto("/inbox");
await page.getByRole("link", { name: /Stories/ }).click();
await expect(page).toHaveURL(/\/stories$/);
await waitForTransition(page);
await expect(page.getByRole("heading", { name: "Stories" })).toBeVisible();
await page.getByRole("link", { name: /You/ }).click();
await expect(page).toHaveURL(/\/profile$/);
await waitForTransition(page);
await expect(page.getByRole("heading", { name: "You" })).toBeVisible();
});
test('uses route order for tab direction and does not animate the active tab', async ({ page }) => {
await page.goto('/inbox')
await captureTransitions(page)
await page.getByRole('link', { name: /Stories/ }).click()
await expect(page).toHaveURL(/\/stories$/)
await waitForTransition(page)
expect(await recordedTransitions(page)).toContainEqual({ direction: 'forward', presentation: 'slide' })
test("uses route order for tab direction and does not animate the active tab", async ({
page,
}) => {
await page.goto("/inbox");
await captureTransitions(page);
await page.getByRole("link", { name: /Stories/ }).click();
await expect(page).toHaveURL(/\/stories$/);
await waitForTransition(page);
expect(await recordedTransitions(page)).toContainEqual({
direction: "forward",
presentation: "slide",
});
await captureTransitions(page)
await page.getByRole('link', { name: /Inbox/ }).click()
await expect(page).toHaveURL(/\/inbox$/)
await waitForTransition(page)
expect(await recordedTransitions(page)).toContainEqual({ direction: 'back', presentation: 'slide' })
await captureTransitions(page);
await page.getByRole("link", { name: /Inbox/ }).click();
await expect(page).toHaveURL(/\/inbox$/);
await waitForTransition(page);
expect(await recordedTransitions(page)).toContainEqual({
direction: "back",
presentation: "slide",
});
await captureTransitions(page)
await page.getByRole('link', { name: /Inbox/ }).click()
await page.waitForTimeout(100)
expect(await recordedTransitions(page)).toEqual([])
await expect(page).toHaveURL(/\/inbox$/)
})
await captureTransitions(page);
await page.getByRole("link", { name: /Inbox/ }).click();
await page.waitForTimeout(100);
expect(await recordedTransitions(page)).toEqual([]);
await expect(page).toHaveURL(/\/inbox$/);
});
test('interrupts an active tab animation when another tab is tapped', async ({ page }) => {
await page.goto('/inbox')
const routerView = page.locator('.nvr-router-view')
await page.getByRole('link', { name: /Stories/ }).click()
await expect(routerView).toHaveClass(/nvr-router-view--interactive/)
const firstTransaction = await routerView.getAttribute('data-native-transaction')
expect(firstTransaction).not.toBeNull()
test("interrupts an active tab animation when another tab is tapped", async ({
page,
}) => {
await page.goto("/inbox");
const routerView = page.locator(".nvr-router-view");
await page.getByRole("link", { name: /Stories/ }).click();
await expect(routerView).toHaveClass(/nvr-router-view--interactive/);
const firstTransaction = await routerView.getAttribute(
"data-native-transaction",
);
expect(firstTransaction).not.toBeNull();
await page.getByRole('link', { name: /You/ }).click()
await expect(routerView).not.toHaveAttribute('data-native-transaction', firstTransaction!, { timeout: 250 })
await expect(page.locator('[data-native-role="from"]')).toHaveAttribute('data-native-route', '/stories')
await expect(page.locator('[data-native-role="to"]')).toHaveAttribute('data-native-route', '/profile')
await expect(page).toHaveURL(/\/profile$/)
})
await page.getByRole("link", { name: /You/ }).click();
await expect(routerView).not.toHaveAttribute(
"data-native-transaction",
firstTransaction!,
{ timeout: 250 },
);
await expect(page.locator('[data-native-role="from"]')).toHaveAttribute(
"data-native-route",
"/stories",
);
await expect(page.locator('[data-native-role="to"]')).toHaveAttribute(
"data-native-route",
"/profile",
);
await expect(page).toHaveURL(/\/profile$/);
});
test('interrupts a settling push animation with an edge-back gesture', async ({ page }) => {
await page.goto('/inbox')
await page.getByText('Maya Chen').last().click()
await expect(page).toHaveURL(/\/chat\/maya$/)
const routerView = page.locator('.nvr-router-view')
await expect(routerView).toHaveClass(/nvr-router-view--interactive/)
const pushTransaction = await routerView.getAttribute('data-native-transaction')
test("interrupts a settling push animation with an edge-back gesture", async ({
page,
}) => {
await page.goto("/inbox");
await page.getByText("Maya Chen").last().click();
await expect(page).toHaveURL(/\/chat\/maya$/);
const routerView = page.locator(".nvr-router-view");
await expect(routerView).toHaveClass(/nvr-router-view--interactive/);
const pushTransaction = await routerView.getAttribute(
"data-native-transaction",
);
const frame = await page.locator('.app-frame').boundingBox()
if (!frame) throw new Error('App frame did not render')
await page.mouse.move(frame.x + 2, frame.y + frame.height * 0.5)
await page.mouse.down()
await page.mouse.move(frame.x + frame.width * 0.34, frame.y + frame.height * 0.5, { steps: 16 })
const frame = await page.locator(".app-frame").boundingBox();
if (!frame) throw new Error("App frame did not render");
await page.mouse.move(frame.x + 2, frame.y + frame.height * 0.5);
await page.mouse.down();
await page.mouse.move(
frame.x + frame.width * 0.34,
frame.y + frame.height * 0.5,
{ steps: 16 },
);
await expect(routerView).not.toHaveAttribute('data-native-transaction', pushTransaction!, { timeout: 250 })
await expect(page.locator('[data-native-role="from"]')).toHaveAttribute('data-native-route', '/chat/maya')
await expect(page.locator('[data-native-role="to"]')).toHaveAttribute('data-native-route', '/inbox')
await page.mouse.up()
})
await expect(routerView).not.toHaveAttribute(
"data-native-transaction",
pushTransaction!,
{ timeout: 250 },
);
await expect(page.locator('[data-native-role="from"]')).toHaveAttribute(
"data-native-route",
"/chat/maya",
);
await expect(page.locator('[data-native-role="to"]')).toHaveAttribute(
"data-native-route",
"/inbox",
);
await page.mouse.up();
});
test('moves sibling screens edge-to-edge at one-to-one drag progress', async ({ page }) => {
await page.goto('/stories')
const routerView = page.locator('.nvr-router-view')
const frame = await routerView.boundingBox()
if (!frame) throw new Error('Native router view did not render')
test("moves sibling screens edge-to-edge at one-to-one drag progress", async ({
page,
}) => {
await page.goto("/stories");
const routerView = page.locator(".nvr-router-view");
const frame = await routerView.boundingBox();
if (!frame) throw new Error("Native router view did not render");
await page.mouse.move(frame.x + frame.width * 0.55, frame.y + frame.height * 0.45)
await page.mouse.down()
await page.mouse.move(frame.x + frame.width * 0.8, frame.y + frame.height * 0.45, { steps: 18 })
await expect(routerView).toHaveAttribute('data-native-presentation', 'slide')
await expect(routerView).toHaveAttribute('data-native-direction', 'back')
await page.mouse.move(
frame.x + frame.width * 0.55,
frame.y + frame.height * 0.45,
);
await page.mouse.down();
await page.mouse.move(
frame.x + frame.width * 0.8,
frame.y + frame.height * 0.45,
{ steps: 18 },
);
await expect(routerView).toHaveAttribute("data-native-presentation", "slide");
await expect(routerView).toHaveAttribute("data-native-direction", "back");
const from = await page.locator('[data-native-role="from"]').boundingBox()
const to = await page.locator('[data-native-role="to"]').boundingBox()
if (!from || !to) throw new Error('Both sibling pages must be live during a drag')
expect(Math.abs(from.x - (to.x + to.width))).toBeLessThan(3)
await page.mouse.up()
})
const from = await page.locator('[data-native-role="from"]').boundingBox();
const to = await page.locator('[data-native-role="to"]').boundingBox();
if (!from || !to)
throw new Error("Both sibling pages must be live during a drag");
expect(Math.abs(from.x - (to.x + to.width))).toBeLessThan(3);
await page.mouse.up();
});
test('accepts a second fast tab flick while the first spring is still settling', async ({ page }) => {
await page.goto('/inbox')
const routerView = page.locator('.nvr-router-view')
test("accepts a second fast tab flick while the first spring is still settling", async ({
page,
}) => {
await page.goto("/inbox");
const routerView = page.locator(".nvr-router-view");
// Commit by distance with a deliberately slow final sample, leaving enough
// baseline spring for the second fast gesture to interrupt deterministically.
await flickToNextTab(page, true)
await expect(page).toHaveURL(/\/stories$/)
await expect(routerView).toHaveClass(/nvr-router-view--interactive/)
await flickToNextTab(page, true);
await expect(page).toHaveURL(/\/stories$/);
await expect(routerView).toHaveClass(/nvr-router-view--interactive/);
await flickToNextTab(page)
await expect(page).toHaveURL(/\/profile$/)
await waitForTransition(page)
await flickToNextTab(page);
await expect(page).toHaveURL(/\/profile$/);
await waitForTransition(page);
// A stale pointer-up cleanup used to leave an orphaned transaction here,
// permanently blocking both subsequent swipes and imperative tab links.
await page.getByRole('link', { name: /Inbox/ }).click()
await expect(page).toHaveURL(/\/inbox$/)
await waitForTransition(page)
await expect(routerView).not.toHaveAttribute('data-native-transaction')
})
await page.getByRole("link", { name: /Inbox/ }).click();
await expect(page).toHaveURL(/\/inbox$/);
await waitForTransition(page);
await expect(routerView).not.toHaveAttribute("data-native-transaction");
});
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()
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();
await expect(page.getByTestId('async-data-loading')).toBeVisible()
await expect(page).toHaveURL(/\/profile\/runtime-lab$/)
await expect(page.getByRole('navigation', { name: 'Primary navigation' })).toBeVisible()
await expect(page.getByRole('link', { name: /You/ })).toHaveAttribute('aria-current', 'page')
await expect(page.getByTestId('async-data-ready')).toBeVisible({ timeout: 2_000 })
await expect(page.getByTestId("async-data-loading")).toBeVisible();
await expect(page).toHaveURL(/\/profile\/runtime-lab$/);
await expect(
page.getByRole("navigation", { name: "Primary navigation" }),
).toBeVisible();
await expect(page.getByRole("link", { name: /You/ })).toHaveAttribute(
"aria-current",
"page",
);
await expect(page.getByTestId("async-data-ready")).toBeVisible({
timeout: 2_000,
});
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)
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);
// 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)
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-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!)
})
await page.evaluate(() => history.forward());
await expect(page).toHaveURL(/\/profile\/runtime-lab$/);
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('clicking the root tab from a pushed sibling collapses its back history', async ({ page }) => {
await page.goto('/profile')
await page.getByRole('link', { name: /Runtime stress lab/ }).click()
await expect(page).toHaveURL(/\/profile\/runtime-lab$/)
test("clicking the root tab from a pushed sibling collapses its back history", async ({
page,
}) => {
await page.goto("/profile");
await page.getByRole("link", { name: /Runtime stress lab/ }).click();
await expect(page).toHaveURL(/\/profile\/runtime-lab$/);
await page.getByRole('link', { name: /You/ }).click()
await expect(page).toHaveURL(/\/profile$/)
await waitForTransition(page)
await page.getByRole("link", { name: /You/ }).click();
await expect(page).toHaveURL(/\/profile$/);
await waitForTransition(page);
await expect(page.locator('.nvr-navigator')).toHaveAttribute('data-native-can-go-back', 'false')
await expect(page.getByTestId('runtime-lab-view')).toHaveCount(0)
})
await expect(page.locator(".nvr-navigator")).toHaveAttribute(
"data-native-can-go-back",
"false",
);
await expect(page.getByTestId("runtime-lab-view")).toHaveCount(0);
});
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)
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)
await page.getByRole("link", { name: /You/ }).click();
await expect(page).toHaveURL(/\/profile$/);
await waitForTransition(page);
await expect(stories).toHaveCount(1);
const hiddenTicks = Number(await stories.getAttribute('data-active-ticks'))
await page.waitForTimeout(600)
await expect(stories).toHaveAttribute('data-active-ticks', String(hiddenTicks))
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: /Stories/ }).click()
await expect(page).toHaveURL(/\/stories$/)
await waitForTransition(page)
await expect(stories).toHaveAttribute('data-mount-id', mountId!)
await expect.poll(async () => Number(await stories.getAttribute('data-active-ticks'))).toBeGreaterThan(hiddenTicks)
})
await page.getByRole("link", { name: /Stories/ }).click();
await expect(page).toHaveURL(/\/stories$/);
await waitForTransition(page);
await expect(stories).toHaveAttribute("data-mount-id", mountId!);
await expect
.poll(async () => Number(await stories.getAttribute("data-active-ticks")))
.toBeGreaterThan(hiddenTicks);
});
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')
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)
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()
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 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!)
})
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('manually unloads an inactive route through the public API demo', async ({ page }) => {
await page.goto('/stories')
await page.getByRole('link', { name: /You/ }).click()
await expect(page).toHaveURL(/\/profile$/)
await waitForTransition(page)
await expect(page.getByTestId('stories-view')).toHaveCount(1)
test("manually unloads an inactive route through the public API demo", async ({
page,
}) => {
await page.goto("/stories");
await page.getByRole("link", { name: /You/ }).click();
await expect(page).toHaveURL(/\/profile$/);
await waitForTransition(page);
await expect(page.getByTestId("stories-view")).toHaveCount(1);
await page.getByRole('link', { name: /Navigation lab/ }).click()
await expect(page).toHaveURL(/\/settings$/)
await waitForTransition(page)
await page.getByTestId('unload-stories').click()
await page.getByRole("link", { name: /Navigation lab/ }).click();
await expect(page).toHaveURL(/\/settings$/);
await waitForTransition(page);
await page.getByTestId("unload-stories").click();
await expect(page.getByTestId('unload-stories')).toHaveText('Unloaded 1 Stories view')
await expect(page.getByTestId('stories-view')).toHaveCount(0)
})
await expect(page.getByTestId("unload-stories")).toHaveText(
"Unloaded 1 Stories view",
);
await expect(page.getByTestId("stories-view")).toHaveCount(0);
});
test('records a navigation frame profile across route changes', async ({ page }) => {
await page.goto('/settings')
await page.getByTestId('profile-start').click()
await expect(page.locator('.profiler-badge')).toBeVisible()
test("records a navigation frame profile across route changes", async ({
page,
}) => {
await page.goto("/settings");
await page.getByTestId("profile-start").click();
await expect(page.locator(".profiler-badge")).toBeVisible();
await page.getByRole('button', { name: 'Back' }).click()
await expect(page).toHaveURL(/\/profile$/)
await waitForTransition(page)
await page.getByRole('link', { name: /Runtime stress lab/ }).click()
await expect(page).toHaveURL(/\/profile\/runtime-lab$/)
await page.getByRole('link', { name: /You/ }).click()
await expect(page).toHaveURL(/\/profile$/)
await waitForTransition(page)
await page.getByRole('link', { name: /Navigation lab/ }).click()
await expect(page).toHaveURL(/\/settings$/)
await waitForTransition(page)
await page.getByRole("button", { name: "Back" }).click();
await expect(page).toHaveURL(/\/profile$/);
await waitForTransition(page);
await page.getByRole("link", { name: /Runtime stress lab/ }).click();
await expect(page).toHaveURL(/\/profile\/runtime-lab$/);
await page.getByRole("link", { name: /You/ }).click();
await expect(page).toHaveURL(/\/profile$/);
await waitForTransition(page);
await page.getByRole("link", { name: /Navigation lab/ }).click();
await expect(page).toHaveURL(/\/settings$/);
await waitForTransition(page);
await page.getByTestId('profile-stop').click()
await expect(page.locator('.profiler-badge')).toHaveCount(0)
await expect(page.getByTestId('profile-status')).toContainText('navigations')
await expect(page.getByTestId('profile-export')).toBeEnabled()
})
await page.getByTestId("profile-stop").click();
await expect(page.locator(".profiler-badge")).toHaveCount(0);
await expect(page.getByTestId("profile-status")).toContainText("navigations");
await expect(page.getByTestId("profile-export")).toBeEnabled();
});
test('opens and dismisses the compose sheet', async ({ page }) => {
await page.goto('/inbox')
await page.getByRole('button', { name: 'Compose' }).click()
await expect(page).toHaveURL(/\/compose$/)
await expect(page.getByRole('heading', { name: 'New message' })).toBeVisible()
await page.getByRole('button', { name: 'Cancel' }).click()
await expect(page.getByRole('heading', { name: 'Messages' })).toBeVisible()
})
test("opens and dismisses the compose sheet", async ({ page }) => {
await page.goto("/inbox");
await page.getByRole("button", { name: "Compose" }).click();
await expect(page).toHaveURL(/\/compose$/);
await expect(
page.getByRole("heading", { name: "New message" }),
).toBeVisible();
await page.getByRole("button", { name: "Cancel" }).click();
await expect(page.getByRole("heading", { name: "Messages" })).toBeVisible();
});
test('keeps the target live during a held component drag', async ({ page }) => {
await page.goto('/inbox')
const row = page.locator('.conversation-row').first()
const box = await row.boundingBox()
if (!box) throw new Error('Conversation row did not render')
await page.mouse.move(box.x + box.width * 0.8, box.y + box.height / 2)
await page.mouse.down()
await page.mouse.move(box.x + box.width * 0.35, box.y + box.height / 2, { steps: 12 })
await expect(page.locator('[data-native-role="to"]')).toBeVisible()
await page.mouse.up()
await expect(page.getByRole('heading', { name: 'Maya Chen' })).toBeVisible()
})
test("keeps the target live during a held component drag", async ({ page }) => {
await page.goto("/inbox");
const row = page.locator(".conversation-row").first();
const box = await row.boundingBox();
if (!box) throw new Error("Conversation row did not render");
await page.mouse.move(box.x + box.width * 0.8, box.y + box.height / 2);
await page.mouse.down();
await page.mouse.move(box.x + box.width * 0.35, box.y + box.height / 2, {
steps: 12,
});
await expect(page.locator('[data-native-role="to"]')).toBeVisible();
await page.mouse.up();
await expect(page.getByRole("heading", { name: "Maya Chen" })).toBeVisible();
});
test('holds an edge-back preview without committing the URL', async ({ page }) => {
await page.goto('/inbox')
await page.getByText('Maya Chen').last().click()
await expect(page).toHaveURL(/\/chat\/maya$/)
const frame = await page.locator('.app-frame').boundingBox()
if (!frame) throw new Error('App frame did not render')
await page.mouse.move(frame.x + 2, frame.y + frame.height * 0.5)
await page.mouse.down()
await page.mouse.move(frame.x + frame.width * 0.55, frame.y + frame.height * 0.5, { steps: 14 })
await expect(page.locator('[data-native-role="to"]')).toBeVisible()
await expect(page).toHaveURL(/\/chat\/maya$/)
await page.mouse.up()
await expect(page.getByRole('heading', { name: 'Messages' })).toBeVisible()
})
test("holds an edge-back preview without committing the URL", async ({
page,
}) => {
await page.goto("/inbox");
await page.getByText("Maya Chen").last().click();
await expect(page).toHaveURL(/\/chat\/maya$/);
const frame = await page.locator(".app-frame").boundingBox();
if (!frame) throw new Error("App frame did not render");
await page.mouse.move(frame.x + 2, frame.y + frame.height * 0.5);
await page.mouse.down();
await page.mouse.move(
frame.x + frame.width * 0.55,
frame.y + frame.height * 0.5,
{ steps: 14 },
);
await expect(page.locator('[data-native-role="to"]')).toBeVisible();
await expect(page).toHaveURL(/\/chat\/maya$/);
await page.mouse.up();
await expect(page.getByRole("heading", { name: "Messages" })).toBeVisible();
});
test('never previews a stale conversation after a cancelled back gesture', async ({ page }) => {
await page.goto('/inbox')
await page.getByText('Maya Chen').last().click()
await page.getByRole('button', { name: 'Back' }).click()
await expect(page).toHaveURL(/\/inbox$/)
await waitForTransition(page)
await page.getByText('Noah Williams').last().click()
await expect(page).toHaveURL(/\/chat\/noah$/)
await waitForTransition(page)
test("never previews a stale conversation after a cancelled back gesture", async ({
page,
}) => {
await page.goto("/inbox");
await page.getByText("Maya Chen").last().click();
await page.getByRole("button", { name: "Back" }).click();
await expect(page).toHaveURL(/\/inbox$/);
await waitForTransition(page);
await page.getByText("Noah Williams").last().click();
await expect(page).toHaveURL(/\/chat\/noah$/);
await waitForTransition(page);
const frame = await page.locator('.app-frame').boundingBox()
if (!frame) throw new Error('App frame did not render')
await page.mouse.move(frame.x + 2, frame.y + frame.height * 0.5)
await page.mouse.down()
await page.mouse.move(frame.x + frame.width * 0.055, frame.y + frame.height * 0.5, { steps: 16 })
await page.mouse.up()
await waitForTransition(page)
await expect(page).toHaveURL(/\/chat\/noah$/)
const frame = await page.locator(".app-frame").boundingBox();
if (!frame) throw new Error("App frame did not render");
await page.mouse.move(frame.x + 2, frame.y + frame.height * 0.5);
await page.mouse.down();
await page.mouse.move(
frame.x + frame.width * 0.055,
frame.y + frame.height * 0.5,
{ steps: 16 },
);
await page.mouse.up();
await waitForTransition(page);
await expect(page).toHaveURL(/\/chat\/noah$/);
await page.getByRole('button', { name: 'Back' }).click()
const backTarget = page.locator('[data-native-role="to"]')
await expect(backTarget.getByRole('heading', { name: 'Messages' })).toBeVisible()
await expect(backTarget.getByRole('heading', { name: 'Maya Chen' })).toHaveCount(0)
await waitForTransition(page)
await expect(page).toHaveURL(/\/inbox$/)
})
await page.getByRole("button", { name: "Back" }).click();
const backTarget = page.locator('[data-native-role="to"]');
await expect(
backTarget.getByRole("heading", { name: "Messages" }),
).toBeVisible();
await expect(
backTarget.getByRole("heading", { name: "Maya Chen" }),
).toHaveCount(0);
await waitForTransition(page);
await expect(page).toHaveURL(/\/inbox$/);
});
test('always opens compose as a vertical sheet after prior navigation', async ({ page }) => {
await page.goto('/inbox')
await page.getByText('Maya Chen').last().click()
await page.getByRole('button', { name: 'Back' }).click()
await expect(page).toHaveURL(/\/inbox$/)
await waitForTransition(page)
await page.getByRole('link', { name: /Stories/ }).click()
await expect(page).toHaveURL(/\/stories$/)
await waitForTransition(page)
await page.getByRole('link', { name: /Inbox/ }).click()
await expect(page).toHaveURL(/\/inbox$/)
await waitForTransition(page)
test("always opens compose as a vertical sheet after prior navigation", async ({
page,
}) => {
await page.goto("/inbox");
await page.getByText("Maya Chen").last().click();
await page.getByRole("button", { name: "Back" }).click();
await expect(page).toHaveURL(/\/inbox$/);
await waitForTransition(page);
await page.getByRole("link", { name: /Stories/ }).click();
await expect(page).toHaveURL(/\/stories$/);
await waitForTransition(page);
await page.getByRole("link", { name: /Inbox/ }).click();
await expect(page).toHaveURL(/\/inbox$/);
await waitForTransition(page);
await page.getByRole('button', { name: 'Compose' }).click()
const routerView = page.locator('.nvr-router-view')
await expect(routerView).toHaveAttribute('data-native-presentation', 'sheet')
await expect(routerView).toHaveAttribute('data-native-direction', 'up')
const frame = await routerView.boundingBox()
const sheet = await page.locator('[data-native-role="to"]').boundingBox()
if (!frame || !sheet) throw new Error('Sheet transition did not render')
expect(Math.abs(frame.x - sheet.x)).toBeLessThan(3)
await waitForTransition(page)
await page.getByRole('button', { name: 'Cancel' }).click()
})
await page.getByRole("button", { name: "Compose" }).click();
const routerView = page.locator(".nvr-router-view");
await expect(routerView).toHaveAttribute("data-native-presentation", "sheet");
await expect(routerView).toHaveAttribute("data-native-direction", "up");
const frame = await routerView.boundingBox();
const sheet = await page.locator('[data-native-role="to"]').boundingBox();
if (!frame || !sheet) throw new Error("Sheet transition did not render");
expect(Math.abs(frame.x - sheet.x)).toBeLessThan(3);
await waitForTransition(page);
await page.getByRole("button", { name: "Cancel" }).click();
});
test('drags a sheet down to dismiss it', async ({ page }) => {
await page.goto('/inbox')
await page.getByRole('button', { name: 'Compose' }).click()
const sheet = await page.locator('.sheet-screen').boundingBox()
if (!sheet) throw new Error('Sheet did not render')
await page.mouse.move(sheet.x + sheet.width / 2, sheet.y + 12)
await page.mouse.down()
await page.mouse.move(sheet.x + sheet.width / 2, sheet.y + sheet.height * 0.55, { steps: 14 })
await page.mouse.up()
await expect(page.getByRole('heading', { name: 'Messages' })).toBeVisible()
})
test("drags a sheet down to dismiss it", async ({ page }) => {
await page.goto("/inbox");
await page.getByRole("button", { name: "Compose" }).click();
const sheet = await page.locator(".sheet-screen").boundingBox();
if (!sheet) throw new Error("Sheet did not render");
await page.mouse.move(sheet.x + sheet.width / 2, sheet.y + 12);
await page.mouse.down();
await page.mouse.move(
sheet.x + sheet.width / 2,
sheet.y + sheet.height * 0.55,
{ steps: 14 },
);
await page.mouse.up();
await expect(page.getByRole("heading", { name: "Messages" })).toBeVisible();
});

215
apps/demo/e2e/pwa.spec.ts
View File

@@ -1,92 +1,157 @@
import { expect, test } from '@playwright/test'
import { expect, test } from "@playwright/test";
const iphoneUserAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 18_5 like Mac OS X) AppleWebKit/605.1.15 Version/18.5 Mobile/15E148 Safari/604.1'
const iphoneUserAgent =
"Mozilla/5.0 (iPhone; CPU iPhone OS 18_5 like Mac OS X) AppleWebKit/605.1.15 Version/18.5 Mobile/15E148 Safari/604.1";
async function dispatchTouchStart(page: import('@playwright/test').Page, clientX: number) {
return await page.locator('.nvr-navigator').evaluate((element, x) => {
const event = new Event('touchstart', { bubbles: true, cancelable: true })
Object.defineProperty(event, 'touches', {
async function dispatchTouchStart(
page: import("@playwright/test").Page,
clientX: number,
) {
return await page.locator(".nvr-navigator").evaluate((element, x) => {
const event = new Event("touchstart", { bubbles: true, cancelable: true });
Object.defineProperty(event, "touches", {
value: [{ identifier: 7, clientX: x, clientY: 240 }],
})
return { dispatched: element.dispatchEvent(event), prevented: event.defaultPrevented }
}, clientX)
});
return {
dispatched: element.dispatchEvent(event),
prevented: event.defaultPrevented,
};
}, clientX);
}
test('ships an installable standalone manifest and iOS metadata', async ({ page, request }) => {
await page.goto('/inbox')
await expect(page.locator('meta[name="apple-mobile-web-app-capable"]')).toHaveAttribute('content', 'yes')
await expect(page.locator('meta[name="apple-mobile-web-app-status-bar-style"]')).toHaveAttribute('content', 'black-translucent')
const touchIconPath = await page.locator('link[rel="apple-touch-icon"]').evaluate((link) =>
new URL(link.getAttribute('href') ?? '', document.baseURI).pathname,
)
expect(touchIconPath).toBe('/apple-touch-icon.png')
test("ships an installable standalone manifest and iOS metadata", async ({
page,
request,
}) => {
await page.goto("/inbox");
await expect(
page.locator('meta[name="apple-mobile-web-app-capable"]'),
).toHaveAttribute("content", "yes");
await expect(
page.locator('meta[name="apple-mobile-web-app-status-bar-style"]'),
).toHaveAttribute("content", "black-translucent");
const touchIconPath = await page
.locator('link[rel="apple-touch-icon"]')
.evaluate(
(link) =>
new URL(link.getAttribute("href") ?? "", document.baseURI).pathname,
);
expect(touchIconPath).toBe("/apple-touch-icon.png");
const manifestResponse = await request.get('/manifest.webmanifest')
expect(manifestResponse.ok()).toBe(true)
const manifest = await manifestResponse.json()
expect(manifest).toMatchObject({ id: '/', scope: '/', start_url: '/', display: 'standalone' })
expect(manifest.icons).toEqual(expect.arrayContaining([
expect.objectContaining({ src: '/pwa-192.png', sizes: '192x192', type: 'image/png' }),
expect.objectContaining({ src: '/pwa-512.png', sizes: '512x512', type: 'image/png' }),
]))
expect((await request.get('/apple-touch-icon.png')).headers()['content-type']).toContain('image/png')
const workerResponse = await request.get('/sw.js')
expect(workerResponse.ok()).toBe(true)
expect(workerResponse.headers()['cache-control']).toContain('no-cache')
const worker = await workerResponse.text()
expect(worker).toContain('self.skipWaiting()')
expect(worker).toContain('clientsClaim()')
})
const manifestResponse = await request.get("/manifest.webmanifest");
expect(manifestResponse.ok()).toBe(true);
const manifest = await manifestResponse.json();
expect(manifest).toMatchObject({
id: "/",
scope: "/",
start_url: "/",
display: "standalone",
});
expect(manifest.icons).toEqual(
expect.arrayContaining([
expect.objectContaining({
src: "/pwa-192.png",
sizes: "192x192",
type: "image/png",
}),
expect.objectContaining({
src: "/pwa-512.png",
sizes: "512x512",
type: "image/png",
}),
]),
);
expect(
(await request.get("/apple-touch-icon.png")).headers()["content-type"],
).toContain("image/png");
const workerResponse = await request.get("/sw.js");
expect(workerResponse.ok()).toBe(true);
expect(workerResponse.headers()["cache-control"]).toContain("no-cache");
const worker = await workerResponse.text();
expect(worker).toContain("self.skipWaiting()");
expect(worker).toContain("clientsClaim()");
});
test('does not interfere with Safari edge touches before Home Screen installation', async ({ page }) => {
test("does not interfere with Safari edge touches before Home Screen installation", async ({
page,
}) => {
await page.addInitScript((userAgent) => {
Object.defineProperty(navigator, 'userAgent', { configurable: true, value: userAgent })
Object.defineProperty(navigator, 'standalone', { configurable: true, value: false })
}, iphoneUserAgent)
await page.goto('/chat/maya')
await expect(page.locator('html')).toHaveAttribute('data-pwa-display-mode', 'browser')
await expect(page.locator('html')).toHaveAttribute('data-pwa-edge-guard', 'inactive')
expect((await dispatchTouchStart(page, 1)).prevented).toBe(false)
})
Object.defineProperty(navigator, "userAgent", {
configurable: true,
value: userAgent,
});
Object.defineProperty(navigator, "standalone", {
configurable: true,
value: false,
});
}, iphoneUserAgent);
await page.goto("/chat/maya");
await expect(page.locator("html")).toHaveAttribute(
"data-pwa-display-mode",
"browser",
);
await expect(page.locator("html")).toHaveAttribute(
"data-pwa-edge-guard",
"inactive",
);
expect((await dispatchTouchStart(page, 1)).prevented).toBe(false);
});
test('reserves only the leading edge in an installed iOS PWA', async ({ page }) => {
test("reserves only the leading edge in an installed iOS PWA", async ({
page,
}) => {
await page.addInitScript((userAgent) => {
Object.defineProperty(navigator, 'userAgent', { configurable: true, value: userAgent })
Object.defineProperty(navigator, 'standalone', { configurable: true, value: true })
}, iphoneUserAgent)
await page.goto('/chat/maya')
const root = page.locator('html')
await expect(root).toHaveAttribute('data-pwa-platform', 'ios')
await expect(root).toHaveAttribute('data-pwa-display-mode', 'standalone')
await expect(root).toHaveAttribute('data-pwa-edge-guard', 'active')
Object.defineProperty(navigator, "userAgent", {
configurable: true,
value: userAgent,
});
Object.defineProperty(navigator, "standalone", {
configurable: true,
value: true,
});
}, iphoneUserAgent);
await page.goto("/chat/maya");
const root = page.locator("html");
await expect(root).toHaveAttribute("data-pwa-platform", "ios");
await expect(root).toHaveAttribute("data-pwa-display-mode", "standalone");
await expect(root).toHaveAttribute("data-pwa-edge-guard", "active");
expect((await dispatchTouchStart(page, 80)).prevented).toBe(false)
expect((await dispatchTouchStart(page, 1)).prevented).toBe(true)
await expect(root).toHaveAttribute('data-pwa-edge-claims', '1')
})
expect((await dispatchTouchStart(page, 80)).prevented).toBe(false);
expect((await dispatchTouchStart(page, 1)).prevented).toBe(true);
await expect(root).toHaveAttribute("data-pwa-edge-claims", "1");
});
test('registers and activates the offline service worker', async ({ page }) => {
await page.goto('/inbox')
test("registers and activates the offline service worker", async ({ page }) => {
await page.goto("/inbox");
const workerUrl = await page.evaluate(async () => {
const registration = await navigator.serviceWorker.ready
return registration.active?.scriptURL ?? ''
})
expect(workerUrl).toMatch(/\/sw\.js$/)
await expect(page.locator('html')).not.toHaveAttribute('data-pwa-update-checks', '0')
})
const registration = await navigator.serviceWorker.ready;
return registration.active?.scriptURL ?? "";
});
expect(workerUrl).toMatch(/\/sw\.js$/);
await expect(page.locator("html")).not.toHaveAttribute(
"data-pwa-update-checks",
"0",
);
});
test('precaches lazily split routes for offline navigation', async ({ page }) => {
await page.goto('/inbox')
await page.evaluate(async () => { await navigator.serviceWorker.ready })
test("precaches lazily split routes for offline navigation", async ({
page,
}) => {
await page.goto("/inbox");
await page.evaluate(async () => {
await navigator.serviceWorker.ready;
});
const cachedUrls = await page.evaluate(async () => {
const urls: string[] = []
const urls: string[] = [];
for (const name of await caches.keys()) {
const cache = await caches.open(name)
urls.push(...(await cache.keys()).map((request) => request.url))
const cache = await caches.open(name);
urls.push(...(await cache.keys()).map((request) => request.url));
}
return urls
})
expect(cachedUrls.some((url) => /StoriesView-.*\.js$/.test(url))).toBe(true)
expect(cachedUrls.some((url) => /ProfileView-.*\.js$/.test(url))).toBe(true)
expect(cachedUrls.some((url) => /RuntimeLabView-.*\.js$/.test(url))).toBe(true)
})
return urls;
});
expect(cachedUrls.some((url) => /StoriesView-.*\.js$/.test(url))).toBe(true);
expect(cachedUrls.some((url) => /ProfileView-.*\.js$/.test(url))).toBe(true);
expect(cachedUrls.some((url) => /RuntimeLabView-.*\.js$/.test(url))).toBe(
true,
);
});

2
apps/demo/src/components/AsyncLabData.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
const requestedAt = Date.now()
await new Promise((resolve) => window.setTimeout(resolve, 1_000))
await new Promise((resolve) => window.setTimeout(resolve, 3_000))
const resolutionTime = Date.now() - requestedAt
</script>

302
apps/demo/src/data.ts
View File

@@ -1,103 +1,207 @@
import { computed, reactive, readonly, ref } from 'vue'
import { computed, reactive, readonly, ref } from "vue";
export interface Person {
id: string
name: string
handle: string
color: string
online: boolean
bio: string
id: string;
name: string;
handle: string;
color: string;
online: boolean;
bio: string;
}
export interface Message {
id: string
personId: string
body: string
sentAt: number
mine: boolean
status: 'sent' | 'delivered' | 'failed'
id: string;
personId: string;
body: string;
sentAt: number;
mine: boolean;
status: "sent" | "delivered" | "failed";
}
export interface Conversation {
id: string
personId: string
unread: number
pinned?: boolean
messages: Message[]
id: string;
personId: string;
unread: number;
pinned?: boolean;
messages: Message[];
}
const people: Person[] = [
{ id: 'maya', name: 'Maya Chen', handle: '@mayac', color: '#ff7a8a', online: true, bio: 'Product designer · Sydney to everywhere.' },
{ id: 'noah', name: 'Noah Williams', handle: '@noahw', color: '#4f9cff', online: true, bio: 'Film, tiny cameras, and very long walks.' },
{ id: 'sofia', name: 'Sofia Rossi', handle: '@sofiar', color: '#9d67ff', online: false, bio: 'Making typefaces and better pasta.' },
{ id: 'liam', name: 'Liam Park', handle: '@liamp', color: '#35c7a0', online: true, bio: 'Engineer. Climber. Questionable DJ.' },
{ id: 'amara', name: 'Amara Okafor', handle: '@amarao', color: '#f4ad42', online: false, bio: 'Architecture and cities after dark.' },
]
{
id: "maya",
name: "Maya Chen",
handle: "@mayac",
color: "#ff7a8a",
online: true,
bio: "Product designer · Sydney to everywhere.",
},
{
id: "noah",
name: "Noah Williams",
handle: "@noahw",
color: "#4f9cff",
online: true,
bio: "Film, tiny cameras, and very long walks.",
},
{
id: "sofia",
name: "Sofia Rossi",
handle: "@sofiar",
color: "#9d67ff",
online: false,
bio: "Making typefaces and better pasta.",
},
{
id: "liam",
name: "Liam Park",
handle: "@liamp",
color: "#35c7a0",
online: true,
bio: "Engineer. Climber. Questionable DJ.",
},
{
id: "amara",
name: "Amara Okafor",
handle: "@amarao",
color: "#f4ad42",
online: false,
bio: "Architecture and cities after dark.",
},
];
const timestamp = Date.now()
const timestamp = Date.now();
const seedConversations: Conversation[] = [
{
id: 'maya', personId: 'maya', unread: 2, pinned: true,
id: "maya",
personId: "maya",
unread: 2,
pinned: true,
messages: [
{ id: 'm1', personId: 'maya', body: 'That transition feels ridiculously smooth ✨', sentAt: timestamp - 840_000, mine: false, status: 'delivered' },
{ id: 'm2', personId: 'maya', body: 'Try holding it halfway, then let go slowly.', sentAt: timestamp - 780_000, mine: false, status: 'delivered' },
{
id: "m1",
personId: "maya",
body: "That transition feels ridiculously smooth ✨",
sentAt: timestamp - 840_000,
mine: false,
status: "delivered",
},
{
id: "m2",
personId: "maya",
body: "Try holding it halfway, then let go slowly.",
sentAt: timestamp - 780_000,
mine: false,
status: "delivered",
},
],
},
{
id: 'noah', personId: 'noah', unread: 0,
id: "noah",
personId: "noah",
unread: 0,
messages: [
{ id: 'n1', personId: 'noah', body: 'Uploaded the photos from yesterday.', sentAt: timestamp - 4_200_000, mine: false, status: 'delivered' },
{ id: 'n2', personId: 'noah', body: 'The grain is perfect.', sentAt: timestamp - 4_000_000, mine: true, status: 'delivered' },
{
id: "n1",
personId: "noah",
body: "Uploaded the photos from yesterday.",
sentAt: timestamp - 4_200_000,
mine: false,
status: "delivered",
},
{
id: "n2",
personId: "noah",
body: "The grain is perfect.",
sentAt: timestamp - 4_000_000,
mine: true,
status: "delivered",
},
],
},
{
id: 'sofia', personId: 'sofia', unread: 1,
messages: [{ id: 's1', personId: 'sofia', body: 'Coffee at the new place tomorrow?', sentAt: timestamp - 18_000_000, mine: false, status: 'delivered' }],
id: "sofia",
personId: "sofia",
unread: 1,
messages: [
{
id: "s1",
personId: "sofia",
body: "Coffee at the new place tomorrow?",
sentAt: timestamp - 18_000_000,
mine: false,
status: "delivered",
},
],
},
{
id: 'liam', personId: 'liam', unread: 0,
messages: [{ id: 'l1', personId: 'liam', body: 'The build is green. Ship it.', sentAt: timestamp - 86_000_000, mine: false, status: 'delivered' }],
id: "liam",
personId: "liam",
unread: 0,
messages: [
{
id: "l1",
personId: "liam",
body: "The build is green. Ship it.",
sentAt: timestamp - 86_000_000,
mine: false,
status: "delivered",
},
],
},
{
id: 'amara', personId: 'amara', unread: 0,
messages: [{ id: 'a1', personId: 'amara', body: 'This city never really goes quiet.', sentAt: timestamp - 172_000_000, mine: false, status: 'delivered' }],
id: "amara",
personId: "amara",
unread: 0,
messages: [
{
id: "a1",
personId: "amara",
body: "This city never really goes quiet.",
sentAt: timestamp - 172_000_000,
mine: false,
status: "delivered",
},
]
],
},
];
const conversations = ref<Conversation[]>(structuredClone(seedConversations))
const ready = ref(false)
const offline = ref(!navigator.onLine)
const settings = reactive({ simulatedLatency: 180, simulateFailures: false })
const conversations = ref<Conversation[]>(structuredClone(seedConversations));
const ready = ref(false);
const offline = ref(!navigator.onLine);
const settings = reactive({ simulatedLatency: 180, simulateFailures: false });
function openDatabase() {
return new Promise<IDBDatabase>((resolve, reject) => {
const request = indexedDB.open('native-vue-messenger', 1)
request.onupgradeneeded = () => request.result.createObjectStore('state')
request.onsuccess = () => resolve(request.result)
request.onerror = () => reject(request.error)
})
const request = indexedDB.open("native-vue-messenger", 1);
request.onupgradeneeded = () => request.result.createObjectStore("state");
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error);
});
}
async function readStored() {
const database = await openDatabase()
const database = await openDatabase();
return await new Promise<Conversation[] | undefined>((resolve, reject) => {
const transaction = database.transaction('state', 'readonly')
const request = transaction.objectStore('state').get('conversations')
request.onsuccess = () => resolve(request.result as Conversation[] | undefined)
request.onerror = () => reject(request.error)
}).finally(() => database.close())
const transaction = database.transaction("state", "readonly");
const request = transaction.objectStore("state").get("conversations");
request.onsuccess = () =>
resolve(request.result as Conversation[] | undefined);
request.onerror = () => reject(request.error);
}).finally(() => database.close());
}
async function persist() {
try {
const database = await openDatabase()
const database = await openDatabase();
await new Promise<void>((resolve, reject) => {
const transaction = database.transaction('state', 'readwrite')
transaction.objectStore('state').put(structuredClone(conversations.value), 'conversations')
transaction.oncomplete = () => resolve()
transaction.onerror = () => reject(transaction.error)
})
database.close()
const transaction = database.transaction("state", "readwrite");
transaction
.objectStore("state")
.put(structuredClone(conversations.value), "conversations");
transaction.oncomplete = () => resolve();
transaction.onerror = () => reject(transaction.error);
});
database.close();
} catch {
// Private browsing and locked-down webviews can reject IndexedDB.
}
@@ -105,48 +209,58 @@ async function persist() {
async function initialize() {
try {
const stored = await readStored()
if (stored?.length) conversations.value = stored
else await persist()
const stored = await readStored();
if (stored?.length) conversations.value = stored;
else await persist();
} finally {
ready.value = true
ready.value = true;
}
}
window.addEventListener('online', () => { offline.value = false })
window.addEventListener('offline', () => { offline.value = true })
void initialize()
window.addEventListener("online", () => {
offline.value = false;
});
window.addEventListener("offline", () => {
offline.value = true;
});
void initialize();
export function useDemoStore() {
const conversationFor = (id: string) => computed(() => conversations.value.find((conversation) => conversation.id === id))
const personFor = (id: string) => people.find((person) => person.id === id)
const conversationFor = (id: string) =>
computed(() =>
conversations.value.find((conversation) => conversation.id === id),
);
const personFor = (id: string) => people.find((person) => person.id === id);
const markRead = (id: string) => {
const conversation = conversations.value.find((item) => item.id === id)
if (conversation) conversation.unread = 0
void persist()
}
const conversation = conversations.value.find((item) => item.id === id);
if (conversation) conversation.unread = 0;
void persist();
};
const sendMessage = async (id: string, body: string) => {
const conversation = conversations.value.find((item) => item.id === id)
if (!conversation || !body.trim()) return false
const conversation = conversations.value.find((item) => item.id === id);
if (!conversation || !body.trim()) return false;
const message: Message = {
id: crypto.randomUUID(),
personId: id,
body: body.trim(),
sentAt: Date.now(),
mine: true,
status: 'sent',
}
conversation.messages.push(message)
await persist()
await new Promise((resolve) => window.setTimeout(resolve, settings.simulatedLatency))
message.status = settings.simulateFailures || offline.value ? 'failed' : 'delivered'
await persist()
return message.status === 'delivered'
}
status: "sent",
};
conversation.messages.push(message);
await persist();
await new Promise((resolve) =>
window.setTimeout(resolve, settings.simulatedLatency),
);
message.status =
settings.simulateFailures || offline.value ? "failed" : "delivered";
await persist();
return message.status === "delivered";
};
const reset = async () => {
conversations.value = structuredClone(seedConversations)
await persist()
}
conversations.value = structuredClone(seedConversations);
await persist();
};
return {
people: readonly(ref(people)),
conversations: readonly(conversations),
@@ -158,14 +272,14 @@ export function useDemoStore() {
markRead,
sendMessage,
reset,
}
};
}
export function relativeTime(value: number) {
const minutes = Math.floor((Date.now() - value) / 60_000)
if (minutes < 1) return 'now'
if (minutes < 60) return `${minutes}m`
const hours = Math.floor(minutes / 60)
if (hours < 24) return `${hours}h`
return `${Math.floor(hours / 24)}d`
const minutes = Math.floor((Date.now() - value) / 60_000);
if (minutes < 1) return "now";
if (minutes < 60) return `${minutes}m`;
const hours = Math.floor(minutes / 60);
if (hours < 24) return `${hours}h`;
return `${Math.floor(hours / 24)}d`;
}

48
apps/demo/src/guard-state.ts
View File

@@ -1,50 +1,50 @@
import { readonly, reactive } from 'vue'
import { readonly, reactive } from "vue";
function createGuardState() {
return reactive({
blockEntry: false,
checks: 0,
status: 'idle' as 'idle' | 'checking' | 'allowed' | 'blocked',
})
status: "idle" as "idle" | "checking" | "allowed" | "blocked",
});
}
const storyState = createGuardState()
const labState = createGuardState()
const storyState = createGuardState();
const labState = createGuardState();
export const storyEntryGuard = readonly(storyState)
export const runtimeLabGuard = readonly(labState)
export const storyEntryGuard = readonly(storyState);
export const runtimeLabGuard = readonly(labState);
export function setStoryEntryBlocked(blocked: boolean) {
storyState.blockEntry = blocked
if (storyState.status !== 'checking') storyState.status = 'idle'
storyState.blockEntry = blocked;
if (storyState.status !== "checking") storyState.status = "idle";
}
async function evaluate(state: ReturnType<typeof createGuardState>) {
state.checks += 1
state.status = 'checking'
await new Promise((resolve) => window.setTimeout(resolve, 320))
const allowed = !state.blockEntry
state.status = allowed ? 'allowed' : 'blocked'
return allowed
state.checks += 1;
state.status = "checking";
await new Promise((resolve) => window.setTimeout(resolve, 320));
const allowed = !state.blockEntry;
state.status = allowed ? "allowed" : "blocked";
return allowed;
}
/** Dynamic guard used to reject a sibling that may already be cached. */
export function evaluateStoryEntry() {
storyState.checks += 1
storyState.checks += 1;
if (!storyState.blockEntry) {
storyState.status = 'allowed'
return true
storyState.status = "allowed";
return true;
}
storyState.status = 'checking'
storyState.status = "checking";
return new Promise<boolean>((resolve) => {
window.setTimeout(() => {
storyState.status = 'blocked'
resolve(false)
}, 320)
})
storyState.status = "blocked";
resolve(false);
}, 320);
});
}
/** Always-allowing asynchronous guard for the deeper stress-lab route. */
export function evaluateRuntimeLabEntry() {
return evaluate(labState)
return evaluate(labState);
}

39
apps/demo/src/main.ts
View File

@@ -1,29 +1,32 @@
import { createApp } from 'vue'
import { createNativeRouter } from '@native-vue-router/core'
import { createCapacitorAdapter } from '@native-vue-router/capacitor'
import { createElectronRendererAdapter } from '@native-vue-router/electron'
import App from './App.vue'
import { createPwaAdapter } from './pwa'
import { router } from './router'
import './style.css'
import { createApp } from "vue";
import { createNativeRouter } from "@native-vue-router/core";
import { createCapacitorAdapter } from "@native-vue-router/capacitor";
import { createElectronRendererAdapter } from "@native-vue-router/electron";
import App from "./App.vue";
import { createPwaAdapter } from "./pwa";
import { router } from "./router";
import "./style.css";
const isElectron = navigator.userAgent.toLowerCase().includes('electron')
const capacitorPlatform = createCapacitorAdapter({ haptics: true, exitAtRoot: true })
const isElectron = navigator.userAgent.toLowerCase().includes("electron");
const capacitorPlatform = createCapacitorAdapter({
haptics: true,
exitAtRoot: true,
});
const platform = isElectron
? createElectronRendererAdapter()
: capacitorPlatform.name !== 'capacitor-web'
: capacitorPlatform.name !== "capacitor-web"
? capacitorPlatform
: createPwaAdapter()
: createPwaAdapter();
const nativeRouter = createNativeRouter({
router,
cache: { maxInactive: 4 },
platform,
})
});
const app = createApp(App)
app.use(router)
app.use(nativeRouter)
const app = createApp(App);
app.use(router);
app.use(nativeRouter);
await router.isReady()
app.mount('#app')
await router.isReady();
app.mount("#app");

84
apps/demo/src/navigation-profiler.ts
View File

@@ -1,66 +1,74 @@
import { ref } from 'vue'
import { ref } from "vue";
import {
createNativeNavigationProfiler,
type NativeNavigationProfiler,
type NativeProfilerReport,
type NativeRouterRuntime,
} from '@native-vue-router/core'
import { pwaBuildId } from './pwa'
} from "@native-vue-router/core";
import { pwaBuildId } from "./pwa";
let profiler: NativeNavigationProfiler | undefined
export const profilerRecording = ref(false)
export const profilerHasCapture = ref(false)
let profiler: NativeNavigationProfiler | undefined;
export const profilerRecording = ref(false);
export const profilerHasCapture = ref(false);
function instance(runtime: NativeRouterRuntime) {
profiler ??= createNativeNavigationProfiler(runtime, {
metadata: { app: 'nvr-messenger-demo', build: pwaBuildId },
})
return profiler
metadata: { app: "nvr-messenger-demo", build: pwaBuildId },
});
return profiler;
}
export function startDemoProfile(runtime: NativeRouterRuntime) {
const active = instance(runtime)
active.start()
profilerRecording.value = true
profilerHasCapture.value = true
const active = instance(runtime);
active.start();
profilerRecording.value = true;
profilerHasCapture.value = true;
}
export function stopDemoProfile(runtime: NativeRouterRuntime) {
const report = instance(runtime).stop()
profilerRecording.value = false
return report
const report = instance(runtime).stop();
profilerRecording.value = false;
return report;
}
export function snapshotDemoProfile(runtime: NativeRouterRuntime) {
return instance(runtime).snapshot()
return instance(runtime).snapshot();
}
export async function shareDemoProfile(runtime: NativeRouterRuntime, report?: NativeProfilerReport) {
const active = instance(runtime)
const current = report ?? (profilerRecording.value ? stopDemoProfile(runtime) : active.snapshot())
const json = active.toJSON(current)
const stamp = new Date().toISOString().replaceAll(':', '-').replaceAll('.', '-')
const filename = `native-vue-router-profile-${stamp}.json`
const file = new File([json], filename, { type: 'application/json' })
export async function shareDemoProfile(
runtime: NativeRouterRuntime,
report?: NativeProfilerReport,
) {
const active = instance(runtime);
const current =
report ??
(profilerRecording.value ? stopDemoProfile(runtime) : active.snapshot());
const json = active.toJSON(current);
const stamp = new Date()
.toISOString()
.replaceAll(":", "-")
.replaceAll(".", "-");
const filename = `native-vue-router-profile-${stamp}.json`;
const file = new File([json], filename, { type: "application/json" });
const shareNavigator = navigator as Navigator & {
canShare?: (data: ShareData) => boolean
share?: (data: ShareData) => Promise<void>
}
canShare?: (data: ShareData) => boolean;
share?: (data: ShareData) => Promise<void>;
};
if (shareNavigator.share && shareNavigator.canShare?.({ files: [file] })) {
await shareNavigator.share({
title: 'Native Vue Router performance profile',
text: 'Frame pacing and navigation diagnostics. Route params and query values are omitted.',
title: "Native Vue Router performance profile",
text: "Frame pacing and navigation diagnostics. Route params and query values are omitted.",
files: [file],
})
return { report: current, method: 'shared' as const }
});
return { report: current, method: "shared" as const };
}
const url = URL.createObjectURL(file)
const link = document.createElement('a')
link.href = url
link.download = filename
link.click()
window.setTimeout(() => URL.revokeObjectURL(url), 1_000)
return { report: current, method: 'downloaded' as const }
const url = URL.createObjectURL(file);
const link = document.createElement("a");
link.href = url;
link.download = filename;
link.click();
window.setTimeout(() => URL.revokeObjectURL(url), 1_000);
return { report: current, method: "downloaded" as const };
}

208
apps/demo/src/pwa.ts
View File

@@ -1,62 +1,77 @@
import { reactive, readonly } from 'vue'
import type { NativePlatformAdapter } from '@native-vue-router/core'
import { reactive, readonly } from "vue";
import type { NativePlatformAdapter } from "@native-vue-router/core";
interface StandaloneNavigator extends Navigator {
standalone?: boolean
standalone?: boolean;
}
type ServiceWorkerState = 'unsupported' | 'installing' | 'ready'
export type PwaUpdateState = 'idle' | 'checking' | 'current' | 'ready' | 'error'
type ServiceWorkerState = "unsupported" | "installing" | "ready";
export type PwaUpdateState =
"idle" | "checking" | "current" | "ready" | "error";
declare const __NVR_BUILD_ID__: string
declare const __NVR_BUILD_ID__: string;
export const pwaBuildId = __NVR_BUILD_ID__
export const pwaBuildId = __NVR_BUILD_ID__;
const state = reactive({
ios: false,
standalone: false,
edgeGuard: false,
edgeClaims: 0,
serviceWorker: 'installing' as ServiceWorkerState,
updateState: 'idle' as PwaUpdateState,
serviceWorker: "installing" as ServiceWorkerState,
updateState: "idle" as PwaUpdateState,
updateChecks: 0,
})
});
export const pwaEnvironment = readonly(state)
export const pwaEnvironment = readonly(state);
export function recordPwaUpdateState(updateState: PwaUpdateState, checked = false) {
state.updateState = updateState
if (checked) state.updateChecks += 1
document.documentElement.dataset.pwaUpdateState = state.updateState
document.documentElement.dataset.pwaUpdateChecks = String(state.updateChecks)
export function recordPwaUpdateState(
updateState: PwaUpdateState,
checked = false,
) {
state.updateState = updateState;
if (checked) state.updateChecks += 1;
document.documentElement.dataset.pwaUpdateState = state.updateState;
document.documentElement.dataset.pwaUpdateChecks = String(state.updateChecks);
}
export function isIOSWebKit() {
const navigatorWithTouch = navigator as Navigator & { maxTouchPoints?: number }
return /iPad|iPhone|iPod/.test(navigator.userAgent)
|| (/Macintosh/.test(navigator.userAgent) && (navigatorWithTouch.maxTouchPoints ?? 0) > 1)
const navigatorWithTouch = navigator as Navigator & {
maxTouchPoints?: number;
};
return (
/iPad|iPhone|iPod/.test(navigator.userAgent) ||
(/Macintosh/.test(navigator.userAgent) &&
(navigatorWithTouch.maxTouchPoints ?? 0) > 1)
);
}
export function isStandalonePwa() {
return Boolean((navigator as StandaloneNavigator).standalone)
|| window.matchMedia('(display-mode: standalone)').matches
|| window.matchMedia('(display-mode: fullscreen)').matches
return (
Boolean((navigator as StandaloneNavigator).standalone) ||
window.matchMedia("(display-mode: standalone)").matches ||
window.matchMedia("(display-mode: fullscreen)").matches
);
}
function updateEnvironment() {
state.ios = isIOSWebKit()
state.standalone = isStandalonePwa()
state.edgeGuard = state.ios && state.standalone
document.documentElement.dataset.pwaPlatform = state.ios ? 'ios' : 'other'
document.documentElement.dataset.pwaDisplayMode = state.standalone ? 'standalone' : 'browser'
document.documentElement.dataset.pwaEdgeGuard = state.edgeGuard ? 'active' : 'inactive'
document.documentElement.dataset.pwaEdgeClaims = String(state.edgeClaims)
document.documentElement.dataset.pwaUpdateState = state.updateState
document.documentElement.dataset.pwaUpdateChecks = String(state.updateChecks)
state.ios = isIOSWebKit();
state.standalone = isStandalonePwa();
state.edgeGuard = state.ios && state.standalone;
document.documentElement.dataset.pwaPlatform = state.ios ? "ios" : "other";
document.documentElement.dataset.pwaDisplayMode = state.standalone
? "standalone"
: "browser";
document.documentElement.dataset.pwaEdgeGuard = state.edgeGuard
? "active"
: "inactive";
document.documentElement.dataset.pwaEdgeClaims = String(state.edgeClaims);
document.documentElement.dataset.pwaUpdateState = state.updateState;
document.documentElement.dataset.pwaUpdateChecks = String(state.updateChecks);
}
export interface PwaAdapterOptions {
edgeWidth?: number
edgeWidth?: number;
}
/**
@@ -66,65 +81,104 @@ export interface PwaAdapterOptions {
* Safari does not expose WKWebView's native gesture switch to web content,
* so this is deliberately scoped to standalone mode and reinforced by CSS.
*/
export function createPwaAdapter(options: PwaAdapterOptions = {}): NativePlatformAdapter {
const edgeWidth = options.edgeWidth ?? 32
export function createPwaAdapter(
options: PwaAdapterOptions = {},
): NativePlatformAdapter {
const edgeWidth = options.edgeWidth ?? 32;
return {
name: 'pwa',
name: "pwa",
install() {
updateEnvironment()
const displayMode = window.matchMedia('(display-mode: standalone)')
const update = () => updateEnvironment()
displayMode.addEventListener('change', update)
document.addEventListener('visibilitychange', update)
updateEnvironment();
const displayMode = window.matchMedia("(display-mode: standalone)");
const update = () => updateEnvironment();
displayMode.addEventListener("change", update);
document.addEventListener("visibilitychange", update);
if (!('serviceWorker' in navigator)) state.serviceWorker = 'unsupported'
if (!("serviceWorker" in navigator)) state.serviceWorker = "unsupported";
else {
state.serviceWorker = navigator.serviceWorker.controller ? 'ready' : 'installing'
void navigator.serviceWorker.ready.then(() => { state.serviceWorker = 'ready' })
navigator.serviceWorker.addEventListener('controllerchange', updateServiceWorkerState)
state.serviceWorker = navigator.serviceWorker.controller
? "ready"
: "installing";
void navigator.serviceWorker.ready.then(() => {
state.serviceWorker = "ready";
});
navigator.serviceWorker.addEventListener(
"controllerchange",
updateServiceWorkerState,
);
}
let reservedTouch: number | null = null
let reservedTouch: number | null = null;
const touchAtLeadingEdge = (event: TouchEvent) => {
if (!state.edgeGuard || event.touches.length !== 1) return undefined
if (!(event.target instanceof Element) || !event.target.closest('.nvr-navigator')) return undefined
const touch = event.touches[0]
const rtl = getComputedStyle(document.documentElement).direction === 'rtl'
const atEdge = rtl ? window.innerWidth - touch.clientX <= edgeWidth : touch.clientX <= edgeWidth
return atEdge ? touch : undefined
}
if (!state.edgeGuard || event.touches.length !== 1) return undefined;
if (
!(event.target instanceof Element) ||
!event.target.closest(".nvr-navigator")
)
return undefined;
const touch = event.touches[0];
const rtl =
getComputedStyle(document.documentElement).direction === "rtl";
const atEdge = rtl
? window.innerWidth - touch.clientX <= edgeWidth
: touch.clientX <= edgeWidth;
return atEdge ? touch : undefined;
};
const reserveEdge = (event: TouchEvent) => {
const touch = touchAtLeadingEdge(event)
if (!touch) return
reservedTouch = touch.identifier
state.edgeClaims += 1
document.documentElement.dataset.pwaEdgeClaims = String(state.edgeClaims)
event.preventDefault()
}
const touch = touchAtLeadingEdge(event);
if (!touch) return;
reservedTouch = touch.identifier;
state.edgeClaims += 1;
document.documentElement.dataset.pwaEdgeClaims = String(
state.edgeClaims,
);
event.preventDefault();
};
const holdEdge = (event: TouchEvent) => {
if (reservedTouch === null) return
if ([...event.touches].some((touch) => touch.identifier === reservedTouch)) event.preventDefault()
}
const releaseEdge = () => { reservedTouch = null }
if (reservedTouch === null) return;
if (
[...event.touches].some((touch) => touch.identifier === reservedTouch)
)
event.preventDefault();
};
const releaseEdge = () => {
reservedTouch = null;
};
document.addEventListener('touchstart', reserveEdge, { capture: true, passive: false })
document.addEventListener('touchmove', holdEdge, { capture: true, passive: false })
document.addEventListener('touchend', releaseEdge, { capture: true, passive: true })
document.addEventListener('touchcancel', releaseEdge, { capture: true, passive: true })
document.addEventListener("touchstart", reserveEdge, {
capture: true,
passive: false,
});
document.addEventListener("touchmove", holdEdge, {
capture: true,
passive: false,
});
document.addEventListener("touchend", releaseEdge, {
capture: true,
passive: true,
});
document.addEventListener("touchcancel", releaseEdge, {
capture: true,
passive: true,
});
return () => {
displayMode.removeEventListener('change', update)
document.removeEventListener('visibilitychange', update)
if ('serviceWorker' in navigator) navigator.serviceWorker.removeEventListener('controllerchange', updateServiceWorkerState)
document.removeEventListener('touchstart', reserveEdge, true)
document.removeEventListener('touchmove', holdEdge, true)
document.removeEventListener('touchend', releaseEdge, true)
document.removeEventListener('touchcancel', releaseEdge, true)
}
displayMode.removeEventListener("change", update);
document.removeEventListener("visibilitychange", update);
if ("serviceWorker" in navigator)
navigator.serviceWorker.removeEventListener(
"controllerchange",
updateServiceWorkerState,
);
document.removeEventListener("touchstart", reserveEdge, true);
document.removeEventListener("touchmove", holdEdge, true);
document.removeEventListener("touchend", releaseEdge, true);
document.removeEventListener("touchcancel", releaseEdge, true);
};
},
}
};
}
function updateServiceWorkerState() {
state.serviceWorker = 'ready'
state.serviceWorker = "ready";
}

114
apps/demo/src/router.ts
View File

@@ -1,46 +1,116 @@
import { createRouter, createWebHashHistory, createWebHistory, type RouteRecordRaw } from 'vue-router'
import { evaluateRuntimeLabEntry, evaluateStoryEntry } from './guard-state'
import {
createRouter,
createWebHashHistory,
createWebHistory,
type RouteRecordRaw,
} from "vue-router";
import { evaluateRuntimeLabEntry, evaluateStoryEntry } from "./guard-state";
const routes: RouteRecordRaw[] = [
{ path: '/', redirect: '/inbox' },
{ path: "/", redirect: "/inbox" },
{
path: '/inbox', name: 'inbox', component: () => import('./views/InboxView.vue'),
meta: { tab: true, native: { siblingGroup: 'primary', siblingOrder: 0, siblingHistory: 'replace', gesture: 'full' } },
path: "/inbox",
name: "inbox",
component: () => import("./views/InboxView.vue"),
meta: {
tab: true,
native: {
siblingGroup: "primary",
siblingOrder: 0,
siblingHistory: "replace",
gesture: "full",
},
},
},
{
path: '/stories', name: 'stories', component: () => import('./views/StoriesView.vue'),
path: "/stories",
name: "stories",
component: () => import("./views/StoriesView.vue"),
beforeEnter: evaluateStoryEntry,
meta: { tab: true, native: { siblingGroup: 'primary', siblingOrder: 1, siblingHistory: 'replace', gesture: 'full' } },
meta: {
tab: true,
native: {
siblingGroup: "primary",
siblingOrder: 1,
siblingHistory: "replace",
gesture: "full",
},
},
},
{
path: '/profile', name: 'profile', component: () => import('./views/ProfileView.vue'),
meta: { tab: true, native: { siblingGroup: 'primary', siblingOrder: 2, siblingHistory: 'replace', gesture: 'full' } },
path: "/profile",
name: "profile",
component: () => import("./views/ProfileView.vue"),
meta: {
tab: true,
native: {
siblingGroup: "primary",
siblingOrder: 2,
siblingHistory: "replace",
gesture: "full",
},
},
},
{
path: '/profile/runtime-lab', name: 'runtime-lab', component: () => import('./views/RuntimeLabView.vue'),
path: "/profile/runtime-lab",
name: "runtime-lab",
component: () => import("./views/RuntimeLabView.vue"),
beforeEnter: evaluateRuntimeLabEntry,
meta: { tab: true, native: { siblingGroup: 'primary', siblingOrder: 3, siblingHistory: 'push', presentation: 'slide', parent: '/profile', gesture: 'full' } },
meta: {
tab: true,
native: {
siblingGroup: "primary",
siblingOrder: 3,
siblingHistory: "push",
presentation: "slide",
parent: "/profile",
gesture: "full",
},
},
},
{
path: '/chat/:id', name: 'chat', component: () => import('./views/ChatView.vue'),
meta: { native: { presentation: 'push', parent: '/inbox', gesture: 'edge' } },
path: "/chat/:id",
name: "chat",
component: () => import("./views/ChatView.vue"),
meta: {
native: { presentation: "push", parent: "/inbox", gesture: "edge" },
},
},
{
path: '/chat/:id/details', name: 'chat-details', component: () => import('./views/ContactView.vue'),
meta: { native: { presentation: 'push', parent: (route) => `/chat/${String(route.params.id)}`, gesture: 'edge' } },
path: "/chat/:id/details",
name: "chat-details",
component: () => import("./views/ContactView.vue"),
meta: {
native: {
presentation: "push",
parent: (route) => `/chat/${String(route.params.id)}`,
gesture: "edge",
},
},
},
{
path: '/compose', name: 'compose', component: () => import('./views/ComposeView.vue'),
meta: { native: { presentation: 'sheet', parent: '/inbox', gesture: 'full' } },
path: "/compose",
name: "compose",
component: () => import("./views/ComposeView.vue"),
meta: {
native: { presentation: "sheet", parent: "/inbox", gesture: "full" },
},
},
{
path: '/settings', name: 'settings', component: () => import('./views/SettingsView.vue'),
meta: { native: { presentation: 'push', parent: '/profile', gesture: 'edge' } },
path: "/settings",
name: "settings",
component: () => import("./views/SettingsView.vue"),
meta: {
native: { presentation: "push", parent: "/profile", gesture: "edge" },
},
]
},
];
export const router = createRouter({
history: window.location.protocol === 'file:' ? createWebHashHistory() : createWebHistory(),
history:
window.location.protocol === "file:"
? createWebHashHistory()
: createWebHistory(),
routes,
scrollBehavior: () => ({ top: 0 }),
})
});

923
apps/demo/src/style.css
View File

File diff suppressed because it is too large Load Diff

43
docs/architecture.md
View File

@@ -26,14 +26,15 @@ Component gesture owners stop propagation before a containing navigator can clai
```ts
interface NativeRouteOptions {
navigator?: string
presentation?: 'push' | 'reveal' | 'slide' | 'fade' | 'modal' | 'sheet' | string
parent?: RouteLocationRaw | ((route) => RouteLocationRaw)
siblingGroup?: string
siblingOrder?: number
siblingHistory?: 'push' | 'replace'
cache?: boolean | 'pin'
gesture?: boolean | 'edge' | 'full'
navigator?: string;
presentation?:
"push" | "reveal" | "slide" | "fade" | "modal" | "sheet" | string;
parent?: RouteLocationRaw | ((route) => RouteLocationRaw);
siblingGroup?: string;
siblingOrder?: number;
siblingHistory?: "push" | "replace";
cache?: boolean | "pin";
gesture?: boolean | "edge" | "full";
}
```
@@ -42,15 +43,17 @@ interface NativeRouteOptions {
## Custom presentations
```ts
nativeRouter.registerPresentation(definePresentation({
name: 'scale-fade',
axis: 'x',
nativeRouter.registerPresentation(
definePresentation({
name: "scale-fade",
axis: "x",
layerStyle({ role, progress }) {
return role === 'to'
return role === "to"
? { opacity: progress, transform: `scale(${0.92 + progress * 0.08})` }
: { opacity: 1 - progress * 0.4 }
: { opacity: 1 - progress * 0.4 };
},
}))
}),
);
```
Applications can call `beginInteractive()`, `updateInteractive()`, and `finishInteractive()` to drive the same transaction engine from a bespoke recognizer.
@@ -72,16 +75,16 @@ import {
onNativeViewEvict,
useNativeViewActiveEffect,
useNativeViewLifecycle,
} from '@native-vue-router/core'
} from "@native-vue-router/core";
const view = useNativeViewLifecycle()
const view = useNativeViewLifecycle();
useNativeViewActiveEffect(() => {
const timer = startPolling()
return () => stopPolling(timer)
})
const timer = startPolling();
return () => stopPolling(timer);
});
onNativeViewEvict((reason) => saveDraft(view.route.value, reason))
onNativeViewEvict((reason) => saveDraft(view.route.value, reason));
```
`isActive` means the route is authoritative. `isVisible` also includes either side of an in-progress transition. Use `useNativeViewActiveEffect` for polling and other work that should pause in a cached tab, or `useNativeViewVisibleEffect` for work needed during the animation. Application data that must survive eviction belongs in an application store.

2
docs/challenges-and-tradeoffs.md
View File

@@ -194,7 +194,7 @@ Deployment infrastructure must still avoid long-lived caching for `sw.js` and th
## Summary of deliberate trade-offs
| Decision | Benefit | Cost |
| --- | --- | --- |
| --------------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------ |
| Keep Vue Router authoritative | Guards, URLs, redirects, and ecosystem compatibility | Reconciliation complexity |
| Render a preview before commit | Truly interactive and cancellable navigation | Two live component trees and preview side effects |
| Maintain separate history and view ledgers | Correct back semantics plus tab caching | More state and invariants |

2
docs/how-it-works.md
View File

@@ -20,7 +20,7 @@ Vue Router remains the authority for semantic navigation: route matching, URLs,
That separation produces two ledgers:
| Ledger | Owns | Source of truth for |
| --- | --- | --- |
| ------------------- | --------------------------------------------------- | ------------------------------------------------- |
| Vue Router | Current committed route and browser history | What URL the application is actually on |
| Native view runtime | Active, inactive, preview, and evicted view entries | What route surfaces can be rendered during motion |

16
docs/principles-and-scalability.md
View File

@@ -55,7 +55,7 @@ Only the active route, previously visited inactive routes, and a transaction pre
During an interaction, animation work concerns two surfaces regardless of total route count:
| Resource | Growth behavior |
| --- | --- |
| -------------------------------- | ------------------------------------- |
| Animated surfaces | Constant: `from` and `to` |
| Mounted inactive component trees | Bounded by `maxInactive` |
| Route descriptors/history keys | Grows with navigation history |
@@ -122,15 +122,17 @@ Ordered peers are passed to `NativeNavigator`. Their routes use `siblingOrder` t
Presentation definitions receive only the data needed to derive layer styles:
```ts
nativeRouter.registerPresentation(definePresentation({
name: 'scale-fade',
axis: 'x',
nativeRouter.registerPresentation(
definePresentation({
name: "scale-fade",
axis: "x",
layerStyle({ role, progress }) {
return role === 'to'
return role === "to"
? { opacity: progress, transform: `scale(${0.94 + progress * 0.06})` }
: { opacity: 1 - progress * 0.25 }
: { opacity: 1 - progress * 0.25 };
},
}))
}),
);
```
A presentation does not decide history or commit. Keeping motion separate from navigation semantics makes new visual styles safer to add.

49
package-lock.json generated
View File

@@ -39,6 +39,7 @@
"@vue/tsconfig": "^0.9.1",
"electron": "^43.1.1",
"happy-dom": "^20.10.6",
"prettier": "^3.9.6",
"typescript": "~6.0.2",
"vite": "^8.1.1",
"vitest": "^3.2.4",
@@ -1836,6 +1837,7 @@
"cpu": [
"ppc64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -1852,6 +1854,7 @@
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -1868,6 +1871,7 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -1884,6 +1888,7 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -1900,6 +1905,7 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -1916,6 +1922,7 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -1932,6 +1939,7 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -1948,6 +1956,7 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -1964,6 +1973,7 @@
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -1980,6 +1990,7 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -1996,6 +2007,7 @@
"cpu": [
"ia32"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2012,6 +2024,7 @@
"cpu": [
"loong64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2028,6 +2041,7 @@
"cpu": [
"mips64el"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2044,6 +2058,7 @@
"cpu": [
"ppc64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2060,6 +2075,7 @@
"cpu": [
"riscv64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2076,6 +2092,7 @@
"cpu": [
"s390x"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2092,6 +2109,7 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2108,6 +2126,7 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2124,6 +2143,7 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2140,6 +2160,7 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2156,6 +2177,7 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2172,6 +2194,7 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2188,6 +2211,7 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2204,6 +2228,7 @@
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2220,6 +2245,7 @@
"cpu": [
"ia32"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -2236,6 +2262,7 @@
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -5084,9 +5111,9 @@
"license": "MIT"
},
"node_modules/fast-uri": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.3.tgz",
"integrity": "sha512-i70LwGWUduXqzicKXWshooq+sWL1K3WUU5rKZNG/0i3a1OSoX3HqhH5WbWwTmqWfor4urUakGPiRQcleRZTwOg==",
"version": "3.1.4",
"resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.4.tgz",
"integrity": "sha512-8JnbkQ4juDyvYs4mgFGQqg4yCYtFDtUtmp2QIQq11ZZe5CFQ5wcqm1rqDgAh/QdMySuBnPzMUiJUNZG5N/AiQw==",
"funding": [
{
"type": "github",
@@ -6786,6 +6813,22 @@
"node": "^10 || ^12 || >=14"
}
},
"node_modules/prettier": {
"version": "3.9.6",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.9.6.tgz",
"integrity": "sha512-OpN0zzVdiaiAhxpuuj5efpIS4sY9j7bY6uR5mnj5yPzGkdkjNKSJeUThPb60Jw29QuAZgA4o+/iB49kFiaBX6g==",
"dev": true,
"license": "MIT",
"bin": {
"prettier": "bin/prettier.cjs"
},
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/pretty-bytes": {
"version": "6.1.1",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz",

4
package.json
View File

@@ -16,7 +16,8 @@
"test:e2e": "playwright test",
"preview": "vite preview",
"electron": "npm run build && electron apps/electron/main.mjs",
"cap:sync": "npm run build && npm --prefix apps/capacitor exec cap sync"
"cap:sync": "npm run build && npm --prefix apps/capacitor exec cap sync",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\""
},
"dependencies": {
"@capacitor/app": "^8.0.0",
@@ -46,6 +47,7 @@
"@vue/tsconfig": "^0.9.1",
"electron": "^43.1.1",
"happy-dom": "^20.10.6",
"prettier": "^3.9.6",
"typescript": "~6.0.2",
"vite": "^8.1.1",
"vitest": "^3.2.4",

15
packages/capacitor/package.json
View File

@@ -3,9 +3,18 @@
"version": "0.1.0",
"type": "module",
"license": "MIT",
"files": ["dist"],
"scripts": { "build": "vite build --config vite.config.ts && vue-tsc -p tsconfig.json --emitDeclarationOnly" },
"exports": { ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" } },
"files": [
"dist"
],
"scripts": {
"build": "vite build --config vite.config.ts && vue-tsc -p tsconfig.json --emitDeclarationOnly"
},
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js"
}
},
"peerDependencies": {
"@capacitor/app": "^8.0.0",
"@capacitor/core": "^8.0.0",

82
packages/capacitor/src/index.ts
View File

@@ -1,50 +1,66 @@
import { App } from '@capacitor/app'
import { Capacitor } from '@capacitor/core'
import { Haptics, ImpactStyle } from '@capacitor/haptics'
import type { NativePlatformAdapter, NativeRouterRuntime } from '@native-vue-router/core'
import { App } from "@capacitor/app";
import { Capacitor } from "@capacitor/core";
import { Haptics, ImpactStyle } from "@capacitor/haptics";
import type {
NativePlatformAdapter,
NativeRouterRuntime,
} from "@native-vue-router/core";
export interface CapacitorAdapterOptions {
exitAtRoot?: boolean
haptics?: boolean
exitAtRoot?: boolean;
haptics?: boolean;
/** Release inactive component trees when the native app backgrounds. Defaults to true. */
trimCacheOnPause?: boolean
deepLinkPath?: (url: URL) => string
trimCacheOnPause?: boolean;
deepLinkPath?: (url: URL) => string;
}
export function createCapacitorAdapter(options: CapacitorAdapterOptions = {}): NativePlatformAdapter {
const enabled = Capacitor.isNativePlatform()
export function createCapacitorAdapter(
options: CapacitorAdapterOptions = {},
): NativePlatformAdapter {
const enabled = Capacitor.isNativePlatform();
return {
name: enabled ? `capacitor-${Capacitor.getPlatform()}` : 'capacitor-web',
name: enabled ? `capacitor-${Capacitor.getPlatform()}` : "capacitor-web",
async haptic(event) {
if (!enabled || options.haptics === false) return
if (event === 'selection') await Haptics.selectionChanged()
else await Haptics.impact({ style: event === 'commit' ? ImpactStyle.Light : ImpactStyle.Medium })
if (!enabled || options.haptics === false) return;
if (event === "selection") await Haptics.selectionChanged();
else
await Haptics.impact({
style: event === "commit" ? ImpactStyle.Light : ImpactStyle.Medium,
});
},
async install(runtime: NativeRouterRuntime) {
if (!enabled) return
if (!enabled) return;
const handles = await Promise.all([
App.addListener('backButton', async () => {
if (runtime.transaction.value) return await runtime.cancelInteractive()
if (runtime.canGoBack.value) return void await runtime.pop()
if (options.exitAtRoot !== false) await App.exitApp()
App.addListener("backButton", async () => {
if (runtime.transaction.value)
return await runtime.cancelInteractive();
if (runtime.canGoBack.value) return void (await runtime.pop());
if (options.exitAtRoot !== false) await App.exitApp();
}),
App.addListener('appUrlOpen', ({ url }) => {
const parsed = new URL(url)
const path = options.deepLinkPath?.(parsed) ?? `${parsed.pathname}${parsed.search}${parsed.hash}`
void runtime.push(path || '/')
App.addListener("appUrlOpen", ({ url }) => {
const parsed = new URL(url);
const path =
options.deepLinkPath?.(parsed) ??
`${parsed.pathname}${parsed.search}${parsed.hash}`;
void runtime.push(path || "/");
}),
App.addListener('pause', () => {
void runtime.cancelInteractive()
if (options.trimCacheOnPause !== false) runtime.trimCache({ reason: 'memory-pressure' })
App.addListener("pause", () => {
void runtime.cancelInteractive();
if (options.trimCacheOnPause !== false)
runtime.trimCache({ reason: "memory-pressure" });
}),
])
const launch = await App.getLaunchUrl()
]);
const launch = await App.getLaunchUrl();
if (launch?.url) {
const parsed = new URL(launch.url)
const path = options.deepLinkPath?.(parsed) ?? `${parsed.pathname}${parsed.search}${parsed.hash}`
if (path) void runtime.replace(path, { presentation: 'none' })
const parsed = new URL(launch.url);
const path =
options.deepLinkPath?.(parsed) ??
`${parsed.pathname}${parsed.search}${parsed.hash}`;
if (path) void runtime.replace(path, { presentation: "none" });
}
return () => { void Promise.all(handles.map((handle) => handle.remove())) }
return () => {
void Promise.all(handles.map((handle) => handle.remove()));
};
},
}
};
}

24
packages/capacitor/vite.config.ts
View File

@@ -1,10 +1,22 @@
import { defineConfig } from 'vite'
import { resolve } from 'node:path'
import { defineConfig } from "vite";
import { resolve } from "node:path";
export default defineConfig({
build: {
outDir: 'dist', emptyOutDir: true,
lib: { entry: resolve(__dirname, 'src/index.ts'), formats: ['es'], fileName: 'index' },
rollupOptions: { external: ['@capacitor/app', '@capacitor/core', '@capacitor/haptics', '@native-vue-router/core'] },
outDir: "dist",
emptyOutDir: true,
lib: {
entry: resolve(__dirname, "src/index.ts"),
formats: ["es"],
fileName: "index",
},
})
rollupOptions: {
external: [
"@capacitor/app",
"@capacitor/core",
"@capacitor/haptics",
"@native-vue-router/core",
],
},
},
});

17
packages/core/package.json
View File

@@ -3,11 +3,20 @@
"version": "0.1.0",
"type": "module",
"license": "MIT",
"files": ["dist"],
"sideEffects": ["./dist/style.css"],
"scripts": { "build": "vite build --config vite.config.ts && vue-tsc -p tsconfig.json --emitDeclarationOnly" },
"files": [
"dist"
],
"sideEffects": [
"./dist/style.css"
],
"scripts": {
"build": "vite build --config vite.config.ts && vue-tsc -p tsconfig.json --emitDeclarationOnly"
},
"exports": {
".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" },
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js"
},
"./style.css": "./dist/style.css"
},
"peerDependencies": {

864
packages/core/src/components.ts
View File

File diff suppressed because it is too large Load Diff

14
packages/core/src/index.ts
View File

@@ -1,11 +1,11 @@
export * from './types'
export * from './runtime'
export * from './components'
export * from './profiler'
import './style.css'
export * from "./types";
export * from "./runtime";
export * from "./components";
export * from "./profiler";
import "./style.css";
declare module '@vue/runtime-core' {
declare module "@vue/runtime-core" {
interface ComponentCustomProperties {
$nativeRouter: import('./types').NativeRouterRuntime
$nativeRouter: import("./types").NativeRouterRuntime;
}
}

402
packages/core/src/profiler.ts
View File

@@ -1,111 +1,117 @@
import { readonly, ref } from 'vue'
import type { NativeDiagnosticEvent, NativeRouterRuntime } from './types'
import { readonly, ref } from "vue";
import type { NativeDiagnosticEvent, NativeRouterRuntime } from "./types";
export interface NativeProfilerOptions {
/** Extra non-sensitive identifiers such as an application build ID. */
metadata?: Record<string, string | number | boolean>
metadata?: Record<string, string | number | boolean>;
/** Maximum rAF samples retained. Defaults to 30,000 (about eight minutes at 60 Hz). */
maxFrames?: number
maxFrames?: number;
}
export interface NativeProfilerFrame {
at: number
delta: number
route: string
transactionId?: number
phase?: string
progress?: number
at: number;
delta: number;
route: string;
transactionId?: number;
phase?: string;
progress?: number;
}
export interface NativeProfilerPerformanceEntry {
type: 'longtask' | 'layout-shift' | 'resource' | 'event'
at: number
duration: number
name?: string
value?: number
size?: number
hadRecentInput?: boolean
type: "longtask" | "layout-shift" | "resource" | "event";
at: number;
duration: number;
name?: string;
value?: number;
size?: number;
hadRecentInput?: boolean;
}
export interface NativeProfilerTransactionSummary {
id: number
route?: string
kind?: string
cold?: boolean
outcome?: string
duration?: number
frames: number
slowFrames: number
p95FrameMs?: number
maxFrameMs?: number
id: number;
route?: string;
kind?: string;
cold?: boolean;
outcome?: string;
duration?: number;
frames: number;
slowFrames: number;
p95FrameMs?: number;
maxFrameMs?: number;
}
export interface NativeProfilerReport {
schema: 'native-vue-router-profile@1'
startedAt: string
duration: number
schema: "native-vue-router-profile@1";
startedAt: string;
duration: number;
environment: {
userAgent: string
viewport: { width: number; height: number; devicePixelRatio: number }
displayMode: 'standalone' | 'browser'
visibility: DocumentVisibilityState
hardwareConcurrency?: number
deviceMemory?: number
}
metadata: Record<string, string | number | boolean>
userAgent: string;
viewport: { width: number; height: number; devicePixelRatio: number };
displayMode: "standalone" | "browser";
visibility: DocumentVisibilityState;
hardwareConcurrency?: number;
deviceMemory?: number;
};
metadata: Record<string, string | number | boolean>;
summary: {
frames: number
estimatedRefreshMs: number
estimatedRefreshHz: number
averageFps: number
p95FrameMs: number
maxFrameMs: number
framesOver20ms: number
framesOver34ms: number
framesOver50ms: number
droppedFrames: number
longTasks: number
cumulativeLayoutShift: number
}
transactions: NativeProfilerTransactionSummary[]
events: NativeDiagnosticEvent[]
frames: NativeProfilerFrame[]
performanceEntries: NativeProfilerPerformanceEntry[]
visibility: Array<{ at: number; state: DocumentVisibilityState }>
frames: number;
estimatedRefreshMs: number;
estimatedRefreshHz: number;
averageFps: number;
p95FrameMs: number;
maxFrameMs: number;
framesOver20ms: number;
framesOver34ms: number;
framesOver50ms: number;
droppedFrames: number;
longTasks: number;
cumulativeLayoutShift: number;
};
transactions: NativeProfilerTransactionSummary[];
events: NativeDiagnosticEvent[];
frames: NativeProfilerFrame[];
performanceEntries: NativeProfilerPerformanceEntry[];
visibility: Array<{ at: number; state: DocumentVisibilityState }>;
}
export interface NativeNavigationProfiler {
readonly recording: Readonly<{ value: boolean }>
start(): void
stop(): NativeProfilerReport
snapshot(): NativeProfilerReport
clear(): void
toJSON(report?: NativeProfilerReport): string
dispose(): void
readonly recording: Readonly<{ value: boolean }>;
start(): void;
stop(): NativeProfilerReport;
snapshot(): NativeProfilerReport;
clear(): void;
toJSON(report?: NativeProfilerReport): string;
dispose(): void;
}
function round(value: number, digits = 2) {
const scale = 10 ** digits
return Math.round(value * scale) / scale
const scale = 10 ** digits;
return Math.round(value * scale) / scale;
}
function percentile(values: number[], position: number) {
if (!values.length) return 0
const sorted = [...values].sort((a, b) => a - b)
return sorted[Math.min(sorted.length - 1, Math.floor((sorted.length - 1) * position))] ?? 0
if (!values.length) return 0;
const sorted = [...values].sort((a, b) => a - b);
return (
sorted[
Math.min(sorted.length - 1, Math.floor((sorted.length - 1) * position))
] ?? 0
);
}
function routeLabel(runtime: NativeRouterRuntime) {
const route = runtime.router.currentRoute.value
return route.name != null ? String(route.name) : route.matched.at(-1)?.path ?? route.path
const route = runtime.router.currentRoute.value;
return route.name != null
? String(route.name)
: (route.matched.at(-1)?.path ?? route.path);
}
function resourceName(value: string) {
try {
const url = new URL(value, window.location.href)
return url.pathname.split('/').at(-1) || url.pathname
const url = new URL(value, window.location.href);
return url.pathname.split("/").at(-1) || url.pathname;
} catch {
return value.split('/').at(-1)?.split('?')[0] ?? 'resource'
return value.split("/").at(-1)?.split("?")[0] ?? "resource";
}
}
@@ -117,37 +123,39 @@ export function createNativeNavigationProfiler(
runtime: NativeRouterRuntime,
options: NativeProfilerOptions = {},
): NativeNavigationProfiler {
const mutableRecording = ref(false)
const recording = readonly(mutableRecording)
const maxFrames = Math.max(300, options.maxFrames ?? 30_000)
let startedAt = 0
let endedAt = 0
let startedAtIso = ''
let previousFrame: number | undefined
let animationFrame = 0
let frames: NativeProfilerFrame[] = []
let events: NativeDiagnosticEvent[] = []
let performanceEntries: NativeProfilerPerformanceEntry[] = []
let visibility: Array<{ at: number; state: DocumentVisibilityState }> = []
let observers: PerformanceObserver[] = []
const mutableRecording = ref(false);
const recording = readonly(mutableRecording);
const maxFrames = Math.max(300, options.maxFrames ?? 30_000);
let startedAt = 0;
let endedAt = 0;
let startedAtIso = "";
let previousFrame: number | undefined;
let animationFrame = 0;
let frames: NativeProfilerFrame[] = [];
let events: NativeDiagnosticEvent[] = [];
let performanceEntries: NativeProfilerPerformanceEntry[] = [];
let visibility: Array<{ at: number; state: DocumentVisibilityState }> = [];
let observers: PerformanceObserver[] = [];
const relative = (timestamp: number) => round(Math.max(0, timestamp - startedAt), 3)
const relative = (timestamp: number) =>
round(Math.max(0, timestamp - startedAt), 3);
const removeDiagnostic = runtime.onDiagnostic((event) => {
if (!mutableRecording.value) return
const details = event.type === 'transaction-start' && typeof document !== 'undefined'
if (!mutableRecording.value) return;
const details =
event.type === "transaction-start" && typeof document !== "undefined"
? {
...event.details,
mountedViews: runtime.cacheStats.value.mounted,
}
: event.details
events.push({ ...event, timestamp: relative(event.timestamp), details })
})
: event.details;
events.push({ ...event, timestamp: relative(event.timestamp), details });
});
const sampleFrame = (timestamp: number) => {
if (!mutableRecording.value) return
if (!mutableRecording.value) return;
if (previousFrame !== undefined && frames.length < maxFrames) {
const transaction = runtime.transaction.value
const transaction = runtime.transaction.value;
frames.push({
at: relative(timestamp),
delta: round(timestamp - previousFrame, 3),
@@ -155,98 +163,123 @@ export function createNativeNavigationProfiler(
transactionId: transaction?.id,
phase: transaction?.phase,
progress: transaction ? round(transaction.progress, 4) : undefined,
})
}
previousFrame = timestamp
animationFrame = window.requestAnimationFrame(sampleFrame)
});
}
previousFrame = timestamp;
animationFrame = window.requestAnimationFrame(sampleFrame);
};
const observe = (type: NativeProfilerPerformanceEntry['type']) => {
if (typeof PerformanceObserver === 'undefined') return
if (!PerformanceObserver.supportedEntryTypes?.includes(type)) return
const observe = (type: NativeProfilerPerformanceEntry["type"]) => {
if (typeof PerformanceObserver === "undefined") return;
if (!PerformanceObserver.supportedEntryTypes?.includes(type)) return;
try {
const observer = new PerformanceObserver((list) => {
if (!mutableRecording.value) return
if (!mutableRecording.value) return;
for (const entry of list.getEntries()) {
const extra = entry as PerformanceEntry & {
value?: number
hadRecentInput?: boolean
transferSize?: number
interactionId?: number
}
value?: number;
hadRecentInput?: boolean;
transferSize?: number;
interactionId?: number;
};
performanceEntries.push({
type,
at: relative(entry.startTime),
duration: round(entry.duration, 3),
name: type === 'resource'
name:
type === "resource"
? resourceName(entry.name)
: type === 'event'
: type === "event"
? entry.name
: undefined,
value: extra.value,
size: extra.transferSize,
hadRecentInput: extra.hadRecentInput,
})
});
}
})
observer.observe(type === 'event'
? { type, buffered: false, durationThreshold: 16 } as PerformanceObserverInit
: { type, buffered: false } as PerformanceObserverInit)
observers.push(observer)
});
observer.observe(
type === "event"
? ({
type,
buffered: false,
durationThreshold: 16,
} as PerformanceObserverInit)
: ({ type, buffered: false } as PerformanceObserverInit),
);
observers.push(observer);
} catch {
// Performance entry support differs between Safari, Chromium, and hosts.
}
}
};
const onVisibility = () => {
if (mutableRecording.value) visibility.push({ at: relative(performance.now()), state: document.visibilityState })
}
if (mutableRecording.value)
visibility.push({
at: relative(performance.now()),
state: document.visibilityState,
});
};
const stopSampling = () => {
if (animationFrame) window.cancelAnimationFrame(animationFrame)
animationFrame = 0
for (const observer of observers) observer.disconnect()
observers = []
document.removeEventListener('visibilitychange', onVisibility)
}
if (animationFrame) window.cancelAnimationFrame(animationFrame);
animationFrame = 0;
for (const observer of observers) observer.disconnect();
observers = [];
document.removeEventListener("visibilitychange", onVisibility);
};
const transactionSummaries = (baseline: number) => {
const starts = new Map<number, NativeDiagnosticEvent>()
const ends = new Map<number, NativeDiagnosticEvent>()
const starts = new Map<number, NativeDiagnosticEvent>();
const ends = new Map<number, NativeDiagnosticEvent>();
for (const event of events) {
if (event.transactionId == null) continue
if (event.type === 'transaction-start') starts.set(event.transactionId, event)
if (event.type === 'transaction-end') ends.set(event.transactionId, event)
if (event.transactionId == null) continue;
if (event.type === "transaction-start")
starts.set(event.transactionId, event);
if (event.type === "transaction-end")
ends.set(event.transactionId, event);
}
return [...starts].map(([id, start]) => {
const end = ends.get(id)
const samples = frames.filter((frame) => frame.transactionId === id).map((frame) => frame.delta)
const end = ends.get(id);
const samples = frames
.filter((frame) => frame.transactionId === id)
.map((frame) => frame.delta);
return {
id,
route: start.route,
kind: String(start.details?.kind ?? ''),
kind: String(start.details?.kind ?? ""),
cold: Boolean(start.details?.cold),
outcome: end?.details?.outcome ? String(end.details.outcome) : undefined,
outcome: end?.details?.outcome
? String(end.details.outcome)
: undefined,
duration: end ? round(end.timestamp - start.timestamp, 3) : undefined,
frames: samples.length,
slowFrames: samples.filter((delta) => delta > baseline * 1.5).length,
p95FrameMs: samples.length ? round(percentile(samples, .95), 3) : undefined,
p95FrameMs: samples.length
? round(percentile(samples, 0.95), 3)
: undefined,
maxFrameMs: samples.length ? round(Math.max(...samples), 3) : undefined,
}
})
}
};
});
};
const snapshot = (): NativeProfilerReport => {
const duration = startedAt ? (mutableRecording.value ? performance.now() : endedAt || performance.now()) - startedAt : 0
const deltas = frames.map((frame) => frame.delta).filter((delta) => delta > 0 && delta < 250)
const baseline = Math.max(4, percentile(deltas, .1) || 16.667)
const totalFrameTime = deltas.reduce((sum, value) => sum + value, 0)
const duration = startedAt
? (mutableRecording.value
? performance.now()
: endedAt || performance.now()) - startedAt
: 0;
const deltas = frames
.map((frame) => frame.delta)
.filter((delta) => delta > 0 && delta < 250);
const baseline = Math.max(4, percentile(deltas, 0.1) || 16.667);
const totalFrameTime = deltas.reduce((sum, value) => sum + value, 0);
const shifts = performanceEntries
.filter((entry) => entry.type === 'layout-shift' && !entry.hadRecentInput)
.reduce((sum, entry) => sum + (entry.value ?? 0), 0)
const nav = navigator as Navigator & { deviceMemory?: number }
.filter((entry) => entry.type === "layout-shift" && !entry.hadRecentInput)
.reduce((sum, entry) => sum + (entry.value ?? 0), 0);
const nav = navigator as Navigator & { deviceMemory?: number };
return {
schema: 'native-vue-router-profile@1',
schema: "native-vue-router-profile@1",
startedAt: startedAtIso || new Date().toISOString(),
duration: round(duration, 3),
environment: {
@@ -256,7 +289,9 @@ export function createNativeNavigationProfiler(
height: window.innerHeight,
devicePixelRatio: window.devicePixelRatio,
},
displayMode: window.matchMedia('(display-mode: standalone)').matches ? 'standalone' : 'browser',
displayMode: window.matchMedia("(display-mode: standalone)").matches
? "standalone"
: "browser",
visibility: document.visibilityState,
hardwareConcurrency: navigator.hardwareConcurrency,
deviceMemory: nav.deviceMemory,
@@ -266,14 +301,19 @@ export function createNativeNavigationProfiler(
frames: frames.length,
estimatedRefreshMs: round(baseline, 3),
estimatedRefreshHz: round(1000 / baseline, 1),
averageFps: round(totalFrameTime ? deltas.length * 1000 / totalFrameTime : 0, 1),
p95FrameMs: round(percentile(deltas, .95), 3),
averageFps: round(
totalFrameTime ? (deltas.length * 1000) / totalFrameTime : 0,
1,
),
p95FrameMs: round(percentile(deltas, 0.95), 3),
maxFrameMs: round(deltas.length ? Math.max(...deltas) : 0, 3),
framesOver20ms: deltas.filter((delta) => delta > 20).length,
framesOver34ms: deltas.filter((delta) => delta > 34).length,
framesOver50ms: deltas.filter((delta) => delta > 50).length,
droppedFrames: deltas.filter((delta) => delta > baseline * 1.5).length,
longTasks: performanceEntries.filter((entry) => entry.type === 'longtask').length,
longTasks: performanceEntries.filter(
(entry) => entry.type === "longtask",
).length,
cumulativeLayoutShift: round(shifts, 5),
},
transactions: transactionSummaries(baseline),
@@ -281,40 +321,40 @@ export function createNativeNavigationProfiler(
frames: [...frames],
performanceEntries: [...performanceEntries],
visibility: [...visibility],
}
}
};
};
const clear = () => {
frames = []
events = []
performanceEntries = []
visibility = []
previousFrame = undefined
endedAt = 0
}
frames = [];
events = [];
performanceEntries = [];
visibility = [];
previousFrame = undefined;
endedAt = 0;
};
const start = () => {
if (mutableRecording.value) return
clear()
startedAt = performance.now()
endedAt = 0
startedAtIso = new Date().toISOString()
mutableRecording.value = true
visibility.push({ at: 0, state: document.visibilityState })
document.addEventListener('visibilitychange', onVisibility)
observe('longtask')
observe('layout-shift')
observe('resource')
observe('event')
animationFrame = window.requestAnimationFrame(sampleFrame)
}
if (mutableRecording.value) return;
clear();
startedAt = performance.now();
endedAt = 0;
startedAtIso = new Date().toISOString();
mutableRecording.value = true;
visibility.push({ at: 0, state: document.visibilityState });
document.addEventListener("visibilitychange", onVisibility);
observe("longtask");
observe("layout-shift");
observe("resource");
observe("event");
animationFrame = window.requestAnimationFrame(sampleFrame);
};
const stop = () => {
endedAt = performance.now()
mutableRecording.value = false
stopSampling()
return snapshot()
}
endedAt = performance.now();
mutableRecording.value = false;
stopSampling();
return snapshot();
};
return {
recording,
@@ -324,9 +364,9 @@ export function createNativeNavigationProfiler(
clear,
toJSON: (report = snapshot()) => JSON.stringify(report, null, 2),
dispose() {
mutableRecording.value = false
stopSampling()
removeDiagnostic()
mutableRecording.value = false;
stopSampling();
removeDiagnostic();
},
}
};
}

717
packages/core/src/runtime.test.ts
View File

@@ -1,372 +1,481 @@
import { createApp, defineComponent, nextTick } from 'vue'
import { createMemoryHistory, createRouter } from 'vue-router'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { createApp, defineComponent, nextTick } from "vue";
import { createMemoryHistory, createRouter } from "vue-router";
import { beforeEach, describe, expect, it, vi } from "vitest";
import {
createNativeRouter,
definePresentation,
shouldCommitGesture,
springTimeScaleForVelocity,
} from './runtime'
import { createNativeNavigationProfiler } from './profiler'
} from "./runtime";
import { createNativeNavigationProfiler } from "./profiler";
const Page = defineComponent({ template: '<div>page</div>' })
const Page = defineComponent({ template: "<div>page</div>" });
async function harness(blockB: boolean | 'redirect' = false) {
async function harness(blockB: boolean | "redirect" = false) {
const router = createRouter({
history: createMemoryHistory(),
routes: [
{ path: '/a', component: Page },
{ path: '/b', component: Page, meta: { native: { parent: '/a' } } },
{ path: '/c', component: Page, meta: { native: { parent: '/a' } } },
{ path: '/modal', component: Page, meta: { native: { presentation: 'sheet', parent: '/a' } } },
{ path: '/left', component: Page, meta: { native: { siblingOrder: 0, siblingHistory: 'replace' } } },
{ path: '/middle', component: Page, meta: { native: { siblingOrder: 1, siblingHistory: 'replace' } } },
{ path: '/right', component: Page, meta: { native: { siblingOrder: 2, siblingHistory: 'replace' } } },
{ path: '/no-cache', component: Page, meta: { native: { cache: false, parent: '/a' } } },
{ path: '/pinned', component: Page, meta: { native: { cache: 'pin', parent: '/a' } } },
{ path: '/item/:id', component: Page, meta: { native: { parent: '/a' } } },
{ path: "/a", component: Page },
{ path: "/b", component: Page, meta: { native: { parent: "/a" } } },
{ path: "/c", component: Page, meta: { native: { parent: "/a" } } },
{
path: "/modal",
component: Page,
meta: { native: { presentation: "sheet", parent: "/a" } },
},
{
path: "/left",
component: Page,
meta: { native: { siblingOrder: 0, siblingHistory: "replace" } },
},
{
path: "/middle",
component: Page,
meta: { native: { siblingOrder: 1, siblingHistory: "replace" } },
},
{
path: "/right",
component: Page,
meta: { native: { siblingOrder: 2, siblingHistory: "replace" } },
},
{
path: "/no-cache",
component: Page,
meta: { native: { cache: false, parent: "/a" } },
},
{
path: "/pinned",
component: Page,
meta: { native: { cache: "pin", parent: "/a" } },
},
{
path: "/item/:id",
component: Page,
meta: { native: { parent: "/a" } },
},
],
})
if (blockB) router.beforeEach((to) => to.path === '/b' ? (blockB === 'redirect' ? '/modal' : false) : undefined)
await router.push('/a')
await router.isReady()
const native = createNativeRouter({ router, cache: { maxInactive: 2 } })
const app = createApp(Page)
app.use(router)
app.use(native)
await nextTick()
return { router, native }
});
if (blockB)
router.beforeEach((to) =>
to.path === "/b" ? (blockB === "redirect" ? "/modal" : false) : undefined,
);
await router.push("/a");
await router.isReady();
const native = createNativeRouter({ router, cache: { maxInactive: 2 } });
const app = createApp(Page);
app.use(router);
app.use(native);
await nextTick();
return { router, native };
}
beforeEach(() => {
vi.spyOn(window, 'matchMedia').mockReturnValue({ matches: true } as MediaQueryList)
})
vi.spyOn(window, "matchMedia").mockReturnValue({
matches: true,
} as MediaQueryList);
});
describe('gesture decisions', () => {
it('uses progress or a deliberate velocity to commit', () => {
expect(shouldCommitGesture(0.4, 0)).toBe(true)
expect(shouldCommitGesture(0.12, 1.4)).toBe(true)
expect(shouldCommitGesture(0.04, 4)).toBe(false)
expect(shouldCommitGesture(0.2, 0.4)).toBe(false)
})
describe("gesture decisions", () => {
it("uses progress or a deliberate velocity to commit", () => {
expect(shouldCommitGesture(0.4, 0)).toBe(true);
expect(shouldCommitGesture(0.12, 1.4)).toBe(true);
expect(shouldCommitGesture(0.04, 4)).toBe(false);
expect(shouldCommitGesture(0.2, 0.4)).toBe(false);
});
it('settles a fast flick more quickly without unbounded spring steps', () => {
expect(springTimeScaleForVelocity(0)).toBe(1)
expect(springTimeScaleForVelocity(2)).toBeCloseTo(1.6)
expect(springTimeScaleForVelocity(8)).toBe(3)
expect(springTimeScaleForVelocity(-20)).toBe(3)
})
})
it("settles a fast flick more quickly without unbounded spring steps", () => {
expect(springTimeScaleForVelocity(0)).toBe(1);
expect(springTimeScaleForVelocity(2)).toBeCloseTo(1.6);
expect(springTimeScaleForVelocity(8)).toBe(3);
expect(springTimeScaleForVelocity(-20)).toBe(3);
});
});
describe('native router transactions', () => {
it('exports opt-in frame diagnostics without route params or query values', async () => {
const { native } = await harness()
const profiler = createNativeNavigationProfiler(native, { metadata: { build: 'test' } })
profiler.start()
describe("native router transactions", () => {
it("exports opt-in frame diagnostics without route params or query values", async () => {
const { native } = await harness();
const profiler = createNativeNavigationProfiler(native, {
metadata: { build: "test" },
});
profiler.start();
await native.push('/item/private-id?token=secret')
const report = profiler.stop()
await native.push("/item/private-id?token=secret");
const report = profiler.stop();
expect(report.schema).toBe('native-vue-router-profile@1')
expect(report.metadata).toEqual({ build: 'test' })
expect(report.events.map((event) => event.type)).toEqual(expect.arrayContaining([
'route-load-start',
'route-load-end',
'transaction-start',
'transaction-end',
]))
expect(report.transactions).toMatchObject([{ route: '/item/:id', cold: true, outcome: 'committed' }])
expect(profiler.toJSON(report)).not.toContain('private-id')
expect(profiler.toJSON(report)).not.toContain('secret')
profiler.dispose()
})
expect(report.schema).toBe("native-vue-router-profile@1");
expect(report.metadata).toEqual({ build: "test" });
expect(report.events.map((event) => event.type)).toEqual(
expect.arrayContaining([
"route-load-start",
"route-load-end",
"transaction-start",
"transaction-end",
]),
);
expect(report.transactions).toMatchObject([
{ route: "/item/:id", cold: true, outcome: "committed" },
]);
expect(profiler.toJSON(report)).not.toContain("private-id");
expect(profiler.toJSON(report)).not.toContain("secret");
profiler.dispose();
});
it('preloads a target without changing URL history', async () => {
const { router, native } = await harness()
const id = await native.beginInteractive('push', '/b')
expect(id).not.toBeNull()
expect(router.currentRoute.value.path).toBe('/a')
expect(native.entries.value.some((entry) => entry.status === 'preview')).toBe(true)
await native.cancelInteractive()
expect(router.currentRoute.value.path).toBe('/a')
expect(native.transaction.value).toBeNull()
})
it("preloads a target without changing URL history", async () => {
const { router, native } = await harness();
const id = await native.beginInteractive("push", "/b");
expect(id).not.toBeNull();
expect(router.currentRoute.value.path).toBe("/a");
expect(
native.entries.value.some((entry) => entry.status === "preview"),
).toBe(true);
await native.cancelInteractive();
expect(router.currentRoute.value.path).toBe("/a");
expect(native.transaction.value).toBeNull();
});
it('commits a loaded preview through Vue Router', async () => {
const { router, native } = await harness()
await native.beginInteractive('push', '/b')
native.updateInteractive(0.55, 0.1)
expect(await native.finishInteractive()).toBe(true)
expect(router.currentRoute.value.path).toBe('/b')
expect(native.entries.value.filter((entry) => entry.status === 'active')).toHaveLength(1)
})
it("commits a loaded preview through Vue Router", async () => {
const { router, native } = await harness();
await native.beginInteractive("push", "/b");
native.updateInteractive(0.55, 0.1);
expect(await native.finishInteractive()).toBe(true);
expect(router.currentRoute.value.path).toBe("/b");
expect(
native.entries.value.filter((entry) => entry.status === "active"),
).toHaveLength(1);
});
it('snaps back and removes the preview when a guard rejects commit', async () => {
const { router, native } = await harness(true)
await native.beginInteractive('push', '/b')
native.updateInteractive(0.8, 0)
expect(await native.finishInteractive()).toBe(false)
expect(router.currentRoute.value.path).toBe('/a')
expect(native.entries.value.some((entry) => entry.route.path === '/b')).toBe(false)
})
it("snaps back and removes the preview when a guard rejects commit", async () => {
const { router, native } = await harness(true);
await native.beginInteractive("push", "/b");
native.updateInteractive(0.8, 0);
expect(await native.finishInteractive()).toBe(false);
expect(router.currentRoute.value.path).toBe("/a");
expect(
native.entries.value.some((entry) => entry.route.path === "/b"),
).toBe(false);
});
it('uses declared parents for cold-start predictive back', async () => {
const { router, native } = await harness()
await native.replace('/b', { presentation: 'none' })
const transaction = await native.beginInteractive('pop')
expect(transaction).not.toBeNull()
expect(native.transaction.value?.direction).toBe('back')
await native.cancelInteractive()
expect(router.currentRoute.value.path).toBe('/b')
})
it("uses declared parents for cold-start predictive back", async () => {
const { router, native } = await harness();
await native.replace("/b", { presentation: "none" });
const transaction = await native.beginInteractive("pop");
expect(transaction).not.toBeNull();
expect(native.transaction.value?.direction).toBe("back");
await native.cancelInteractive();
expect(router.currentRoute.value.path).toBe("/b");
});
it('discards the stale preview when Vue Router redirects a commit', async () => {
const { router, native } = await harness('redirect')
await native.beginInteractive('push', '/b')
expect(await native.finishInteractive(true)).toBe(true)
expect(router.currentRoute.value.path).toBe('/modal')
expect(native.entries.value.some((entry) => entry.status === 'preview')).toBe(false)
})
it("discards the stale preview when Vue Router redirects a commit", async () => {
const { router, native } = await harness("redirect");
await native.beginInteractive("push", "/b");
expect(await native.finishInteractive(true)).toBe(true);
expect(router.currentRoute.value.path).toBe("/modal");
expect(
native.entries.value.some((entry) => entry.status === "preview"),
).toBe(false);
});
it('registers application-defined presentations', async () => {
const { native } = await harness()
const presentation = definePresentation({ name: 'flip', axis: 'x', layerStyle: () => ({ opacity: 0.5 }) })
native.registerPresentation(presentation)
expect(native.presentationFor('flip')).toBe(presentation)
})
it("registers application-defined presentations", async () => {
const { native } = await harness();
const presentation = definePresentation({
name: "flip",
axis: "x",
layerStyle: () => ({ opacity: 0.5 }),
});
native.registerPresentation(presentation);
expect(native.presentationFor("flip")).toBe(presentation);
});
it('treats navigation to the active route as a strict no-op', async () => {
const { router, native } = await harness()
const entries = [...native.entries.value]
expect(await native.push('/a')).toBe(false)
expect(await native.replace('/a')).toBe(false)
expect(router.currentRoute.value.path).toBe('/a')
expect(native.transaction.value).toBeNull()
expect(native.entries.value).toEqual(entries)
})
it("treats navigation to the active route as a strict no-op", async () => {
const { router, native } = await harness();
const entries = [...native.entries.value];
expect(await native.push("/a")).toBe(false);
expect(await native.replace("/a")).toBe(false);
expect(router.currentRoute.value.path).toBe("/a");
expect(native.transaction.value).toBeNull();
expect(native.entries.value).toEqual(entries);
});
it('derives sibling direction from route order and uses adjacent-page motion', async () => {
const { native } = await harness()
await native.replace('/middle', { presentation: 'none' })
it("derives sibling direction from route order and uses adjacent-page motion", async () => {
const { native } = await harness();
await native.replace("/middle", { presentation: "none" });
await native.beginInteractive('sibling', '/left', { replace: true })
expect(native.transaction.value).toMatchObject({ direction: 'back', presentation: 'slide' })
await native.cancelInteractive()
await native.beginInteractive("sibling", "/left", { replace: true });
expect(native.transaction.value).toMatchObject({
direction: "back",
presentation: "slide",
});
await native.cancelInteractive();
await native.beginInteractive('sibling', '/right', { replace: true })
expect(native.transaction.value).toMatchObject({ direction: 'forward', presentation: 'slide' })
await native.cancelInteractive()
})
await native.beginInteractive("sibling", "/right", { replace: true });
expect(native.transaction.value).toMatchObject({
direction: "forward",
presentation: "slide",
});
await native.cancelInteractive();
});
it('keeps replaced sibling views cached but out of the back stack', async () => {
const { native } = await harness()
await native.replace('/left', { presentation: 'none' })
await native.sibling('/middle', { replace: true })
await native.push('/c')
it("keeps replaced sibling views cached but out of the back stack", async () => {
const { native } = await harness();
await native.replace("/left", { presentation: "none" });
await native.sibling("/middle", { replace: true });
await native.push("/c");
await native.beginInteractive('pop')
const target = native.entries.value.find((entry) => entry.key === native.transaction.value?.toKey)
expect(target?.route.path).toBe('/middle')
expect(target?.route.path).not.toBe('/left')
await native.cancelInteractive()
})
await native.beginInteractive("pop");
const target = native.entries.value.find(
(entry) => entry.key === native.transaction.value?.toKey,
);
expect(target?.route.path).toBe("/middle");
expect(target?.route.path).not.toBe("/left");
await native.cancelInteractive();
});
it('creates sibling views lazily and retains visited replace-style siblings', async () => {
const { native } = await harness()
expect(native.entries.value.map((entry) => entry.route.path)).toEqual(['/a'])
it("creates sibling views lazily and retains visited replace-style siblings", async () => {
const { native } = await harness();
expect(native.entries.value.map((entry) => entry.route.path)).toEqual([
"/a",
]);
await native.replace('/left', { presentation: 'none' })
expect(native.entries.value.some((entry) => entry.route.path === '/middle')).toBe(false)
await native.sibling('/middle', { replace: true })
await native.replace("/left", { presentation: "none" });
expect(
native.entries.value.some((entry) => entry.route.path === "/middle"),
).toBe(false);
await native.sibling("/middle", { replace: true });
expect(native.entries.value.find((entry) => entry.route.path === '/left')).toMatchObject({ mounted: true, status: 'inactive' })
expect(native.entries.value.find((entry) => entry.route.path === '/middle')).toMatchObject({ mounted: true, status: 'active' })
expect(native.entries.value.some((entry) => entry.route.path === '/right')).toBe(false)
})
expect(
native.entries.value.find((entry) => entry.route.path === "/left"),
).toMatchObject({ mounted: true, status: "inactive" });
expect(
native.entries.value.find((entry) => entry.route.path === "/middle"),
).toMatchObject({ mounted: true, status: "active" });
expect(
native.entries.value.some((entry) => entry.route.path === "/right"),
).toBe(false);
});
it('prepares a newly mounted destination for a paint before animation can begin', async () => {
vi.mocked(window.matchMedia).mockReturnValue({ matches: false } as MediaQueryList)
let paint: FrameRequestCallback | undefined
vi.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
paint = callback
return 1
})
const { native } = await harness()
it("prepares a newly mounted destination for a paint before animation can begin", async () => {
vi.mocked(window.matchMedia).mockReturnValue({
matches: false,
} as MediaQueryList);
let paint: FrameRequestCallback | undefined;
vi.spyOn(window, "requestAnimationFrame").mockImplementation((callback) => {
paint = callback;
return 1;
});
const { native } = await harness();
let resolved = false
const beginning = native.beginInteractive('push', '/b').then((id) => {
resolved = true
return id
})
await vi.waitFor(() => expect(paint).toBeTypeOf('function'))
let resolved = false;
const beginning = native.beginInteractive("push", "/b").then((id) => {
resolved = true;
return id;
});
await vi.waitFor(() => expect(paint).toBeTypeOf("function"));
expect(resolved).toBe(false)
expect(native.entries.value.find((entry) => entry.route.path === '/b')?.mounted).toBe(true)
paint?.(performance.now())
expect(await beginning).not.toBeNull()
vi.mocked(window.matchMedia).mockReturnValue({ matches: true } as MediaQueryList)
await native.cancelInteractive()
})
expect(resolved).toBe(false);
expect(
native.entries.value.find((entry) => entry.route.path === "/b")?.mounted,
).toBe(true);
paint?.(performance.now());
expect(await beginning).not.toBeNull();
vi.mocked(window.matchMedia).mockReturnValue({
matches: true,
} as MediaQueryList);
await native.cancelInteractive();
});
it('collapses pushed history when a tab replaces it with an existing root', async () => {
const { router, native } = await harness()
await native.push('/b')
expect(native.canGoBack.value).toBe(true)
it("collapses pushed history when a tab replaces it with an existing root", async () => {
const { router, native } = await harness();
await native.push("/b");
expect(native.canGoBack.value).toBe(true);
await native.sibling('/a', { replace: true })
await native.sibling("/a", { replace: true });
expect(router.currentRoute.value.path).toBe('/a')
expect(native.canGoBack.value).toBe(false)
expect(await native.beginInteractive('pop')).toBeNull()
})
expect(router.currentRoute.value.path).toBe("/a");
expect(native.canGoBack.value).toBe(false);
expect(await native.beginInteractive("pop")).toBeNull();
});
it('manually unloads inactive route instances but never the active view', async () => {
const { native } = await harness()
await native.replace('/left', { presentation: 'none' })
await native.sibling('/middle', { replace: true })
it("manually unloads inactive route instances but never the active view", async () => {
const { native } = await harness();
await native.replace("/left", { presentation: "none" });
await native.sibling("/middle", { replace: true });
expect(native.unload('/left')).toBe(1)
expect(native.entries.value.find((entry) => entry.route.path === '/left')).toMatchObject({
expect(native.unload("/left")).toBe(1);
expect(
native.entries.value.find((entry) => entry.route.path === "/left"),
).toMatchObject({
mounted: false,
evictionReason: 'manual',
})
expect(native.unload('/middle')).toBe(0)
expect(native.entries.value.find((entry) => entry.route.path === '/middle')?.mounted).toBe(true)
})
evictionReason: "manual",
});
expect(native.unload("/middle")).toBe(0);
expect(
native.entries.value.find((entry) => entry.route.path === "/middle")
?.mounted,
).toBe(true);
});
it('evicts the least-recently-used inactive view when the cache limit is exceeded', async () => {
let clock = 0
vi.spyOn(performance, 'now').mockImplementation(() => ++clock)
const { native } = await harness()
await native.replace('/left', { presentation: 'none' })
await native.sibling('/middle', { replace: true })
await native.sibling('/right', { replace: true })
await native.sibling('/a', { replace: true })
it("evicts the least-recently-used inactive view when the cache limit is exceeded", async () => {
let clock = 0;
vi.spyOn(performance, "now").mockImplementation(() => ++clock);
const { native } = await harness();
await native.replace("/left", { presentation: "none" });
await native.sibling("/middle", { replace: true });
await native.sibling("/right", { replace: true });
await native.sibling("/a", { replace: true });
expect(native.entries.value.find((entry) => entry.route.path === '/left')).toMatchObject({
expect(
native.entries.value.find((entry) => entry.route.path === "/left"),
).toMatchObject({
mounted: false,
evictionReason: 'cache-limit',
})
expect(native.entries.value.find((entry) => entry.route.path === '/middle')?.mounted).toBe(true)
expect(native.entries.value.find((entry) => entry.route.path === '/right')?.mounted).toBe(true)
expect(native.cacheStats.value.inactive).toBe(2)
})
evictionReason: "cache-limit",
});
expect(
native.entries.value.find((entry) => entry.route.path === "/middle")
?.mounted,
).toBe(true);
expect(
native.entries.value.find((entry) => entry.route.path === "/right")
?.mounted,
).toBe(true);
expect(native.cacheStats.value.inactive).toBe(2);
});
it('evicts a pushed route after it is popped out of history', async () => {
const { native } = await harness()
await native.push('/b')
const pushedKey = native.activeKey.value
await native.pop()
it("evicts a pushed route after it is popped out of history", async () => {
const { native } = await harness();
await native.push("/b");
const pushedKey = native.activeKey.value;
await native.pop();
expect(native.entries.value.find((entry) => entry.key === pushedKey)).toMatchObject({
expect(
native.entries.value.find((entry) => entry.key === pushedKey),
).toMatchObject({
mounted: false,
status: 'evicted',
evictionReason: 'popped',
})
})
status: "evicted",
evictionReason: "popped",
});
});
it('honors cache opt-out even for a route that remains in back history', async () => {
const { native } = await harness()
await native.push('/no-cache')
const noCacheKey = native.activeKey.value
await native.push('/c')
it("honors cache opt-out even for a route that remains in back history", async () => {
const { native } = await harness();
await native.push("/no-cache");
const noCacheKey = native.activeKey.value;
await native.push("/c");
expect(native.entries.value.find((entry) => entry.key === noCacheKey)).toMatchObject({
expect(
native.entries.value.find((entry) => entry.key === noCacheKey),
).toMatchObject({
mounted: false,
evictionReason: 'cache-disabled',
})
expect(await native.beginInteractive('pop')).not.toBeNull()
expect(native.entries.value.find((entry) => entry.key === noCacheKey)?.mounted).toBe(true)
await native.cancelInteractive()
})
evictionReason: "cache-disabled",
});
expect(await native.beginInteractive("pop")).not.toBeNull();
expect(
native.entries.value.find((entry) => entry.key === noCacheKey)?.mounted,
).toBe(true);
await native.cancelInteractive();
});
it('keeps pinned views during normal trims and releases them when requested', async () => {
const { native } = await harness()
await native.replace('/pinned', { presentation: 'none' })
const pinnedKey = native.activeKey.value
await native.push('/c')
it("keeps pinned views during normal trims and releases them when requested", async () => {
const { native } = await harness();
await native.replace("/pinned", { presentation: "none" });
const pinnedKey = native.activeKey.value;
await native.push("/c");
native.trimCache()
expect(native.entries.value.find((entry) => entry.key === pinnedKey)?.mounted).toBe(true)
native.trimCache({ includePinned: true })
expect(native.entries.value.find((entry) => entry.key === pinnedKey)).toMatchObject({
native.trimCache();
expect(
native.entries.value.find((entry) => entry.key === pinnedKey)?.mounted,
).toBe(true);
native.trimCache({ includePinned: true });
expect(
native.entries.value.find((entry) => entry.key === pinnedKey),
).toMatchObject({
mounted: false,
evictionReason: 'trimmed',
})
})
evictionReason: "trimmed",
});
});
it('evicts a previously cached target when its guard rejects re-entry', async () => {
const { router, native } = await harness()
await native.replace('/left', { presentation: 'none' })
await native.sibling('/middle', { replace: true })
const cachedLeft = native.entries.value.find((entry) => entry.route.path === '/left')
expect(cachedLeft?.mounted).toBe(true)
const removeGuard = router.beforeEach((to) => to.path === '/left' ? false : undefined)
it("evicts a previously cached target when its guard rejects re-entry", async () => {
const { router, native } = await harness();
await native.replace("/left", { presentation: "none" });
await native.sibling("/middle", { replace: true });
const cachedLeft = native.entries.value.find(
(entry) => entry.route.path === "/left",
);
expect(cachedLeft?.mounted).toBe(true);
const removeGuard = router.beforeEach((to) =>
to.path === "/left" ? false : undefined,
);
expect(await native.sibling('/left', { replace: true })).toBe(false)
expect(native.entries.value.find((entry) => entry.key === cachedLeft?.key)).toMatchObject({
expect(await native.sibling("/left", { replace: true })).toBe(false);
expect(
native.entries.value.find((entry) => entry.key === cachedLeft?.key),
).toMatchObject({
mounted: false,
evictionReason: 'navigation-rejected',
})
expect(native.cacheStats.value.totalEvictions).toBeGreaterThan(0)
removeGuard()
})
evictionReason: "navigation-rejected",
});
expect(native.cacheStats.value.totalEvictions).toBeGreaterThan(0);
removeGuard();
});
it('does not preview a stale forward entry after pop then push', async () => {
const { native } = await harness()
await native.push('/b')
await native.pop()
await native.push('/c')
it("does not preview a stale forward entry after pop then push", async () => {
const { native } = await harness();
await native.push("/b");
await native.pop();
await native.push("/c");
await native.beginInteractive('pop')
const target = native.entries.value.find((entry) => entry.key === native.transaction.value?.toKey)
expect(target?.route.path).toBe('/a')
await native.cancelInteractive()
})
await native.beginInteractive("pop");
const target = native.entries.value.find(
(entry) => entry.key === native.transaction.value?.toKey,
);
expect(target?.route.path).toBe("/a");
await native.cancelInteractive();
});
it('dismisses with the presented route animation regardless of the route below it', async () => {
const { native } = await harness()
await native.push('/b')
await native.present('/modal', 'sheet')
it("dismisses with the presented route animation regardless of the route below it", async () => {
const { native } = await harness();
await native.push("/b");
await native.present("/modal", "sheet");
await native.beginInteractive('dismiss')
expect(native.transaction.value).toMatchObject({ direction: 'back', presentation: 'sheet' })
await native.cancelInteractive()
})
await native.beginInteractive("dismiss");
expect(native.transaction.value).toMatchObject({
direction: "back",
presentation: "sheet",
});
await native.cancelInteractive();
});
it('refuses to overlap a second transaction with an active gesture', async () => {
const { native } = await harness()
const first = await native.beginInteractive('push', '/b')
expect(await native.beginInteractive('push', '/c')).toBeNull()
expect(native.transaction.value?.id).toBe(first)
await native.cancelInteractive()
})
it("refuses to overlap a second transaction with an active gesture", async () => {
const { native } = await harness();
const first = await native.beginInteractive("push", "/b");
expect(await native.beginInteractive("push", "/c")).toBeNull();
expect(native.transaction.value?.id).toBe(first);
await native.cancelInteractive();
});
it('accepts imperative navigation as the previous transition finalizes', async () => {
const { router, native } = await harness()
await native.beginInteractive('push', '/b')
const finishing = native.finishInteractive(true)
const queued = native.push('/c')
expect(await finishing).toBe(true)
expect(await queued).toBe(true)
expect(router.currentRoute.value.path).toBe('/c')
expect(native.transaction.value).toBeNull()
})
it("accepts imperative navigation as the previous transition finalizes", async () => {
const { router, native } = await harness();
await native.beginInteractive("push", "/b");
const finishing = native.finishInteractive(true);
const queued = native.push("/c");
expect(await finishing).toBe(true);
expect(await queued).toBe(true);
expect(router.currentRoute.value.path).toBe("/c");
expect(native.transaction.value).toBeNull();
});
it('reconciles direct browser back navigation with the native stack', async () => {
const { router, native } = await harness()
await native.push('/b')
it("reconciles direct browser back navigation with the native stack", async () => {
const { router, native } = await harness();
await native.push("/b");
const navigated = new Promise<void>((resolve) => {
const remove = router.afterEach(() => {
remove()
resolve()
})
})
router.back()
await navigated
remove();
resolve();
});
});
router.back();
await navigated;
expect(router.currentRoute.value.path).toBe('/a')
expect(native.canGoBack.value).toBe(false)
expect(await native.beginInteractive('pop')).toBeNull()
})
})
expect(router.currentRoute.value.path).toBe("/a");
expect(native.canGoBack.value).toBe(false);
expect(await native.beginInteractive("pop")).toBeNull();
});
});

1055
packages/core/src/runtime.ts
View File

File diff suppressed because it is too large Load Diff

104
packages/core/src/style.css
View File

@@ -44,7 +44,7 @@ body,
z-index: 2147483646;
inset: 0;
background: #000;
content: '';
content: "";
opacity: 0;
pointer-events: none;
will-change: opacity;
@@ -65,58 +65,85 @@ body,
visibility: visible;
}
.nvr-view--from { z-index: 3; }
.nvr-view--to { z-index: 2; }
.nvr-view--from {
z-index: 3;
}
.nvr-view--to {
z-index: 2;
}
.nvr-router-view[data-native-presentation="push"][data-native-direction="forward"] .nvr-view--from,
.nvr-router-view[data-native-presentation="reveal"][data-native-direction="forward"] .nvr-view--from {
.nvr-router-view[data-native-presentation="push"][data-native-direction="forward"]
.nvr-view--from,
.nvr-router-view[data-native-presentation="reveal"][data-native-direction="forward"]
.nvr-view--from {
transform: translate3d(calc(var(--native-progress) * -28%), 0, 0);
}
.nvr-router-view[data-native-presentation="push"][data-native-direction="forward"] .nvr-view--from::after,
.nvr-router-view[data-native-presentation="reveal"][data-native-direction="forward"] .nvr-view--from::after {
opacity: calc(var(--native-progress) * .12);
.nvr-router-view[data-native-presentation="push"][data-native-direction="forward"]
.nvr-view--from::after,
.nvr-router-view[data-native-presentation="reveal"][data-native-direction="forward"]
.nvr-view--from::after {
opacity: calc(var(--native-progress) * 0.12);
}
.nvr-router-view[data-native-presentation="push"][data-native-direction="forward"] .nvr-view--to,
.nvr-router-view[data-native-presentation="reveal"][data-native-direction="forward"] .nvr-view--to {
.nvr-router-view[data-native-presentation="push"][data-native-direction="forward"]
.nvr-view--to,
.nvr-router-view[data-native-presentation="reveal"][data-native-direction="forward"]
.nvr-view--to {
z-index: 4;
transform: translate3d(calc((1 - var(--native-progress)) * 100%), 0, 0);
box-shadow: -18px 0 42px rgba(0, 0, 0, .28);
box-shadow: -18px 0 42px rgba(0, 0, 0, 0.28);
}
.nvr-router-view:is([data-native-presentation="push"], [data-native-presentation="reveal"])[data-native-direction="back"] .nvr-view--from {
.nvr-router-view:is(
[data-native-presentation="push"],
[data-native-presentation="reveal"]
)[data-native-direction="back"]
.nvr-view--from {
z-index: 4;
transform: translate3d(calc(var(--native-progress) * 100%), 0, 0);
box-shadow: -18px 0 42px rgba(0, 0, 0, .25);
box-shadow: -18px 0 42px rgba(0, 0, 0, 0.25);
}
.nvr-router-view:is([data-native-presentation="push"], [data-native-presentation="reveal"])[data-native-direction="back"] .nvr-view--to {
.nvr-router-view:is(
[data-native-presentation="push"],
[data-native-presentation="reveal"]
)[data-native-direction="back"]
.nvr-view--to {
transform: translate3d(calc((var(--native-progress) - 1) * 28%), 0, 0);
}
.nvr-router-view:is([data-native-presentation="push"], [data-native-presentation="reveal"])[data-native-direction="back"] .nvr-view--to::after {
opacity: calc((1 - var(--native-progress)) * .12);
.nvr-router-view:is(
[data-native-presentation="push"],
[data-native-presentation="reveal"]
)[data-native-direction="back"]
.nvr-view--to::after {
opacity: calc((1 - var(--native-progress)) * 0.12);
}
/* Sibling routes are adjacent pages, not a foreground/background stack. */
.nvr-router-view[data-native-presentation="slide"][data-native-direction="forward"] .nvr-view--from {
.nvr-router-view[data-native-presentation="slide"][data-native-direction="forward"]
.nvr-view--from {
transform: translate3d(calc(var(--native-progress) * -100%), 0, 0);
}
.nvr-router-view[data-native-presentation="slide"][data-native-direction="forward"] .nvr-view--to {
.nvr-router-view[data-native-presentation="slide"][data-native-direction="forward"]
.nvr-view--to {
transform: translate3d(calc((1 - var(--native-progress)) * 100%), 0, 0);
}
.nvr-router-view[data-native-presentation="slide"][data-native-direction="back"] .nvr-view--from {
.nvr-router-view[data-native-presentation="slide"][data-native-direction="back"]
.nvr-view--from {
transform: translate3d(calc(var(--native-progress) * 100%), 0, 0);
}
.nvr-router-view[data-native-presentation="slide"][data-native-direction="back"] .nvr-view--to {
.nvr-router-view[data-native-presentation="slide"][data-native-direction="back"]
.nvr-view--to {
transform: translate3d(calc((var(--native-progress) - 1) * 100%), 0, 0);
}
.nvr-router-view[data-native-presentation="slide"] :is(.nvr-view--from, .nvr-view--to) {
.nvr-router-view[data-native-presentation="slide"]
:is(.nvr-view--from, .nvr-view--to) {
z-index: 3;
box-shadow: none;
}
@@ -125,19 +152,20 @@ body,
.nvr-router-view[data-native-presentation="sheet"] .nvr-view--to {
z-index: 4;
transform: translate3d(0, calc((1 - var(--native-progress)) * 100%), 0);
border-radius: calc((1 - var(--native-progress)) * 24px) calc((1 - var(--native-progress)) * 24px) 0 0;
box-shadow: 0 -24px 60px rgba(0, 0, 0, .34);
border-radius: calc((1 - var(--native-progress)) * 24px)
calc((1 - var(--native-progress)) * 24px) 0 0;
box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.34);
}
.nvr-router-view[data-native-presentation="modal"] .nvr-view--from,
.nvr-router-view[data-native-presentation="sheet"] .nvr-view--from {
transform: scale(calc(1 - var(--native-progress) * .04));
transform: scale(calc(1 - var(--native-progress) * 0.04));
border-radius: calc(var(--native-progress) * 18px);
}
.nvr-router-view[data-native-presentation="modal"] .nvr-view--from::after,
.nvr-router-view[data-native-presentation="sheet"] .nvr-view--from::after {
opacity: calc(var(--native-progress) * .24);
opacity: calc(var(--native-progress) * 0.24);
}
.nvr-router-view[data-native-presentation="fade"] .nvr-view--from {
@@ -158,25 +186,35 @@ body,
touch-action: pan-x pinch-zoom;
}
.nvr-router-view[data-native-presentation="modal"][data-native-direction="back"] .nvr-view--from,
.nvr-router-view[data-native-presentation="sheet"][data-native-direction="back"] .nvr-view--from {
.nvr-router-view[data-native-presentation="modal"][data-native-direction="back"]
.nvr-view--from,
.nvr-router-view[data-native-presentation="sheet"][data-native-direction="back"]
.nvr-view--from {
z-index: 4;
transform: translate3d(0, calc(var(--native-progress) * 100%), 0);
border-radius: 22px 22px 0 0;
}
.nvr-router-view[data-native-presentation="modal"][data-native-direction="back"] .nvr-view--to,
.nvr-router-view[data-native-presentation="sheet"][data-native-direction="back"] .nvr-view--to {
.nvr-router-view[data-native-presentation="modal"][data-native-direction="back"]
.nvr-view--to,
.nvr-router-view[data-native-presentation="sheet"][data-native-direction="back"]
.nvr-view--to {
z-index: 2;
transform: scale(calc(.96 + var(--native-progress) * .04));
transform: scale(calc(0.96 + var(--native-progress) * 0.04));
border-radius: calc((1 - var(--native-progress)) * 18px);
box-shadow: none;
}
.nvr-router-view:is([data-native-presentation="modal"], [data-native-presentation="sheet"])[data-native-direction="back"] .nvr-view--to::after {
opacity: calc((1 - var(--native-progress)) * .24);
.nvr-router-view:is(
[data-native-presentation="modal"],
[data-native-presentation="sheet"]
)[data-native-direction="back"]
.nvr-view--to::after {
opacity: calc((1 - var(--native-progress)) * 0.24);
}
@media (prefers-reduced-motion: reduce) {
.nvr-view { will-change: auto; }
.nvr-view {
will-change: auto;
}
}

300
packages/core/src/types.ts
View File

@@ -1,196 +1,224 @@
import type { App, CSSProperties } from 'vue'
import type { App, CSSProperties } from "vue";
import type {
RouteLocationNormalizedLoaded,
RouteLocationRaw,
Router,
} from 'vue-router'
} from "vue-router";
export type NativePresentationName =
| 'push'
| 'reveal'
| 'slide'
| 'fade'
| 'modal'
| 'sheet'
| 'none'
| (string & {})
| "push"
| "reveal"
| "slide"
| "fade"
| "modal"
| "sheet"
| "none"
| (string & {});
export type NativeGestureKind = 'push' | 'pop' | 'sibling' | 'present' | 'dismiss'
export type NativeDirection = 'forward' | 'back' | 'up' | 'down'
export type NativeViewStatus = 'active' | 'inactive' | 'preview' | 'evicted'
export type NativeViewRole = 'active' | 'inactive' | 'from' | 'to'
export type NativeCachePolicy = boolean | 'pin'
export type NativeGestureKind =
"push" | "pop" | "sibling" | "present" | "dismiss";
export type NativeDirection = "forward" | "back" | "up" | "down";
export type NativeViewStatus = "active" | "inactive" | "preview" | "evicted";
export type NativeViewRole = "active" | "inactive" | "from" | "to";
export type NativeCachePolicy = boolean | "pin";
export type NativeEvictionReason =
| 'cache-disabled'
| 'cache-limit'
| 'navigation-rejected'
| 'popped'
| 'manual'
| 'trimmed'
| 'memory-pressure'
| "cache-disabled"
| "cache-limit"
| "navigation-rejected"
| "popped"
| "manual"
| "trimmed"
| "memory-pressure";
export type NativeDiagnosticEventType =
| 'route-load-start'
| 'route-load-end'
| 'transaction-start'
| 'view-prepare-start'
| 'view-prepare-end'
| 'commit-start'
| 'transaction-end'
| 'view-evicted'
| "route-load-start"
| "route-load-end"
| "transaction-start"
| "view-prepare-start"
| "view-prepare-end"
| "commit-start"
| "transaction-end"
| "view-evicted";
export interface NativeDiagnosticEvent {
type: NativeDiagnosticEventType
type: NativeDiagnosticEventType;
/** Monotonic `performance.now()` timestamp. */
timestamp: number
attempt?: number
transactionId?: number
timestamp: number;
attempt?: number;
transactionId?: number;
/** Route record name or declared path pattern; params and query values are omitted. */
route?: string
duration?: number
details?: Record<string, string | number | boolean | undefined>
route?: string;
duration?: number;
details?: Record<string, string | number | boolean | undefined>;
}
export interface NativeRouteOptions {
navigator?: string
presentation?: NativePresentationName
transition?: NativePresentationName
parent?: RouteLocationRaw | ((route: RouteLocationNormalizedLoaded) => RouteLocationRaw)
siblingGroup?: string
siblingOrder?: number
siblingHistory?: 'push' | 'replace'
navigator?: string;
presentation?: NativePresentationName;
transition?: NativePresentationName;
parent?:
| RouteLocationRaw
| ((route: RouteLocationNormalizedLoaded) => RouteLocationRaw);
siblingGroup?: string;
siblingOrder?: number;
siblingHistory?: "push" | "replace";
/** `false` disables retention; `pin` exempts the route from LRU trimming. */
cache?: NativeCachePolicy
gesture?: boolean | 'edge' | 'full'
cache?: NativeCachePolicy;
gesture?: boolean | "edge" | "full";
}
declare module 'vue-router' {
declare module "vue-router" {
interface RouteMeta {
native?: NativeRouteOptions
native?: NativeRouteOptions;
}
}
export interface NativeViewEntry {
key: string
route: RouteLocationNormalizedLoaded
status: NativeViewStatus
mounted: boolean
synthetic: boolean
key: string;
route: RouteLocationNormalizedLoaded;
status: NativeViewStatus;
mounted: boolean;
synthetic: boolean;
/** True once Vue Router has made this route authoritative. */
committed: boolean
lastUsed: number
scrollX: number
scrollY: number
evictionReason?: NativeEvictionReason
committed: boolean;
lastUsed: number;
scrollX: number;
scrollY: number;
evictionReason?: NativeEvictionReason;
}
export interface NativeCacheStats {
maxInactive: number
descriptors: number
mounted: number
inactive: number
pinned: number
evicted: number
totalEvictions: number
lastEviction?: { key: string; route: string; reason: NativeEvictionReason }
maxInactive: number;
descriptors: number;
mounted: number;
inactive: number;
pinned: number;
evicted: number;
totalEvictions: number;
lastEviction?: { key: string; route: string; reason: NativeEvictionReason };
}
export interface NativeViewLifecycle {
readonly key: string
readonly route: Readonly<{ value: RouteLocationNormalizedLoaded }>
readonly status: Readonly<{ value: NativeViewStatus }>
readonly role: Readonly<{ value: NativeViewRole }>
readonly isActive: Readonly<{ value: boolean }>
readonly isVisible: Readonly<{ value: boolean }>
readonly isPreview: Readonly<{ value: boolean }>
readonly isCached: Readonly<{ value: boolean }>
readonly evictionReason: Readonly<{ value: NativeEvictionReason | undefined }>
readonly key: string;
readonly route: Readonly<{ value: RouteLocationNormalizedLoaded }>;
readonly status: Readonly<{ value: NativeViewStatus }>;
readonly role: Readonly<{ value: NativeViewRole }>;
readonly isActive: Readonly<{ value: boolean }>;
readonly isVisible: Readonly<{ value: boolean }>;
readonly isPreview: Readonly<{ value: boolean }>;
readonly isCached: Readonly<{ value: boolean }>;
readonly evictionReason: Readonly<{
value: NativeEvictionReason | undefined;
}>;
}
export interface NativeSourceRect {
top: number
left: number
width: number
height: number
viewportWidth: number
viewportHeight: number
top: number;
left: number;
width: number;
height: number;
viewportWidth: number;
viewportHeight: number;
}
export interface NativeTransaction {
id: number
kind: NativeGestureKind
direction: NativeDirection
presentation: NativePresentationName
fromKey: string
toKey: string
progress: number
velocity: number
phase: 'candidate' | 'interactive' | 'settling' | 'committing' | 'cancelled'
replace: boolean
sourceRect?: NativeSourceRect
id: number;
kind: NativeGestureKind;
direction: NativeDirection;
presentation: NativePresentationName;
fromKey: string;
toKey: string;
progress: number;
velocity: number;
phase: "candidate" | "interactive" | "settling" | "committing" | "cancelled";
replace: boolean;
sourceRect?: NativeSourceRect;
}
export interface NativePresentationContext {
progress: number
role: 'from' | 'to'
direction: NativeDirection
sourceRect?: NativeSourceRect
progress: number;
role: "from" | "to";
direction: NativeDirection;
sourceRect?: NativeSourceRect;
}
export interface NativePresentationDefinition {
name: NativePresentationName
axis?: 'x' | 'y'
layerStyle?: (context: NativePresentationContext) => CSSProperties
name: NativePresentationName;
axis?: "x" | "y";
layerStyle?: (context: NativePresentationContext) => CSSProperties;
}
export interface NativePlatformAdapter {
name: string
install?: (runtime: NativeRouterRuntime) => void | (() => void) | Promise<void | (() => void)>
haptic?: (event: 'selection' | 'commit' | 'cancel') => void | Promise<void>
exitAtRoot?: () => void | Promise<void>
name: string;
install?: (
runtime: NativeRouterRuntime,
) => void | (() => void) | Promise<void | (() => void)>;
haptic?: (event: "selection" | "commit" | "cancel") => void | Promise<void>;
exitAtRoot?: () => void | Promise<void>;
}
export interface NativeRouterOptions {
router: Router
cache?: { maxInactive?: number }
edgeWidth?: number
platform?: NativePlatformAdapter
presentations?: NativePresentationDefinition[]
router: Router;
cache?: { maxInactive?: number };
edgeWidth?: number;
platform?: NativePlatformAdapter;
presentations?: NativePresentationDefinition[];
}
export interface NativeNavigationOptions {
presentation?: NativePresentationName
replace?: boolean
direction?: NativeDirection
sourceRect?: NativeSourceRect
presentation?: NativePresentationName;
replace?: boolean;
direction?: NativeDirection;
sourceRect?: NativeSourceRect;
}
export interface NativeRouterRuntime {
readonly router: Router
readonly entries: Readonly<{ value: readonly NativeViewEntry[] }>
readonly activeKey: Readonly<{ value: string }>
readonly transaction: Readonly<{ value: NativeTransaction | null }>
readonly canGoBack: Readonly<{ value: boolean }>
readonly cacheStats: Readonly<{ value: NativeCacheStats }>
install(app: App): void
push(to: RouteLocationRaw, options?: NativeNavigationOptions): Promise<boolean>
replace(to: RouteLocationRaw, options?: NativeNavigationOptions): Promise<boolean>
sibling(to: RouteLocationRaw, options?: NativeNavigationOptions): Promise<boolean>
pop(): Promise<boolean>
present(to: RouteLocationRaw, presentation?: NativePresentationName): Promise<boolean>
dismiss(): Promise<boolean>
preload(to: RouteLocationRaw): Promise<RouteLocationNormalizedLoaded>
beginInteractive(kind: NativeGestureKind, to?: RouteLocationRaw, options?: NativeNavigationOptions): Promise<number | null>
updateInteractive(progress: number, velocity?: number): void
finishInteractive(forceCommit?: boolean): Promise<boolean>
cancelInteractive(): Promise<void>
readonly router: Router;
readonly entries: Readonly<{ value: readonly NativeViewEntry[] }>;
readonly activeKey: Readonly<{ value: string }>;
readonly transaction: Readonly<{ value: NativeTransaction | null }>;
readonly canGoBack: Readonly<{ value: boolean }>;
readonly cacheStats: Readonly<{ value: NativeCacheStats }>;
install(app: App): void;
push(
to: RouteLocationRaw,
options?: NativeNavigationOptions,
): Promise<boolean>;
replace(
to: RouteLocationRaw,
options?: NativeNavigationOptions,
): Promise<boolean>;
sibling(
to: RouteLocationRaw,
options?: NativeNavigationOptions,
): Promise<boolean>;
pop(): Promise<boolean>;
present(
to: RouteLocationRaw,
presentation?: NativePresentationName,
): Promise<boolean>;
dismiss(): Promise<boolean>;
preload(to: RouteLocationRaw): Promise<RouteLocationNormalizedLoaded>;
beginInteractive(
kind: NativeGestureKind,
to?: RouteLocationRaw,
options?: NativeNavigationOptions,
): Promise<number | null>;
updateInteractive(progress: number, velocity?: number): void;
finishInteractive(forceCommit?: boolean): Promise<boolean>;
cancelInteractive(): Promise<void>;
/** Unmount every inactive instance matching this location. Active and transitioning views are never unloaded. */
unload(to: RouteLocationRaw): number
unload(to: RouteLocationRaw): number;
/** Unmount inactive cached views while retaining route/history descriptors. */
trimCache(options?: { includePinned?: boolean; reason?: NativeEvictionReason }): void
trimCache(options?: {
includePinned?: boolean;
reason?: NativeEvictionReason;
}): void;
/** Subscribe to timing-safe runtime diagnostics. No per-frame events are emitted here. */
onDiagnostic(listener: (event: NativeDiagnosticEvent) => void): () => void
registerPresentation(definition: NativePresentationDefinition): void
presentationFor(name: NativePresentationName): NativePresentationDefinition | undefined
dispose(): void
onDiagnostic(listener: (event: NativeDiagnosticEvent) => void): () => void;
registerPresentation(definition: NativePresentationDefinition): void;
presentationFor(
name: NativePresentationName,
): NativePresentationDefinition | undefined;
dispose(): void;
}

18
packages/core/vite.config.ts
View File

@@ -1,10 +1,16 @@
import { defineConfig } from 'vite'
import { resolve } from 'node:path'
import { defineConfig } from "vite";
import { resolve } from "node:path";
export default defineConfig({
build: {
outDir: 'dist', emptyOutDir: true,
lib: { entry: resolve(__dirname, 'src/index.ts'), formats: ['es'], fileName: 'index', cssFileName: 'style' },
rollupOptions: { external: ['vue', 'vue-router'] },
outDir: "dist",
emptyOutDir: true,
lib: {
entry: resolve(__dirname, "src/index.ts"),
formats: ["es"],
fileName: "index",
cssFileName: "style",
},
})
rollupOptions: { external: ["vue", "vue-router"] },
},
});

19
packages/electron/package.json
View File

@@ -3,8 +3,19 @@
"version": "0.1.0",
"type": "module",
"license": "MIT",
"files": ["dist"],
"scripts": { "build": "vite build --config vite.config.ts && vue-tsc -p tsconfig.json --emitDeclarationOnly" },
"exports": { ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" } },
"peerDependencies": { "@native-vue-router/core": "^0.1.0" }
"files": [
"dist"
],
"scripts": {
"build": "vite build --config vite.config.ts && vue-tsc -p tsconfig.json --emitDeclarationOnly"
},
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js"
}
},
"peerDependencies": {
"@native-vue-router/core": "^0.1.0"
}
}

51
packages/electron/src/index.ts
View File

@@ -1,39 +1,48 @@
import type { NativePlatformAdapter, NativeRouterRuntime } from '@native-vue-router/core'
import type {
NativePlatformAdapter,
NativeRouterRuntime,
} from "@native-vue-router/core";
export interface ElectronCommandLine {
appendSwitch(name: string, value?: string): void
appendSwitch(name: string, value?: string): void;
}
export function disableElectronHistoryGestures(commandLine: ElectronCommandLine) {
commandLine.appendSwitch('disable-features', 'OverscrollHistoryNavigation')
export function disableElectronHistoryGestures(
commandLine: ElectronCommandLine,
) {
commandLine.appendSwitch("disable-features", "OverscrollHistoryNavigation");
}
declare global {
interface Window {
nativeVueHost?: {
onBack(callback: () => void): () => void
onForward?(callback: () => void): () => void
onMemoryPressure?(callback: () => void): () => void
}
onBack(callback: () => void): () => void;
onForward?(callback: () => void): () => void;
onMemoryPressure?(callback: () => void): () => void;
};
}
}
export function createElectronRendererAdapter(): NativePlatformAdapter {
return {
name: 'electron',
name: "electron",
install(runtime: NativeRouterRuntime) {
const removeBack = window.nativeVueHost?.onBack(() => {
if (runtime.canGoBack.value) void runtime.pop()
})
const removeForward = window.nativeVueHost?.onForward?.(() => runtime.router.forward())
const removeMemoryPressure = window.nativeVueHost?.onMemoryPressure?.(() => {
runtime.trimCache({ reason: 'memory-pressure' })
})
return () => {
removeBack?.()
removeForward?.()
removeMemoryPressure?.()
}
if (runtime.canGoBack.value) void runtime.pop();
});
const removeForward = window.nativeVueHost?.onForward?.(() =>
runtime.router.forward(),
);
const removeMemoryPressure = window.nativeVueHost?.onMemoryPressure?.(
() => {
runtime.trimCache({ reason: "memory-pressure" });
},
}
);
return () => {
removeBack?.();
removeForward?.();
removeMemoryPressure?.();
};
},
};
}

17
packages/electron/vite.config.ts
View File

@@ -1,10 +1,15 @@
import { defineConfig } from 'vite'
import { resolve } from 'node:path'
import { defineConfig } from "vite";
import { resolve } from "node:path";
export default defineConfig({
build: {
outDir: 'dist', emptyOutDir: true,
lib: { entry: resolve(__dirname, 'src/index.ts'), formats: ['es'], fileName: 'index' },
rollupOptions: { external: ['@native-vue-router/core'] },
outDir: "dist",
emptyOutDir: true,
lib: {
entry: resolve(__dirname, "src/index.ts"),
formats: ["es"],
fileName: "index",
},
})
rollupOptions: { external: ["@native-vue-router/core"] },
},
});

17
packages/preset-native/package.json
View File

@@ -3,11 +3,20 @@
"version": "0.1.0",
"type": "module",
"license": "MIT",
"files": ["dist"],
"sideEffects": ["./dist/style.css"],
"scripts": { "build": "vite build --config vite.config.ts && vue-tsc -p tsconfig.json --emitDeclarationOnly" },
"files": [
"dist"
],
"sideEffects": [
"./dist/style.css"
],
"scripts": {
"build": "vite build --config vite.config.ts && vue-tsc -p tsconfig.json --emitDeclarationOnly"
},
"exports": {
".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" },
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js"
},
"./style.css": "./dist/style.css"
},
"peerDependencies": {

118
packages/preset-native/src/index.ts
View File

@@ -1,71 +1,103 @@
import { defineComponent, h, type PropType } from 'vue'
import type { RouteLocationNormalizedLoaded, RouteLocationRaw } from 'vue-router'
import { useNativeRouter } from '@native-vue-router/core'
import './style.css'
import { defineComponent, h, type PropType } from "vue";
import type {
RouteLocationNormalizedLoaded,
RouteLocationRaw,
} from "vue-router";
import { useNativeRouter } from "@native-vue-router/core";
import "./style.css";
export type NativePlatform = 'ios' | 'android' | 'desktop'
export type NativePlatform = "ios" | "android" | "desktop";
export function detectNativePlatform(): NativePlatform {
if (typeof navigator === 'undefined') return 'desktop'
if (/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent) && ('ontouchend' in document)) return 'ios'
if (/Android/.test(navigator.userAgent)) return 'android'
return 'desktop'
if (typeof navigator === "undefined") return "desktop";
if (
/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent) &&
"ontouchend" in document
)
return "ios";
if (/Android/.test(navigator.userAgent)) return "android";
return "desktop";
}
export const NativeBackButton = defineComponent({
name: 'NativeBackButton',
props: { label: { type: String, default: 'Back' } },
name: "NativeBackButton",
props: { label: { type: String, default: "Back" } },
setup(props) {
const native = useNativeRouter()
return () => h('button', {
type: 'button',
class: 'nvr-native-back',
'aria-label': props.label,
const native = useNativeRouter();
return () =>
h(
"button",
{
type: "button",
class: "nvr-native-back",
"aria-label": props.label,
onClick: () => void native.pop(),
}, [h('span', { 'aria-hidden': 'true' }, '‹'), h('span', props.label)])
},
})
[h("span", { "aria-hidden": "true" }, "‹"), h("span", props.label)],
);
},
});
export interface NativeTabItem {
label: string
to: RouteLocationRaw
icon?: string
activeWhen?: (current: RouteLocationNormalizedLoaded) => boolean
label: string;
to: RouteLocationRaw;
icon?: string;
activeWhen?: (current: RouteLocationNormalizedLoaded) => boolean;
}
export const NativeTabBar = defineComponent({
name: 'NativeTabBar',
name: "NativeTabBar",
props: {
items: { type: Array as PropType<NativeTabItem[]>, required: true },
},
setup(props) {
const native = useNativeRouter()
return () => h('nav', { class: 'nvr-native-tabs', 'aria-label': 'Primary navigation' },
const native = useNativeRouter();
return () =>
h(
"nav",
{ class: "nvr-native-tabs", "aria-label": "Primary navigation" },
props.items.map((item) => {
const current = native.router.currentRoute.value
const exact = current.path === native.router.resolve(item.to).path
const active = exact || Boolean(item.activeWhen?.(current))
const href = native.router.resolve(item.to).href
return h('a', {
const current = native.router.currentRoute.value;
const exact = current.path === native.router.resolve(item.to).path;
const active = exact || Boolean(item.activeWhen?.(current));
const href = native.router.resolve(item.to).href;
return h(
"a",
{
href,
class: ['nvr-native-tab', active && 'nvr-native-tab--active'],
'aria-current': active ? 'page' : undefined,
class: ["nvr-native-tab", active && "nvr-native-tab--active"],
"aria-current": active ? "page" : undefined,
onClick: (event: MouseEvent) => {
if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
event.preventDefault()
if (exact) return
void native.sibling(item.to, { replace: true })
if (
event.defaultPrevented ||
event.button !== 0 ||
event.metaKey ||
event.ctrlKey ||
event.shiftKey ||
event.altKey
)
return;
event.preventDefault();
if (exact) return;
void native.sibling(item.to, { replace: true });
},
}, [
h('span', { class: 'nvr-native-tab__icon', 'aria-hidden': 'true' }, item.icon ?? '•'),
h('span', item.label),
])
}))
},
})
[
h(
"span",
{ class: "nvr-native-tab__icon", "aria-hidden": "true" },
item.icon ?? "•",
),
h("span", item.label),
],
);
}),
);
},
});
export const nativeMotionTokens = {
ios: { edgeWidth: 28, commitThreshold: 0.36 },
android: { edgeWidth: 24, commitThreshold: 0.32 },
desktop: { edgeWidth: 18, commitThreshold: 0.4 },
} as const
} as const;

22
packages/preset-native/src/style.css
View File

@@ -30,9 +30,14 @@
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
padding: 8px max(12px, var(--nvr-safe-right)) calc(8px + var(--nvr-safe-bottom)) max(12px, var(--nvr-safe-left));
padding: 8px max(12px, var(--nvr-safe-right))
calc(8px + var(--nvr-safe-bottom)) max(12px, var(--nvr-safe-left));
border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
background: color-mix(in srgb, var(--nvr-view-background, #fff) 88%, transparent);
background: color-mix(
in srgb,
var(--nvr-view-background, #fff) 88%,
transparent
);
backdrop-filter: blur(24px) saturate(1.6);
}
@@ -48,9 +53,16 @@
font-weight: 600;
}
.nvr-native-tab--active { color: var(--nvr-accent); }
.nvr-native-tab__icon { font-size: 19px; line-height: 1.2; }
.nvr-native-tab--active {
color: var(--nvr-accent);
}
.nvr-native-tab__icon {
font-size: 19px;
line-height: 1.2;
}
@media (pointer: fine) and (min-width: 900px) {
.nvr-native-tabs { border-radius: 18px 18px 0 0; }
.nvr-native-tabs {
border-radius: 18px 18px 0 0;
}
}

20
packages/preset-native/vite.config.ts
View File

@@ -1,10 +1,18 @@
import { defineConfig } from 'vite'
import { resolve } from 'node:path'
import { defineConfig } from "vite";
import { resolve } from "node:path";
export default defineConfig({
build: {
outDir: 'dist', emptyOutDir: true,
lib: { entry: resolve(__dirname, 'src/index.ts'), formats: ['es'], fileName: 'index', cssFileName: 'style' },
rollupOptions: { external: ['vue', 'vue-router', '@native-vue-router/core'] },
outDir: "dist",
emptyOutDir: true,
lib: {
entry: resolve(__dirname, "src/index.ts"),
formats: ["es"],
fileName: "index",
cssFileName: "style",
},
})
rollupOptions: {
external: ["vue", "vue-router", "@native-vue-router/core"],
},
},
});

16
playwright.config.ts
View File

@@ -1,16 +1,16 @@
import { defineConfig, devices } from '@playwright/test'
import { defineConfig, devices } from "@playwright/test";
export default defineConfig({
testDir: './apps/demo/e2e',
use: { baseURL: 'http://127.0.0.1:4173', trace: 'retain-on-failure' },
testDir: "./apps/demo/e2e",
use: { baseURL: "http://127.0.0.1:4173", trace: "retain-on-failure" },
projects: [
{ name: 'mobile-chromium', use: { ...devices['Pixel 7'] } },
{ name: 'mobile-webkit', use: { ...devices['iPhone 15'] } },
{ name: 'desktop', use: { ...devices['Desktop Chrome'] } },
{ name: "mobile-chromium", use: { ...devices["Pixel 7"] } },
{ name: "mobile-webkit", use: { ...devices["iPhone 15"] } },
{ name: "desktop", use: { ...devices["Desktop Chrome"] } },
],
webServer: {
command: 'npm run build && npm run preview -- --host 127.0.0.1',
command: "npm run build && npm run preview -- --host 127.0.0.1",
port: 4173,
reuseExistingServer: true,
},
})
});

4
tsconfig.app.json
View File

@@ -12,7 +12,9 @@
"paths": {
"@/*": ["./apps/demo/src/*"],
"@native-vue-router/core": ["./packages/core/src/index.ts"],
"@native-vue-router/preset-native": ["./packages/preset-native/src/index.ts"],
"@native-vue-router/preset-native": [
"./packages/preset-native/src/index.ts"
],
"@native-vue-router/capacitor": ["./packages/capacitor/src/index.ts"],
"@native-vue-router/electron": ["./packages/electron/src/index.ts"]
}

7
tsconfig.node.json
View File

@@ -20,5 +20,10 @@
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true
},
"include": ["vite.config.ts", "vitest.config.ts", "playwright.config.ts", "apps/capacitor/capacitor.config.ts"]
"include": [
"vite.config.ts",
"vitest.config.ts",
"playwright.config.ts",
"apps/capacitor/capacitor.config.ts"
]
}

117
vite.config.ts
View File

@@ -1,75 +1,120 @@
import path from 'node:path'
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'
import path from "node:path";
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
import vue from "@vitejs/plugin-vue";
import { VitePWA } from "vite-plugin-pwa";
export default defineConfig({
base: './',
root: path.resolve(__dirname, 'apps/demo'),
publicDir: path.resolve(__dirname, 'public'),
base: "./",
root: path.resolve(__dirname, "apps/demo"),
publicDir: path.resolve(__dirname, "public"),
define: {
__NVR_BUILD_ID__: JSON.stringify(new Date().toISOString()),
},
server: {
// iOS Safari can otherwise retain a tunnelled development response after
// the dev server has restarted with a new build.
headers: { 'Cache-Control': 'no-store' },
headers: { "Cache-Control": "no-store" },
allowedHosts: ["demo.native-router.harvmaster.com"],
},
preview: {
// Production hosts should apply the same policy at least to index.html and
// sw.js. Fingerprinted assets can use immutable caching when deployed.
headers: { 'Cache-Control': 'no-cache' },
headers: { "Cache-Control": "no-cache" },
},
plugins: [
vue(),
tailwindcss(),
VitePWA({
registerType: 'autoUpdate',
registerType: "autoUpdate",
devOptions: {
enabled: true,
navigateFallback: 'index.html',
navigateFallback: "index.html",
suppressWarnings: true,
},
includeAssets: ['favicon.svg', 'app-icon.svg', 'apple-touch-icon.png', 'pwa-192.png', 'pwa-512.png'],
includeAssets: [
"favicon.svg",
"app-icon.svg",
"apple-touch-icon.png",
"pwa-192.png",
"pwa-512.png",
],
manifest: {
id: '/',
name: 'Native Vue Messenger',
short_name: 'NVR Messenger',
description: 'Gesture-first navigation for Vue applications',
theme_color: '#0b0d12',
background_color: '#0b0d12',
display: 'standalone',
scope: '/',
orientation: 'any',
start_url: '/',
id: "/",
name: "Native Vue Messenger",
short_name: "NVR Messenger",
description: "Gesture-first navigation for Vue applications",
theme_color: "#0b0d12",
background_color: "#0b0d12",
display: "standalone",
scope: "/",
orientation: "any",
start_url: "/",
icons: [
{ src: '/pwa-192.png', sizes: '192x192', type: 'image/png', purpose: 'any' },
{ src: '/pwa-512.png', sizes: '512x512', type: 'image/png', purpose: 'any' },
{ src: '/pwa-512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' },
{ src: '/app-icon.svg', sizes: 'any', type: 'image/svg+xml', purpose: 'any' },
{
src: "/pwa-192.png",
sizes: "192x192",
type: "image/png",
purpose: "any",
},
{
src: "/pwa-512.png",
sizes: "512x512",
type: "image/png",
purpose: "any",
},
{
src: "/pwa-512.png",
sizes: "512x512",
type: "image/png",
purpose: "maskable",
},
{
src: "/app-icon.svg",
sizes: "any",
type: "image/svg+xml",
purpose: "any",
},
],
},
workbox: {
cleanupOutdatedCaches: true,
clientsClaim: true,
skipWaiting: true,
navigateFallback: '/index.html',
globPatterns: ['**/*.{js,css,html,svg,png,woff2}'],
navigateFallback: "/index.html",
globPatterns: ["**/*.{js,css,html,svg,png,woff2}"],
},
}),
],
resolve: {
alias: [
{ find: /^@\/(.*)$/, replacement: `${path.resolve(__dirname, 'apps/demo/src')}/$1` },
{ find: /^@native-vue-router\/core$/, replacement: path.resolve(__dirname, 'packages/core/src/index.ts') },
{ find: /^@native-vue-router\/preset-native$/, replacement: path.resolve(__dirname, 'packages/preset-native/src/index.ts') },
{ find: /^@native-vue-router\/capacitor$/, replacement: path.resolve(__dirname, 'packages/capacitor/src/index.ts') },
{ find: /^@native-vue-router\/electron$/, replacement: path.resolve(__dirname, 'packages/electron/src/index.ts') },
{
find: /^@\/(.*)$/,
replacement: `${path.resolve(__dirname, "apps/demo/src")}/$1`,
},
{
find: /^@native-vue-router\/core$/,
replacement: path.resolve(__dirname, "packages/core/src/index.ts"),
},
{
find: /^@native-vue-router\/preset-native$/,
replacement: path.resolve(
__dirname,
"packages/preset-native/src/index.ts",
),
},
{
find: /^@native-vue-router\/capacitor$/,
replacement: path.resolve(__dirname, "packages/capacitor/src/index.ts"),
},
{
find: /^@native-vue-router\/electron$/,
replacement: path.resolve(__dirname, "packages/electron/src/index.ts"),
},
],
},
build: {
outDir: path.resolve(__dirname, 'apps/demo/dist'),
outDir: path.resolve(__dirname, "apps/demo/dist"),
emptyOutDir: true,
},
})
});

10
vitest.config.ts
View File

@@ -1,9 +1,9 @@
import { defineConfig } from 'vitest/config'
import { defineConfig } from "vitest/config";
export default defineConfig({
test: {
environment: 'happy-dom',
include: ['packages/**/*.test.ts'],
coverage: { reporter: ['text', 'html'] },
environment: "happy-dom",
include: ["packages/**/*.test.ts"],
coverage: { reporter: ["text", "html"] },
},
})
});