Export Component interface

[silverbackdan]

You used to export the Component interface in the dist index.d.ts - this is useful when using typestript to hook into the compoents:extend event so we know what the objects will consist of.

This may be a really basic issue and perhaps there's a way to just use the same types from a node_module's type definition files - is this the case or could you export this interface again?

Sorry for this basic question, hopefully for someone with more knowledge of TS than me, this will be really obvious.

[nozomuikuta]

@silverbackdan

What version of Nuxt Components do you use?
I believe types of this module's hooks (components:dirs and components:extend) are inferred correctly, at least as of v2.2.0.

[silverbackdan]

I was specifying ^2.1.2 and using 2.2.1

in index.d.ts when using the module I can see

interface Component {
    pascalName: string;
    kebabName: string;
    import: string;
    asyncImport: string;
    export: string;
    filePath: string;
    shortPath: string;
    isAsync?: boolean;
    chunkName: string;
    /** @deprecated */
    global: boolean;
    level: number;
    prefetch: boolean;
    preload: boolean;
}

but I want to be able to type my hook function like this:

this.nuxt.hook('components:extend', (components: Component[]) => {
    ... code here
})

So right now I've copied this interface into my local file so I can use it like that. A while back, this was exported straight from this module's dist files.

I hope I'm being clear enough and as I say, perhaps this is a non-issue or I'm doing something wrong, but it would certainly be nice to be able to type the function parameter.

[silverbackdan]

I'm thinking I should just be able to add to my tsconfig something like this right to import the types?

{
  "compilerOptions": {
    ...
    "types": [
      "@types/node",
      "@nuxt/types",
      "@nuxtjs/axios",
      "@nuxtjs/auth-next",
      "@nuxt/components",
      "../src/@types",
      "../src/shim"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

Where you see I've added @nuxt/components in the types?

[nozomuikuta]

Now I see your situation.
What I have referred is type inference of options.hooks.* (NuxtOptionsHooks), which is used in nuxt.config.ts.

As for hooks defined with this.nuxt.hook() method (you are using it in module implementation, aren't you?),
both nuxt and hook are of any type currently.

So, you are right and Nuxt Component still doesn't export types of hook functions.
All we can do is to define the signature again by ourselves and use it, as you have done.

I guess this is due to some configuration of siroc which builds the module.
While the 2 types are exported in index.d.ts in src directory, the export keywords disappear for some reasons.

components/src/types.ts

Lines 39 to 40 in f8667b6

	export type componentsDirHook = (dirs: ComponentsDir[]) => void | Promise<void>
	export type componentsExtendHook = (components: (ComponentsDir | ScanDir)[]) => void | Promise<void>

[silverbackdan]

Hi @nozomuikuta - yes you're correct in every comment here. In a previous version (a while back) these were exported so perhaps it was just Siroc that had an update.

If what I'm doing is the only solution then I'll roll with that. Thanks for your time helping with this.

If there's no better solution in the Siroc config should I close this issue now?

[silverbackdan]

I've found that @pi0 has already raised this issue with Siroc here danielroe/siroc#203 thanks for your help!