From f0d0b6a52e2d49a5f79cbab98a106b429489cbd2 Mon Sep 17 00:00:00 2001 From: Artsiom Grintsevich Date: Mon, 12 Dec 2022 16:44:22 +0100 Subject: [PATCH] feat: reduced styles evaluation for never used variant groups combinations --- packages/eva/mapping.json | 27 ++++---- .../src/processor/mapping/mappingProcessor.ts | 39 +++++++++--- .../js/src/service/style/style.service.ts | 62 +++++++++++++------ 3 files changed, 88 insertions(+), 40 deletions(-) diff --git a/packages/eva/mapping.json b/packages/eva/mapping.json index 0d51244..fae7336 100644 --- a/packages/eva/mapping.json +++ b/packages/eva/mapping.json @@ -213,11 +213,6 @@ "default": false, "priority": 1, "scope": "mobile" - }, - "focused": { - "default": false, - "priority": 2, - "scope": "mobile" } } }, @@ -437,8 +432,7 @@ "appearances": { "filled": { "mapping": { - "textFontFamily": "text-font-family", - "iconMarginHorizontal": 4 + "textFontFamily": "text-font-family" }, "variantGroups": { "status": { @@ -4914,7 +4908,7 @@ }, "status": { "basic": { - "default": false + "default": true }, "primary": { "default": false @@ -4941,7 +4935,6 @@ "appearances": { "default": { "mapping": { - "color": "text-basic-color" }, "variantGroups": { "category": { @@ -5037,13 +5030,21 @@ } }, "alternative": { - "mapping": { - "color": "text-alternate-color" + "variantGroups": { + "status": { + "basic": { + "color": "text-alternate-color" + } + } } }, "hint": { - "mapping": { - "color": "text-hint-color" + "variantGroups": { + "status": { + "basic": { + "color": "text-hint-color" + } + } } } } diff --git a/packages/processor/js/src/processor/mapping/mappingProcessor.ts b/packages/processor/js/src/processor/mapping/mappingProcessor.ts index 1057e95..e7cbb39 100644 --- a/packages/processor/js/src/processor/mapping/mappingProcessor.ts +++ b/packages/processor/js/src/processor/mapping/mappingProcessor.ts @@ -6,6 +6,7 @@ import { Processor } from '../processor'; import { getComponentVariants, getComponentStates, + needsAllVariantCases, SEPARATOR_MAPPING_ENTRY, } from '../../service'; @@ -29,21 +30,25 @@ export class MappingProcessor implements Processor { return { name: component, - appearance: appearance, - variants: this.getComponentVariants(mapping, component), - states: this.getComponentStates(mapping, component), + appearance, + variants, + states, }; }); } private getComponentVariants(mapping: ThemeMappingType, component: string): string[] { + const needsAllCases = needsAllVariantCases(mapping, component); const variants: string[][] = getComponentVariants(mapping, component); - return this.concatComponentVariants([...variants]); + return this.concatComponentVariants(variants, [], needsAllCases); } private getComponentStates(mapping: ThemeMappingType, component: string): string[] { @@ -52,16 +57,32 @@ export class MappingProcessor implements Processor { - return [...acc, ...this.concatVariantGroups(acc, current)]; - }, variants.shift()); + if (needsAllCases) { + //this is the case when there is no default path for variant groups, + //e.i. not all variant groups values has default values + //all possible combinations will be evaluated + const concat = variants.reduce((acc: string[], current: string[]) => { + return [...acc, ...this.concatVariantGroups(acc, current)]; + }, variants.shift()); - return this.concatComponentVariants(variants, [...result, ...concat]); + return this.concatComponentVariants(variants, [...result, ...concat], needsAllCases); + } + + //by default, we will evaluate only required variant groups combinations + return variants.reduce((acc: string[], current: string[]) => { + if (acc.length === 0) { + return current; + } + + return acc.reduce((res, c) => { + return [...res, ...current.map(x => c.concat(SEPARATOR_MAPPING_ENTRY, x))]; + }, []); + }, []); } private concatVariantGroups(lhs: string[], rhs: string[]): string[] { diff --git a/packages/processor/js/src/service/style/style.service.ts b/packages/processor/js/src/service/style/style.service.ts index b1143db..759b324 100644 --- a/packages/processor/js/src/service/style/style.service.ts +++ b/packages/processor/js/src/service/style/style.service.ts @@ -2,8 +2,6 @@ import { ThemeMappingType, ControlMappingType, ThemedStyleType, - MappingType, - StrictTheme, StatelessMappingType, ParameterType, } from '@eva-design/dss'; @@ -125,21 +123,26 @@ export function createAllStyles(mapping: ThemeMappingType, variants: string[], states: string[], theme: ThemedStyleType): [string, ThemedStyleType][] { - - const stateless = createStyleEntry(mapping, - component, - appearance, - appearance, - '', - '', - theme, - ); - - const withStates = states.reduce((acc: [string, ThemedStyleType][], current: string) => { - const key = appearance.concat(SEPARATOR_MAPPING_ENTRY, current); - const next = createStyleEntry(mapping, component, key, appearance, '', current, theme); - return [...acc, next]; - }, []); + let stateless = undefined; + let withStates = []; + + if (needsAllVariantCases(mapping, component)) { + //we need this config when there are no variant groups or there are no default paths defined + stateless = createStyleEntry(mapping, + component, + appearance, + appearance, + '', + '', + theme, + ); + + withStates = states.reduce((acc: [ string, ThemedStyleType ][], current: string) => { + const key = appearance.concat(SEPARATOR_MAPPING_ENTRY, current); + const next = createStyleEntry(mapping, component, key, appearance, '', current, theme); + return [ ...acc, next ]; + }, []); + } const withVariants = variants.map(variant => { const key = appearance.concat(SEPARATOR_MAPPING_ENTRY, variant); @@ -159,7 +162,7 @@ export function createAllStyles(mapping: ThemeMappingType, ...withStates, ...withVariants, ...withVariantStates, - ]; + ].filter(Boolean); } export function getStyle(mapping: ThemeMappingType, @@ -359,6 +362,29 @@ function createStyleEntry(mapping: ThemeMappingType, return [key, value]; } +/** + * Tells if component requires all variant groups combinations to be generated. + * Basically that just means that default variant group values are not defined for all variant groups. + * + * @param mapping: ThemeMappingType - theme mapping configuration + * @param component: string - component name + * + * @return (boolean) - key identical to some of `source` keys if presents + */ +export function needsAllVariantCases(mapping: ThemeMappingType, component: string): boolean { + const { meta } = mapping[component]; + const variantKeys = Object.keys(meta.variantGroups) + + if (variantKeys.length === 0) { + return true; + } + + return variantKeys.some(key => { + const group = meta.variantGroups[key]; + return !Object.keys(group).find(x => group[x].default); + }); +} + function normalize(params: string[]): string[] { return noNulls(noDuplicates(params)); }