diff --git a/README.md b/README.md index 17133160..a2acb4eb 100644 --- a/README.md +++ b/README.md @@ -75,7 +75,7 @@ $ pwa-asset-generator --help -m --manifest Web app manifest file path to automatically update manifest file with the generated icons -i --index Index HTML file path to automatically put splash screen and icon meta tags in -a --path Path prefix to prepend for href links generated for meta tags - -t --type Image type: png|jpeg [default: png] + -t --type Image type: png|jpg|jpeg [default: png] -q --quality Image quality: 0...100 (Only for JPEG) [default: 100] -h --splash-only Only generate splash screens [default: false] -c --icon-only Only generate icons [default: false] @@ -89,7 +89,7 @@ $ pwa-asset-generator --help Examples $ pwa-asset-generator logo.html $ pwa-asset-generator logo.svg -i ./index.html -m ./manifest.json - $ pwa-asset-generator https://your-cdn-server.com/assets/logo.png ./ -t jpeg -q 90 --splash-only --portrait-only + $ pwa-asset-generator https://your-cdn-server.com/assets/logo.png ./ -t jpg -q 90 --splash-only --portrait-only $ pwa-asset-generator logo.svg ./assets --scrape false --icon-only --path "%PUBLIC_URL%" $ pwa-asset-generator logo.svg ./assets --icon-only --favicon --opaque false $ pwa-asset-generator logo.svg ./assets --dark-mode --background dimgrey --splash-only --type jpeg --quality 80 @@ -104,7 +104,7 @@ $ pwa-asset-generator --help --manifest ./src/manifest.json --index ./src/index.html --path "%PUBLIC_URL%" - --type jpeg + --type jpg --quality 80 --splash-only --icon-only diff --git a/package.json b/package.json index 893f10bb..83e4adc0 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,9 @@ "test": "jest -i", "test:update": "npm run test:update:snapshots && npm run test:update:visuals", "test:update:snapshots": "jest -u", - "test:update:visuals": "npm run visuals:input-svg && npm run visuals:input-png && npm run visuals:input-html && npm run visuals:output-transparent && npm run visuals:output-jpeg", + "test:update:visuals": "npm run visuals:input-svg && npm run visuals:input-png && npm run visuals:input-html && npm run visuals:output-transparent && npm run visuals:output-jpeg && npm run visuals:output-jpg", "visuals:output-jpeg": "node ./bin/cli ./static/logo.svg ./src/__snapshots__/visual/output-jpeg -s false -t jpeg -q 80 -b coral", + "visuals:output-jpg": "node ./bin/cli ./static/logo.svg ./src/__snapshots__/visual/output-jpg -s false -t jpg -q 80 -b coral", "visuals:output-transparent": "node ./bin/cli ./static/logo.svg ./src/__snapshots__/visual/output-transparent -s false -b transparent -o false", "visuals:input-svg": "node ./bin/cli ./static/logo.svg ./src/__snapshots__/visual/input-svg -s false -b coral", "visuals:input-png": "node ./bin/cli ./static/logo.png ./src/__snapshots__/visual/input-png -s false -b coral", diff --git a/src/__snapshots__/main.test.ts.snap b/src/__snapshots__/main.test.ts.snap index 8e855bfa..9bceee41 100644 --- a/src/__snapshots__/main.test.ts.snap +++ b/src/__snapshots__/main.test.ts.snap @@ -1011,6 +1011,273 @@ Object { } `; +exports[`generates meta resulting an output with jpg extension 1`] = ` +Object { + "htmlMeta": Object { + "appleLaunchImage": " + + + + + + + + + + + + + + + + + + + +", + "appleMobileWebAppCapable": " +", + "appleTouchIcon": " + + + +", + "favicon": " +", + }, + "manifestJsonContent": Array [ + Object { + "sizes": "192x192", + "src": "temp/manifest-icon-192.jpg", + "type": "image/jpg", + }, + Object { + "sizes": "512x512", + "src": "temp/manifest-icon-512.jpg", + "type": "image/jpg", + }, + ], + "savedImages": Array [ + Object { + "height": 2732, + "name": "apple-splash-2048-2732", + "orientation": "portrait", + "path": "temp/apple-splash-2048-2732.jpg", + "scaleFactor": 2, + "width": 2048, + }, + Object { + "height": 2048, + "name": "apple-splash-2732-2048", + "orientation": "landscape", + "path": "temp/apple-splash-2732-2048.jpg", + "scaleFactor": 2, + "width": 2732, + }, + Object { + "height": 2388, + "name": "apple-splash-1668-2388", + "orientation": "portrait", + "path": "temp/apple-splash-1668-2388.jpg", + "scaleFactor": 2, + "width": 1668, + }, + Object { + "height": 1668, + "name": "apple-splash-2388-1668", + "orientation": "landscape", + "path": "temp/apple-splash-2388-1668.jpg", + "scaleFactor": 2, + "width": 2388, + }, + Object { + "height": 2224, + "name": "apple-splash-1668-2224", + "orientation": "portrait", + "path": "temp/apple-splash-1668-2224.jpg", + "scaleFactor": 2, + "width": 1668, + }, + Object { + "height": 1668, + "name": "apple-splash-2224-1668", + "orientation": "landscape", + "path": "temp/apple-splash-2224-1668.jpg", + "scaleFactor": 2, + "width": 2224, + }, + Object { + "height": 2048, + "name": "apple-splash-1536-2048", + "orientation": "portrait", + "path": "temp/apple-splash-1536-2048.jpg", + "scaleFactor": 2, + "width": 1536, + }, + Object { + "height": 1536, + "name": "apple-splash-2048-1536", + "orientation": "landscape", + "path": "temp/apple-splash-2048-1536.jpg", + "scaleFactor": 2, + "width": 2048, + }, + Object { + "height": 2688, + "name": "apple-splash-1242-2688", + "orientation": "portrait", + "path": "temp/apple-splash-1242-2688.jpg", + "scaleFactor": 3, + "width": 1242, + }, + Object { + "height": 1242, + "name": "apple-splash-2688-1242", + "orientation": "landscape", + "path": "temp/apple-splash-2688-1242.jpg", + "scaleFactor": 3, + "width": 2688, + }, + Object { + "height": 2436, + "name": "apple-splash-1125-2436", + "orientation": "portrait", + "path": "temp/apple-splash-1125-2436.jpg", + "scaleFactor": 3, + "width": 1125, + }, + Object { + "height": 1125, + "name": "apple-splash-2436-1125", + "orientation": "landscape", + "path": "temp/apple-splash-2436-1125.jpg", + "scaleFactor": 3, + "width": 2436, + }, + Object { + "height": 1792, + "name": "apple-splash-828-1792", + "orientation": "portrait", + "path": "temp/apple-splash-828-1792.jpg", + "scaleFactor": 2, + "width": 828, + }, + Object { + "height": 828, + "name": "apple-splash-1792-828", + "orientation": "landscape", + "path": "temp/apple-splash-1792-828.jpg", + "scaleFactor": 2, + "width": 1792, + }, + Object { + "height": 2208, + "name": "apple-splash-1242-2208", + "orientation": "portrait", + "path": "temp/apple-splash-1242-2208.jpg", + "scaleFactor": 3, + "width": 1242, + }, + Object { + "height": 1242, + "name": "apple-splash-2208-1242", + "orientation": "landscape", + "path": "temp/apple-splash-2208-1242.jpg", + "scaleFactor": 3, + "width": 2208, + }, + Object { + "height": 1334, + "name": "apple-splash-750-1334", + "orientation": "portrait", + "path": "temp/apple-splash-750-1334.jpg", + "scaleFactor": 2, + "width": 750, + }, + Object { + "height": 750, + "name": "apple-splash-1334-750", + "orientation": "landscape", + "path": "temp/apple-splash-1334-750.jpg", + "scaleFactor": 2, + "width": 1334, + }, + Object { + "height": 1136, + "name": "apple-splash-640-1136", + "orientation": "portrait", + "path": "temp/apple-splash-640-1136.jpg", + "scaleFactor": 2, + "width": 640, + }, + Object { + "height": 640, + "name": "apple-splash-1136-640", + "orientation": "landscape", + "path": "temp/apple-splash-1136-640.jpg", + "scaleFactor": 2, + "width": 1136, + }, + Object { + "height": 180, + "name": "apple-icon-180", + "orientation": null, + "path": "temp/apple-icon-180.jpg", + "scaleFactor": undefined, + "width": 180, + }, + Object { + "height": 167, + "name": "apple-icon-167", + "orientation": null, + "path": "temp/apple-icon-167.jpg", + "scaleFactor": undefined, + "width": 167, + }, + Object { + "height": 152, + "name": "apple-icon-152", + "orientation": null, + "path": "temp/apple-icon-152.jpg", + "scaleFactor": undefined, + "width": 152, + }, + Object { + "height": 120, + "name": "apple-icon-120", + "orientation": null, + "path": "temp/apple-icon-120.jpg", + "scaleFactor": undefined, + "width": 120, + }, + Object { + "height": 192, + "name": "manifest-icon-192", + "orientation": null, + "path": "temp/manifest-icon-192.jpg", + "scaleFactor": undefined, + "width": 192, + }, + Object { + "height": 512, + "name": "manifest-icon-512", + "orientation": null, + "path": "temp/manifest-icon-512.jpg", + "scaleFactor": undefined, + "width": 512, + }, + Object { + "height": 196, + "name": "favicon-196", + "orientation": null, + "path": "temp/favicon-196.jpg", + "scaleFactor": undefined, + "width": 196, + }, + ], +} +`; + exports[`generates meta resulting an output with path prefix 1`] = ` Object { "htmlMeta": Object { diff --git a/src/__snapshots__/visual/output-jpg/apple-icon-120.jpg b/src/__snapshots__/visual/output-jpg/apple-icon-120.jpg new file mode 100644 index 00000000..ddcf7f6a Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/apple-icon-120.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/apple-icon-152.jpg b/src/__snapshots__/visual/output-jpg/apple-icon-152.jpg new file mode 100644 index 00000000..d14050ed Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/apple-icon-152.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/apple-icon-167.jpg b/src/__snapshots__/visual/output-jpg/apple-icon-167.jpg new file mode 100644 index 00000000..5a727eb0 Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/apple-icon-167.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/apple-icon-180.jpg b/src/__snapshots__/visual/output-jpg/apple-icon-180.jpg new file mode 100644 index 00000000..bbbdc6f7 Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/apple-icon-180.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/apple-splash-1125-2436.jpg b/src/__snapshots__/visual/output-jpg/apple-splash-1125-2436.jpg new file mode 100644 index 00000000..099b637c Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/apple-splash-1125-2436.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/apple-splash-1136-640.jpg b/src/__snapshots__/visual/output-jpg/apple-splash-1136-640.jpg new file mode 100644 index 00000000..e87e8ebc Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/apple-splash-1136-640.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/apple-splash-1242-2208.jpg b/src/__snapshots__/visual/output-jpg/apple-splash-1242-2208.jpg new file mode 100644 index 00000000..7ecaee2a Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/apple-splash-1242-2208.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/apple-splash-1242-2688.jpg b/src/__snapshots__/visual/output-jpg/apple-splash-1242-2688.jpg new file mode 100644 index 00000000..71e11cea Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/apple-splash-1242-2688.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/apple-splash-1334-750.jpg b/src/__snapshots__/visual/output-jpg/apple-splash-1334-750.jpg new file mode 100644 index 00000000..1b543ea8 Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/apple-splash-1334-750.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/apple-splash-1536-2048.jpg b/src/__snapshots__/visual/output-jpg/apple-splash-1536-2048.jpg new file mode 100644 index 00000000..13f5b911 Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/apple-splash-1536-2048.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/apple-splash-1668-2224.jpg b/src/__snapshots__/visual/output-jpg/apple-splash-1668-2224.jpg new file mode 100644 index 00000000..1def4c1d Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/apple-splash-1668-2224.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/apple-splash-1668-2388.jpg b/src/__snapshots__/visual/output-jpg/apple-splash-1668-2388.jpg new file mode 100644 index 00000000..6ed10da3 Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/apple-splash-1668-2388.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/apple-splash-1792-828.jpg b/src/__snapshots__/visual/output-jpg/apple-splash-1792-828.jpg new file mode 100644 index 00000000..abec4ceb Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/apple-splash-1792-828.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/apple-splash-2048-1536.jpg b/src/__snapshots__/visual/output-jpg/apple-splash-2048-1536.jpg new file mode 100644 index 00000000..4d1f944a Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/apple-splash-2048-1536.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/apple-splash-2048-2732.jpg b/src/__snapshots__/visual/output-jpg/apple-splash-2048-2732.jpg new file mode 100644 index 00000000..53331315 Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/apple-splash-2048-2732.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/apple-splash-2208-1242.jpg b/src/__snapshots__/visual/output-jpg/apple-splash-2208-1242.jpg new file mode 100644 index 00000000..23dd7128 Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/apple-splash-2208-1242.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/apple-splash-2224-1668.jpg b/src/__snapshots__/visual/output-jpg/apple-splash-2224-1668.jpg new file mode 100644 index 00000000..381a99c2 Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/apple-splash-2224-1668.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/apple-splash-2388-1668.jpg b/src/__snapshots__/visual/output-jpg/apple-splash-2388-1668.jpg new file mode 100644 index 00000000..8d88fc8d Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/apple-splash-2388-1668.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/apple-splash-2436-1125.jpg b/src/__snapshots__/visual/output-jpg/apple-splash-2436-1125.jpg new file mode 100644 index 00000000..39022059 Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/apple-splash-2436-1125.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/apple-splash-2688-1242.jpg b/src/__snapshots__/visual/output-jpg/apple-splash-2688-1242.jpg new file mode 100644 index 00000000..ab6ce0df Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/apple-splash-2688-1242.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/apple-splash-2732-2048.jpg b/src/__snapshots__/visual/output-jpg/apple-splash-2732-2048.jpg new file mode 100644 index 00000000..9bb60fe8 Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/apple-splash-2732-2048.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/apple-splash-640-1136.jpg b/src/__snapshots__/visual/output-jpg/apple-splash-640-1136.jpg new file mode 100644 index 00000000..94058afb Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/apple-splash-640-1136.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/apple-splash-750-1334.jpg b/src/__snapshots__/visual/output-jpg/apple-splash-750-1334.jpg new file mode 100644 index 00000000..e7c6d667 Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/apple-splash-750-1334.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/apple-splash-828-1792.jpg b/src/__snapshots__/visual/output-jpg/apple-splash-828-1792.jpg new file mode 100644 index 00000000..28876903 Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/apple-splash-828-1792.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/manifest-icon-192.jpg b/src/__snapshots__/visual/output-jpg/manifest-icon-192.jpg new file mode 100644 index 00000000..e1109e69 Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/manifest-icon-192.jpg differ diff --git a/src/__snapshots__/visual/output-jpg/manifest-icon-512.jpg b/src/__snapshots__/visual/output-jpg/manifest-icon-512.jpg new file mode 100644 index 00000000..580068eb Binary files /dev/null and b/src/__snapshots__/visual/output-jpg/manifest-icon-512.jpg differ diff --git a/src/cli.ts b/src/cli.ts index a616770c..1f986765 100644 --- a/src/cli.ts +++ b/src/cli.ts @@ -20,7 +20,7 @@ $ pwa-asset-generator --help -m --manifest Web app manifest file path to automatically update manifest file with the generated icons -i --index Index HTML file path to automatically put splash screen and icon meta tags in -a --path Path prefix to prepend for href links generated for meta tags - -t --type Image type: png|jpeg [default: png] + -t --type Image type: png|jpg|jpeg [default: png] -q --quality Image quality: 0...100 (Only for JPEG) [default: 100] -h --splash-only Only generate splash screens [default: false] -c --icon-only Only generate icons [default: false] @@ -34,7 +34,7 @@ $ pwa-asset-generator --help Examples $ pwa-asset-generator logo.html $ pwa-asset-generator logo.svg -i ./index.html -m ./manifest.json - $ pwa-asset-generator https://your-cdn-server.com/assets/logo.png ./ -t jpeg -q 90 --splash-only --portrait-only + $ pwa-asset-generator https://your-cdn-server.com/assets/logo.png ./ -t jpg -q 90 --splash-only --portrait-only $ pwa-asset-generator logo.svg ./assets --scrape false --icon-only --path "%PUBLIC_URL%" $ pwa-asset-generator logo.svg ./assets --icon-only --favicon --opaque false $ pwa-asset-generator logo.svg ./assets --dark-mode --background dimgrey --splash-only --type jpeg --quality 80 @@ -49,7 +49,7 @@ $ pwa-asset-generator --help --manifest ./src/manifest.json --index ./src/index.html --path "%PUBLIC_URL%" - --type jpeg + --type jpg --quality 80 --splash-only --icon-only diff --git a/src/helpers/puppets.ts b/src/helpers/puppets.ts index 4dbe4f80..945ba0bc 100644 --- a/src/helpers/puppets.ts +++ b/src/helpers/puppets.ts @@ -278,7 +278,6 @@ const saveImages = async ( await page.screenshot({ path, omitBackground: !options.opaque, - type: options.type, ...(type !== 'png' ? { quality } : {}), }); diff --git a/src/main.test.ts b/src/main.test.ts index fa47cd3e..62148ab0 100644 --- a/src/main.test.ts +++ b/src/main.test.ts @@ -105,6 +105,17 @@ describe('generates meta', () => { expect(result).toMatchSnapshot(); }); + + test('jpg extension', async () => { + const result = await generateTempImages({ + scrape: false, + favicon: true, + type: 'jpg', + log: false, + }); + + expect(result).toMatchSnapshot(); + }); }); describe('saving meta to manifest.json', () => { @@ -443,7 +454,7 @@ describe('visually compares generated images with', () => { }); }); - test('with JPG format as output', async () => { + test('with JPEG format as output', async () => { const testSuite = 'output-jpeg'; const result = await generateTempImages( { @@ -462,6 +473,26 @@ describe('visually compares generated images with', () => { expect(mr.looksSame).toBeTruthy(); }); }); + + test('with JPG format as output', async () => { + const testSuite = 'output-jpg'; + const result = await generateTempImages( + { + scrape: false, + log: false, + background: 'coral', + type: 'jpg', + quality: 80, + }, + './static/logo.svg', + `./temp/local/${testSuite}`, + ); + + const matchResult = await getAllSnapshotsMatchStatus(result, testSuite); + matchResult.forEach((mr: MatchResult) => { + expect(mr.looksSame).toBeTruthy(); + }); + }); }); describe('using a remote input', () => { diff --git a/src/models/options.ts b/src/models/options.ts index f3c46773..87460351 100644 --- a/src/models/options.ts +++ b/src/models/options.ts @@ -1,4 +1,4 @@ -export type Extension = 'png' | 'jpeg'; +export type Extension = 'png' | 'jpeg' | 'jpg'; export interface Options { /**