From 9e2d355573cf5d580731ef47005225836bec81c7 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Sun, 17 Jul 2022 20:58:58 +0530 Subject: [PATCH] Add logging --- src/platform/web/ThemeBuilder.ts | 101 ++++++++++++++++--------------- src/platform/web/ThemeLoader.ts | 3 +- 2 files changed, 55 insertions(+), 49 deletions(-) diff --git a/src/platform/web/ThemeBuilder.ts b/src/platform/web/ThemeBuilder.ts index b6f75be4..8035fe84 100644 --- a/src/platform/web/ThemeBuilder.ts +++ b/src/platform/web/ThemeBuilder.ts @@ -19,6 +19,7 @@ import {ColorSchemePreference} from "./ThemeLoader"; import {IconColorizer} from "./IconColorizer"; import {DerivedVariables} from "./DerivedVariables"; import {ThemeManifest} from "../types/theme"; +import {ILogItem} from "../../logging/types"; export class ThemeBuilder { private _idToManifest: Map; @@ -33,60 +34,64 @@ export class ThemeBuilder { this._platform = platform; } - async populateDerivedTheme(manifest: ThemeManifest) { - const { manifest: baseManifest, location } = this._idToManifest.get(manifest.extends!)!; - const { cssLocation, derivedVariables, icons } = this._getsourceData(baseManifest, location); - const themeName = manifest.name; - if (!themeName) { - throw new Error(`Theme name not found in manifest!`); - } - let defaultDarkVariant: any = {}, defaultLightVariant: any = {}; - for (const [variant, variantDetails] of Object.entries(manifest.values?.variants!) as [string, any][]) { - try { - const themeId = `${manifest.id}-${variant}`; - const { name: variantName, default: isDefault, dark, variables } = variantDetails; - const resolvedVariables = new DerivedVariables(variables, derivedVariables, dark).toVariables(); - Object.assign(variables, resolvedVariables); - const iconVariables = await new IconColorizer(this._platform, icons, variables, location).toVariables(); - Object.assign(variables, resolvedVariables, iconVariables); - const themeDisplayName = `${themeName} ${variantName}`; - if (isDefault) { - const defaultVariant = dark ? defaultDarkVariant : defaultLightVariant; - Object.assign(defaultVariant, { variantName, id: themeId, cssLocation, variables }); + async populateDerivedTheme(manifest: ThemeManifest, log: ILogItem) { + await log.wrap("ThemeBuilder.populateThemeMap", async (l) => { + const {manifest: baseManifest, location} = this._idToManifest.get(manifest.extends!)!; + const {cssLocation, derivedVariables, icons} = this._getSourceData(baseManifest, location, log); + const themeName = manifest.name; + if (!themeName) { + throw new Error(`Theme name not found in manifest!`); + } + let defaultDarkVariant: any = {}, defaultLightVariant: any = {}; + for (const [variant, variantDetails] of Object.entries(manifest.values?.variants!) as [string, any][]) { + try { + const themeId = `${manifest.id}-${variant}`; + const { name: variantName, default: isDefault, dark, variables } = variantDetails; + const resolvedVariables = new DerivedVariables(variables, derivedVariables, dark).toVariables(); + Object.assign(variables, resolvedVariables); + const iconVariables = await new IconColorizer(this._platform, icons, variables, location).toVariables(); + Object.assign(variables, resolvedVariables, iconVariables); + const themeDisplayName = `${themeName} ${variantName}`; + if (isDefault) { + const defaultVariant = dark ? defaultDarkVariant : defaultLightVariant; + Object.assign(defaultVariant, { variantName, id: themeId, cssLocation, variables }); + continue; + } + this._themeMapping[themeDisplayName] = { cssLocation, id: themeId, variables: variables, }; + } + catch (e) { + console.error(e); continue; } - this._themeMapping[themeDisplayName] = { cssLocation, id: themeId, variables: variables, }; } - catch (e) { - console.error(e); - continue; + if (defaultDarkVariant.id && defaultLightVariant.id) { + const defaultVariant = this._preferredColorScheme === ColorSchemePreference.Dark ? defaultDarkVariant : defaultLightVariant; + this._themeMapping[themeName] = { dark: defaultDarkVariant, light: defaultLightVariant, default: defaultVariant }; } - } - if (defaultDarkVariant.id && defaultLightVariant.id) { - const defaultVariant = this._preferredColorScheme === ColorSchemePreference.Dark ? defaultDarkVariant : defaultLightVariant; - this._themeMapping[themeName] = { dark: defaultDarkVariant, light: defaultLightVariant, default: defaultVariant }; - } - else { - const variant = defaultDarkVariant.id ? defaultDarkVariant : defaultLightVariant; - this._themeMapping[`${themeName} ${variant.variantName}`] = { id: variant.id, cssLocation: variant.cssLocation }; - } + else { + const variant = defaultDarkVariant.id ? defaultDarkVariant : defaultLightVariant; + this._themeMapping[`${themeName} ${variant.variantName}`] = { id: variant.id, cssLocation: variant.cssLocation }; + } + }); } - private _getsourceData(manifest: ThemeManifest, location: string) { - const runtimeCSSLocation = manifest.source?.["runtime-asset"]; - if (!runtimeCSSLocation) { - throw new Error(`Run-time asset not found in source section for theme at ${location}`); - } - const cssLocation = new URL(runtimeCSSLocation, new URL(location, window.location.origin)).href; - const derivedVariables = manifest.source?.["derived-variables"]; - if (!derivedVariables) { - throw new Error(`Derived variables not found in source section for theme at ${location}`); - } - const icons = manifest.source?.["icon"]; - if (!icons) { - throw new Error(`Icon mapping not found in source section for theme at ${location}`); - } - return { cssLocation, derivedVariables, icons }; + private _getSourceData(manifest: ThemeManifest, location: string, log:ILogItem) { + return log.wrap("getSourceData", () => { + const runtimeCSSLocation = manifest.source?.["runtime-asset"]; + if (!runtimeCSSLocation) { + throw new Error(`Run-time asset not found in source section for theme at ${location}`); + } + const cssLocation = new URL(runtimeCSSLocation, new URL(location, window.location.origin)).href; + const derivedVariables = manifest.source?.["derived-variables"]; + if (!derivedVariables) { + throw new Error(`Derived variables not found in source section for theme at ${location}`); + } + const icons = manifest.source?.["icon"]; + if (!icons) { + throw new Error(`Icon mapping not found in source section for theme at ${location}`); + } + return { cssLocation, derivedVariables, icons }; + }); } get themeMapping() { diff --git a/src/platform/web/ThemeLoader.ts b/src/platform/web/ThemeLoader.ts index c04d8e8c..da5f9658 100644 --- a/src/platform/web/ThemeLoader.ts +++ b/src/platform/web/ThemeLoader.ts @@ -64,7 +64,7 @@ export class ThemeLoader { const { body } = results[i]; try { if (body.extends) { - await this._themeBuilder.populateDerivedTheme(body); + await this._themeBuilder.populateDerivedTheme(body, log); } else { this._populateThemeMap(body, manifestLocations[i], log); @@ -183,6 +183,7 @@ export class ThemeLoader { } this._platform.replaceStylesheet(cssLocation); if (variables) { + log?.log({l: "Derived Theme", variables}); this._themeBuilder.injectCSSVariables(variables); } else {