Fix file path issues

packages/react-server-cli/gulpfile.babel.js

@@ -1,6 +1,7 @@
 import eslint from "gulp-eslint";
 import gulp from "gulp";
 import babel from "gulp-babel";
+import jasmine from "gulp-jasmine";
 import logging from "react-server-gulp-module-tagger";
 
 gulp.task("default", () => {
@@ -23,8 +24,10 @@ gulp.task("eslint", [], () => {
         .pipe(eslint.failAfterError());
 });
 
-// there are no tests for this project :(
-gulp.task("test", ["eslint"]);
+gulp.task("test", ["default", "eslint"], () => {
+	return gulp.src("target/__tests__/**/*[Ss]pec.js")
+		.pipe(jasmine({}));
+});
 
 gulp.task("watch", () => {
 	gulp.watch("src/*.js", ['default']);

packages/react-server-cli/package.json

@@ -59,6 +59,9 @@
     "gulp": "^3.9.1",
     "gulp-babel": "^6.1.2",
     "gulp-eslint": "^3.0.1",
+    "gulp-jasmine": "^2.4.2",
+    "memory-stream": "0.0.3",
+    "mockery": "^2.0.0",
     "nsp": "^2.6.2",
     "react-hot-loader": "^1.3.1",
     "react-server-gulp-module-tagger": "^0.4.10",

packages/react-server-cli/src/__tests__/compileClient/compileClientSpec.js

@@ -0,0 +1,92 @@
+import fs from "fs";
+const MemoryStream = require('memory-stream');
+import path from "path";
+import mockery from "mockery";
+
+describe("compileClient", () => {
+	let mockFs,
+		writeWebpackCompatibleRoutesFile;
+
+	beforeAll(() => {
+		mockery.registerSubstitute('./callerDependency', './callerDependency-Mock');
+		mockery.enable({
+			useCleanCache: true,
+			warnOnUnregistered: false,
+		});
+
+		writeWebpackCompatibleRoutesFile = require("../../compileClient").writeWebpackCompatibleRoutesFile;
+	});
+
+	afterAll(() => {
+		mockery.disable();
+	});
+
+	describe("writes client routes file for Webpack", () => {
+		const pathStringTests = [
+			{
+				title: "apostrophes",
+				path: "PathWith'InIt.js",
+			},
+			{
+				title: "double quotes",
+				path: 'PathWith"InIt.js',
+			},
+			{
+				title: "windows style",
+				path: 'c:\\Path\\With\\InIt.js',
+			},
+			{
+				title: "spaces",
+				path: 'Path With Spaces.js',
+			},
+		];
+
+		beforeEach(() => {
+			mockFs = new MemoryStream();
+		});
+
+		afterEach(() => {
+			mockFs = null;
+		});
+
+		pathStringTests.map((test) => {
+			it("handles file paths with " + test.title, (finishTest) => {
+				spyOn(fs, 'writeFileSync').and.callFake((path, data) => {
+					mockFs.write(data);
+				});
+
+				const filePath = test.path;
+				const routes = {
+					"routes": {
+						"Homepage": {
+							"path": "/",
+							"page": filePath,
+						},
+					},
+				};
+
+				writeWebpackCompatibleRoutesFile(routes, ".", path.normalize("."), null, true, null);
+
+				const coreMiddlewareStringified = JSON.stringify(require.resolve("react-server-core-middleware"));
+				const filePathStringified = JSON.stringify(filePath);
+
+				// These four strings are important when using multiple platforms or strings with weird characters in them.
+				// If we're going to output something to a file and then import that file later, we'd better be darn sure
+				// it's all correctly formatted!  Apostrophes, quotes, and windows-style file path characters \ vs / are the worst!
+				const filePathRegexStrings = [
+					"var coreJsMiddleware = require(" + coreMiddlewareStringified + ").coreJsMiddleware;",
+					"var coreCssMiddleware = require(" + coreMiddlewareStringified + ").coreCssMiddleware;",
+					"require.ensure(" + filePathStringified + ", function() {",
+					"cb(unwrapEs6Module(require(" + filePathStringified + ")));",
+				];
+
+				const fileData = mockFs.toString();
+				filePathRegexStrings.map((regex) => {
+					expect(fileData).toMatch(regex.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"));
+				});
+
+				finishTest();
+			});
+		});
+	});
+});

packages/react-server-cli/src/callerDependency-Mock.js

@@ -0,0 +1,8 @@
+import lookup from "look-up";
+import path from "path";
+
+export default function callerDependency(dep) {
+	// TODO: We should grab stuff based on what the routes file would get out
+	// of `require.resolve(dep)`.  Using `process.cwd()` instead for now.
+	return lookup("packages/" + dep, {cwd: path.resolve(process.cwd() + '/..')});
+}

packages/react-server-cli/src/callerDependency.js

@@ -1,5 +1,6 @@
 import lookup from "look-up";
 
+// NOTE: if this function changes, make sure it also changes in the 'callerDependency-Mock.js' file as well.
 export default function callerDependency(dep) {
 	// TODO: We should grab stuff based on what the routes file would get out
 	// of `require.resolve(dep)`.  Using `process.cwd()` instead for now.

packages/react-server-cli/src/compileClient.js

@@ -268,18 +268,18 @@ function packageCodeForBrowser(entrypoints, outputDir, outputUrl, hot, minify, l
 }
 
 // writes out a routes file that can be used at runtime.
-function writeWebpackCompatibleRoutesFile(routes, routesDir, workingDirAbsolute, staticUrl, isClient, manifest) {
+export function writeWebpackCompatibleRoutesFile(routes, routesDir, workingDirAbsolute, staticUrl, isClient, manifest) {
 	let routesOutput = [];
 
-	const coreMiddleware = require.resolve("react-server-core-middleware");
+	const coreMiddleware = JSON.stringify(require.resolve("react-server-core-middleware"));
 	const existingMiddleware = routes.middleware ? routes.middleware.map((middlewareRelativePath) => {
-		return `unwrapEs6Module(require("${path.relative(workingDirAbsolute, path.resolve(routesDir, middlewareRelativePath))}"))`
+		return `unwrapEs6Module(require(${JSON.stringify(path.relative(workingDirAbsolute, path.resolve(routesDir, middlewareRelativePath)))}))`
 	}) : [];
 	routesOutput.push(`
 var manifest = ${manifest ? JSON.stringify(manifest) : "undefined"};
 function unwrapEs6Module(module) { return module.__esModule ? module.default : module }
-var coreJsMiddleware = require('${coreMiddleware}').coreJsMiddleware;
-var coreCssMiddleware = require('${coreMiddleware}').coreCssMiddleware;
+var coreJsMiddleware = require(${coreMiddleware}).coreJsMiddleware;
+var coreCssMiddleware = require(${coreMiddleware}).coreCssMiddleware;
 module.exports = {
 	middleware:[
 		coreJsMiddleware(${JSON.stringify(staticUrl)}, manifest),
@@ -311,22 +311,22 @@ module.exports = {
 			page: {`);
 		for (let format of Object.keys(formats)) {
 			const formatModule = formats[format];
-			var relativePathToPage = path.relative(workingDirAbsolute, path.resolve(routesDir, formatModule));
+			var relativePathToPage = JSON.stringify(path.relative(workingDirAbsolute, path.resolve(routesDir, formatModule)));
 			routesOutput.push(`
 				${format}: function() {
 					return {
 						done: function(cb) {`);
 			if (isClient) {
 				routesOutput.push(`
-							require.ensure("${relativePathToPage}", function() {
-								cb(unwrapEs6Module(require("${relativePathToPage}")));
+							require.ensure(${relativePathToPage}, function() {
+								cb(unwrapEs6Module(require(${relativePathToPage})));
 							});`);
 			} else {
 				routesOutput.push(`
 							try {
-								cb(unwrapEs6Module(require("${relativePathToPage}")));
+								cb(unwrapEs6Module(require(${relativePathToPage})));
 							} catch (e) {
-								console.error('Failed to load page at "${relativePathToPage}"', e.stack);
+								console.error('Failed to load page at ${relativePathToPage}', e.stack);
 							}`);
 			}
 			routesOutput.push(`

packages/react-server/gulpfile.js

@@ -126,6 +126,4 @@ gulp.task("eslint", [], function() {
         .pipe(eslint.failAfterError());
 });
 
-// todo: where should tests go?
-
 // todo: add clean