fix(vitePreprocess): remove dangling pure annotations (#609)

Author: dominikg

.changeset/serious-sloths-grab.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+fix(vitePreprocess): remove problematic pure annotations that could lead to wrong build output in some cases

packages/e2e-tests/preprocess-with-vite/__tests__/preprocess-with-vite.spec.ts

@@ -1,4 +1,5 @@
-import { getColor, getText } from '~utils';
+import { getColor, getText, browserLogs } from '~utils';
+import { expect } from 'vitest';
 
 test('should render App', async () => {
 	expect(await getText('h1.foo')).toBe(`Hello world`);
@@ -7,3 +8,8 @@ test('should render App', async () => {
 	expect(await getColor('#foo-title')).toBe('magenta');
 	expect(await getColor('p.note')).toBe('rgb(255, 62, 0)');
 });
+
+test('should not mangle code from esbuild pure annotations', async () => {
+	expect(browserLogs.some((log) => log.startsWith('pure test 1'))).toBe(true);
+	expect(browserLogs.some((log) => log.startsWith('pure test 2'))).toBe(true);
+});

packages/e2e-tests/preprocess-with-vite/src/Foo.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	let foo: string = 'stylus';
 	export let bla: string = 'blub';
+	console.log('pure test 1', new Date());
+	console.log('pure test 2');
 </script>
 
 <h1 id="foo-title">Styles with {foo} {bla}</h1>

packages/vite-plugin-svelte/src/utils/__tests__/compile.spec.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest';
+import { createCompileSvelte } from '../compile';
+import { ResolvedOptions } from '../options';
+const options: ResolvedOptions = {
+	compilerOptions: {
+		dev: false,
+		format: 'esm',
+		css: 'external'
+	},
+	isBuild: false,
+	isDebug: false,
+	isProduction: false,
+	isServe: false,
+	root: process.cwd()
+};
+
+describe('createCompileSvelte', () => {
+	it('returns function', () => {
+		const compileSvelte = createCompileSvelte(options);
+		expect(typeof compileSvelte).toBe('function');
+	});
+
+	describe('compileSvelte', async () => {
+		it('removes dangling pure annotations', async () => {
+			const code = `<script>
+				const x=1;
+				console.log('something',/* @__PURE__ */ new Date());
+        console.log('something else');
+        </script>
+				<div>{x}</div>`;
+			const compileSvelte = createCompileSvelte(options);
+			const output = await compileSvelte(
+				{
+					cssId: 'svelte-xxxxx',
+					query: undefined,
+					raw: false,
+					ssr: false,
+					timestamp: Date.now(),
+					id: 'id',
+					filename: '/some/File.svelte',
+					normalizedFilename: 'some/File.svelte'
+				},
+				code,
+				{}
+			);
+			expect(output.compiled.js.code).not.toContain('/* @__PURE__ */\n');
+		});
+	});
+});

packages/vite-plugin-svelte/src/utils/compile.ts

@@ -121,6 +121,14 @@ const _createCompileSvelte = (makeHot: Function) => {
 
 		const endStat = stats?.start(filename);
 		const compiled = compile(finalCode, finalCompileOptions);
+
+		// prevent dangling pure comments
+		// see https://github.com/sveltejs/kit/issues/9492#issuecomment-1487704985
+		// uses regex replace with whitespace to keep sourcemap/character count unmodified
+		compiled.js.code = compiled.js.code.replace(
+			/\/\* [@#]__PURE__ \*\/(\s*)$/gm,
+			'               $1'
+		);
 		if (endStat) {
 			endStat();
 		}