feat(main): added jpg extension as an output type

Added jpg extension in addition to jpeg as an output type

fix #116

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

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",

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": "<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-2048-2732.jpg\\" media=\\"(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)\\">
+<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-2732-2048.jpg\\" media=\\"(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)\\">
+<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-1668-2388.jpg\\" media=\\"(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)\\">
+<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-2388-1668.jpg\\" media=\\"(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)\\">
+<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-1668-2224.jpg\\" media=\\"(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)\\">
+<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-2224-1668.jpg\\" media=\\"(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)\\">
+<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-1536-2048.jpg\\" media=\\"(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)\\">
+<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-2048-1536.jpg\\" media=\\"(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)\\">
+<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-1242-2688.jpg\\" media=\\"(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)\\">
+<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-2688-1242.jpg\\" media=\\"(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)\\">
+<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-1125-2436.jpg\\" media=\\"(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)\\">
+<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-2436-1125.jpg\\" media=\\"(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)\\">
+<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-828-1792.jpg\\" media=\\"(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)\\">
+<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-1792-828.jpg\\" media=\\"(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)\\">
+<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-1242-2208.jpg\\" media=\\"(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)\\">
+<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-2208-1242.jpg\\" media=\\"(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)\\">
+<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-750-1334.jpg\\" media=\\"(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)\\">
+<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-1334-750.jpg\\" media=\\"(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)\\">
+<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-640-1136.jpg\\" media=\\"(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)\\">
+<link rel=\\"apple-touch-startup-image\\" href=\\"temp/apple-splash-1136-640.jpg\\" media=\\"(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)\\">
+",
+    "appleMobileWebAppCapable": "<meta name=\\"apple-mobile-web-app-capable\\" content=\\"yes\\">
+",
+    "appleTouchIcon": "<link rel=\\"apple-touch-icon\\" sizes=\\"180x180\\" href=\\"temp/apple-icon-180.jpg\\">
+<link rel=\\"apple-touch-icon\\" sizes=\\"167x167\\" href=\\"temp/apple-icon-167.jpg\\">
+<link rel=\\"apple-touch-icon\\" sizes=\\"152x152\\" href=\\"temp/apple-icon-152.jpg\\">
+<link rel=\\"apple-touch-icon\\" sizes=\\"120x120\\" href=\\"temp/apple-icon-120.jpg\\">
+",
+    "favicon": "<link rel=\\"icon\\" type=\\"image/jpeg\\" sizes=\\"196x196\\" href=\\"temp/favicon-196.jpg\\">
+",
+  },
+  "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 {

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

src/helpers/puppets.ts

@@ -278,7 +278,6 @@ const saveImages = async (
         await page.screenshot({
           path,
           omitBackground: !options.opaque,
-          type: options.type,
           ...(type !== 'png' ? { quality } : {}),
         });