unplugin-vue-components - npm Package Compare versions

Comparing version 0.14.0-beta.1 to 0.14.1

dist/index.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkAYTWO5UAjs = require('./chunk-AYTWO5UA.js');
+var _chunkEVNNW45Tjs = require('./chunk-EVNNW45T.js');
 
@@ -8,3 +8,3 @@
 
-var _chunk6Z5ICHV4js = require('./chunk-6Z5ICHV4.js');
+var _chunk7WAA5D73js = require('./chunk-7WAA5D73.js');
 require('./chunk-6F4PWJZI.js');
@@ -17,2 +17,2 @@ require('./chunk-BNJB64XR.js');
 
-exports.camelCase = _chunk6Z5ICHV4js.camelCase; exports.default = _chunkAYTWO5UAjs.unplugin_default; exports.kebabCase = _chunk6Z5ICHV4js.kebabCase; exports.pascalCase = _chunk6Z5ICHV4js.pascalCase;
+exports.camelCase = _chunk7WAA5D73js.camelCase; exports.default = _chunkEVNNW45Tjs.unplugin_default; exports.kebabCase = _chunk7WAA5D73js.kebabCase; exports.pascalCase = _chunk7WAA5D73js.pascalCase;

dist/nuxt.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkAYTWO5UAjs = require('./chunk-AYTWO5UA.js');
-require('./chunk-6Z5ICHV4.js');
+var _chunkEVNNW45Tjs = require('./chunk-EVNNW45T.js');
+require('./chunk-7WAA5D73.js');
 require('./chunk-6F4PWJZI.js');
@@ -12,7 +12,7 @@ require('./chunk-BNJB64XR.js');
     config.plugins = config.plugins || [];
-    config.plugins.unshift(_chunkAYTWO5UAjs.unplugin_default.webpack(options));
+    config.plugins.unshift(_chunkEVNNW45Tjs.unplugin_default.webpack(options));
   });
   this.nuxt.hook("vite:extend", async (vite) => {
     vite.config.plugins = vite.config.plugins || [];
-    vite.config.plugins.push(_chunkAYTWO5UAjs.unplugin_default.vite(options));
+    vite.config.plugins.push(_chunkEVNNW45Tjs.unplugin_default.vite(options));
   });
@@ -19,0 +19,0 @@ }

dist/resolvers.d.ts

@@ -43,7 +43,13 @@ import { ComponentResolver, UILibraryOptions } from './types';
     /**
-     * import style along with components
+     * import style css or sass with components
      *
-     * @default true
+     * @default 'css'
      */
-    importStyle?: boolean;
+    importStyle?: boolean | 'css' | 'sass';
+    /**
+     * specify element-plus version to load style
+     *
+     * @default installed version
+     */
+    version?: string;
 }
@@ -53,6 +59,8 @@ /**
  *
- * See https://github.com/antfu/unplugin-vue-components/pull/28 for more details
+ * See https://github.com/antfu/vite-plugin-components/pull/28 for more details
+ * See https://github.com/antfu/vite-plugin-components/issues/117 for more details
  *
- * @author @develar
- * @link https://element-plus.org/#/en-US
+ * @author @develar @nabaonan
+ * @link https://element-plus.org/#/en-US for element-plus
+ *
  */
@@ -84,3 +92,16 @@ declare function ElementPlusResolver(options?: ElementPlusResolverOptions): ComponentResolver;
 
