Merge pull request #40 from sveltejs/0.8

Updates for 0.8

.gitignore

@@ -4,5 +4,6 @@ node_modules
 yarn.lock
 cypress/screenshots
 templates/.*
-dist
+export
+build
 app/manifest

app/service-worker.js

@@ -26,7 +26,7 @@ self.addEventListener('activate', event => {
 				if (key !== ASSETS) await caches.delete(key);
 			}
 
-			await self.clients.claim();
+			self.clients.claim();
 		})
 	);
 });
@@ -37,8 +37,11 @@ self.addEventListener('fetch', event => {
 	// don't try to handle e.g. data: URIs
 	if (!url.protocol.startsWith('http')) return;
 
+	// ignore dev server requests
+	if (url.hostname === self.location.hostname && url.port !== self.location.port) return;
+
 	// always serve assets and webpack-generated files from cache
-	if (cached.has(url.pathname)) {
+	if (url.host === self.location.host && cached.has(url.pathname)) {
 		event.respondWith(caches.match(event.request));
 		return;
 	}

app/template.html

@@ -10,9 +10,9 @@
 	<link rel='icon' type='image/png' href='/favicon.png'>
 
 	<script>
-		// if ('serviceWorker' in navigator) {
-		// 	navigator.serviceWorker.register('/service-worker.js');
-		// }
+		if ('serviceWorker' in navigator) {
+			navigator.serviceWorker.register('/service-worker.js');
+		}
 	</script>
 
 	<!-- Sapper generates a <style> tag containing critical CSS

package.json

@@ -6,7 +6,7 @@
     "dev": "sapper dev",
     "build": "sapper build",
     "export": "sapper export",
-    "start": "cross-env NODE_ENV=production node .sapper/server.js",
+    "start": "sapper start",
     "cy:run": "cypress run",
     "cy:open": "cypress open",
     "test": "run-p --race dev cy:run"
@@ -14,18 +14,14 @@
   "dependencies": {
     "compression": "^1.7.1",
     "cross-env": "^5.1.3",
-    "css-loader": "^0.28.7",
     "express": "^4.16.2",
-    "extract-text-webpack-plugin": "^3.0.2",
     "glob": "^7.1.2",
     "node-fetch": "^2.0.0",
     "npm-run-all": "^4.1.2",
-    "sapper": "^0.7.0",
+    "sapper": "^0.8.1",
     "serve-static": "^1.13.1",
-    "style-loader": "^0.20.1",
-    "svelte": "^1.51.1",
+    "svelte": "^1.56.0",
     "svelte-loader": "^2.3.3",
-    "uglifyjs-webpack-plugin": "^1.1.5",
-    "webpack": "^3.10.0"
+    "webpack": "^4.1.0"
   }
 }

routes/5xx.html

@@ -7,22 +7,15 @@
 </Layout>
 
 <style>
-	h1, p {
+	h1 {
 		text-align: center;
 		margin: 0 auto;
-	}
-
-	h1 {
 		font-size: 2.8em;
 		text-transform: uppercase;
 		font-weight: 700;
 		margin: 0 0 0.5em 0;
 	}
 
-	p {
-		margin: 1em auto;
-	}
-
 	@media (min-width: 480px) {
 		h1 {
 			font-size: 4em;

routes/index.html

@@ -6,7 +6,7 @@
 	<h1>Great success!</h1>
 
 	<figure>
-		<img src='/great-success.png'>
+		<img alt='Borat' src='/great-success.png'>
 		<figcaption>HIGH FIVE!</figcaption>
 	</figure>
 

webpack/client.config.js

@@ -1,15 +1,14 @@
 const webpack = require('webpack');
 const config = require('sapper/webpack/config.js');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 
-const isDev = config.dev;
+const mode = process.env.NODE_ENV;
+const isDev = mode === 'development';
 
 module.exports = {
 	entry: config.client.entry(),
 	output: config.client.output(),
 	resolve: {
-		extensions: ['.js', '.html']
+		extensions: ['.js', '.json', '.html']
 	},
 	module: {
 		rules: [
@@ -20,40 +19,17 @@ module.exports = {
 					loader: 'svelte-loader',
 					options: {
 						hydratable: true,
-						emitCss: !isDev,
 						cascade: false,
-						store: true
+						store: true,
+						hotReload: true
 					}
 				}
-			},
-			isDev && {
-				test: /\.css$/,
-				use: [
-					{ loader: 'style-loader' },
-					{ loader: 'css-loader' }
-				]
-			},
-			!isDev && {
-				test: /\.css$/,
-				use: ExtractTextPlugin.extract({
-					fallback: 'style-loader',
-					use: [{ loader: 'css-loader', options: { sourceMap:isDev } }]
-				})
 			}
-		].filter(Boolean)
+		]
 	},
+	mode,
 	plugins: [
-		new webpack.optimize.CommonsChunkPlugin({
-			minChunks: 2,
-			async: false,
-			children: true
-		})
-	].concat(isDev ? [
-		new webpack.HotModuleReplacementPlugin()
-	] : [
-		new ExtractTextPlugin('main.css'),
-		new webpack.optimize.ModuleConcatenationPlugin(),
-		new UglifyJSPlugin()
-	]).filter(Boolean),
+		isDev && new webpack.HotModuleReplacementPlugin()
+	].filter(Boolean),
 	devtool: isDev && 'inline-source-map'
 };

webpack/server.config.js

@@ -1,15 +1,14 @@
 const config = require('sapper/webpack/config.js');
-const webpack = require('webpack');
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const pkg = require('../package.json');
 
 module.exports = {
 	entry: config.server.entry(),
 	output: config.server.output(),
 	target: 'node',
 	resolve: {
-		extensions: ['.js', '.html']
+		extensions: ['.js', '.json', '.html']
 	},
+	externals: Object.keys(pkg.dependencies),
 	module: {
 		rules: [
 			{
@@ -26,5 +25,9 @@ module.exports = {
 				}
 			}
 		]
+	},
+	mode: process.env.NODE_ENV,
+	performance: {
+		hints: false // it doesn't matter if server.js is large
 	}
 };

webpack/service-worker.config.js

@@ -1,17 +1,7 @@
-const path = require('path');
 const config = require('sapper/webpack/config.js');
-const webpack = require('webpack');
 
 module.exports = {
-	entry: {
-		'service-worker': './app/service-worker.js'
-	},
-	output: {
-		path: path.resolve(`.sapper`),
-		filename: '[name].js',
-		chunkFilename: '[name].[id].[hash].js'
-	},
-	plugins: [
-		!config.dev && new webpack.optimize.ModuleConcatenationPlugin()
-	].filter(Boolean)
+	entry: config.serviceworker.entry(),
+	output: config.serviceworker.output(),
+	mode: process.env.NODE_ENV
 };