feat(core): add memoization to style generation (#888)

Enable directives to memoize generated inline-style values.

Author: CaerusKaru

src/lib/core/base/base.ts

@@ -109,9 +109,22 @@ export abstract class BaseDirective implements OnDestroy, OnChanges {
     return this._elementRef.nativeElement;
   }
 
+  /** Add styles to the element using predefined style builder */
   protected addStyles(input: string, parent?: Object) {
-    const styles: StyleDefinition = this._styleBuilder!.buildStyles(input, parent);
-    this._applyStyleToElement(styles);
+    const builder = this._styleBuilder!;
+    const useCache = builder.shouldCache;
+
+    let genStyles: StyleDefinition | undefined = this._styleCache.get(input);
+
+    if (!genStyles || !useCache) {
+      genStyles = builder.buildStyles(input, parent);
+      if (useCache) {
+        this._styleCache.set(input, genStyles);
+      }
+    }
+
+    this._applyStyleToElement(genStyles);
+    builder.sideEffect(input, genStyles, parent);
   }
 
   /** Access the current value (if any) of the @Input property */
@@ -246,4 +259,7 @@ export abstract class BaseDirective implements OnDestroy, OnChanges {
    * getComputedStyle() during ngOnInit().
    */
   protected _hasInitialized = false;
+
+  /** Cache map for style computation */
+  protected _styleCache: Map<string, StyleDefinition> = new Map();
 }

src/lib/core/style-builder/style-builder.ts

@@ -5,10 +5,22 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {Injectable} from '@angular/core';
 import {StyleDefinition} from '../style-utils/style-utils';
 
-@Injectable()
+/** A class that encapsulates CSS style generation for common directives */
 export abstract class StyleBuilder {
+
+  /** Whether to cache the generated output styles */
+  shouldCache = true;
+
+  /** Build the styles given an input string and configuration object from a host */
   abstract buildStyles(input: string, parent?: Object): StyleDefinition;
+
+  /**
+   * Run a side effect computation given the input string and the computed styles
+   * from the build task and the host configuration object
+   * NOTE: This should be a no-op unless an algorithm is provided in a subclass
+   */
+  sideEffect(_input: string, _styles: StyleDefinition, _parent?: Object) {
+  }
 }

src/lib/flex/flex-align/flex-align.ts

@@ -21,28 +21,28 @@ import {
   MediaMonitor,
   StyleBuilder,
   StyleDefinition,
-  StyleUtils
+  StyleUtils,
 } from '@angular/flex-layout/core';
 
 @Injectable({providedIn: 'root'})
-export class FlexAlignStyleBuilder implements StyleBuilder {
-  buildStyles(input: string): StyleDefinition {
-    const css: {[key: string]: string | number} = {};
+export class FlexAlignStyleBuilder extends StyleBuilder {
+  buildStyles(input: string) {
+    const styles: StyleDefinition = {};
 
     // Cross-axis
     switch (input) {
       case 'start':
-        css['align-self'] = 'flex-start';
+        styles['align-self'] = 'flex-start';
         break;
       case 'end':
-        css['align-self'] = 'flex-end';
+        styles['align-self'] = 'flex-end';
         break;
       default:
-        css['align-self'] = input;
+        styles['align-self'] = input;
         break;
     }
 
-    return css;
+    return styles;
   }
 }
 
@@ -125,4 +125,8 @@ export class FlexAlignDirective extends BaseDirective implements OnInit, OnChang
 
     this.addStyles(value && (value + '') || '');
   }
+
+  protected _styleCache = flexAlignCache;
 }
+
+const flexAlignCache: Map<string, StyleDefinition> = new Map();

src/lib/flex/flex-fill/flex-fill.ts

@@ -23,8 +23,8 @@ const FLEX_FILL_CSS = {
 };
 
 @Injectable({providedIn: 'root'})
-export class FlexFillStyleBuilder implements StyleBuilder {
-  buildStyles(_input: string): StyleDefinition {
+export class FlexFillStyleBuilder extends StyleBuilder {
+  buildStyles(_input: string) {
     return FLEX_FILL_CSS;
   }
 }
@@ -47,4 +47,8 @@ export class FlexFillDirective extends BaseDirective {
     super(monitor, elRef, styleUtils, styleBuilder);
     this.addStyles('');
   }
+
+  protected _styleCache = flexFillCache;
 }
+
+const flexFillCache: Map<string, StyleDefinition> = new Map();

src/lib/flex/flex-offset/flex-offset.spec.ts

@@ -223,7 +223,7 @@ describe('flex-offset directive', () => {
 });
 
 @Injectable({providedIn: FlexModule})
-export class MockFlexOffsetStyleBuilder implements StyleBuilder {
+export class MockFlexOffsetStyleBuilder extends StyleBuilder {
   buildStyles(_input: string) {
     return {'margin-top': '10px'};
   }

src/lib/flex/flex-offset/flex-offset.ts

@@ -31,23 +31,24 @@ import {Subscription} from 'rxjs';
 import {Layout, LayoutDirective} from '../layout/layout';
 import {isFlowHorizontal} from '../../utils/layout-validator';
 
-interface FlexOffsetParent {
+export interface FlexOffsetParent {
   layout: string;
   isRtl: boolean;
 }
 
 @Injectable({providedIn: 'root'})
-export class FlexOffsetStyleBuilder implements StyleBuilder {
-  buildStyles(offset: string, parent: FlexOffsetParent): StyleDefinition {
+export class FlexOffsetStyleBuilder extends StyleBuilder {
+  buildStyles(offset: string, parent: FlexOffsetParent) {
     const isPercent = String(offset).indexOf('%') > -1;
     const isPx = String(offset).indexOf('px') > -1;
     if (!isPx && !isPercent && !isNaN(+offset)) {
       offset = offset + '%';
     }
     const horizontalLayoutKey = parent.isRtl ? 'margin-right' : 'margin-left';
-
-    return isFlowHorizontal(parent.layout) ? {[horizontalLayoutKey]: `${offset}`} :
+    const styles = isFlowHorizontal(parent.layout) ? {[horizontalLayoutKey]: `${offset}`} :
       {'margin-top': `${offset}`};
+
+    return styles;
   }
 }
 
@@ -185,6 +186,20 @@ export class FlexOffsetDirective extends BaseDirective implements OnInit, OnChan
     // The flex-direction of this element's flex container. Defaults to 'row'.
     const layout = this._getFlexFlowDirection(this.parentElement, true);
     const isRtl = this._directionality.value === 'rtl';
+    if (layout === 'row' && isRtl) {
+      this._styleCache = flexOffsetCacheRowRtl;
+    } else if (layout === 'row' && !isRtl) {
+      this._styleCache = flexOffsetCacheRowLtr;
+    } else if (layout === 'column' && isRtl) {
+      this._styleCache = flexOffsetCacheColumnRtl;
+    } else if (layout === 'column' && !isRtl) {
+      this._styleCache = flexOffsetCacheColumnLtr;
+    }
     this.addStyles((value && (value + '') || ''), {layout, isRtl});
   }
 }
+
+const flexOffsetCacheRowRtl: Map<string, StyleDefinition> = new Map();
+const flexOffsetCacheColumnRtl: Map<string, StyleDefinition> = new Map();
+const flexOffsetCacheRowLtr: Map<string, StyleDefinition> = new Map();
+const flexOffsetCacheColumnLtr: Map<string, StyleDefinition> = new Map();

src/lib/flex/flex-order/flex-order.ts

@@ -21,14 +21,15 @@ import {
   MediaMonitor,
   StyleBuilder,
   StyleDefinition,
-  StyleUtils
+  StyleUtils,
 } from '@angular/flex-layout/core';
 
 @Injectable({providedIn: 'root'})
-export class FlexOrderStyleBuilder implements StyleBuilder {
-  buildStyles(value: string): StyleDefinition {
+export class FlexOrderStyleBuilder extends StyleBuilder {
+  buildStyles(value: string) {
     const val = parseInt(value, 10);
-    return {order: isNaN(val) ? 0 : val};
+    const styles = {order: isNaN(val) ? 0 : val};
+    return styles;
   }
 }
 
@@ -108,4 +109,8 @@ export class FlexOrderDirective extends BaseDirective implements OnInit, OnChang
 
     this.addStyles(value || '');
   }
+
+  protected _styleCache = flexOrderCache;
 }
+
+const flexOrderCache: Map<string, StyleDefinition> = new Map();

src/lib/flex/flex/flex.spec.ts

@@ -858,6 +858,7 @@ describe('flex directive', () => {
   });
 
   describe('with column basis zero disabled', () => {
+    let styleBuilder: FlexStyleBuilder;
     beforeEach(() => {
       jasmine.addMatchers(customMatchers);
 
@@ -875,16 +876,20 @@ describe('flex directive', () => {
       });
     });
 
-    it('should set flex basis to auto', async(() => {
+    it('should set flex basis to auto', () => {
       componentWithTemplate(`
         <div fxLayout='column'>
           <div fxFlex></div>
         </div>
       `);
+      styleBuilder = TestBed.get(FlexStyleBuilder);
+
+      // Reset the cache because the layout config is only set at startup
+      styleBuilder.shouldCache = false;
       fixture.detectChanges();
       let element = queryFor(fixture, '[fxFlex]')[0];
       expectEl(element).toHaveStyle({'flex': '1 1 auto'}, styler);
-    }));
+    });
   });
 
   describe('with custom builder', () => {
@@ -926,7 +931,7 @@ describe('flex directive', () => {
 });
 
 @Injectable({providedIn: FlexModule})
-export class MockFlexStyleBuilder implements StyleBuilder {
+export class MockFlexStyleBuilder extends StyleBuilder {
   buildStyles(_input: string) {
     return {'flex': '1 1 30%'};
   }

src/lib/flex/flex/flex.ts

@@ -41,16 +41,16 @@ export type FlexBasisAlias = 'grow' | 'initial' | 'auto' | 'none' | 'nogrow' | '
 interface FlexBuilderParent {
   direction: string;
   hasWrap: boolean;
-  useColumnBasisZero: boolean | undefined;
 }
 
 @Injectable({providedIn: 'root'})
-export class FlexStyleBuilder implements StyleBuilder {
-  buildStyles(input: string, parent: FlexBuilderParent): StyleDefinition {
-    let grow: string | number;
-    let shrink: string | number;
-    let basis: string | number;
-    [grow, shrink, basis] = input.split('_');
+export class FlexStyleBuilder extends StyleBuilder {
+  constructor(@Inject(LAYOUT_CONFIG) protected layoutConfig: LayoutConfigOptions) {
+    super();
+  }
+  buildStyles(input: string, parent: FlexBuilderParent) {
+    let [grow, shrink, ...basisParts]: (string|number)[] = input.split(' ');
+    let basis = basisParts.join(' ');
 
     // The flex-direction of this element's flex container. Defaults to 'row'.
     const direction = (parent.direction.indexOf('column') > -1) ? 'column' : 'row';
@@ -97,7 +97,7 @@ export class FlexStyleBuilder implements StyleBuilder {
     };
     switch (basis || '') {
       case '':
-        const useColumnBasisZero = parent.useColumnBasisZero !== false;
+        const useColumnBasisZero = this.layoutConfig.useColumnBasisZero !== false;
         basis = direction === 'row' ? '0%' : (useColumnBasisZero ? '0.000000001px' : 'auto');
         break;
       case 'initial':   // default
@@ -192,7 +192,7 @@ export class FlexStyleBuilder implements StyleBuilder {
       }
     }
 
-    return extendObject(css, {'box-sizing': 'border-box'});
+    return extendObject(css, {'box-sizing': 'border-box'}) as StyleDefinition;
   }
 }
 
@@ -310,12 +310,25 @@ export class FlexDirective extends BaseDirective implements OnInit, OnChanges, O
       flexBasis = this._mqActivation.activatedInput;
     }
 
-    let basis = String(flexBasis).replace(';', '');
-    let parts = validateBasis(basis, this._queryInput('grow'), this._queryInput('shrink'));
+    const basis = String(flexBasis).replace(';', '');
+    const parts = validateBasis(basis, this._queryInput('grow'), this._queryInput('shrink'));
     const addFlexToParent = this.layoutConfig.addFlexToParent !== false;
     const direction = this._getFlexFlowDirection(this.parentElement, addFlexToParent);
     const hasWrap = this._layout && this._layout.wrap;
-    const useColumnBasisZero = this.layoutConfig.useColumnBasisZero;
-    this.addStyles(parts.join('_'), {direction, hasWrap, useColumnBasisZero});
+    if (direction === 'row' && hasWrap) {
+      this._styleCache = flexRowWrapCache;
+    } else if (direction === 'row' && !hasWrap) {
+      this._styleCache = flexRowCache;
+    } else if (direction === 'column' && hasWrap) {
+      this._styleCache = flexColumnWrapCache;
+    } else if (direction === 'column' && !hasWrap) {
+      this._styleCache = flexColumnCache;
+    }
+    this.addStyles(parts.join(' '), {direction, hasWrap});
   }
 }
+
+const flexRowCache: Map<string, StyleDefinition> = new Map();
+const flexColumnCache: Map<string, StyleDefinition> = new Map();
+const flexRowWrapCache: Map<string, StyleDefinition> = new Map();
+const flexColumnWrapCache: Map<string, StyleDefinition> = new Map();

src/lib/flex/layout-align/layout-align.spec.ts

@@ -452,7 +452,8 @@ describe('layout-align directive', () => {
 });
 
 @Injectable({providedIn: FlexModule})
-export class MockLayoutAlignStyleBuilder implements StyleBuilder {
+export class MockLayoutAlignStyleBuilder extends StyleBuilder {
+  shouldCache = false;
   buildStyles(_input: string) {
     return {'justify-content': 'flex-end'};
   }