Types for File-based Middleware / Navigation Guard

[angelhdzmultimedia]

Hello. I'm trying to replicate Nuxt's file-based middleware and the definePageMeta({ middleware: [ 'auth' ] }).

I defined a Vite plugin that parses the files in ~/src/middleware, to generate a middleware-typed-router.d.ts
(which I added to tsconfig.json's include array of course)
with the union of all the middleware names, so that I can have completion in definePage({ meta: { middleware: [ 'auth' ] }})

I of course loop through the routes and read the middleware array (or string) and add a router.beforeEach that calls the handler of the modules.

This all works. What I need a hand is in the types for middleware-typed-router.d.ts.

I tried reimplementing the RouteMeta interface from vue-router/auto.
Tried using Parameters<> and ReturnType<> to extend definePage.

My middleware array ends as string[] instead of 'auth'[] | undefined

TIA. ✌️

[posva]

maybe try extending RouteMeta in vue-router instead 🤔

[angelhdzmultimedia]

Thank you so much for replying.

When I use RouteMeta from vue-router, I lose typings on vue-router/auto, very weird!

And still have no completion:

Motivation

I'm building a Nuxt + Electron desktop app, but nuxt-electron package contextBridge commands aren't working for me (I reported it).
So I created a Quasar + Electron app, but then I lose auto imports and all the good stuff from Nuxt, so I
installed unplugin-vue-router, vite-plugin-vue-layouts, and now tried to code gen the middleware/nav guards from files.

quasar.config.js

function parseMiddleware() {
  const _modules = readdirSync('src/middleware')
  const _middleware = []
  for (const path of _modules) {
    const _middlewareName = path.split('/')
      .at(-1)
      .replace('.ts', '')
      _middleware.push(_middlewareName)
  }

  writeFileSync('middleware-typed-router.d.ts', `
    type Middleware = ${_middleware.map(m => `'${m}'`).join(' | ')}
    
    declare module 'vue-router' {
      export interface RouteMeta {
        middleware?: Middleware[]
      }
    }
  `)
}
 
const middlewarePlugin = createVitePlugin(() => {
  return {
    name: 'middleware',
    watchChanges: true,
    buildStart() {
      parseMiddleware()
    },
    
    buildEnd() {
      parseMiddleware()
    },
    vite: {
      handleHotUpdate() {
        parseMiddleware()
      }
    }
  }
})

~/router/index.ts

function isNavigate(value: any): boolean {
  return value.__isNavigate ? true : false
}

function setupMiddleware(routes: RouteRecordRaw[]) {
  for (const route of routes) {
    if (route.meta?.middleware) {
      const _middleware: string[] = []
      if (typeof route.meta?.middleware === 'string') {
        _middleware.push(route.meta?.middleware)
      } else if (Array.isArray(route.meta?.middleware)) {
        _middleware.push(...route.meta?.middleware)
      }
      route.beforeEnter = async (to, from) => {
        for (const middleware of _middleware) {
          const _module = await import(`../middleware/${middleware}`)
          const _fn = _module.default
          const _result = await _fn({ to, from })
          if (isNavigate(_result)) {
            return _result.path
          }
        }
      }
    }
  }
}

export default route(function () {
  const router = createRouter({
    scrollBehavior: () => ({ left: 0, top: 0 }),
    extendRoutes: (routes) => {
      setupMiddleware(routes)
      return setupLayouts(routes)
    },
    history: createWebHistory(process.env.VUE_ROUTER_BASE),
  })

  return router
})

[angelhdzmultimedia]

Update

Solved the conflict with typed-router.d.ts. Apparently, the unplugin-vue-router code gen checks if the file contains the word typed-router, and because my file also contained it, caused conflict. Renamed mine to typed-middleware.d.ts, and the imports errors gone away.

Now to work on the middleware array completion for definePage 😁

[angelhdzmultimedia]

Celebrated too fast, error came back with the new file name...
https://github.com/posva/unplugin-vue-router/assets/10191085/eadec9f2-5620-4f11-8b43-be63a3150feb

[posva]

Add export {} to the d.ts file maybe? 😅

[angelhdzmultimedia]

Add export {} to the d.ts file maybe? 😅

Genius! 🔥🤯🤝
That solved the imports issue.

In an old revision of the file I had the export {}. 👀

I'm very close to solving this and you motivated me!

[ftcopilot017]

Could someone tell me why it need to add export {} in d.ts file? Is there any documentation about it? Thanks a lot!

[angelhdzmultimedia]

Could someone tell me why it need to add export {} in d.ts file? Is there any documentation about it? Thanks a lot!

Could someone tell me why it need to add export {} in d.ts file? Is there any documentation about it? Thanks a lot!

Is a ESM thing. Using empty import or export statements, makes Node treat the file as a module. Another way is renaming the file to .mjs (or .mts if TypeScript, but it's not neccessary because usually bundlers handle the conversion of .ts files to .mjs), or using type: "module" in package.json to treat all files as modules.

ECMAScript modules are the official standard format to package JavaScript code for reuse. Modules are defined using a variety of import and export statements.

The following example of an ES module exports a function:

https://nodejs.org/api/esm.html#modules-ecmascript-modules