Read from manifest

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);
         },
     }
 }

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}"!`);
         }