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

Add logging

Browse source
This commit is contained in:
RMidhunSuresh 2022-07-17 20:58:58 +05:30
parent ce5db47708
commit 9e2d355573
2 changed files with 55 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
src/platform/web/ThemeBuilder.ts
View file

@ -19,6 +19,7 @@ import {ColorSchemePreference} from "./ThemeLoader";
import {IconColorizer} from "./IconColorizer"; import {IconColorizer} from "./IconColorizer";
import {DerivedVariables} from "./DerivedVariables"; import {DerivedVariables} from "./DerivedVariables";
import {ThemeManifest} from "../types/theme"; import {ThemeManifest} from "../types/theme";
import {ILogItem} from "../../logging/types";
export class ThemeBuilder { export class ThemeBuilder {
private _idToManifest: Map<string, {manifest: ThemeManifest, location: string}>; private _idToManifest: Map<string, {manifest: ThemeManifest, location: string}>;
@ -33,60 +34,64 @@ export class ThemeBuilder {
this._platform = platform; this._platform = platform;
} }
async populateDerivedTheme(manifest: ThemeManifest) { async populateDerivedTheme(manifest: ThemeManifest, log: ILogItem) {
const { manifest: baseManifest, location } = this._idToManifest.get(manifest.extends!)!; await log.wrap("ThemeBuilder.populateThemeMap", async (l) => {
const { cssLocation, derivedVariables, icons } = this._getsourceData(baseManifest, location); const {manifest: baseManifest, location} = this._idToManifest.get(manifest.extends!)!;
const themeName = manifest.name; const {cssLocation, derivedVariables, icons} = this._getSourceData(baseManifest, location, log);
if (!themeName) { const themeName = manifest.name;
throw new Error(`Theme name not found in manifest!`); 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][]) { let defaultDarkVariant: any = {}, defaultLightVariant: any = {};
try { for (const [variant, variantDetails] of Object.entries(manifest.values?.variants!) as [string, any][]) {
const themeId = `${manifest.id}-${variant}`; try {
const { name: variantName, default: isDefault, dark, variables } = variantDetails; const themeId = `${manifest.id}-${variant}`;
const resolvedVariables = new DerivedVariables(variables, derivedVariables, dark).toVariables(); const { name: variantName, default: isDefault, dark, variables } = variantDetails;
Object.assign(variables, resolvedVariables); const resolvedVariables = new DerivedVariables(variables, derivedVariables, dark).toVariables();
const iconVariables = await new IconColorizer(this._platform, icons, variables, location).toVariables(); Object.assign(variables, resolvedVariables);
Object.assign(variables, resolvedVariables, iconVariables); const iconVariables = await new IconColorizer(this._platform, icons, variables, location).toVariables();
const themeDisplayName = `${themeName} ${variantName}`; Object.assign(variables, resolvedVariables, iconVariables);
if (isDefault) { const themeDisplayName = `${themeName} ${variantName}`;
const defaultVariant = dark ? defaultDarkVariant : defaultLightVariant; if (isDefault) {
Object.assign(defaultVariant, { variantName, id: themeId, cssLocation, variables }); 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; continue;
} }
this._themeMapping[themeDisplayName] = { cssLocation, id: themeId, variables: variables, };
} }
catch (e) { if (defaultDarkVariant.id && defaultLightVariant.id) {
console.error(e); const defaultVariant = this._preferredColorScheme === ColorSchemePreference.Dark ? defaultDarkVariant : defaultLightVariant;
continue; this._themeMapping[themeName] = { dark: defaultDarkVariant, light: defaultLightVariant, default: defaultVariant };
} }
} else {
if (defaultDarkVariant.id && defaultLightVariant.id) { const variant = defaultDarkVariant.id ? defaultDarkVariant : defaultLightVariant;
const defaultVariant = this._preferredColorScheme === ColorSchemePreference.Dark ? defaultDarkVariant : defaultLightVariant; this._themeMapping[`${themeName} ${variant.variantName}`] = { id: variant.id, cssLocation: variant.cssLocation };
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 };
}
} }
private _getsourceData(manifest: ThemeManifest, location: string) { private _getSourceData(manifest: ThemeManifest, location: string, log:ILogItem) {
const runtimeCSSLocation = manifest.source?.["runtime-asset"]; return log.wrap("getSourceData", () => {
if (!runtimeCSSLocation) { const runtimeCSSLocation = manifest.source?.["runtime-asset"];
throw new Error(`Run-time asset not found in source section for theme at ${location}`); 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"]; const cssLocation = new URL(runtimeCSSLocation, new URL(location, window.location.origin)).href;
if (!derivedVariables) { const derivedVariables = manifest.source?.["derived-variables"];
throw new Error(`Derived variables not found in source section for theme at ${location}`); if (!derivedVariables) {
} throw new Error(`Derived variables not found in source section for theme at ${location}`);
const icons = manifest.source?.["icon"]; }
if (!icons) { const icons = manifest.source?.["icon"];
throw new Error(`Icon mapping not found in source section for theme at ${location}`); if (!icons) {
} throw new Error(`Icon mapping not found in source section for theme at ${location}`);
return { cssLocation, derivedVariables, icons }; }
return { cssLocation, derivedVariables, icons };
});
} }
get themeMapping() { get themeMapping() {

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

@ -64,7 +64,7 @@ export class ThemeLoader {
const { body } = results[i]; const { body } = results[i];
try { try {
if (body.extends) { if (body.extends) {
await this._themeBuilder.populateDerivedTheme(body); await this._themeBuilder.populateDerivedTheme(body, log);
} }
else { else {
this._populateThemeMap(body, manifestLocations[i], log); this._populateThemeMap(body, manifestLocations[i], log);
@ -183,6 +183,7 @@ export class ThemeLoader {
} }
this._platform.replaceStylesheet(cssLocation); this._platform.replaceStylesheet(cssLocation);
if (variables) { if (variables) {
log?.log({l: "Derived Theme", variables});
this._themeBuilder.injectCSSVariables(variables); this._themeBuilder.injectCSSVariables(variables);
} }
else { else {