Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(compiler): Add implementation for a XHR that uses a template cache to load template files. #7940

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions modules/angular2/platform/browser.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
export {AngularEntrypoint} from 'angular2/src/core/angular_entrypoint';
export {
BROWSER_PROVIDERS,
CACHED_TEMPLATE_PROVIDER,
ELEMENT_PROBE_PROVIDERS,
ELEMENT_PROBE_PROVIDERS_PROD_MODE,
inspectNativeElement,
Expand Down
9 changes: 6 additions & 3 deletions modules/angular2/platform/testing/browser.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,15 @@ import {
TEST_BROWSER_STATIC_PLATFORM_PROVIDERS,
ADDITIONAL_TEST_BROWSER_PROVIDERS
} from 'angular2/platform/testing/browser_static';

import {BROWSER_APP_PROVIDERS} from 'angular2/platform/browser';


import {CONST_EXPR} from 'angular2/src/facade/lang';

/**
* Providers for using template cache to avoid actual XHR.
* Re-exported here so that tests import from a single place.
*/
export {CACHED_TEMPLATE_PROVIDER} from 'angular2/platform/browser';

/**
* Default patform providers for testing.
*/
Expand Down
48 changes: 48 additions & 0 deletions modules/angular2/src/platform/browser/xhr_cache.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
library angular2.src.services.xhr_cache;

import 'dart:async' show Future;
import 'dart:html';
import 'dart:js' as js;
import 'package:angular2/core.dart';
import 'package:angular2/src/compiler/xhr.dart';
import 'package:angular2/src/facade/exceptions.dart' show BaseException;

/**
* An implementation of XHR that uses a template cache to avoid doing an actual
* XHR.
*
* The template cache needs to be built and loaded into window.$templateCache
* via a separate mechanism.
*/
@Injectable()
class CachedXHR extends XHR {
js.JsObject _cache;
String _baseUri;

CachedXHR() {
if (js.context.hasProperty(r'$templateCache')) {
this._cache = js.context[r'$templateCache'];
} else {
throw new BaseException(
r'CachedXHR: Template cache was not found in $templateCache.');
}
this._baseUri = window.location.protocol +
'//' +
window.location.host +
window.location.pathname;
int lastSlash = this._baseUri.lastIndexOf('/');
this._baseUri = this._baseUri.substring(0, lastSlash + 1);
}

Future<String> get(String url) {
if (url.startsWith(this._baseUri)) {
url = url.substring(this._baseUri.length);
}
if (this._cache.hasProperty(url)) {
return new Future.value(this._cache[url]);
} else {
return new Future.error(
'CachedXHR: Did not find cached template for ' + url);
}
}
}
31 changes: 31 additions & 0 deletions modules/angular2/src/platform/browser/xhr_cache.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import {XHR} from 'angular2/src/compiler/xhr';
import {BaseException} from 'angular2/src/facade/exceptions';
import {global} from 'angular2/src/facade/lang';
import {PromiseWrapper} from 'angular2/src/facade/promise';

/**
* An implementation of XHR that uses a template cache to avoid doing an actual
* XHR.
*
* The template cache needs to be built and loaded into window.$templateCache
* via a separate mechanism.
*/
export class CachedXHR extends XHR {
private _cache: {[url: string]: string};

constructor() {
super();
this._cache = (<any>global).$templateCache;
if (this._cache == null) {
throw new BaseException('CachedXHR: Template cache was not found in $templateCache.');
}
}

get(url: string): Promise<string> {
if (this._cache.hasOwnProperty(url)) {
return PromiseWrapper.resolve(this._cache[url]);
} else {
return PromiseWrapper.reject('CachedXHR: Did not find cached template for ' + url, null);
}
}
}
6 changes: 5 additions & 1 deletion modules/angular2/src/platform/browser_common.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {CONST_EXPR, IS_DART} from 'angular2/src/facade/lang';
import {provide, Provider, Injector, OpaqueToken} from 'angular2/src/core/di';

import {XHR} from 'angular2/src/compiler/xhr';
import {
PLATFORM_INITIALIZER,
PLATFORM_DIRECTIVES,
Expand Down Expand Up @@ -28,6 +28,7 @@ import {BrowserDetails} from "angular2/src/animate/browser_details";
import {AnimationBuilder} from "angular2/src/animate/animation_builder";
import {BrowserDomAdapter} from './browser/browser_adapter';
import {BrowserGetTestability} from 'angular2/src/platform/browser/testability';
import {CachedXHR} from 'angular2/src/platform/browser/xhr_cache';
import {wtfInit} from 'angular2/src/core/profile/wtf_init';
import {EventManager, EVENT_MANAGER_PLUGINS} from "angular2/src/platform/dom/events/event_manager";
import {ELEMENT_PROBE_PROVIDERS} from 'angular2/platform/common_dom';
Expand Down Expand Up @@ -88,6 +89,9 @@ export const BROWSER_APP_COMMON_PROVIDERS: Array<any /*Type | Provider | any[]*/
ELEMENT_PROBE_PROVIDERS
]);

