From 66cf57b0bdde990c3791f3b5490b213888e5ca4d Mon Sep 17 00:00:00 2001
From: Non <19non91@gmail.com>
Date: Mon, 11 Jan 2021 18:25:00 +0200
Subject: [PATCH] Make it work with Webpack 5, use webpack-virtual-modules as a
 dependency

---
 README.md            | 43 +++++++++++++++------
 index.js             | 32 +++++++++++-----
 lib/virtual-stats.js | 89 --------------------------------------------
 lib/virtual.js       | 89 --------------------------------------------
 package.json         |  5 ++-
 5 files changed, 57 insertions(+), 201 deletions(-)
 delete mode 100644 lib/virtual-stats.js
 delete mode 100644 lib/virtual.js

diff --git a/README.md b/README.md
index 61d5a0a1..04d12552 100644
--- a/README.md
+++ b/README.md
@@ -33,6 +33,13 @@ Configure inside your `webpack.config.js`:
         test: /\.(html|svelte)$/,
         exclude: /node_modules/,
         use: 'svelte-loader'
+      },
+      {
+        // required to prevent errors from Svelte on Webpack 5+
+        test: /svelte\/.*\.mjs$/,
+        resolve: {
+          fullySpecified: false
+        }
       }
       ...
     ]
@@ -54,9 +61,13 @@ Webpack's [`resolve.mainFields`](https://webpack.js.org/configuration/resolve/#r
 
 If your Svelte components contain `<style>` tags, by default the compiler will add JavaScript that injects those styles into the page when the component is rendered. That's not ideal, because it adds weight to your JavaScript, prevents styles from being fetched in parallel with your code, and can even cause CSP violations.
 
