From 12a8e9424325ced7568ad7be21b3e50d3be6e340 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 31 May 2022 20:21:18 +0530 Subject: [PATCH] Move code into ThemeLoader --- .../rollup-plugin-build-themes.js | 43 +--------------- src/platform/web/ThemeLoader.ts | 51 ++++++++++++++++++- 2 files changed, 51 insertions(+), 43 deletions(-) diff --git a/scripts/build-plugins/rollup-plugin-build-themes.js b/scripts/build-plugins/rollup-plugin-build-themes.js index 53258f16..8d05f58a 100644 --- a/scripts/build-plugins/rollup-plugin-build-themes.js +++ b/scripts/build-plugins/rollup-plugin-build-themes.js @@ -254,50 +254,9 @@ module.exports = function buildThemes(options) { const derivedVariables = compiledVariables["derived-variables"]; const icon = compiledVariables["icon"]; const builtAssets = {}; - let defaultDarkVariant = {}, defaultLightVariant = {}; - const themeName = manifest.name; for (const chunk of chunkArray) { const [, name, variant] = chunk.fileName.match(/theme-(.+)-(.+)\.css/); - const {name: variantName, default: isDefault, dark} = manifest.values.variants[variant]; - const themeId = `${name}-${variant}`; - const themeDisplayName = `${themeName} ${variantName}`; - if (isDefault) { - /** - * This is a default variant! - * We'll add these to the builtAssets (separately) keyed with just the - * theme-name (i.e "Element" instead of "Element Dark"). - * We need to be able to distinguish them from other variants! - * - * This allows us to render radio-buttons with "dark" and - * "light" options. - */ - const defaultVariant = dark ? defaultDarkVariant : defaultLightVariant; - defaultVariant.variantName = variantName; - defaultVariant.id = themeId - defaultVariant.cssLocation = assetMap.get(chunk.fileName).fileName; - continue; - } - // Non-default variants are keyed in builtAssets with "theme_name variant_name" - // eg: "Element Dark" - builtAssets[themeDisplayName] = { - cssLocation: assetMap.get(chunk.fileName).fileName, - id: themeId - }; - } - if (defaultDarkVariant.id && defaultLightVariant.id) { - /** - * As mentioned above, if there's both a default dark and a default light variant, - * add them to builtAsset separately. - */ - builtAssets[themeName] = { dark: defaultDarkVariant, light: defaultLightVariant }; - } - else { - /** - * If only one default variant is found (i.e only dark default or light default but not both), - * treat it like any other variant. - */ - const variant = defaultDarkVariant.id ? defaultDarkVariant : defaultLightVariant; - builtAssets[`${themeName} ${variant.variantName}`] = { id: variant.id, cssLocation: variant.cssLocation }; + builtAssets[`${name}-${variant}`] = assetMap.get(chunk.fileName).fileName; } manifest.source = { "built-assets": builtAssets, diff --git a/src/platform/web/ThemeLoader.ts b/src/platform/web/ThemeLoader.ts index bd2d51b4..ca7ef641 100644 --- a/src/platform/web/ThemeLoader.ts +++ b/src/platform/web/ThemeLoader.ts @@ -55,13 +55,14 @@ export class ThemeLoader { cache: true, }) .response(); + this._populateThemeMap(body); /* After build has finished, the source section of each theme manifest contains `built-assets` which is a mapping from the theme-name to theme information which includes the location of the CSS file. (see type ThemeInformation above) */ - Object.assign(this._themeMapping, body["source"]["built-assets"]); + // Object.assign(this._themeMapping, body["source"]["built-assets"]); //Add the default-theme as an additional option to the mapping const defaultThemeId = this.getDefaultTheme(); if (defaultThemeId) { @@ -73,6 +74,54 @@ export class ThemeLoader { } } + private _populateThemeMap(manifest) { + const builtAssets: Record = manifest.source?.["built-assets"]; + const themeName = manifest.name; + let defaultDarkVariant: any = {}, defaultLightVariant: any = {}; + for (const [themeId, cssLocation] of Object.entries(builtAssets)) { + const variant = themeId.match(/.+-(.+)/)?.[1]; + const { name: variantName, default: isDefault, dark } = manifest.values.variants[variant!]; + const themeDisplayName = `${themeName} ${variantName}`; + if (isDefault) { + /** + * This is a default variant! + * We'll add these to the themeMapping (separately) keyed with just the + * theme-name (i.e "Element" instead of "Element Dark"). + * We need to be able to distinguish them from other variants! + * + * This allows us to render radio-buttons with "dark" and + * "light" options. + */ + const defaultVariant = dark ? defaultDarkVariant : defaultLightVariant; + defaultVariant.variantName = variantName; + defaultVariant.id = themeId + defaultVariant.cssLocation = cssLocation; + continue; + } + // Non-default variants are keyed in themeMapping with "theme_name variant_name" + // eg: "Element Dark" + this._themeMapping[themeDisplayName] = { + cssLocation, + id: themeId + }; + } + if (defaultDarkVariant.id && defaultLightVariant.id) { + /** + * As mentioned above, if there's both a default dark and a default light variant, + * add them to themeMapping separately. + */ + this._themeMapping[themeName] = { dark: defaultDarkVariant, light: defaultLightVariant }; + } + else { + /** + * If only one default variant is found (i.e only dark default or light default but not both), + * treat it like any other variant. + */ + const variant = defaultDarkVariant.id ? defaultDarkVariant : defaultLightVariant; + this._themeMapping[`${themeName} ${variant.variantName}`] = { id: variant.id, cssLocation: variant.cssLocation }; + } + } + setTheme(themeId: string, log?: ILogItem) { this._platform.logger.wrapOrRun(log, {l: "change theme", id: themeId}, () => { const themeLocation = this._findThemeLocationFromId(themeId);