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

Use ThemeManifest type where possible

Browse source
This commit is contained in:
RMidhunSuresh 2022-07-17 16:08:02 +05:30
parent a8cab98666
commit f440457875
2 changed files with 31 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -18,10 +18,10 @@ import type {Platform} from "./Platform.js";
import {ColorSchemePreference} from "./ThemeLoader";
import {IconColorizer} from "./IconColorizer";
import {DerivedVariables} from "./DerivedVariables";
import {ThemeManifest} from "../types/theme";
export class ThemeBuilder {
// todo: replace any with manifest type when PR is merged
private _idToManifest: Map<string, any>;
private _idToManifest: Map<string, {manifest: ThemeManifest, location: string}>;
private _themeMapping: Record<string, ThemeInformation> = {};
private _preferredColorScheme?: ColorSchemePreference;
private _platform: Platform;
@ -34,11 +34,8 @@ export class ThemeBuilder {
}
async populateDerivedTheme(manifest) {
const { manifest: baseManifest, location } = this._idToManifest.get(manifest.extends);
const runtimeCssLocation = baseManifest.source?.["runtime-asset"];
const cssLocation = new URL(runtimeCssLocation, new URL(location, window.location.origin)).href;
const derivedVariables = baseManifest.source?.["derived-variables"];
const icons = baseManifest.source?.["icon"];
const { manifest: baseManifest, location } = this._idToManifest.get(manifest.extends)!;
const { cssLocation, derivedVariables, icons } = this._getsourceData(baseManifest, location);
const themeName = manifest.name;
let defaultDarkVariant: any = {}, defaultLightVariant: any = {};
for (const [variant, variantDetails] of Object.entries(manifest.values.variants) as [string, any][]) {
@ -72,6 +69,23 @@ export class ThemeBuilder {
}
}
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 };
}
get themeMapping() {
return this._themeMapping;
}

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

@ -15,6 +15,7 @@ limitations under the License.
*/
import type {ILogItem} from "../../logging/types";
import { ThemeManifest } from "../types/theme";
import type {Platform} from "./Platform.js";
import {ThemeBuilder} from "./ThemeBuilder";
@ -74,7 +75,7 @@ export class ThemeLoader {
});
}
private _populateThemeMap(manifest, manifestLocation: string, log: ILogItem) {
private _populateThemeMap(manifest: ThemeManifest, manifestLocation: string, log: ILogItem) {
log.wrap("populateThemeMap", (l) => {
/*
After build has finished, the source section of each theme manifest
@ -83,6 +84,9 @@ export class ThemeLoader {
*/
const builtAssets: Record<string, string> = manifest.source?.["built-assets"];
const themeName = manifest.name;
if (!themeName) {
throw new Error(`Theme name not found in manifest at ${manifestLocation}`);
}
let defaultDarkVariant: any = {}, defaultLightVariant: any = {};
for (let [themeId, cssLocation] of Object.entries(builtAssets)) {
try {
@ -96,7 +100,11 @@ export class ThemeLoader {
continue;
}
const variant = themeId.match(/.+-(.+)/)?.[1];
const { name: variantName, default: isDefault, dark } = manifest.values.variants[variant!];
const variantDetails = manifest.values?.variants[variant!];
if (!variantDetails) {
throw new Error(`Variant ${variant} is missing in manifest at ${manifestLocation}`);
}
const { name: variantName, default: isDefault, dark } = variantDetails;
const themeDisplayName = `${themeName} ${variantName}`;
if (isDefault) {
/**