diff --git a/CHANGELOG.md b/CHANGELOG.md index b02be239..a5b44240 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/README.md b/README.md index dd5ee040..f52466c3 100644 --- a/README.md +++ b/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 diff --git a/index.js b/index.js index 08baac8e..0d8a171e 100644 --- a/index.js +++ b/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; diff --git a/test/loader.spec.js b/test/loader.spec.js index db9dd1e2..a23ad919 100644 --- a/test/loader.spec.js +++ b/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' } } ) );