add svelte support to webpack encore

Author: zairigimad

index.js

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

lib/WebpackConfig.js

@@ -114,6 +114,7 @@ class WebpackConfig {
         this.useBabelTypeScriptPreset = false;
         this.useWebpackNotifier = false;
         this.useHandlebarsLoader = false;
+        this.useSvelte = false;
 
         // Features/Loaders options
         this.copyFilesConfigs = [];
@@ -696,6 +697,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

@@ -97,7 +97,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: {}
         };
 
@@ -399,6 +399,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

@@ -147,6 +147,14 @@ const features = {
             { name: 'handlebars-loader', enforce_version: true }
         ],
         description: 'load Handlebars files'
+    },
+    svelte: {
+        method: 'enableSvelte()',
+        packages: [
+            { name: 'svelte', enforce_version: true },
+            { name: 'svelte-loader', enforce_version: true }
+        ],
+        description: 'process Svelte JS files'
     }
 };
 

package.json

@@ -90,6 +90,8 @@
     "strip-ansi": "^6.0.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
+    "svelte": "^3.23.0",
+    "svelte-loader": "^2.13.6",
     "ts-loader": "^5.3.0",
     "typescript": ">=2.9",
     "url-loader": "^4.0.0",

test/WebpackConfig.js

@@ -1200,12 +1200,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

@@ -272,6 +272,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', () => {

yarn.lock

@@ -8386,6 +8386,24 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+svelte-dev-helper@^1.1.9:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/svelte-dev-helper/-/svelte-dev-helper-1.1.9.tgz#7d187db5c6cdbbd64d75a32f91b8998bde3273c3"
+  integrity sha1-fRh9tcbNu9ZNdaMvkbiZi94yc8M=
+
+svelte-loader@^2.13.6:
+  version "2.13.6"
+  resolved "https://registry.yarnpkg.com/svelte-loader/-/svelte-loader-2.13.6.tgz#3d5efd5886c2bab034606d5af0cce659da3ee555"
+  integrity sha512-7uf7ZQdPAl+lwb1ldUYJFY/raZRUCuaNx7lMJ+F16jrVwN1+c35C2pBMGIY0mCqdKm5sm45jqELJJLGM3UG9Pw==
+  dependencies:
+    loader-utils "^1.1.0"
+    svelte-dev-helper "^1.1.9"
+
+svelte@^3.23.0:
+  version "3.23.0"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.23.0.tgz#bbcd6887cf588c24a975b14467455abfff9acd3f"
+  integrity sha512-cnyd96bK/Nw5DnYuB1hzm5cl6+I1fpmdKOteA7KLzU9KGLsLmvWsSkSKbcntzODCLmSySN3HjcgTHRo6/rJNTw==
+
 svg-tags@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"