Deprecated autoComplete

README.md

@@ -29,11 +29,11 @@ Add it to vite.config.js
 
 ```js
 // vite.config.js
-import importToCDN from 'vite-plugin-cdn-import'
+import cdn from 'vite-plugin-cdn-import'
 
 export default {
     plugins: [
-        importToCDN({
+        cdn({
             modules: [
                 {
                     name: 'react',
@@ -51,22 +51,22 @@ export default {
 }
 ```
 
-### Use autoComplete
+### Use preset
 
 ```js
 // vite.config.js
-import importToCDN, { autoComplete } from 'vite-plugin-cdn-import'
+import cdn from 'vite-plugin-cdn-import'
 
 export default {
     plugins: [
-        importToCDN({
-            modules: [autoComplete(['react', 'react-dom'])],
+        cdn({
+            modules: ['react', 'react-dom'],
         }),
     ],
 }
 ```
 
-### Autocomplete supported modules
+### Preset packages
 
 - react
 - react-dom
@@ -110,7 +110,7 @@ Enabled in dev mode
 - Type: `boolean`
 - Default：`false`
 
-> vite2, vite3 请确保开发模式 process.env.NODE_ENV === 'development'
+> Please ensure process.env.NODE_ENV === 'development' when you use vite2, vite3.
 
 ### generateScriptTag
 Custom generated script tags

README.zh-CN.md

@@ -27,11 +27,11 @@ yarn add vite-plugin-cdn-import -D
 
 ```js
 // vite.config.js
-import importToCDN from 'vite-plugin-cdn-import'
+import cdn from 'vite-plugin-cdn-import'
 
 export default {
     plugins: [
-        importToCDN({
+        cdn({
             modules: [
                 {
                     name: 'react',
@@ -49,22 +49,22 @@ export default {
 }
 ```
 
-### 使用 autoComplete
+### 使用预设
 
 ```js
 // vite.config.js
-import importToCDN, { autoComplete } from 'vite-plugin-cdn-import'
+import cdn from 'vite-plugin-cdn-import'
 
 export default {
     plugins: [
-        importToCDN({
-            modules: [autoComplete(['react', 'react-dom'])],
+        cdn({
+            modules: ['react', 'react-dom'],
         }),
     ],
 }
 ```
 
-### 自动完成支持的 module
+### 预设的 npm 包
 
 - react
 - react-dom

examples/react18-vite2/vite.config.ts

