refactor(ivy): make styling instructions use the new styling algorithm (#30742)

This commit is the final patch of the ivy styling algorithm refactor.
This patch swaps functionality from the old styling mechanism to the
new refactored code by changing the instruction code the compiler
generates and by pointing the runtime instruction code to the new
styling algorithm.

PR Close #30742

packages/core/src/render3/styling/class_and_style_bindings.ts

@@ -686,7 +686,7 @@ function patchStylingMapIntoContext(
   // directive values if their identity has not changed. If a previous directive set this
   // value as dirty (because its own shape changed) then this means that the object has been
   // offset to a different area in the context. Because its value has been offset then it
-  // can't write to a region that it wrote to before (which may have been apart of another
+  // can't write to a region that it wrote to before (which may have been a part of another
   // directive) and therefore its shape changes too.
   let valuesEntryShapeChange =
       existingCachedValueIsDirty || ((!existingCachedValue && cacheValue) ? true : false);
@@ -822,7 +822,7 @@ function patchStylingMapIntoContext(
   }
 
   // STEP 3:
-  // Remove (nullify) any existing entries in the context that were not apart of the
+  // Remove (nullify) any existing entries in the context that were not a part of the
   // map input value that was passed into this algorithm for this directive.
   while (ctxIndex < ctxEnd) {
     valuesEntryShapeChange = true;  // some values are missing
@@ -914,7 +914,13 @@ function updateSingleStylingValue(
   const currDirective = getDirectiveIndexFromEntry(context, singleIndex);
   const value: string|boolean|null = (input instanceof BoundPlayerFactory) ? input.value : input;
 
-  ngDevMode && ngDevMode.stylingProp++;
+  if (ngDevMode) {
+    if (isClassBased) {
+      ngDevMode.classProp++;
+    } else {
+      ngDevMode.styleProp++;
+    }
+  }
 
   if (hasValueChanged(currFlag, currValue, value) &&
       (forceOverride || allowValueChange(currValue, value, currDirective, directiveIndex))) {
@@ -973,7 +979,13 @@ function updateSingleStylingValue(
       setContextPlayersDirty(context, true);
     }
 
-    ngDevMode && ngDevMode.stylingPropCacheMiss++;
+    if (ngDevMode) {
+      if (isClassBased) {
+        ngDevMode.classPropCacheMiss++;
+      } else {
+        ngDevMode.stylePropCacheMiss++;
+      }
+    }
   }
 }
 
@@ -1002,7 +1014,7 @@ export function renderStyling(
     isFirstRender: boolean, classesStore?: BindingStore | null, stylesStore?: BindingStore | null,
     directiveIndex: number = 0): number {
   let totalPlayersQueued = 0;
-  ngDevMode && ngDevMode.stylingApply++;
+  ngDevMode && ngDevMode.flushStyling++;
 
   // this prevents multiple attempts to render style/class values on
   // the same element...
@@ -1017,8 +1029,6 @@ export function renderStyling(
     flushHostInstructionsQueue(context);
 
     if (isContextDirty(context)) {
-      ngDevMode && ngDevMode.stylingApplyCacheMiss++;
-
       // this is here to prevent things like <ng-container [style] [class]>...</ng-container>
       // or if there are any host style or class bindings present in a directive set on
       // a container node
@@ -1807,7 +1817,7 @@ function isMultiValueCacheHit(
  * - The dirty flag will be set to true
  *
  * If the `dirtyFutureValues` param is provided then it will update all future entries (binding
- * entries that exist as apart of other directives) to be dirty as well. This will force the
+ * entries that exist as a part of other directives) to be dirty as well. This will force the
  * styling algorithm to reapply those values once change detection checks them (which will in
  * turn cause the styling context to update itself and the correct styling values will be
  * rendered on screen).

packages/core/src/render3/styling/util.ts

@@ -156,14 +156,6 @@ export function isAnimationProp(name: string): boolean {
   return name[0] === ANIMATION_PROP_PREFIX;
 }
 
-export function hasClassInput(tNode: TNode) {
-  return (tNode.flags & TNodeFlags.hasClassInput) !== 0;
-}
-
-export function hasStyleInput(tNode: TNode) {
-  return (tNode.flags & TNodeFlags.hasStyleInput) !== 0;
-}
-
 export function forceClassesAsString(classes: string | {[key: string]: any} | null | undefined):
     string {
   if (classes && typeof classes !== 'string') {
@@ -226,7 +218,7 @@ export function getPlayersInternal(playerContext: PlayerContext): Player[] {
   const players: Player[] = [];
   const nonFactoryPlayersStart = playerContext[PlayerIndex.NonBuilderPlayersStart];
 
-  // add all factory-based players (which are apart of [style] and [class] bindings)
+  // add all factory-based players (which are a part of [style] and [class] bindings)
   for (let i = PlayerIndex.PlayerBuildersStartPosition + PlayerIndex.PlayerOffsetPosition;
        i < nonFactoryPlayersStart; i += PlayerIndex.PlayerAndPlayerBuildersTupleSize) {
     const player = playerContext[i] as Player | null;
@@ -235,7 +227,7 @@ export function getPlayersInternal(playerContext: PlayerContext): Player[] {
     }
   }
 
-  // add all custom players (not apart of [style] and [class] bindings)
+  // add all custom players (not a part of [style] and [class] bindings)
   for (let i = nonFactoryPlayersStart; i < playerContext.length; i++) {
     players.push(playerContext[i] as Player);
   }