fix(): expose renderStyleSheet

A-l-y-l-e · Mar 20, 2020 · 0d87ce6 · 0d87ce6
1 parent c509e80
commit 0d87ce6
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 10 deletions.
diff --git a/...docs/components/expansion-demo/custom-expansion-panel/custom-expansion-panel.component.ts b/...docs/components/expansion-demo/custom-expansion-panel/custom-expansion-panel.component.ts
@@ -6,7 +6,6 @@ import { STYLES as EXPANSION_STYLES } from '@alyle/ui/expansion';
 const STYLES = (theme: ThemeVariables, ref: ThemeRef) => {
   // The classes for `expansion` are not yet created, therefore,
   // we will create them to use them.
-  ref.selectorsOf(EXPANSION_STYLES);
   const expansion = ref.selectorsOf(EXPANSION_STYLES);
 
   const { before } = theme;

diff --git a/src/lib/src/minimal/renderer-style.ts b/src/lib/src/minimal/renderer-style.ts
@@ -1,4 +1,4 @@
-import { Injectable, ElementRef, Renderer2, Optional } from '@angular/core';
+import { Injectable, ElementRef, Renderer2, Optional, Self } from '@angular/core';
 import { LyTheme2, ThemeRef } from '../theme/theme2.service';
 import { StyleTemplate } from '../parse';
 import { TypeStyle, LyStyles, LyClasses } from '../theme/style';
@@ -12,8 +12,8 @@ export class StyleRenderer {
 
   constructor(
     private _theme: LyTheme2,
-    @Optional() _el: ElementRef,
-    @Optional() private _renderer: Renderer2
+    @Self() @Optional() _el: ElementRef,
+    @Self() @Optional() private _renderer: Renderer2
   ) {
     if (_el) {
       this._nEl = _el.nativeElement;
@@ -37,9 +37,9 @@ export class StyleRenderer {
    *
    */
   renderSheet<T>(styles: T & LyStyles, applyRootClass?: boolean): LyClasses<T> {
-    const classes = this._theme._createStyleContent2(styles, null, null, TypeStyle.Multiple);
-    if (applyRootClass && classes.root) {
-      this.addClass(classes.root);
+    const classes = this._theme.renderStyleSheet(styles);
+    if (applyRootClass && (classes as any).root) {
+      this.addClass((classes as any).root);
     }
     return classes;
   }

diff --git a/src/lib/src/theme/style.ts b/src/lib/src/theme/style.ts
@@ -1,6 +1,7 @@
 import { ThemeVariables } from './theme-config';
 import { StyleTemplate } from '../parse';
 import { Color } from '@alyle/ui/color';
+import { memoize } from '../minimal/memoize';
 
 /**
  * For internal use only
@@ -105,6 +106,6 @@ export interface LyComponentStyle<COMPONENT, INPUTS extends keyof COMPONENT> {
   [key: string]: LyComponentStyleItem<COMPONENT, INPUTS>;
 }
 
-export function getThemeNameForSelectors(themeId: string) {
+export const getThemeNameForSelectors = memoize((themeId: string) => {
   return `${themeId}<~(selectors)`;
-}
+});
diff --git a/src/lib/src/theme/theme2.service.ts b/src/lib/src/theme/theme2.service.ts
@@ -261,6 +261,18 @@ export class LyTheme2 {
     return false;
   }
 
+  /**
+   * return selectors if exists
+   *
+   * e.g.
+   *
+   * ```ts
+   * {
+   *   root: '.c'
+   * }
+   * ```
+   * @param styles id
+   */
   selectorsOf<T>(styles: T): LyClasses<T> {
     const themeName = this.initialTheme;
     if (!_STYLE_MAP.has(styles)) {
@@ -768,4 +780,4 @@ function createNextKeyframeId() {
   return `k${(nextKeyFrameId++).toString(36)}`;
 }
 
-export interface ThemeRef extends Pick<LyTheme2, 'selectorsOf'> { }
+export interface ThemeRef extends Pick<LyTheme2, 'selectorsOf' | 'renderStyleSheet'> { }