diff --git a/package.json b/package.json index 65969bd6..bd2eb01a 100644 --- a/package.json +++ b/package.json @@ -84,6 +84,7 @@ "lint-staged": "^13.0.3", "nuxt": "^3.0.0-rc.8", "pinst": "^3.0.0", + "playwright": "^1.25.2", "prettier": "^2.7.1", "release-it": "^15.4.1", "typescript": "^4.8.2", diff --git a/playground/middleware/auth.global.ts b/playground/middleware/auth.global.ts new file mode 100644 index 00000000..90b232d4 --- /dev/null +++ b/playground/middleware/auth.global.ts @@ -0,0 +1,3 @@ +export default defineNuxtRouteMiddleware(to => { + console.log('ran middleware') +}) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bad399d9..7507d00a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -34,6 +34,7 @@ importers: pathe: ^0.3.7 pinst: ^3.0.0 pkg-types: ^0.3.5 + playwright: ^1.25.2 prettier: ^2.7.1 release-it: ^15.4.1 typescript: ^4.8.2 @@ -72,6 +73,7 @@ importers: lint-staged: 13.0.3 nuxt: 3.0.0-rc.8 pinst: 3.0.0 + playwright: 1.25.2 prettier: 2.7.1 release-it: 15.4.1 typescript: 4.8.2 @@ -8567,6 +8569,21 @@ packages: engines: {node: '>=10'} dev: true + /playwright-core/1.25.2: + resolution: {integrity: sha512-0yTbUE9lIddkEpLHL3u8PoCL+pWiZtj5A/j3U7YoNjcmKKDGBnCrgHJMzwd2J5vy6l28q4ki3JIuz7McLHhl1A==} + engines: {node: '>=14'} + hasBin: true + dev: true + + /playwright/1.25.2: + resolution: {integrity: sha512-RwMB5SFRV/8wSfK+tK8ycpqdzORvoqUNz9DUeRfSgZFrZej5uuBl9wFjWcc+OkXFEtaPmx1acAVGG7hA4IJ1kg==} + engines: {node: '>=14'} + hasBin: true + requiresBuild: true + dependencies: + playwright-core: 1.25.2 + dev: true + /plist/3.0.6: resolution: {integrity: sha512-WiIVYyrp8TD4w8yCvyeIr+lkmrGRd5u0VbRnU+tP/aRLxP/YadJUYOMZJ/6hIa3oUyVCsycXvtNRgd5XBJIbiA==} engines: {node: '>=6'} diff --git a/src/parts/router.ts b/src/parts/router.ts index e5cc577d..3c514f73 100644 --- a/src/parts/router.ts +++ b/src/parts/router.ts @@ -1,5 +1,5 @@ import { existsSync } from 'node:fs' -import { useNuxt, useLogger, addPlugin } from '@nuxt/kit' +import { useNuxt, useLogger } from '@nuxt/kit' import { join, resolve } from 'pathe' import { runtimeDir } from '../utils' @@ -21,7 +21,6 @@ export const setupRouter = () => { return } - addPlugin(resolve(runtimeDir, 'router')) nuxt.options.vite.optimizeDeps = nuxt.options.vite.optimizeDeps || {} nuxt.options.vite.optimizeDeps.include = nuxt.options.vite.optimizeDeps.include || [] nuxt.options.vite.optimizeDeps.include.push('@ionic/vue-router') @@ -31,32 +30,13 @@ export const setupRouter = () => { app.plugins = app.plugins.filter( p => !p.src.match(/nuxt3?\/dist\/(app\/plugins|pages\/runtime)\/router/) ) + app.plugins.unshift({ + src: resolve(runtimeDir, 'router'), + mode: 'all', + }) }) }) - // Remove Nuxt useRoute & useRouter composables - nuxt.hook('autoImports:sources', sources => { - for (const source of sources) { - if (source.from === '#app') { - source.imports = source.imports.filter( - i => typeof i !== 'string' || !['useRoute', 'useRouter'].includes(i) - ) - } - } - sources.push({ - from: 'vue-router', - imports: ['useRouter', 'useRoute'], - }) - }) - - // Remove vue-router types - nuxt.hook('prepare:types', ({ references }) => { - const index = references.findIndex(i => 'types' in i && i.types === 'vue-router') - if (index !== -1) { - references.splice(index, 1) - } - }) - // Add default ionic root layout nuxt.hook('app:resolve', app => { if ( diff --git a/src/runtime/router.ts b/src/runtime/router.ts index 7a4da026..cb336be2 100644 --- a/src/runtime/router.ts +++ b/src/runtime/router.ts @@ -1,21 +1,195 @@ import { createRouter, createWebHistory, createMemoryHistory } from '@ionic/vue-router' -import { defineNuxtPlugin, useRuntimeConfig } from '#imports' +import { computed, ComputedRef, reactive, shallowRef } from 'vue' +import { createWebHashHistory, NavigationGuard, RouteLocation } from 'vue-router' +import { createError } from 'h3' +import { withoutBase, isEqual } from 'ufo' +import { + callWithNuxt, + defineNuxtPlugin, + useRuntimeConfig, + showError, + clearError, + navigateTo, + useError, + useState, +} from '#app' +// @ts-expect-error virtual module +import { globalMiddleware, namedMiddleware } from '#build/middleware' // @ts-expect-error virtual module import routerOptions from '#build/router.options' // @ts-expect-error virtual module generated by Nuxt -import routes from '#build/routes' +import _routes from '#build/routes' + +export default defineNuxtPlugin(async nuxtApp => { + let routerBase = useRuntimeConfig().app.baseURL + if (routerOptions.hashMode && !routerBase.includes('#')) { + // allow the user to provide a `#` in the middle: `/base/#/app` + routerBase += '#' + } + + const history = + routerOptions.history?.(routerBase) ?? + (process.client + ? routerOptions.hashMode + ? createWebHashHistory(routerBase) + : createWebHistory(routerBase) + : createMemoryHistory(routerBase)) -export default defineNuxtPlugin(nuxtApp => { - const config = useRuntimeConfig() - const baseURL = config.app.baseURL + const routes = routerOptions.routes?.(_routes) ?? _routes + const initialURL = process.server + ? nuxtApp.ssrContext!.url + : createCurrentLocation(routerBase, window.location) const router = createRouter({ ...routerOptions, - history: process.server ? createMemoryHistory(baseURL) : createWebHistory(baseURL), + history, routes, }) - nuxtApp.vueApp.use(router) + const previousRoute = shallowRef(router.currentRoute.value) + router.afterEach((_to, from) => { + previousRoute.value = from + }) + + Object.defineProperty(nuxtApp.vueApp.config.globalProperties, 'previousRoute', { + get: () => previousRoute.value, + }) + + // Allows suspending the route object until page navigation completes + const _route = shallowRef(router.resolve(initialURL) as RouteLocation) + const syncCurrentRoute = () => { + _route.value = router.currentRoute.value + } + nuxtApp.hook('page:finish', syncCurrentRoute) + router.afterEach((to, from) => { + // We won't trigger suspense if the component is reused between routes + // so we need to update the route manually + if (to.matched[0]?.components?.default === from.matched[0]?.components?.default) { + syncCurrentRoute() + } + }) + + // https://github.com/vuejs/router/blob/main/packages/router/src/router.ts#L1225-L1233 + const route = {} as { [K in keyof RouteLocation]: ComputedRef } + for (const key in _route.value) { + route[key as 'path'] = computed(() => _route.value[key as 'path']) + } + + nuxtApp._route = reactive(route) + + nuxtApp._middleware = nuxtApp._middleware || { + global: [], + named: {}, + } + + const error = useError() + + const initialLayout = useState('_layout') + router.beforeEach(async (to, from) => { + to.meta = reactive(to.meta) + if (nuxtApp.isHydrating) { + to.meta.layout = initialLayout.value ?? to.meta.layout + } + nuxtApp._processingMiddleware = true + + type MiddlewareDef = string | NavigationGuard + const middlewareEntries = new Set([ + ...globalMiddleware, + ...nuxtApp._middleware.global, + ]) + for (const component of to.matched) { + const componentMiddleware = component.meta.middleware as MiddlewareDef | MiddlewareDef[] + if (!componentMiddleware) { + continue + } + if (Array.isArray(componentMiddleware)) { + for (const entry of componentMiddleware) { + middlewareEntries.add(entry) + } + } else { + middlewareEntries.add(componentMiddleware) + } + } + + for (const entry of middlewareEntries) { + const middleware = + typeof entry === 'string' + ? nuxtApp._middleware.named[entry] || + (await namedMiddleware[entry]?.().then((r: any) => r.default || r)) + : entry + + if (!middleware) { + if (process.dev) { + throw new Error( + `Unknown route middleware: '${entry}'. Valid middleware: ${Object.keys(namedMiddleware) + .map(mw => `'${mw}'`) + .join(', ')}.` + ) + } + throw new Error(`Unknown route middleware: '${entry}'.`) + } + + const result = await callWithNuxt(nuxtApp, middleware, [to, from]) + if (process.server || (!nuxtApp.payload.serverRendered && nuxtApp.isHydrating)) { + if (result === false || result instanceof Error) { + const error = + result || + createError({ + statusMessage: `Route navigation aborted: ${initialURL}`, + }) + return callWithNuxt(nuxtApp, showError, [error]) + } + } + if (result || result === false) { + return result + } + } + }) + + router.afterEach(async to => { + delete nuxtApp._processingMiddleware + + if (process.client && !nuxtApp.isHydrating && error.value) { + // Clear any existing errors + await callWithNuxt(nuxtApp, clearError) + } + if (to.matched.length === 0) { + callWithNuxt(nuxtApp, showError, [ + createError({ + statusCode: 404, + fatal: false, + statusMessage: `Page not found: ${to.fullPath}`, + }), + ]) + } else if (process.server && to.matched[0].name === '404' && nuxtApp.ssrContext) { + nuxtApp.ssrContext.event.res.statusCode = 404 + } else if (process.server) { + const currentURL = to.fullPath || '/' + if (!isEqual(currentURL, initialURL)) { + await callWithNuxt(nuxtApp, navigateTo, [currentURL]) + } + } + }) + + return { provide: { router } } }) + +// https://github.com/vuejs/router/blob/4a0cc8b9c1e642cdf47cc007fa5bbebde70afc66/packages/router/src/history/html5.ts#L37 +function createCurrentLocation (base: string, location: Location): string { + const { pathname, search, hash } = location + // allows hash bases like #, /#, #/, #!, #!/, /#!/, or even /folder#end + const hashPos = base.indexOf('#') + if (hashPos > -1) { + const slicePos = hash.includes(base.slice(hashPos)) ? base.slice(hashPos).length : 1 + let pathFromHash = hash.slice(slicePos) + // prepend the starting slash to hash so the url starts with /# + if (pathFromHash[0] !== '/') { + pathFromHash = '/' + pathFromHash + } + return withoutBase(pathFromHash, '') + } + const path = withoutBase(pathname, base) + return path + search + hash +} diff --git a/test/e2e/ssr.spec.ts b/test/e2e/ssr.spec.ts index 27aaebde..4b7dfb2e 100644 --- a/test/e2e/ssr.spec.ts +++ b/test/e2e/ssr.spec.ts @@ -1,11 +1,12 @@ /* @vitest-environment node */ import { fileURLToPath } from 'node:url' -import { setup, $fetch } from '@nuxt/test-utils' +import { setup, $fetch, createPage, url } from '@nuxt/test-utils' import { describe, expect, it } from 'vitest' describe('nuxt ionic', async () => { await setup({ server: true, + browser: true, rootDir: fileURLToPath(new URL('../../playground', import.meta.url)), }) @@ -22,4 +23,15 @@ describe('nuxt ionic', async () => { '' ) }) + + it('runs middleware on client-side', async () => { + const logs: string[] = [] + const page = await createPage() + page.on('console', msg => { + logs.push(msg.text()) + }) + await page.goto(url('/tabs/tab1')) + await page.waitForLoadState('networkidle') + expect(logs).toContain('ran middleware') + }) })