Fix SystemJS pathing issues

bryanforbes · bryanforbes · commit d138d108fb0f · 2017-07-14T14:57:04.000-05:00
diff --git a/intern.json b/intern.json
@@ -1,13 +1,11 @@
 {
+  "defaultTimeout": "5000",
   "browser": {
     "loader": {
-      "script": "systemjs",
-      "options": {
-        "baseURL": "/dist"
-      }
+      "script": "systemjs"
     },
     "plugins": [
-      "intern-angular-shim.js"
+      "dist/intern-angular-shim.js"
     ],
     "suites": [
       "app/app.component.spec",
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     "chokidar-cli": "^1.2.0",
     "concurrently": "^3.5.0",
     "cpx": "^1.5.0",
-    "intern": "next",
+    "intern": "^4.0.0-alpha.9",
     "lite-server": "^2.3.0",
     "rimraf": "^2.6.1",
     "sinon": "^2.3.7",
diff --git a/src/app/components/about.component.ts b/src/app/components/about.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+	selector: 'app-about',
 	template: `
 		<h2 highlight="skyblue">About</h2>
 		<twain-quote></twain-quote>
diff --git a/src/index.html b/src/index.html
@@ -4,7 +4,7 @@
 	<meta charset="utf-8">
 	<title>Angular Intern Example</title>
 
-	<base href="/"/>
+	<base href=".">
 	<link rel="stylesheet" href="styles.css">
 
 	<script src="../node_modules/core-js/client/shim.min.js"></script>
@@ -15,7 +15,7 @@
 <body>
 	<my-app>Loading...</my-app>
 	<script>
-		System.import('./main.js').catch(function (err) {
+		System.import('main').catch(function (err) {
 			console.log(err);
 		});
 	</script>
diff --git a/src/systemjs-angular-loader.ts b/src/systemjs-angular-loader.ts
@@ -2,25 +2,59 @@ const templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
 const stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
 const stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;
 
+function commonPath(path1: string[], path2: string[]) {
+	const length = Math.min(path1.length, path2.length);
+
+	let position: number;
+
+	for (position = 0; position < length; position++) {
+		if (path1[position] !== path2[position]) {
+			position--;
+			break;
+		}
+	}
+
+	return path1.slice(0, position + 1);
+}
+
+function relative(from: string[], to: string[]) {
+	const common = commonPath(from, to);
+
+	to = to.slice(common.length);
+	if (from.length === common.length) {
+		return to;
+	}
+
+	return [...from.slice(common.length).map(_ => '..'), ...to];
+}
+
+const rootUrlParts = (() => {
+	const url = document.createElement('a');
+	url.href = document.baseURI;
+	const parts = url.pathname.split('/');
+	parts.pop();
+	return parts;
+})();
+
 export function translate(load: { source: string; address: string; }) {
 	if (load.source.indexOf('moduleId') !== -1) {
 		return load;
 	}
 
 	const url = document.createElement('a');
 	url.href = load.address;
-
-	const basePathParts = url.pathname.split('/');
-
-	basePathParts.pop();
-	let basePath = basePathParts.join('/');
+	const urlParts = url.pathname.split('/');
+	urlParts.pop();
 
 	const baseHref = document.createElement('a');
 	baseHref.href = this.baseURL;
+	const baseHrefParts = baseHref.pathname.split('/');
 
-	if (!baseHref.pathname.startsWith('/dist/')) {
-		basePath = basePath.replace(baseHref.pathname, '');
-	}
+	const relPath = relative(rootUrlParts, baseHrefParts).join('/');
+
+	let basePath = urlParts.join('/');
+	basePath = basePath.replace(baseHref.pathname, '');
+	basePath = `${relPath}${basePath}`;
 
 	load.source = load.source
 		.replace(templateUrlRegex, function(_, __, resolvedUrl){
diff --git a/src/systemjs.config.ts b/src/systemjs.config.ts
@@ -1,9 +1,12 @@
 SystemJS.config({
+	baseURL: '/dist',
 	paths: {
-		'npm:': `${SystemJS.baseURL}../node_modules/`
+		'npm:': `/node_modules/`
 	},
 
 	map: {
+		'dist': '.',
+		'main': 'main',
 		'app': 'app',
 		'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
 		'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
@@ -32,6 +35,15 @@ SystemJS.config({
 			}
 		},
 
+		dist: {
+			defaultExtension: 'js',
+			meta: {
+				'./app/*.js': {
+					loader: 'systemjs-angular-loader.js'
+				}
+			}
+		},
+
 		testing: {
 			defaultExtension: 'js'
 		},
