deps: updated vite plugins to unplugin

Author: alvarosabu

package.json

@@ -58,11 +58,11 @@
     "deep-object-diff": "^1.1.7"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.1",
     "@asigloo/prettier-config": "^0.2.0",
     "@cypress/vite-dev-server": "^2.2.2",
     "@iconify/json": "^2.0.34",
     "@microsoft/api-extractor": "^7.19.4",
+    "@tailwindcss/typography": "^0.5.1",
     "@types/jest": "^27.4.0",
     "@typescript-eslint/eslint-plugin": "^5.10.2",
     "@typescript-eslint/parser": "^5.10.2",
@@ -97,9 +97,9 @@
     "ts-jest": "^27.1.3",
     "ts-node": "^10.4.0",
     "typescript": "~4.5.5",
+    "unplugin-icons": "^0.13.0",
+    "unplugin-vue-components": "^0.17.17",
     "vite": "^2.7.13",
-    "vite-plugin-components": "^0.13.3",
-    "vite-plugin-icons": "^0.6.5",
     "vite-plugin-pwa": "^0.11.13",
     "vitepress": "^0.21.6",
     "vue": "^3.2.30",

src/components.d.ts

@@ -0,0 +1,22 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/vue-next/pull/3399
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    CheckboxInput: typeof import('./components/checkbox-input/CheckboxInput.vue')['default']
+    CodiconGithub: typeof import('~icons/codicon/github')['default']
+    Console: typeof import('./../demos/vue-3/src/components/Console.vue')['default']
+    DynamicForm: typeof import('./components/dynamic-form/DynamicForm.vue')['default']
+    DynamicInput: typeof import('./components/dynamic-input/DynamicInput.vue')['default']
+    IonDocumentTextOutline: typeof import('~icons/ion/document-text-outline')['default']
+    NumberInput: typeof import('./components/number-input/NumberInput.vue')['default']
+    RadioInput: typeof import('./components/radio-input/RadioInput.vue')['default']
+    SelectInput: typeof import('./components/select-input/SelectInput.vue')['default']
+    TextAreaInput: typeof import('./components/text-area-input/TextAreaInput.vue')['default']
+    TextInput: typeof import('./components/text-input/TextInput.vue')['default']
+    Toolbar: typeof import('./../demos/vue-3/src/components/Toolbar.vue')['default']
+  }
+}
+
+export { }

vite.config.ts

@@ -1,10 +1,10 @@
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import ViteComponents from 'vite-plugin-components';
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import Components from 'unplugin-vue-components/vite'
+import Icons from 'unplugin-icons/vite'
+import IconsResolver from 'unplugin-icons/resolver'
 
-import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons';
-
-const { resolve } = require('path');
+const { resolve } = require('path')
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -15,12 +15,28 @@ export default defineConfig({
   },
   plugins: [
     vue(),
-    ViteComponents({
-      dirs: ['src/components', 'demos/vue-3/src/components'],
-      customComponentResolvers: ViteIconsResolver({
-        componentPrefix: '', // <--
-      }),
+    Components({
+      // allow auto load markdown components under `./src/components/`
+      extensions: ['vue', 'md'],
+
+      // allow auto import and register components used in markdown
+      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
+      dirs: ['./src/components', 'demos/vue-3/src/components'],
+
+      // custom resolvers
+      resolvers: [
+        // auto import icons
+        // https://github.com/antfu/unplugin-icons
+        IconsResolver({
+          prefix: false,
+          // enabledCollections: ['carbon']
+        }),
+      ],
+
+      dts: 'src/components.d.ts',
+    }),
+    Icons({
+      autoInstall: true,
     }),
-    ViteIcons({}),
   ],
-});
+})