Merge pull request #446 from mrkishi/escaping-issues

Fix filenames

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "sapper",
-  "version": "0.20.0",
+  "version": "0.20.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

src/core/create_compilers/extract_css.ts

@@ -4,6 +4,7 @@ import hash from 'string-hash';
 import * as codec from 'sourcemap-codec';
 import { PageComponent, Dirs } from '../../interfaces';
 import { CompileResult } from './interfaces';
+import { posixify } from '../utils'
 
 const inline_sourcemap_header = 'data:application/json;charset=utf-8;base64,';
 
@@ -75,7 +76,7 @@ export default function extract_css(client_result: CompileResult, components: Pa
 	const component_owners = new Map();
 	client_result.chunks.forEach(chunk => {
 		chunk.modules.forEach(module => {
-			const component = path.relative(dirs.routes, module);
+			const component = posixify(path.relative(dirs.routes, module));
 			component_owners.set(component, chunk);
 		});
 	});

src/core/create_manifests.ts

@@ -1,7 +1,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import glob from 'tiny-glob/sync.js';
-import { posixify, write_if_changed } from './utils';
+import { posixify, stringify, write_if_changed } from './utils';
 import { dev, locations } from '../config';
 import { Page, PageComponent, ServerRoute, ManifestData } from '../interfaces';
 
@@ -47,10 +47,10 @@ export function create_serviceworker_manifest({ manifest_data, client_files }: {
 		// This file is generated by Sapper — do not edit it!
 		export const timestamp = ${Date.now()};
 
-		export const files = [\n\t${files.map((x: string) => `"${x}"`).join(',\n\t')}\n];
+		export const files = [\n\t${files.map((x: string) => stringify(x)).join(',\n\t')}\n];
 		export { files as assets }; // legacy
 
-		export const shell = [\n\t${client_files.map((x: string) => `"${x}"`).join(',\n\t')}\n];
+		export const shell = [\n\t${client_files.map((x: string) => stringify(x)).join(',\n\t')}\n];
 
 		export const routes = [\n\t${manifest_data.pages.map((r: Page) => `{ pattern: ${r.pattern} }`).join(',\n\t')}\n];
 	`.replace(/^\t\t/gm, '').trim();
@@ -72,8 +72,8 @@ function generate_client(
 
 	let code = `
 		// This file is generated by Sapper — do not edit it!
-		import root from '${get_file(path_to_routes, manifest_data.root)}';
-		import error from '${posixify(`${path_to_routes}/_error.html`)}';
+		import root from ${stringify(get_file(path_to_routes, manifest_data.root))};
+		import error from ${stringify(posixify(`${path_to_routes}/_error.html`))};
 
 		const d = decodeURIComponent;
 
@@ -85,8 +85,8 @@ function generate_client(
 			const source = get_file(path_to_routes, component);
 
 			return `const ${component.name} = {
-			js: () => import(${annotation}'${source}'),
-			css: "__SAPPER_CSS_PLACEHOLDER:${component.file}__"
+			js: () => import(${annotation}${stringify(source)}),
+			css: "__SAPPER_CSS_PLACEHOLDER:${stringify(component.file, false)}__"
 		};`;
 		}).join('\n')}
 
@@ -127,7 +127,7 @@ function generate_client(
 
 		code += `
 
-			import('${sapper_dev_client}').then(client => {
+			import(${stringify(sapper_dev_client)}).then(client => {
 				client.connect(${dev_port});
 			});`.replace(/^\t{3}/gm, '');
 	}
@@ -141,11 +141,11 @@ function generate_server(
 ) {
 	const imports = [].concat(
 		manifest_data.server_routes.map(route =>
-			`import * as ${route.name} from '${posixify(`${path_to_routes}/${route.file}`)}';`),
+			`import * as ${route.name} from ${stringify(posixify(`${path_to_routes}/${route.file}`))};`),
 		manifest_data.components.map(component =>
-			`import ${component.name} from '${get_file(path_to_routes, component)}';`),
-		`import root from '${get_file(path_to_routes, manifest_data.root)}';`,
-		`import error from '${posixify(`${path_to_routes}/_error.html`)}';`
+			`import ${component.name} from ${stringify(get_file(path_to_routes, component))};`),
+		`import root from ${stringify(get_file(path_to_routes, manifest_data.root))};`,
+		`import error from ${stringify(posixify(`${path_to_routes}/_error.html`))};`
 	);
 
 	let code = `
@@ -176,7 +176,7 @@ function generate_server(
 
 							const props = [
 								`name: "${part.component.name}"`,
-								`file: "${part.component.file}"`,
+								`file: ${stringify(part.component.file)}`,
 								`component: ${part.component.name}`
 							];
 

src/core/utils.ts

@@ -14,6 +14,11 @@ export function posixify(file: string) {
 	return file.replace(/[/\\]/g, '/');
 }
 
+export function stringify(string: string, includeQuotes: boolean = true) {
+	const quoted = JSON.stringify(string);
+	return includeQuotes ? quoted : quoted.slice(1, -1);
+}
+
 export function fudge_mtime(file: string) {
 	// need to fudge the mtime so that webpack doesn't go doolally
 	const { atime, mtime } = fs.statSync(file);