fix: let vite create final paths (#412)

* fix: let vite create final paths

* re-add "renderChunk" to support srcset

* Revert "re-add "renderChunk" to support srcset"

This reverts commit 6beca2f.

* remove magic-string

* add test

Co-authored-by: Philipp Zerelles <philipp@zerelles.com>

.changeset/two-games-kiss.md

@@ -0,0 +1,5 @@
+---
+'vite-imagetools': patch
+---
+
+Let vite create correct paths in build result

packages/vite/package.json

@@ -38,8 +38,7 @@
   },
   "dependencies": {
     "@rollup/pluginutils": "^4.1.2",
-    "imagetools-core": "workspace:^",
-    "magic-string": "^0.26.0"
+    "imagetools-core": "workspace:^"
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "^9.0.0",

packages/vite/src/__tests__/main.test.ts

@@ -538,4 +538,26 @@ describe('vite-imagetools', () => {
     expect(window.__IMAGE__).toHaveProperty('format')
     expect(window.__IMAGE__).not.toHaveProperty('height')
   })
+
+  test('srcset', async () => {
+    const bundle = (await build({
+      root: join(__dirname, '__fixtures__'),
+      logLevel: 'warn',
+      build: { write: false },
+      plugins: [
+        testEntry(`
+                        import Image from "./with-metadata.png?srcset"
+                        window.__IMAGE__ = Image
+                    `),
+        imagetools()
+      ]
+    })) as RollupOutput | RollupOutput[]
+
+    const files = getFiles(bundle, '**.js') as OutputChunk[]
+    const { window } = new JSDOM(``, { runScripts: 'outside-only' })
+    window.eval(files[0].code)
+
+     expect(window.__IMAGE__).toBe('/assets/with-metadata.9ff75690.png 600w')
+  })
+
 })

packages/vite/src/index.ts

@@ -14,7 +14,6 @@ import {
 } from 'imagetools-core'
 import { basename, extname, posix } from 'path'
 import { createFilter, dataToEsm } from '@rollup/pluginutils'
-import MagicString from 'magic-string'
 import { VitePluginOptions } from './types'
 
 const defaultOptions: VitePluginOptions = {
@@ -55,7 +54,7 @@ export function imagetools(userOptions: Partial<VitePluginOptions> = {}): Plugin
 
       let directives = srcURL.searchParams
 
-      if(typeof pluginOptions.defaultDirectives === "function") {
+      if (typeof pluginOptions.defaultDirectives === 'function') {
         directives = new URLSearchParams([...pluginOptions.defaultDirectives(srcURL), ...srcURL.searchParams])
       } else if (pluginOptions.defaultDirectives) {
         directives = new URLSearchParams([...pluginOptions.defaultDirectives, ...srcURL.searchParams])
@@ -88,7 +87,7 @@ export function imagetools(userOptions: Partial<VitePluginOptions> = {}): Plugin
             type: 'asset'
           })
 
-          metadata.src = `__VITE_IMAGE_ASSET__${fileHandle}__`
+          metadata.src = `__VITE_ASSET__${fileHandle}__`
         } else {
           metadata.src = posix.join('/@imagetools', id)
         }
@@ -139,32 +138,6 @@ export function imagetools(userOptions: Partial<VitePluginOptions> = {}): Plugin
 
         next()
       })
-    },
-
-    renderChunk(code) {
-      const assetUrlRE = /__VITE_IMAGE_ASSET__([a-z\d]{8})__(?:_(.*?)__)?/g
-
-      let match
-      let s
-      while ((match = assetUrlRE.exec(code))) {
-        s = s || (s = new MagicString(code))
-        const [full, hash, postfix = ''] = match
-
-        const file = this.getFileName(hash)
-
-        const outputFilepath = viteConfig.base + file + postfix
-
-        s.overwrite(match.index, match.index + full.length, outputFilepath)
-      }
-
-      if (s) {
-        return {
-          code: s.toString(),
-          map: viteConfig.build.sourcemap ? s.generateMap({ hires: true }) : null
-        }
-      } else {
-        return null
-      }
     }
   }
 }