add svelte support to webpack encore

Author: zairigimad

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
+     * 
+     *     Encore.enableSvelte()
+     */
+    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 = [];
@@ -692,6 +693,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.23.0",
+    "svelte-loader": "^2.13.6",
     "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
             ]);

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', () => {