Replace broken Svelte 2 HMR with the one from rixo

index.js

@@ -1,7 +1,7 @@
 const { relative } = require('path');
 const { getOptions } = require('loader-utils');
 
-const hotApi = require.resolve('./lib/hot-api.js');
+const makeHot = require('./lib/make-hot.js');
 
 const { compile, preprocess } = require('svelte/compiler');
 
@@ -20,30 +20,6 @@ const pluginOptions = {
 	markup: true
 };
 
-function makeHot(id, code, hotOptions) {
-	const options = JSON.stringify(hotOptions);
-	const replacement = `
-if (module.hot) {
-	const { configure, register, reload } = require('${posixify(hotApi)}');
-
-	module.hot.accept();
-
-	if (!module.hot.data) {
-		// initial load
-		configure(${options});
-		$2 = register(${id}, $2);
-	} else {
-		// hot update
-		$2 = reload(${id}, $2);
-	}
-}
-
-export default $2;
-`;
-
-	return code.replace(/(export default ([^;]*));/, () => replacement);
-}
-
 function posixify(file) {
 	return file.replace(/[/\\]/g, '/');
 }
@@ -120,7 +96,8 @@ module.exports = function(source, map) {
 			}
 		}
 
-		let { js, css, warnings } = normalize(compile(processed.toString(), compileOptions));
+		const compiled = compile(processed.toString(), compileOptions);
+		let { js, css, warnings } = normalize(compiled);
 
 		warnings.forEach(
 			options.onwarn
@@ -131,7 +108,7 @@ module.exports = function(source, map) {
 		if (options.hotReload && !isProduction && !isServer) {
 			const hotOptions = Object.assign({}, options.hotOptions);
 			const id = JSON.stringify(relative(process.cwd(), compileOptions.filename));
-			js.code = makeHot(id, js.code, hotOptions);
+			js.code = makeHot(id, js.code, hotOptions, compiled, source, compileOptions);
 		}
 
 		if (options.emitCss && css.code) {

lib/hot-api.js

@@ -1,51 +1,103 @@
-import { Registry, configure as configureProxy, createProxy } from 'svelte-dev-helper';
+import { makeApplyHmr } from 'svelte-hmr/runtime';
 
-let hotOptions = {
-	noPreserveState: false
-};
+// eslint-disable-next-line no-undef
+const g = typeof window !== 'undefined' ? window : global;
 
-export function configure(options) {
-	hotOptions = Object.assign(hotOptions, options);
-	configureProxy(hotOptions);
-}
+const globalKey =
+	typeof Symbol !== 'undefined'
+		? Symbol('SVELTE_LOADER_HOT')
+		: '__SVELTE_LOADER_HOT';
 
-export function register(id, component) {
+if (!g[globalKey]) {
+	// do updating refs counting to know when a full update has been applied
+	let updatingCount = 0;
 
-	//store original component in registry
-	Registry.set(id, {
-		rollback: null,
-		component,
-		instances: []
-	});
+	const notifyStart = () => {
+		updatingCount++;
+	};
 
-	//create the proxy itself
-	const proxy = createProxy(id);
+	const notifyError = reload => err => {
+		const errString = (err && err.stack) || err;
+		// eslint-disable-next-line no-console
+		console.error(
+			'[HMR] Failed to accept update (nollup compat mode)',
+			errString
+		);
+		reload();
+		notifyEnd();
+	};
 
-	//patch the registry record with proxy constructor
-	const record = Registry.get(id);
-	record.proxy = proxy;
-	Registry.set(id, record);
+	const notifyEnd = () => {
+		updatingCount--;
+		if (updatingCount === 0) {
+			// NOTE this message is important for timing in tests
+			// eslint-disable-next-line no-console
+			console.log('[HMR:Svelte] Up to date');
+		}
+	};
 
-	return proxy;
+	g[globalKey] = {
+		hotStates: {},
+		notifyStart,
+		notifyError,
+		notifyEnd,
+	};
 }
 
-export function reload(id, component) {
+const runAcceptHandlers = acceptHandlers => {
+	const queue = [...acceptHandlers];
+	const next = () => {
+		const cur = queue.shift();
+		if (cur) {
+			return cur(null).then(next);
+		} else {
+			return Promise.resolve(null);
+		}
+	};
+	return next();
+};
 
-	const record = Registry.get(id);
+export const applyHmr = makeApplyHmr(args => {
+	const { notifyStart, notifyError, notifyEnd } = g[globalKey];
+	const { m, reload } = args;
 
-	//keep reference to previous version to enable rollback
-	record.rollback = record.component;
+	let acceptHandlers = (m.hot.data && m.hot.data.acceptHandlers) || [];
+	let nextAcceptHandlers = [];
 
-	//replace component in registry with newly loaded component
-	record.component = component;
+	m.hot.dispose(data => {
+		data.acceptHandlers = nextAcceptHandlers;
+	});
 
-	Registry.set(id, record);
+	const dispose = (...args) => m.hot.dispose(...args);
 
-	//re-render the proxy instances
-	record.instances.slice().forEach(function(instance) {
-		instance && instance._rerender();
+	const accept = handler => {
+		if (nextAcceptHandlers.length === 0) {
+			m.hot.accept();
+		}
+		nextAcceptHandlers.push(handler);
+	};
+
+	const check = status => {
+		if (status === 'ready') {
+			notifyStart();
+		} else if (status === 'idle') {
+			runAcceptHandlers(acceptHandlers)
+				.then(notifyEnd)
+				.catch(notifyError(reload));
+		}
+	};
+
+	m.hot.addStatusHandler(check);
+
+	m.hot.dispose(() => {
+		m.hot.removeStatusHandler(check);
 	});
 
-	//return the original proxy constructor that was `register()`-ed
-	return record.proxy;
-}
+	const hot = {
+		data: m.hot.data,
+		dispose,
+		accept,
+	};
+
+	return Object.assign({}, args, { hot });
+});

lib/make-hot.js

@@ -0,0 +1,12 @@
+const { walk } = require('svelte/compiler');
+const { createMakeHot } = require('svelte-hmr');
+
+const hotApi = require.resolve('./hot-api.js');
+
+const makeHot = createMakeHot({
+	walk,
+	meta: 'module',
+	hotApi,
+});
+
+module.exports = makeHot;

package.json

@@ -16,7 +16,8 @@
   ],
   "dependencies": {
     "loader-utils": "^1.1.0",
-    "svelte-dev-helper": "^1.1.9"
+    "svelte-dev-helper": "^1.1.9",
+    "svelte-hmr": "^0.12.2"
   },
   "devDependencies": {
     "chai": "^4.1.2",

test/loader.spec.js

@@ -307,7 +307,7 @@ describe('loader', () => {
 					function(err, code, map) {
 						expect(err).not.to.exist;
 
-						expect(code).not.to.contain('module.hot.accept();');
+						expect(code).not.to.contain('module && module.hot');
 					},
 					{}
 				)
@@ -320,8 +320,8 @@ describe('loader', () => {
 					function(err, code, map) {
 						expect(err).not.to.exist;
 
-						expect(code).to.contain('module.hot.accept();');
-						expect(code).not.to.contain('configure({"noPreserveState":true});');
+						expect(code).to.contain('module && module.hot');
+						expect(code).not.to.contain('"noPreserveState":true');
 					},
 					{ hotReload: true }
 				)
@@ -334,8 +334,8 @@ describe('loader', () => {
 					function(err, code, map) {
 						expect(err).not.to.exist;
 
-						expect(code).to.contain('module.hot.accept();');
-						expect(code).to.contain('configure({"noPreserveState":true});');
+						expect(code).to.contain('module && module.hot');
+						expect(code).to.contain('"noPreserveState":true');
 					},
 					{
 						hotReload: true,
@@ -353,7 +353,7 @@ describe('loader', () => {
 					function(err, code, map) {
 						expect(err).not.to.exist;
 
-						expect(code).not.to.contain('module.hot.accept();');
+						expect(code).not.to.contain('module && module.hot');
 					},
 					{
 						hotReload: true,
@@ -369,7 +369,7 @@ describe('loader', () => {
 					function(err, code, map) {
 						expect(err).not.to.exist;
 
-						expect(code).to.contain(require.resolve('../lib/hot-api.js').replace(/[/\\]/g, '/'));
+						expect(code).to.contain(`lib/hot-api.js`);
 					},
 					{ hotReload: true }
 				)