fix: turn diff-match-patch into an optional peer dependency (#110)

Author: dominikg

.changeset/nasty-poems-fold.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+fix: turn diff-match-patch into an optional peer dependency to reduce footprint

packages/playground/windicss/package.json

@@ -14,6 +14,7 @@
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.38.3",
     "vite": "^2.4.2",
-    "vite-plugin-windicss": "^1.2.4"
+    "vite-plugin-windicss": "^1.2.4",
+    "diff-match-patch": "^1.0.5"
   }
 }

packages/playground/windicss/vite.config.js

@@ -5,7 +5,10 @@ const vitePluginWindicss = require('vite-plugin-windicss').default;
 module.exports = defineConfig(({ command, mode }) => {
 	const isProduction = mode === 'production';
 	return {
-		plugins: [svelte(), vitePluginWindicss()],
+		plugins: [
+			svelte({ experimental: { generateMissingPreprocessorSourcemaps: true } }),
+			vitePluginWindicss()
+		],
 		build: {
 			minify: isProduction
 		}

packages/vite-plugin-svelte/package.json

@@ -46,19 +46,26 @@
   "dependencies": {
     "@rollup/pluginutils": "^4.1.1",
     "debug": "^4.3.2",
-    "diff-match-patch": "^1.0.5",
     "kleur": "^4.1.4",
     "magic-string": "^0.25.7",
     "require-relative": "^0.8.7",
     "svelte-hmr": "^0.14.6"
   },
+
   "peerDependencies": {
+    "diff-match-patch": "^1.0.5",
     "svelte": "^3.34.0",
     "vite": "^2.3.7"
   },
+  "peerDependenciesMeta": {
+    "diff-match-patch": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@types/debug": "^4.1.6",
     "@types/diff-match-patch": "^1.0.32",
+    "diff-match-patch": "^1.0.5",
     "esbuild": "^0.12.15",
     "rollup": "^2.53.2",
     "svelte": "^3.38.3",

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

@@ -2,18 +2,18 @@ import { buildMagicString, buildSourceMap } from '../sourcemap';
 
 describe('sourcemap', () => {
 	describe('buildMagicString', () => {
-		it('should return a valid magic string', () => {
+		it('should return a valid magic string', async () => {
 			const from = 'h1{color: blue}\nh2{color: green}\nh3{color: red}\n';
 			const to = 'h1{color: blue}\ndiv{color: white}\nh3{color: red}\nh2{color: green}\n';
-			const m = buildMagicString(from, to);
+			const m = await buildMagicString(from, to);
 			expect(m).toBeDefined();
 			expect(m.original).toBe(from);
 			expect(m.toString()).toBe(to);
 		});
 	});
 	describe('buildSourceMap', () => {
-		it('should return a map with mappings and filename', () => {
-			const map = buildSourceMap('foo', 'bar', 'foo.txt');
+		it('should return a map with mappings and filename', async () => {
+			const map = await buildSourceMap('foo', 'bar', 'foo.txt');
 			expect(map).toBeDefined();
 			expect(map.mappings).toBeDefined();
 			expect(map.mappings[0]).toBeDefined();

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

@@ -295,6 +295,8 @@ export interface ExperimentalOptions {
 
 	/**
 	 * wrap all preprocessors in with a function that adds a sourcemap to the output if missing
+	 *
+	 * to use this option you have to install "diff-match-patch"
 	 */
 	generateMissingPreprocessorSourcemaps?: boolean;
 }

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

@@ -204,9 +204,14 @@ function validateSourceMapOutputWrapper(group: PreprocessorGroup, i: number): Pr
 				}
 				if (invalidMap) {
 					try {
-						const map = buildSourceMap(options.content, result.code, options.filename);
-						log.warn.once('adding generated sourcemap to preprocesor result');
-						result.map = map;
+						const map = await buildSourceMap(options.content, result.code, options.filename);
+						if (map) {
+							log.debug.enabled &&
+								log.debug(
+									`adding generated sourcemap to preprocesor result for ${options.filename}`
+								);
+							result.map = map;
+						}
 					} catch (e) {
 						log.error(`failed to build sourcemap`, e);
 					}

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

@@ -1,11 +1,24 @@
 import MagicString, { MagicStringOptions } from 'magic-string';
-import { diff_match_patch, DIFF_DELETE, DIFF_INSERT } from 'diff-match-patch';
+import { log } from './log';
 
-export function buildMagicString(
+export async function buildMagicString(
 	from: string,
 	to: string,
 	options?: MagicStringOptions
-): MagicString {
+): Promise<MagicString | null> {
+	let diff_match_patch, DIFF_DELETE: number, DIFF_INSERT: number;
+	try {
+		const dmpPkg = await import('diff-match-patch');
+		diff_match_patch = dmpPkg.diff_match_patch;
+		DIFF_INSERT = dmpPkg.DIFF_INSERT;
+		DIFF_DELETE = dmpPkg.DIFF_DELETE;
+	} catch (e) {
+		log.error.once(
+			'Failed to import optional dependency "diff-match-patch". Please install it to enable generated sourcemaps.'
+		);
+		return null;
+	}
+
 	const dmp = new diff_match_patch();
 	const diffs = dmp.diff_main(from, to);
 	dmp.diff_cleanupSemantic(diffs);
@@ -38,8 +51,8 @@ export function buildMagicString(
 	return m;
 }
 
-export function buildSourceMap(from: string, to: string, filename?: string) {
+export async function buildSourceMap(from: string, to: string, filename?: string) {
 	// @ts-ignore
-	const m = buildMagicString(from, to, { filename });
-	return m.generateDecodedMap({ source: filename, hires: true, includeContent: false });
+	const m = await buildMagicString(from, to, { filename });
+	return m ? m.generateDecodedMap({ source: filename, hires: true, includeContent: false }) : null;
 }