refactor(ivy): add internal `isProceduralRenderer()` (#22055)

PR Close #22055

packages/core/src/render3/instructions.ts

@@ -19,7 +19,7 @@ import {assertNodeType} from './node_assert';
 import {appendChild, insertChild, insertView, appendProjectedNode, removeView, canInsertNativeNode} from './node_manipulation';
 import {matchingSelectorIndex} from './node_selector_matcher';
 import {ComponentDef, ComponentTemplate, ComponentType, DirectiveDef, DirectiveType} from './interfaces/definition';
-import {RElement, RText, Renderer3, RendererFactory3, ProceduralRenderer3, ObjectOrientedRenderer3, RendererStyleFlags3} from './interfaces/renderer';
+import {RElement, RText, Renderer3, RendererFactory3, ProceduralRenderer3, ObjectOrientedRenderer3, RendererStyleFlags3, isProceduralRenderer} from './interfaces/renderer';
 import {isDifferent, stringify} from './util';
 import {executeHooks, executeContentHooks, queueLifecycleHooks, queueInitHooks, executeInitHooks} from './hooks';
 
@@ -569,8 +569,8 @@ export function listener(eventName: string, listener: EventListener, useCapture
 
   // In order to match current behavior, native DOM event listeners must be added for all
   // events (including outputs).
-  if ((renderer as ProceduralRenderer3).listen) {
+  if (isProceduralRenderer(renderer)) {
-    const cleanupFn = (renderer as ProceduralRenderer3).listen(native, eventName, listener);
+    const cleanupFn = renderer.listen(native, eventName, listener);
     (cleanup || (cleanup = currentView.cleanup = [])).push(cleanupFn, null);
   } else {
     native.addEventListener(eventName, listener, useCapture);

packages/core/src/render3/interfaces/renderer.ts

@@ -41,6 +41,12 @@ export interface ObjectOrientedRenderer3 {
   querySelector(selectors: string): RElement|null;
 }
 
+/** Returns wether the `renderer` is a `ProceduralRenderer3` */
+export function isProceduralRenderer(renderer: ProceduralRenderer3 | ObjectOrientedRenderer3):
+    renderer is ProceduralRenderer3 {
+  return !!((renderer as any).listen);
+}
+
 /**
  * Procedural style of API needed to create elements and text nodes.
  *

packages/core/src/render3/node_manipulation.ts

@@ -11,7 +11,7 @@ import {callHooks} from './hooks';
 import {LContainer, unusedValueExportToPlacateAjd as unused1} from './interfaces/container';
 import {LContainerNode, LElementNode, LNode, LNodeFlags, LProjectionNode, LTextNode, LViewNode, unusedValueExportToPlacateAjd as unused2} from './interfaces/node';
 import {unusedValueExportToPlacateAjd as unused3} from './interfaces/projection';
-import {ProceduralRenderer3, RElement, RNode, RText, unusedValueExportToPlacateAjd as unused4} from './interfaces/renderer';
+import {ProceduralRenderer3, RElement, RNode, RText, isProceduralRenderer, unusedValueExportToPlacateAjd as unused4} from './interfaces/renderer';
 import {HookData, LView, LViewOrLContainer, TView, unusedValueExportToPlacateAjd as unused5} from './interfaces/view';
 import {assertNodeType} from './node_assert';
 
@@ -174,16 +174,15 @@ export function addRemoveViewFromContainer(
       const type = node.flags & LNodeFlags.TYPE_MASK;
       let nextNode: LNode|null = null;
       const renderer = container.view.renderer;
-      const isFnRenderer = (renderer as ProceduralRenderer3).listen;
       if (type === LNodeFlags.Element) {
-        insertMode ? (isFnRenderer ?
+        if (insertMode) {
-                          (renderer as ProceduralRenderer3)
+          isProceduralRenderer(renderer) ?
-                              .insertBefore !(parent, node.native !, beforeNode as RNode | null) :
+              renderer.insertBefore(parent, node.native !, beforeNode as RNode | null) :
-                          parent.insertBefore(node.native !, beforeNode as RNode | null, true)) :
+              parent.insertBefore(node.native !, beforeNode as RNode | null, true);
-                     (isFnRenderer ?
+        } else {
-                          (renderer as ProceduralRenderer3)
+          isProceduralRenderer(renderer) ? renderer.removeChild(parent as RElement, node.native !) :
-                              .removeChild !(parent as RElement, node.native !) :
+                                           parent.removeChild(node.native !);
-                          parent.removeChild(node.native !));
+        }
         nextNode = node.next;
       } else if (type === LNodeFlags.Container) {
         // if we get to a container, it must be a root node of a view because we are only
@@ -421,7 +420,7 @@ export function canInsertNativeNode(parent: LNode, currentView: LView): boolean
 }
 
 /**
- * Appends the provided child element to the provided parent.
+ * Appends the `child` element to the `parent`.
  *
  * The element insertion might be delayed {@link canInsertNativeNode}
  *
@@ -434,8 +433,7 @@ export function appendChild(parent: LNode, child: RNode | null, currentView: LVi
   if (child !== null && canInsertNativeNode(parent, currentView)) {
     // We only add element if not in View or not projected.
     const renderer = currentView.renderer;
-    (renderer as ProceduralRenderer3).listen ?
+    isProceduralRenderer(renderer) ? renderer.appendChild(parent.native !as RElement, child) :
-        (renderer as ProceduralRenderer3).appendChild !(parent.native !as RElement, child) :
                                      parent.native !.appendChild(child);
     return true;
   }
@@ -455,9 +453,8 @@ export function insertChild(node: LNode, currentView: LView): void {
   if (canInsertNativeNode(parent, currentView)) {
     let nativeSibling: RNode|null = findNextRNodeSibling(node, null);
     const renderer = currentView.renderer;
-    (renderer as ProceduralRenderer3).listen ?
+    isProceduralRenderer(renderer) ?
-        (renderer as ProceduralRenderer3)
+        renderer.insertBefore(parent.native !, node.native !, nativeSibling) :
-            .insertBefore !(parent.native !, node.native !, nativeSibling) :
         parent.native !.insertBefore(node.native !, nativeSibling, false);
   }
 }

packages/core/test/render3/object_literal_spec.ts

@@ -283,13 +283,17 @@ describe('array literals', () => {
      */
     function Template(ctx: any, cm: boolean) {
       if (cm) {
-        E(0, NestedComp);
+        elementStart(0, NestedComp);
-        e();
+        elementEnd();
       }
-      p(0, 'config', o2(2, e0_literal_2, 'animation', ctx.name, 'actions',
+      elementProperty(
-                        o1(1, e0_literal_1, 1, o1(0, e0_literal, 'duration', ctx.duration))));
+          0, 'config',
+          objectLiteral2(
+              2, e0_literal_2, 'animation', ctx.name, 'actions',
+              objectLiteral1(
+                  1, e0_literal_1, 1, objectLiteral1(0, e0_literal, 'duration', ctx.duration))));
       NestedComp.ngComponentDef.h(1, 0);
-      r(1, 0);
+      componentRefresh(1, 0);
     }
 
     const e0_literal = {opacity: 1, duration: null};