+interface IduxResolverOptions {
+    /**
+     * import style along with components
+     */
+    importStyle?: 'css' | 'less';
+}
 /**
+ * Resolver for `@idux/cdk` and `@idux/components`
+ *
+ * @link https://idux.site
+ */
+declare function IduxResolver(options?: IduxResolverOptions): ComponentResolver;
+
+/**
  * Resolver for Naive UI
@@ -188,2 +209,2 @@ *
 
-export { AntDesignVueResolver, AntDesignVueResolverOptions, ElementPlusResolver, ElementPlusResolverOptions, ElementUiResolver, ElementUiResolverOptions, HeadlessUiResolver, LibraryResolver, NaiveUiResolver, PrimeVueResolver, PrimeVueResolverOptions, VantResolver, VantResolverOptions, VarletUIResolver, VarletUIResolverOptions, ViewUiResolver, VueUseComponentsResolver, VuetifyResolver, tryLoadVeturTags };
+export { AntDesignVueResolver, AntDesignVueResolverOptions, ElementPlusResolver, ElementPlusResolverOptions, ElementUiResolver, ElementUiResolverOptions, HeadlessUiResolver, IduxResolver, IduxResolverOptions, LibraryResolver, NaiveUiResolver, PrimeVueResolver, PrimeVueResolverOptions, VantResolver, VantResolverOptions, VarletUIResolver, VarletUIResolverOptions, ViewUiResolver, VueUseComponentsResolver, VuetifyResolver, tryLoadVeturTags };

dist/resolvers.js

@@ -5,7 +5,112 @@ "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk6Z5ICHV4js = require('./chunk-6Z5ICHV4.js');
 
+var _chunk7WAA5D73js = require('./chunk-7WAA5D73.js');
 
+
+
+
 var _chunkBNJB64XRjs = require('./chunk-BNJB64XR.js');
 
+// node_modules/.pnpm/compare-versions@3.6.0/node_modules/compare-versions/index.js
+var require_compare_versions = _chunkBNJB64XRjs.__commonJS.call(void 0, {
+  "node_modules/.pnpm/compare-versions@3.6.0/node_modules/compare-versions/index.js"(exports, module) {
+    (function(root, factory) {
+      if (typeof define === "function" && define.amd) {
+        define([], factory);
+      } else if (typeof exports === "object") {
+        module.exports = factory();
+      } else {
+        root.compareVersions = factory();
+      }
+    })(exports, function() {
+      var semver = /^v?(?:\d+)(\.(?:[x*]|\d+)(\.(?:[x*]|\d+)(\.(?:[x*]|\d+))?(?:-[\da-z\-]+(?:\.[\da-z\-]+)*)?(?:\+[\da-z\-]+(?:\.[\da-z\-]+)*)?)?)?$/i;
+      function indexOrEnd(str, q) {
+        return str.indexOf(q) === -1 ? str.length : str.indexOf(q);
+      }
+      function split(v) {
+        var c = v.replace(/^v/, "").replace(/\+.*$/, "");
+        var patchIndex = indexOrEnd(c, "-");
+        var arr = c.substring(0, patchIndex).split(".");
+        arr.push(c.substring(patchIndex + 1));
+        return arr;
+      }
+      function tryParse(v) {
+        return isNaN(Number(v)) ? v : Number(v);
+      }
+      function validate(version) {
+        if (typeof version !== "string") {
+          throw new TypeError("Invalid argument expected string");
+        }
+        if (!semver.test(version)) {
+          throw new Error("Invalid argument not valid semver ('" + version + "' received)");
+        }
+      }
+      function compareVersions(v1, v2) {
+        [v1, v2].forEach(validate);
+        var s1 = split(v1);
+        var s2 = split(v2);
+        for (var i = 0; i < Math.max(s1.length - 1, s2.length - 1); i++) {
+          var n1 = parseInt(s1[i] || 0, 10);
+          var n2 = parseInt(s2[i] || 0, 10);
+          if (n1 > n2)
+            return 1;
+          if (n2 > n1)
+            return -1;
+        }
+        var sp1 = s1[s1.length - 1];
+        var sp2 = s2[s2.length - 1];
+        if (sp1 && sp2) {
+          var p1 = sp1.split(".").map(tryParse);
+          var p2 = sp2.split(".").map(tryParse);
+          for (i = 0; i < Math.max(p1.length, p2.length); i++) {
+            if (p1[i] === void 0 || typeof p2[i] === "string" && typeof p1[i] === "number")
+              return -1;
+            if (p2[i] === void 0 || typeof p1[i] === "string" && typeof p2[i] === "number")
+              return 1;
+            if (p1[i] > p2[i])
+              return 1;
+            if (p2[i] > p1[i])
+              return -1;
+          }
+        } else if (sp1 || sp2) {
+          return sp1 ? -1 : 1;
+        }
+        return 0;
+      }
+      ;
+      var allowedOperators = [
+        ">",
+        ">=",
+        "=",
+        "<",
+        "<="
+      ];
+      var operatorResMap = {
+        ">": [1],
+        ">=": [0, 1],
+        "=": [0],
+        "<=": [-1, 0],
+        "<": [-1]
+      };
+      function validateOperator(op) {
+        if (typeof op !== "string") {
+          throw new TypeError("Invalid operator type, expected string but got " + typeof op);
+        }
+        if (allowedOperators.indexOf(op) === -1) {
+          throw new TypeError("Invalid operator, expected one of " + allowedOperators.join("|"));
+        }
+      }
+      compareVersions.validate = function(version) {
+        return typeof version === "string" && semver.test(version);
+      };
+      compareVersions.compare = function(v1, v2, operator) {
+        validateOperator(operator);
+        var res = compareVersions(v1, v2);
+        return operatorResMap[operator].indexOf(res) > -1;
+      };
+      return compareVersions;
+    });
+  }
+});
+
 // src/core/resolvers/antdv.ts
@@ -157,3 +262,3 @@ var matchComponents = [
   if (!styleDir)
-    styleDir = _chunk6Z5ICHV4js.kebabCase.call(void 0, compName);
+    styleDir = _chunk7WAA5D73js.kebabCase.call(void 0, compName);
   return styleDir;
@@ -196,11 +301,50 @@ }
 // src/core/resolvers/element-plus.ts
+var import_compare_versions = _chunkBNJB64XRjs.__toModule.call(void 0, require_compare_versions());
+function getSideEffectsLegacy(partialName, options) {
+  const { importStyle = "css" } = options;
+  if (!importStyle)
+    return;
+  if (importStyle === "sass") {
+    return [
+      "element-plus/packages/theme-chalk/src/base.scss",
+      `element-plus/packages/theme-chalk/src/${partialName}.scss`
+    ];
+  } else if (importStyle === true || importStyle === "css") {
+    return [
+      "element-plus/lib/theme-chalk/base.css",
+      `element-plus/lib/theme-chalk/el-${partialName}.css`
+    ];
+  }
+}
+function getSideEffects2(dirName, options) {
+  const { importStyle = "css" } = options;
+  if (importStyle === "sass")
+    return `element-plus/es/components/${dirName}/style`;
+  else if (importStyle === true || importStyle === "css")
+    return `element-plus/es/components/${dirName}/style/css`;
+}
 function ElementPlusResolver(options = {}) {
   return (name) => {
-    const { importStyle = true } = options;
-    if (name.startsWith("El")) {
-      const partialName = name[2].toLowerCase() + name.substring(3).replace(/[A-Z]/g, (l) => `-${l.toLowerCase()}`);
-      return {
-        path: `element-plus/es/el-${partialName}`,
-        sideEffects: importStyle ? `element-plus/packages/theme-chalk/src/${partialName}.scss` : void 0
-      };
+    if (name.match(/^El[A-Z]/)) {
+      const {
+        version = _chunk7WAA5D73js.getPkgVersion.call(void 0, "element-plus", "1.0.2")
+      } = options;
+      const partialName = _chunk7WAA5D73js.kebabCase.call(void 0, name.slice(2));
+      if ((0, import_compare_versions.default)(version, "1.1.0-beta.1")) {
+        return {
+          importName: name,
+          path: "element-plus/es",
+          sideEffects: getSideEffects2(partialName, options)
+        };
+      } else if ((0, import_compare_versions.default)(version, "1.0.2-beta.28")) {
+        return {
+          path: `element-plus/es/el-${partialName}`,
+          sideEffects: getSideEffectsLegacy(partialName, options)
+        };
+      } else {
+        return {
+          path: `element-plus/lib/el-${partialName}`,
+          sideEffects: getSideEffectsLegacy(partialName, options)
+        };
+      }
     }
@@ -211,3 +355,3 @@ };
 // src/core/resolvers/element-ui.ts
-function getSideEffects2(partialName, options) {
+function getSideEffects3(partialName, options) {
   const { importStyle = "css" } = options;
@@ -232,6 +376,6 @@ if (!importStyle)
       const compName = name.slice(2);
-      const partialName = _chunk6Z5ICHV4js.kebabCase.call(void 0, compName);
+      const partialName = _chunk7WAA5D73js.kebabCase.call(void 0, compName);
       return {
         path: `element-ui/lib/${partialName}`,
-        sideEffects: getSideEffects2(partialName, options)
+        sideEffects: getSideEffects3(partialName, options)
       };
@@ -286,2 +430,42 @@ }
 
+// src/core/resolvers/idux.ts
+var cdkNames = [
+  "portal",
+  "resizable",
+  "virtual-list"
+];
+var kebabCaseDirnames = [
+  "virtual-list",
+  "auto-complete",
+  "back-top",
+  "date-picker",
+  "input-number",
+  "time-picker",
+  "tree-select"
+];
+function IduxResolver(options = {}) {
+  return (name) => {
+    if (name.match(/^Ix[A-Z]/)) {
+      const { importStyle } = options;
+      const compName = name.slice(2);
+      const kebabCaseName = _chunk7WAA5D73js.kebabCase.call(void 0, compName);
+      const isCdk = cdkNames.includes(kebabCaseName);
+      const packageName = isCdk ? "cdk" : "components";
+      const dirname = getDirname(kebabCaseName);
+      const path = `@idux/${packageName}/${dirname}`;
+      const sideEffects = isCdk || !importStyle ? void 0 : `${path}/style/${importStyle === "css" ? "css" : "index"}`;
+      return { importName: name, path, sideEffects };
+    }
+  };
+}
+function getDirname(compName) {
+  const dirname = kebabCaseDirnames.find((name) => compName.startsWith(name));
+  if (dirname)
+    return dirname;
+  const [first] = compName.split("-");
+  if (first === "row" || first === "col")
+    return "grid";
+  return first;
+}
+
 // src/core/resolvers/naive-ui.ts
@@ -411,3 +595,3 @@ function NaiveUiResolver() {
         path: "vant/es",
-        sideEffects: importStyle ? `vant/es/${_chunk6Z5ICHV4js.kebabCase.call(void 0, partialName)}/style` : void 0
+        sideEffects: importStyle ? `vant/es/${_chunk7WAA5D73js.kebabCase.call(void 0, partialName)}/style` : void 0
       };
@@ -431,5 +615,5 @@ }
         if (importStyle === "less" || importLess)
-          sideEffects.push(`@varlet/ui/es/${_chunk6Z5ICHV4js.kebabCase.call(void 0, partialName)}/style/less.js`);
+          sideEffects.push(`@varlet/ui/es/${_chunk7WAA5D73js.kebabCase.call(void 0, partialName)}/style/less.js`);
         else
-          sideEffects.push(`@varlet/ui/es/${_chunk6Z5ICHV4js.kebabCase.call(void 0, partialName)}/style`);
+          sideEffects.push(`@varlet/ui/es/${_chunk7WAA5D73js.kebabCase.call(void 0, partialName)}/style`);
       }
@@ -446,3 +630,3 @@ return {
 // src/core/resolvers/view-ui.ts
-function getSideEffects3(componentName) {
+function getSideEffects4(componentName) {
   const sideEffects = [
@@ -470,3 +654,3 @@ "view-design/dist/styles/iview.css",
     if (compName.match(matcher.pattern)) {
-      compPath = `${matcher.compDir}/${_chunk6Z5ICHV4js.kebabCase.call(void 0, compName)}.vue`;
+      compPath = `${matcher.compDir}/${_chunk7WAA5D73js.kebabCase.call(void 0, compName)}.vue`;
       break;
@@ -476,3 +660,3 @@ }
   if (!compPath)
-    compPath = _chunk6Z5ICHV4js.kebabCase.call(void 0, compName);
+    compPath = _chunk7WAA5D73js.kebabCase.call(void 0, compName);
   return compPath;
@@ -486,3 +670,3 @@ }
         path: `view-design/src/components/${getCompDir(compName)}`,
-        sideEffects: getSideEffects3(compName)
+        sideEffects: getSideEffects4(compName)
       };
@@ -531,3 +715,4 @@ }
 
-exports.AntDesignVueResolver = AntDesignVueResolver; exports.ElementPlusResolver = ElementPlusResolver; exports.ElementUiResolver = ElementUiResolver; exports.HeadlessUiResolver = HeadlessUiResolver; exports.LibraryResolver = _chunk6Z5ICHV4js.LibraryResolver; exports.NaiveUiResolver = NaiveUiResolver; exports.PrimeVueResolver = PrimeVueResolver; exports.VantResolver = VantResolver; exports.VarletUIResolver = VarletUIResolver; exports.ViewUiResolver = ViewUiResolver; exports.VueUseComponentsResolver = VueUseComponentsResolver; exports.VuetifyResolver = VuetifyResolver; exports.tryLoadVeturTags = _chunk6Z5ICHV4js.tryLoadVeturTags;
+
+exports.AntDesignVueResolver = AntDesignVueResolver; exports.ElementPlusResolver = ElementPlusResolver; exports.ElementUiResolver = ElementUiResolver; exports.HeadlessUiResolver = HeadlessUiResolver; exports.IduxResolver = IduxResolver; exports.LibraryResolver = _chunk7WAA5D73js.LibraryResolver; exports.NaiveUiResolver = NaiveUiResolver; exports.PrimeVueResolver = PrimeVueResolver; exports.VantResolver = VantResolver; exports.VarletUIResolver = VarletUIResolver; exports.ViewUiResolver = ViewUiResolver; exports.VueUseComponentsResolver = VueUseComponentsResolver; exports.VuetifyResolver = VuetifyResolver; exports.tryLoadVeturTags = _chunk7WAA5D73js.tryLoadVeturTags;
 exports.default = module.exports;

dist/rollup.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkAYTWO5UAjs = require('./chunk-AYTWO5UA.js');
-require('./chunk-6Z5ICHV4.js');
+var _chunkEVNNW45Tjs = require('./chunk-EVNNW45T.js');
+require('./chunk-7WAA5D73.js');
 require('./chunk-6F4PWJZI.js');
@@ -9,3 +9,3 @@ require('./chunk-BNJB64XR.js');
 // src/rollup.ts
-var rollup_default = _chunkAYTWO5UAjs.unplugin_default.rollup;
+var rollup_default = _chunkEVNNW45Tjs.unplugin_default.rollup;
 
@@ -12,0 +12,0 @@

dist/vite.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkAYTWO5UAjs = require('./chunk-AYTWO5UA.js');
-require('./chunk-6Z5ICHV4.js');
+var _chunkEVNNW45Tjs = require('./chunk-EVNNW45T.js');
+require('./chunk-7WAA5D73.js');
 require('./chunk-6F4PWJZI.js');
@@ -9,3 +9,3 @@ require('./chunk-BNJB64XR.js');
 // src/vite.ts
-var vite_default = _chunkAYTWO5UAjs.unplugin_default.vite;
+var vite_default = _chunkEVNNW45Tjs.unplugin_default.vite;
 
@@ -12,0 +12,0 @@

dist/webpack.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkAYTWO5UAjs = require('./chunk-AYTWO5UA.js');
-require('./chunk-6Z5ICHV4.js');
+var _chunkEVNNW45Tjs = require('./chunk-EVNNW45T.js');
+require('./chunk-7WAA5D73.js');
 require('./chunk-6F4PWJZI.js');
@@ -9,3 +9,3 @@ require('./chunk-BNJB64XR.js');
 // src/webpack.ts
-var webpack_default = _chunkAYTWO5UAjs.unplugin_default.webpack;
+var webpack_default = _chunkEVNNW45Tjs.unplugin_default.webpack;
 
@@ -12,0 +12,0 @@

package.json

 {
   "name": "unplugin-vue-components",
-  "version": "0.14.0-beta.1",
+  "version": "0.14.1",
   "description": "Components auto importing for Vue",
@@ -53,4 +53,4 @@ "homepage": "https://github.com/antfu/unplugin-vue-components",
   "scripts": {
-    "build": "rimraf dist && tsup 'src/*.ts' --format cjs,esm --dts && esno scripts/postbuild.ts",
-    "dev": "tsup 'src/*.ts' --format cjs,esm --watch src",
+    "build": "rimraf dist && tsup src/*.ts --format cjs,esm --dts && esno scripts/postbuild.ts",
+    "dev": "tsup src/*.ts --format cjs,esm --watch src",
     "example:build": "npm -C examples/vue3 run build",
@@ -80,3 +80,5 @@ "example:dev": "npm -C examples/vue3 run dev",
     "@typescript-eslint/eslint-plugin": "^4.29.1",
+    "compare-versions": "^3.6.0",
     "eslint": "^7.32.0",
+    "esno": "^0.9.1",
     "jest": "^27.0.6",
@@ -83,0 +85,0 @@ "rollup": "^2.56.2",

README.md

@@ -1,11 +0,17 @@
-<h2 align='center'><samp>unplugin-vue-components</samp></h2>
+# unplugin-vue-components
 
-<p align='center'>On-demand components auto importing for Vue.<br><sub>Works for Vite, Webpack, Vue CLI and more, powered by <a href="https://github.com/unjs/unplugin">unplugin</a></sub></p>
+[![NPM version](https://img.shields.io/npm/v/unplugin-vue-components?color=a1b858&label=)](https://www.npmjs.com/package/unplugin-vue-components)
 
-<p align='center'>
-<a href='https://www.npmjs.com/package/unplugin-vue-components'>
-<img src='https://img.shields.io/npm/v/unplugin-vue-components?color=222&style=flat-square'>
-</a>
-</p>
+On-demand components auto importing for Vue.
 
+###### Features
+
+- 💚 Supports both Vue 2 and Vue 3 out-of-the-box.
+- ⚡️ Supports Vite, Webpack, Vue CLI, Rollup and more, powered by <a href="https://github.com/unjs/unplugin">unplugin</a>.
+- 🏝 Tree-shakable, only registers the components you use.
+- 🪐 Folder names as namespaces.
+- 🦾 Full TypeScript support.
+- 🌈 [Built-in resolvers](#importing-from-ui-libraries) for popular UI libraries.
+- 😃 Works perfectly with [unplugin-icons](https://github.com/antfu/unplugin-icons).
+
 <br>
@@ -21,6 +27,4 @@
 
-## Usage
+## Installation
 
-Install
-
 ```bash
@@ -30,19 +34,75 @@ npm i unplugin-vue-components -D
 
-Add it to `vite.config.js`
+<details>
+<summary>Vite</summary><br>
 
 ```ts
-// vite.config.js
-import Vue from '@vitejs/plugin-vue'
+// vite.config.ts
 import Components from 'unplugin-vue-components/vite'
 
+export default defineConfig({
+  plugins: [
+    Components({ /* options */ }),
+  ],
+})
+```
+
+<br></details>
+
+<details>
+<summary>Rollup</summary><br>
+
+```ts
+// rollup.config.js
+import Components from 'unplugin-vue-components/rollup'
+
 export default {
   plugins: [
-    Vue(),
-    Components()
+    Components({ /* options */ }),
   ],
-};
+}
 ```
 
-That's all.
+<br></details>
 
+
+<details>
+<summary>Webpack</summary><br>
+
+```ts
+// webpack.config.js
+module.exports = {
+  /* ... */
+  plugins: [
+    require('unplugin-vue-components/webpack')({ /* options */ })
+  ]
+}
+```
+
+<br></details>
+
+<details>
+<summary>Nuxt</summary><br>
+
+You don't need this plugin for Nuxt, use [`@nuxt/components`](https://github.com/nuxt/components) instead.
+
+<br></details>
+
+<details>
+<summary>Vue CLI</summary><br>
+
+```ts
+// vue.config.js
+module.exports = {
+  configureWebpack: {
+    plugins: [
+      require('unplugin-vue-components/webpack')({ /* options */ }),
+    ],
+  },
+}
+```
+
+<br></details>
+
+## Usage
+
 Use components in templates as you would usually do, it will import components on demand and there is no `import` and `component registration` required anymore! If you register the parent component asynchronously (or lazy route), the auto-imported components will be code-split along with their parent.
@@ -87,34 +147,2 @@
 
-## Migrate from `vite-plugin-components`
-
-`package.json`
-
-```diff
-{
-  "devDependencies": {
--   "vite-plugin-components": "*",
-+   "unplugin-vue-components": "^0.14.0",
-  }
-}
-```
-
-`vite.config.json`
-
-```diff
-- import Components, { ElementPlusResolver } from 'vite-plugin-components'
-+ import Components from 'unplugin-vue-components/vite'
-+ import ElementPlusResolver from 'unplugin-vie-components/resolvers'
-
-export default {
-  plugins: [
-    /* ... */
-    Components({
-      resolvers: [
-        ElementPlusResolver(),
-      ]
-    }),
-  ],
-}
-```
-
 ## TypeScript
@@ -126,3 +154,3 @@
 Components({
-  dts: true, // enabled by default if `typescript is installed
+  dts: true, // enabled by default if `typescript` is installed
 })
