-> v0.22.10

no need to use basepath in <link>

CHANGELOG.md

@@ -1,5 +1,35 @@
 # sapper changelog
 
+## 0.22.10
+
+* Handle `sapper-noscroll` attribute on `<a>` elements ([#376](https://github.com/sveltejs/sapper/issues/376))
+* Fix CSS paths when using a base path ([#466](https://github.com/sveltejs/sapper/pull/466))
+
+## 0.22.9
+
+* Fix legacy builds ([#462](https://github.com/sveltejs/sapper/pull/462))
+
+## 0.22.8
+
+* Ensure CSS placeholders are overwritten ([#462](https://github.com/sveltejs/sapper/pull/462))
+
+## 0.22.7
+
+* Fix cookies ([#460](https://github.com/sveltejs/sapper/pull/460))
+
+## 0.22.6
+
+* Normalise chunk filenames on Windows ([#456](https://github.com/sveltejs/sapper/pull/456))
+* Load modules with credentials ([#458](https://github.com/sveltejs/sapper/pull/458))
+
+## 0.22.5
+
+* Fix `sapper dev`. Oops.
+
+## 0.22.4
+
+* Ensure launcher does not overwrite a module ([#455](https://github.com/sveltejs/sapper/pull/455))
+
 ## 0.22.3
 
 * Prevent server from accidentally importing dev client

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sapper",
-  "version": "0.22.3",
+  "version": "0.22.10",
   "description": "Military-grade apps, engineered by Svelte",
   "bin": {
     "sapper": "./sapper"

src/api/dev.ts

@@ -256,7 +256,7 @@ class Watcher extends EventEmitter {
 						execArgv.push(`--inspect-port=${this.devtools_port}`);
 					}
 
-					this.proc = child_process.fork(`${dest}/server.js`, [], {
+					this.proc = child_process.fork(`${dest}/server/server.js`, [], {
 						cwd: process.cwd(),
 						env: Object.assign({
 							PORT: this.port

src/api/export.ts

@@ -71,7 +71,7 @@ async function execute(emitter: EventEmitter, opts: Opts) {
 		message: `Crawling ${root.href}`
 	});
 
-	const proc = child_process.fork(path.resolve(`${opts.build}/server.js`), [], {
+	const proc = child_process.fork(path.resolve(`${opts.build}/server/server.js`), [], {
 		cwd: process.cwd(),
 		env: Object.assign({
 			PORT: port,

src/cli.ts

@@ -58,7 +58,7 @@ prog.command('build [dest]')
 				process.env.PORT = process.env.PORT || ${opts.port || 3000};
 
 				console.log('Starting server on port ' + process.env.PORT);
-				require('./server.js');
+				require('./server/server.js');
 			`.replace(/^\t+/gm, '').trim());
 
 			console.error(`\n> Finished in ${elapsed(start)}. Type ${colors.bold.cyan(`node ${dest}`)} to run the app.`);

src/core/create_compilers/RollupResult.ts

@@ -38,11 +38,18 @@ export default class RollupResult implements CompileResult {
 		// webpack, but we can have a route -> [chunk] map or something
 		this.assets = {};
 
-		compiler.chunks.forEach(chunk => {
-			if (compiler.input in chunk.modules) {
-				this.assets.main = chunk.fileName;
+		if (typeof compiler.input === 'string') {
+			compiler.chunks.forEach(chunk => {
+				if (compiler.input in chunk.modules) {
+					this.assets.main = chunk.fileName;
+				}
+			});
+		} else {
+			for (const name in compiler.input) {
+				const file = compiler.input[name];
+				this.assets[name] = compiler.chunks.find(chunk => file in chunk.modules).fileName;
 			}
-		});
+		}
 
 		this.summary = compiler.chunks.map(chunk => {
 			const size_color = chunk.code.length > 150000 ? colors.bold.red : chunk.code.length > 50000 ? colors.bold.yellow : colors.bold.white;

src/core/create_compilers/extract_css.ts

@@ -170,9 +170,8 @@ export default function extract_css(client_result: CompileResult, components: Pa
 		return null;
 	}
 
-	let main = client_result.assets.main;
-	if (process.env.SAPPER_LEGACY_BUILD) main = `legacy/${main}`;
-	const entry = fs.readFileSync(`${dirs.dest}/client/${main}`, 'utf-8');
+	let asset_dir = `${dirs.dest}/client`;
+	if (process.env.SAPPER_LEGACY_BUILD) asset_dir += '/legacy';
 
 	const replacements = new Map();
 
@@ -186,10 +185,10 @@ export default function extract_css(client_result: CompileResult, components: Pa
 				const output_file_name = chunk.file.replace(/\.js$/, '.css');
 
 				map.file = output_file_name;
-				map.sources = map.sources.map(source => path.relative(`${dirs.dest}/client`, source));
+				map.sources = map.sources.map(source => path.relative(`${asset_dir}`, source));
 
-				fs.writeFileSync(`${dirs.dest}/client/${output_file_name}`, `${code}\n/* sourceMappingURL=client/${output_file_name}.map */`);
-				fs.writeFileSync(`${dirs.dest}/client/${output_file_name}.map`, JSON.stringify(map, null, '  '));
+				fs.writeFileSync(`${asset_dir}/${output_file_name}`, `${code}\n/* sourceMappingURL=./${output_file_name}.map */`);
+				fs.writeFileSync(`${asset_dir}/${output_file_name}.map`, JSON.stringify(map, null, '  '));
 
 				return true;
 			}
@@ -205,11 +204,17 @@ export default function extract_css(client_result: CompileResult, components: Pa
 		result.chunks[component.file] = files;
 	});
 
-	const replaced = entry.replace(/["']__SAPPER_CSS_PLACEHOLDER:(.+?)__["']/g, (m, route) => {
-		return JSON.stringify(replacements.get(route));
-	});
+	fs.readdirSync(asset_dir).forEach(file => {
+		if (fs.statSync(`${asset_dir}/${file}`).isDirectory()) return;
 
-	fs.writeFileSync(`${dirs.dest}/client/${main}`, replaced);
+		const source = fs.readFileSync(`${asset_dir}/${file}`, 'utf-8');
+
+		const replaced = source.replace(/["']__SAPPER_CSS_PLACEHOLDER:(.+?)__["']/g, (m, route) => {
+			return JSON.stringify(replacements.get(route));
+		});
+
+		fs.writeFileSync(`${asset_dir}/${file}`, replaced);
+	});
 
 	const leftover = get_css_from_modules(Array.from(unaccounted_for));
 	if (leftover) {
@@ -220,10 +225,10 @@ export default function extract_css(client_result: CompileResult, components: Pa
 		const output_file_name = `main.${main_hash}.css`;
 
 		map.file = output_file_name;
-		map.sources = map.sources.map(source => path.relative(`${dirs.dest}/client`, source));
+		map.sources = map.sources.map(source => path.relative(asset_dir, source));
 
-		fs.writeFileSync(`${dirs.dest}/client/${output_file_name}`, `${code}\n/* sourceMappingURL=client/${output_file_name}.map */`);
-		fs.writeFileSync(`${dirs.dest}/client/${output_file_name}.map`, JSON.stringify(map, null, '  '));
+		fs.writeFileSync(`${asset_dir}/${output_file_name}`, `${code}\n/* sourceMappingURL=client/${output_file_name}.map */`);
+		fs.writeFileSync(`${asset_dir}/${output_file_name}.map`, JSON.stringify(map, null, '  '));
 
 		result.main = output_file_name;
 	}

src/core/create_compilers/index.ts

@@ -15,6 +15,13 @@ export default async function create_compilers(bundler: 'rollup' | 'webpack'): P
 		const config = await RollupCompiler.load_config();
 		validate_config(config, 'rollup');
 
+		normalize_rollup_config(config.client);
+		normalize_rollup_config(config.server);
+
+		if (config.serviceworker) {
+			normalize_rollup_config(config.serviceworker);
+		}
+
 		return {
 			client: new RollupCompiler(config.client),
 			server: new RollupCompiler(config.server),
@@ -41,4 +48,14 @@ function validate_config(config: any, bundler: 'rollup' | 'webpack') {
 	if (!config.client || !config.server) {
 		throw new Error(`${bundler}.config.js must export a { client, server, serviceworker? } object`);
 	}
-}
+}
+
+function normalize_rollup_config(config: any) {
+	if (typeof config.input === 'string') {
+		config.input = path.normalize(config.input);
+	} else {
+		for (const name in config.input) {
+			config.input[name] = path.normalize(config.input[name]);
+		}
+	}
+}

src/rollup.ts

@@ -24,12 +24,14 @@ export default {
 
 	server: {
 		input: () => {
-			return `${locations.src()}/server.js`
+			return {
+				server: `${locations.src()}/server.js`
+			};
 		},
 
 		output: () => {
 			return {
-				dir: locations.dest(),
+				dir: `${locations.dest()}/server`,
 				format: 'cjs',
 				sourcemap: dev()
 			};

src/webpack.ts

@@ -29,7 +29,7 @@ export default {
 
 		output: () => {
 			return {
-				path: locations.dest(),
+				path: `${locations.dest()}/server`,
 				filename: '[name].js',
 				chunkFilename: '[hash]/[name].[id].js',
 				libraryTarget: 'commonjs2'

templates/src/client/app.ts

@@ -106,16 +106,18 @@ export function scroll_state() {
 	};
 }
 
-export function navigate(target: Target, id: number): Promise<any> {
+export function navigate(target: Target, id: number, noscroll = false): Promise<any> {
 	if (id) {
 		// popstate or initial navigation
 		cid = id;
 	} else {
+		const current_scroll = scroll_state();
+
 		// clicked on a link. preserve scroll state
-		scroll_history[cid] = scroll_state();
+		scroll_history[cid] = current_scroll;
 
 		id = cid = ++uid;
-		scroll_history[cid] = { x: 0, y: 0 };
+		scroll_history[cid] = noscroll ? current_scroll : { x: 0, y: 0 };
 	}
 
 	cid = id;
@@ -340,7 +342,7 @@ export function prepare_page(target: Target): Promise<{
 }
 
 function load_css(chunk: string) {
-	const href = `${initial_data.baseUrl}client/${chunk}`;
+	const href = `client/${chunk}`;
 	if (document.querySelector(`link[href="${href}"]`)) return;
 
 	return new Promise((fulfil, reject) => {

templates/src/client/start/index.ts

@@ -103,7 +103,8 @@ function handle_click(event: MouseEvent) {
 
 	const target = select_route(url);
 	if (target) {
-		navigate(target, null);
+		const noscroll = a.hasAttribute('sapper-noscroll')
+		navigate(target, null, noscroll);
 		event.preventDefault();
 		history.pushState({ id: cid }, '', url.href);
 	}

templates/src/server/middleware/get_page_handler.ts

@@ -93,19 +93,21 @@ export function get_page_handler(
 					if (include_cookies) {
 						if (!opts.headers) opts.headers = {};
 
-						const str = []
-							.concat(
-								cookie.parse(req.headers.cookie || ''),
-								cookie.parse(opts.headers.cookie || ''),
-								cookie.parse(res.getHeader('Set-Cookie') || '')
-							)
-							.map(cookie => {
-								return Object.keys(cookie)
-									.map(name => `${name}=${encodeURIComponent(cookie[name])}`)
-									.join('; ');
-							})
-							.filter(Boolean)
-							.join(', ');
+						const cookies = Object.assign(
+							{},
+							cookie.parse(req.headers.cookie || ''),
+							cookie.parse(opts.headers.cookie || '')
+						);
+
+						const set_cookie = res.getHeader('Set-Cookie');
+						(Array.isArray(set_cookie) ? set_cookie : [set_cookie]).forEach(str => {
+							const match = /([^=]+)=([^;]+)/.exec(<string>str);
+							if (match) cookies[match[1]] = match[2];
+						});
+
+						const str = Object.keys(cookies)
+							.map(key => `${key}=${cookies[key]}`)
+							.join('; ');
 
 						opts.headers.cookie = str;
 					}
@@ -222,9 +224,9 @@ export function get_page_handler(
 			if (build_info.bundler === 'rollup') {
 				if (build_info.legacy_assets) {
 					const legacy_main = `${req.baseUrl}/client/legacy/${build_info.legacy_assets.main}`;
-					script += `(function(){try{eval("async function x(){}");var main="${main}"}catch(e){main="${legacy_main}"};try{new Function("import('"+main+"')")();}catch(e){var s=document.createElement("script");s.src="${req.baseUrl}/client/shimport@${build_info.shimport}.js";s.setAttribute("data-main",main);document.head.appendChild(s);}}());`;
+					script += `(function(){try{eval("async function x(){}");var main="${main}"}catch(e){main="${legacy_main}"};var s=document.createElement("script");try{new Function("if(0)import('')")();s.src=main;s.type="module";s.crossOrigin="use-credentials";}catch(e){s.src="${req.baseUrl}/client/shimport@${build_info.shimport}.js";s.setAttribute("data-main",main);}document.head.appendChild(s);}());`;
 				} else {
-					script += `try{new Function("import('${main}')")();}catch(e){var s=document.createElement("script");s.src="${req.baseUrl}/client/shimport@${build_info.shimport}.js";s.setAttribute("data-main","${main}");document.head.appendChild(s);}`;
+					script += `var s=document.createElement("script");try{new Function("if(0)import('')")();s.src="${main}";s.type="module";s.crossOrigin="use-credentials";}catch(e){s.src="${req.baseUrl}/client/shimport@${build_info.shimport}.js";s.setAttribute("data-main","${main}")}document.head.appendChild(s)`;
 				}
 			} else {
 				script += `</script><script src="${main}">`;

test/app/src/routes/blog/_posts.js

@@ -97,6 +97,33 @@ const posts = [
 			<p>Nellie is blowing them all AWAY. I will be a bigger and hairier mole than the one on your inner left thigh! I'll sacrifice anything for my children.</p>
 			<p>Up yours, granny! You couldn't handle it! Hey, Dad. Look at you. You're a year older…and a year closer to death. Buster: Oh yeah, I guess that's kind of funny. Bob Loblaw Law Blog. The guy runs a prison, he can have any piece of ass he wants.</p>
 
+			<p><a href="blog/another-long-post">clicking this link should reset scroll</a></p>
+			<p><a href="blog/another-long-post" sapper-noscroll>clicking this link should not affect scroll</a></p>
+
+			<h2 id='three'>Three</h2>
+			<p>I prematurely shot my wad on what was supposed to be a dry run, so now I'm afraid I have something of a mess on my hands. Dead Dove DO NOT EAT. Never once touched my per diem. I'd go to Craft Service, get some raw veggies, bacon, Cup-A-Soup…baby, I got a stew goin'. You're losing blood, aren't you? Gob: Probably, my socks are wet. Sure, let the little fruit do it. HUZZAH! Although George Michael had only got to second base, he'd gone in head first, like Pete Rose. I will pack your sweet pink mouth with so much ice cream you'll be the envy of every Jerry and Jane on the block!</p>
+			<p>Gosh Mom… after all these years, God's not going to take a call from you. Come on, this is a Bluth family celebration. It's no place for children.</p>
+			<p>And I wouldn't just lie there, if that's what you're thinking. That's not what I WAS thinking. Who? i just dont want him to point out my cracker ass in front of ann. When a man needs to prove to a woman that he's actually… When a man loves a woman… Heyyyyyy Uncle Father Oscar. [Stabbing Gob] White power! Gob: I'm white! Let me take off my assistant's skirt and put on my Barbra-Streisand-in-The-Prince-of-Tides ass-masking therapist pantsuit. In the mid '90s, Tobias formed a folk music band with Lindsay and Maebe which he called Dr. Funke's 100 Percent Natural Good Time Family Band Solution. The group was underwritten by the Natural Food Life Company, a division of Chem-Grow, an Allen Crayne acqusition, which was part of the Squimm Group. Their motto was simple: We keep you alive.</p>
+
+			<h2 id='four'>Four</h2>
+			<p>If you didn't have adult onset diabetes, I wouldn't mind giving you a little sugar. Everybody dance NOW. And the soup of the day is bread. Great, now I'm gonna smell to high heaven like a tuna melt!</p>
+			<p>That's how Tony Wonder lost a nut. She calls it a Mayonegg. Go ahead, touch the Cornballer. There's a new daddy in town. A discipline daddy.</p>
+		`
+	},
+
+	{
+		title: 'Another long post',
+		slug: 'another-long-post',
+		html: `
+			<h2 id='one'>One</h2>
+			<p>I'll have a vodka rocks. (Mom, it's breakfast time.) And a piece of toast. Let me out that Queen. Fried cheese… with club sauce.</p>
+			<p>Her lawyers are claiming the seal is worth $250,000. And that's not even including Buster's Swatch. This was a big get for God. What, so the guy we are meeting with can't even grow his own hair? COME ON! She's always got to wedge herself in the middle of us so that she can control everything. Yeah. Mom's awesome. It's, like, Hey, you want to go down to the whirlpool? Yeah, I don't have a husband. I call it Swing City. The CIA should've just Googled for his hideout, evidently. There are dozens of us! DOZENS! Yeah, like I'm going to take a whiz through this $5,000 suit. COME ON.</p>
+
+			<h2 id='two'>Two</h2>
+			<p>Tobias Fünke costume. Heart attack never stopped old big bear.</p>
+			<p>Nellie is blowing them all AWAY. I will be a bigger and hairier mole than the one on your inner left thigh! I'll sacrifice anything for my children.</p>
+			<p>Up yours, granny! You couldn't handle it! Hey, Dad. Look at you. You're a year older…and a year closer to death. Buster: Oh yeah, I guess that's kind of funny. Bob Loblaw Law Blog. The guy runs a prison, he can have any piece of ass he wants.</p>
+
 			<h2 id='three'>Three</h2>
 			<p>I prematurely shot my wad on what was supposed to be a dry run, so now I'm afraid I have something of a mess on my hands. Dead Dove DO NOT EAT. Never once touched my per diem. I'd go to Craft Service, get some raw veggies, bacon, Cup-A-Soup…baby, I got a stew goin'. You're losing blood, aren't you? Gob: Probably, my socks are wet. Sure, let the little fruit do it. HUZZAH! Although George Michael had only got to second base, he'd gone in head first, like Pete Rose. I will pack your sweet pink mouth with so much ice cream you'll be the envy of every Jerry and Jane on the block!</p>
 			<p>Gosh Mom… after all these years, God's not going to take a call from you. Come on, this is a Bluth family celebration. It's no place for children.</p>

test/app/src/routes/credentials/test.json.js

@@ -1,20 +1,15 @@
-export function get(req, res) {
-	const cookies = req.headers.cookie
-		? req.headers.cookie.split(/,\s+/).reduce((cookies, cookie) => {
-			const [pair] = cookie.split('; ');
-			const [name, value] = pair.split('=');
-			cookies[name] = value;
-			return cookies;
-		}, {})
-		: {};
+import cookie from 'cookie';
+
+export function get(req, res) {
+	if (req.headers.cookie) {
+		const cookies = cookie.parse(req.headers.cookie);
 
-	if (cookies.test) {
 		res.writeHead(200, {
 			'Content-Type': 'application/json'
 		});
 
 		res.end(JSON.stringify({
-			message: cookies.test
+			message: `a: ${cookies.a}, b: ${cookies.b}, max-age: ${cookies['max-age']}`
 		}));
 	} else {
 		res.writeHead(403, {

test/app/src/server.js

@@ -44,7 +44,7 @@ const middlewares = [
 
 	// set test cookie
 	(req, res, next) => {
-		res.setHeader('Set-Cookie', 'test=woohoo!; Max-Age=3600');
+		res.setHeader('Set-Cookie', ['a=1; Path=/', 'b=2; Path=/']);
 		next();
 	},
 

test/common/test.js

@@ -184,7 +184,7 @@ function run({ mode, basepath = '' }) {
 					assert.ok(fs.existsSync('__sapper__/build/index.js'));
 				}
 
-				proc = require('child_process').fork(`${dir}/server.js`, {
+				proc = require('child_process').fork(`${dir}/server/server.js`, {
 					cwd: process.cwd(),
 					env: {
 						NODE_ENV: mode,
@@ -623,7 +623,7 @@ function run({ mode, basepath = '' }) {
 				return nightmare.goto(`${base}/credentials?creds=include`)
 					.page.title()
 					.then(title => {
-						assert.equal(title, 'woohoo!');
+						assert.equal(title, 'a: 1, b: 2, max-age: undefined');
 					});
 			});
 
@@ -641,7 +641,7 @@ function run({ mode, basepath = '' }) {
 					.wait(100)
 					.page.title()
 					.then(title => {
-						assert.equal(title, 'woohoo!');
+						assert.equal(title, 'a: 1, b: 2, max-age: undefined');
 					});
 			});
 
@@ -795,6 +795,30 @@ function run({ mode, basepath = '' }) {
 						assert.equal(title, 'encöded');
 					});
 			});
+
+			it('resets scroll when a link is clicked', () => {
+				return nightmare.goto(`${base}/blog/a-very-long-post`)
+					.init()
+					.evaluate(() => window.scrollTo(0, 200))
+					.click('[href="blog/another-long-post"]')
+					.wait(100)
+					.evaluate(() => window.scrollY)
+					.then(scrollY => {
+						assert.equal(scrollY, 0);
+					});
+			});
+
+			it('preserves scroll when a link with sapper-noscroll is clicked', () => {
+				return nightmare.goto(`${base}/blog/a-very-long-post`)
+					.init()
+					.evaluate(() => window.scrollTo(0, 200))
+					.click('[href="blog/another-long-post"][sapper-noscroll]')
+					.wait(100)
+					.evaluate(() => window.scrollY)
+					.then(scrollY => {
+						assert.equal(scrollY, 200);
+					});
+			});
 		});
 
 		describe('headers', () => {