Log error when loading css file fails
This commit is contained in:
parent
2e12ce74b7
commit
7590c55404
2 changed files with 29 additions and 15 deletions
|
@ -192,7 +192,7 @@ export class Platform {
|
|||
await this._themeLoader?.init(manifests, log);
|
||||
const { themeName, themeVariant } = await this._themeLoader.getActiveTheme();
|
||||
log.log({ l: "Active theme", name: themeName, variant: themeVariant });
|
||||
this._themeLoader.setTheme(themeName, themeVariant, log);
|
||||
await this._themeLoader.setTheme(themeName, themeVariant, log);
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
|
@ -332,17 +332,31 @@ export class Platform {
|
|||
return this._themeLoader;
|
||||
}
|
||||
|
||||
replaceStylesheet(newPath) {
|
||||
const head = document.querySelector("head");
|
||||
// remove default theme
|
||||
document.querySelectorAll(".theme").forEach(e => e.remove());
|
||||
// add new theme
|
||||
const styleTag = document.createElement("link");
|
||||
styleTag.href = newPath;
|
||||
styleTag.rel = "stylesheet";
|
||||
styleTag.type = "text/css";
|
||||
styleTag.className = "theme";
|
||||
head.appendChild(styleTag);
|
||||
async replaceStylesheet(newPath, log) {
|
||||
await this.logger.wrapOrRun(log, { l: "replaceStylesheet", location: newPath, }, async (l) => {
|
||||
let resolve;
|
||||
const promise = new Promise(r => resolve = r);
|
||||
const head = document.querySelector("head");
|
||||
// remove default theme
|
||||
document.querySelectorAll(".theme").forEach(e => e.remove());
|
||||
// add new theme
|
||||
const styleTag = document.createElement("link");
|
||||
styleTag.href = newPath;
|
||||
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() {
|
||||
|
|
|
@ -88,8 +88,8 @@ export class ThemeLoader {
|
|||
});
|
||||
}
|
||||
|
||||
setTheme(themeName: string, themeVariant?: "light" | "dark" | "default", log?: ILogItem) {
|
||||
this._platform.logger.wrapOrRun(log, { l: "change theme", name: themeName, variant: themeVariant }, () => {
|
||||
async setTheme(themeName: string, themeVariant?: "light" | "dark" | "default", log?: ILogItem) {
|
||||
await this._platform.logger.wrapOrRun(log, { l: "change theme", name: themeName, variant: themeVariant }, async (l) => {
|
||||
let cssLocation: string, variables: Record<string, string>;
|
||||
let themeDetails = this._themeMapping[themeName];
|
||||
if ("id" in themeDetails) {
|
||||
|
@ -103,7 +103,7 @@ export class ThemeLoader {
|
|||
cssLocation = themeDetails[themeVariant].cssLocation;
|
||||
variables = themeDetails[themeVariant].variables;
|
||||
}
|
||||
this._platform.replaceStylesheet(cssLocation);
|
||||
await this._platform.replaceStylesheet(cssLocation, l);
|
||||
if (variables) {
|
||||
log?.log({l: "Derived Theme", variables});
|
||||
this._injectCSSVariables(variables);
|
||||
|
|
Reference in a new issue