@@ -135,19 +163,2 @@ ```
 
-## Vue 2 Support
-
-It just works.
-
-```ts
-// vite.config.js
-import { createVuePlugin as Vue2 } from 'vite-plugin-vue2'
-import Components from 'unplugin-vue-components/vite'
-
-export default {
-  plugins: [
-    Vue2(),
-    Components(),
-  ],
-}
-```
-
 ## Importing from UI Libraries
@@ -161,3 +172,5 @@
 - [Element Plus](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/element-plus.ts)
+- [Element UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/resolvers/element-ui.ts)
 - [Headless UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/headless-ui.ts)
+- [IDux](https://github.com/antfu/unplugin-vue-components/blob/main/src/resolvers/idux.ts)
 - [Naive UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/naive-ui.ts)
@@ -167,6 +180,5 @@ - [Prime Vue](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/prime-vue.ts)
 - [Varlet UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/varlet-ui.ts)
+- [View UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/resolvers/view-ui.ts)
 - [Vuetify](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/vuetify.ts)
 - [VueUse Components](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/vueuse.ts)
-- [View UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/resolvers/view-ui.ts)
-- [Element UI](https://github.com/antfu/unplugin-vue-components/blob/main/src/resolvers/element-ui.ts)
 
@@ -208,2 +220,47 @@ ```ts
 
