@automattic/jetpack-image-guide 0.5.0 → 0.5.2

package/CHANGELOG.md

@@ -5,6 +5,21 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.5.2] - 2023-09-01
+### Changed
+- Updated package dependencies. [#31815] [#32605]
+- Update tiny image check to treat images who's dimentions are missing as tiny. [#32144]
+
+### Removed
+- Remove unnecessary files from mirror repo and published package. [#32674]
+
+### Fixed
+- Handle zero dimensions in getOversizedRatio [#32548]
+
+## [0.5.1] - 2023-07-11
+### Fixed
+- Image Guide: Fix for broken background-images causing the image guide not to load [#31792]
+
 ## [0.5.0] - 2023-07-07
 ### Added
 - Boost: exclude small images from Image Size Analysis [#31504]
@@ -59,5 +74,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Removed
 - Minor package.json change - removing private entry.
 
+[0.5.2]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.1...v0.5.2
+[0.5.1]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.0...v0.5.1
 [0.5.0]: https://github.com/Automattic/jetpack-image-guide/compare/v0.4.0...v0.5.0
 [0.4.0]: https://github.com/Automattic/jetpack-image-guide/compare/v0.3.0...v0.4.0

package/build/MeasurableImage.d.ts

@@ -62,7 +62,7 @@ export declare class MeasurableImage {
      */
     private fetchFileDimensions;
     /**
-     * Checks if the image is too small and should be ignored. Will return false on images
+     * Checks if the image is too small and should be ignored. Will return true on images
      * that don't load at all - we can't establish they're tiny!
      *
      * @returns {boolean} - if the image is smaller than 65 pixels width and height return true

package/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '001cd98ea4ed0b8489db');
+<?php return array('dependencies' => array(), 'version' => 'e657184e174bd13a2997');

package/build/index.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ImageGuideLibrary=e():t.ImageGuideLibrary=e()}(self,(()=>(()=>{"use strict";var t={38:(t,e,n)=>{n.d(e,{z:()=>i});var r=function(t,e,n,r){return new(n||(n=Promise))((function(o,i){function u(t){try{c(r.next(t))}catch(t){i(t)}}function a(t){try{c(r.throw(t))}catch(t){i(t)}}function c(t){var e;t.done?o(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(u,a)}c((r=r.apply(t,e||[])).next())}))},o=function(t,e){var n,r,o,i,u={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function a(a){return function(c){return function(a){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,a[0]&&(u=0)),u;)try{if(n=1,r&&(o=2&a[0]?r.return:a[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,a[1])).done)return o;switch(r=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return u.label++,{value:a[1],done:!1};case 5:u.label++,r=a[1],a=[0];continue;case 7:a=u.ops.pop(),u.trys.pop();continue;default:if(!(o=u.trys,(o=o.length>0&&o[o.length-1])||6!==a[0]&&2!==a[0])){u=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){u.label=a[1];break}if(6===a[0]&&u.label<o[1]){u.label=o[1],o=a;break}if(o&&u.label<o[2]){u.label=o[2],u.ops.push(a);break}o[2]&&u.ops.pop(),u.trys.pop();continue}a=e.call(t,u)}catch(t){a=[6,t],r=0}finally{n=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,c])}}},i=function(){function t(t,e,n){void 0===n&&(n=null),this.node=t,this.getURLCallback=e,this.fetch=null!=n?n:window.fetch.bind(window)}return t.prototype.getURL=function(){return this.getURLCallback(this.node)},t.prototype.getSizeOnPage=function(){var t=this.node.getBoundingClientRect(),e=t.width,n=t.height;return{width:Math.round(e),height:Math.round(n)}},t.prototype.getFileSize=function(t){return r(this,void 0,void 0,(function(){var e,n,r,i,u;return o(this,(function(o){switch(o.label){case 0:return[4,Promise.all([this.fetchFileWeight(t),this.fetchFileDimensions(t)])];case 1:return e=o.sent(),n=e[0],r=e[1],i=r.width,u=r.height,[2,{width:i,height:u,weight:n}]}}))}))},t.prototype.getPotentialSavings=function(t,e){var n=this.getOversizedRatio(t,e);return n<=1?null:Math.round(t.weight-t.weight/n)},t.prototype.getExpectedSize=function(t){var e=window.devicePixelRatio||1;return{width:Math.round(t.width*e),height:Math.round(t.height*e)}},t.prototype.getOversizedRatio=function(t,e){var n=this.getExpectedSize(e),r=n.width,o=n.height;return t.width*t.height/(r*o)},t.prototype.fetchFileWeight=function(t){return r(this,void 0,void 0,(function(){var e;return o(this,(function(n){switch(n.label){case 0:return[4,this.fetch(t)];case 1:return(e=n.sent()).ok?[2,parseInt(e.headers.get("content-length"),10)/1024]:(console.log("Can't get image size for ".concat(t," likely due to a CORS error.")),[2,-1])}}))}))},t.prototype.fetchFileDimensions=function(t){return r(this,void 0,void 0,(function(){var e;return o(this,(function(n){return(e=new Image).src=t,[2,new Promise((function(t,n){e.onload=function(){t({width:Math.round(e.width),height:Math.round(e.height)})},e.onerror=function(){n("Unable to load image.")}}))]}))}))},t.prototype.isImageTiny=function(){return r(this,void 0,void 0,(function(){var t,e;return o(this,(function(n){switch(n.label){case 0:return n.trys.push([0,2,,3]),t=65,[4,this.fetchFileDimensions(this.getURL())];case 1:return[2,(e=n.sent()).width<t||e.height<t];case 2:return n.sent(),[2,!1];case 3:return[2]}}))}))},t}()},705:(t,e,n)=>{n.d(e,{RK:()=>c});var r=n(38),o=function(t,e,n,r){return new(n||(n=Promise))((function(o,i){function u(t){try{c(r.next(t))}catch(t){i(t)}}function a(t){try{c(r.throw(t))}catch(t){i(t)}}function c(t){var e;t.done?o(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(u,a)}c((r=r.apply(t,e||[])).next())}))},i=function(t,e){var n,r,o,i,u={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function a(a){return function(c){return function(a){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,a[0]&&(u=0)),u;)try{if(n=1,r&&(o=2&a[0]?r.return:a[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,a[1])).done)return o;switch(r=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return u.label++,{value:a[1],done:!1};case 5:u.label++,r=a[1],a=[0];continue;case 7:a=u.ops.pop(),u.trys.pop();continue;default:if(!(o=u.trys,(o=o.length>0&&o[o.length-1])||6!==a[0]&&2!==a[0])){u=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){u.label=a[1];break}if(6===a[0]&&u.label<o[1]){u.label=o[1],o=a;break}if(o&&u.label<o[2]){u.label=o[2],u.ops.push(a);break}o[2]&&u.ops.pop(),u.trys.pop();continue}a=e.call(t,u)}catch(t){a=[6,t],r=0}finally{n=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,c])}}};function u(t){return l(t.currentSrc)?t.currentSrc:l(t.src)?t.src:null}function a(t){var e=getComputedStyle(t).backgroundImage.match(/url\(\s*(['"])(.*?)\1\s*\)/i),n=window.location.href.split("#")[0];return e&&e[2]&&e[2]!==n&&l(e[2])?e[2]:null}function c(t,e){return void 0===e&&(e=null),o(this,void 0,void 0,(function(){var n;return i(this,(function(o){return n=function(t){return t.filter((function(t){return t instanceof HTMLImageElement||t instanceof HTMLElement&&"none"!==getComputedStyle(t).backgroundImage}))}(t),[2,n.map((function(t){return t instanceof HTMLImageElement?new r.z(t,u,e):t instanceof HTMLElement&&a(t)?new r.z(t,a):null}))]}))}))}function l(t){if(t.startsWith("/"))return!t.split("?")[0].endsWith(".svg");try{var e=new URL(t);return"http:"===e.protocol||"https:"===e.protocol}catch(t){return!1}}}},e={};function n(r){var o=e[r];if(void 0!==o)return o.exports;var i=e[r]={exports:{}};return t[r](i,i.exports,n),i.exports}n.d=(t,e)=>{for(var r in e)n.o(e,r)&&!n.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var r={};return(()=>{n.r(r),n.d(r,{MeasurableImage:()=>t.z,getMeasurableImages:()=>e.RK});var t=n(38),e=n(705)})(),r})()));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ImageGuideLibrary=e():t.ImageGuideLibrary=e()}(self,(()=>(()=>{"use strict";var t={38:(t,e,n)=>{n.d(e,{z:()=>i});var r=function(t,e,n,r){return new(n||(n=Promise))((function(o,i){function u(t){try{c(r.next(t))}catch(t){i(t)}}function a(t){try{c(r.throw(t))}catch(t){i(t)}}function c(t){var e;t.done?o(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(u,a)}c((r=r.apply(t,e||[])).next())}))},o=function(t,e){var n,r,o,i,u={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function a(a){return function(c){return function(a){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,a[0]&&(u=0)),u;)try{if(n=1,r&&(o=2&a[0]?r.return:a[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,a[1])).done)return o;switch(r=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return u.label++,{value:a[1],done:!1};case 5:u.label++,r=a[1],a=[0];continue;case 7:a=u.ops.pop(),u.trys.pop();continue;default:if(!(o=u.trys,(o=o.length>0&&o[o.length-1])||6!==a[0]&&2!==a[0])){u=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){u.label=a[1];break}if(6===a[0]&&u.label<o[1]){u.label=o[1],o=a;break}if(o&&u.label<o[2]){u.label=o[2],u.ops.push(a);break}o[2]&&u.ops.pop(),u.trys.pop();continue}a=e.call(t,u)}catch(t){a=[6,t],r=0}finally{n=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,c])}}},i=function(){function t(t,e,n){void 0===n&&(n=null),this.node=t,this.getURLCallback=e,this.fetch=null!=n?n:window.fetch.bind(window)}return t.prototype.getURL=function(){return this.getURLCallback(this.node)},t.prototype.getSizeOnPage=function(){var t=this.node.getBoundingClientRect(),e=t.width,n=t.height;return{width:Math.round(e),height:Math.round(n)}},t.prototype.getFileSize=function(t){return r(this,void 0,void 0,(function(){var e,n,r,i,u;return o(this,(function(o){switch(o.label){case 0:return[4,Promise.all([this.fetchFileWeight(t),this.fetchFileDimensions(t)])];case 1:return e=o.sent(),n=e[0],r=e[1],i=r.width,u=r.height,[2,{width:i,height:u,weight:n}]}}))}))},t.prototype.getPotentialSavings=function(t,e){var n=this.getOversizedRatio(t,e);return n<=1?null:Math.round(t.weight-t.weight/n)},t.prototype.getExpectedSize=function(t){var e=window.devicePixelRatio||1;return{width:Math.round(t.width*e),height:Math.round(t.height*e)}},t.prototype.getOversizedRatio=function(t,e){if(0===t.width||0===t.height)return 1;var n=this.getExpectedSize(e),r=n.width,o=n.height;return 0===r||0===o?1:t.width*t.height/(r*o)},t.prototype.fetchFileWeight=function(t){return r(this,void 0,void 0,(function(){var e;return o(this,(function(n){switch(n.label){case 0:return[4,this.fetch(t)];case 1:return(e=n.sent()).ok?[2,parseInt(e.headers.get("content-length"),10)/1024]:(console.log("Can't get image size for ".concat(t," likely due to a CORS error.")),[2,-1])}}))}))},t.prototype.fetchFileDimensions=function(t){return r(this,void 0,void 0,(function(){var e;return o(this,(function(n){return(e=new Image).src=t,[2,new Promise((function(t,n){e.onload=function(){t({width:Math.round(e.width),height:Math.round(e.height)})},e.onerror=function(){n("Unable to load image.")}}))]}))}))},t.prototype.isImageTiny=function(){return r(this,void 0,void 0,(function(){var t,e;return o(this,(function(n){switch(n.label){case 0:return n.trys.push([0,2,,3]),t=65,[4,this.fetchFileDimensions(this.getURL())];case 1:return[2,(e=n.sent()).width<t||e.height<t];case 2:return n.sent(),[2,!0];case 3:return[2]}}))}))},t}()},705:(t,e,n)=>{n.d(e,{RK:()=>c});var r=n(38),o=function(t,e,n,r){return new(n||(n=Promise))((function(o,i){function u(t){try{c(r.next(t))}catch(t){i(t)}}function a(t){try{c(r.throw(t))}catch(t){i(t)}}function c(t){var e;t.done?o(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(u,a)}c((r=r.apply(t,e||[])).next())}))},i=function(t,e){var n,r,o,i,u={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function a(a){return function(c){return function(a){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,a[0]&&(u=0)),u;)try{if(n=1,r&&(o=2&a[0]?r.return:a[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,a[1])).done)return o;switch(r=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return u.label++,{value:a[1],done:!1};case 5:u.label++,r=a[1],a=[0];continue;case 7:a=u.ops.pop(),u.trys.pop();continue;default:if(!(o=u.trys,(o=o.length>0&&o[o.length-1])||6!==a[0]&&2!==a[0])){u=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){u.label=a[1];break}if(6===a[0]&&u.label<o[1]){u.label=o[1],o=a;break}if(o&&u.label<o[2]){u.label=o[2],u.ops.push(a);break}o[2]&&u.ops.pop(),u.trys.pop();continue}a=e.call(t,u)}catch(t){a=[6,t],r=0}finally{n=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,c])}}};function u(t){return l(t.currentSrc)?t.currentSrc:l(t.src)?t.src:null}function a(t){var e=getComputedStyle(t).backgroundImage.match(/url\(\s*(['"])(.*?)\1\s*\)/i),n=window.location.href.split("#")[0];return e&&e[2]&&e[2]!==n&&l(e[2])?e[2]:null}function c(t,e){return void 0===e&&(e=null),o(this,void 0,void 0,(function(){var n;return i(this,(function(o){return n=function(t){return t.filter((function(t){return t instanceof HTMLImageElement||t instanceof HTMLElement&&"none"!==getComputedStyle(t).backgroundImage}))}(t),[2,n.map((function(t){return t instanceof HTMLImageElement?new r.z(t,u,e):t instanceof HTMLElement&&a(t)?new r.z(t,a):null})).filter((function(t){return null!==t}))]}))}))}function l(t){if(t.startsWith("/"))return!t.split("?")[0].endsWith(".svg");try{var e=new URL(t);return"http:"===e.protocol||"https:"===e.protocol}catch(t){return!1}}}},e={};function n(r){var o=e[r];if(void 0!==o)return o.exports;var i=e[r]={exports:{}};return t[r](i,i.exports,n),i.exports}n.d=(t,e)=>{for(var r in e)n.o(e,r)&&!n.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var r={};return(()=>{n.r(r),n.d(r,{MeasurableImage:()=>t.z,getMeasurableImages:()=>e.RK});var t=n(38),e=n(705)})(),r})()));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-image-guide",
-	"version": "0.5.0",
+	"version": "0.5.2",
 	"description": "Go through the dom to analyze image size on screen vs actual file size.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/image-guide/#readme",
 	"type": "module",
@@ -22,8 +22,8 @@
 	},
 	"devDependencies": {
 		"@automattic/jetpack-webpack-config": "workspace:*",
-		"@typescript-eslint/parser": "5.59.0",
-		"eslint": "8.39.0",
+		"@typescript-eslint/parser": "5.62.0",
+		"eslint": "8.44.0",
 		"jest": "29.4.3",
 		"ts-loader": "9.4.2",
 		"typescript": "5.0.4",

package/.gitattributes

@@ -1,17 +0,0 @@
-# Files not needed to be distributed in the package.
-.gitattributes    export-ignore
-node_modules      export-ignore
-package.json      export-ignore
-
-# Files to include in the mirror repo, but excluded via gitignore
-# Remember to end all directories with `/**` to properly tag every file.
-/build/**         production-include
-
-# Files to exclude from the mirror repo
-/changelog/**     production-exclude
-/.eslintrc.cjs    production-exclude
-.gitignore        production-exclude
-tests/**          production-exclude
-babel.config.js   production-exclude
-webpack.config.js production-exclude
-tsconfig.json     production-exclude

package/babel.config.cjs

@@ -1,10 +0,0 @@
-module.exports = {
-	presets: [
-		[
-			'@automattic/jetpack-webpack-config/babel/preset',
-			{
-				/* options */
-			},
-		],
-	],
-};

package/src/MeasurableImage.ts

@@ -1,140 +0,0 @@
-export type SourceCallbackFn = ( node: HTMLElement ) => string | null;
-export type Dimensions = { width: number; height: number };
-export type Weight = { weight: number };
-
-export type FetchFn = ( input: URL | RequestInfo, init?: RequestInit ) => Promise< Response >;
-
-/**
- * A class that represents a DOM Element that
- * has an image that should be measured and
- * provides measurement utilities.
- */
-export class MeasurableImage {
-	readonly node: HTMLElement | HTMLImageElement;
-	private getURLCallback: SourceCallbackFn;
-
-	public fetch: FetchFn;
-
-	/**
-	 * Constructor.
-	 *
-	 * @param {HTMLElement | HTMLImageElement} node -  The DOM Element that contains the image.
-	 * @param {SourceCallbackFn} getURL             -  A function that takes in the node and returns the URL of the image.
-	 * @param {FetchFn} fetchFn                     -  A function that fetches a URL and returns a Promise.
-	 */
-	constructor(
-		node: HTMLElement | HTMLImageElement,
-		getURL: SourceCallbackFn,
-		fetchFn: FetchFn | null = null
-	) {
-		this.node = node;
-		this.getURLCallback = getURL;
-		this.fetch = fetchFn ?? window.fetch.bind( window );
-	}
-
-	public getURL() {
-		return this.getURLCallback( this.node );
-	}
-
-	public getSizeOnPage() {
-		const { width, height } = this.node.getBoundingClientRect();
-
-		return {
-			width: Math.round( width ),
-			height: Math.round( height ),
-		};
-	}
-
-	public async getFileSize( url: string ) {
-		const [ weight, { width, height } ] = await Promise.all( [
-			this.fetchFileWeight( url ),
-			this.fetchFileDimensions( url ),
-		] );
-
-		return {
-			width,
-			height,
-			weight,
-		};
-	}
-
-	public getPotentialSavings( fileSize: Dimensions & Weight, sizeOnPage: Dimensions ) {
-		const oversizedRatio = this.getOversizedRatio( fileSize, sizeOnPage );
-		if ( oversizedRatio <= 1 ) {
-			return null;
-		}
-		return Math.round( fileSize.weight - fileSize.weight / oversizedRatio );
-	}
-
-	/**
-	 * To get the expected size of the image,
-	 * the image size on page has to be multiplied by the device pixel ratio.
-	 *
-	 * @param {Dimensions} sizeOnPage - The size of the image on the page.
-	 * @returns {object} - The expected size of the image.
-	 */
-	public getExpectedSize( sizeOnPage: Dimensions ) {
-		const dpr = window.devicePixelRatio || 1;
-		return {
-			width: Math.round( sizeOnPage.width * dpr ),
-			height: Math.round( sizeOnPage.height * dpr ),
-		};
-	}
-
-	public getOversizedRatio( fileSize: Dimensions, sizeOnPage: Dimensions ) {
-		const { width, height } = this.getExpectedSize( sizeOnPage );
-		return ( fileSize.width * fileSize.height ) / ( width * height );
-	}
-
-	/**
-	 * Fetches the weight of the image at the given URL,
-	 * by reading the Content-Length header.
-	 *
-	 * @param {string} url -  string The URL of the image.
-	 */
-	private async fetchFileWeight( url: string ) {
-		const response = await this.fetch( url );
-		if ( ! response.ok ) {
-			// eslint-disable-next-line no-console
-			console.log( `Can't get image size for ${ url } likely due to a CORS error.` );
-			return -1;
-		}
-
-		return parseInt( response.headers.get( 'content-length' ), 10 ) / 1024;
-	}
-
-	/**
-	 * Fetches the dimensions of the image at the given URL,
-	 * This creates a new image element and loads the image.
-	 *
-	 * @param {string} url -  image url
-	 */
-	private async fetchFileDimensions( url: string ) {
-		const img = new Image();
-		img.src = url;
-		return new Promise< { width: number; height: number } >( ( resolve, reject ) => {
-			img.onload = () => {
-				resolve( { width: Math.round( img.width ), height: Math.round( img.height ) } );
-			};
-			img.onerror = () => {
-				reject( 'Unable to load image.' );
-			};
-		} );
-	}
-
-	/**
-	 * Checks if the image is too small and should be ignored. Will return false on images
-	 * that don't load at all - we can't establish they're tiny!
-	 *
-	 * @returns {boolean} - if the image is smaller than 65 pixels width and height return true
-	 */
-	public async isImageTiny(): Promise< boolean > {
-		try {
-			const minSize = 65;
-			const dimensions = await this.fetchFileDimensions( this.getURL() );
-			return dimensions.width < minSize || dimensions.height < minSize;
-		} catch ( err ) {
-			return false;
-		}
-	}
-}

package/src/find-image-elements.ts

@@ -1,125 +0,0 @@
-import { FetchFn, MeasurableImage } from './MeasurableImage';
-
-/**
- * Get elements that either are image tags or have a background image.
- *
- * @param {Element[]} nodes -  A list of nodes to filter
- * @returns {HTMLElement[] | HTMLImageElement[]} - A list of nodes that are either image tags or have a background image.
- */
-export function findMeasurableElements( nodes: Element[] ): HTMLElement[] | HTMLImageElement[] {
-	return nodes.filter( ( el ): el is HTMLElement | HTMLImageElement => {
-		if ( el instanceof HTMLImageElement ) {
-			return true;
-		}
-		if ( el instanceof HTMLElement ) {
-			const style = getComputedStyle( el );
-			return 'none' !== style.backgroundImage;
-		}
-		return false;
-	} );
-}
-
-/**
- * Get the current image source from a node.
- *
- * @param {HTMLImageElement} node -  HTMLImageElement
- * @returns {string | null} - The URL of the image or null if it can't be determined.
- */
-export function imageTagSource( node: HTMLImageElement ) {
-	if ( imageLikeURL( node.currentSrc ) ) {
-		return node.currentSrc;
-	}
-	if ( imageLikeURL( node.src ) ) {
-		return node.src;
-	}
-
-	return null;
-}
-
-/**
- * Get the background image URL from a node.
- *
- * @param {HTMLImageElement} node - HTMLElement
- * @returns {string | null} - The URL of the image or null if it can't be determined.
- */
-export function backgroundImageSource( node: HTMLElement ) {
-	const src = getComputedStyle( node ).backgroundImage;
-	const url = src.match( /url\(\s*(['"])(.*?)\1\s*\)/i );
-
-	// If background image is `url('')`, the computed value becomes the current page URL. So we need to check for that.
-	const currentUrlWithoutHash = window.location.href.split( '#' )[ 0 ];
-
-	if ( url && url[ 2 ] && url[ 2 ] !== currentUrlWithoutHash && imageLikeURL( url[ 2 ] ) ) {
-		return url[ 2 ];
-	}
-	return null;
-}
-
-/**
- * Create MeasurableImage objects from a list of nodes
- * and remove any nodes that can't be measured.
- *
- * @param {Element[]} domNodes - A list of nodes to measure
- * @param {(input: string, init?: Array) => Promise<Response>} fetchFn -  A function that fetches a URL and returns a Promise.
- * @returns {MeasurableImage[]} - A list of MeasurableImage objects.
- */
-export async function getMeasurableImages(
-	domNodes: Element[],
-	fetchFn: FetchFn | null = null
-): Promise< MeasurableImage[] > {
-	const nodes = findMeasurableElements( domNodes );
-	const images = nodes.map( node => {
-		if ( node instanceof HTMLImageElement ) {
-			return new MeasurableImage( node, imageTagSource, fetchFn );
-		} else if ( node instanceof HTMLElement ) {
-			if ( ! backgroundImageSource( node ) ) {
-				/**
-				 * Background elements that have no valid URL
-				 * shouldn't be measured.
-				 */
-				return null;
-			}
-
-			return new MeasurableImage( node, backgroundImageSource );
-		}
-
-		return null;
-	} );
-
-	return images;
-}
-
-/**
- * isImageLikeURL - a helper function to determine if URL could be an image.
- *
- * This function ensures that the value passed in looks like a URL.
- * This is because `background: url(...)` and `src="..."` can
- * contain various values that are not URLs, like:
- * - none
- * - linear-gradient(...)
- * - data:image/png;base64,...
- * - ...
- *
- * For the purposes of analyzing image sizes,
- * we also don't consider SVGs to be images.
- *
- * @param {string} value - string to check
- * @returns {boolean} - true if the value looks like a URL
- */
-function imageLikeURL( value: string ): boolean {
-	// Look for relative URLs that are not SVGs
-	// Intentionally not using an allow-list because images may
-	// be served from weird URLs like /images/1234?size=large
-	if ( value.startsWith( '/' ) ) {
-		// Remove query string parameters
-		const path = value.split( '?' )[ 0 ];
-		return ! path.endsWith( '.svg' );
-	}
-
-	try {
-		const url = new URL( value );
-		return url.protocol === 'http:' || url.protocol === 'https:';
-	} catch ( e ) {
-		return false;
-	}
-}

package/src/index.ts

@@ -1,5 +0,0 @@
-import { Dimensions, MeasurableImage, Weight } from './MeasurableImage';
-import { getMeasurableImages } from './find-image-elements';
-
-export { MeasurableImage, getMeasurableImages };
-export type { Weight, Dimensions };

package/webpack.config.cjs

@@ -1,34 +0,0 @@
-const path = require( 'path' );
-const jetpackWebpackConfig = require( '@automattic/jetpack-webpack-config/webpack' );
-
-module.exports = {
-	entry: './src/index.ts',
-	mode: jetpackWebpackConfig.mode,
-	devtool: jetpackWebpackConfig.isProduction ? false : 'source-map',
-	module: {
-		strictExportPresence: true,
-		rules: [
-			{
-				test: /\.ts?$/,
-				use: 'ts-loader',
-				exclude: /node_modules/,
-			},
-		],
-	},
-	optimization: {
-		...jetpackWebpackConfig.optimization,
-	},
-	resolve: {
-		...jetpackWebpackConfig.resolve,
-	},
-	output: {
-		...jetpackWebpackConfig.output,
-		path: path.resolve( __dirname, 'build' ),
-		filename: 'index.js',
-		library: {
-			name: 'ImageGuideLibrary',
-			type: 'umd',
-		},
-	},
-	plugins: [ ...jetpackWebpackConfig.StandardPlugins() ],
-};