fix(WebWorker): remove the platform-browser dependency on compiler
This commit is contained in:
@ -0,0 +1,108 @@
|
||||
import {
|
||||
reflector,
|
||||
ReflectiveInjector,
|
||||
coreLoadAndBootstrap,
|
||||
Type,
|
||||
ComponentRef
|
||||
} from '@angular/core';
|
||||
|
||||
import {COMPILER_PROVIDERS, XHR} from '@angular/compiler';
|
||||
import {CachedXHR} from '../src/xhr/xhr_cache';
|
||||
import {isPresent} from '../src/facade/lang';
|
||||
import {XHRImpl} from '../src/xhr/xhr_impl';
|
||||
import {
|
||||
browserPlatform,
|
||||
BROWSER_APP_COMMON_PROVIDERS,
|
||||
} from '@angular/platform-browser';
|
||||
import {ReflectionCapabilities} from '../core_private';
|
||||
|
||||
export const CACHED_TEMPLATE_PROVIDER: Array<any /*Type | Provider | any[]*/> =
|
||||
/*@ts2dart_const*/[{provide: XHR, useClass: CachedXHR}];
|
||||
|
||||
/**
|
||||
* An array of providers that should be passed into `application()` when bootstrapping a component.
|
||||
*/
|
||||
export const BROWSER_APP_DYNAMIC_PROVIDERS: Array<any /*Type | Provider | any[]*/> =
|
||||
/*@ts2dart_const*/[
|
||||
BROWSER_APP_COMMON_PROVIDERS,
|
||||
COMPILER_PROVIDERS,
|
||||
{provide: XHR, useClass: XHRImpl},
|
||||
];
|
||||
|
||||
/**
|
||||
* Bootstrapping for Angular applications.
|
||||
*
|
||||
* You instantiate an Angular application by explicitly specifying a component to use
|
||||
* as the root component for your application via the `bootstrap()` method.
|
||||
*
|
||||
* ## Simple Example
|
||||
*
|
||||
* Assuming this `index.html`:
|
||||
*
|
||||
* ```html
|
||||
* <html>
|
||||
* <!-- load Angular script tags here. -->
|
||||
* <body>
|
||||
* <my-app>loading...</my-app>
|
||||
* </body>
|
||||
* </html>
|
||||
* ```
|
||||
*
|
||||
* An application is bootstrapped inside an existing browser DOM, typically `index.html`.
|
||||
* Unlike Angular 1, Angular 2 does not compile/process providers in `index.html`. This is
|
||||
* mainly for security reasons, as well as architectural changes in Angular 2. This means
|
||||
* that `index.html` can safely be processed using server-side technologies such as
|
||||
* providers. Bindings can thus use double-curly `{{ syntax }}` without collision from
|
||||
* Angular 2 component double-curly `{{ syntax }}`.
|
||||
*
|
||||
* We can use this script code:
|
||||
*
|
||||
* {@example core/ts/bootstrap/bootstrap.ts region='bootstrap'}
|
||||
*
|
||||
* When the app developer invokes `bootstrap()` with the root component `MyApp` as its
|
||||
* argument, Angular performs the following tasks:
|
||||
*
|
||||
* 1. It uses the component's `selector` property to locate the DOM element which needs
|
||||
* to be upgraded into the angular component.
|
||||
* 2. It creates a new child injector (from the platform injector). Optionally, you can
|
||||
* also override the injector configuration for an app by invoking `bootstrap` with the
|
||||
* `componentInjectableBindings` argument.
|
||||
* 3. It creates a new `Zone` and connects it to the angular application's change detection
|
||||
* domain instance.
|
||||
* 4. It creates an emulated or shadow DOM on the selected component's host element and loads the
|
||||
* template into it.
|
||||
* 5. It instantiates the specified component.
|
||||
* 6. Finally, Angular performs change detection to apply the initial data providers for the
|
||||
* application.
|
||||
*
|
||||
*
|
||||
* ## Bootstrapping Multiple Applications
|
||||
*
|
||||
* When working within a browser window, there are many singleton resources: cookies, title,
|
||||
* location, and others. Angular services that represent these resources must likewise be
|
||||
* shared across all Angular applications that occupy the same browser window. For this
|
||||
* reason, Angular creates exactly one global platform object which stores all shared
|
||||
* services, and each angular application injector has the platform injector as its parent.
|
||||
*
|
||||
* Each application has its own private injector as well. When there are multiple
|
||||
* applications on a page, Angular treats each application injector's services as private
|
||||
* to that application.
|
||||
*
|
||||
* ## API
|
||||
*
|
||||
* - `appComponentType`: The root component which should act as the application. This is
|
||||
* a reference to a `Type` which is annotated with `@Component(...)`.
|
||||
* - `customProviders`: An additional set of providers that can be added to the
|
||||
* app injector to override default injection behavior.
|
||||
*
|
||||
* Returns a `Promise` of {@link ComponentRef}.
|
||||
*/
|
||||
export function bootstrap(
|
||||
appComponentType: Type,
|
||||
customProviders?: Array<any /*Type | Provider | any[]*/>): Promise<ComponentRef<any>> {
|
||||
reflector.reflectionCapabilities = new ReflectionCapabilities();
|
||||
var appInjector = ReflectiveInjector.resolveAndCreate(
|
||||
[BROWSER_APP_DYNAMIC_PROVIDERS, isPresent(customProviders) ? customProviders : []],
|
||||
browserPlatform().injector);
|
||||
return coreLoadAndBootstrap(appInjector, appComponentType);
|
||||
}
|
@ -0,0 +1,5 @@
|
||||
/**
|
||||
* All channels used by angular's WebWorker components are listed here.
|
||||
* You should not use these channels in your application code.
|
||||
*/
|
||||
export const XHR_CHANNEL = "ng-XHR";
|
@ -0,0 +1,23 @@
|
||||
import {Injectable} from '@angular/core';
|
||||
import {PRIMITIVE, ServiceMessageBrokerFactory} from '@angular/platform-browser';
|
||||
import {XHR_CHANNEL} from '../shared/messaging_api';
|
||||
import {XHR} from '@angular/compiler';
|
||||
import {FunctionWrapper} from '../../facade/lang';
|
||||
|
||||
/**
|
||||
* XHR requests triggered on the worker side are executed on the UI side.
|
||||
*
|
||||
* This is only strictly required for Dart where the isolates do not have access to XHRs.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
@Injectable()
|
||||
export class MessageBasedXHRImpl {
|
||||
constructor(private _brokerFactory: ServiceMessageBrokerFactory, private _xhr: XHR) {}
|
||||
|
||||
start(): void {
|
||||
var broker = this._brokerFactory.createMessageBroker(XHR_CHANNEL);
|
||||
broker.registerMethod("get", [PRIMITIVE], FunctionWrapper.bind(this._xhr.get, this._xhr),
|
||||
PRIMITIVE);
|
||||
}
|
||||
}
|
@ -0,0 +1,31 @@
|
||||
import {Injectable} from '@angular/core';
|
||||
import {XHR} from '@angular/compiler';
|
||||
import {
|
||||
FnArg,
|
||||
UiArguments,
|
||||
ClientMessageBroker,
|
||||
ClientMessageBrokerFactory
|
||||
} from '@angular/platform-browser';
|
||||
import {XHR_CHANNEL} from '../shared/messaging_api';
|
||||
|
||||
/**
|
||||
* Implementation of compiler/xhr that relays XHR requests to the UI side where they are sent
|
||||
* and the result is proxied back to the worker.
|
||||
*
|
||||
* This is only strictly required for Dart where isolates do not have access to the XHRs.
|
||||
*/
|
||||
@Injectable()
|
||||
export class WebWorkerXHRImpl extends XHR {
|
||||
private _messageBroker: ClientMessageBroker;
|
||||
|
||||
constructor(messageBrokerFactory: ClientMessageBrokerFactory) {
|
||||
super();
|
||||
this._messageBroker = messageBrokerFactory.createMessageBroker(XHR_CHANNEL);
|
||||
}
|
||||
|
||||
get(url: string): Promise<string> {
|
||||
var fnArgs: FnArg[] = [new FnArg(url, null)];
|
||||
var args: UiArguments = new UiArguments("get", fnArgs);
|
||||
return this._messageBroker.runOnService(args, String);
|
||||
}
|
||||
}
|
28
modules/@angular/platform-browser-dynamic/src/worker_app.ts
Normal file
28
modules/@angular/platform-browser-dynamic/src/worker_app.ts
Normal file
@ -0,0 +1,28 @@
|
||||
import {WORKER_APP_APPLICATION_PROVIDERS, workerAppPlatform} from '@angular/platform-browser';
|
||||
import {COMPILER_PROVIDERS, XHR} from '@angular/compiler';
|
||||
import {WebWorkerXHRImpl} from './web_workers/worker/xhr_impl';
|
||||
import {isPresent} from './facade/lang';
|
||||
|
||||
import {
|
||||
PlatformRef,
|
||||
Type,
|
||||
ComponentRef,
|
||||
ReflectiveInjector,
|
||||
coreLoadAndBootstrap,
|
||||
} from '@angular/core';
|
||||
|
||||
export const WORKER_APP_DYNAMIC_APPLICATION_PROVIDERS: Array<any /*Type | Provider | any[]*/> = [
|
||||
WORKER_APP_APPLICATION_PROVIDERS,
|
||||
COMPILER_PROVIDERS,
|
||||
WebWorkerXHRImpl,
|
||||
/* @ts2dart_Provider */ {provide: XHR, useExisting: WebWorkerXHRImpl}
|
||||
];
|
||||
|
||||
export function bootstrapApp(
|
||||
appComponentType: Type,
|
||||
customProviders?: Array<any /*Type | Provider | any[]*/>): Promise<ComponentRef<any>> {
|
||||
var appInjector = ReflectiveInjector.resolveAndCreate(
|
||||
[WORKER_APP_DYNAMIC_APPLICATION_PROVIDERS, isPresent(customProviders) ? customProviders : []],
|
||||
workerAppPlatform().injector);
|
||||
return coreLoadAndBootstrap(appInjector, appComponentType);
|
||||
}
|
@ -0,0 +1,38 @@
|
||||
import {XHR} from "@angular/compiler";
|
||||
import {XHRImpl} from "./xhr/xhr_impl";
|
||||
import {MessageBasedXHRImpl} from "./web_workers/ui/xhr_impl";
|
||||
import {
|
||||
WORKER_RENDER_APPLICATION_PROVIDERS,
|
||||
WORKER_RENDER_STARTABLE_MESSAGING_SERVICE
|
||||
} from '@angular/platform-browser';
|
||||
import {
|
||||
ApplicationRef,
|
||||
PlatformRef,
|
||||
ReflectiveInjector,
|
||||
} from '@angular/core';
|
||||
import {workerRenderPlatform, WORKER_SCRIPT} from '@angular/platform-browser';
|
||||
import {isPresent} from './facade/lang';
|
||||
import {PromiseWrapper} from './facade/async';
|
||||
|
||||
export const WORKER_RENDER_DYNAMIC_APPLICATION_PROVIDERS: Array<any /*Type | Provider | any[]*/> = [
|
||||
WORKER_RENDER_APPLICATION_PROVIDERS,
|
||||
/* @ts2dart_Provider */ {provide: XHR, useClass: XHRImpl},
|
||||
MessageBasedXHRImpl,
|
||||
/* @ts2dart_Provider */ {provide: WORKER_RENDER_STARTABLE_MESSAGING_SERVICE, useExisting: MessageBasedXHRImpl, multi: true},
|
||||
];
|
||||
|
||||
export function bootstrapRender(
|
||||
workerScriptUri: string,
|
||||
customProviders?: Array<any /*Type | Provider | any[]*/>): Promise<ApplicationRef> {
|
||||
var app = ReflectiveInjector.resolveAndCreate(
|
||||
[
|
||||
WORKER_RENDER_DYNAMIC_APPLICATION_PROVIDERS,
|
||||
/* @ts2dart_Provider */ {provide: WORKER_SCRIPT, useValue: workerScriptUri},
|
||||
isPresent(customProviders) ? customProviders : []
|
||||
],
|
||||
workerRenderPlatform().injector);
|
||||
// Return a promise so that we keep the same semantics as Dart,
|
||||
// and we might want to wait for the app side to come up
|
||||
// in the future...
|
||||
return PromiseWrapper.resolve(app.get(ApplicationRef));
|
||||
}
|
Reference in New Issue
Block a user