feat: add transformAssetUrls

closes #237

Author: KaelWD

packages/shared/src/index.ts

@@ -28,3 +28,41 @@ export function isObject (value: any): value is object {
 export function includes (arr: any[], val: any) {
   return arr.includes(val)
 }
+
+export function toKebabCase (str = '') {
+  return str
+    .replace(/[^a-z]/gi, '-')
+    .replace(/\B([A-Z])/g, '-$1')
+    .toLowerCase()
+}
+
+const defaultTags = {
+  video: ['src', 'poster'],
+  source: ['src'],
+  img: ['src'],
+  image: ['xlink:href', 'href'],
+  use: ['xlink:href', 'href'],
+}
+export const transformAssetUrls = {
+  VAppBar: ['image'],
+  VAvatar: ['image'],
+  VBanner: ['avatar'],
+  VCard: ['image'],
+  VCardItem: ['prependAvatar', 'appendAvatar'],
+  VChip: ['prependAvatar', 'appendAvatar'],
+  VImg: ['src', 'lazySrc', 'srcset'],
+  VListItem: ['prependAvatar', 'appendAvatar'],
+  VNavigationDrawer: ['image'],
+  VParallax: ['src', 'lazySrc', 'srcset'],
+  VToolbar: ['image'],
+} as Record<string, string[]>
+
+for (const [tag, attrs] of Object.entries(transformAssetUrls)) {
+  attrs.forEach(attr => {
+    if (/[A-Z]/.test(attr)) {
+      attrs.push(toKebabCase(attr))
+    }
+  })
+  transformAssetUrls[toKebabCase(tag)] = attrs
+}
+Object.assign(transformAssetUrls, defaultTags)

packages/vite-plugin/README.md

@@ -100,3 +100,21 @@ plugins: [
   vuetify({ styles: 'sass' }),
 ]
 ```
+
+## Image loading
+
+https://github.com/vitejs/vite/tree/main/packages/plugin-vue#asset-url-handling
+
+```js
+// vite.config.js
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+
+export default {
+  plugins: [
+    vue({ 
+      template: { transformAssetUrls }
+    }),
+    vuetify(),
+  ],
+}
+```

packages/vite-plugin/src/index.ts

@@ -1,5 +1,5 @@
 import { Plugin } from 'vite'
-import { Options, isObject, includes } from '@vuetify/loader-shared'
+import { Options, isObject, includes, transformAssetUrls } from '@vuetify/loader-shared'
 
 import { importPlugin } from './importPlugin'
 import { stylesPlugin } from './stylesPlugin'
@@ -25,3 +25,6 @@ function vuetify (_options: Options = {}): Plugin[] {
 
 module.exports = vuetify
 export default vuetify
+
+module.exports.transformAssetUrls = transformAssetUrls
+export { transformAssetUrls }

packages/webpack-plugin/src/index.ts

@@ -1,3 +1,4 @@
 export { default as VuetifyLoader } from './scriptLoader'
 export { VuetifyPlugin } from './plugin'
 // export { ProgressiveLoaderModule as VuetifyProgressiveModule } from './progressive-loader'
+export { transformAssetUrls } from '@vuetify/loader-shared'

packages/webpack-plugin/src/plugin.ts

@@ -4,7 +4,7 @@ import { writeFile } from 'fs/promises'
 import * as path from 'upath'
 import * as mkdirp from 'mkdirp'
 
-import { resolveVuetifyBase, writeStyles, includes, isObject, cacheDir } from '@vuetify/loader-shared'
+import { resolveVuetifyBase, writeStyles, includes, isObject, cacheDir, transformAssetUrls } from '@vuetify/loader-shared'
 
 import type { Compiler, NormalModule, Module } from 'webpack'
 import type { Options } from '@vuetify/loader-shared'
@@ -41,6 +41,14 @@ export class VuetifyPlugin {
       })
     }
 
+    const vueLoader = compiler.options.module.rules.find(rule => {
+      return typeof rule !== 'string' && rule.loader && path.toUnix(rule.loader).endsWith('vue-loader/dist/templateLoader.js')
+    })
+    const vueOptions = typeof vueLoader === 'object' && vueLoader?.options
+    if (vueOptions && typeof vueOptions === 'object') {
+      vueOptions.transformAssetUrls ??= transformAssetUrls
+    }
+
     const vuetifyBase = resolveVuetifyBase()
 
     function hookResolve (transform: (file: string) => string | Promise<string>) {