-> v0.20.4

Enable debugging in Chrome and VS Code - fixes #435

CHANGELOG.md

@@ -1,5 +1,16 @@
 # sapper changelog
 
+## 0.20.4
+
+* Fix legacy build CSS ([#439](https://github.com/sveltejs/sapper/issues/439))
+* Enable debugging in Chrome and VSCode ([#435](https://github.com/sveltejs/sapper/issues/435))
+
+## 0.20.3
+
+* Inject `nonce` attribute if `res.locals.nonce` is present ([#424](https://github.com/sveltejs/sapper/pull/424))
+* Prevent service worker caching ([#428](https://github.com/sveltejs/sapper/pull/428))
+* Consistent caching for HTML responses ([#429](https://github.com/sveltejs/sapper/pull/429))
+
 ## 0.20.2
 
 * Add `immutable` cache control header for hashed assets ([#425](https://github.com/sveltejs/sapper/pull/425))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sapper",
-  "version": "0.20.2",
+  "version": "0.20.4",
   "description": "Military-grade apps, engineered by Svelte",
   "main": "dist/middleware.js",
   "bin": {
@@ -74,6 +74,7 @@
     "test": "mocha --opts mocha.opts",
     "pretest": "npm run build",
     "build": "rm -rf dist && rollup -c",
+    "prepare": "npm run build",
     "dev": "rollup -cw",
     "prepublishOnly": "npm test",
     "update_mime_types": "curl http://svn.apache.org/repos/asf/httpd/httpd/trunk/docs/conf/mime.types | grep -e \"^[^#]\" > src/middleware/mime-types.md"

src/api/build.ts

@@ -79,7 +79,8 @@ async function execute(emitter: EventEmitter, opts: Opts, dirs: Dirs) {
 			// TODO duration/warnings
 			result: client_result
 		});
-
+		
+		client_result.to_json(manifest_data, dirs);
 		build_info.legacy_assets = client_result.assets;
 		delete process.env.SAPPER_LEGACY_BUILD;
 	}

src/api/dev.ts

@@ -36,6 +36,8 @@ class Watcher extends EventEmitter {
 	live: boolean;
 	hot: boolean;
 
+	devtools_port: number;
+
 	dev_server: DevServer;
 	proc: child_process.ChildProcess;
 	filewatchers: Array<{ close: () => void }>;
@@ -57,6 +59,7 @@ class Watcher extends EventEmitter {
 		'dev-port': dev_port,
 		live,
 		hot,
+		'devtools-port': devtools_port,
 		bundler,
 		webpack = 'webpack',
 		rollup = 'rollup',
@@ -68,6 +71,7 @@ class Watcher extends EventEmitter {
 		'dev-port': number,
 		live: boolean,
 		hot: boolean,
+		'devtools-port': number,
 		bundler?: string,
 		webpack: string,
 		rollup: string,
@@ -84,6 +88,8 @@ class Watcher extends EventEmitter {
 		this.live = live;
 		this.hot = hot;
 
+		this.devtools_port = devtools_port;
+
 		this.filewatchers = [];
 
 		this.current_build = {
@@ -129,6 +135,9 @@ class Watcher extends EventEmitter {
 
 		if (!this.dev_port) this.dev_port = await ports.find(10000);
 
+		// Chrome looks for debugging targets on ports 9222 and 9229 by default
+		if (!this.devtools_port) this.devtools_port = await ports.find(9222);
+
 		let manifest_data: ManifestData;
 
 		try {
@@ -238,12 +247,21 @@ class Watcher extends EventEmitter {
 						restart();
 					}
 
+					// we need to give the child process its own DevTools port,
+					// otherwise Node will try to use the parent's (and fail)
+					const debugArgRegex = /--inspect(?:-brk|-port)?|--debug-port/;
+					const execArgv = process.execArgv.slice();
+					if (execArgv.some((arg: string) => !!arg.match(debugArgRegex))) {
+						execArgv.push(`--inspect-port=${this.devtools_port}`);
+					}
+
 					this.proc = child_process.fork(`${dest}/server.js`, [], {
 						cwd: process.cwd(),
 						env: Object.assign({
 							PORT: this.port
 						}, process.env),
-						stdio: ['ipc']
+						stdio: ['ipc'],
+						execArgv
 					});
 
 					this.proc.stdout.on('data', chunk => {

src/core/create_compilers/extract_css.ts

@@ -170,6 +170,7 @@ export default function extract_css(client_result: CompileResult, components: Pa
 	}
 
 	const main = client_result.assets.main;
+	if (process.env.SAPPER_LEGACY_BUILD) main = `legacy/${main}`;
 	const entry = fs.readFileSync(`${dirs.dest}/client/${main}`, 'utf-8');
 
 	const replacements = new Map();

src/middleware.ts

@@ -136,17 +136,17 @@ export default function middleware(opts: {
 
 		fs.existsSync(path.join(output, 'index.html')) && serve({
 			pathname: '/index.html',
-			cache_control: 'max-age=600'
+			cache_control: dev() ? 'no-cache' : 'max-age=600'
 		}),
 
 		fs.existsSync(path.join(output, 'service-worker.js')) && serve({
 			pathname: '/service-worker.js',
-			cache_control: 'max-age=600'
+			cache_control: 'no-cache, no-store, must-revalidate'
 		}),
 
 		fs.existsSync(path.join(output, 'service-worker.js.map')) && serve({
 			pathname: '/service-worker.js.map',
-			cache_control: 'max-age=600'
+			cache_control: 'no-cache, no-store, must-revalidate'
 		}),
 
 		serve({
@@ -312,6 +312,7 @@ function get_page_handler(
 		 } = get_build_info();
 
 		res.setHeader('Content-Type', 'text/html');
+		res.setHeader('Cache-Control', dev() ? 'no-cache' : 'max-age=600');
 
 		// preload main.js and current route
 		// TODO detect other stuff we can preload? images, CSS, fonts?
@@ -524,9 +525,12 @@ function get_page_handler(
 				styles = (css && css.code ? `<style>${css.code}</style>` : '');
 			}
 
+			// users can set a CSP nonce using res.locals.nonce
+			const nonce_attr = (res.locals && res.locals.nonce) ? ` nonce="${res.locals.nonce}"` : '';
+
 			const body = template()
 				.replace('%sapper.base%', () => `<base href="${req.baseUrl}/">`)
-				.replace('%sapper.scripts%', () => `<script>${script}</script>`)
+				.replace('%sapper.scripts%', () => `<script${nonce_attr}>${script}</script>`)
 				.replace('%sapper.html%', () => html)
 				.replace('%sapper.head%', () => `<noscript id='sapper-head-start'></noscript>${head}<noscript id='sapper-head-end'></noscript>`)
 				.replace('%sapper.styles%', () => styles);

test/common/test.js

@@ -5,6 +5,7 @@ const Nightmare = require('nightmare');
 const walkSync = require('walk-sync');
 const rimraf = require('rimraf');
 const ports = require('port-authority');
+const fetch = require('node-fetch');
 
 Nightmare.action('page', {
 	title(done) {
@@ -800,15 +801,20 @@ function run({ mode, basepath = '' }) {
 		});
 
 		describe('headers', () => {
-			it('sets Content-Type and Link...preload headers', () => {
+			it('sets Content-Type, Link...preload, and Cache-Control headers', () => {
-				return capture(() => nightmare.goto(base)).then(requests => {
+				return capture(() => fetch(base)).then(responses => {
-					const { headers } = requests[0];
+					const { headers } = responses[0];
 
 					assert.equal(
 						headers['content-type'],
 						'text/html'
 					);
 
+					assert.equal(
+						headers['cache-control'],
+						'max-age=600'
+					);
+
 					const str = ['main', '.+?\\.\\d+']
 						.map(file => {
 							return `<${basepath}/client/[^/]+/${file}\\.js>;rel="preload";as="script"`;