feat!: refactor types for better DX (#25)

Author: userquin

README.md

@@ -210,7 +210,7 @@ vuetify: {
   vuetifyOptions: {
     icons: {
       defaultSet: 'mdi'
-      sets: [{ name: 'mdi' }, { name: 'fa' }]
+      sets: ['mdi', 'fa']
     }
   }
 }

src/module.ts

@@ -87,7 +87,7 @@ export default defineNuxtModule<ModuleOptions>({
           dateAdapter = adapter
         }
         else {
-          if (date.find(d => d[0] === adapter) === undefined)
+          if (date.find(d => d === adapter) === undefined)
             logger.warn(`Ignoring Vuetify Date configuration, date adapter "@date-io/${adapter}" not installed!`)
           else
             dateAdapter = adapter
@@ -138,17 +138,16 @@ export default defineNuxtModule<ModuleOptions>({
       references.push({ types: 'vuetify-nuxt-module/configuration' })
     })
 
-    const vuetifyBase = resolveVuetifyBase()
     nuxt.hook('components:extend', async (c) => {
+      const vuetifyBase = resolveVuetifyBase()
       const { components } = JSON.parse(await readFile(resolver.resolve(vuetifyBase, 'dist/json/importMap.json'), 'utf-8'))
       Object.keys(components).forEach((component) => {
         const from = components[component].from
         c.push({
           pascalName: component,
           kebabName: toKebabCase(component),
           export: component,
-          // pointing to the mjs file, links will not work: there is d.mts file for each component
-          filePath: `${resolver.resolve(vuetifyBase, `lib/${from/* .replace(/\.mjs$/, '.d.mts') */}`)}`,
+          filePath: `${resolver.resolve(vuetifyBase, `lib/${from}`)}`,
           shortPath: `components/${from}`,
           chunkName: toKebabCase(component),
           prefetch: false,

src/types.ts

@@ -1,7 +1,5 @@
 import type { VuetifyOptions } from 'vuetify'
 
-export type BooleanOrArrayString = boolean | string[]
-
 export type DateAdapter = 'vuetify' | 'date-fns' | 'moment' | 'luxon' | 'dayjs' | 'js-joda' | 'date-fns-jalali' | 'jalaali' | 'hijri' | 'custom'
 
 /**
@@ -30,20 +28,17 @@ export interface DateOptions {
    *
    * When `@nuxtjs/i18n` Nuxt module is present, this option will be ignored, locales will be extracted from the available locales.
    */
-  locale: Record<string, any>
+  locale?: Record<string, any>
 }
 
 export type IconSetName = 'mdi' | 'fa' | 'fa4' | 'md' | 'mdi-svg' | 'fa-svg' | 'custom'
+export type IconFontName = 'mdi' | 'fa' | 'fa4' | 'md'
 
-export interface IconSet {
-  name: IconSetName
-}
-
-export interface JSSVGIconSet extends IconSet {
+export interface JSSVGIconSet {
   aliases?: Record<string, string>
 }
 
-export interface FontAwesomeSvgIconSet extends IconSet {
+export interface FontAwesomeSvgIconSet {
   /**
    * The libraries to import and register with the corresponding name.
    *
@@ -58,7 +53,8 @@ export interface FontAwesomeSvgIconSet extends IconSet {
   libraries?: [defaultExport: boolean, name: string, library: string][]
 }
 
-export interface FontIconSet extends IconSet {
+export interface FontIconSet {
+  name: IconFontName
   /**
    * Use CDN?
    *
@@ -74,13 +70,18 @@ export interface FontIconSet extends IconSet {
 
 export interface IconsOptions {
   defaultSet: IconSetName
-  sets?: FontIconSet[]
+  sets?: IconFontName | IconFontName[] | FontIconSet[]
   svg?: {
     mdi?: JSSVGIconSet
     fa?: FontAwesomeSvgIconSet
   }
 }
 
+export type LabComponentName = keyof typeof import('vuetify/labs/components')
+export type LabComponents = boolean | LabComponentName | LabComponentName[]
+export type DirectiveName = keyof typeof import('vuetify/directives')
+export type Directives = boolean | DirectiveName | DirectiveName[]
+
 export interface VOptions extends Partial<Omit<VuetifyOptions, 'ssr' | 'directives' | 'locale' | 'date' | 'icons'>> {
   /**
    * Include the lab components?
@@ -93,7 +94,7 @@ export interface VOptions extends Partial<Omit<VuetifyOptions, 'ssr' | 'directiv
    *
    * @default false
    */
-  labComponents?: BooleanOrArrayString
+  labComponents?: LabComponents
   /**
    * Include the directives?
    *
@@ -103,7 +104,7 @@ export interface VOptions extends Partial<Omit<VuetifyOptions, 'ssr' | 'directiv
    *
    * @default false
    */
-  directives?: BooleanOrArrayString
+  directives?: Directives
   /**
    * Date configuration.
    *

src/utils/icons.ts

@@ -1,5 +1,5 @@
 import { isPackageExists } from 'local-pkg'
-import type { IconSetName, VOptions } from '../types'
+import type { FontIconSet, IconFontName, IconSetName, IconsOptions, VOptions } from '../types'
 
 export interface ResolvedIcons {
   enabled: boolean
@@ -8,7 +8,7 @@ export interface ResolvedIcons {
   cdn: string[]
   local: string[]
   aliases: string[]
-  imports: Record<string, string[]>
+  imports: string[]
   svg: {
     mdi?: boolean
     fa?: string[]
@@ -17,38 +17,50 @@ export interface ResolvedIcons {
 
 export const cssFonts: IconSetName[] = ['mdi', 'md', 'fa', 'fa4']
 
-const iconsPackageNames: Record<IconSetName, { name: string; css: string }> = {
+const iconsPackageNames: Record<IconFontName, { name: string; css: string }> = {
   mdi: { name: '@mdi/font', css: '@mdi/font/css/materialdesignicons.css' },
   md: { name: 'material-design-icons-iconfont', css: '@mdi/font/css/materialdesignicons.css' },
   fa: { name: '@fortawesome/fontawesome-free', css: '@fortawesome/fontawesome-free/css/all.css' },
   fa4: { name: '[email protected]', css: 'font-awesome/css/font-awesome.min.css' },
 }
 
-const iconsCDN: Record<IconSetName, string> = {
+const iconsCDN: Record<IconFontName, string> = {
   mdi: 'https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css',
   md: 'https://fonts.googleapis.com/css?family=Material+Icons',
   fa: 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/css/all.min.css',
   fa4: 'https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css',
 }
 
+const disabledResolvedIcons: ResolvedIcons = Object.freeze({
+  enabled: false,
+  imports: [],
+  aliases: [],
+  sets: [],
+  cdn: [],
+  local: [],
+  svg: {},
+})
+
 export function prepareIcons(
   logger: ReturnType<typeof import('@nuxt/kit')['useLogger']>,
   vuetifyOptions: VOptions,
 ): ResolvedIcons {
   // TODO: handle blueprint icons
   if (vuetifyOptions.icons === false)
-    return { enabled: false }
+    return disabledResolvedIcons
 
-  vuetifyOptions.icons = vuetifyOptions.icons ?? {}
+  const icons: IconsOptions = (vuetifyOptions.icons as IconsOptions) || {}
 
-  let { defaultSet = 'mdi', sets } = vuetifyOptions.icons
+  let { defaultSet = 'mdi', sets } = icons
 
   if (!defaultSet)
-    defaultSet = vuetifyOptions.icons.defaultSet = 'mdi'
+    defaultSet = icons.defaultSet = 'mdi'
 
-  if (!sets)
+  if (!sets && defaultSet !== 'mdi-svg' && defaultSet !== 'fa-svg' && defaultSet !== 'custom')
     sets = [{ name: defaultSet || 'mdi' }]
 
+  sets = sets ? convertFontSetsToObjectNotation(sets) : undefined
+
   const resolvedIcons: ResolvedIcons = {
     enabled: true,
     defaultSet,
@@ -62,33 +74,37 @@ export function prepareIcons(
     },
   }
 
-  sets.filter(s => cssFonts.includes(s.name)).map(s => s.name).forEach((name) => {
-    resolvedIcons.imports.push(`import {${name === defaultSet ? 'aliases,' : ''}${name}} from \'vuetify/iconsets/${name}\'`)
-    resolvedIcons.sets.push(name)
-    if (isPackageExists(iconsPackageNames[name].name))
-      resolvedIcons.local!.push(iconsPackageNames[name].css)
-    else
-      resolvedIcons.cdn!.push(iconsCDN[name])
-  })
+  if (sets) {
+    sets.filter(s => cssFonts.includes(s.name)).map(s => s.name).forEach((name) => {
+      resolvedIcons.imports.push(`import {${name === defaultSet ? 'aliases,' : ''}${name}} from \'vuetify/iconsets/${name}\'`)
+      resolvedIcons.sets.push(name)
+      if (isPackageExists(iconsPackageNames[name].name))
+        resolvedIcons.local!.push(iconsPackageNames[name].css)
+      else
+        resolvedIcons.cdn!.push(iconsCDN[name])
+    })
+  }
 
-  let faSvg = vuetifyOptions.icons.svg?.fa
+  let faSvg = icons.svg?.fa
   if (defaultSet === 'fa-svg' || faSvg) {
+    if (!faSvg)
+      faSvg = {}
+
     let faSvgExists = isPackageExists('@fortawesome/fontawesome-svg-core')
     if (!faSvgExists)
       logger.warn('Missing @fortawesome/fontawesome-svg-core dependency, install it!')
 
     faSvgExists = isPackageExists('@fortawesome/vue-fontawesome')
     if (faSvgExists) {
-      if (!faSvg?.libraries?.length) {
-        faSvg = faSvg || {}
+      if (!faSvg.libraries?.length)
         faSvg.libraries = [[false, 'fas', '@fortawesome/free-solid-svg-icons']]
-      }
 
       for (const p in faSvg.libraries) {
         const [_defaultExport, _name, library] = faSvg.libraries[p]
-        faSvgExists = isPackageExists(library)
-        if (!faSvgExists)
+        if (!isPackageExists(library)) {
+          faSvgExists = false
           logger.warn(`Missing library ${library} dependency, install it!`)
+        }
       }
     }
     else {
@@ -101,21 +117,24 @@ export function prepareIcons(
       resolvedIcons.imports.push('import { FontAwesomeIcon } from \'@fortawesome/vue-fontawesome\'')
       resolvedIcons.imports.push('import { useNuxtApp } from \'#app\'')
       resolvedIcons.svg.fa = ['useNuxtApp().vueApp.component(\'font-awesome-icon\', FontAwesomeIcon)']
-      faSvg.libraries.forEach(([defaultExport, name, library]) => {
+      faSvg.libraries!.forEach(([defaultExport, name, library]) => {
         resolvedIcons.imports.push(`import ${defaultExport ? name : `{${name}}`} from \'${library}\'`)
-        resolvedIcons.svg.fa.push(`library.add(${name})`)
+        resolvedIcons.svg.fa!.push(`library.add(${name})`)
       })
       resolvedIcons.sets.push('fa')
       if (defaultSet === 'fa-svg')
         resolvedIcons.defaultSet = 'fa'
     }
   }
 
-  const mdiSvg = vuetifyOptions.icons.svg?.mdi
+  let mdiSvg = icons.svg?.mdi
   if (defaultSet === 'mdi-svg' || mdiSvg) {
+    if (!mdiSvg)
+      mdiSvg = {}
+
     const mdiSvgExists = isPackageExists('@mdi/js')
     if (mdiSvgExists) {
-      resolvedIcons.svg!.mdi = true
+      resolvedIcons.svg.mdi = true
       resolvedIcons.imports.push(`import {${defaultSet === 'mdi-svg' ? 'aliases,' : ''}mdi} from \'vuetify/iconsets/mdi-svg\'`)
       if (mdiSvg && mdiSvg.aliases) {
         resolvedIcons.imports.push(`import {${Object.values(mdiSvg.aliases).join(',')}} from \'@mdi/js\'`)
@@ -135,8 +154,25 @@ export function prepareIcons(
 
   if (!resolvedIcons.local?.length && !resolvedIcons.cdn?.length && !resolvedIcons.svg?.mdi && !resolvedIcons.svg?.fa?.length) {
     logger.warn('No icons found, icons disabled!')
-    return { enabled: false }
+    return disabledResolvedIcons
   }
 
   return resolvedIcons
 }
+
+function convertFontSetsToObjectNotation(sets: IconFontName | IconFontName[] | FontIconSet[]) {
+  const result: FontIconSet[] = []
+  if (typeof sets === 'string') {
+    result.push({ name: sets })
+  }
+  else {
+    for (const set of sets) {
+      if (typeof set === 'string')
+        result.push({ name: set })
+      else
+        result.push(set)
+    }
+  }
+
+  return result
+}

src/vite/vuetify-configuration-plugin.ts

@@ -1,5 +1,5 @@
 import type { Plugin } from 'vite'
-import type { BooleanOrArrayString, VOptions } from '../types'
+import type { Directives, LabComponents, VOptions } from '../types'
 import { RESOLVED_VIRTUAL_VUETIFY_CONFIGURATION, VIRTUAL_VUETIFY_CONFIGURATION } from './constants'
 
 interface ImportsResult {
@@ -9,8 +9,8 @@ interface ImportsResult {
 
 export function vuetifyConfigurationPlugin(
   isDev: boolean,
-  directives: BooleanOrArrayString,
-  labComponents: BooleanOrArrayString,
+  directives: Directives,
+  labComponents: LabComponents,
   vuetifyAppOptions: VOptions,
 ) {
   // TODO: handle blueprint
@@ -58,9 +58,10 @@ export function vuetifyConfiguration() {
       }
     }
     else {
+      const useDirectives = Array.isArray(directives) ? directives : [directives]
       return <ImportsResult>{
-        imports: `${directives.map(d => `import { ${d} } from 'vuetify/directives/${d}'`).join('\n')}`,
-        expression: `options.directives = {${directives.join(',')}}`,
+        imports: `${useDirectives.map(d => `import { ${d} } from 'vuetify/directives/${d}'`).join('\n')}`,
+        expression: `options.directives = {${useDirectives.join(',')}}`,
       }
     }
   }
@@ -77,7 +78,8 @@ export function vuetifyConfiguration() {
       }
     }
     else {
-      const components = [...new Set<string>(dateOptions ? ['VDatePicker', ...labComponents] : labComponents)]
+      const useComponents = Array.isArray(labComponents) ? labComponents : [labComponents]
+      const components = [...new Set(dateOptions ? ['VDatePicker', ...useComponents] : useComponents)]
       return <ImportsResult>{
         imports: `${components.map(d => `import { ${d} } from 'vuetify/labs/${d}'`).join('\n')}`,
         expression: `options.components = {${components.join(',')}}`,