feat(url_resolver): support package: urls (fixes #2991)

yjbanov · yjbanov · commit 408618b836d3 · 2015-07-23T18:35:05.000-07:00
diff --git a/modules/angular2/src/services/url_resolver.dart b/modules/angular2/src/services/url_resolver.dart
@@ -18,6 +18,11 @@ class UrlResolver {
    */
   String resolve(String baseUrl, String url) {
     Uri uri = Uri.parse(url);
+
+    if (uri.scheme == 'package') {
+      return '/packages/${uri.path}';
+    }
+
     if (uri.isAbsolute) return uri.toString();
 
     Uri baseUri = Uri.parse(baseUrl);
diff --git a/modules/angular2_material/src/components/button/button.html b/modules/angular2_material/src/components/button/button.html
@@ -1,2 +1,2 @@
-<style>@import "angular2_material/src/components/button/button.css";</style>
+<style>@import "package:angular2_material/src/components/button/button.css";</style>
 <span class="md-button-wrapper"><ng-content></ng-content></span>
diff --git a/modules/angular2_material/src/components/button/button.ts b/modules/angular2_material/src/components/button/button.ts
@@ -3,7 +3,7 @@ import {isPresent} from 'angular2/src/facade/lang';
 
 
 @Component({selector: '[md-button]:not([href])'})
-@View({templateUrl: 'angular2_material/src/components/button/button.html'})
+@View({templateUrl: 'package:angular2_material/src/components/button/button.html'})
 export class MdButton {
   // TODO(jelbourn): Ink ripples.
 }
@@ -15,7 +15,7 @@ export class MdButton {
   host: {'(click)': 'onClick($event)', '[tabIndex]': 'tabIndex'},
   lifecycle: [LifecycleEvent.onChange]
 })
-@View({templateUrl: 'angular2_material/src/components/button/button.html'})
+@View({templateUrl: 'package:angular2_material/src/components/button/button.html'})
 export class MdAnchor {
   tabIndex: number;
 
diff --git a/modules/angular2_material/src/components/checkbox/checkbox.html b/modules/angular2_material/src/components/checkbox/checkbox.html
@@ -1,4 +1,4 @@
-<style>@import "angular2_material/src/components/checkbox/checkbox.css";</style>
+<style>@import "package:angular2_material/src/components/checkbox/checkbox.css";</style>
 
 <div (^click)="toggle($event)">
   <div class="md-checkbox-container">
diff --git a/modules/angular2_material/src/components/checkbox/checkbox.ts b/modules/angular2_material/src/components/checkbox/checkbox.ts
@@ -15,7 +15,10 @@ import {NumberWrapper} from 'angular2/src/facade/lang';
     '[attr.aria-disabled]': 'disabled'
   }
 })
-@View({templateUrl: 'angular2_material/src/components/checkbox/checkbox.html', directives: []})
+@View({
+  templateUrl: 'package:angular2_material/src/components/checkbox/checkbox.html',
+  directives: []
+})
 export class MdCheckbox {
   /** Whether this checkbox is checked. */
   checked: boolean;
diff --git a/modules/angular2_material/src/components/dialog/dialog.ts b/modules/angular2_material/src/components/dialog/dialog.ts
@@ -210,7 +210,7 @@ export class MdDialogConfig {
   host: {'(body:^keydown)': 'documentKeypress($event)'},
 })
 @View({
-  templateUrl: 'angular2_material/src/components/dialog/dialog.html',
+  templateUrl: 'package:angular2_material/src/components/dialog/dialog.html',
   directives: [forwardRef(() => MdDialogContent)]
 })
 class MdDialogContainer {
diff --git a/modules/angular2_material/src/components/grid_list/grid_list.ts b/modules/angular2_material/src/components/grid_list/grid_list.ts
@@ -16,7 +16,7 @@ import {Math} from 'angular2/src/facade/math';
   properties: ['cols', 'rowHeight', 'gutterSize'],
   lifecycle: [LifecycleEvent.onAllChangesDone]
 })
-@View({templateUrl: 'angular2_material/src/components/grid_list/grid_list.html'})
+@View({templateUrl: 'package:angular2_material/src/components/grid_list/grid_list.html'})
 export class MdGridList {
   /** List of tiles that are being rendered. */
   tiles: List<MdGridTile>;
@@ -223,7 +223,7 @@ export class MdGridList {
   },
   lifecycle: [LifecycleEvent.onDestroy, LifecycleEvent.onChange]
 })
