From 855298bdaf7b8eaa7ae08d0dc154f524709df8f4 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 11 May 2022 12:40:32 +0530 Subject: [PATCH] Read from manifest --- .../rollup-plugin-build-themes.js | 24 +++++++------------ src/platform/web/Platform.js | 17 +++++++++++-- 2 files changed, 24 insertions(+), 17 deletions(-) diff --git a/scripts/build-plugins/rollup-plugin-build-themes.js b/scripts/build-plugins/rollup-plugin-build-themes.js index d3733e01..e9251224 100644 --- a/scripts/build-plugins/rollup-plugin-build-themes.js +++ b/scripts/build-plugins/rollup-plugin-build-themes.js @@ -31,12 +31,12 @@ function appendVariablesToCSS(variables, cssSource) { return cssSource + getRootSectionWithVariables(variables); } -function addThemesToConfig(bundle, themeSummary, defaultThemes) { +function addThemesToConfig(bundle, manifestLocations, defaultThemes) { for (const [fileName, info] of Object.entries(bundle)) { if (fileName === "assets/config.json") { const source = new TextDecoder().decode(info.source); const config = JSON.parse(source); - config["themes"] = themeSummary; + config["themeManifests"] = manifestLocations; config["defaultTheme"] = defaultThemes; info.source = new TextEncoder().encode(JSON.stringify(config)); } @@ -247,13 +247,17 @@ module.exports = function buildThemes(options) { generateBundle(_, bundle) { const { assetMap, chunkMap, runtimeThemeChunk } = parseBundle(bundle); - const themeSummary = {}; + const manifestLocations = []; for (const [location, chunkArray] of chunkMap) { const manifest = require(`${location}/manifest.json`); const compiledVariables = options.compiledVariables.get(location); const derivedVariables = compiledVariables["derived-variables"]; const icon = compiledVariables["icon"]; const builtAsset = {}; + /** + * Generate a mapping from theme name to asset hashed location of said theme in build output. + * This can be used to enumerate themes during runtime. + */ for (const chunk of chunkArray) { const [, name, variant] = chunk.fileName.match(/theme-(.+)-(.+)\.css/); builtAsset[`${name}-${variant}`] = assetMap.get(chunk.fileName).fileName; @@ -265,24 +269,14 @@ module.exports = function buildThemes(options) { "icon": icon }; const name = `theme-${manifest.name}.json`; + manifestLocations.push(`assets/${name}`); this.emitFile({ type: "asset", name, source: JSON.stringify(manifest), }); } - /** - * Generate a mapping from theme name to asset hashed location of said theme in build output. - * This can be used to enumerate themes during runtime. - */ - for (const [, chunkArray] of chunkMap) { - chunkArray.forEach((chunk) => { - const [, name, variant] = chunk.fileName.match(/theme-(.+)-(.+)\.css/); - const assetHashedFileName = assetMap.get(chunk.fileName).fileName; - themeSummary[`${name}-${variant}`] = assetHashedFileName; - }); - } - addThemesToConfig(bundle, themeSummary, defaultThemes); + addThemesToConfig(bundle, manifestLocations, defaultThemes); }, } } diff --git a/src/platform/web/Platform.js b/src/platform/web/Platform.js index 24480f59..7b803e24 100644 --- a/src/platform/web/Platform.js +++ b/src/platform/web/Platform.js @@ -164,6 +164,8 @@ export class Platform { this._disposables = new Disposables(); this._olmPromise = undefined; this._workerPromise = undefined; + // Mapping from theme-name to asset hashed location of css file + this._themeMapping = {}; } async init() { @@ -178,9 +180,20 @@ export class Platform { this._serviceWorkerHandler, this._config.push ); + this._themeMapping = await this._createThemeMappingFromManifests(); await this._loadThemeFromSetting(); } + async _createThemeMappingFromManifests() { + const mapping = {}; + const manifests = this.config["themeManifests"]; + for (const manifestLocation of manifests) { + const {body}= await this.request(manifestLocation, {method: "GET", format: "json", cache: true}).response(); + Object.assign(mapping, body["source"]["built-asset"]); + } + return mapping; + } + async _loadThemeFromSetting() { const themeName = await this.settingsStorage.getString("theme"); if (themeName) { @@ -316,7 +329,7 @@ export class Platform { } get themes() { - return Object.keys(this.config["themes"]); + return Object.keys(this._themeMapping); } async getActiveTheme() { @@ -337,7 +350,7 @@ export class Platform { } setTheme(themeName) { - const themeLocation = this.config["themes"][themeName]; + const themeLocation = this._themeMapping[themeName]; if (!themeLocation) { throw new Error(`Cannot find theme location for theme "${themeName}"!`); }