feature #781 add svelte support to webpack encore (zairigimad, weaverryan)

This PR was merged into the main branch.

Discussion
----------

add svelte support to webpack encore

> Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. [https://svelte.dev/](https://svelte.dev/)

The goal of this PR is to add support of Svelte to Webpack Encore.

- [ ] Update Documentation https://symfony.com/doc/current/frontend/encore/advanced-config.html#having-the-full-control-on-loaders-rules

Commits
-------

9f6056b updating svelte and -loader versions
3799313 add functional test for svelte
21d7bea fix CI
d28e57c add suggestion of package if not installed
bc15bb8 fix lint
f8d2dcc fix extension
5ff5b90 add svelte support to webpack encore

Author: weaverryan

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