Types for File-based Middleware / Navigation Guard

[angelhdzdev]

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 🤔

[angelhdzdev]

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? 😅

[angelhdzdev]

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!

[angelhdzdev]

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