From 5111dbf9732f5ec49566912e5c8b1c8ebe9ee44a Mon Sep 17 00:00:00 2001 From: Alex Rickabaugh Date: Wed, 29 Jun 2022 12:55:59 -0700 Subject: [PATCH] refactor(core): rename the ProceduralRenderer3 interface to Renderer (#46605) Due to the restrictions of circular dependency checking, we need a separate internal interface for a renderer. We cannot use `Renderer2` as a type internally as even importing it as a type incurs a dependency on its implementation, which creates a major potential for circular dependencies. Previously this role was served by the `Renderer3` type. As we prepare to remove the `Renderer3` abstraction (the idea of using `document` as a differently-shaped renderer), this commit renames `ProceduralRenderer3` to the more generic term `Renderer`. `RendererFactory3` is also renamed to the more generic `RendererFactory` for consistency. PR Close #46605 --- packages/core/src/render3/component.ts | 8 ++++---- packages/core/src/render3/component_ref.ts | 4 ++-- .../core/src/render3/instructions/lview_debug.ts | 4 ++-- packages/core/src/render3/instructions/shared.ts | 4 ++-- packages/core/src/render3/interfaces/renderer.ts | 15 +++++++-------- packages/core/src/render3/interfaces/view.ts | 4 ++-- packages/core/src/render3/node_manipulation.ts | 6 +++--- packages/core/src/render3/util/attrs_utils.ts | 14 ++++++-------- packages/core/test/render3/perf/noop_renderer.ts | 14 +++++++------- .../core/test/render3/perf/noop_renderer_spec.ts | 5 ++--- 10 files changed, 37 insertions(+), 41 deletions(-) diff --git a/packages/core/src/render3/component.ts b/packages/core/src/render3/component.ts index 1ce8b8fb785..7d3d16199f2 100644 --- a/packages/core/src/render3/component.ts +++ b/packages/core/src/render3/component.ts @@ -22,7 +22,7 @@ import {addToViewTree, CLEAN_PROMISE, createLView, createTView, getOrCreateTComp import {ComponentDef, ComponentType, RenderFlags} from './interfaces/definition'; import {TElementNode, TNodeType} from './interfaces/node'; import {PlayerHandler} from './interfaces/player'; -import {domRendererFactory3, enableRenderer3, Renderer3, RendererFactory3} from './interfaces/renderer'; +import {domRendererFactory3, enableRenderer3, Renderer3, RendererFactory} from './interfaces/renderer'; import {RElement} from './interfaces/renderer_dom'; import {CONTEXT, HEADER_OFFSET, LView, LViewFlags, RootContext, RootContextFlags, TVIEW, TViewType} from './interfaces/view'; import {writeDirectClass, writeDirectStyle} from './node_manipulation'; @@ -38,7 +38,7 @@ import {getRootContext} from './util/view_traversal_utils'; /** Options that control how the component should be bootstrapped. */ export interface CreateComponentOptions { /** Which renderer factory to use. */ - rendererFactory?: RendererFactory3; + rendererFactory?: RendererFactory; /** A custom sanitizer instance */ sanitizer?: Sanitizer; @@ -173,8 +173,8 @@ export function renderComponent( * @returns Component view created */ export function createRootComponentView( - rNode: RElement|null, def: ComponentDef, rootView: LView, - rendererFactory: RendererFactory3, hostRenderer: Renderer3, sanitizer?: Sanitizer|null): LView { + rNode: RElement|null, def: ComponentDef, rootView: LView, rendererFactory: RendererFactory, + hostRenderer: Renderer3, sanitizer?: Sanitizer|null): LView { const tView = rootView[TVIEW]; const index = HEADER_OFFSET; ngDevMode && assertIndexInRange(rootView, index); diff --git a/packages/core/src/render3/component_ref.ts b/packages/core/src/render3/component_ref.ts index db3b7260814..1c37c463791 100644 --- a/packages/core/src/render3/component_ref.ts +++ b/packages/core/src/render3/component_ref.ts @@ -28,7 +28,7 @@ import {NodeInjector} from './di'; import {createLView, createTView, locateHostElement, renderView} from './instructions/shared'; import {ComponentDef} from './interfaces/definition'; import {TContainerNode, TElementContainerNode, TElementNode, TNode} from './interfaces/node'; -import {domRendererFactory3, RendererFactory3} from './interfaces/renderer'; +import {domRendererFactory3, RendererFactory} from './interfaces/renderer'; import {RNode} from './interfaces/renderer_dom'; import {HEADER_OFFSET, LView, LViewFlags, TViewType} from './interfaces/view'; import {MATH_ML_NAMESPACE, SVG_NAMESPACE} from './namespaces'; @@ -146,7 +146,7 @@ export class ComponentFactory extends viewEngine_ComponentFactory { const rendererFactory = rootViewInjector.get(RendererFactory2, domRendererFactory3 as RendererFactory2) as - RendererFactory3; + RendererFactory; const sanitizer = rootViewInjector.get(Sanitizer, null); const hostRenderer = rendererFactory.createRenderer(null, this.componentDef); diff --git a/packages/core/src/render3/instructions/lview_debug.ts b/packages/core/src/render3/instructions/lview_debug.ts index 48d65325ab0..3bdaf74a541 100644 --- a/packages/core/src/render3/instructions/lview_debug.ts +++ b/packages/core/src/render3/instructions/lview_debug.ts @@ -21,7 +21,7 @@ import {NO_PARENT_INJECTOR, NodeInjectorOffset} from '../interfaces/injector'; import {AttributeMarker, InsertBeforeIndex, PropertyAliases, TConstants, TContainerNode, TElementNode, TNode as ITNode, TNodeFlags, TNodeProviderIndexes, TNodeType, toTNodeTypeAsString} from '../interfaces/node'; import {SelectorFlags} from '../interfaces/projection'; import {LQueries, TQueries} from '../interfaces/query'; -import {Renderer3, RendererFactory3} from '../interfaces/renderer'; +import {Renderer3, RendererFactory} from '../interfaces/renderer'; import {RComment, RElement, RNode} from '../interfaces/renderer_dom'; import {getTStylingRangeNext, getTStylingRangeNextDuplicate, getTStylingRangePrev, getTStylingRangePrevDuplicate, TStylingKey, TStylingRange} from '../interfaces/styling'; import {CHILD_HEAD, CHILD_TAIL, CLEANUP, CONTEXT, DebugNode, DECLARATION_VIEW, DestroyHookData, FLAGS, HEADER_OFFSET, HookData, HOST, HostBindingOpCodes, ID, INJECTOR, LContainerDebug as ILContainerDebug, LView, LViewDebug as ILViewDebug, LViewDebugRange, LViewDebugRangeContent, LViewFlags, NEXT, NodeInjectorDebug, PARENT, QUERIES, RENDERER, RENDERER_FACTORY, SANITIZER, T_HOST, TData, TView as ITView, TVIEW, TView, TViewType, TViewTypeAsString} from '../interfaces/view'; @@ -486,7 +486,7 @@ export class LViewDebug implements ILViewDebug { get injector(): Injector|null { return this._raw_lView[INJECTOR]; } - get rendererFactory(): RendererFactory3 { + get rendererFactory(): RendererFactory { return this._raw_lView[RENDERER_FACTORY]; } get renderer(): Renderer3 { diff --git a/packages/core/src/render3/instructions/shared.ts b/packages/core/src/render3/instructions/shared.ts index 1c298f736ae..2c0850cc04e 100644 --- a/packages/core/src/render3/instructions/shared.ts +++ b/packages/core/src/render3/instructions/shared.ts @@ -28,7 +28,7 @@ import {ComponentDef, ComponentTemplate, DirectiveDef, DirectiveDefListOrFactory import {NodeInjectorFactory} from '../interfaces/injector'; import {getUniqueLViewId} from '../interfaces/lview_tracking'; import {AttributeMarker, InitialInputData, InitialInputs, LocalRefExtractor, PropertyAliases, PropertyAliasValue, TAttributes, TConstantsOrFactory, TContainerNode, TDirectiveHostNode, TElementContainerNode, TElementNode, TIcuContainerNode, TNode, TNodeFlags, TNodeType, TProjectionNode} from '../interfaces/node'; -import {isProceduralRenderer, Renderer3, RendererFactory3} from '../interfaces/renderer'; +import {isProceduralRenderer, Renderer3, RendererFactory} from '../interfaces/renderer'; import {RComment, RElement, RNode, RText} from '../interfaces/renderer_dom'; import {SanitizerFn} from '../interfaces/sanitization'; import {isComponentDef, isComponentHost, isContentQueryHost, isRootView} from '../interfaces/type_checks'; @@ -125,7 +125,7 @@ function renderChildComponents(hostLView: LView, components: number[]): void { export function createLView( parentLView: LView|null, tView: TView, context: T|null, flags: LViewFlags, host: RElement|null, - tHostNode: TNode|null, rendererFactory: RendererFactory3|null, renderer: Renderer3|null, + tHostNode: TNode|null, rendererFactory: RendererFactory|null, renderer: Renderer3|null, sanitizer: Sanitizer|null, injector: Injector|null, embeddedViewInjector: Injector|null): LView { const lView = diff --git a/packages/core/src/render3/interfaces/renderer.ts b/packages/core/src/render3/interfaces/renderer.ts index 1ceb139ebe4..5f176a30df5 100644 --- a/packages/core/src/render3/interfaces/renderer.ts +++ b/packages/core/src/render3/interfaces/renderer.ts @@ -27,7 +27,7 @@ export enum RendererStyleFlags3 { DashCase = 1 << 1 } -export type Renderer3 = ObjectOrientedRenderer3|ProceduralRenderer3; +export type Renderer3 = ObjectOrientedRenderer3|Renderer; export type GlobalTargetName = 'document'|'window'|'body'; @@ -50,8 +50,8 @@ export interface ObjectOrientedRenderer3 { } /** Returns whether the `renderer` is a `ProceduralRenderer3` */ -export function isProceduralRenderer(renderer: ProceduralRenderer3| - ObjectOrientedRenderer3): renderer is ProceduralRenderer3 { +export function isProceduralRenderer(renderer: Renderer| + ObjectOrientedRenderer3): renderer is Renderer { return !!((renderer as any).listen); } @@ -59,10 +59,9 @@ export function isProceduralRenderer(renderer: ProceduralRenderer3| * Procedural style of API needed to create elements and text nodes. * * In non-native browser environments (e.g. platforms such as web-workers), this is the - * facade that enables element manipulation. This also facilitates backwards compatibility - * with Renderer2. + * facade that enables element manipulation. In practice, this is implemented by `Renderer2`. */ -export interface ProceduralRenderer3 { +export interface Renderer { destroy(): void; createComment(value: string): RComment; createElement(name: string, namespace?: string|null): RElement; @@ -100,7 +99,7 @@ export interface ProceduralRenderer3 { callback: (event: any) => boolean | void): () => void; } -export interface RendererFactory3 { +export interface RendererFactory { createRenderer(hostElement: RElement|null, rendererType: RendererType2|null): Renderer3; begin?(): void; end?(): void; @@ -112,7 +111,7 @@ export function enableRenderer3() { renderer3Enabled = true; } -export const domRendererFactory3: RendererFactory3 = { +export const domRendererFactory3: RendererFactory = { createRenderer: (hostElement: RElement|null, rendererType: RendererType2|null): Renderer3 => { if (!renderer3Enabled) { throw new Error( diff --git a/packages/core/src/render3/interfaces/view.ts b/packages/core/src/render3/interfaces/view.ts index 2f9c2a8f095..5131de490d8 100644 --- a/packages/core/src/render3/interfaces/view.ts +++ b/packages/core/src/render3/interfaces/view.ts @@ -18,7 +18,7 @@ import {I18nUpdateOpCodes, TI18n, TIcu} from './i18n'; import {TConstants, TNode} from './node'; import {PlayerHandler} from './player'; import {LQueries, TQueries} from './query'; -import {Renderer3, RendererFactory3} from './renderer'; +import {Renderer3, RendererFactory} from './renderer'; import {RComment, RElement} from './renderer_dom'; import {TStylingKey, TStylingRange} from './styling'; @@ -186,7 +186,7 @@ export interface LView extends Array { readonly[INJECTOR]: Injector|null; /** Factory to be used for creating Renderer. */ - [RENDERER_FACTORY]: RendererFactory3; + [RENDERER_FACTORY]: RendererFactory; /** Renderer to be used for this view. */ [RENDERER]: Renderer3; diff --git a/packages/core/src/render3/node_manipulation.ts b/packages/core/src/render3/node_manipulation.ts index 903165d58e1..101d9bdd29e 100644 --- a/packages/core/src/render3/node_manipulation.ts +++ b/packages/core/src/render3/node_manipulation.ts @@ -22,7 +22,7 @@ import {NodeInjectorFactory} from './interfaces/injector'; import {unregisterLView} from './interfaces/lview_tracking'; import {TElementNode, TIcuContainerNode, TNode, TNodeFlags, TNodeType, TProjectionNode, unusedValueExportToPlacateAjd as unused2} from './interfaces/node'; import {unusedValueExportToPlacateAjd as unused3} from './interfaces/projection'; -import {isProceduralRenderer, ProceduralRenderer3, Renderer3, unusedValueExportToPlacateAjd as unused4} from './interfaces/renderer'; +import {isProceduralRenderer, Renderer, Renderer3, unusedValueExportToPlacateAjd as unused4} from './interfaces/renderer'; import {RComment, RElement, RNode, RTemplate, RText} from './interfaces/renderer_dom'; import {isLContainer, isLView} from './interfaces/type_checks'; import {CHILD_HEAD, CLEANUP, DECLARATION_COMPONENT_VIEW, DECLARATION_LCONTAINER, DestroyHookData, FLAGS, HookData, HookFn, HOST, LView, LViewFlags, NEXT, PARENT, QUERIES, RENDERER, T_HOST, TVIEW, TView, TViewType, unusedValueExportToPlacateAjd as unused5} from './interfaces/view'; @@ -94,7 +94,7 @@ function applyToElementOrContainer( nativeRemoveNode(renderer, rNode, isComponent); } else if (action === WalkTNodeTreeAction.Destroy) { ngDevMode && ngDevMode.rendererDestroyNode++; - (renderer as ProceduralRenderer3).destroyNode!(rNode); + (renderer as Renderer).destroyNode!(rNode); } if (lContainer != null) { applyContainer(renderer, action, lContainer, parent, beforeNode); @@ -428,7 +428,7 @@ function cleanUpView(tView: TView, lView: LView): void { // For component views only, the local renderer is destroyed at clean up time. if (lView[TVIEW].type === TViewType.Component && isProceduralRenderer(lView[RENDERER])) { ngDevMode && ngDevMode.rendererDestroy++; - (lView[RENDERER] as ProceduralRenderer3).destroy(); + (lView[RENDERER] as Renderer).destroy(); } const declarationContainer = lView[DECLARATION_LCONTAINER]; diff --git a/packages/core/src/render3/util/attrs_utils.ts b/packages/core/src/render3/util/attrs_utils.ts index 894b83e9877..9d2a74bce03 100644 --- a/packages/core/src/render3/util/attrs_utils.ts +++ b/packages/core/src/render3/util/attrs_utils.ts @@ -8,7 +8,7 @@ import {CharCode} from '../../util/char_code'; import {AttributeMarker, TAttributes} from '../interfaces/node'; import {CssSelector} from '../interfaces/projection'; -import {isProceduralRenderer, ProceduralRenderer3, Renderer3} from '../interfaces/renderer'; +import {isProceduralRenderer, Renderer, Renderer3} from '../interfaces/renderer'; import {RElement} from '../interfaces/renderer_dom'; @@ -61,9 +61,8 @@ export function setUpAttributes(renderer: Renderer3, native: RElement, attrs: TA const attrName = attrs[i++] as string; const attrVal = attrs[i++] as string; ngDevMode && ngDevMode.rendererSetAttribute++; - isProc ? - (renderer as ProceduralRenderer3).setAttribute(native, attrName, attrVal, namespaceURI) : - native.setAttributeNS(namespaceURI, attrName, attrVal); + isProc ? (renderer as Renderer).setAttribute(native, attrName, attrVal, namespaceURI) : + native.setAttributeNS(namespaceURI, attrName, attrVal); } else { // attrName is string; const attrName = value as string; @@ -72,12 +71,11 @@ export function setUpAttributes(renderer: Renderer3, native: RElement, attrs: TA ngDevMode && ngDevMode.rendererSetAttribute++; if (isAnimationProp(attrName)) { if (isProc) { - (renderer as ProceduralRenderer3).setProperty(native, attrName, attrVal); + (renderer as Renderer).setProperty(native, attrName, attrVal); } } else { - isProc ? - (renderer as ProceduralRenderer3).setAttribute(native, attrName, attrVal as string) : - native.setAttribute(attrName, attrVal as string); + isProc ? (renderer as Renderer).setAttribute(native, attrName, attrVal as string) : + native.setAttribute(attrName, attrVal as string); } i++; } diff --git a/packages/core/test/render3/perf/noop_renderer.ts b/packages/core/test/render3/perf/noop_renderer.ts index 75933e3d0cf..5d95b544e74 100644 --- a/packages/core/test/render3/perf/noop_renderer.ts +++ b/packages/core/test/render3/perf/noop_renderer.ts @@ -8,7 +8,7 @@ import {RendererStyleFlags2} from '@angular/core/src/render'; import {RComment, RElement, RNode, RText} from '@angular/core/src/render3/interfaces/renderer_dom'; -import {ProceduralRenderer3, RendererFactory3, RendererStyleFlags3} from '../../../src/render3/interfaces/renderer'; +import {Renderer, RendererFactory, RendererStyleFlags3} from '../../../src/render3/interfaces/renderer'; export class MicroBenchmarkRenderNode implements RNode, RComment, RText { tagName?: string; @@ -27,7 +27,7 @@ export class MicroBenchmarkRenderNode implements RNode, RComment, RText { className: string = ''; } -export class MicroBenchmarkRenderer implements ProceduralRenderer3 { +export class MicroBenchmarkRenderer implements Renderer { destroy(): void { throw new Error('Method not implemented.'); } @@ -81,8 +81,8 @@ export class MicroBenchmarkRenderer implements ProceduralRenderer3 { } } -export class MicroBenchmarkRendererFactory implements RendererFactory3 { - createRenderer(hostElement: RElement|null, rendererType: null): ProceduralRenderer3 { +export class MicroBenchmarkRendererFactory implements RendererFactory { + createRenderer(hostElement: RElement|null, rendererType: null): Renderer { if (typeof global !== 'undefined') { (global as any).Node = MicroBenchmarkRenderNode; } @@ -90,7 +90,7 @@ export class MicroBenchmarkRendererFactory implements RendererFactory3 { } } -class MicroBenchmarkDomRenderer implements ProceduralRenderer3 { +class MicroBenchmarkDomRenderer implements Renderer { destroy(): void { throw new Error('Method not implemented.'); } @@ -188,8 +188,8 @@ class MicroBenchmarkDomRenderer implements ProceduralRenderer3 { } } -export class MicroBenchmarkDomRendererFactory implements RendererFactory3 { - createRenderer(hostElement: RElement|null, rendererType: null): ProceduralRenderer3 { +export class MicroBenchmarkDomRendererFactory implements RendererFactory { + createRenderer(hostElement: RElement|null, rendererType: null): Renderer { return new MicroBenchmarkDomRenderer(); } } diff --git a/packages/core/test/render3/perf/noop_renderer_spec.ts b/packages/core/test/render3/perf/noop_renderer_spec.ts index b07221df836..c6e25ea31ca 100644 --- a/packages/core/test/render3/perf/noop_renderer_spec.ts +++ b/packages/core/test/render3/perf/noop_renderer_spec.ts @@ -6,13 +6,12 @@ * found in the LICENSE file at https://angular.io/license */ -import {ProceduralRenderer3} from '@angular/core/src/render3/interfaces/renderer'; +import {Renderer} from '@angular/core/src/render3/interfaces/renderer'; import {MicroBenchmarkRendererFactory, MicroBenchmarkRenderNode} from './noop_renderer'; describe('MicroBenchmarkRenderNode', () => { - const renderer = - new MicroBenchmarkRendererFactory().createRenderer(null, null) as ProceduralRenderer3; + const renderer = new MicroBenchmarkRendererFactory().createRenderer(null, null) as Renderer; describe('className', () => { it('should be available in global space', () => { expect(Node).toBeDefined();