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

Log error when loading css file fails

Browse source
This commit is contained in:
RMidhunSuresh 2022-08-15 22:28:40 +05:30
parent 2e12ce74b7
commit 7590c55404
2 changed files with 29 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -192,7 +192,7 @@ export class Platform {
await this._themeLoader?.init(manifests, log); 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 }); log.log({ l: "Active theme", name: themeName, variant: themeVariant });
this._themeLoader.setTheme(themeName, themeVariant, log); await this._themeLoader.setTheme(themeName, themeVariant, log);
} }
}); });
} catch (err) { } catch (err) {
@ -332,17 +332,31 @@ export class Platform {
return this._themeLoader; return this._themeLoader;
} }
replaceStylesheet(newPath) { async replaceStylesheet(newPath, log) {
const head = document.querySelector("head"); await this.logger.wrapOrRun(log, { l: "replaceStylesheet", location: newPath, }, async (l) => {
// remove default theme let resolve;
document.querySelectorAll(".theme").forEach(e => e.remove()); const promise = new Promise(r => resolve = r);
// add new theme const head = document.querySelector("head");
const styleTag = document.createElement("link"); // remove default theme
styleTag.href = newPath; document.querySelectorAll(".theme").forEach(e => e.remove());
styleTag.rel = "stylesheet"; // add new theme
styleTag.type = "text/css"; const styleTag = document.createElement("link");
styleTag.className = "theme"; styleTag.href = newPath;
head.appendChild(styleTag); styleTag.rel = "stylesheet";
styleTag.type = "text/css";
styleTag.className = "theme";
styleTag.onerror = () => {
const error = new Error(`Failed to load stylesheet at ${newPath}`);
l.catch(error);
resolve();
throw error
};
styleTag.onload = () => {
resolve();
};
head.appendChild(styleTag);
await promise;
});
} }
get description() { get description() {

6
src/platform/web/theming/ThemeLoader.ts
View file

@ -88,8 +88,8 @@ export class ThemeLoader {
}); });
} }
setTheme(themeName: string, themeVariant?: "light" | "dark" | "default", log?: ILogItem) { async setTheme(themeName: string, themeVariant?: "light" | "dark" | "default", log?: ILogItem) {
this._platform.logger.wrapOrRun(log, { l: "change theme", name: themeName, variant: themeVariant }, () => { await this._platform.logger.wrapOrRun(log, { l: "change theme", name: themeName, variant: themeVariant }, async (l) => {
let cssLocation: string, variables: Record<string, string>; let cssLocation: string, variables: Record<string, string>;
let themeDetails = this._themeMapping[themeName]; let themeDetails = this._themeMapping[themeName];
if ("id" in themeDetails) { if ("id" in themeDetails) {
@ -103,7 +103,7 @@ export class ThemeLoader {
cssLocation = themeDetails[themeVariant].cssLocation; cssLocation = themeDetails[themeVariant].cssLocation;
variables = themeDetails[themeVariant].variables; variables = themeDetails[themeVariant].variables;
} }
this._platform.replaceStylesheet(cssLocation); await this._platform.replaceStylesheet(cssLocation, l);
if (variables) { if (variables) {
log?.log({l: "Derived Theme", variables}); log?.log({l: "Derived Theme", variables});
this._injectCSSVariables(variables); this._injectCSSVariables(variables);