+
+## Migrate from `vite-plugin-components`
+
+`package.json`
+
+```diff
+{
+  "devDependencies": {
+-   "vite-plugin-components": "*",
++   "unplugin-vue-components": "^0.14.0",
+  }
+}
+```
+
+`vite.config.json`
+
+```diff
+- import Components, { ElementPlusResolver } from 'vite-plugin-components'
++ import Components from 'unplugin-vue-components/vite'
++ import ElementPlusResolver from 'unplugin-vie-components/resolvers'
+
+export default {
+  plugins: [
+    /* ... */
+    Components({
+      /* ... */
+
+      // `customComponentsResolvers` has renamed to `resolver`
+-     customComponentsResolvers: [
++     resolvers: [
+        ElementPlusResolver(),
+      ],
+
+      // `globalComponentsDeclaration` has renamed to `dts`
+-     globalComponentsDeclaration: true,
++     dts: true,
+
+      // `customLoaderMatcher` is depreacted, use `include` instead
+-     customLoaderMatcher: id => id.endsWith('.md'),
++     include: [/\.vue$/, /\.vue\?vue&type=template/, /\.md$/],
+    }),
+  ],
+}
+```
+
 ## Configuration
@@ -222,6 +279,8 @@
   deep: true,
+  // resolvers for custom components
+  resolvers: [],
 
   // generate `components.d.ts` global declrations, 
   // also accepts a path for custom filename
-  globalComponentsDeclaration: false,
+  dts: false,
 
@@ -233,2 +292,6 @@ // Allow subdirectories as namespace prefix for components.
   globalNamespaces: [],
+
+  // filters for transforming targets
+  include: [/\.vue$/, /\.vue\?vue&type=template/],
+  exclude: [/node_modules/, /\.git/, /\.nuxt/],
 })
@@ -247,2 +310,2 @@ ```
 
-MIT License © 2020 [Anthony Fu](https://github.com/antfu)
+MIT License © 2020-PRESENT [Anthony Fu](https://github.com/antfu)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

723352

increased by2.09%

Lines of code

20108

increased by2.02%

Number of lines in readme file

301

increased by26.47%

Worsened metrics

Dev dependency count

16

increased by14.29%

No dependency changes