-A better option is to extract the CSS into a separate file. Using the `emitCss` option as shown below would cause a virtual CSS file to be emitted for each Svelte component. The resulting file is then imported by the component, thus following the standard Webpack compilation flow. Add [ExtractTextPlugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) to the mix to output the css to a separate file.
+A better option is to extract the CSS into a separate file. Using the `emitCss` option as shown below would cause a virtual CSS file to be emitted for each Svelte component. The resulting file is then imported by the component, thus following the standard Webpack compilation flow. Add [MiniCssExtractPlugin](https://webpack.js.org/plugins/mini-css-extract-plugin/) to the mix to output the css to a separate file.
+
+Make sure to add SveltePlugin like shown below, which allows emitting virtual CSS files. It is a wrapper around webpack-virtual-modules, connected to the svelte-loader.
 
 ```javascript
+  const SveltePlugin = require('svelte-loader').plugin;
+  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   ...
   module: {
     rules: [
@@ -73,17 +84,20 @@ A better option is to extract the CSS into a separate file. Using the `emitCss`
       },
       {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: 'css-loader',
-        }),
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader'
+        ]
       },
       ...
     ]
   },
   ...
   plugins: [
-    new ExtractTextPlugin('styles.css'),
+    new MiniCssExtractPlugin({
+      filename: '[name].css'
+    }),
+    new SveltePlugin(),
     ...
   ]
   ...
@@ -115,19 +129,26 @@ module.exports = {
             },
           },
         },
+
         {
           test: /\.css$/,
-          use: ExtractTextPlugin.extract({
-            fallback: 'style-loader',
-            use: [{ loader: 'css-loader', options: { sourceMap: true } }],
-          }),
+          use: [
+            MiniCssExtractPlugin.loader,
+            {
+              loader: 'css-loader',
+              options: { sourceMap: true }
+            }
+          ]
         },
         ...
       ]
     },
     ...
     plugins: [
-      new ExtractTextPlugin('styles.css'),
+      new MiniCssExtractPlugin({
+        filename: '[name].css'
+      }),
+      new SveltePlugin(),
       ...
     ]
     ...
diff --git a/index.js b/index.js
index 320a12ce..905a15d4 100644
--- a/index.js
+++ b/index.js
@@ -1,6 +1,6 @@
 const { basename, extname, relative } = require('path');
 const { getOptions } = require('loader-utils');
-const VirtualModules = require('./lib/virtual');
+const VirtualModules = require('webpack-virtual-modules');
 
 const hotApi = require.resolve('./lib/hot-api.js');
 
@@ -96,13 +96,9 @@ function deprecatePreprocessOptions(options) {
 	options.preprocess = options.preprocess || preprocessOptions;
 }
 
-const virtualModuleInstances = new Map();
-
-module.exports = function(source, map) {
-	if (this._compiler && !virtualModuleInstances.has(this._compiler)) {
-		virtualModuleInstances.set(this._compiler, new VirtualModules(this._compiler));
-	}
+let virtualModuleInstances = new WeakMap();
 
+function loader(source, map) {
 	const virtualModules = virtualModuleInstances.get(this._compiler);
 
 	this.cacheable();
@@ -169,9 +165,14 @@ module.exports = function(source, map) {
 			css.code += '\n/*# sourceMappingURL=' + css.map.toUrl() + '*/';
 			js.code = js.code + `\nimport '${posixify(cssFilepath)}';\n`;
 
-			if (virtualModules) {
-				virtualModules.writeModule(cssFilepath, css.code);
+			if (!virtualModules) {
+				throw new Error(
+					'You should add SveltePlugin to the plugins array of your ' +
+					'webpack.config.js to be able to emit css'
+				);
 			}
+
+			virtualModules.writeModule(cssFilepath, css.code);
 		}
 
 		callback(null, js.code, js.map);
@@ -180,4 +181,15 @@ module.exports = function(source, map) {
 		// context when logging to console
 		callback(new Error(`${err.name}: ${err.toString()}`));
 	});
-};
+}
+
+class SveltePlugin extends VirtualModules {
+	apply(compiler) {
+		virtualModuleInstances.set(compiler, this);
+		super.apply(compiler);
+	}
+}
+
+loader.plugin = SveltePlugin;
+
+module.exports = loader;
diff --git a/lib/virtual-stats.js b/lib/virtual-stats.js
deleted file mode 100644
index 4e1b1dee..00000000
--- a/lib/virtual-stats.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * Used to cache a stats object for the virtual file.
- * Extracted from the `mock-fs` package.
- *
- * @author Tim Schaub http://tschaub.net/
- * @link https://github.com/tschaub/mock-fs/blob/master/lib/binding.js
- * @link https://github.com/tschaub/mock-fs/blob/master/license.md
- */
-
-/* eslint-disable no-restricted-syntax, no-prototype-builtins, no-continue */
-/* eslint-disable no-bitwise, no-underscore-dangle */
-
-'use strict';
-
-var constants = require('constants');
-
-/**
- * Create a new stats object.
- * @param {Object} config Stats properties.
- * @constructor
- */
-function VirtualStats(config) {
-	for (var key in config) {
-		if (!config.hasOwnProperty(key)) {
-			continue;
-		}
-		this[key] = config[key];
-	}
-}
-
-/**
- * Check if mode indicates property.
- * @param {number} property Property to check.
- * @return {boolean} Property matches mode.
- */
-VirtualStats.prototype._checkModeProperty = function(property) {
-	return (this.mode & constants.S_IFMT) === property;
-};
-
-/**
- * @return {Boolean} Is a directory.
- */
-VirtualStats.prototype.isDirectory = function() {
-	return this._checkModeProperty(constants.S_IFDIR);
-};
-
-/**
- * @return {Boolean} Is a regular file.
- */
-VirtualStats.prototype.isFile = function() {
-	return this._checkModeProperty(constants.S_IFREG);
-};
-
-/**
- * @return {Boolean} Is a block device.
- */
-VirtualStats.prototype.isBlockDevice = function() {
-	return this._checkModeProperty(constants.S_IFBLK);
-};
-
-/**
- * @return {Boolean} Is a character device.
- */
-VirtualStats.prototype.isCharacterDevice = function() {
-	return this._checkModeProperty(constants.S_IFCHR);
-};
-
-/**
- * @return {Boolean} Is a symbolic link.
- */
-VirtualStats.prototype.isSymbolicLink = function() {
-	return this._checkModeProperty(constants.S_IFLNK);
-};
-
-/**
- * @return {Boolean} Is a named pipe.
- */
-VirtualStats.prototype.isFIFO = function() {
-	return this._checkModeProperty(constants.S_IFIFO);
-};
-
-/**
- * @return {Boolean} Is a socket.
- */
-VirtualStats.prototype.isSocket = function() {
-	return this._checkModeProperty(constants.S_IFSOCK);
-};
-
-module.exports = VirtualStats;
diff --git a/lib/virtual.js b/lib/virtual.js
deleted file mode 100644
index 307e2c27..00000000
--- a/lib/virtual.js
+++ /dev/null
@@ -1,89 +0,0 @@
-var VirtualStats = require('./virtual-stats');
-
-var inode = 45000000;
-
-// Adapted from https://github.com/sysgears/webpack-virtual-modules
-// MIT Licensed https://github.com/sysgears/webpack-virtual-modules/blob/master/LICENSE
-
-/**
- * @param {Compiler} compiler - the webpack compiler
- */
-function VirtualModulesPlugin(compiler) {
-	this.compiler = compiler;
-
-	if (!compiler.inputFileSystem._writeVirtualFile) {
-		var originalPurge = compiler.inputFileSystem.purge;
-
-		compiler.inputFileSystem.purge = function() {
-			if (originalPurge) {
-				originalPurge.call(this, arguments);
-			}
-			if (this._virtualFiles) {
-				Object.keys(this._virtualFiles).forEach(
-					function(file) {
-						var data = this._virtualFiles[file];
-						setData(this._statStorage, file, [null, data.stats]);
-						setData(this._readFileStorage, file, [null, data.contents]);
-					}.bind(this)
-				);
-			}
-		};
-
-		compiler.inputFileSystem._writeVirtualFile = function(file, stats, contents) {
-			this._virtualFiles = this._virtualFiles || {};
-			this._virtualFiles[file] = { stats: stats, contents: contents };
-			setData(this._statStorage, file, [null, stats]);
-			setData(this._readFileStorage, file, [null, contents]);
-		};
-	}
-
-	const watchRunHook = (watcher, callback) => {
-		this._watcher = watcher.compiler || watcher;
-		callback();
-	};
-
-	if (compiler.hooks) {
-		compiler.hooks.watchRun.tapAsync('VirtualModulesPlugin', watchRunHook);
-	} else {
-		compiler.plugin('watch-run', watchRunHook);
-	}
-}
-
-VirtualModulesPlugin.prototype.writeModule = function(filePath, contents) {
-	var len = contents ? contents.length : 0;
-	var time = new Date();
-	var timeMs = time.getTime();
-
-	var stats = new VirtualStats({
-		dev: 8675309,
-		ino: inode++,
-		mode: 33188,
-		nlink: 0,
-		uid: 1000,
-		gid: 1000,
-		rdev: 0,
-		size: len,
-		blksize: 4096,
-		blocks: Math.floor(len / 4096),
-		atimeMs: timeMs,
-		mtimeMs: timeMs,
-		ctimeMs: timeMs,
-		birthtimeMs: timeMs,
-		atime: time,
-		mtime: time,
-		ctime: time,
-		birthtime: time
-	});
-
-	this.compiler.inputFileSystem._writeVirtualFile(filePath, stats, contents);
-};
-
-function setData(storage, key, value) {
-	if (storage.data instanceof Map) {
-		storage.data.set(key, value);
-	} else {
-		storage.data[key] = value;
-	}
-}
-
-module.exports = VirtualModulesPlugin;
diff --git a/package.json b/package.json
index eb043f8a..6ad33169 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,8 @@
   ],
   "dependencies": {
     "loader-utils": "^1.1.0",
-    "svelte-dev-helper": "^1.1.9"
+    "svelte-dev-helper": "^1.1.9",
+    "webpack-virtual-modules": "^0.4.1"
   },
   "devDependencies": {
     "chai": "^4.1.2",
@@ -25,7 +26,7 @@
     "mocha": "^5.2.0",
     "sinon": "^6.1.5",
     "sinon-chai": "^3.2.0",
-    "svelte": "^3.0.0-beta.5"
+    "svelte": "^3.0.0"
   },
   "peerDependencies": {
     "svelte": ">1.44.0"