Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(core): rename the ProceduralRenderer3 interface to Renderer (#46605)

Browse source 
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
This commit is contained in:
Alex Rickabaugh 2022-06-29 12:55:59 -07:00 committed by Andrew Scott
parent f05ed1203d
commit 5111dbf973
10 changed files with 37 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/core/src/render3/component.ts
View file

@ -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<T>(
* @returns Component view created
*/
export function createRootComponentView(
rNode: RElement|null, def: ComponentDef<any>, rootView: LView,
rendererFactory: RendererFactory3, hostRenderer: Renderer3, sanitizer?: Sanitizer|null): LView {
rNode: RElement|null, def: ComponentDef<any>, rootView: LView, rendererFactory: RendererFactory,
hostRenderer: Renderer3, sanitizer?: Sanitizer|null): LView {
const tView = rootView[TVIEW];
const index = HEADER_OFFSET;
ngDevMode && assertIndexInRange(rootView, index);

4
packages/core/src/render3/component_ref.ts
View file

@ -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<T> extends viewEngine_ComponentFactory<T> {
const rendererFactory =
rootViewInjector.get(RendererFactory2, domRendererFactory3 as RendererFactory2) as
RendererFactory3;
RendererFactory;
const sanitizer = rootViewInjector.get(Sanitizer, null);
const hostRenderer = rendererFactory.createRenderer(null, this.componentDef);

4
packages/core/src/render3/instructions/lview_debug.ts
View file

@ -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<T = unknown> implements ILViewDebug<T> {
get injector(): Injector|null {
return this._raw_lView[INJECTOR];
}
get rendererFactory(): RendererFactory3 {
get rendererFactory(): RendererFactory {
return this._raw_lView[RENDERER_FACTORY];
}
get renderer(): Renderer3 {

4
packages/core/src/render3/instructions/shared.ts
View file

@ -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<T>(
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 =

15
packages/core/src/render3/interfaces/renderer.ts
View file

@ -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(

4
packages/core/src/render3/interfaces/view.ts
View file

@ -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<T = unknown> extends Array<any> {
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;

6
packages/core/src/render3/node_manipulation.ts
View file

@ -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];

14
packages/core/src/render3/util/attrs_utils.ts
View file

@ -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++;
}

14
packages/core/test/render3/perf/noop_renderer.ts
View file

@ -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();
}
}

5
packages/core/test/render3/perf/noop_renderer_spec.ts
View file

@ -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();