feat(View): add support for styleUrls and styles

fixes angular#2382

Author: vicb

modules/angular2/src/core/annotations_impl/view.ts

@@ -49,6 +49,16 @@ export class View {
    */
   template: string;
 
+  /**
+   * Specifies stylesheet URLs for an angular component.
+   */
+  styleUrls: List<string>;
+
+  /**
+   * Specifies an inline stylesheet for an angular component.
+   */
+  styles: List<string>;
+
   /**
    * Specifies a list of directives that can be used within a template.
    *
@@ -78,13 +88,16 @@ export class View {
 
   /**
    * Specify a custom renderer for this View.
-   * If this is set, neither `template`, `templateURL` nor `directives` are used.
+   * If this is set, neither `template`, `templateUrl`, `styles`, `styleUrls` nor `directives` are
+   * used.
    */
   renderer: string;
 
-  constructor({templateUrl, template, directives, renderer}: ViewArgs = {}) {
+  constructor({templateUrl, template, directives, renderer, styles, styleUrls}: ViewArgs = {}) {
     this.templateUrl = templateUrl;
     this.template = template;
+    this.styleUrls = styleUrls;
+    this.styles = styles;
     this.directives = directives;
     this.renderer = renderer;
   }
@@ -94,4 +107,6 @@ export interface ViewArgs {
   template?: string;
   directives?: List<Type | any | List<any>>;
   renderer?: string;
+  styles?: List<string>;
+  styleUrls?: List<string>;
 }

modules/angular2/src/core/compiler/compiler.ts

@@ -205,6 +205,7 @@ export class Compiler {
     var componentUrl =
         this._urlResolver.resolve(this._appUrl, this._componentUrlMapper.getUrl(component));
     var templateAbsUrl = null;
+    var styleAbsUrls = null;
     if (isPresent(view.templateUrl)) {
       templateAbsUrl = this._urlResolver.resolve(componentUrl, view.templateUrl);
     } else if (isPresent(view.template)) {
@@ -213,9 +214,15 @@ export class Compiler {
       // is able to resolve urls in stylesheets.
       templateAbsUrl = componentUrl;
     }
+    if (isPresent(view.styleUrls)) {
+      styleAbsUrls =
+          ListWrapper.map(view.styleUrls, url => this._urlResolver.resolve(componentUrl, url));
+    }
     return new renderApi.ViewDefinition({
       componentId: stringify(component),
-      absUrl: templateAbsUrl, template: view.template,
+      templateAbsUrl: templateAbsUrl, template: view.template,
+      styleAbsUrls: styleAbsUrls,
+      styles: view.styles,
       directives: ListWrapper.map(directives, directiveBinding => directiveBinding.metadata)
     });
   }

modules/angular2/src/render/api.ts

@@ -256,19 +256,25 @@ export class RenderViewRef {}
 
 export class ViewDefinition {
   componentId: string;
-  absUrl: string;
+  templateAbsUrl: string;
   template: string;
   directives: List<DirectiveMetadata>;
+  styleAbsUrls: List<string>;
+  styles: List<string>;
 
-  constructor({componentId, absUrl, template, directives}: {
+  constructor({componentId, templateAbsUrl, template, styleAbsUrls, styles, directives}: {
     componentId?: string,
-    absUrl?: string,
+    templateAbsUrl?: string,
     template?: string,
+    styleAbsUrls?: List<string>,
+    styles?: List<string>,
     directives?: List<DirectiveMetadata>
   }) {
     this.componentId = componentId;
-    this.absUrl = absUrl;
+    this.templateAbsUrl = templateAbsUrl;
     this.template = template;
+    this.styleAbsUrls = styleAbsUrls;
+    this.styles = styles;
     this.directives = directives;
   }
 }

modules/angular2/src/render/dom/compiler/compiler.ts

@@ -43,7 +43,9 @@ export class DomCompiler extends RenderCompiler {
   compileHost(directiveMetadata: DirectiveMetadata): Promise<ProtoViewDto> {
     var hostViewDef = new ViewDefinition({
       componentId: directiveMetadata.id,
-      absUrl: null, template: null,
+      templateAbsUrl: null, template: null,
+      styles: null,
+      styleAbsUrls: null,
       directives: [directiveMetadata]
     });
     var element = DOM.createElement(directiveMetadata.selector);

modules/angular2/src/render/dom/compiler/template_loader.ts

@@ -1,6 +1,6 @@
 import {Injectable} from 'angular2/di';
 import {isBlank, isPresent, BaseException, stringify} from 'angular2/src/facade/lang';
-import {Map, MapWrapper, StringMapWrapper, StringMap} from 'angular2/src/facade/collection';
+import {Map, MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
 import {PromiseWrapper, Promise} from 'angular2/src/facade/async';
 import {DOM} from 'angular2/src/dom/dom_adapter';
 
@@ -15,35 +15,62 @@ import {UrlResolver} from 'angular2/src/services/url_resolver';
  */
 @Injectable()
 export class TemplateLoader {
-  _htmlCache: StringMap<string, /*element*/ any> = StringMapWrapper.create();
+  _cache: Map<string, Promise<string>> = MapWrapper.create();
 
-  constructor(public _xhr: XHR, urlResolver: UrlResolver) {}
+  constructor(private _xhr: XHR, urlResolver: UrlResolver) {}
 
-  load(template: ViewDefinition): Promise</*element*/ any> {
-    if (isPresent(template.template)) {
-      return PromiseWrapper.resolve(DOM.createTemplate(template.template));
+  load(view: ViewDefinition): Promise</*element*/ any> {
+    let html;
+    let fetchedStyles;
+
+    // Load the HTML
+    if (isPresent(view.template)) {
+      html = PromiseWrapper.resolve(view.template);
+    } else if (isPresent(view.templateAbsUrl)) {
+      html = this._loadText(view.templateAbsUrl);
+    } else {
+      throw new BaseException('View should have either the templateUrl or template property set');
+    }
+
+    // Load the styles
+    if (isPresent(view.styleAbsUrls) && view.styleAbsUrls.length > 0) {
+      fetchedStyles = ListWrapper.map(view.styleAbsUrls, url => this._loadText(url));
+    } else {
+      fetchedStyles = [];
     }
-    var url = template.absUrl;
-    if (isPresent(url)) {
-      var promise = StringMapWrapper.get(this._htmlCache, url);
-
-      if (isBlank(promise)) {
-        // TODO(vicb): change error when TS gets fixed
-        // https://github.com/angular/angular/issues/2280
-        // throw new BaseException(`Failed to fetch url "${url}"`);
-        promise = PromiseWrapper.then(this._xhr.get(url), html => {
-          var template = DOM.createTemplate(html);
-          return template;
-        }, _ => PromiseWrapper.reject(new BaseException(`Failed to fetch url "${url}"`), null));
-
-        StringMapWrapper.set(this._htmlCache, url, promise);
-      }
-
-      // We need to clone the result as others might change it
-      // (e.g. the compiler).
-      return promise.then((tplElement) => DOM.clone(tplElement));
+
+    // Inline the styles and return a template element
+    return PromiseWrapper.all(ListWrapper.concat([html], fetchedStyles))
+        .then((res: List<string>) => {
+          let html = res[0];
+          let fetchedStyles = ListWrapper.slice(res, 1);
+
+          html = _createStyleTags(view.styles) + _createStyleTags(fetchedStyles) + html;
+
+          return DOM.createTemplate(html);
+        });
+  }
+
+  private _loadText(url: string): Promise<string> {
+    var response = MapWrapper.get(this._cache, url);
+
+    if (isBlank(response)) {
+      // TODO(vicb): change error when TS gets fixed
+      // https://github.com/angular/angular/issues/2280
+      // throw new BaseException(`Failed to fetch url "${url}"`);
+      response = PromiseWrapper.catchError(
+          this._xhr.get(url),
+          _ => PromiseWrapper.reject(new BaseException(`Failed to fetch url "${url}"`), null));
+
+      MapWrapper.set(this._cache, url, response);
     }
 
-    throw new BaseException('View should have either the url or template property set');
+    return response;
   }
 }
+
+function _createStyleTags(styles?: List<string>): string {
+  return isBlank(styles) ?
+             '' :
+             ListWrapper.map(styles, css => `<style type='text/css'>${css}</style>`).join('');
+}

modules/angular2/src/render/dom/shadow_dom/shadow_dom_compile_step.ts

@@ -29,7 +29,7 @@ export class ShadowDomCompileStep implements CompileStep {
 
   _processStyleElement(current: CompileElement, control: CompileControl) {
     var stylePromise = this._shadowDomStrategy.processStyleElement(
-        this._template.componentId, this._template.absUrl, current.element);
+        this._template.componentId, this._template.templateAbsUrl, current.element);
     if (isPresent(stylePromise) && PromiseWrapper.isPromise(stylePromise)) {
       ListWrapper.push(this._subTaskPromises, stylePromise);
     }

modules/angular2/src/render/dom/view/proto_view.ts

@@ -8,7 +8,7 @@ import {NG_BINDING_CLASS} from '../util';
 
 import {RenderProtoViewRef} from '../../api';
 
-export function resolveInternalDomProtoView(protoViewRef: RenderProtoViewRef) {
+export function resolveInternalDomProtoView(protoViewRef: RenderProtoViewRef): DomProtoView {
   return (<DomProtoViewRef>protoViewRef)._protoView;
 }
 

modules/angular2/src/transform/template_compiler/generator.dart

@@ -88,7 +88,7 @@ class _TemplateExtractor {
 
   Future<_ExtractResult> extractTemplates(ViewDefinition viewDef) async {
     // Check for "imperative views".
-    if (viewDef.template == null && viewDef.absUrl == null) return null;
+    if (viewDef.template == null && viewDef.templateAbsUrl == null) return null;
 
     var templateEl = await _loader.load(viewDef);
 

modules/angular2/src/transform/template_compiler/view_definition_creator.dart

@@ -210,11 +210,11 @@ class _TemplateExtractVisitor extends Object with RecursiveAstVisitor<Object> {
         return null;
       }
       if (keyString == 'templateUrl') {
-        if (viewDef.absUrl != null) {
+        if (viewDef.templateAbsUrl != null) {
           logger.error(
               'Found multiple values for "templateUrl". Source: ${node}');
         }
-        viewDef.absUrl = valueString;
+        viewDef.templateAbsUrl = valueString;
       } else {
         // keyString == 'template'
         if (viewDef.template != null) {

modules/angular2/test/core/compiler/compiler_spec.ts

@@ -100,30 +100,45 @@ export function main() {
                });
          }));
 
-      it('should fill absUrl given inline templates', inject([AsyncTestCompleter], (async) => {
+      it('should fill templateAbsUrl given inline templates',
+         inject([AsyncTestCompleter], (async) => {
            cmpUrlMapper.setComponentUrl(MainComponent, '/mainComponent');
            captureTemplate(new viewAnn.View({template: '<div></div>'}))
                .then((renderTpl) => {
-                 expect(renderTpl.absUrl).toEqual('http://www.app.com/mainComponent');
+                 expect(renderTpl.templateAbsUrl).toEqual('http://www.app.com/mainComponent');
                  async.done();
                });
          }));
 
-      it('should not fill absUrl given no inline template or template url',
+      it('should not fill templateAbsUrl given no inline template or template url',
          inject([AsyncTestCompleter], (async) => {
            cmpUrlMapper.setComponentUrl(MainComponent, '/mainComponent');
            captureTemplate(new viewAnn.View({template: null, templateUrl: null}))
                .then((renderTpl) => {
-                 expect(renderTpl.absUrl).toBe(null);
+                 expect(renderTpl.templateAbsUrl).toBe(null);
                  async.done();
                });
          }));
 
-      it('should fill absUrl given url template', inject([AsyncTestCompleter], (async) => {
+      it('should fill templateAbsUrl given url template', inject([AsyncTestCompleter], (async) => {
            cmpUrlMapper.setComponentUrl(MainComponent, '/mainComponent');
            captureTemplate(new viewAnn.View({templateUrl: '/someTemplate'}))
                .then((renderTpl) => {
-                 expect(renderTpl.absUrl).toEqual('http://www.app.com/mainComponent/someTemplate');
+                 expect(renderTpl.templateAbsUrl)
+                     .toEqual('http://www.app.com/mainComponent/someTemplate');
+                 async.done();
+               });
+         }));
+
+      it('should fill styleAbsUrls given styleUrls', inject([AsyncTestCompleter], (async) => {
+           cmpUrlMapper.setComponentUrl(MainComponent, '/mainComponent');
+           captureTemplate(new viewAnn.View({styleUrls: ['/1.css', '/2.css']}))
+               .then((renderTpl) => {
+                 expect(renderTpl.styleAbsUrls)
+                     .toEqual([
+                       'http://www.app.com/mainComponent/1.css',
+                       'http://www.app.com/mainComponent/2.css'
+                     ]);
                  async.done();
                });
          }));