@@ -1,15 +1,15 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
-import importToCDN, { autoComplete } from '../../dist'
+import cdn from '../../dist'
 
 console.log('>>>>', process.env.NODE_ENV)
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [
         react(),
-        importToCDN({
+        cdn({
             enableInDevMode: true,
-            modules: [autoComplete('react'), autoComplete('react-dom')],
+            modules: ['react', 'react-dom'],
             generateScriptTag(name, scriptUrl) {
                 return {
                     attrs: {

examples/react18-vite3/vite.config.ts

@@ -1,15 +1,15 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
-import importToCDN, { autoComplete } from '../../dist'
+import cdn from '../../dist'
 console.log('>>>>', process.env.NODE_ENV)
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [
         react(),
-        importToCDN({
+        cdn({
             enableInDevMode: true,
-            modules: [autoComplete('react'), autoComplete('react-dom')],
+            modules: ['react', 'react-dom'],
         }),
     ],
 })

examples/react18-vite4/vite.config.ts

@@ -1,15 +1,15 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
-import importToCDN, { autoComplete } from '../../dist'
+import cdn from '../../dist'
 console.log('>>>>', process.env.NODE_ENV)
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [
         react(),
-        importToCDN({
+        cdn({
             enableInDevMode: true,
-            modules: [autoComplete('react'), autoComplete('react-dom')],
+            modules: ['react', 'react-dom'],
         }),
     ],
 })

examples/react18-vite5-all/vite.config.ts

@@ -1,18 +1,22 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
-import importToCDN, { autoComplete } from '../../dist'
+import cdn from '../../dist'
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [
         react(),
-        importToCDN({
+        cdn({
             enableInDevMode: true,
             modules: [
-                autoComplete(['react', 'react-dom', 'react-router-dom']),
-                autoComplete(['dayjs', 'antd']),
-                autoComplete('lodash'),
-                autoComplete(['moment', 'axios']),
+                'react',
+                'react-dom',
+                'react-router-dom',
+                'dayjs',
+                'antd',
+                'lodash',
+                'moment',
+                'axios',
             ],
         }),
     ],

examples/vue2-vite3/vite.config.ts

@@ -4,17 +4,17 @@ import { defineConfig } from 'vite'
 import legacy from '@vitejs/plugin-legacy'
 import vue2 from '@vitejs/plugin-vue2'
 import vue2Jsx from '@vitejs/plugin-vue2-jsx'
-import importToCDN, { autoComplete } from '../../dist'
+import cdn from '../../dist'
 console.log('>>>>', process.env.NODE_ENV)
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [
         vue2(),
         vue2Jsx(),
-        importToCDN({
+        cdn({
             enableInDevMode: true,
-            modules: [autoComplete(['vue2', 'vue-router@3'])],
+            modules: ['vue2', 'vue-router@3'],
         }),
         legacy({
             targets: ['ie >= 11'],

examples/vue3-vite2/vite.config.ts

@@ -1,15 +1,15 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import importToCDN, { autoComplete } from '../../dist'
+import cdn from '../../dist'
 console.log('>>>>', process.env.NODE_ENV)
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [
         vue(),
-        importToCDN({
+        cdn({
             enableInDevMode: true,
-            modules: [autoComplete(['vue', 'vue-router'])],
+            modules: ['vue', 'vue-router'],
         }),
     ],
 })

examples/vue3-vite3/vite.config.ts

@@ -1,15 +1,15 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import importToCDN, { autoComplete } from '../../dist'
+import cdn from '../../dist'
 console.log('>>>>', process.env.NODE_ENV)
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [
         vue(),
-        importToCDN({
+        cdn({
             enableInDevMode: true,
-            modules: [autoComplete(['vue', 'vue-router'])],
+            modules: ['vue', 'vue-router'],
         }),
     ],
 })

examples/vue3-vite4/vite.config.ts

@@ -1,15 +1,15 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import importToCDN, { autoComplete } from '../../dist'
+import cdn from '../../dist'
 console.log('>>>>', process.env.NODE_ENV)
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [
         vue(),
-        importToCDN({
+        cdn({
             enableInDevMode: true,
-            modules: [autoComplete(['vue', 'vue-router'])],
+            modules: ['vue', 'vue-router'],
         }),
     ],
 })

examples/vue3-vite5/vite.config.ts

@@ -1,15 +1,15 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import importToCDN, { autoComplete } from '../../dist'
+import cdn from '../../dist'
 console.log('>>>>', process.env.NODE_ENV)
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [
         vue(),
-        importToCDN({
+        cdn({
             enableInDevMode: true,
-            modules: [autoComplete(['vue', 'vue-router'])],
+            modules: ['vue', 'vue-router'],
         }),
     ],
 })

src/index.ts

@@ -5,7 +5,7 @@ import fs from 'fs'
 import path from 'path'
 import type { HtmlTagDescriptor, Plugin, UserConfig } from 'vite'
 import { Module, Options } from './type'
-import autoComplete from './autoComplete'
+import auto from './autoComplete'
 
 const isDev = process.env.NODE_ENV === 'development'
 
@@ -118,7 +118,8 @@ function PluginImportToCDN(options: Options): Plugin[] {
     let isBuild = false
 
     const data = modules
-        .map(m => {
+        .map(_m => {
+            const m = typeof _m === 'string' ? auto(_m) : _m
             const list = (Array.isArray(m) ? m : [m]).map(v =>
                 typeof v === 'function' ? v(prodUrl) : v,
             )
@@ -221,6 +222,10 @@ function PluginImportToCDN(options: Options): Plugin[] {
     return plugins
 }
 
+/**
+ * @deprecated Pass the package name directly in options.modules instead.
+ */
+const autoComplete = auto
 export { PluginImportToCDN as Plugin, Options, autoComplete }
 
 export default PluginImportToCDN

src/type.ts

@@ -1,4 +1,5 @@
 import type { HtmlTagDescriptor } from 'vite'
+import type { ModuleName } from './autoComplete'
 
 export type GetModuleFunc = (prodUrl: string) => Module
 
@@ -14,7 +15,13 @@ export interface Module {
 
 export interface Options {
     prodUrl?: string
-    modules: (Module | Module[] | GetModuleFunc | GetModuleFunc[])[]
+    modules: (
+        | ModuleName
+        | Module
+        | Module[]
+        | GetModuleFunc
+        | GetModuleFunc[]
+    )[]
     /** Enabled in dev mode, default is false */
     enableInDevMode?: boolean
     /** Generate the external script tag */