feat(ivy): support injecting Renderer2 (#25523)

PR Close #25523

packages/core/src/core_render3_private_export.ts

@@ -25,6 +25,7 @@ export {
   injectTemplateRef as ɵinjectTemplateRef,
   injectViewContainerRef as ɵinjectViewContainerRef,
   injectChangeDetectorRef as ɵinjectChangeDetectorRef,
+  injectRenderer2 as ɵinjectRenderer2,
   injectAttribute as ɵinjectAttribute,
   getFactoryOf as ɵgetFactoryOf,
   getInheritedFactory as ɵgetInheritedFactory,

packages/core/src/render3/STATUS.md

@@ -216,6 +216,7 @@ The goal is for the `@Component` (and friends) to be the compiler of template. S
 | `injectElementRef()`                |  ✅     |  ✅      |  ✅      |
 | `injectViewContainerRef()`          |  ✅     |  ✅      |  ✅      |
 | `injectTemplateRef()`               |  ✅     |  ✅      |  ✅      |
+| `injectRenderer2()`                 |  ✅     |  ✅      |  ✅      |
 | default `inject()` with no injector |  ❌     |  ❌      |  ❌      |
 | sanitization with no injector       |  ✅     |  ✅      |  ❌      |
 

packages/core/src/render3/di.ts

@@ -19,6 +19,7 @@ import {NgModuleRef as viewEngine_NgModuleRef} from '../linker/ng_module_factory
 import {TemplateRef as viewEngine_TemplateRef} from '../linker/template_ref';
 import {ViewContainerRef as viewEngine_ViewContainerRef} from '../linker/view_container_ref';
 import {EmbeddedViewRef as viewEngine_EmbeddedViewRef, ViewRef as viewEngine_ViewRef} from '../linker/view_ref';
+import {Renderer2} from '../render';
 import {Type} from '../type';
 
 import {assertDefined, assertGreaterThan, assertLessThan} from './assert';
@@ -29,7 +30,7 @@ import {DirectiveDefInternal, RenderFlags} from './interfaces/definition';
 import {LInjector} from './interfaces/injector';
 import {AttributeMarker, LContainerNode, LElementContainerNode, LElementNode, LNode, LNodeWithLocalRefs, LViewNode, TContainerNode, TElementNode, TNodeFlags, TNodeType} from './interfaces/node';
 import {LQueries, QueryReadType} from './interfaces/query';
-import {Renderer3} from './interfaces/renderer';
+import {Renderer3, isProceduralRenderer} from './interfaces/renderer';
 import {DIRECTIVES, HOST_NODE, INJECTOR, LViewData, QUERIES, RENDERER, TVIEW, TView} from './interfaces/view';
 import {assertNodeOfPossibleTypes, assertNodeType} from './node_assert';
 import {addRemoveViewFromContainer, appendChild, detachView, getChildLNode, getParentLNode, insertView, removeView} from './node_manipulation';
@@ -236,6 +237,10 @@ export function injectComponentFactoryResolver(): viewEngine_ComponentFactoryRes
 }
 const componentFactoryResolver: ComponentFactoryResolver = new ComponentFactoryResolver();
 
+
+export function injectRenderer2(): Renderer2 {
+  return getOrCreateRenderer2(getOrCreateNodeInjector());
+}
 /**
  * Inject static attribute value into directive constructor.
  *
@@ -320,6 +325,17 @@ function getOrCreateHostChangeDetector(currentNode: LViewNode | LElementNode):
               .view[DIRECTIVES] ![hostNode.tNode.flags >> TNodeFlags.DirectiveStartingIndexShift]);
 }
 
+
+
+function getOrCreateRenderer2(di: LInjector): Renderer2 {
+  const renderer = di.node.view[RENDERER];
+  if (isProceduralRenderer(renderer)) {
+    return renderer as Renderer2;
+  } else {
+    throw new Error('Cannot inject Renderer2 when the application uses Renderer3!');
+  }
+}
+
 /**
  * If the node is an embedded view, traverses up the view tree to return the closest
  * ancestor view that is attached to a component. If it's already a component node,
@@ -632,6 +648,9 @@ export class NodeInjector implements Injector {
     if (token === viewEngine_ChangeDetectorRef) {
       return getOrCreateChangeDetectorRef(this._lInjector, null);
     }
+    if (token === Renderer2) {
+      return getOrCreateRenderer2(this._lInjector);
+    }
 
     return getOrCreateInjectable(this._lInjector, token);
   }

packages/core/src/render3/index.ts

@@ -14,7 +14,7 @@ import {PublicFeature} from './features/public_feature';
 import {BaseDef, ComponentDef, ComponentDefInternal, ComponentTemplate, ComponentType, DirectiveDef, DirectiveDefFlags, DirectiveDefInternal, DirectiveType, PipeDef} from './interfaces/definition';
 
 export {ComponentFactory, ComponentFactoryResolver, ComponentRef, WRAP_RENDERER_FACTORY2} from './component_ref';
-export {QUERY_READ_CONTAINER_REF, QUERY_READ_ELEMENT_REF, QUERY_READ_FROM_NODE, QUERY_READ_TEMPLATE_REF, directiveInject, getFactoryOf, getInheritedFactory, injectAttribute, injectChangeDetectorRef, injectComponentFactoryResolver, injectElementRef, injectTemplateRef, injectViewContainerRef, templateRefExtractor} from './di';
+export {QUERY_READ_CONTAINER_REF, QUERY_READ_ELEMENT_REF, QUERY_READ_FROM_NODE, QUERY_READ_TEMPLATE_REF, directiveInject, getFactoryOf, getInheritedFactory, injectAttribute, injectChangeDetectorRef, injectComponentFactoryResolver, injectElementRef, injectRenderer2, injectTemplateRef, injectViewContainerRef, templateRefExtractor} from './di';
 export {RenderFlags} from './interfaces/definition';
 export {CssSelectorList} from './interfaces/projection';
 

packages/core/src/render3/jit/environment.ts

@@ -35,6 +35,7 @@ export const angularCoreEnv: {[name: string]: Function} = {
   'ɵinjectTemplateRef': r3.injectTemplateRef,
   'ɵinjectViewContainerRef': r3.injectViewContainerRef,
   'ɵtemplateRefExtractor': r3.templateRefExtractor,
+  'ɵinjectRenderer2': r3.injectRenderer2,
   'ɵNgOnChangesFeature': r3.NgOnChangesFeature,
   'ɵPublicFeature': r3.PublicFeature,
   'ɵInheritDefinitionFeature': r3.InheritDefinitionFeature,

packages/core/test/bundling/todo/bundle.golden_symbols.json

@@ -137,6 +137,9 @@
   {
     "name": "RecordViewTuple"
   },
+  {
+    "name": "Renderer2"
+  },
   {
     "name": "RendererStyleFlags3"
   },
@@ -590,6 +593,9 @@
   {
     "name": "getOrCreateNodeInjectorForNode"
   },
+  {
+    "name": "getOrCreateRenderer2"
+  },
   {
     "name": "getOrCreateTView"
   },

packages/core/test/bundling/todo_r2/bundle.golden_symbols.json

@@ -1679,6 +1679,9 @@
   {
     "name": "getOrCreateNodeInjectorForNode"
   },
+  {
+    "name": "getOrCreateRenderer2"
+  },
   {
     "name": "getOrCreateTView"
   },
@@ -1805,6 +1808,9 @@
   {
     "name": "injectElementRef"
   },
+  {
+    "name": "injectRenderer2"
+  },
   {
     "name": "injectTemplateRef"
   },

packages/core/test/render3/di_spec.ts

@@ -6,18 +6,21 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Attribute, ChangeDetectorRef, ElementRef, Host, InjectFlags, Optional, Self, SkipSelf, TemplateRef, ViewContainerRef, defineInjectable} from '@angular/core';
+import {Attribute, ChangeDetectorRef, ElementRef, Host, InjectFlags, Optional, Renderer2, Self, SkipSelf, TemplateRef, ViewContainerRef, defineInjectable} from '@angular/core';
 import {RenderFlags} from '@angular/core/src/render3/interfaces/definition';
 
 import {defineComponent} from '../../src/render3/definition';
 import {bloomAdd, bloomFindPossibleInjector, getOrCreateNodeInjector, injectAttribute} from '../../src/render3/di';
-import {NgOnChangesFeature, PublicFeature, defineDirective, directiveInject, injectChangeDetectorRef, injectElementRef, injectTemplateRef, injectViewContainerRef} from '../../src/render3/index';
+import {NgOnChangesFeature, PublicFeature, defineDirective, directiveInject, injectChangeDetectorRef, injectElementRef, injectRenderer2, injectTemplateRef, injectViewContainerRef} from '../../src/render3/index';
 import {bind, container, containerRefreshEnd, containerRefreshStart, createLNode, createLViewData, createTView, element, elementEnd, elementStart, embeddedViewEnd, embeddedViewStart, enterView, interpolation2, leaveView, projection, projectionDef, reference, template, text, textBinding, loadDirective, elementContainerStart, elementContainerEnd} from '../../src/render3/instructions';
 import {LInjector} from '../../src/render3/interfaces/injector';
+import {isProceduralRenderer} from '../../src/render3/interfaces/renderer';
 import {AttributeMarker, TNodeType} from '../../src/render3/interfaces/node';
+
 import {LViewFlags} from '../../src/render3/interfaces/view';
 import {ViewRef} from '../../src/render3/view_ref';
 
+import {getRendererFactory2} from './imported_renderer2';
 import {ComponentFixture, createComponent, createDirective, renderComponent, toHtml} from './render_util';
 
 describe('di', () => {
@@ -1205,6 +1208,36 @@ describe('di', () => {
     });
   });
 
+  describe('Renderer2', () => {
+    let comp: MyComp;
+
+    class MyComp {
+      constructor(public renderer: Renderer2) {}
+
+      static ngComponentDef = defineComponent({
+        type: MyComp,
+        selectors: [['my-comp']],
+        factory: () => comp = new MyComp(injectRenderer2()),
+        consts: 1,
+        vars: 0,
+        template: function(rf: RenderFlags, ctx: MyComp) {
+          if (rf & RenderFlags.Create) {
+            text(0, 'Foo');
+          }
+        }
+      });
+    }
+
+    it('should inject the Renderer2 used by the application', () => {
+      const rendererFactory = getRendererFactory2(document);
+      new ComponentFixture(MyComp, {rendererFactory: rendererFactory});
+      expect(isProceduralRenderer(comp.renderer)).toBeTruthy();
+    });
+
+    it('should throw when injecting Renderer2 but the application is using Renderer3',
+       () => { expect(() => new ComponentFixture(MyComp)).toThrow(); });
+  });
+
   describe('@Attribute', () => {
 
     class MyDirective {