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

Use the new built-asset format in ThemeLoader

Browse source
This commit is contained in:
RMidhunSuresh 2022-05-26 23:35:09 +05:30
parent 809c522571
commit 3afbe1148e
1 changed files with 40 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,15 +17,35 @@ limitations under the License.
import type {ILogItem} from "../../logging/types.js"; import type {ILogItem} from "../../logging/types.js";
import type {Platform} from "./Platform.js"; import type {Platform} from "./Platform.js";
type NormalVariant = {
id: string;
cssLocation: string;
};
type DefaultVariant = {
dark: {
id: string;
cssLocation: string;
themeDisplayName: string;
};
light: {
id: string;
cssLocation: string;
themeDisplayName: string;
};
}
type ThemeInformation = NormalVariant | DefaultVariant;
export class ThemeLoader { export class ThemeLoader {
private _platform: Platform; private _platform: Platform;
private _themeMapping: Record<string, string> = {}; private _themeMapping: Record<string, ThemeInformation>;
constructor(platform: Platform) { constructor(platform: Platform) {
this._platform = platform; this._platform = platform;
} }
async init(manifestLocations: string[]): Promise<void> { async init(manifestLocations: string[]): Promise<void> {
this._themeMapping = {};
for (const manifestLocation of manifestLocations) { for (const manifestLocation of manifestLocations) {
const { body } = await this._platform const { body } = await this._platform
.request(manifestLocation, { .request(manifestLocation, {
@ -36,8 +56,8 @@ export class ThemeLoader {
.response(); .response();
/* /*
After build has finished, the source section of each theme manifest After build has finished, the source section of each theme manifest
contains `built-assets` which is a mapping from the theme-name to the contains `built-assets` which is a mapping from the theme-name to theme
location of the css file in build. details which includes the location of the CSS file.
*/ */
Object.assign(this._themeMapping, body["source"]["built-assets"]); Object.assign(this._themeMapping, body["source"]["built-assets"]);
} }
@ -45,7 +65,7 @@ export class ThemeLoader {
setTheme(themeName: string, log?: ILogItem) { setTheme(themeName: string, log?: ILogItem) {
this._platform.logger.wrapOrRun(log, {l: "change theme", id: themeName}, () => { this._platform.logger.wrapOrRun(log, {l: "change theme", id: themeName}, () => {
const themeLocation = this._themeMapping[themeName]; const themeLocation = this._findThemeLocationFromId(themeName);
if (!themeLocation) { if (!themeLocation) {
throw new Error( `Cannot find theme location for theme "${themeName}"!`); throw new Error( `Cannot find theme location for theme "${themeName}"!`);
} }
@ -54,8 +74,8 @@ export class ThemeLoader {
}); });
} }
get themes(): string[] { get themeMapping(): Record<string, ThemeInformation> {
return Object.keys(this._themeMapping); return this._themeMapping;
} }
async getActiveTheme(): Promise<string> { async getActiveTheme(): Promise<string> {
@ -72,4 +92,18 @@ export class ThemeLoader {
} }
throw new Error("Cannot find active theme!"); throw new Error("Cannot find active theme!");
} }
private _findThemeLocationFromId(themeId: string) {
for (const themeData of Object.values(this._themeMapping)) {
if ("id" in themeData && themeData.id === themeId) {
return themeData.cssLocation;
}
else if ("light" in themeData && themeData.light?.id === themeId) {
return themeData.light.cssLocation;
}
else if ("dark" in themeData && themeData.dark?.id === themeId) {
return themeData.dark.cssLocation;
}
}
}
} }