Arsharth/hydrogen-web
1
0
Fork 0
forked from mystiq/hydrogen-web
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add more logging

Browse source
This commit is contained in:
RMidhunSuresh 2022-06-07 11:57:57 +05:30
parent 51a837d459
commit d08cfe3a29
2 changed files with 78 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -188,8 +188,9 @@ export class Platform {
this._config.push this._config.push
); );
const manifests = this.config["themeManifests"]; const manifests = this.config["themeManifests"];
await this._themeLoader?.init(manifests); await this._themeLoader?.init(manifests, log);
const { themeName, themeVariant } = await this._themeLoader.getActiveTheme(); const { themeName, themeVariant } = await this._themeLoader.getActiveTheme();
log.log({ l: "Active theme", name: themeName, variant: themeVariant });
this._themeLoader?.setTheme(themeName, themeVariant, log); this._themeLoader?.setTheme(themeName, themeVariant, log);
}); });
} catch (err) { } catch (err) {

145
src/platform/web/ThemeLoader.ts
View file

@ -55,80 +55,87 @@ export class ThemeLoader {
this._platform = platform; this._platform = platform;
} }
async init(manifestLocations: string[]): Promise<void> { async init(manifestLocations: string[], log?: ILogItem): Promise<void> {
this._themeMapping = {}; await this._platform.logger.wrapOrRun(log, "ThemeLoader.init", async (log) => {
for (const manifestLocation of manifestLocations) { this._themeMapping = {};
const { body } = await this._platform for (const manifestLocation of manifestLocations) {
.request(manifestLocation, { const { body } = await this._platform
method: "GET", .request(manifestLocation, {
format: "json", method: "GET",
cache: true, format: "json",
}) cache: true,
.response(); })
this._populateThemeMap(body); .response();
} this._populateThemeMap(body, log);
}
});
} }
private _populateThemeMap(manifest) { private _populateThemeMap(manifest, log: ILogItem) {
/* log.wrap("populateThemeMap", (l) => {
After build has finished, the source section of each theme manifest /*
contains `built-assets` which is a mapping from the theme-id to After build has finished, the source section of each theme manifest
cssLocation of theme contains `built-assets` which is a mapping from the theme-id to
*/ cssLocation of theme
const builtAssets: Record<string, string> = manifest.source?.["built-assets"]; */
const themeName = manifest.name; const builtAssets: Record<string, string> = manifest.source?.["built-assets"];
let defaultDarkVariant: any = {}, defaultLightVariant: any = {}; const themeName = manifest.name;
for (const [themeId, cssLocation] of Object.entries(builtAssets)) { let defaultDarkVariant: any = {}, defaultLightVariant: any = {};
const variant = themeId.match(/.+-(.+)/)?.[1]; for (const [themeId, cssLocation] of Object.entries(builtAssets)) {
const { name: variantName, default: isDefault, dark } = manifest.values.variants[variant!]; const variant = themeId.match(/.+-(.+)/)?.[1];
const themeDisplayName = `${themeName} ${variantName}`; const { name: variantName, default: isDefault, dark } = manifest.values.variants[variant!];
if (isDefault) { 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) {
/** /**
* This is a default variant! * As mentioned above, if there's both a default dark and a default light variant,
* We'll add these to the themeMapping (separately) keyed with just the * add them to themeMapping separately.
* theme-name (i.e "Element" instead of "Element Dark"). */
* We need to be able to distinguish them from other variants! const defaultVariant = this.preferredColorScheme === ColorSchemePreference.Dark ? defaultDarkVariant : defaultLightVariant;
* this._themeMapping[themeName] = { dark: defaultDarkVariant, light: defaultLightVariant, default: defaultVariant };
* 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" else {
// eg: "Element Dark" /**
this._themeMapping[themeDisplayName] = { * If only one default variant is found (i.e only dark default or light default but not both),
cssLocation, * treat it like any other variant.
id: themeId */
}; const variant = defaultDarkVariant.id ? defaultDarkVariant : defaultLightVariant;
} this._themeMapping[`${themeName} ${variant.variantName}`] = { id: variant.id, cssLocation: variant.cssLocation };
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.
*/
const defaultVariant = this.preferredColorScheme === ColorSchemePreference.Dark ? defaultDarkVariant : defaultLightVariant;
this._themeMapping[themeName] = { dark: defaultDarkVariant, light: defaultLightVariant, default: defaultVariant };
}
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 };
}
//Add the default-theme as an additional option to the mapping
const defaultThemeId = this.getDefaultTheme();
if (defaultThemeId) {
const themeDetails = this._findThemeDetailsFromId(defaultThemeId);
if (themeDetails) {
this._themeMapping["Default"] = { id: "default", cssLocation: themeDetails.cssLocation };
} }
} //Add the default-theme as an additional option to the mapping
const defaultThemeId = this.getDefaultTheme();
if (defaultThemeId) {
const themeDetails = this._findThemeDetailsFromId(defaultThemeId);
if (themeDetails) {
this._themeMapping["Default"] = { id: "default", cssLocation: themeDetails.cssLocation };
}
}
l.log({ l: "Default Theme", theme: defaultThemeId});
l.log({ l: "Preferred colorscheme", scheme: this.preferredColorScheme === ColorSchemePreference.Dark ? "dark" : "light" });
l.log({ l: "Result", themeMapping: this._themeMapping });
});
} }
setTheme(themeName: string, themeVariant?: "light" | "dark" | "default", log?: ILogItem) { setTheme(themeName: string, themeVariant?: "light" | "dark" | "default", log?: ILogItem) {