refactor: improve cli and kit types (#369)

[skip-release] 

Co-authored-by: Pooya Parsa <pyapar@gmail.com>

packages/cli/src/commands/build.ts

@@ -1,13 +1,20 @@
-
 import { resolve } from 'upath'
 import { requireModule } from '../utils/cjs'
 import { error } from '../utils/log'
 
-export async function invoke (args) {
+import { defineNuxtCommand } from './index'
+
+export default defineNuxtCommand({
+  meta: {
+    name: 'build',
+    usage: 'nu build [rootDir]',
+    description: 'Build nuxt for production deployment'
+  },
+  async invoke (args) {
     process.env.NODE_ENV = process.env.NODE_ENV || 'production'
     const rootDir = resolve(args._[0] || '.')
 
-  const { loadNuxt, buildNuxt } = requireModule('@nuxt/kit', rootDir)
+    const { loadNuxt, buildNuxt } = requireModule('@nuxt/kit', rootDir) as typeof import('@nuxt/kit')
 
     const nuxt = await loadNuxt({ rootDir })
 
@@ -17,9 +24,5 @@ export async function invoke (args) {
     })
 
     await buildNuxt(nuxt)
-}
-
-export const meta = {
-  usage: 'nu build [rootDir]',
-  description: 'Build nuxt for production deployment'
-}
+  }
+})

packages/cli/src/commands/dev.ts

@@ -1,12 +1,20 @@
 import { resolve } from 'upath'
 import chokidar from 'chokidar'
 import debounce from 'debounce-promise'
+import type { Nuxt } from '@nuxt/kit'
 import { createServer, createLoadingHandler } from '../utils/server'
 import { showBanner } from '../utils/banner'
 import { requireModule } from '../utils/cjs'
 import { error } from '../utils/log'
+import { defineNuxtCommand } from './index'
 
-export async function invoke (args) {
+export default defineNuxtCommand({
+  meta: {
+    name: 'dev',
+    usage: 'nu dev [rootDir] [--clipboard] [--open, -o]',
+    description: 'Run nuxt development server'
+  },
+  async invoke (args) {
     process.env.NODE_ENV = process.env.NODE_ENV || 'development'
     const server = createServer()
     const listener = await server.listen({
@@ -16,10 +24,10 @@ export async function invoke (args) {
 
     const rootDir = resolve(args._[0] || '.')
 
-  const { loadNuxt, buildNuxt } = requireModule('@nuxt/kit', rootDir)
+    const { loadNuxt, buildNuxt } = requireModule('@nuxt/kit', rootDir) as typeof import('@nuxt/kit')
 
-  let currentNuxt
-  const load = async (isRestart) => {
+    let currentNuxt: Nuxt
+    const load = async (isRestart: boolean) => {
       try {
         const message = `${isRestart ? 'Restarting' : 'Starting'} nuxt...`
         server.setApp(createLoadingHandler(message))
@@ -57,9 +65,5 @@ export async function invoke (args) {
     })
 
     await load(false)
-}
-
-export const meta = {
-  usage: 'nu dev [rootDir] [--clipboard] [--open, -o]',
-  description: 'Run nuxt development server'
-}
+  }
+})

packages/cli/src/commands/index.ts

@@ -1,5 +1,25 @@
+import type { Argv } from 'mri'
+
 export const commands = {
   dev: () => import('./dev'),
   build: () => import('./build'),
   usage: () => import('./usage')
 }
+
+export type Command = keyof typeof commands
+
+export interface NuxtCommandMeta {
+  name: string;
+  usage: string;
+  description: string;
+  [key: string]: any;
+}
+
+export interface NuxtCommand {
+  invoke(args: Argv): Promise<void> | void
+  meta: NuxtCommandMeta
+}
+
+export function defineNuxtCommand (command: NuxtCommand): NuxtCommand {
+  return command
+}

packages/cli/src/commands/usage.ts

@@ -1,15 +1,17 @@
 import { cyan } from 'colorette'
-import { commands } from './index'
+import { commands, defineNuxtCommand } from './index'
 
-export function invoke (_args) {
+export default defineNuxtCommand({
+  meta: {
+    name: 'help',
+    usage: 'nu help',
+    description: 'Show help'
+  },
+  invoke (_args) {
     const sections: string[] = []
 
     sections.push(`Usage: ${cyan(`nu ${Object.keys(commands).join('|')} [args]`)}`)
 
     console.log(sections.join('\n\n') + '\n')
-}
-
-export const meta = {
-  usage: 'nu help',
-  description: 'Show help'
-}
+  }
+})

packages/cli/src/index.ts

@@ -1,7 +1,7 @@
 import 'v8-compile-cache'
 import mri from 'mri'
 import { red, cyan } from 'colorette'
-import { commands } from './commands'
+import { commands, Command, NuxtCommand } from './commands'
 import { showHelp } from './utils/help'
 import { showBanner } from './utils/banner'
 import { error } from './utils/log'
@@ -29,7 +29,7 @@ async function _main () {
   }
 
   try {
-    const cmd = await commands[command]()
+    const cmd = await commands[command as Command]().then(c => c.default || c) as NuxtCommand
     if (args.h || args.help) {
       showHelp(cmd.meta)
     } else {
@@ -40,7 +40,7 @@ async function _main () {
   }
 }
 
-function onFatalError (err) {
+function onFatalError (err: unknown) {
   error(err)
   process.exit(1)
 }

packages/cli/src/utils/cjs.ts

@@ -1,6 +1,6 @@
 import { normalize } from 'upath'
 
-export function resolveModule (id, paths?) {
+export function resolveModule (id: string, paths?: string) {
   return normalize(require.resolve(id, {
     paths: [].concat(
       // @ts-ignore
@@ -13,6 +13,6 @@ export function resolveModule (id, paths?) {
   }))
 }
 
-export function requireModule (id, paths?) {
+export function requireModule (id: string, paths?: string) {
   return require(resolveModule(id, paths))
 }

packages/cli/src/utils/server.ts

@@ -1,10 +1,11 @@
 import type { RequestListener } from 'http'
+import type { ListenOptions } from 'listhen'
 import { loading } from '@nuxt/design'
 
 export function createServer () {
   const listener = createDynamicFunction(createLoadingHandler('Loading...'))
 
-  async function listen (opts) {
+  async function listen (opts: Partial<ListenOptions>) {
     const { listen } = await import('listhen')
     return listen(listener.call, opts)
   }
@@ -23,10 +24,10 @@ export function createLoadingHandler (message: string): RequestListener {
   }
 }
 
-function createDynamicFunction<T extends (...args) => any>(initialValue: T) {
-  let fn: T = initialValue
+function createDynamicFunction<T extends (...args: any[]) => any> (initialValue: T) {
+  let fn = initialValue
   return {
     set: (newFn: T) => { fn = newFn },
-    call: ((...args) => fn(...args)) as T
+    call: ((...args: Parameters<T>) => fn(...args)) as T
   }
 }