feat: add global resolver

README.md

@@ -48,6 +48,7 @@ export default defineConfig({
 - [`url`](#url)
 - [`transform`](#transform)
 - [`logLevel`](#logLevel)
+- [`resolve`](#resolve)
 
 ### include
 
@@ -134,7 +135,15 @@ Type: `slient` | `warn`
 
 Default: `warn`
 
-Adjust console output verbosity
+Adjust console output verbosity.
+
+### resolve
+
+Type: `ResolverFunction`
+
+Default: `undefined`
+
+A global url parser.
 
 ### Acknowledgements
 

example/vite.config.js

@@ -1,23 +1,26 @@
+import path from 'path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { VarletUIResolver } from 'unplugin-vue-components/resolvers'
 import Components from 'unplugin-vue-components/vite'
 import { cdn } from 'vite-plugin-cdn2'
+import { jsdelivr } from 'vite-plugin-cdn2/url'
 import { compression } from 'vite-plugin-compression2'
 import Inspect from 'vite-plugin-inspect'
 
-
 export default defineConfig(({ command }) => {
   return {
     plugins: [
       vue(),
       Components({ resolvers: [VarletUIResolver()] }),
       {
         ...cdn({
-          modules: [{
-            name: 'vue',
-            resolve: 'https://cdn.bootcdn.net/ajax/libs/[name]/[version]/vue.global.js'
-          }, 'vue-demi', 'pinia', '@varlet/ui', 'axios']
+          url: 'https://cdn.bootcdn.net/ajax/libs/',
+          modules: ['vue', 'vue-demi', 'pinia', '@varlet/ui', 'axios'],
+          resolve(baseURL, { name, version, relativeModule }) {
+            if (name === '@varlet/ui') return new URL(`${name}@${version}/${relativeModule}`, jsdelivr).href
+            return new URL(`${name}/${version}/${path.basename(relativeModule)}`, baseURL).href
+          }
         }),
         apply: command
       },

src/index.ts

@@ -8,7 +8,7 @@ import { jsdelivr } from './url'
 import type { CDNPluginOptions } from './interface'
 
 function cdn(opts: CDNPluginOptions = {}): Plugin {
-  const { modules = [], url = jsdelivr, include = /\.(mjs|js|ts|vue|jsx|tsx)(\?.*|)$/, exclude, logLevel = 'warn' } = opts
+  const { modules = [], url = jsdelivr, include = /\.(mjs|js|ts|vue|jsx|tsx)(\?.*|)$/, exclude, logLevel = 'warn', resolve: resolver } = opts
   const filter = createFilter(include, exclude)
   const scanner = createScanner(modules)
   const generator = createCodeGenerator()
@@ -35,7 +35,7 @@ function cdn(opts: CDNPluginOptions = {}): Plugin {
       return generator.transform(code)
     },
     transformIndexHtml(html) {
-      const inject = createInjectScript(scanner.dependencies, url)
+      const inject = createInjectScript(scanner.dependencies, url, resolver)
       return inject.text(html, opts.transform)
     }
   }

src/inject.ts

@@ -19,17 +19,17 @@ function replaceURL(p: string, url: string | ResolverFunction, options: Options)
   return template.replace(/\[version\]/, options.extra.version).replace(/\[baseURL\]/, options.baseURL).replace(/\[name\]/, options.extra.name)
 }
 
-function makeURL(moduleMeta: ModuleInfo, baseURL: string) {
+function makeURL(moduleMeta: ModuleInfo, baseURL: string, resolver?: ResolverFunction) {
   const { version, name: packageName, relativeModule, resolve } = moduleMeta
   if (!baseURL) return
-  const u = new URL(`${packageName}@${version}/${relativeModule}`, baseURL).href
+  const u = resolver ? resolver(baseURL, moduleMeta) : new URL(`${packageName}@${version}/${relativeModule}`, baseURL).href 
   if (resolve) return replaceURL(u, resolve, { extra: moduleMeta, baseURL })
   return u
 }
 
 function makeNode(moduleInfo: ModuleInfo): ScriptNode | LinkNode {
   return {
-    tag: 'link',
+    tag: 'link',  
     url: new Set(),
     name: moduleInfo.name,
     extra: moduleInfo
@@ -39,8 +39,8 @@ function makeNode(moduleInfo: ModuleInfo): ScriptNode | LinkNode {
 class InjectScript {
   private modules: Map<string, LinkNode | ScriptNode>
   private window: Window
-  constructor(modules: Map<string, ModuleInfo>, url: string) {
-    this.modules = this.prepareSource(modules, url)
+  constructor(modules: Map<string, ModuleInfo>, url: string, resolver?: ResolverFunction) {
+    this.modules = this.prepareSource(modules, url, resolver)
     this.window = new Window()
   }
 
@@ -85,7 +85,7 @@ class InjectScript {
     return document.body.innerHTML
   }
 
-  private prepareSource(modules: Map<string, ModuleInfo>, baseURL: string) {
+  private prepareSource(modules: Map<string, ModuleInfo>, baseURL: string, resolver?: ResolverFunction) {
     const container: Map<string, LinkNode | ScriptNode> = new Map()
 
     const traverseModule = (moduleMeta: ModuleInfo, moduleName: string) => {
@@ -112,7 +112,7 @@ class InjectScript {
 
     modules.forEach((meta, moduleName) => {
       const node = makeNode(meta)
-      const url = makeURL(meta, baseURL)
+      const url = makeURL(meta, baseURL, resolver)
       if (!url) return
       node.url.add(url)
       node.tag = isScript(url)
@@ -126,7 +126,8 @@ class InjectScript {
 
 export function createInjectScript(
   dependModules: Map<string, ModuleInfo>,
-  url: string
+  url: string,
+  resolver?: ResolverFunction
 ) {
-  return new InjectScript(dependModules, url)
+  return new InjectScript(dependModules, url, resolver)
 }

src/interface.ts

@@ -81,5 +81,6 @@ export interface CDNPluginOptions {
   include?: FilterPattern
   exclude?: FilterPattern
   logLevel?: 'slient' | 'warn'
+  resolve?: ResolverFunction
 }