Arsharth/hydrogen-web
1
0
Fork 0
forked from mystiq/hydrogen-web
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 {ColorSchemePreference} from "./ThemeLoader";
import {IconColorizer} from "./IconColorizer"; import {IconColorizer} from "./IconColorizer";
import {DerivedVariables} from "./DerivedVariables"; import {DerivedVariables} from "./DerivedVariables";
import {ThemeManifest} from "../types/theme";
export class ThemeBuilder { export class ThemeBuilder {
// todo: replace any with manifest type when PR is merged private _idToManifest: Map<string, {manifest: ThemeManifest, location: string}>;
private _idToManifest: Map<string, any>;
private _themeMapping: Record<string, ThemeInformation> = {}; private _themeMapping: Record<string, ThemeInformation> = {};
private _preferredColorScheme?: ColorSchemePreference; private _preferredColorScheme?: ColorSchemePreference;
private _platform: Platform; private _platform: Platform;
@ -34,11 +34,8 @@ export class ThemeBuilder {
} }
async populateDerivedTheme(manifest) { async populateDerivedTheme(manifest) {
const { manifest: baseManifest, location } = this._idToManifest.get(manifest.extends); const { manifest: baseManifest, location } = this._idToManifest.get(manifest.extends)!;
const runtimeCssLocation = baseManifest.source?.["runtime-asset"]; const { cssLocation, derivedVariables, icons } = this._getsourceData(baseManifest, location);
const cssLocation = new URL(runtimeCssLocation, new URL(location, window.location.origin)).href;
const derivedVariables = baseManifest.source?.["derived-variables"];
const icons = baseManifest.source?.["icon"];
const themeName = manifest.name; const themeName = manifest.name;
let defaultDarkVariant: any = {}, defaultLightVariant: any = {}; let defaultDarkVariant: any = {}, defaultLightVariant: any = {};
for (const [variant, variantDetails] of Object.entries(manifest.values.variants) as [string, 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() { get themeMapping() {
return this._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 type {ILogItem} from "../../logging/types";
import { ThemeManifest } from "../types/theme";
import type {Platform} from "./Platform.js"; import type {Platform} from "./Platform.js";
import {ThemeBuilder} from "./ThemeBuilder"; 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) => { log.wrap("populateThemeMap", (l) => {
/* /*
After build has finished, the source section of each theme manifest 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 builtAssets: Record<string, string> = manifest.source?.["built-assets"];
const themeName = manifest.name; const themeName = manifest.name;
if (!themeName) {
throw new Error(`Theme name not found in manifest at ${manifestLocation}`);
}
let defaultDarkVariant: any = {}, defaultLightVariant: any = {}; let defaultDarkVariant: any = {}, defaultLightVariant: any = {};
for (let [themeId, cssLocation] of Object.entries(builtAssets)) { for (let [themeId, cssLocation] of Object.entries(builtAssets)) {
try { try {
@ -96,7 +100,11 @@ export class ThemeLoader {
continue; continue;
} }
const variant = themeId.match(/.+-(.+)/)?.[1]; 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}`; const themeDisplayName = `${themeName} ${variantName}`;
if (isDefault) { if (isDefault) {
/** /**