2016-06-23 12:47:54 -04:00
|
|
|
/**
|
|
|
|
* @license
|
|
|
|
* Copyright Google Inc. All Rights Reserved.
|
|
|
|
*
|
|
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
|
|
* found in the LICENSE file at https://angular.io/license
|
|
|
|
*/
|
|
|
|
|
2016-04-28 20:50:03 -04:00
|
|
|
import {Injectable, ViewEncapsulation} from '@angular/core';
|
|
|
|
|
|
|
|
import {PromiseWrapper} from '../src/facade/async';
|
2016-06-29 13:26:45 -04:00
|
|
|
import {MapWrapper} from '../src/facade/collection';
|
2016-06-08 19:38:52 -04:00
|
|
|
import {BaseException} from '../src/facade/exceptions';
|
|
|
|
import {isBlank, isPresent} from '../src/facade/lang';
|
2016-04-28 20:50:03 -04:00
|
|
|
|
2016-06-24 11:46:43 -04:00
|
|
|
import {CompileDirectiveMetadata, CompileStylesheetMetadata, CompileTemplateMetadata, CompileTypeMetadata} from './compile_metadata';
|
2016-05-26 19:43:15 -04:00
|
|
|
import {CompilerConfig} from './config';
|
2016-06-24 11:46:43 -04:00
|
|
|
import {HtmlAstVisitor, HtmlAttrAst, HtmlCommentAst, HtmlElementAst, HtmlExpansionAst, HtmlExpansionCaseAst, HtmlTextAst, htmlVisitAll} from './html_ast';
|
|
|
|
import {HtmlParser} from './html_parser';
|
|
|
|
import {extractStyleUrls, isStyleUrlResolvable} from './style_url_resolver';
|
|
|
|
import {PreparsedElementType, preparseElement} from './template_preparser';
|
|
|
|
import {UrlResolver} from './url_resolver';
|
|
|
|
import {XHR} from './xhr';
|
2015-08-25 18:36:02 -04:00
|
|
|
|
2016-06-24 11:46:43 -04:00
|
|
|
export class NormalizeDirectiveResult {
|
|
|
|
constructor(
|
|
|
|
public syncResult: CompileDirectiveMetadata,
|
|
|
|
public asyncResult: Promise<CompileDirectiveMetadata>) {}
|
|
|
|
}
|
2015-08-25 18:36:02 -04:00
|
|
|
|
2015-09-14 18:59:09 -04:00
|
|
|
@Injectable()
|
2016-01-06 17:13:44 -05:00
|
|
|
export class DirectiveNormalizer {
|
2016-06-24 11:46:43 -04:00
|
|
|
private _xhrCache = new Map<string, Promise<string>>();
|
|
|
|
|
2016-06-08 19:38:52 -04:00
|
|
|
constructor(
|
|
|
|
private _xhr: XHR, private _urlResolver: UrlResolver, private _htmlParser: HtmlParser,
|
|
|
|
private _config: CompilerConfig) {}
|
2015-08-25 18:36:02 -04:00
|
|
|
|
2016-06-24 11:46:43 -04:00
|
|
|
clearCache() { this._xhrCache.clear(); }
|
|
|
|
|
|
|
|
clearCacheFor(normalizedDirective: CompileDirectiveMetadata) {
|
|
|
|
if (!normalizedDirective.isComponent) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this._xhrCache.delete(normalizedDirective.template.templateUrl);
|
|
|
|
normalizedDirective.template.externalStylesheets.forEach(
|
|
|
|
(stylesheet) => { this._xhrCache.delete(stylesheet.moduleUrl); });
|
|
|
|
}
|
|
|
|
|
|
|
|
private _fetch(url: string): Promise<string> {
|
|
|
|
var result = this._xhrCache.get(url);
|
|
|
|
if (!result) {
|
|
|
|
result = this._xhr.get(url);
|
|
|
|
this._xhrCache.set(url, result);
|
|
|
|
}
|
|
|
|
return result;
|
|
|
|
}
|
|
|
|
|
|
|
|
normalizeDirective(directive: CompileDirectiveMetadata): NormalizeDirectiveResult {
|
2016-01-06 17:13:44 -05:00
|
|
|
if (!directive.isComponent) {
|
|
|
|
// For non components there is nothing to be normalized yet.
|
2016-06-24 11:46:43 -04:00
|
|
|
return new NormalizeDirectiveResult(directive, Promise.resolve(directive));
|
2016-01-06 17:13:44 -05:00
|
|
|
}
|
2016-06-24 11:46:43 -04:00
|
|
|
let normalizedTemplateSync: CompileTemplateMetadata = null;
|
|
|
|
let normalizedTemplateAsync: Promise<CompileTemplateMetadata>;
|
|
|
|
if (isPresent(directive.template.template)) {
|
|
|
|
normalizedTemplateSync = this.normalizeTemplateSync(directive.type, directive.template);
|
|
|
|
normalizedTemplateAsync = Promise.resolve(normalizedTemplateSync);
|
|
|
|
} else if (directive.template.templateUrl) {
|
|
|
|
normalizedTemplateAsync = this.normalizeTemplateAsync(directive.type, directive.template);
|
|
|
|
} else {
|
|
|
|
throw new BaseException(`No template specified for component ${directive.type.name}`);
|
|
|
|
}
|
|
|
|
if (normalizedTemplateSync && normalizedTemplateSync.styleUrls.length === 0) {
|
|
|
|
// sync case
|
|
|
|
let normalizedDirective = _cloneDirectiveWithTemplate(directive, normalizedTemplateSync);
|
|
|
|
return new NormalizeDirectiveResult(
|
|
|
|
normalizedDirective, Promise.resolve(normalizedDirective));
|
|
|
|
} else {
|
|
|
|
// async case
|
|
|
|
return new NormalizeDirectiveResult(
|
|
|
|
null,
|
|
|
|
normalizedTemplateAsync
|
|
|
|
.then((normalizedTemplate) => this.normalizeExternalStylesheets(normalizedTemplate))
|
|
|
|
.then(
|
|
|
|
(normalizedTemplate) =>
|
|
|
|
_cloneDirectiveWithTemplate(directive, normalizedTemplate)));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
normalizeTemplateSync(directiveType: CompileTypeMetadata, template: CompileTemplateMetadata):
|
|
|
|
CompileTemplateMetadata {
|
|
|
|
return this.normalizeLoadedTemplate(
|
|
|
|
directiveType, template, template.template, directiveType.moduleUrl);
|
2016-01-06 17:13:44 -05:00
|
|
|
}
|
|
|
|
|
2016-06-24 11:46:43 -04:00
|
|
|
normalizeTemplateAsync(directiveType: CompileTypeMetadata, template: CompileTemplateMetadata):
|
2016-06-08 19:38:52 -04:00
|
|
|
Promise<CompileTemplateMetadata> {
|
2016-06-24 11:46:43 -04:00
|
|
|
let templateUrl = this._urlResolver.resolve(directiveType.moduleUrl, template.templateUrl);
|
|
|
|
return this._fetch(templateUrl)
|
|
|
|
.then((value) => this.normalizeLoadedTemplate(directiveType, template, value, templateUrl));
|
2015-08-25 18:36:02 -04:00
|
|
|
}
|
|
|
|
|
2016-06-08 19:38:52 -04:00
|
|
|
normalizeLoadedTemplate(
|
|
|
|
directiveType: CompileTypeMetadata, templateMeta: CompileTemplateMetadata, template: string,
|
|
|
|
templateAbsUrl: string): CompileTemplateMetadata {
|
2015-10-07 12:34:21 -04:00
|
|
|
var rootNodesAndErrors = this._htmlParser.parse(template, directiveType.name);
|
|
|
|
if (rootNodesAndErrors.errors.length > 0) {
|
|
|
|
var errorString = rootNodesAndErrors.errors.join('\n');
|
|
|
|
throw new BaseException(`Template parse errors:\n${errorString}`);
|
|
|
|
}
|
2016-06-24 11:46:43 -04:00
|
|
|
var templateMetadataStyles = this.normalizeStylesheet(new CompileStylesheetMetadata({
|
|
|
|
styles: templateMeta.styles,
|
|
|
|
styleUrls: templateMeta.styleUrls,
|
|
|
|
moduleUrl: directiveType.moduleUrl
|
|
|
|
}));
|
2015-10-07 12:34:21 -04:00
|
|
|
|
2015-08-25 18:36:02 -04:00
|
|
|
var visitor = new TemplatePreparseVisitor();
|
2015-10-07 12:34:21 -04:00
|
|
|
htmlVisitAll(visitor, rootNodesAndErrors.rootNodes);
|
2016-06-24 11:46:43 -04:00
|
|
|
var templateStyles = this.normalizeStylesheet(new CompileStylesheetMetadata(
|
|
|
|
{styles: visitor.styles, styleUrls: visitor.styleUrls, moduleUrl: templateAbsUrl}));
|
2015-09-14 18:59:09 -04:00
|
|
|
|
2016-06-24 11:46:43 -04:00
|
|
|
var allStyles = templateMetadataStyles.styles.concat(templateStyles.styles);
|
|
|
|
var allStyleUrls = templateMetadataStyles.styleUrls.concat(templateStyles.styleUrls);
|
2015-10-23 03:17:30 -04:00
|
|
|
|
2015-09-18 13:33:23 -04:00
|
|
|
var encapsulation = templateMeta.encapsulation;
|
2016-04-02 19:34:44 -04:00
|
|
|
if (isBlank(encapsulation)) {
|
|
|
|
encapsulation = this._config.defaultEncapsulation;
|
|
|
|
}
|
2016-06-24 11:46:43 -04:00
|
|
|
if (encapsulation === ViewEncapsulation.Emulated && allStyles.length === 0 &&
|
|
|
|
allStyleUrls.length === 0) {
|
2015-09-18 13:33:23 -04:00
|
|
|
encapsulation = ViewEncapsulation.None;
|
|
|
|
}
|
|
|
|
return new CompileTemplateMetadata({
|
|
|
|
encapsulation: encapsulation,
|
|
|
|
template: template,
|
|
|
|
templateUrl: templateAbsUrl,
|
2016-06-24 11:46:43 -04:00
|
|
|
styles: allStyles,
|
|
|
|
styleUrls: allStyleUrls,
|
|
|
|
externalStylesheets: templateMeta.externalStylesheets,
|
2016-05-25 15:46:22 -04:00
|
|
|
ngContentSelectors: visitor.ngContentSelectors,
|
2016-06-20 12:52:41 -04:00
|
|
|
animations: templateMeta.animations,
|
|
|
|
interpolation: templateMeta.interpolation
|
2015-08-25 18:36:02 -04:00
|
|
|
});
|
|
|
|
}
|
2016-06-24 11:46:43 -04:00
|
|
|
|
|
|
|
normalizeExternalStylesheets(templateMeta: CompileTemplateMetadata):
|
|
|
|
Promise<CompileTemplateMetadata> {
|
|
|
|
return this._loadMissingExternalStylesheets(templateMeta.styleUrls)
|
|
|
|
.then((externalStylesheets) => new CompileTemplateMetadata({
|
|
|
|
encapsulation: templateMeta.encapsulation,
|
|
|
|
template: templateMeta.template,
|
|
|
|
templateUrl: templateMeta.templateUrl,
|
|
|
|
styles: templateMeta.styles,
|
|
|
|
styleUrls: templateMeta.styleUrls,
|
|
|
|
externalStylesheets: externalStylesheets,
|
|
|
|
ngContentSelectors: templateMeta.ngContentSelectors,
|
|
|
|
animations: templateMeta.animations,
|
|
|
|
interpolation: templateMeta.interpolation
|
|
|
|
}));
|
|
|
|
}
|
|
|
|
|
|
|
|
private _loadMissingExternalStylesheets(
|
|
|
|
styleUrls: string[],
|
|
|
|
loadedStylesheets:
|
|
|
|
Map<string, CompileStylesheetMetadata> = new Map<string, CompileStylesheetMetadata>()):
|
|
|
|
Promise<CompileStylesheetMetadata[]> {
|
|
|
|
return Promise
|
|
|
|
.all(styleUrls.filter((styleUrl) => !loadedStylesheets.has(styleUrl))
|
|
|
|
.map(styleUrl => this._fetch(styleUrl).then((loadedStyle) => {
|
|
|
|
var stylesheet = this.normalizeStylesheet(
|
|
|
|
new CompileStylesheetMetadata({styles: [loadedStyle], moduleUrl: styleUrl}));
|
|
|
|
loadedStylesheets.set(styleUrl, stylesheet);
|
|
|
|
return this._loadMissingExternalStylesheets(
|
|
|
|
stylesheet.styleUrls, loadedStylesheets);
|
|
|
|
})))
|
2016-06-29 13:26:45 -04:00
|
|
|
.then((_) => MapWrapper.values(loadedStylesheets));
|
2016-06-24 11:46:43 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
normalizeStylesheet(stylesheet: CompileStylesheetMetadata): CompileStylesheetMetadata {
|
|
|
|
var allStyleUrls = stylesheet.styleUrls.filter(isStyleUrlResolvable)
|
|
|
|
.map(url => this._urlResolver.resolve(stylesheet.moduleUrl, url));
|
|
|
|
|
|
|
|
var allStyles = stylesheet.styles.map(style => {
|
|
|
|
var styleWithImports = extractStyleUrls(this._urlResolver, stylesheet.moduleUrl, style);
|
|
|
|
allStyleUrls.push(...styleWithImports.styleUrls);
|
|
|
|
return styleWithImports.style;
|
|
|
|
});
|
|
|
|
|
|
|
|
return new CompileStylesheetMetadata(
|
|
|
|
{styles: allStyles, styleUrls: allStyleUrls, moduleUrl: stylesheet.moduleUrl});
|
|
|
|
}
|
2015-08-25 18:36:02 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
class TemplatePreparseVisitor implements HtmlAstVisitor {
|
|
|
|
ngContentSelectors: string[] = [];
|
|
|
|
styles: string[] = [];
|
|
|
|
styleUrls: string[] = [];
|
2015-09-18 13:33:23 -04:00
|
|
|
ngNonBindableStackCount: number = 0;
|
2015-08-25 18:36:02 -04:00
|
|
|
|
2015-09-18 13:33:23 -04:00
|
|
|
visitElement(ast: HtmlElementAst, context: any): any {
|
|
|
|
var preparsedElement = preparseElement(ast);
|
|
|
|
switch (preparsedElement.type) {
|
|
|
|
case PreparsedElementType.NG_CONTENT:
|
2015-09-18 13:33:23 -04:00
|
|
|
if (this.ngNonBindableStackCount === 0) {
|
|
|
|
this.ngContentSelectors.push(preparsedElement.selectAttr);
|
|
|
|
}
|
2015-09-18 13:33:23 -04:00
|
|
|
break;
|
|
|
|
case PreparsedElementType.STYLE:
|
|
|
|
var textContent = '';
|
|
|
|
ast.children.forEach(child => {
|
|
|
|
if (child instanceof HtmlTextAst) {
|
|
|
|
textContent += (<HtmlTextAst>child).value;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
this.styles.push(textContent);
|
|
|
|
break;
|
|
|
|
case PreparsedElementType.STYLESHEET:
|
|
|
|
this.styleUrls.push(preparsedElement.hrefAttr);
|
|
|
|
break;
|
2016-01-25 20:57:29 -05:00
|
|
|
default:
|
|
|
|
// DDC reports this as error. See:
|
|
|
|
// https://github.com/dart-lang/dev_compiler/issues/428
|
|
|
|
break;
|
2015-08-25 18:36:02 -04:00
|
|
|
}
|
2015-09-18 13:33:23 -04:00
|
|
|
if (preparsedElement.nonBindable) {
|
|
|
|
this.ngNonBindableStackCount++;
|
|
|
|
}
|
|
|
|
htmlVisitAll(this, ast.children);
|
|
|
|
if (preparsedElement.nonBindable) {
|
|
|
|
this.ngNonBindableStackCount--;
|
2015-08-25 18:36:02 -04:00
|
|
|
}
|
2015-09-18 13:33:23 -04:00
|
|
|
return null;
|
2015-08-25 18:36:02 -04:00
|
|
|
}
|
2016-03-06 23:21:20 -05:00
|
|
|
visitComment(ast: HtmlCommentAst, context: any): any { return null; }
|
2015-09-18 13:33:23 -04:00
|
|
|
visitAttr(ast: HtmlAttrAst, context: any): any { return null; }
|
|
|
|
visitText(ast: HtmlTextAst, context: any): any { return null; }
|
2016-04-12 14:46:49 -04:00
|
|
|
visitExpansion(ast: HtmlExpansionAst, context: any): any { return null; }
|
|
|
|
|
|
|
|
visitExpansionCase(ast: HtmlExpansionCaseAst, context: any): any { return null; }
|
2015-08-25 18:36:02 -04:00
|
|
|
}
|
2016-06-24 11:46:43 -04:00
|
|
|
|
|
|
|
function _cloneDirectiveWithTemplate(
|
|
|
|
directive: CompileDirectiveMetadata,
|
|
|
|
template: CompileTemplateMetadata): CompileDirectiveMetadata {
|
|
|
|
return new CompileDirectiveMetadata({
|
|
|
|
type: directive.type,
|
|
|
|
isComponent: directive.isComponent,
|
|
|
|
selector: directive.selector,
|
|
|
|
exportAs: directive.exportAs,
|
|
|
|
changeDetection: directive.changeDetection,
|
|
|
|
inputs: directive.inputs,
|
|
|
|
outputs: directive.outputs,
|
|
|
|
hostListeners: directive.hostListeners,
|
|
|
|
hostProperties: directive.hostProperties,
|
|
|
|
hostAttributes: directive.hostAttributes,
|
|
|
|
lifecycleHooks: directive.lifecycleHooks,
|
|
|
|
providers: directive.providers,
|
|
|
|
viewProviders: directive.viewProviders,
|
|
|
|
queries: directive.queries,
|
|
|
|
viewQueries: directive.viewQueries,
|
|
|
|
precompile: directive.precompile,
|
|
|
|
template: template
|
|
|
|
});
|
|
|
|
}
|