cargdev/angular
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(core): remove deprecated Renderer (#33019)

Browse Source 
Removes the `Renderer` and related symbols which have been deprecated since version 4.

BREAKING CHANGES:
* `Renderer` has been removed. Use `Renderer2` instead.
* `RenderComponentType` has been removed. Use `RendererType2` instead.
* `RootRenderer` has been removed. Use `RendererFactory2` instead.

PR Close #33019
This commit is contained in:
crisbeto
2019-10-07 22:53:02 +02:00
committed by Alex Rickabaugh
parent c507dda21a
commit 2265cb5938
14 changed files with 20 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/core/src/core_private_export.ts
View File

@ -23,7 +23,6 @@ export {CodegenComponentFactoryResolver as ɵCodegenComponentFactoryResolver} fr
export {clearResolutionOfComponentResourcesQueue as ɵclearResolutionOfComponentResourcesQueue, resolveComponentResources as ɵresolveComponentResources} from './metadata/resource_loading';
export {ReflectionCapabilities as ɵReflectionCapabilities} from './reflection/reflection_capabilities';
export {GetterFn as ɵGetterFn, MethodFn as ɵMethodFn, SetterFn as ɵSetterFn} from './reflection/types';
export {DirectRenderer as ɵDirectRenderer, RenderDebugInfo as ɵRenderDebugInfo} from './render/api';
export {_sanitizeHtml as ɵ_sanitizeHtml} from './sanitization/html_sanitizer';
export {_sanitizeStyle as ɵ_sanitizeStyle} from './sanitization/style_sanitizer';
export {_sanitizeUrl as ɵ_sanitizeUrl} from './sanitization/url_sanitizer';

2
packages/core/src/render.ts
View File

@ -7,4 +7,4 @@
*/
// Public API for render
export {RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, RootRenderer} from './render/api';
export {Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2} from './render/api';

106
packages/core/src/render/api.ts
View File

@ -7,119 +7,13 @@
*/
import {InjectionToken} from '../di/injection_token';
import {Injector} from '../di/injector';
import {ViewEncapsulation} from '../metadata/view';
import {injectRenderer2 as render3InjectRenderer2} from '../render3/view_engine_compatibility';
import {noop} from '../util/noop';
/**
* @deprecated Use `RendererType2` (and `Renderer2`) instead.
* @publicApi
*/
export class RenderComponentType {
constructor(
public id: string, public templateUrl: string, public slotCount: number,
public encapsulation: ViewEncapsulation, public styles: Array<string|any[]>,
public animations: any) {}
}
/**
* @deprecated Debug info is handled internally in the view engine now.
*/
export abstract class RenderDebugInfo {
abstract get injector(): Injector;
abstract get component(): any;
abstract get providerTokens(): any[];
abstract get references(): {[key: string]: any};
abstract get context(): any;
abstract get source(): string;
}
/**
* @deprecated Use the `Renderer2` instead.
*/
export interface DirectRenderer {
remove(node: any): void;
appendChild(node: any, parent: any): void;
insertBefore(node: any, refNode: any): void;
nextSibling(node: any): any;
parentElement(node: any): any;
}
/**
* @deprecated Use the `Renderer2` instead.
* @publicApi
*/
export abstract class Renderer {
abstract selectRootElement(selectorOrNode: string|any, debugInfo?: RenderDebugInfo): any;
abstract createElement(parentElement: any, name: string, debugInfo?: RenderDebugInfo): any;
abstract createViewRoot(hostElement: any): any;
abstract createTemplateAnchor(parentElement: any, debugInfo?: RenderDebugInfo): any;
abstract createText(parentElement: any, value: string, debugInfo?: RenderDebugInfo): any;
abstract projectNodes(parentElement: any, nodes: any[]): void;
abstract attachViewAfter(node: any, viewRootNodes: any[]): void;
abstract detachView(viewRootNodes: any[]): void;
abstract destroyView(hostElement: any, viewAllNodes: any[]): void;
abstract listen(renderElement: any, name: string, callback: Function): Function;
abstract listenGlobal(target: string, name: string, callback: Function): Function;
abstract setElementProperty(renderElement: any, propertyName: string, propertyValue: any): void;
abstract setElementAttribute(renderElement: any, attributeName: string, attributeValue?: string):
void;
/**
* Used only in debug mode to serialize property changes to dom nodes as attributes.
*/
abstract setBindingDebugInfo(renderElement: any, propertyName: string, propertyValue: string):
void;
abstract setElementClass(renderElement: any, className: string, isAdd: boolean): void;
abstract setElementStyle(renderElement: any, styleName: string, styleValue?: string): void;
abstract invokeElementMethod(renderElement: any, methodName: string, args?: any[]): void;
abstract setText(renderNode: any, text: string): void;
abstract animate(
element: any, startingStyles: any, keyframes: any[], duration: number, delay: number,
easing: string, previousPlayers?: any[]): any;
}
export const Renderer2Interceptor = new InjectionToken<Renderer2[]>('Renderer2Interceptor');
/**
* Injectable service that provides a low-level interface for modifying the UI.
*
* Use this service to bypass Angular's templating and make custom UI changes that can't be
* expressed declaratively. For example if you need to set a property or an attribute whose name is
* not statically known, use {@link Renderer#setElementProperty setElementProperty} or
* {@link Renderer#setElementAttribute setElementAttribute} respectively.
*
* If you are implementing a custom renderer, you must implement this interface.
*
* The default Renderer implementation is `DomRenderer`. Also available is `WebWorkerRenderer`.
*
* @deprecated Use `RendererFactory2` instead.
* @publicApi
*/
export abstract class RootRenderer {
abstract renderComponent(componentType: RenderComponentType): Renderer;
}
/**
* Used by `RendererFactory2` to associate custom rendering data and styles
* with a rendering implementation.

9
packages/core/src/view/provider.ts
View File

@ -11,15 +11,14 @@ import {INJECTOR, Injector, resolveForwardRef} from '../di';
import {ElementRef} from '../linker/element_ref';
import {TemplateRef} from '../linker/template_ref';
import {ViewContainerRef} from '../linker/view_container_ref';
import {Renderer as RendererV1, Renderer2} from '../render/api';
import {Renderer2} from '../render/api';
import {isObservable} from '../util/lang';
import {stringify} from '../util/stringify';
import {createChangeDetectorRef, createInjector, createRendererV1} from './refs';
import {createChangeDetectorRef, createInjector} from './refs';
import {BindingDef, BindingFlags, DepDef, DepFlags, NodeDef, NodeFlags, OutputDef, OutputType, ProviderData, QueryValueType, Services, ViewData, ViewFlags, ViewState, asElementData, asProviderData, shouldCallLifecycleInitHook} from './types';
import {calcBindingFlags, checkBinding, dispatchEvent, isComponentView, splitDepsDsl, splitMatchedQueriesDsl, tokenKey, viewParentEl} from './util';
const RendererV1TokenKey = tokenKey(RendererV1);
const Renderer2TokenKey = tokenKey(Renderer2);
const ElementRefTokenKey = tokenKey(ElementRef);
const ViewContainerRefTokenKey = tokenKey(ViewContainerRef);
@ -359,10 +358,6 @@ export function resolveDep(
while (searchView) {
if (elDef) {
switch (tokenKey) {
case RendererV1TokenKey: {
const compView = findCompView(searchView, elDef, allowPrivateServices);
return createRendererV1(compView);
}
case Renderer2TokenKey: {
const compView = findCompView(searchView, elDef, allowPrivateServices);
return compView.renderer;

117
packages/core/src/view/refs.ts
View File

@ -18,7 +18,6 @@ import {InternalNgModuleRef, NgModuleRef} from '../linker/ng_module_factory';
import {TemplateRef} from '../linker/template_ref';
import {ViewContainerRef} from '../linker/view_container_ref';
import {EmbeddedViewRef, InternalViewRef, ViewRef} from '../linker/view_ref';
import {Renderer as RendererV1, Renderer2} from '../render/api';
import {stringify} from '../util/stringify';
import {VERSION} from '../version';
@ -356,122 +355,6 @@ export function nodeValue(view: ViewData, index: number): any {
throw new Error(`Illegal state: read nodeValue for node index ${index}`);
}
export function createRendererV1(view: ViewData): RendererV1 {
return new RendererAdapter(view.renderer);
}
class RendererAdapter implements RendererV1 {
constructor(private delegate: Renderer2) {}
selectRootElement(selectorOrNode: string|Element): Element {
return this.delegate.selectRootElement(selectorOrNode);
}
createElement(parent: Element|DocumentFragment, namespaceAndName: string): Element {
const [ns, name] = splitNamespace(namespaceAndName);
const el = this.delegate.createElement(name, ns);
if (parent) {
this.delegate.appendChild(parent, el);
}
return el;
}
createViewRoot(hostElement: Element): Element|DocumentFragment { return hostElement; }
createTemplateAnchor(parentElement: Element|DocumentFragment): Comment {
const comment = this.delegate.createComment('');
if (parentElement) {
this.delegate.appendChild(parentElement, comment);
}
return comment;
}
createText(parentElement: Element|DocumentFragment, value: string): any {
const node = this.delegate.createText(value);
if (parentElement) {
this.delegate.appendChild(parentElement, node);
}
return node;
}
projectNodes(parentElement: Element|DocumentFragment, nodes: Node[]) {
for (let i = 0; i < nodes.length; i++) {
this.delegate.appendChild(parentElement, nodes[i]);
}
}
attachViewAfter(node: Node, viewRootNodes: Node[]) {
const parentElement = this.delegate.parentNode(node);
const nextSibling = this.delegate.nextSibling(node);
for (let i = 0; i < viewRootNodes.length; i++) {
this.delegate.insertBefore(parentElement, viewRootNodes[i], nextSibling);
}
}
detachView(viewRootNodes: (Element|Text|Comment)[]) {
for (let i = 0; i < viewRootNodes.length; i++) {
const node = viewRootNodes[i];
const parentElement = this.delegate.parentNode(node);
this.delegate.removeChild(parentElement, node);
}
}
destroyView(hostElement: Element|DocumentFragment, viewAllNodes: Node[]) {
for (let i = 0; i < viewAllNodes.length; i++) {
this.delegate.destroyNode !(viewAllNodes[i]);
}
}
listen(renderElement: any, name: string, callback: Function): Function {
return this.delegate.listen(renderElement, name, <any>callback);
}
listenGlobal(target: string, name: string, callback: Function): Function {
return this.delegate.listen(target, name, <any>callback);
}
setElementProperty(
renderElement: Element|DocumentFragment, propertyName: string, propertyValue: any): void {
this.delegate.setProperty(renderElement, propertyName, propertyValue);
}
setElementAttribute(renderElement: Element, namespaceAndName: string, attributeValue?: string):
void {
const [ns, name] = splitNamespace(namespaceAndName);
if (attributeValue != null) {
this.delegate.setAttribute(renderElement, name, attributeValue, ns);
} else {
this.delegate.removeAttribute(renderElement, name, ns);
}
}
setBindingDebugInfo(renderElement: Element, propertyName: string, propertyValue: string): void {}
setElementClass(renderElement: Element, className: string, isAdd: boolean): void {
if (isAdd) {
this.delegate.addClass(renderElement, className);
} else {
this.delegate.removeClass(renderElement, className);
}
}
setElementStyle(renderElement: HTMLElement, styleName: string, styleValue?: string): void {
if (styleValue != null) {
this.delegate.setStyle(renderElement, styleName, styleValue);
} else {
this.delegate.removeStyle(renderElement, styleName);
}
}
invokeElementMethod(renderElement: Element, methodName: string, args: any[]): void {
(renderElement as any)[methodName].apply(renderElement, args);
}
setText(renderNode: Text, text: string): void { this.delegate.setValue(renderNode, text); }
animate(): any { throw new Error('Renderer.animate is no longer supported!'); }
}
export function createNgModuleRef(
moduleType: Type<any>, parent: Injector, bootstrapComponents: Type<any>[],
def: NgModuleDefinition): NgModuleRef<any> {

2
packages/core/test/linker/change_detection_integration_spec.ts
View File

@ -8,7 +8,7 @@
import {ResourceLoader, UrlResolver} from '@angular/compiler';
import {MockResourceLoader} from '@angular/compiler/testing';
import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, DebugElement, Directive, DoCheck, EventEmitter, HostBinding, Inject, Injectable, Input, OnChanges, OnDestroy, OnInit, Output, Pipe, PipeTransform, Provider, RenderComponentType, Renderer, RendererFactory2, RendererType2, RootRenderer, SimpleChange, SimpleChanges, TemplateRef, Type, ViewChild, ViewContainerRef, WrappedValue} from '@angular/core';
import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, DebugElement, Directive, DoCheck, EventEmitter, HostBinding, Inject, Injectable, Input, OnChanges, OnDestroy, OnInit, Output, Pipe, PipeTransform, Provider, RendererFactory2, RendererType2, SimpleChange, SimpleChanges, TemplateRef, Type, ViewChild, ViewContainerRef, WrappedValue} from '@angular/core';
import {ComponentFixture, TestBed, fakeAsync} from '@angular/core/testing';
import {By} from '@angular/platform-browser/src/dom/debug/by';
import {isTextNode} from '@angular/platform-browser/testing/src/browser_util';

13
packages/core/test/view/provider_spec.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, ErrorHandler, EventEmitter, Injector, OnChanges, OnDestroy, OnInit, Renderer, Renderer2, SimpleChange, TemplateRef, ViewContainerRef,} from '@angular/core';
import {AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, ErrorHandler, EventEmitter, Injector, OnChanges, OnDestroy, OnInit, Renderer2, SimpleChange, TemplateRef, ViewContainerRef,} from '@angular/core';
import {getDebugContext} from '@angular/core/src/errors';
import {ArgumentType, DepFlags, NodeFlags, Services, anchorDef, asElementData, directiveDef, elementDef, providerDef, textDef} from '@angular/core/src/view/index';
import {TestBed, withModule} from '@angular/core/testing';
@ -285,17 +285,6 @@ import {ARG_TYPE_VALUES, checkNodeInlineOrDynamic, createRootView, createAndGetR
expect(instance.dep._view).toBe(compView);
});
it('should inject RendererV1', () => {
createAndGetRootNodes(compViewDef([
elementDef(
0, NodeFlags.None, null, null, 1, 'span', null, null, null, null,
() => compViewDef([anchorDef(NodeFlags.None, null, null, 0)])),
directiveDef(1, NodeFlags.Component, null, 0, SomeService, [Renderer])
]));
expect(instance.dep.createElement).toBeTruthy();
});
it('should inject Renderer2', () => {
createAndGetRootNodes(compViewDef([
elementDef(

16
packages/docs/web_workers/web_workers.md
View File

@ -136,7 +136,7 @@ This code is nearly the same as the TypeScript version with just a couple key di
* We provide a `SendPort` through DI using the token `RENDER_SEND_PORT`. Dart applications use the Isolate API, which communicates via
Dart's Port abstraction. When you call `setupIsolate` from the UI thread, angular starts a new Isolate to run
your application logic. When Dart starts a new Isolate it passes a `SendPort` to that Isolate so that it
can communicate with the Isolate that spawned it. You need to provide this `SendPort` through DI
can communicate with the Isolate that spawned it. You need to provide this `SendPort` through DI
so that Angular can communicate with the UI.
* You need to set up `ReflectionCapabilities` on both the UI and Worker. Just like writing non-concurrent
Angular2 Dart applications you need to set up the reflector. You should not use Reflection in production,
@ -149,15 +149,15 @@ to the transformer until that bug is fixed.
You can do almost everything in a WebWorker component that you can do in a typical Angular Component.
The main exception is that there is **no** DOM access from a WebWorker component. In Dart this means you can't
import anything from `dart:html` and in JavaScript it means you can't use `document` or `window`. Instead you
should use data bindings and if needed you can inject the `Renderer` along with your component's `ElementRef`
directly into your component and use methods such as `setElementProperty`, `setElementAttribute`,
`setElementClass`, `setElementStyle`, `invokeElementMethod`, and `setText`. Note that you **cannot** call
should use data bindings and if needed you can inject `Renderer2` along with your component's `ElementRef`
directly into your component and use methods such as `setProperty`, `setAttribute`,
`addClass`, `setStyle`, and `setValue`. Note that you **cannot** call
`getNativeElementSync`. Doing so will always return `null` when running in a WebWorker.
If you need DOM access see [Running Code on the UI](#running-code-on-the-ui).
## WebWorker Design Overview
When running your application in a WebWorker, the majority of the angular core along with your application logic
runs on the worker. The two main components that run on the UI are the `Renderer` and the `RenderCompiler`. When
runs on the worker. The two main components that run on the UI are the `Renderer2` and the `RenderCompiler`. When
running angular in a WebWorker the bindings for these two components are replaced by the `WebWorkerRenderer` and
the `WebWorkerRenderCompiler`. When these components are used at runtime, they pass messages through the
[MessageBroker](#messagebroker) instructing the UI to run the actual method and return the result. The
@ -329,7 +329,7 @@ if you do this, you don't need to implement zone or channel support yourself. Yo
`GenericMessageBusSource`. The `MessageBusSink` must override the `sendMessages` method. This method is
given a list of serialized messages that it is required to send through the sink.
Once you've implemented your custom MessageBus in either TypeScript, you must provide it through DI
Once you've implemented your custom MessageBus in either TypeScript, you must provide it through DI
during bootstrap like so:
In TypeScript:
@ -346,7 +346,7 @@ import {
var bus = new MyAwesomeMessageBus();
platform([WORKER_RENDER_PLATFORM])
.application([WORKER_RENDER_APPLICATION_COMMON, {provide: MessageBus, useValue: bus},
{ provide: APP_INITIALIZER,
{ provide: APP_INITIALIZER,
useFactory: (injector) => () => initializeGenericWorkerRenderer(injector),
deps: [Injector],
multi: true
@ -473,7 +473,7 @@ The service then calls `registerMethod` to register the method that it wants to
four arguments. The first is the name of the method, the second is the Types of that method's parameters, the
third is the method itself, and the fourth (which is optional) is the return Type of that method.
The MessageBroker handles serializing / deserializing your parameters and return types using angular's serializer.
However, at the moment the serializer only knows how to serialize angular classes like those used by the Renderer.
However, at the moment the serializer only knows how to serialize angular classes like those used by `Renderer2`.
If you're passing anything other than those types around in your application you can handle serialization yourself
and then use the `PRIMITIVE` type to tell the MessageBroker to avoid serializing your data.

3
packages/platform-browser-dynamic/src/compiler_reflector.ts
View File

@ -7,7 +7,7 @@
*/
import {CompileReflector, ExternalReference, Identifiers, getUrlScheme, syntaxError} from '@angular/compiler';
import {ANALYZE_FOR_ENTRY_COMPONENTS, ChangeDetectionStrategy, ChangeDetectorRef, Component, ComponentFactory, ComponentFactoryResolver, ComponentRef, ElementRef, Injector, LOCALE_ID, NgModuleFactory, NgModuleRef, QueryList, Renderer, Renderer2, SecurityContext, TRANSLATIONS_FORMAT, TemplateRef, ViewContainerRef, ViewEncapsulation, ɵCodegenComponentFactoryResolver, ɵEMPTY_ARRAY, ɵEMPTY_MAP, ɵReflectionCapabilities as ReflectionCapabilities, ɵand, ɵccf, ɵcmf, ɵcrt, ɵdid, ɵeld, ɵinlineInterpolate, ɵinterpolate, ɵmod, ɵmpd, ɵncd, ɵnov, ɵpad, ɵpid, ɵpod, ɵppd, ɵprd, ɵqud, ɵregisterModuleFactory, ɵstringify as stringify, ɵted, ɵunv, ɵvid} from '@angular/core';
import {ANALYZE_FOR_ENTRY_COMPONENTS, ChangeDetectionStrategy, ChangeDetectorRef, Component, ComponentFactory, ComponentFactoryResolver, ComponentRef, ElementRef, Injector, LOCALE_ID, NgModuleFactory, NgModuleRef, QueryList, Renderer2, SecurityContext, TRANSLATIONS_FORMAT, TemplateRef, ViewContainerRef, ViewEncapsulation, ɵCodegenComponentFactoryResolver, ɵEMPTY_ARRAY, ɵEMPTY_MAP, ɵReflectionCapabilities as ReflectionCapabilities, ɵand, ɵccf, ɵcmf, ɵcrt, ɵdid, ɵeld, ɵinlineInterpolate, ɵinterpolate, ɵmod, ɵmpd, ɵncd, ɵnov, ɵpad, ɵpid, ɵpod, ɵppd, ɵprd, ɵqud, ɵregisterModuleFactory, ɵstringify as stringify, ɵted, ɵunv, ɵvid} from '@angular/core';
export const MODULE_SUFFIX = '';
const builtinExternalReferences = createBuiltinExternalReferencesMap();
@ -81,7 +81,6 @@ function createBuiltinExternalReferencesMap() {
map.set(Identifiers.interpolate, ɵinterpolate);
map.set(Identifiers.EMPTY_ARRAY, ɵEMPTY_ARRAY);
map.set(Identifiers.EMPTY_MAP, ɵEMPTY_MAP);
map.set(Identifiers.Renderer, Renderer);
map.set(Identifiers.viewDef, ɵvid);
map.set(Identifiers.elementDef, ɵeld);
map.set(Identifiers.anchorDef, ɵand);

24
packages/platform-webworker/src/web_workers/shared/serializer.ts
View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {Injectable, RenderComponentType, RendererType2, Type, ɵstringify as stringify} from '@angular/core';
import {Injectable, RendererType2, Type, ɵstringify as stringify} from '@angular/core';
import {RenderStore} from './render_store';
@ -44,9 +44,6 @@ export class Serializer {
if (type === SerializerTypes.RENDER_STORE_OBJECT) {
return this._renderStore.serialize(obj) !;
}
if (type === RenderComponentType) {
return this._serializeRenderComponentType(obj);
}
if (type === SerializerTypes.RENDERER_TYPE_2) {
return this._serializeRendererType2(obj);
}
@ -67,9 +64,6 @@ export class Serializer {
if (type === SerializerTypes.RENDER_STORE_OBJECT) {
return this._renderStore.deserialize(map);
}
if (type === RenderComponentType) {
return this._deserializeRenderComponentType(map);
}
if (type === SerializerTypes.RENDERER_TYPE_2) {
return this._deserializeRendererType2(map);
}
@ -99,22 +93,6 @@ export class Serializer {
loc['search'], loc['hash'], loc['origin']);
}
private _serializeRenderComponentType(type: RenderComponentType): Object {
return {
'id': type.id,
'templateUrl': type.templateUrl,
'slotCount': type.slotCount,
'encapsulation': this.serialize(type.encapsulation),
'styles': this.serialize(type.styles),
};
}
private _deserializeRenderComponentType(props: {[key: string]: any}): RenderComponentType {
return new RenderComponentType(
props['id'], props['templateUrl'], props['slotCount'],
this.deserialize(props['encapsulation']), this.deserialize(props['styles']), {});
}
private _serializeRendererType2(type: RendererType2): {[key: string]: any} {
return {
'id': type.id,