Merge pull request #98 from chakra-ui/develop

release: update security dependencies

Author: codebender828

.changeset/honest-bears-tell.md

@@ -0,0 +1,5 @@
+---
+'@chakra-ui/vue-docs': minor
+---
+
+Update dependecy packages unplugin-icons and unplugin-vue-components

package.json

@@ -149,7 +149,7 @@
     "ts-node": "^9.0.0",
     "typescript": "^4.1.3",
     "vite": "^2.4.0",
-    "vite-plugin-components": "^0.8.3",
+    "unplugin-vue-components": "^0.14.0",
     "vite-plugin-mdx-vue": "^1.1.3",
     "vite-plugin-pages": "^0.9.2",
     "vite-plugin-vue-layouts": "^0.3.1",

vite.config.ts

@@ -1,6 +1,6 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import ComponentsPlugin from 'vite-plugin-components'
+import Components from 'unplugin-vue-components/vite'
 import Pages from 'vite-plugin-pages'
 import { componentResolver } from '@chakra-ui/vue-auto-import'
 import path from 'path'
@@ -43,8 +43,8 @@ export default defineConfig({
         }
       },
     }),
-    ComponentsPlugin({
-      customComponentResolvers: [componentResolver],
+    Components({
+      resolvers: [componentResolver],
     }),
   ],
 })

website/package.json

@@ -40,8 +40,8 @@
     "remark-slug": "^6.0.0",
     "typescript": "^4.1.3",
     "vite": "^2.4.0",
-    "vite-plugin-components": "^0.8.3",
-    "vite-plugin-icons": "^0.3.3",
+    "unplugin-vue-components": "^0.14.0",
+    "unplugin-icons": "^0.12.0",
     "vite-plugin-md": "^0.6.0",
     "vite-plugin-mdx-vue": "^1.1.3",
     "vite-plugin-pages": "^0.9.2",

website/src/components/home/PilersHero.vue

@@ -75,9 +75,9 @@
 import { defineComponent } from 'vue'
 import { CFlex, CBox } from '@chakra-ui/vue-next'
 
-import IconAccessibilityAlt from '/@vite-icons/carbon/accessibility-alt'
-import ColorPalette from '/@vite-icons/carbon/color-palette'
-import Cube from '/@vite-icons/carbon/cube'
+import IconAccessibilityAlt from '~icons/carbon/accessibility-alt'
+import ColorPalette from '~icons/carbon/color-palette'
+import Cube from '~icons/carbon/cube'
 
 export default defineComponent({
   name: 'PilersHero',

website/tsconfig.json

@@ -20,7 +20,8 @@
     "forceConsistentCasingInFileNames": true,
     "types": [
       "vite/client",
-      "vite-plugin-pages/client"
+      "vite-plugin-pages/client",
+      "unplugin-icons/types/vue",
     ],
   },
   "exclude": ["dist", "node_modules"]

website/vite.config.ts

@@ -3,8 +3,8 @@ import path from 'path'
 import Vue from '@vitejs/plugin-vue'
 import { extractCritical } from '@emotion/server'
 import Pages from 'vite-plugin-pages'
-import Icons from 'vite-plugin-icons'
-import ViteComponents from 'vite-plugin-components'
+import Icons from 'unplugin-icons/vite'
+import Components from 'unplugin-vue-components/vite'
 import VueMdx from 'vite-plugin-mdx-vue'
 import { componentResolver } from '@chakra-ui/vue-auto-import'
 import { MdxComponents } from './src/docs-theme/components/MdxComponents'
@@ -95,15 +95,15 @@ const config: UserConfig = {
     Layouts({
       layoutsDir: 'src/layouts',
     }),
-    ViteComponents({
+    Components({
       // directories
       dirs: ['src/components', 'src/docs-theme'],
       // allow auto load markdown components under `dirs` (above)
       extensions: ['vue', 'mdx', 'tsx'],
       // allow auto import and register components used in markdown
-      customLoaderMatcher: (path: string) => path.endsWith('.mdx'),
+      include: [/\.vue$/, /\.vue\?vue/, /\.mdx$/],
       // import chakra-ui components
-      customComponentResolvers: [componentResolver],
+      resolvers: [componentResolver],
     }),
     Icons(),
   ],