diff --git a/.changeset/eight-keys-hug.md b/.changeset/eight-keys-hug.md new file mode 100644 index 000000000..02f479ca6 --- /dev/null +++ b/.changeset/eight-keys-hug.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/vite-plugin-svelte': patch +--- + +fix(vitePreprocess): use relative paths in sourcemap sources diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/import-queries.spec.ts.snap b/packages/e2e-tests/import-queries/__tests__/__snapshots__/import-queries.spec.ts.snap index 6c016de89..6b36e54d4 100644 --- a/packages/e2e-tests/import-queries/__tests__/__snapshots__/import-queries.spec.ts.snap +++ b/packages/e2e-tests/import-queries/__tests__/__snapshots__/import-queries.spec.ts.snap @@ -560,10 +560,9 @@ exports[`raw > Dummy.svelte?raw&svelte&type=all&sourcemap 1`] = ` \\"dependencies\\": [], \\"map\\": { \\"version\\": 3, - \\"mappings\\": \\"AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CCCT,MAAA,CAAA,GAAA,CAAI,IAAA;AACX,GAAA,CAAI,MAAA,CAAA,CAAA,CAAS,CAAA;ADCd,CAAC,CAAC,MAAM;;AAER,CAAC;AACD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACjB,EAAE,MAAM,CAAC,CAAC;AACV,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B;;AAEA,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;;CAKlB,CAAC,CAAC,KAAK;\\", + \\"mappings\\": \\"AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CACT,MAAA,CAAA,GAAA,CAAI,IAAA;AACX,GAAA,CAAI,MAAA,CAAA,CAAA,CAAS,CAAA;AACd,CAAC,CAAC,MAAM;;AAER,CAAC;AACD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACjB,EAAE,MAAM,CAAC,CAAC;AACV,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B;;AAEA,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;;CAKlB,CAAC,CAAC,KAAK;\\", \\"names\\": [], \\"sources\\": [ - \\"Dummy.svelte\\", \\"Dummy.svelte\\" ] } @@ -840,7 +839,7 @@ export const dependencies=[] export const js={\\"code\\":\\"/* src/Dummy.svelte generated by Svelte vXXX */\\\\nimport {\\\\n\\\\tSvelteComponent as SvelteComponent$,\\\\n\\\\tappend as append$,\\\\n\\\\tattr as attr$,\\\\n\\\\tdetach as detach$,\\\\n\\\\telement as element$,\\\\n\\\\tinit as init$,\\\\n\\\\tinsert as insert$,\\\\n\\\\tlisten as listen$,\\\\n\\\\tnoop as noop$,\\\\n\\\\tsafe_not_equal as safe_not_equal$,\\\\n\\\\tset_data as set_data$,\\\\n\\\\ttext as text$\\\\n} from \\\\\\"svelte/internal\\\\\\";\\\\n\\\\nfunction create_fragment(ctx) {\\\\n\\\\tlet button$;\\\\n\\\\tlet t0$;\\\\n\\\\tlet t1$;\\\\n\\\\tlet t2$;\\\\n\\\\tlet mounted;\\\\n\\\\tlet dispose;\\\\n\\\\n\\\\treturn {\\\\n\\\\t\\\\tc() {\\\\n\\\\t\\\\t\\\\tbutton$ = element$(\\\\\\"button\\\\\\");\\\\n\\\\t\\\\t\\\\tt0$ = text$(/*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tt1$ = text$(\\\\\\" clicks: \\\\\\");\\\\n\\\\t\\\\t\\\\tt2$ = text$(/*clicks*/ ctx[1]);\\\\n\\\\t\\\\t\\\\tattr$(button$, \\\\\\"class\\\\\\", \\\\\\"svelte-d8vj6a\\\\\\");\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tm(target, anchor) {\\\\n\\\\t\\\\t\\\\tinsert$(target, button$, anchor);\\\\n\\\\t\\\\t\\\\tappend$(button$, t0$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t1$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t2$);\\\\n\\\\n\\\\t\\\\t\\\\tif (!mounted) {\\\\n\\\\t\\\\t\\\\t\\\\tdispose = listen$(button$, \\\\\\"click\\\\\\", /*click_handler$*/ ctx[2]);\\\\n\\\\t\\\\t\\\\t\\\\tmounted = true;\\\\n\\\\t\\\\t\\\\t}\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tp(ctx, [dirty]) {\\\\n\\\\t\\\\t\\\\tif (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tif (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]);\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\ti: noop$,\\\\n\\\\t\\\\to: noop$,\\\\n\\\\t\\\\td(detaching) {\\\\n\\\\t\\\\t\\\\tif (detaching) detach$(button$);\\\\n\\\\t\\\\t\\\\tmounted = false;\\\\n\\\\t\\\\t\\\\tdispose();\\\\n\\\\t\\\\t}\\\\n\\\\t};\\\\n}\\\\n\\\\nfunction instance$($$self, $$props, $$invalidate) {\\\\n\\\\tlet { name } = $$props;\\\\n\\\\tlet clicks = 0;\\\\n\\\\n\\\\tconst click_handler$ = () => {\\\\n\\\\t\\\\t$$invalidate(1, clicks++, clicks);\\\\n\\\\t};\\\\n\\\\n\\\\t$$self.$$set = $$props => {\\\\n\\\\t\\\\tif ('name' in $$props) $$invalidate(0, name = $$props.name);\\\\n\\\\t};\\\\n\\\\n\\\\treturn [name, clicks, click_handler$];\\\\n}\\\\n\\\\nclass Dummy$ extends SvelteComponent$ {\\\\n\\\\tconstructor(options) {\\\\n\\\\t\\\\tsuper();\\\\n\\\\t\\\\tinit$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 });\\\\n\\\\t}\\\\n}\\\\n\\\\nexport default Dummy$;\\",\\"map\\":null,\\"dependencies\\":[]} export const lang=\\"ts\\" export const normalizedFilename=\\"/src/Dummy.svelte\\" -export const preprocessed={\\"code\\":\\"\\\\n\\\\n {\\\\n\\\\t\\\\tclicks++;\\\\n\\\\t}}>{name} clicks: {clicks}\\\\n\\\\n\\\\n\\",\\"dependencies\\":[],\\"map\\":{\\"version\\":3,\\"mappings\\":\\"AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CCCT,MAAA,CAAA,GAAA,CAAI,IAAA;AACX,GAAA,CAAI,MAAA,CAAA,CAAA,CAAS,CAAA;ADCd,CAAC,CAAC,MAAM;;AAER,CAAC;AACD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACjB,EAAE,MAAM,CAAC,CAAC;AACV,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B;;AAEA,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;;CAKlB,CAAC,CAAC,KAAK;\\",\\"names\\":[],\\"sources\\":[\\"Dummy.svelte\\",\\"Dummy.svelte\\"]}} +export const preprocessed={\\"code\\":\\"\\\\n\\\\n {\\\\n\\\\t\\\\tclicks++;\\\\n\\\\t}}>{name} clicks: {clicks}\\\\n\\\\n\\\\n\\",\\"dependencies\\":[],\\"map\\":{\\"version\\":3,\\"mappings\\":\\"AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CACT,MAAA,CAAA,GAAA,CAAI,IAAA;AACX,GAAA,CAAI,MAAA,CAAA,CAAA,CAAS,CAAA;AACd,CAAC,CAAC,MAAM;;AAER,CAAC;AACD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACjB,EAAE,MAAM,CAAC,CAAC;AACV,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B;;AAEA,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;;CAKlB,CAAC,CAAC,KAAK;\\",\\"names\\":[],\\"sources\\":[\\"Dummy.svelte\\"]}} export const source=\\"\\\\n\\\\n {\\\\n\\\\t\\\\tclicks++;\\\\n\\\\t}}>{name} clicks: {clicks}\\\\n\\\\n\\\\n\\" export const ssr=false export const stats={\\"timings\\":{\\"total\\":0.123456789,\\"parse\\":{\\"total\\":0.123456789},\\"create component\\":{\\"total\\":0.123456789}}} @@ -852,7 +851,7 @@ export const warnings=[] exports[`raw > mixed exports > Dummy.svelte?raw&svelte&type=preprocessed 1`] = ` "export const code=\\"\\\\n\\\\n {\\\\n\\\\t\\\\tclicks++;\\\\n\\\\t}}>{name} clicks: {clicks}\\\\n\\\\n\\\\n\\" export const dependencies=[] -export const map={\\"version\\":3,\\"mappings\\":\\"AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CCCT,MAAA,CAAA,GAAA,CAAI,IAAA;AACX,GAAA,CAAI,MAAA,CAAA,CAAA,CAAS,CAAA;ADCd,CAAC,CAAC,MAAM;;AAER,CAAC;AACD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACjB,EAAE,MAAM,CAAC,CAAC;AACV,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B;;AAEA,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;;CAKlB,CAAC,CAAC,KAAK;\\",\\"names\\":[],\\"sources\\":[\\"Dummy.svelte\\",\\"Dummy.svelte\\"]} +export const map={\\"version\\":3,\\"mappings\\":\\"AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CACT,MAAA,CAAA,GAAA,CAAI,IAAA;AACX,GAAA,CAAI,MAAA,CAAA,CAAA,CAAS,CAAA;AACd,CAAC,CAAC,MAAM;;AAER,CAAC;AACD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACjB,EAAE,MAAM,CAAC,CAAC;AACV,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B;;AAEA,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;;CAKlB,CAAC,CAAC,KAAK;\\",\\"names\\":[],\\"sources\\":[\\"Dummy.svelte\\"]} export default code " `; diff --git a/packages/vite-plugin-svelte/src/preprocess.ts b/packages/vite-plugin-svelte/src/preprocess.ts index 0b1ff0c74..fe4d79879 100644 --- a/packages/vite-plugin-svelte/src/preprocess.ts +++ b/packages/vite-plugin-svelte/src/preprocess.ts @@ -1,8 +1,8 @@ -import path from 'path'; import { preprocessCSS, resolveConfig, transformWithEsbuild } from 'vite'; import type { ESBuildOptions, InlineConfig, ResolvedConfig } from 'vite'; // eslint-disable-next-line node/no-missing-import import type { Preprocessor, PreprocessorGroup } from 'svelte/types/compiler/preprocess'; +import { mapSourcesToRelative } from './utils/sourcemaps'; const supportedStyleLangs = ['css', 'less', 'sass', 'scss', 'styl', 'stylus', 'postcss', 'sss']; const supportedScriptLangs = ['ts']; @@ -27,7 +27,7 @@ function viteScript(): { script: Preprocessor } { async script({ attributes, content, filename = '' }) { const lang = attributes.lang as string; if (!supportedScriptLangs.includes(lang)) return; - const transformResult = await transformWithEsbuild(content, filename, { + const { code, map } = await transformWithEsbuild(content, filename, { loader: lang as ESBuildOptions['loader'], target: 'esnext', tsconfigRaw: { @@ -38,9 +38,12 @@ function viteScript(): { script: Preprocessor } { } } }); + + mapSourcesToRelative(map, filename); + return { - code: transformResult.code, - map: transformResult.map + code, + map }; } }; @@ -70,14 +73,13 @@ function viteStyle(config: InlineConfig | ResolvedConfig = {}): { transform = getCssTransformFn(resolvedConfig); } const moduleId = `${filename}.${lang}`; - const result = await transform(content, moduleId); - // patch sourcemap source to point back to original filename - if (result.map?.sources?.[0] === moduleId) { - result.map.sources[0] = path.basename(filename); - } + const { code, map } = await transform(content, moduleId); + + mapSourcesToRelative(map, moduleId); + return { - code: result.code, - map: result.map ?? undefined + code, + map: map ?? undefined }; }; // @ts-expect-error tag so can be found by v-p-s diff --git a/packages/vite-plugin-svelte/src/utils/compile.ts b/packages/vite-plugin-svelte/src/utils/compile.ts index 4f0e9c244..b0f433e10 100644 --- a/packages/vite-plugin-svelte/src/utils/compile.ts +++ b/packages/vite-plugin-svelte/src/utils/compile.ts @@ -9,29 +9,12 @@ import { StatCollection } from './vite-plugin-svelte-stats'; //eslint-disable-next-line node/no-missing-import import type { Processed } from 'svelte/types/compiler/preprocess'; import { createInjectScopeEverythingRulePreprocessorGroup } from './preprocess'; -import path from 'path'; +import { mapSourcesToRelative } from './sourcemaps'; const scriptLangRE = /