forked from mystiq/hydrogen-web
Add logging
This commit is contained in:
RMidhunSuresh
parent
ce5db47708
commit
9e2d355573
|
|
@ -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<string, {manifest: ThemeManifest, location: string}>;
|
||||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue