add svelte support to webpack encore

fixtures/js/hello_world.svelte

@@ -0,0 +1,5 @@
+<script>
+	let name = 'world';
+</script>
+
+<h1>Hello {name}!</h1>

index.js

@@ -1726,6 +1726,19 @@ class Encore {
         runtimeConfig = null;
         webpackConfig = null;
     }
+
+    /**
+     * If enabled, the SvelteJs loader is enabled.
+     *
+     * https://github.com/sveltejs/svelte-loader
+     *
+     * @returns {Encore}
+     */
+    enableSvelte() {
+        webpackConfig.enableSvelte();
+
+        return this;
+    }
 }
 
 /**

lib/WebpackConfig.js

@@ -95,6 +95,7 @@ class WebpackConfig {
         this.useBabelTypeScriptPreset = false;
         this.useWebpackNotifier = false;
         this.useHandlebarsLoader = false;
+        this.useSvelte = false;
 
         // Features/Loaders options
         this.copyFilesConfigs = [];
@@ -150,6 +151,7 @@ class WebpackConfig {
             eslint: () => {},
             typescript: () => {},
             handlebars: () => {},
+            svelte: () => {},
         };
 
         // Plugins options
@@ -692,6 +694,10 @@ class WebpackConfig {
         }
     }
 
+    enableSvelte() {
+        this.useSvelte = true;
+    }
+
     enableTypeScriptLoader(callback = () => {}) {
         if (this.useBabelTypeScriptPreset) {
             throw new Error('Encore.enableTypeScriptLoader() can not be called when Encore.enableBabelTypeScriptPreset() has been called.');

lib/config-generator.js

@@ -120,7 +120,7 @@ class ConfigGenerator {
         config.stats = this.buildStatsConfig();
 
         config.resolve = {
-            extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx', '.vue', '.ts', '.tsx'],
+            extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx', '.vue', '.ts', '.tsx', '.svelte'],
             alias: {}
         };
 
@@ -403,6 +403,17 @@ class ConfigGenerator {
             }));
         }
 
+        if (this.webpackConfig.useSvelte) {
+            rules.push(applyRuleConfigurationCallback('svelte', {
+                resolve: {
+                    mainFields: ['svelte', 'browser', 'module', 'main'],
+                    extensions: ['.mjs', '.js', '.svelte'],
+                },
+                test: /\.svelte$/,
+                loader: 'svelte-loader',
+            }));
+        }
+
         if (this.webpackConfig.useVueLoader) {
             rules.push(applyRuleConfigurationCallback('vue', {
                 test: /\.vue$/,

lib/features.js

@@ -161,6 +161,14 @@ const features = {
             { name: '@symfony/stimulus-bridge', enforce_version: true }
         ],
         description: 'enable Stimulus bridge'
+    },
+    svelte: {
+        method: 'enableSvelte()',
+        packages: [
+            { name: 'svelte', enforce_version: true },
+            { name: 'svelte-loader', enforce_version: true }
+        ],
+        description: 'process Svelte JS files'
     }
 };
 

package.json

@@ -98,6 +98,8 @@
     "webpack": "^5.72",
     "webpack-cli": "^4.9.1",
     "webpack-notifier": "^1.15.0",
+    "svelte": "^3.50.0",
+    "svelte-loader": "^3.1.0",
     "zombie": "^6.1.4"
   },
   "peerDependencies": {

test/WebpackConfig.js

@@ -1300,12 +1300,12 @@ describe('WebpackConfig object', () => {
 
             expect(config.externals).to.deep.equals([]);
 
-            config.addExternals({ 'jquery': 'jQuery', 'react': 'react' });
+            config.addExternals({ 'jquery': 'jQuery', 'react': 'react', 'svelte': 'svelte' });
             config.addExternals({ 'lodash': 'lodash' });
             config.addExternals(/^(jquery|\$)$/i);
 
             expect(config.externals).to.deep.equals([
-                { 'jquery': 'jQuery', 'react': 'react' },
+                { 'jquery': 'jQuery', 'react': 'react', 'svelte': 'svelte' },
                 { 'lodash': 'lodash' },
                 /^(jquery|\$)$/i
             ]);
@@ -1494,7 +1494,7 @@ describe('WebpackConfig object', () => {
 
             expect(() => {
                 config.configureLoaderRule('reason');
-            }).to.throw('Loader "reason" is not configurable. Valid loaders are "javascript", "css", "images", "fonts", "sass", "less", "stylus", "vue", "eslint", "typescript", "handlebars" and the aliases "js", "ts", "scss".');
+            }).to.throw('Loader "reason" is not configurable. Valid loaders are "javascript", "css", "images", "fonts", "sass", "less", "stylus", "vue", "eslint", "typescript", "handlebars", "svelte" and the aliases "js", "ts", "scss".');
         });
 
         it('Call method with not a valid callback', () => {

test/functional.js

@@ -1309,6 +1309,23 @@ module.exports = {
             });
         });
 
+        it('When enabled, svelte is transformed', (done) => {
+            const config = createWebpackConfig('www/build', 'dev');
+            config.setPublicPath('/build');
+            config.addEntry('main', './js/hello_world.svelte');
+            config.enableSvelte();
+
+            testSetup.runWebpack(config, (webpackAssert) => {
+                // check that babel transformed the svelte files
+                webpackAssert.assertOutputFileContains(
+                    'main.js',
+                    'SvelteComponent'
+                );
+
+                done();
+            });
+        });
+
         it('When enabled, preact JSX is transformed with preact-compat!', (done) => {
             const config = createWebpackConfig('www/build', 'dev');
             config.setPublicPath('/build');

test/index.js

@@ -266,6 +266,15 @@ describe('Public API', () => {
 
     });
 
+    describe('enableSvelte', () => {
+
+        it('must return the API object', () => {
+            const returnedValue = api.enableSvelte();
+            expect(returnedValue).to.equal(api);
+        });
+
+    });
+
     describe('enablePreactPreset', () => {
 
         it('must return the API object', () => {