refactor(ivy): remove styling state storage and introduce direct style writing (#32259) (#32596)

This patch is a final major refactor in styling Angular.

This PR includes three main fixes:

All temporary state taht is persisted between template style/class application
and style/class application in host bindings is now removed.
Removes the styling() and stylingApply() instructions.
Introduces a "direct apply" mode that is used apply prop-based
style/class in the event that there are no map-based bindings as
well as property collisions.

PR Close #32259

PR Close #32596

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

@@ -155,6 +155,9 @@
   {
     "name": "_currentNamespace"
   },
+  {
+    "name": "_elementExitFn"
+  },
   {
     "name": "_global"
   },
@@ -165,7 +168,7 @@
     "name": "_selectedIndex"
   },
   {
-    "name": "_stateStorage"
+    "name": "_state"
   },
   {
     "name": "addComponentLogic"
@@ -176,6 +179,9 @@
   {
     "name": "addToViewTree"
   },
+  {
+    "name": "allocStylingMapArray"
+  },
   {
     "name": "appendChild"
   },
@@ -254,6 +260,9 @@
   {
     "name": "executeContentQueries"
   },
+  {
+    "name": "executeElementExitFn"
+  },
   {
     "name": "executeInitAndCheckHooks"
   },
@@ -395,6 +404,9 @@
   {
     "name": "getStylingMapArray"
   },
+  {
+    "name": "hasActiveElementFlag"
+  },
   {
     "name": "hasClassInput"
   },
@@ -572,9 +584,6 @@
   {
     "name": "renderView"
   },
-  {
-    "name": "resetAllStylingState"
-  },
   {
     "name": "resetComponentState"
   },

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

@@ -134,6 +134,9 @@
   {
     "name": "__window"
   },
+  {
+    "name": "_elementExitFn"
+  },
   {
     "name": "_global"
   },
@@ -144,7 +147,7 @@
     "name": "_selectedIndex"
   },
   {
-    "name": "_stateStorage"
+    "name": "_state"
   },
   {
     "name": "addToViewTree"
@@ -209,6 +212,9 @@
   {
     "name": "executeCheckHooks"
   },
+  {
+    "name": "executeElementExitFn"
+  },
   {
     "name": "executeInitAndCheckHooks"
   },
@@ -314,6 +320,9 @@
   {
     "name": "getSelectedIndex"
   },
+  {
+    "name": "hasActiveElementFlag"
+  },
   {
     "name": "hasParentInjector"
   },
@@ -419,9 +428,6 @@
   {
     "name": "renderView"
   },
-  {
-    "name": "resetAllStylingState"
-  },
   {
     "name": "resetComponentState"
   },

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

@@ -44,6 +44,9 @@
   {
     "name": "DECLARATION_VIEW"
   },
+  {
+    "name": "DEFAULT_BINDING_INDEX"
+  },
   {
     "name": "DEFAULT_BINDING_VALUE"
   },
@@ -51,7 +54,7 @@
     "name": "DEFAULT_GUARD_MASK_VALUE"
   },
   {
-    "name": "DEFAULT_SIZE_VALUE"
+    "name": "DEFAULT_TOTAL_SOURCES"
   },
   {
     "name": "DefaultIterableDiffer"
@@ -92,6 +95,9 @@
   {
     "name": "HOST"
   },
+  {
+    "name": "INDEX_START_VALUE"
+  },
   {
     "name": "INJECTOR"
   },
@@ -111,7 +117,7 @@
     "name": "MAP_BASED_ENTRY_PROP_NAME"
   },
   {
-    "name": "MIN_DIRECTIVE_ID"
+    "name": "MAP_DIRTY_VALUE"
   },
   {
     "name": "MONKEY_PATCH_KEY_NAME"
@@ -215,9 +221,6 @@
   {
     "name": "STYLING_INDEX_FOR_MAP_BINDING"
   },
-  {
-    "name": "STYLING_INDEX_START_VALUE"
-  },
   {
     "name": "SWITCH_ELEMENT_REF_FACTORY"
   },
@@ -227,6 +230,9 @@
   {
     "name": "SWITCH_VIEW_CONTAINER_REF_FACTORY"
   },
+  {
+    "name": "SafeValueImpl"
+  },
   {
     "name": "SkipSelf"
   },
@@ -398,6 +404,9 @@
   {
     "name": "_devMode"
   },
+  {
+    "name": "_elementExitFn"
+  },
   {
     "name": "_global"
   },
@@ -408,16 +417,7 @@
     "name": "_selectedIndex"
   },
   {
-    "name": "_stateStorage"
-  },
-  {
-    "name": "_stylingElement"
-  },
-  {
-    "name": "_stylingProp"
-  },
-  {
-    "name": "_stylingState"
+    "name": "_state"
   },
   {
     "name": "_symbolIterator"
@@ -425,12 +425,6 @@
   {
     "name": "activeDirectiveId"
   },
-  {
-    "name": "activeDirectiveSuperClassDepthPosition"
-  },
-  {
-    "name": "activeDirectiveSuperClassHeight"
-  },
   {
     "name": "addBindingIntoContext"
   },
@@ -440,6 +434,9 @@
   {
     "name": "addItemToStylingMap"
   },
+  {
+    "name": "addNewSourceColumn"
+  },
   {
     "name": "addRemoveViewFromContainer"
   },
@@ -449,6 +446,9 @@
   {
     "name": "addToViewTree"
   },
+  {
+    "name": "allocStylingMapArray"
+  },
   {
     "name": "allocTStylingContext"
   },
@@ -456,7 +456,7 @@
     "name": "allocateNewContextEntry"
   },
   {
-    "name": "allowStylingFlush"
+    "name": "allowDirectStyling"
   },
   {
     "name": "appendChild"
@@ -473,6 +473,15 @@
   {
     "name": "applyStyling"
   },
+  {
+    "name": "applyStylingValue"
+  },
+  {
+    "name": "applyStylingValueDirectly"
+  },
+  {
+    "name": "applyStylingViaContext"
+  },
   {
     "name": "applyToElementOrContainer"
   },
@@ -527,9 +536,6 @@
   {
     "name": "containerInternal"
   },
-  {
-    "name": "contextHasUpdates"
-  },
   {
     "name": "contextLView"
   },
@@ -587,18 +593,6 @@
   {
     "name": "defaultScheduler"
   },
-  {
-    "name": "deferBindingRegistration"
-  },
-  {
-    "name": "deferStylingUpdate"
-  },
-  {
-    "name": "deferredBindingQueue"
-  },
-  {
-    "name": "deleteStylingStateFromStorage"
-  },
   {
     "name": "destroyLView"
   },
@@ -632,6 +626,9 @@
   {
     "name": "executeContentQueries"
   },
+  {
+    "name": "executeElementExitFn"
+  },
   {
     "name": "executeInitAndCheckHooks"
   },
@@ -669,10 +666,10 @@
     "name": "findExistingListener"
   },
   {
-    "name": "findViaComponent"
+    "name": "findInitialStylingValue"
   },
   {
-    "name": "flushDeferredBindings"
+    "name": "findViaComponent"
   },
   {
     "name": "flushStyling"
@@ -692,15 +689,6 @@
   {
     "name": "getActiveDirectiveId"
   },
-  {
-    "name": "getActiveDirectiveStylingIndex"
-  },
-  {
-    "name": "getActiveDirectiveSuperClassDepth"
-  },
-  {
-    "name": "getActiveDirectiveSuperClassHeight"
-  },
   {
     "name": "getBeforeNodeForView"
   },
@@ -749,6 +737,9 @@
   {
     "name": "getDebugContext"
   },
+  {
+    "name": "getDefaultValue"
+  },
   {
     "name": "getDirectiveDef"
   },
@@ -788,6 +779,9 @@
   {
     "name": "getLViewParent"
   },
+  {
+    "name": "getLockedConfig"
+  },
   {
     "name": "getMapProp"
   },
@@ -896,21 +890,33 @@
   {
     "name": "getTViewCleanup"
   },
+  {
+    "name": "getTotalSources"
+  },
   {
     "name": "getTypeName"
   },
   {
     "name": "getTypeNameForDebugging"
   },
+  {
+    "name": "getValue"
+  },
   {
     "name": "getValuesCount"
   },
   {
     "name": "handleError"
   },
+  {
+    "name": "hasActiveElementFlag"
+  },
   {
     "name": "hasClassInput"
   },
+  {
+    "name": "hasConfig"
+  },
   {
     "name": "hasDirectives"
   },
@@ -1016,6 +1022,12 @@
   {
     "name": "isForwardRef"
   },
+  {
+    "name": "isHostStyling"
+  },
+  {
+    "name": "isHostStylingActive"
+  },
   {
     "name": "isJsObject"
   },
@@ -1088,24 +1100,21 @@
   {
     "name": "markAsComponentHost"
   },
-  {
-    "name": "markContextToPersistState"
-  },
   {
     "name": "markDirty"
   },
   {
     "name": "markDirtyIfOnPush"
   },
+  {
+    "name": "markStylingStateAsDirty"
+  },
   {
     "name": "markViewDirty"
   },
   {
     "name": "matchTemplateAttribute"
   },
-  {
-    "name": "maybeApplyStyling"
-  },
   {
     "name": "namespaceHTMLInternal"
   },
@@ -1142,6 +1151,9 @@
   {
     "name": "normalizeBitMaskValue"
   },
+  {
+    "name": "patchConfig"
+  },
   {
     "name": "postProcessBaseDirective"
   },
@@ -1205,6 +1217,9 @@
   {
     "name": "renderDetachView"
   },
+  {
+    "name": "renderHostBindingsAsStale"
+  },
   {
     "name": "renderInitialStyling"
   },
@@ -1217,9 +1232,6 @@
   {
     "name": "renderView"
   },
-  {
-    "name": "resetAllStylingState"
-  },
   {
     "name": "resetComponentState"
   },
@@ -1253,6 +1265,9 @@
   {
     "name": "selectView"
   },
+  {
+    "name": "setActiveElementFlag"
+  },
   {
     "name": "setActiveHostElement"
   },
@@ -1265,9 +1280,6 @@
   {
     "name": "setClass"
   },
-  {
-    "name": "setConfig"
-  },
   {
     "name": "setCurrentDirectiveDef"
   },
@@ -1277,9 +1289,15 @@
   {
     "name": "setCurrentStyleSanitizer"
   },
+  {
+    "name": "setDefaultValue"
+  },
   {
     "name": "setDirectiveStylingInput"
   },
+  {
+    "name": "setElementExitFn"
+  },
   {
     "name": "setGuardMask"
   },
@@ -1301,6 +1319,9 @@
   {
     "name": "setIsNotParent"
   },
+  {
+    "name": "setMapAsDirty"
+  },
   {
     "name": "setMapValue"
   },
@@ -1319,18 +1340,15 @@
   {
     "name": "setUpAttributes"
   },
+  {
+    "name": "setValue"
+  },
   {
     "name": "shouldSearchParent"
   },
-  {
-    "name": "stateIsPersisted"
-  },
   {
     "name": "storeCleanupFn"
   },
-  {
-    "name": "storeStylingState"
-  },
   {
     "name": "stringify"
   },
@@ -1340,6 +1358,9 @@
   {
     "name": "stylingMapToString"
   },
+  {
+    "name": "stylingProp"
+  },
   {
     "name": "syncViewWithBlueprint"
   },
@@ -1361,26 +1382,23 @@
   {
     "name": "unwrapRNode"
   },
+  {
+    "name": "unwrapSafeValue"
+  },
   {
     "name": "updateBindingData"
   },
   {
-    "name": "updateClassBinding"
+    "name": "updateClassViaContext"
   },
   {
     "name": "updateInitialStylingOnContext"
   },
-  {
-    "name": "updateLastDirectiveIndex"
-  },
-  {
-    "name": "updateLastDirectiveIndex"
-  },
   {
     "name": "updateRawValueOnContext"
   },
   {
-    "name": "updateStyleBinding"
+    "name": "updateStyleViaContext"
   },
   {
     "name": "viewAttachedToChangeDetector"
@@ -1439,12 +1457,6 @@
   {
     "name": "ɵɵrestoreView"
   },
-  {
-    "name": "ɵɵstyling"
-  },
-  {
-    "name": "ɵɵstylingApply"
-  },
   {
     "name": "ɵɵtemplate"
   },