Move compiler options under compilerOptions

Author: benmccann

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 * Breaking: dropped Svelte 2 support ([#150](https://github.com/sveltejs/svelte-loader/pull/150))
 * Breaking: dropped Node 8 support ([#157](https://github.com/sveltejs/svelte-loader/pull/157))
+* Breaking: compiler options must now be specified under `compilerOptions` ([#158](https://github.com/sveltejs/svelte-loader/pull/158))
 * Add Webpack 5 support ([#151](https://github.com/sveltejs/svelte-loader/pull/151))
 * Replace broken Svelte 2 HMR with the implementation from `rixo/svelte-loader-hot` ([#156](https://github.com/sveltejs/svelte-loader/pull/156))
 * Add Node 14 support and fix intermittent crashes when using `cache-loader` in front of `svelte-loader` ([#125](https://github.com/sveltejs/svelte-loader/pull/125))

README.md

@@ -161,10 +161,12 @@ module.exports = {
         use: {
           loader: 'svelte-loader',
           options: {
-            // NOTE Svelte's dev mode MUST be enabled for HMR to work
-            // -- in a real config, you'd probably set it to false for prod build,
-            //    based on a env variable or so
-            dev: true,
+            compilerOptions: {
+              // NOTE Svelte's dev mode MUST be enabled for HMR to work
+              // -- in a real config, you'd probably set it to false for prod build,
+              //    based on a env variable or so
+              dev: true,
+            },
 
             // NOTE emitCss: true is currently not supported with HMR
             // Enable it for production to output separate css file

index.js

@@ -3,19 +3,6 @@ const { getOptions } = require('loader-utils');
 const { makeHot } = require('./lib/make-hot.js');
 const { compile, preprocess } = require('svelte/compiler');
 
-const pluginOptions = {
-	hotReload: true,
-	hotOptions: true,
-	preprocess: true,
-	emitCss: true,
-
-	// legacy
-	onwarn: true,
-	style: true,
-	script: true,
-	markup: true
-};
-
 function posixify(file) {
 	return file.replace(/[/\\]/g, '/');
 }
@@ -66,22 +53,18 @@ module.exports = function(source, map) {
 		return;
 	}
 
-	const isServer = this.target === 'node' || (options.generate && options.generate == 'ssr');
+	const isServer = this.target === 'node' || (options.compilerOptions && options.compilerOptions.generate == 'ssr');
 	const isProduction = this.minimize || process.env.NODE_ENV === 'production';
 
 	const compileOptions = {
 		filename: this.resourcePath,
-		format: options.format || 'esm'
+		css: !options.emitCss,
+		...options.compilerOptions,
+		format: (options.compilerOptions && options.compilerOptions.format) || 'esm'
 	};
 
 	const handleWarning = warning => this.emitWarning(new Error(warning));
 
-	for (const option in options) {
-		if (!pluginOptions[option]) compileOptions[option] = options[option];
-	}
-
-	if (options.emitCss) compileOptions.css = false;
-
 	deprecatePreprocessOptions(options);
 	options.preprocess.filename = compileOptions.filename;
 

test/loader.spec.js

@@ -148,7 +148,7 @@ describe('loader', () => {
 						expect(err).not.to.exist;
 						expect(code).not.to.contain('function add_css()');
 					},
-					{ css: false }
+					{ compilerOptions: { css: false } }
 				)
 			);
 		});
@@ -164,7 +164,7 @@ describe('loader', () => {
 						expect(code).to.contain('import {');
 						expect(code).to.contain('custom-svelte/internal');
 					},
-					{ sveltePath: 'custom-svelte' }
+					{ compilerOptions: { sveltePath: 'custom-svelte' } }
 				)
 			);
 		});
@@ -190,7 +190,7 @@ describe('loader', () => {
 
 						expect(code).to.contain('create_ssr_component');
 					},
-					{ generate: 'ssr' }
+					{ compilerOptions: { generate: 'ssr' } }
 				)
 			);
 		});
@@ -357,7 +357,7 @@ describe('loader', () => {
 					},
 					{
 						hotReload: true,
-						generate: 'ssr'
+						compilerOptions: { generate: 'ssr' }
 					}
 				)
 			);