mirrors/vector-im-hydrogen-web
1
0
Fork 0
mirror of https://github.com/vector-im/hydrogen-web.git synced 2024-12-23 03:25:12 +01:00
Code Issues Projects Releases Wiki Activity

Locations must be relative to manifest

Browse Source
This commit is contained in:
RMidhunSuresh 2022-06-20 20:35:06 +05:30
parent 93165cb947
commit 5eec724712
3 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
scripts/build-plugins/rollup-plugin-build-themes.js
View File

@ -251,6 +251,8 @@ module.exports = function buildThemes(options) {
// types of AssetInfo and ChunkInfo can be found at https://rollupjs.org/guide/en/#generatebundle // types of AssetInfo and ChunkInfo can be found at https://rollupjs.org/guide/en/#generatebundle
const { assetMap, chunkMap, runtimeThemeChunkMap } = parseBundle(bundle); const { assetMap, chunkMap, runtimeThemeChunkMap } = parseBundle(bundle);
const manifestLocations = []; const manifestLocations = [];
// Location of the directory containing manifest relative to the root of the build output
const manifestLocation = "assets";
for (const [location, chunkArray] of chunkMap) { for (const [location, chunkArray] of chunkMap) {
const manifest = require(`${location}/manifest.json`); const manifest = require(`${location}/manifest.json`);
const compiledVariables = options.compiledVariables.get(location); const compiledVariables = options.compiledVariables.get(location);
@ -261,17 +263,20 @@ module.exports = function buildThemes(options) {
for (const chunk of chunkArray) { for (const chunk of chunkArray) {
const [, name, variant] = chunk.fileName.match(/theme-(.+)-(.+)\.css/); const [, name, variant] = chunk.fileName.match(/theme-(.+)-(.+)\.css/);
themeKey = name; themeKey = name;
builtAssets[`${name}-${variant}`] = assetMap.get(chunk.fileName).fileName; const locationRelativeToBuildRoot = assetMap.get(chunk.fileName).fileName;
const locationRelativeToManifest = path.relative(manifestLocation, locationRelativeToBuildRoot);
builtAssets[`${name}-${variant}`] = locationRelativeToManifest;
} }
const runtimeThemeChunk = runtimeThemeChunkMap.get(location); const runtimeThemeChunk = runtimeThemeChunkMap.get(location);
const runtimeAssetLocation = path.relative(manifestLocation, assetMap.get(runtimeThemeChunk.fileName).fileName);
manifest.source = { manifest.source = {
"built-assets": builtAssets, "built-assets": builtAssets,
"runtime-asset": assetMap.get(runtimeThemeChunk.fileName).fileName, "runtime-asset": runtimeAssetLocation,
"derived-variables": derivedVariables, "derived-variables": derivedVariables,
"icon": icon "icon": icon
}; };
const name = `theme-${themeKey}.json`; const name = `theme-${themeKey}.json`;
manifestLocations.push(`assets/${name}`); manifestLocations.push(`${manifestLocation}/${name}`);
this.emitFile({ this.emitFile({
type: "asset", type: "asset",
name, name,

2
src/platform/web/Platform.js
View File

@ -338,7 +338,7 @@ export class Platform {
document.querySelectorAll(".theme").forEach(e => e.remove()); document.querySelectorAll(".theme").forEach(e => e.remove());
// add new theme // add new theme
const styleTag = document.createElement("link"); const styleTag = document.createElement("link");
styleTag.href = `./${newPath}`; styleTag.href = newPath;
styleTag.rel = "stylesheet"; styleTag.rel = "stylesheet";
styleTag.type = "text/css"; styleTag.type = "text/css";
styleTag.className = "theme"; styleTag.className = "theme";

11
src/platform/web/ThemeLoader.ts
View File

@ -61,11 +61,11 @@ export class ThemeLoader {
const results = await Promise.all( const results = await Promise.all(
manifestLocations.map( location => this._platform.request(location, { method: "GET", format: "json", cache: true, }).response()) manifestLocations.map( location => this._platform.request(location, { method: "GET", format: "json", cache: true, }).response())
); );
results.forEach(({ body }) => this._populateThemeMap(body, log)); results.forEach(({ body }, i) => this._populateThemeMap(body, manifestLocations[i], log));
}); });
} }
private _populateThemeMap(manifest, log: ILogItem) { private _populateThemeMap(manifest, 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
@ -75,7 +75,12 @@ 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;
let defaultDarkVariant: any = {}, defaultLightVariant: any = {}; let defaultDarkVariant: any = {}, defaultLightVariant: any = {};
for (const [themeId, cssLocation] of Object.entries(builtAssets)) { for (let [themeId, cssLocation] of Object.entries(builtAssets)) {
/**
* This cssLocation is relative to the location of the manifest file.
* So we first need to resolve it relative to the root of this hydrogen instance.
*/
cssLocation = new URL(cssLocation, new URL(manifestLocation, window.location.origin)).href;
const variant = themeId.match(/.+-(.+)/)?.[1]; const variant = themeId.match(/.+-(.+)/)?.[1];
const { name: variantName, default: isDefault, dark } = manifest.values.variants[variant!]; const { name: variantName, default: isDefault, dark } = manifest.values.variants[variant!];
const themeDisplayName = `${themeName} ${variantName}`; const themeDisplayName = `${themeName} ${variantName}`;