perf(core): change RendererType2.styles to accept a only a flat array (#49072)

alan-agius4 · AndrewKushnir · commit 9b9c818f99c4 · 2023-02-17T11:11:48.000-08:00
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
diff --git a/goldens/public-api/core/index.md b/goldens/public-api/core/index.md
@@ -1234,7 +1234,7 @@ export interface RendererType2 {
     };
     encapsulation: ViewEncapsulation;
     id: string;
-    styles: (string | any[])[];
+    styles: string[];
 }
 
 // @public
diff --git a/packages/core/src/render/api_flags.ts b/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.
diff --git a/packages/core/test/bundling/animations/bundle.golden_symbols.json b/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"
   },
diff --git a/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json b/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"
   },
diff --git a/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json b/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"
   },
diff --git a/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json b/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"
   },
diff --git a/packages/core/test/bundling/router/bundle.golden_symbols.json b/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"
   },
diff --git a/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json b/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"
   },
diff --git a/packages/core/test/bundling/todo/bundle.golden_symbols.json b/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"
   },
diff --git a/packages/platform-browser/src/dom/dom_renderer.ts b/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 {
diff --git a/packages/platform-browser/src/private_export.ts b/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';
diff --git a/packages/platform-server/src/server_renderer.ts b/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);

Original file line number	Diff line number	Diff line change
`@@ -1234,7 +1234,7 @@ export interface RendererType2 {`
`1234`	`1234`	`};`
`1235`	`1235`	`encapsulation: ViewEncapsulation;`
`1236`	`1236`	`id: string;`
`1237`		`- styles: (string \| any[])[];`
	`1237`	`+ styles: string[];`
`1238`	`1238`	`}`
`1239`	`1239`
`1240`	`1240`	`// @public`
Original file line number	Diff line number	Diff line change
`@@ -869,9 +869,6 @@`
`869`	`869`	`{`
`870`	`870`	`"name": "findAttrIndexInNode"`
`871`	`871`	`},`
`872`		`- {`
`873`		`- "name": "flattenStyles"`
`874`		`- },`
`875`	`872`	`{`
`876`	`873`	`"name": "flattenUnsubscriptionErrors"`
`877`	`874`	`},`
`@@ -1406,6 +1403,9 @@`
`1406`	`1403`	`{`
`1407`	`1404`	`"name": "shareSubjectFactory"`
`1408`	`1405`	`},`
	`1406`	`+ {`
	`1407`	`+ "name": "shimStylesContent"`
	`1408`	`+ },`
`1409`	`1409`	`{`
`1410`	`1410`	`"name": "shouldSearchParent"`
`1411`	`1411`	`},`
Original file line number	Diff line number	Diff line change
`@@ -632,9 +632,6 @@`
`632`	`632`	`{`
`633`	`633`	`"name": "findAttrIndexInNode"`
`634`	`634`	`},`
`635`		`- {`
`636`		`- "name": "flattenStyles"`
`637`		`- },`
`638`	`635`	`{`
`639`	`636`	`"name": "flattenUnsubscriptionErrors"`
`640`	`637`	`},`
`@@ -1073,6 +1070,9 @@`
`1073`	`1070`	`{`
`1074`	`1071`	`"name": "shareSubjectFactory"`
`1075`	`1072`	`},`
	`1073`	`+ {`
	`1074`	`+ "name": "shimStylesContent"`
	`1075`	`+ },`
`1076`	`1076`	`{`
`1077`	`1077`	`"name": "shouldSearchParent"`
`1078`	`1078`	`},`
Original file line number	Diff line number	Diff line change
`@@ -884,9 +884,6 @@`
`884`	`884`	`{`
`885`	`885`	`"name": "findStylingValue"`
`886`	`886`	`},`
`887`		`- {`
`888`		`- "name": "flattenStyles"`
`889`		`- },`
`890`	`887`	`{`
`891`	`888`	`"name": "flattenUnsubscriptionErrors"`
`892`	`889`	`},`
`@@ -1559,6 +1556,9 @@`
`1559`	`1556`	`{`
`1560`	`1557`	`"name": "shareSubjectFactory"`
`1561`	`1558`	`},`
	`1559`	`+ {`
	`1560`	`+ "name": "shimStylesContent"`
	`1561`	`+ },`
