mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity

Read from manifest

Browse source
This commit is contained in:
RMidhunSuresh 2022-05-11 12:40:32 +05:30
parent e8a4ab5ecc
commit 855298bdaf
2 changed files with 24 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
scripts/build-plugins/rollup-plugin-build-themes.js
View file

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

17
src/platform/web/Platform.js
View file

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