-@View({templateUrl: 'angular2_material/src/components/grid_list/grid_tile.html'})
+@View({templateUrl: 'package:angular2_material/src/components/grid_list/grid_tile.html'})
 export class MdGridTile {
   gridList: MdGridList;
   _rowspan: number;
diff --git a/modules/angular2_material/src/components/grid_list/grid_tile.html b/modules/angular2_material/src/components/grid_list/grid_tile.html
@@ -1,4 +1,4 @@
-<style>@import "angular2_material/src/components/grid_list/grid-list.css";</style>
+<style>@import "package:angular2_material/src/components/grid_list/grid-list.css";</style>
 
 <figure>
   <ng-content></ng-content>
diff --git a/modules/angular2_material/src/components/progress-circular/progress_circular.ts b/modules/angular2_material/src/components/progress-circular/progress_circular.ts
@@ -1,7 +1,9 @@
 import {Component, View} from 'angular2/angular2';
 
 @Component({selector: 'md-progress-circular'})
-@View({templateUrl: 'angular2_material/src/components/progress-circular/progress_circular.html'})
+@View({
+  templateUrl: 'package:angular2_material/src/components/progress-circular/progress_circular.html'
+})
 export class MdProgressCircular {
   constructor() {}
 }
diff --git a/modules/angular2_material/src/components/progress-linear/progress_linear.html b/modules/angular2_material/src/components/progress-linear/progress_linear.html
@@ -1,4 +1,4 @@
-<style>@import "angular2_material/src/components/progress-linear/progress_linear.css";</style>
+<style>@import "package:angular2_material/src/components/progress-linear/progress_linear.css";</style>
 
 <div class="md-progress-linear-container md-ready">
   <div class="md-progress-linear-dashed"></div>
diff --git a/modules/angular2_material/src/components/progress-linear/progress_linear.ts b/modules/angular2_material/src/components/progress-linear/progress_linear.ts
@@ -15,7 +15,7 @@ import {Math} from 'angular2/src/facade/math';
   }
 })
 @View({
-  templateUrl: 'angular2_material/src/components/progress-linear/progress_linear.html',
+  templateUrl: 'package:angular2_material/src/components/progress-linear/progress_linear.html',
   directives: []
 })
 export class MdProgressLinear {
diff --git a/modules/angular2_material/src/components/radio/radio_button.html b/modules/angular2_material/src/components/radio/radio_button.html
@@ -1,4 +1,4 @@
-<style>@import "angular2_material/src/components/radio/radio-button.css";</style>
+<style>@import "package:angular2_material/src/components/radio/radio-button.css";</style>
 
 <!-- TODO(jelbourn): render the radio on either side of the content -->
 
diff --git a/modules/angular2_material/src/components/radio/radio_button.ts b/modules/angular2_material/src/components/radio/radio_button.ts
@@ -36,7 +36,7 @@ var _uniqueIdCounter: number = 0;
     '[attr.aria-activedescendant]': 'activedescendant'
   }
 })
-@View({templateUrl: 'angular2_material/src/components/radio/radio_group.html'})
+@View({templateUrl: 'package:angular2_material/src/components/radio/radio_group.html'})
 export class MdRadioGroup {
   /** The selected value for the radio group. The value comes from the options. */
   value: any;
@@ -190,7 +190,10 @@ export class MdRadioGroup {
     '[attr.aria-disabled]': 'disabled'
   }
 })
-@View({templateUrl: 'angular2_material/src/components/radio/radio_button.html', directives: []})
+@View({
+  templateUrl: 'package:angular2_material/src/components/radio/radio_button.html',
+  directives: []
+})
 export class MdRadioButton {
   /** Whether this radio is checked. */
   checked: boolean;
diff --git a/modules/angular2_material/src/components/radio/radio_group.html b/modules/angular2_material/src/components/radio/radio_group.html
@@ -1,2 +1,2 @@
-<style>@import "angular2_material/src/components/radio/radio-group.css";</style>
+<style>@import "package:angular2_material/src/components/radio/radio-group.css";</style>
 <ng-content></ng-content>
diff --git a/modules/angular2_material/src/components/switcher/switch.html b/modules/angular2_material/src/components/switcher/switch.html
@@ -1,4 +1,4 @@
-<style>@import "angular2_material/src/components/switcher/switch.css";</style>
+<style>@import "package:angular2_material/src/components/switcher/switch.css";</style>
 
 <div (^click)="toggle($event)">
   <div class="md-switch-container">
diff --git a/modules/angular2_material/src/components/switcher/switch.ts b/modules/angular2_material/src/components/switcher/switch.ts
@@ -16,7 +16,8 @@ import {NumberWrapper} from 'angular2/src/facade/lang';
     '[attr.role]': '"checkbox"'
   }
 })
