diff --git a/.changeset/two-games-kiss.md b/.changeset/two-games-kiss.md new file mode 100644 index 00000000..91cc2e93 --- /dev/null +++ b/.changeset/two-games-kiss.md @@ -0,0 +1,5 @@ +--- +'vite-imagetools': patch +--- + +Let vite create correct paths in build result diff --git a/packages/vite/package.json b/packages/vite/package.json index 8db39b33..9b7db7e2 100644 --- a/packages/vite/package.json +++ b/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", diff --git a/packages/vite/src/__tests__/main.test.ts b/packages/vite/src/__tests__/main.test.ts index b117671e..409f1c8b 100644 --- a/packages/vite/src/__tests__/main.test.ts +++ b/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') + }) + }) diff --git a/packages/vite/src/index.ts b/packages/vite/src/index.ts index 61aec949..52bdef8c 100644 --- a/packages/vite/src/index.ts +++ b/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 = {}): 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 = {}): 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 = {}): 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 - } } } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f48db669..9d1e8330 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -118,7 +118,6 @@ importers: imagetools-core: workspace:^ jest-image-snapshot: ^5.0.0 jsdom: ^20.0.0 - magic-string: ^0.26.0 picomatch: ^2.3.1 rollup: ^2.66.1 sharp: ^0.31.0 @@ -129,7 +128,6 @@ importers: dependencies: '@rollup/pluginutils': 4.2.1 imagetools-core: link:../core - magic-string: 0.26.2 devDependencies: '@rollup/plugin-typescript': 9.0.0_6qbdvrnuliyehzvxjtzrb3pjt4 '@types/jest-image-snapshot': 5.1.0