Update Rollup to use HMR with Sapper

package.json

@@ -9,8 +9,8 @@
   },
   "private": true,
   "scripts": {
-    "dev": "sapper dev",
-    "build": "sapper build dist --legacy",
+    "dev": "sapper dev --port 3000",
+    "build": "sapper build dist",
     "export": "sapper export export",
     "start": "node __sapper__/build",
     "serve": "node server/server.js"
@@ -20,42 +20,41 @@
     "animejs": "^3.1.0",
     "bulma": "^0.8.0",
     "compression": "^1.7.4",
-    "dayjs": "^1.8.18",
+    "dayjs": "^1.8.19",
     "normalize.css": "^8.0.1",
     "polka": "^1.0.0-next.9",
     "shufflejs": "^5.2.3",
     "sirv": "^0.4.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.7",
-    "@babel/plugin-syntax-dynamic-import": "^7.7.4",
-    "@babel/plugin-transform-runtime": "^7.7.6",
-    "@babel/preset-env": "^7.7.7",
-    "@babel/runtime": "^7.7.7",
-    "@rollup/plugin-node-resolve": "^6.0.0",
-    "@rollup/plugin-replace": "^2.3.0",
-    "autoprefixer": "^9.7.3",
+    "@babel/core": "^7.8.4",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.8.3",
+    "@babel/preset-env": "^7.8.4",
+    "@babel/runtime": "^7.8.4",
+    "@rollup/plugin-commonjs": "^11.0.2",
+    "@rollup/plugin-node-resolve": "^7.1.1",
+    "@rollup/plugin-replace": "^2.3.1",
+    "autoprefixer": "^9.7.4",
     "eslint-plugin-svelte3": "^2.7.3",
-    "node-sass": "^4.13.0",
+    "node-sass": "^4.13.1",
     "postcss": "^7.0.26",
     "postcss-load-config": "^2.1.0",
     "postcss-preset-env": "^6.7.0",
-    "rollup": "^1.27.14",
+    "rollup": "^1.31.0",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-hot": "^0.0.10",
     "rollup-plugin-svelte": "^5.1.1",
-    "rollup-plugin-terser": "^5.1.3",
+    "rollup-plugin-svelte-hot": "^0.1.1",
+    "rollup-plugin-terser": "^5.2.0",
     "sapper": "^0.27.9",
-    "sass": "^1.24.0",
-    "svelte": "^3.16.7",
-    "svelte-preprocess": "^3.3.0"
+    "svelte": "^3.18.1",
+    "svelte-preprocess": "^3.4.0"
   },
   "browserslist": [
-    "ie >= 11",
-    "last 7 ff versions",
-    "last 7 chrome versions",
-    "safari >= 10",
-    "ios >= 11",
-    "android >= 7"
+    "> 0.5%",
+    "last 2 versions",
+    "not dead"
   ]
 }

postcss.config.js

@@ -1,35 +1,29 @@
+const pkg = require('./package.json')
 const dev = process.env.NODE_ENV === 'development'
 
-let config = {
-    plugins: {
+module.exports = () => ({
+    plugins: [
         // Preset Env
-        'postcss-preset-env': {
-
-        },
+        require('postcss-preset-env')({}),
 
         // Autoprefixer
-        autoprefixer: {
-
-        },
+        require('autoprefixer')({}),
 
         // Extract media queries
-        // 'postcss-combine-media-query': {
+        // require('postcss-combine-media-query')({}),
 
-        // }
-    }
-}
-
-// Production only
-// CSS Nano for production
-if (!dev) {
-    config.plugins.cssnano = {
+        // CSS Nano
+        !dev && require('cssnano')({
             preset: 'default',
             autoprefixer: true,
             discardComments: { removeAll: true },
             calc: { precision: 2 },
             safe: true
-    }
-}
+        }),
 
-// Export
-module.exports = config
+        // Banner
+        !dev && require('postcss-banner')({
+            banner: `${pkg.name} v${pkg.version} \nBy ${pkg.author.name} \n${pkg.author.url}`
+        })
+    ]
+})

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(),
 		],

src/client.js

@@ -1,5 +1,6 @@
 import * as sapper from '@sapper/app'
 
+// Start Sapper
 sapper.start({
 	target: document.getElementById('site')
 })

src/server.js

@@ -3,10 +3,12 @@ import polka from 'polka'
 import compression from 'compression'
 import * as sapper from '@sapper/server'
 
+// Define environment
 const { PORT, NODE_ENV } = process.env
 const dev = NODE_ENV === 'development'
 
-polka() // You can also use Express
+// Setup server
+polka()
 	.use(
 		compression({ threshold: 0 }),
 		sirv('static', { dev }),

src/service-worker.js

@@ -7,6 +7,7 @@ const ASSETS = `cache${timestamp}`
 const to_cache = shell.concat(files)
 const cached = new Set(to_cache)
 
+// Install
 self.addEventListener('install', event => {
 	event.waitUntil(
 		caches
@@ -18,6 +19,7 @@ self.addEventListener('install', event => {
 	)
 })
 
+// Activate
 self.addEventListener('activate', event => {
 	event.waitUntil(
 		caches.keys().then(async keys => {
@@ -31,6 +33,7 @@ self.addEventListener('activate', event => {
 	)
 })
 
+// Fetch
 self.addEventListener('fetch', event => {
 	if (event.request.method !== 'GET' || event.request.headers.has('range')) return