-@View({templateUrl: 'angular2_material/src/components/switcher/switch.html', directives: []})
+@View(
+    {templateUrl: 'package:angular2_material/src/components/switcher/switch.html', directives: []})
 export class MdSwitch {
   /** Whether this switch is checked. */
   checked: boolean;
diff --git a/modules/examples/src/material/demo_common.dart b/modules/examples/src/material/demo_common.dart
@@ -0,0 +1,23 @@
+library angular2_examples.material.demo_common;
+
+import 'package:angular2/src/dom/browser_adapter.dart';
+import 'package:angular2/src/services/url_resolver.dart';
+
+void commonDemoSetup() {
+  BrowserDomAdapter.makeCurrent();
+}
+
+class DemoUrlResolver extends UrlResolver {
+
+  @override
+  String resolve(String baseUrl, String url) {
+    const MATERIAL_PKG = 'package:angular2_material/';
+
+    // We run a proxy server in front of pub serve that prepends "example" to
+    // paths
+    if (url.startsWith(MATERIAL_PKG)) {
+      return '/examples/packages/angular2_material/' + url.substring(MATERIAL_PKG.length);
+    }
+    return super.resolve(baseUrl, url);
+  }
+}
diff --git a/modules/examples/src/material/demo_common.ts b/modules/examples/src/material/demo_common.ts
@@ -18,67 +18,16 @@ export function commonDemoSetup(): void {
 
 @Injectable()
 export class DemoUrlResolver extends UrlResolver {
-  static a;
-
-  isInPubServe: boolean;
-
   constructor() {
     super();
-    if (isBlank(DemoUrlResolver.a)) {
-      DemoUrlResolver.a = DOM.createElement('a');
-    }
-    this.isInPubServe = _isInPubServe();
   }
 
   resolve(baseUrl: string, url: string): string {
-    if (isBlank(baseUrl)) {
-      DOM.resolveAndSetHref(DemoUrlResolver.a, url, null);
-      return DOM.getHref(DemoUrlResolver.a);
-    }
-
-    if (isBlank(url) || url == '') {
-      return baseUrl;
-    }
-
-    if (url[0] == '/') {
-      return url;
-    }
-
-    var m = RegExpWrapper.firstMatch(_schemeRe, url);
-
-    if (isPresent(m[1])) {
-      return url;
+    // The standard UrlResolver looks for "package:" templateUrls in
+    // node_modules, however in our repo we host material widgets at the root.
+    if (url.startsWith('package:angular2_material/')) {
+      return '/' + url.substring(8);
     }
-
-    if (StringWrapper.startsWith(url, './')) {
-      return `${baseUrl}/${url}`;
-    }
-
-    // Whether the `examples/` dir is being directly served (as the server root).
-    // For cases when this is not true AND we're in pub-serve, `examples/` needs to be
-    // prepended to the URL.
-    var isDirectlyServingExamplesDir = !StringWrapper.contains(baseUrl, 'examples/');
-
-    if (this.isInPubServe && isDirectlyServingExamplesDir) {
-      return `/packages/${url}`;
-    } else if (this.isInPubServe) {
-      return `/examples/packages/${url}`;
-    } else {
-      return `/${url}`;
-    }
-  }
-}
-
-var _schemeRe = /^([^:/?#]+:)?/g;
-
-// TODO: remove this hack when http://dartbug.com/23128 is fixed
-function _isInPubServe(): boolean {
-  try {
-    int.parse('123');
-    print('>> Running in Dart');
-    return true;
-  } catch (_) {
-    print('>> Running in JS');
-    return false;
+    return super.resolve(baseUrl, url);
   }
 }
diff --git a/modules/examples/src/material/input/demo_app.html b/modules/examples/src/material/input/demo_app.html
@@ -1,4 +1,4 @@
-<style>@import "angular2_material/src/components/input/input.css";</style>
+<style>@import "package:angular2_material/src/components/input/input.css";</style>
 
 <style>
   body {

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`		`-<style>@import "angular2_material/src/components/button/button.css";</style>`
	`1`	`+<style>@import "package:angular2_material/src/components/button/button.css";</style>`
`2`	`2`	`<span class="md-button-wrapper"><ng-content></ng-content></span>`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<style>@import "angular2_material/src/components/checkbox/checkbox.css";</style>`
	`1`	`+<style>@import "package:angular2_material/src/components/checkbox/checkbox.css";</style>`
`2`	`2`
`3`	`3`	`<div (^click)="toggle($event)">`
`4`	`4`	`<div class="md-checkbox-container">`