Merge pull request #1 from vuelessjs/VL-92_Fix-type-errors-in-nuxt-module_Dmytro-Holdobin

VL-92_Fix-type-errors-in-nuxt-module_Dmytro-Holdobin

Author: Explicit12

global.d.ts

@@ -0,0 +1,4 @@
+declare module '@vueless/*'
+declare module '@vueless'
+declare module 'vueless'
+declare module 'vueless/*'

package-lock.json

@@ -27,15 +27,19 @@
     "release:major": "release-it major --ci --npm.publish --git.tag --github.release",
     "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
     "lint": "eslint .",
+    "lint:ci": "eslint --no-fix --max-warnings=0",
     "test": "vitest run",
     "test:watch": "vitest watch",
-    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
+    "install": "npx nuxi prepare"
   },
   "dependencies": {
     "@nuxt/kit": "^3.13.1",
     "@nuxtjs/tailwindcss": "^6.12.1",
-    "@vueless/plugin-vite": "^0.0.62",
-    "vueless": "^0.0.357"
+    "@vueless/plugin-vite": "^0.0.64",
+    "defu": "^6.1.4",
+    "pathe": "^1.1.2",
+    "vueless": "^0.0.400"
   },
   "devDependencies": {
     "@nuxt/devtools": "^1.4.1",

package.json

@@ -5,6 +5,11 @@
   >
     <UHeader label="Vueless UI is ready!" />
 
+    <UIcon
+      internal
+      name="close"
+    />
+
     <UButton
       color="lime"
       label="Button"

playground/app.vue

@@ -1,8 +1,10 @@
 export default defineNuxtConfig({
   compatibilityDate: '2024-09-13',
-  modules: ['../src/module'],
+  modules: ['@vueless/module-nuxt'],
   devtools: { enabled: true },
   tailwindcss: {
-    content: ['../node_modules/vueless/**/*.{js,ts,vue}'],
+    config: {
+      content: ['../node_modules/vueless/**/*.{js,ts,vue}'],
+    },
   },
 })

playground/nuxt.config.ts

@@ -3,10 +3,7 @@ import { COMPONENTS } from '@vueless/plugin-vite/constants.js'
 import { Vueless } from '@vueless/plugin-vite'
 import installTailwind from './tailwind'
 
-// Module options TypeScript interface definition
-export interface ModuleOptions {}
-
-export default defineNuxtModule<ModuleOptions>({
+export default defineNuxtModule({
   meta: {
     name: '@vueless/module-nuxt',
     configKey: 'vueless',
@@ -37,6 +34,7 @@ export default defineNuxtModule<ModuleOptions>({
     for (const componentName in COMPONENTS) {
       await addComponent({
         name: componentName,
+        mode: componentName === 'UIcon' ? 'client' : 'all', // TODO: Find reason why icons can't load on dev server
         filePath: `vueless/${COMPONENTS[componentName].folder}/${componentName}.vue`,
       })
     }

src/module.ts

@@ -1,11 +1,23 @@
+import path from 'node:path'
 import { addTemplate, installModule, useNuxt } from '@nuxt/kit'
-import { createTailwindSafelist } from '@vueless/plugin-vite/utils/tailwindSafelist'
+import { createTailwindSafelist } from '@vueless/plugin-vite/utils/tailwindSafelist.js'
 import { join } from 'pathe'
 import { defu } from 'defu'
 
-export default async function installTailwind(_nuxt = useNuxt()) {
+import type { Nuxt } from './types'
+
+export default async function installTailwind(_nuxt: Nuxt = useNuxt()) {
   /* Generate tailwind safelist before module installed */
-  await createTailwindSafelist()
+  await createTailwindSafelist({
+    targetFiles: [
+      'components',
+      'layouts',
+      'pages',
+      path.join(process.cwd(), 'app.vue'),
+      path.join(process.cwd(), 'error.vue'),
+      path.join(process.cwd(), 'playground', 'app.vue'),
+    ],
+  })
 
   /* Add vueless tailwind config template */
   const vuelessConfigFile = addTemplate({
@@ -28,10 +40,15 @@ export default async function installTailwind(_nuxt = useNuxt()) {
   const configPaths = [vuelessConfigFile.dst, join(_nuxt.options.rootDir, 'tailwind.config')]
 
   /* Get tailwind user configs */
-  const { configPath: userConfigPath = [] || "", ...twModuleConfig } = _nuxt.options.tailwindcss ?? {}
+  const { configPath: userConfigPath = [], ...twModuleConfig } = _nuxt.options.tailwindcss ?? {}
 
   /* Merge vueless, default, and user tailwind config paths */
-  typeof userConfigPath === 'string' ? configPaths.push(userConfigPath) : configPaths.push(...userConfigPath)
+  if (typeof userConfigPath === 'string') {
+    configPaths.push(userConfigPath)
+  }
+  else {
+    configPaths.push(...userConfigPath)
+  }
 
   /* Install tailwind module */
   await installModule('@nuxtjs/tailwindcss', defu({

src/tailwind.ts

@@ -0,0 +1,10 @@
+import type { ModuleOptions as TailwindcssMoudleOptions } from '@nuxtjs/tailwindcss'
+import type { Nuxt as DefaultNuxt, NuxtOptions as DefaultNuxtOptions } from '@nuxt/schema'
+
+export interface NuxtOptions extends DefaultNuxtOptions {
+  tailwindcss?: TailwindcssMoudleOptions
+}
+
+export interface Nuxt extends DefaultNuxt {
+  options: NuxtOptions
+}