perf(core): change RendererType2.styles to accept a only a flat arr…

…ay (#49072)

While unlikely, prior to this change it was possible to provide a nested array of styles to the render. This required the framework to handle this by doing a flatten operation. This change also renames the `flattenStyles` method as it no longer flattens the styles.

BREAKING CHANGE: `RendererType2.styles` no longer accepts a nested arrays.

Closes #48317

PR Close #49072

goldens/public-api/core/index.md

@@ -1234,7 +1234,7 @@ export interface RendererType2 {
     };
     encapsulation: ViewEncapsulation;
     id: string;
-    styles: (string | any[])[];
+    styles: string[];
 }
 
 // @public

packages/core/src/render/api_flags.ts

@@ -34,7 +34,7 @@ export interface RendererType2 {
   /**
    * Defines CSS styles to be stored on a renderer instance.
    */
-  styles: (string|any[])[];
+  styles: string[];
   /**
    * Defines arbitrary developer-defined data to be stored on a renderer instance.
    * This is useful for renderers that delegate to other renderers.

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

@@ -869,9 +869,6 @@
   {
     "name": "findAttrIndexInNode"
   },
-  {
-    "name": "flattenStyles"
-  },
   {
     "name": "flattenUnsubscriptionErrors"
   },
@@ -1406,6 +1403,9 @@
   {
     "name": "shareSubjectFactory"
   },
+  {
+    "name": "shimStylesContent"
+  },
   {
     "name": "shouldSearchParent"
   },

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

@@ -632,9 +632,6 @@
   {
     "name": "findAttrIndexInNode"
   },
-  {
-    "name": "flattenStyles"
-  },
   {
     "name": "flattenUnsubscriptionErrors"
   },
@@ -1073,6 +1070,9 @@
   {
     "name": "shareSubjectFactory"
   },
+  {
+    "name": "shimStylesContent"
+  },
   {
     "name": "shouldSearchParent"
   },

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

@@ -884,9 +884,6 @@
   {
     "name": "findStylingValue"
   },
-  {
-    "name": "flattenStyles"
-  },
   {
     "name": "flattenUnsubscriptionErrors"
   },
@@ -1559,6 +1556,9 @@
   {
     "name": "shareSubjectFactory"
   },
+  {
+    "name": "shimStylesContent"
+  },
   {
     "name": "shouldSearchParent"
   },

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

@@ -854,9 +854,6 @@
   {
     "name": "findStylingValue"
   },
-  {
-    "name": "flattenStyles"
-  },
   {
     "name": "flattenUnsubscriptionErrors"
   },
@@ -1535,6 +1532,9 @@
   {
     "name": "shareSubjectFactory"
   },
+  {
+    "name": "shimStylesContent"
+  },
   {
     "name": "shouldSearchParent"
   },

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

@@ -1151,9 +1151,6 @@
   {
     "name": "flatten2"
   },
-  {
-    "name": "flattenStyles"
-  },
   {
     "name": "flattenUnsubscriptionErrors"
   },
@@ -1868,6 +1865,9 @@
   {
     "name": "shareSubjectFactory"
   },
+  {
+    "name": "shimStylesContent"
+  },
   {
     "name": "shouldSearchParent"
   },

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

@@ -560,9 +560,6 @@
   {
     "name": "extractDirectiveDef"
   },
-  {
-    "name": "flattenStyles"
-  },
   {
     "name": "flattenUnsubscriptionErrors"
   },
@@ -929,6 +926,9 @@
   {
     "name": "shareSubjectFactory"
   },
+  {
+    "name": "shimStylesContent"
+  },
   {
     "name": "shouldSearchParent"
   },

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

@@ -755,9 +755,6 @@
   {
     "name": "findStylingValue"
   },
-  {
-    "name": "flattenStyles"
-  },
   {
     "name": "flattenUnsubscriptionErrors"
   },
@@ -1307,6 +1304,9 @@
   {
     "name": "shareSubjectFactory"
   },
+  {
+    "name": "shimStylesContent"
+  },
   {
     "name": "shouldSearchParent"
   },

packages/platform-browser/src/dom/dom_renderer.ts

@@ -53,10 +53,8 @@ export function shimHostAttribute(componentShortId: string): string {
   return HOST_ATTR.replace(COMPONENT_REGEX, componentShortId);
 }
 
-export function flattenStyles(compId: string, styles: Array<string|string[]>): string[] {
-  // Cannot use `Infinity` as depth as `infinity` is not a number literal in TypeScript.
-  // See: https://github.com/microsoft/TypeScript/issues/32277
-  return styles.flat(100).map(s => s.replace(COMPONENT_REGEX, compId));
+export function shimStylesContent(compId: string, styles: string[]): string[] {
+  return styles.map(s => s.replace(COMPONENT_REGEX, compId));
 }
 
 function decoratePreventDefault(eventHandler: Function): Function {
@@ -323,7 +321,7 @@ class ShadowDomRenderer extends DefaultDomRenderer2 {
     this.shadowRoot = (hostEl as any).attachShadow({mode: 'open'});
 
     this.sharedStylesHost.addHost(this.shadowRoot);
-    const styles = flattenStyles(component.id, component.styles);
+    const styles = shimStylesContent(component.id, component.styles);
 
     for (const style of styles) {
       const styleEl = document.createElement('style');
@@ -367,7 +365,7 @@ class NoneEncapsulationDomRenderer extends DefaultDomRenderer2 {
       compId = component.id,
   ) {
     super(eventManager);
-    this.styles = flattenStyles(compId, component.styles);
+    this.styles = shimStylesContent(compId, component.styles);
   }
 
   applyStyles(): void {

packages/platform-browser/src/private_export.ts

@@ -12,7 +12,7 @@ export {BrowserDomAdapter as ɵBrowserDomAdapter} from './browser/browser_adapte
 export {TRANSITION_ID as ɵTRANSITION_ID} from './browser/server-transition';
 export {BrowserGetTestability as ɵBrowserGetTestability} from './browser/testability';
 export {escapeHtml as ɵescapeHtml} from './browser/transfer_state';
-export {DomRendererFactory2 as ɵDomRendererFactory2, flattenStyles as ɵflattenStyles, NAMESPACE_URIS as ɵNAMESPACE_URIS, shimContentAttribute as ɵshimContentAttribute, shimHostAttribute as ɵshimHostAttribute} from './dom/dom_renderer';
+export {DomRendererFactory2 as ɵDomRendererFactory2, NAMESPACE_URIS as ɵNAMESPACE_URIS, shimContentAttribute as ɵshimContentAttribute, shimHostAttribute as ɵshimHostAttribute, shimStylesContent as ɵshimStyles} from './dom/dom_renderer';
 export {DomEventsPlugin as ɵDomEventsPlugin} from './dom/events/dom_events';
 export {HammerGesturesPlugin as ɵHammerGesturesPlugin} from './dom/events/hammer_gestures';
 export {KeyEventsPlugin as ɵKeyEventsPlugin} from './dom/events/key_events';

packages/platform-server/src/server_renderer.ts

@@ -9,7 +9,7 @@
 import {DOCUMENT, ɵgetDOM as getDOM} from '@angular/common';
 import {DomElementSchemaRegistry} from '@angular/compiler';
 import {Inject, Injectable, NgZone, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, ViewEncapsulation} from '@angular/core';
-import {EventManager, ɵflattenStyles as flattenStyles, ɵNAMESPACE_URIS as NAMESPACE_URIS, ɵSharedStylesHost as SharedStylesHost, ɵshimContentAttribute as shimContentAttribute, ɵshimHostAttribute as shimHostAttribute} from '@angular/platform-browser';
+import {EventManager, ɵNAMESPACE_URIS as NAMESPACE_URIS, ɵSharedStylesHost as SharedStylesHost, ɵshimContentAttribute as shimContentAttribute, ɵshimHostAttribute as shimHostAttribute, ɵshimStyles as shimStylesContent} from '@angular/platform-browser';
 
 const EMPTY_ARRAY: any[] = [];
 
@@ -45,7 +45,7 @@ export class ServerRendererFactory2 implements RendererFactory2 {
       }
       default: {
         if (!this.rendererByCompId.has(type.id)) {
-          const styles = flattenStyles(type.id, type.styles);
+          const styles = shimStylesContent(type.id, type.styles);
           this.sharedStylesHost.addStyles(styles);
           this.rendererByCompId.set(type.id, this.defaultRenderer);
         }
@@ -257,7 +257,7 @@ class EmulatedEncapsulationServerRenderer2 extends DefaultServerRenderer2 {
     super(eventManager, document, ngZone, schema);
     // Add a 's' prefix to style attributes to indicate server.
     const componentId = 's' + component.id;
-    const styles = flattenStyles(componentId, component.styles);
+    const styles = shimStylesContent(componentId, component.styles);
     sharedStylesHost.addStyles(styles);
 
     this.contentAttr = shimContentAttribute(componentId);