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

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);

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>

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;
 

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">

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;

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 {

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;

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>

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() {}
 }

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>

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 {

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 -->
 

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;

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>

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">

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;

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);
+  }
+}

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)) {
+    // The standard UrlResolver looks for "package:" templateUrls in
-      DOM.resolveAndSetHref(DemoUrlResolver.a, url, null);
+    // node_modules, however in our repo we host material widgets at the root.
-      return DOM.getHref(DemoUrlResolver.a);
+    if (url.startsWith('package:angular2_material/')) {
-    }
+      return '/' + url.substring(8);
-
-    if (isBlank(url) || url == '') {
-      return baseUrl;
-    }
-
-    if (url[0] == '/') {
-      return url;
-    }
-
-    var m = RegExpWrapper.firstMatch(_schemeRe, url);
-
-    if (isPresent(m[1])) {
-      return url;
-    }
-
-    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}`;
     }
-  }
+    return super.resolve(baseUrl, 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;
   }
 }

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 {