vite-plugin-components - npm Package Compare versions

Comparing version 0.7.5 to 0.8.0

dist/index.d.ts

 import { Plugin } from 'vite';
 
-declare type ComponentResolveResult = string | {
+interface ImportInfo {
+    name?: string;
+    importName?: string;
     path: string;
-    importName?: string;
-};
+}
+interface ComponentInfo extends ImportInfo {
+    sideEffects?: (ImportInfo | string)[] | ImportInfo | string;
+}
+declare type ComponentResolveResult = string | ComponentInfo;
 declare type ComponentResolver = (name: string) => ComponentResolveResult | null | undefined | void;
@@ -80,8 +85,2 @@ interface UILibraryOptions {
 };
-interface ComponentInfo {
-    name: string;
-    path: string;
-    absolute?: string;
-    importName?: string;
-}
 declare type ComponentsImportMap = Record<string, string[] | undefined>;
@@ -92,2 +91,37 @@
 
+/**
+ * Resolver for Ant Design Vue
+ *
+ * See https://github.com/antfu/vite-plugin-components/issues/26#issuecomment-789767941 for more details
+ *
+ * @author @yangss3
+ * @link https://antdv.com/
+ */
+declare const AntDesignVueResolver: () => ComponentResolver;
+
+interface ElementPlusResolverOptions {
+    /**
+     * import style along with components
+     *
+     * @default true
+     */
+    importStyle?: boolean;
+}
+/**
+ * Resolver for Element Plus
+ *
+ * See https://github.com/antfu/vite-plugin-components/pull/28 for more details
+ *
+ * @author @develar
+ * @link https://element-plus.org/#/en-US
+ */
+declare const ElementPlusResolver: (options?: ElementPlusResolverOptions) => ComponentResolver;
+
+/**
+ * Resolver for Vant
+ *
+ * @link https://github.com/youzan/vant
+ */
+declare const VantResolver: () => ComponentResolver;
+
 declare function pascalCase(str: string): string;
@@ -100,2 +134,2 @@ declare function camelCase(str: string): string;
 export default VitePluginComponents;
-export { ComponentInfo, ComponentResolveResult, ComponentResolver, ComponentsImportMap, LibraryResolver, Matcher, Options, ResolvedOptions, Transformer, UILibraryOptions, camelCase, kebabCase, pascalCase, tryLoadVeturTags };
+export { AntDesignVueResolver, ComponentInfo, ComponentResolveResult, ComponentResolver, ComponentsImportMap, ElementPlusResolver, ElementPlusResolverOptions, ImportInfo, LibraryResolver, Matcher, Options, ResolvedOptions, Transformer, UILibraryOptions, VantResolver, camelCase, kebabCase, pascalCase, tryLoadVeturTags };

dist/index.js

@@ -121,3 +121,13 @@ "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }// src/context.ts
 }
-function stringifyComponentImport({name, path, importName}, ctx) {
+function stringifyImport(info) {
+  if (typeof info === "string")
+    return `import '${info}'`;
+  if (!info.name)
+    return `import '${info.path}'`;
+  else if (info.importName)
+    return `import { ${info.importName} as ${info.name} } from '${info.path}'`;
+  else
+    return `import ${info.name} from '${info.path}'`;
+}
+function stringifyComponentImport({name, path, importName, sideEffects}, ctx) {
   if (ctx.options.importPathTransform) {
@@ -128,6 +138,8 @@ const result = ctx.options.importPathTransform(path);
   }
-  if (importName)
-    return `import { ${importName} as ${name} } from '${path}'`;
-  else
-    return `import ${name} from '${path}'`;
+  const imports = [
+    stringifyImport({name, path, importName})
+  ];
+  if (sideEffects)
+    toArray(sideEffects).forEach((i) => imports.push(stringifyImport(i)));
+  return imports.join("\n");
 }
@@ -300,3 +312,2 @@ function resolveOptions(options, viteConfig) {
         name,
-        absolute: path,
         path: `/${this.relative(path)}`
@@ -321,4 +332,3 @@ };
             name,
-            path: result.path,
-            importName: result.importName
+            ...result
           };
@@ -427,2 +437,26 @@ }
 
+// src/resolvers/antdv.ts
+var AntDesignVueResolver = () => (name) => {
+  if (name.match(/^A[A-Z]/))
+    return {importName: name.slice(1), path: "ant-design-vue/es"};
+};
+
+// src/resolvers/element-plus.ts
+var ElementPlusResolver = (options = {}) => (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
+    };
+  }
+};
+
+// src/resolvers/vant.ts
+var VantResolver = () => (name) => {
+  if (name.startsWith("Van"))
+    return {importName: name.slice(3), path: "vant"};
+};
+
 // src/index.ts
@@ -462,2 +496,5 @@ function VitePluginComponents(options = {}) {
 
-exports.LibraryResolver = LibraryResolver; exports.camelCase = camelCase; exports.default = src_default; exports.kebabCase = kebabCase; exports.pascalCase = pascalCase; exports.tryLoadVeturTags = tryLoadVeturTags;
+
+
+
+exports.AntDesignVueResolver = AntDesignVueResolver; exports.ElementPlusResolver = ElementPlusResolver; exports.LibraryResolver = LibraryResolver; exports.VantResolver = VantResolver; exports.camelCase = camelCase; exports.default = src_default; exports.kebabCase = kebabCase; exports.pascalCase = pascalCase; exports.tryLoadVeturTags = tryLoadVeturTags;

package.json

 {
   "name": "vite-plugin-components",
-  "version": "0.7.5",
+  "version": "0.8.0",
   "description": "Components auto importing for Vite",
@@ -5,0 +5,0 @@ "homepage": "https://github.com/antfu/vite-plugin-components",

README.md

@@ -104,2 +104,54 @@ <h2 align='center'><samp>vite-plugin-components</samp></h2>
 
+## Importing from UI Libraries
+
+We have several built-in resolver for popular UI libraries like [Ant Design Vue](https://antdv.com/) and [Element Plus](https://element-plus.org/), where you can enable them by:
+
+```ts
+// vite.config.js
+import ViteComponents, { 
+  AntDesignVueResolver,
+  ElementPlusResolver,
+  VantResolver,
+} from 'vite-plugin-components'
+
+export default {
+  plugins: [
+    /* ... */
+    ViteComponents({
+      customResolvers: [
+        AntDesignVueResolver(),
+        ElementPlusResolver(),
+        VantResolver(),
+      ]
+    }),
+  ],
+}
+```
+
+Or you can write your own resolver quite easily:
+
+```ts
+// vite.config.js
+import ViteComponents from 'vite-plugin-components'
+
+export default {
+  plugins: [
+    /* ... */
+    ViteComponents({
+      customResolvers: [
+        // example of importing Vant
+        (name) => {
+          // where `name` is always CapitalCase
+          if (name.startsWith('Van'))
+            return { importName: name.slice(3), path: 'vant' }
+        }
+      ]
+    }),
+  ],
+}
+```
+
+If made other UI libraries configured, please feel free to contribute so it can help others using them out-of-box. Thanks!
+
+
 ## Configuration
@@ -106,0 +158,0 @@

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

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

Improved metrics

Total package byte prevSize

41650

increased by12.16%

Lines of code

1074

increased by10.04%

Number of lines in readme file

189

increased by37.96%

No dependency changes