Add manifest fields for PWA install bottom sheet (#933)

* Add manifest fields for PWA install bottom sheet

* Switch to webp

* Revert "Switch to webp"

This reverts commit c60d0d9629.

* Try JPEG

* Use mime-type library

* Automate image size

Co-authored-by: Jake Archibald <jaffathecake@gmail.com>
This commit is contained in:
François Beaufort
2021-01-21 10:45:52 +01:00
committed by GitHub
parent 39c6be41df
commit a3be343959
8 changed files with 116 additions and 23 deletions

View File

@@ -12,9 +12,11 @@
*/
import { promises as fs } from 'fs';
import { basename } from 'path';
import { imageSize } from 'image-size';
const defaultOpts = {
prefix: 'url',
imagePrefix: 'img-url',
};
export default function urlPlugin(opts) {
@@ -24,6 +26,7 @@ export default function urlPlugin(opts) {
let assetIdToSourceBuffer;
const prefix = opts.prefix + ':';
const imagePrefix = opts.imagePrefix + ':';
return {
name: 'url-plugin',
buildStart() {
@@ -48,28 +51,49 @@ export default function urlPlugin(opts) {
return combinedBuffer;
},
async resolveId(id, importer) {
if (!id.startsWith(prefix)) return;
const realId = id.slice(prefix.length);
const idPrefix = [prefix, imagePrefix].find((prefix) =>
id.startsWith(prefix),
);
if (!idPrefix) return;
const realId = id.slice(idPrefix.length);
const resolveResult = await this.resolve(realId, importer);
if (!resolveResult) {
throw Error(`Cannot find ${realId}`);
}
// Add an additional .js to the end so it ends up with .js at the end in the _virtual folder.
return prefix + resolveResult.id + '.js';
return idPrefix + resolveResult.id + '.js';
},
async load(id) {
if (!id.startsWith(prefix)) return;
const realId = id.slice(prefix.length, -'.js'.length);
const idPrefix = [prefix, imagePrefix].find((prefix) =>
id.startsWith(prefix),
);
if (!idPrefix) return;
const realId = id.slice(idPrefix.length, -'.js'.length);
const source = await fs.readFile(realId);
assetIdToSourceBuffer.set(id, source);
this.addWatchFile(realId);
return `export default import.meta.ROLLUP_FILE_URL_${this.emitFile({
type: 'asset',
source,
name: basename(realId),
})}`;
let imgSizeExport = '';
if (idPrefix === imagePrefix) {
const imgInfo = imageSize(source);
imgSizeExport = [
`export const width = ${JSON.stringify(imgInfo.width)};`,
`export const height = ${JSON.stringify(imgInfo.height)};`,
].join('\n');
}
return [
`export default import.meta.ROLLUP_FILE_URL_${this.emitFile({
type: 'asset',
source,
name: basename(realId),
})};`,
imgSizeExport,
].join('\n');
},
};
}