mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages 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
const { assetMap, chunkMap, runtimeThemeChunkMap } = parseBundle(bundle);
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) {
const manifest = require(`${location}/manifest.json`);
const compiledVariables = options.compiledVariables.get(location);
@ -261,17 +263,20 @@ module.exports = function buildThemes(options) {
for (const chunk of chunkArray) {
const [, name, variant] = chunk.fileName.match(/theme-(.+)-(.+)\.css/);
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 runtimeAssetLocation = path.relative(manifestLocation, assetMap.get(runtimeThemeChunk.fileName).fileName);
manifest.source = {
"built-assets": builtAssets,
"runtime-asset": assetMap.get(runtimeThemeChunk.fileName).fileName,
"runtime-asset": runtimeAssetLocation,
"derived-variables": derivedVariables,
"icon": icon
};
const name = `theme-${themeKey}.json`;
manifestLocations.push(`assets/${name}`);
manifestLocations.push(`${manifestLocation}/${name}`);
this.emitFile({
type: "asset",
name,

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

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

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

@ -61,11 +61,11 @@ export class ThemeLoader {
const results = await Promise.all(
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) => {
/*
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 themeName = manifest.name;
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 { name: variantName, default: isDefault, dark } = manifest.values.variants[variant!];
const themeDisplayName = `${themeName} ${variantName}`;