perf(platform-browser): don’t use DomAdapter any more
But use the DOM apis directly. This also creates a separate `ServerRenderer` implementation for `platform-server` as it previously reused the `BrowserRenderer`.
This commit is contained in:
Tobias Bosch
@ -11,3 +11,13 @@ import {__core_private__ as r} from '@angular/core';
|
||||
export var reflector: typeof r.reflector = r.reflector;
|
||||
export var ReflectionCapabilities: typeof r.ReflectionCapabilities = r.ReflectionCapabilities;
|
||||
export var Console: typeof r.Console = r.Console;
|
||||
export type AnimationKeyframe = typeof r._AnimationKeyframe;
|
||||
export var AnimationKeyframe: typeof r.AnimationKeyframe = r.AnimationKeyframe;
|
||||
export type AnimationPlayer = typeof r._AnimationPlayer;
|
||||
export var AnimationPlayer: typeof r.AnimationPlayer = r.AnimationPlayer;
|
||||
export type AnimationStyles = typeof r._AnimationStyles;
|
||||
export var AnimationStyles: typeof r.AnimationStyles = r.AnimationStyles;
|
||||
export type RenderDebugInfo = typeof r._RenderDebugInfo;
|
||||
export var RenderDebugInfo: typeof r.RenderDebugInfo = r.RenderDebugInfo;
|
||||
export type DebugDomRootRenderer = typeof r._DebugDomRootRenderer;
|
||||
export var DebugDomRootRenderer: typeof r.DebugDomRootRenderer = r.DebugDomRootRenderer;
|
||||
|
||||
@ -12,3 +12,11 @@ export type DomAdapter = typeof _._DomAdapter;
|
||||
export var DomAdapter: typeof _.DomAdapter = _.DomAdapter;
|
||||
export var setRootDomAdapter: typeof _.setRootDomAdapter = _.setRootDomAdapter;
|
||||
export var getDOM: typeof _.getDOM = _.getDOM;
|
||||
export var SharedStylesHost: typeof _.SharedStylesHost = _.SharedStylesHost;
|
||||
export type SharedStylesHost = typeof _.SharedStylesHost;
|
||||
export var NAMESPACE_URIS: typeof _.NAMESPACE_URIS = _.NAMESPACE_URIS;
|
||||
export var shimContentAttribute: typeof _.shimContentAttribute = _.shimContentAttribute;
|
||||
export var shimHostAttribute: typeof _.shimHostAttribute = _.shimHostAttribute;
|
||||
export var flattenStyles: typeof _.flattenStyles = _.flattenStyles;
|
||||
export var splitNamespace: typeof _.splitNamespace = _.splitNamespace;
|
||||
export var isNamespaced: typeof _.isNamespaced = _.isNamespaced;
|
||||
|
||||
@ -8,10 +8,13 @@
|
||||
|
||||
import {PlatformLocation} from '@angular/common';
|
||||
import {platformCoreDynamic} from '@angular/compiler';
|
||||
import {NgModule, PLATFORM_INITIALIZER, PlatformRef, Provider, createPlatformFactory, platformCore} from '@angular/core';
|
||||
import {NgModule, PLATFORM_INITIALIZER, PlatformRef, Provider, RootRenderer, createPlatformFactory, isDevMode, platformCore} from '@angular/core';
|
||||
import {BrowserModule} from '@angular/platform-browser';
|
||||
|
||||
import {Parse5DomAdapter} from './parse5_adapter';
|
||||
import {DebugDomRootRenderer} from './private_import_core';
|
||||
import {SharedStylesHost} from './private_import_platform-browser';
|
||||
import {ServerRootRenderer} from './server_renderer';
|
||||
|
||||
function notSupported(feature: string): Error {
|
||||
throw new Error(`platform-server does not support '${feature}'.`);
|
||||
@ -39,12 +42,26 @@ function initParse5Adapter() {
|
||||
Parse5DomAdapter.makeCurrent();
|
||||
}
|
||||
|
||||
|
||||
export function _createConditionalRootRenderer(rootRenderer: any) {
|
||||
if (isDevMode()) {
|
||||
return new DebugDomRootRenderer(rootRenderer);
|
||||
}
|
||||
return rootRenderer;
|
||||
}
|
||||
|
||||
export const SERVER_RENDER_PROVIDERS: Provider[] = [
|
||||
ServerRootRenderer,
|
||||
{provide: RootRenderer, useFactory: _createConditionalRootRenderer, deps: [ServerRootRenderer]},
|
||||
{provide: SharedStylesHost, useClass: SharedStylesHost},
|
||||
];
|
||||
|
||||
/**
|
||||
* The ng module for the server.
|
||||
*
|
||||
* @experimental
|
||||
*/
|
||||
@NgModule({imports: [BrowserModule]})
|
||||
@NgModule({imports: [BrowserModule], providers: SERVER_RENDER_PROVIDERS})
|
||||
export class ServerModule {
|
||||
}
|
||||
|
||||
|
||||
243
modules/@angular/platform-server/src/server_renderer.ts
Normal file
243
modules/@angular/platform-server/src/server_renderer.ts
Normal file
@ -0,0 +1,243 @@
|
||||
/**
|
||||
* @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
|
||||
*/
|
||||
|
||||
import {APP_ID, Inject, Injectable, NgZone, RenderComponentType, Renderer, RootRenderer, ViewEncapsulation} from '@angular/core';
|
||||
import {AnimationDriver, DOCUMENT} from '@angular/platform-browser';
|
||||
|
||||
import {isBlank, isPresent, stringify} from './facade/lang';
|
||||
import {AnimationKeyframe, AnimationPlayer, AnimationStyles, RenderDebugInfo} from './private_import_core';
|
||||
import {NAMESPACE_URIS, SharedStylesHost, flattenStyles, getDOM, isNamespaced, shimContentAttribute, shimHostAttribute, splitNamespace} from './private_import_platform-browser';
|
||||
|
||||
const TEMPLATE_COMMENT_TEXT = 'template bindings={}';
|
||||
const TEMPLATE_BINDINGS_EXP = /^template bindings=(.*)$/;
|
||||
|
||||
@Injectable()
|
||||
export class ServerRootRenderer {
|
||||
protected registeredComponents: Map<string, ServerRenderer> = new Map<string, ServerRenderer>();
|
||||
constructor(
|
||||
@Inject(DOCUMENT) public document: any, public sharedStylesHost: SharedStylesHost,
|
||||
public animationDriver: AnimationDriver, @Inject(APP_ID) public appId: string,
|
||||
private _zone: NgZone) {}
|
||||
renderComponent(componentProto: RenderComponentType): Renderer {
|
||||
var renderer = this.registeredComponents.get(componentProto.id);
|
||||
if (!renderer) {
|
||||
renderer = new ServerRenderer(
|
||||
this, componentProto, this.animationDriver, `${this.appId}-${componentProto.id}`,
|
||||
this._zone);
|
||||
this.registeredComponents.set(componentProto.id, renderer);
|
||||
}
|
||||
return renderer;
|
||||
}
|
||||
}
|
||||
|
||||
export class ServerRenderer implements Renderer {
|
||||
private _contentAttr: string;
|
||||
private _hostAttr: string;
|
||||
private _styles: string[];
|
||||
|
||||
constructor(
|
||||
private _rootRenderer: ServerRootRenderer, private componentProto: RenderComponentType,
|
||||
private _animationDriver: AnimationDriver, styleShimId: string, private _zone: NgZone) {
|
||||
this._styles = flattenStyles(styleShimId, componentProto.styles, []);
|
||||
if (componentProto.encapsulation === ViewEncapsulation.Native) {
|
||||
throw new Error('Native encapsulation is not supported on the server!');
|
||||
}
|
||||
if (this.componentProto.encapsulation === ViewEncapsulation.Emulated) {
|
||||
this._contentAttr = shimContentAttribute(styleShimId);
|
||||
this._hostAttr = shimHostAttribute(styleShimId);
|
||||
} else {
|
||||
this._contentAttr = null;
|
||||
this._hostAttr = null;
|
||||
}
|
||||
}
|
||||
|
||||
selectRootElement(selectorOrNode: string|any, debugInfo: RenderDebugInfo): Element {
|
||||
var el: any /** TODO #9100 */;
|
||||
if (typeof selectorOrNode === 'string') {
|
||||
el = getDOM().querySelector(this._rootRenderer.document, selectorOrNode);
|
||||
if (isBlank(el)) {
|
||||
throw new Error(`The selector "${selectorOrNode}" did not match any elements`);
|
||||
}
|
||||
} else {
|
||||
el = selectorOrNode;
|
||||
}
|
||||
getDOM().clearNodes(el);
|
||||
return el;
|
||||
}
|
||||
|
||||
createElement(parent: Element, name: string, debugInfo: RenderDebugInfo): Node {
|
||||
var el: any;
|
||||
if (isNamespaced(name)) {
|
||||
var nsAndName = splitNamespace(name);
|
||||
el = getDOM().createElementNS(NAMESPACE_URIS[nsAndName[0]], nsAndName[1]);
|
||||
} else {
|
||||
el = getDOM().createElement(name);
|
||||
}
|
||||
if (isPresent(this._contentAttr)) {
|
||||
getDOM().setAttribute(el, this._contentAttr, '');
|
||||
}
|
||||
if (isPresent(parent)) {
|
||||
getDOM().appendChild(parent, el);
|
||||
}
|
||||
return el;
|
||||
}
|
||||
|
||||
createViewRoot(hostElement: any): any {
|
||||
var nodesParent: any /** TODO #9100 */;
|
||||
if (isPresent(this._hostAttr)) {
|
||||
getDOM().setAttribute(hostElement, this._hostAttr, '');
|
||||
}
|
||||
nodesParent = hostElement;
|
||||
return nodesParent;
|
||||
}
|
||||
|
||||
createTemplateAnchor(parentElement: any, debugInfo: RenderDebugInfo): any {
|
||||
var comment = getDOM().createComment(TEMPLATE_COMMENT_TEXT);
|
||||
if (isPresent(parentElement)) {
|
||||
getDOM().appendChild(parentElement, comment);
|
||||
}
|
||||
return comment;
|
||||
}
|
||||
|
||||
createText(parentElement: any, value: string, debugInfo: RenderDebugInfo): any {
|
||||
var node = getDOM().createTextNode(value);
|
||||
if (isPresent(parentElement)) {
|
||||
getDOM().appendChild(parentElement, node);
|
||||
}
|
||||
return node;
|
||||
}
|
||||
|
||||
projectNodes(parentElement: any, nodes: any[]) {
|
||||
if (isBlank(parentElement)) return;
|
||||
appendNodes(parentElement, nodes);
|
||||
}
|
||||
|
||||
attachViewAfter(node: any, viewRootNodes: any[]) { moveNodesAfterSibling(node, viewRootNodes); }
|
||||
|
||||
detachView(viewRootNodes: any[]) {
|
||||
for (var i = 0; i < viewRootNodes.length; i++) {
|
||||
getDOM().remove(viewRootNodes[i]);
|
||||
}
|
||||
}
|
||||
|
||||
destroyView(hostElement: any, viewAllNodes: any[]) {}
|
||||
|
||||
listen(renderElement: any, name: string, callback: Function): Function {
|
||||
var outsideHandler = (event: any) => this._zone.runGuarded(() => callback(event));
|
||||
return this._zone.runOutsideAngular(
|
||||
() => getDOM().onAndCancel(renderElement, name, outsideHandler));
|
||||
}
|
||||
|
||||
listenGlobal(target: string, name: string, callback: Function): Function {
|
||||
var renderElement = getDOM().getGlobalEventTarget(target);
|
||||
return this.listen(renderElement, name, callback);
|
||||
}
|
||||
|
||||
setElementProperty(renderElement: any, propertyName: string, propertyValue: any): void {
|
||||
getDOM().setProperty(renderElement, propertyName, propertyValue);
|
||||
}
|
||||
|
||||
setElementAttribute(renderElement: any, attributeName: string, attributeValue: string): void {
|
||||
let attrNs: string;
|
||||
let attrNameWithoutNs = attributeName;
|
||||
if (isNamespaced(attributeName)) {
|
||||
const nsAndName = splitNamespace(attributeName);
|
||||
attrNameWithoutNs = nsAndName[1];
|
||||
attributeName = nsAndName[0] + ':' + nsAndName[1];
|
||||
attrNs = NAMESPACE_URIS[nsAndName[0]];
|
||||
}
|
||||
if (isPresent(attributeValue)) {
|
||||
if (isPresent(attrNs)) {
|
||||
getDOM().setAttributeNS(renderElement, attrNs, attributeName, attributeValue);
|
||||
} else {
|
||||
getDOM().setAttribute(renderElement, attributeName, attributeValue);
|
||||
}
|
||||
} else {
|
||||
if (isPresent(attrNs)) {
|
||||
getDOM().removeAttributeNS(renderElement, attrNs, attrNameWithoutNs);
|
||||
} else {
|
||||
getDOM().removeAttribute(renderElement, attributeName);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setBindingDebugInfo(renderElement: any, propertyName: string, propertyValue: string): void {
|
||||
if (getDOM().isCommentNode(renderElement)) {
|
||||
const existingBindings =
|
||||
getDOM().getText(renderElement).replace(/\n/g, '').match(TEMPLATE_BINDINGS_EXP);
|
||||
var parsedBindings = JSON.parse(existingBindings[1]);
|
||||
(parsedBindings as any /** TODO #9100 */)[propertyName] = propertyValue;
|
||||
getDOM().setText(
|
||||
renderElement,
|
||||
TEMPLATE_COMMENT_TEXT.replace('{}', JSON.stringify(parsedBindings, null, 2)));
|
||||
} else {
|
||||
this.setElementAttribute(renderElement, propertyName, propertyValue);
|
||||
}
|
||||
}
|
||||
|
||||
setElementClass(renderElement: any, className: string, isAdd: boolean): void {
|
||||
if (isAdd) {
|
||||
getDOM().addClass(renderElement, className);
|
||||
} else {
|
||||
getDOM().removeClass(renderElement, className);
|
||||
}
|
||||
}
|
||||
|
||||
setElementStyle(renderElement: any, styleName: string, styleValue: string): void {
|
||||
if (isPresent(styleValue)) {
|
||||
getDOM().setStyle(renderElement, styleName, stringify(styleValue));
|
||||
} else {
|
||||
getDOM().removeStyle(renderElement, styleName);
|
||||
}
|
||||
}
|
||||
|
||||
invokeElementMethod(renderElement: any, methodName: string, args: any[]): void {
|
||||
getDOM().invoke(renderElement, methodName, args);
|
||||
}
|
||||
|
||||
setText(renderNode: any, text: string): void { getDOM().setText(renderNode, text); }
|
||||
|
||||
animate(
|
||||
element: any, startingStyles: AnimationStyles, keyframes: AnimationKeyframe[],
|
||||
duration: number, delay: number, easing: string): AnimationPlayer {
|
||||
return this._animationDriver.animate(
|
||||
element, startingStyles, keyframes, duration, delay, easing);
|
||||
}
|
||||
}
|
||||
|
||||
function moveNodesAfterSibling(sibling: any /** TODO #9100 */, nodes: any /** TODO #9100 */) {
|
||||
var parent = getDOM().parentElement(sibling);
|
||||
if (nodes.length > 0 && isPresent(parent)) {
|
||||
var nextSibling = getDOM().nextSibling(sibling);
|
||||
if (isPresent(nextSibling)) {
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
getDOM().insertBefore(nextSibling, nodes[i]);
|
||||
}
|
||||
} else {
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
getDOM().appendChild(parent, nodes[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function appendNodes(parent: any /** TODO #9100 */, nodes: any /** TODO #9100 */) {
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
getDOM().appendChild(parent, nodes[i]);
|
||||
}
|
||||
}
|
||||
|
||||
function decoratePreventDefault(eventHandler: Function): Function {
|
||||
return (event: any /** TODO #9100 */) => {
|
||||
var allowDefaultBehavior = eventHandler(event);
|
||||
if (allowDefaultBehavior === false) {
|
||||
// TODO(tbosch): move preventDefault into event plugins...
|
||||
getDOM().preventDefault(event);
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -9,6 +9,9 @@
|
||||
import {platformCoreDynamicTesting} from '@angular/compiler/testing';
|
||||
import {NgModule, PlatformRef, Provider, createPlatformFactory} from '@angular/core';
|
||||
import {BrowserDynamicTestingModule} from '@angular/platform-browser-dynamic/testing';
|
||||
|
||||
import {SERVER_RENDER_PROVIDERS} from '../src/server';
|
||||
|
||||
import {INTERNAL_SERVER_PLATFORM_PROVIDERS} from './private_import_platform_server';
|
||||
|
||||
|
||||
@ -25,6 +28,6 @@ export const platformServerTesting = createPlatformFactory(
|
||||
*
|
||||
* @experimental API related to bootstrapping are still under review.
|
||||
*/
|
||||
@NgModule({exports: [BrowserDynamicTestingModule]})
|
||||
@NgModule({exports: [BrowserDynamicTestingModule], providers: SERVER_RENDER_PROVIDERS})
|
||||
export class ServerTestingModule {
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user