export const CACHED_TEMPLATE_PROVIDER: Array<any /*Type | Provider | any[]*/> =
CONST_EXPR([new Provider(XHR, {useClass: CachedXHR})]);

export function initDomAdapter() {
BrowserDomAdapter.makeCurrent();
wtfInit();
Expand Down
16 changes: 16 additions & 0 deletions modules/angular2/test/platform/browser/xhr_cache_setter.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import 'dart:js' as js;

void setTemplateCache(Map cache) {
if (cache == null) {
if (js.context.hasProperty(r'$templateCache')) {
js.context.deleteProperty(r'$templateCache');
}
return;
}

js.JsObject jsMap = new js.JsObject(js.context['Object']);
for (String key in cache.keys) {
jsMap[key] = cache[key];
}
js.context[r'$templateCache'] = jsMap;
}
3 changes: 3 additions & 0 deletions modules/angular2/test/platform/browser/xhr_cache_setter.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export function setTemplateCache(cache): void {
(<any>window).$templateCache = cache;
}
83 changes: 83 additions & 0 deletions modules/angular2/test/platform/browser/xhr_cache_spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import {Component, provide} from 'angular2/core';
import {UrlResolver, XHR} from 'angular2/compiler';
import {
AsyncTestCompleter,
beforeEach,
beforeEachProviders,
ComponentFixture,
ddescribe,
describe,
expect,
fakeAsync,
iit,
inject,
it,
TestComponentBuilder,
tick,
xit
} from 'angular2/testing_internal';
import {BaseException} from 'angular2/src/facade/exceptions';
import {CachedXHR} from 'angular2/src/platform/browser/xhr_cache';
import {setTemplateCache} from './xhr_cache_setter';

export function main() {
describe('CachedXHR', () => {
var xhr: CachedXHR;

function createCachedXHR(): CachedXHR {
setTemplateCache({'test.html': '<div>Hello</div>'});
return new CachedXHR();
}
beforeEachProviders(() => [
provide(UrlResolver, {useClass: TestUrlResolver}),
provide(XHR, {useFactory: createCachedXHR})
]);

it('should throw exception if $templateCache is not found', () => {
setTemplateCache(null);
expect(() => { xhr = new CachedXHR(); })
.toThrowErrorWith('CachedXHR: Template cache was not found in $templateCache.');
});

it('should resolve the Promise with the cached file content on success',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you also add a test that creates a component via fakeAsync and the cache?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

inject([AsyncTestCompleter], (async) => {
setTemplateCache({'test.html': '<div>Hello</div>'});
xhr = new CachedXHR();
xhr.get('test.html')
.then((text) => {
expect(text).toEqual('<div>Hello</div>');
async.done();
});
}));

it('should reject the Promise on failure', inject([AsyncTestCompleter], (async) => {
xhr = new CachedXHR();
xhr.get('unknown.html')
.then((text) => { throw new BaseException('Not expected to succeed.'); })
.catch((error) => { async.done(); });
}));

it('should allow fakeAsync Tests to load components with templateUrl synchronously',
inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
let fixture: ComponentFixture;
tcb.createAsync(TestComponent).then((f) => { fixture = f; });

// This should initialize the fixture.
tick();

expect(fixture.debugElement.children[0].nativeElement).toHaveText('Hello');
})));
});
}

@Component({selector: 'test-cmp', templateUrl: 'test.html'})
class TestComponent {
}

class TestUrlResolver extends UrlResolver {
resolve(baseUrl: string, url: string): string {
// Don't use baseUrl to get the same URL as templateUrl.
// This is to remove any difference between Dart and TS tests.
return url;
}
}
1 change: 1 addition & 0 deletions modules/angular2/test/public_api_spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -288,6 +288,7 @@ var NG_PLATFORM_BROWSER = [
'BROWSER_PROVIDERS',
'BrowserDomAdapter',
'By',
'CACHED_TEMPLATE_PROVIDER',
'DOCUMENT',
'ELEMENT_PROBE_PROVIDERS',
'ELEMENT_PROBE_PROVIDERS_PROD_MODE',
Expand Down