`1562`	`1562`	`{`
`1563`	`1563`	`"name": "shouldSearchParent"`
`1564`	`1564`	`},`
Original file line number	Diff line number	Diff line change
`@@ -854,9 +854,6 @@`
`854`	`854`	`{`
`855`	`855`	`"name": "findStylingValue"`
`856`	`856`	`},`
`857`		`- {`
`858`		`- "name": "flattenStyles"`
`859`		`- },`
`860`	`857`	`{`
`861`	`858`	`"name": "flattenUnsubscriptionErrors"`
`862`	`859`	`},`
`@@ -1535,6 +1532,9 @@`
`1535`	`1532`	`{`
`1536`	`1533`	`"name": "shareSubjectFactory"`
`1537`	`1534`	`},`
	`1535`	`+ {`
	`1536`	`+ "name": "shimStylesContent"`
	`1537`	`+ },`
`1538`	`1538`	`{`
`1539`	`1539`	`"name": "shouldSearchParent"`
`1540`	`1540`	`},`
Original file line number	Diff line number	Diff line change
`@@ -1151,9 +1151,6 @@`
`1151`	`1151`	`{`
`1152`	`1152`	`"name": "flatten2"`
`1153`	`1153`	`},`
`1154`		`- {`
`1155`		`- "name": "flattenStyles"`
`1156`		`- },`
`1157`	`1154`	`{`
`1158`	`1155`	`"name": "flattenUnsubscriptionErrors"`
`1159`	`1156`	`},`
`@@ -1868,6 +1865,9 @@`
`1868`	`1865`	`{`
`1869`	`1866`	`"name": "shareSubjectFactory"`
`1870`	`1867`	`},`
	`1868`	`+ {`
	`1869`	`+ "name": "shimStylesContent"`
	`1870`	`+ },`
`1871`	`1871`	`{`
`1872`	`1872`	`"name": "shouldSearchParent"`
`1873`	`1873`	`},`
Original file line number	Diff line number	Diff line change
`@@ -560,9 +560,6 @@`
`560`	`560`	`{`
`561`	`561`	`"name": "extractDirectiveDef"`
`562`	`562`	`},`
`563`		`- {`
`564`		`- "name": "flattenStyles"`
`565`		`- },`
`566`	`563`	`{`
`567`	`564`	`"name": "flattenUnsubscriptionErrors"`
`568`	`565`	`},`
`@@ -929,6 +926,9 @@`
`929`	`926`	`{`
`930`	`927`	`"name": "shareSubjectFactory"`
`931`	`928`	`},`
	`929`	`+ {`
	`930`	`+ "name": "shimStylesContent"`
	`931`	`+ },`
`932`	`932`	`{`
`933`	`933`	`"name": "shouldSearchParent"`
`934`	`934`	`},`
Original file line number	Diff line number	Diff line change
`@@ -755,9 +755,6 @@`
`755`	`755`	`{`
`756`	`756`	`"name": "findStylingValue"`
`757`	`757`	`},`
`758`		`- {`
`759`		`- "name": "flattenStyles"`
`760`		`- },`
`761`	`758`	`{`
`762`	`759`	`"name": "flattenUnsubscriptionErrors"`
`763`	`760`	`},`
`@@ -1307,6 +1304,9 @@`
`1307`	`1304`	`{`
`1308`	`1305`	`"name": "shareSubjectFactory"`
`1309`	`1306`	`},`
	`1307`	`+ {`
	`1308`	`+ "name": "shimStylesContent"`
	`1309`	`+ },`
`1310`	`1310`	`{`
`1311`	`1311`	`"name": "shouldSearchParent"`
`1312`	`1312`	`},`