Update Rollup to use HMR with Sapper

rollup.config.js

@@ -1,66 +1,86 @@
 import resolve from '@rollup/plugin-node-resolve'
 import replace from '@rollup/plugin-replace'
-import commonjs from 'rollup-plugin-commonjs'
-import svelte from 'rollup-plugin-svelte'
+import commonjs from '@rollup/plugin-commonjs'
+// import svelte from 'rollup-plugin-svelte'
+import svelte from 'rollup-plugin-svelte-hot'
 import babel from 'rollup-plugin-babel'
+// import browsersync from 'rollup-plugin-browsersync'
+import hmr from 'rollup-plugin-hot'
 import sveltePreprocess from 'svelte-preprocess'
 import { terser } from 'rollup-plugin-terser'
 import config from 'sapper/config/rollup.js'
 import pkg from './package.json'
 
-// Define environment
+// Define environment and things
 const mode = process.env.NODE_ENV
 const dev = mode === 'development'
 const legacy = !!process.env.SAPPER_LEGACY_BUILD
+const hot = dev
 
+// Svelte
 const onwarn = (warning, onwarn) => (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) || onwarn(warning)
-const dedupe = importee => importee === 'svelte' || importee.startsWith('svelte/')
 
 // Preprocessors
 const preprocess = sveltePreprocess({
-	scss: {
-		includePaths: ['node_modules', 'src']
-	},
-	postcss: {
-		configFilePath: './'
-	}
+	scss: { includePaths: ['node_modules', 'src'] },
+	postcss: true
 })
 
 // Sapper Rollup config
 export default {
 	client: {
 		input: config.client.input(),
-		output: config.client.output(),
+		output: {
+			...config.client.output(),
+			...dev && { exports: 'named' }
+		},
 		experimentalCodeSplitting: true,
 		plugins: [
+			// Javascript
+			svelte({
+				// css: css => css.write('public/bundle.css'),
+				dev,
+				preprocess,
+				hydratable: true,
+				// emitCss: true,
+				...(!hot && {
+					css: css => {
+						css.write('public/bundle.css')
+					},
+				}),
+				hot: hot && {
+					// sapper-dev-client expects either webpack or rollup with no HMR, so
+					// we need to prevent it from doing full reloads with rollup
+					patchSapperDevClient: true,
+					// optimistic will try to recover from runtime errors during
+					// component init (instead of doing a full reload)
+					optimistic: true,
+				}
+			}),
 			replace({
 				'process.browser': true,
 				'process.env.NODE_ENV': JSON.stringify(mode)
 			}),
-			svelte({
-				css: css => {
-					css.write('public/bundle.css')
-				},
-				preprocess,
-				dev,
-				hydratable: true,
-				emitCss: true,
-			}),
 			resolve({
 				browser: true,
-				dedupe
+				extensions: ['.mjs', '.js', '.json', '.html', '.svelte', '.scss'],
+				dedupe: ['svelte']
 			}),
 			commonjs(),
-
-			legacy && babel({
+			legacy && !hot && babel({
 				extensions: ['.js', '.mjs', '.html', '.svelte'],
 				exclude: ['node_modules/@babel/**'],
 				runtimeHelpers: true
 			}),
+			hot && hmr({
+				public: '__sapper__/dev',
+				inMemory: true,
+			}),
 
+			// Compress Javascript
 			!dev && terser({
 				module: true
-			})
+			}),
 		],
 
 		onwarn,
@@ -75,13 +95,14 @@ export default {
 				'process.env.NODE_ENV': JSON.stringify(mode)
 			}),
 			svelte({
+				dev,
 				preprocess,
-				generate: 'ssr',
-				dev
+				generate: 'ssr'
 			}),
 			resolve({
 				browser: true,
-				dedupe
+				extensions: ['.mjs', '.js', '.json', '.html', '.svelte', '.scss'],
+				dedupe: ['svelte']
 			}),
 			commonjs(),
 		],