@automattic/jetpack-image-guide 0.5.4 → 0.5.6

package/CHANGELOG.md

@@ -5,6 +5,18 @@ 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.6] - 2024-02-22
+### Changed
+- Make build usable in projects using tsc with `moduleResolution` set to 'nodenext'. [#35453]
+- Updated targets in build configuration to better match supported browsers. [#35764]
+
+### Fixed
+- Fix image name causing image to go outside details panel. [#35309]
+
+## [0.5.5] - 2024-01-22
+### Changed
+- Updated package dependencies. [#34427]
+
 ## [0.5.4] - 2023-10-26
 ### Changed
 - Updated package dependencies. [#32957]
@@ -84,6 +96,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Removed
 - Minor package.json change - removing private entry.
 
+[0.5.6]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.5...v0.5.6
+[0.5.5]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.4...v0.5.5
 [0.5.4]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.3...v0.5.4
 [0.5.3]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.2...v0.5.3
 [0.5.2]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.1...v0.5.2

package/build/MeasurableImage.d.ts

@@ -6,7 +6,7 @@ export type Dimensions = {
 export type Weight = {
     weight: number;
 };
-export type FetchFn = (input: URL | RequestInfo, init?: RequestInit) => Promise<Response>;
+export type FetchFn = (url: string) => Promise<Response>;
 /**
  * A class that represents a DOM Element that
  * has an image that should be measured and
@@ -19,9 +19,9 @@ export declare class MeasurableImage {
     /**
      * 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.
+     * @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);
     getURL(): string;
@@ -40,7 +40,7 @@ export declare class MeasurableImage {
      * 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.
+     * @return {object} - The expected size of the image.
      */
     getExpectedSize(sizeOnPage: Dimensions): {
         width: number;
@@ -51,23 +51,23 @@ export declare class MeasurableImage {
      * 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.
-     * @returns {number} Weight.
+     * @param {string} url - string The URL of the image.
+     * @return {number} Weight.
      */
     private fetchFileWeight;
     /**
      * 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
-     * @returns {object} dimensions File dimensions.
+     * @param {string} url - image url
+     * @return {object} dimensions File dimensions.
      */
     private fetchFileDimensions;
     /**
      * 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
+     * @return {boolean} - if the image is smaller than 65 pixels width and height return true
      */
     isImageTiny(): Promise<boolean>;
 }

package/build/_unused-image-observer.d.ts

@@ -0,0 +1,15 @@
+/**
+ *
+ *
+ * ! MutationObserver is currently not used.
+ * ! This needs significant improvement before we can use it.
+ *
+ *
+ */
+type ImageCallback = (images: HTMLElement[]) => void;
+/**
+ *
+ * @param callback
+ */
+export declare function createImageObserver(callback: ImageCallback): Promise<MutationObserver>;
+export {};

package/build/analytics.d.ts

@@ -0,0 +1,47 @@
+import { MeasurableImageStore } from './stores/MeasurableImageStore.js';
+/**
+ * Image properties sent to tracks.
+ */
+type ImageProperties = {
+    severity: 'red' | 'yellow' | 'green';
+    oversized_ratio: number;
+    file_weight: number;
+    file_width: number;
+    file_height: number;
+    size_on_page_width: number;
+    size_on_page_height: number;
+    expected_width: number;
+    expected_height: number;
+    potential_savings: number | null;
+    image_url: string;
+};
+export type TracksCallback = (event: string, props: {
+    [key: string]: string | number;
+}) => void;
+export default class ImageGuideAnalytics {
+    static trackingComplete: boolean;
+    static tracksCallback: TracksCallback;
+    static setTracksCallback(callback: any): void;
+    /**
+     * Track the image guide analytics for a single image.
+     *
+     * @param { MeasurableImageStore } imageStore - The image store to track.
+     * @return { Promise< ImageProperties > } Promise that resolves with the properties of the image.
+     */
+    static trackImageOutcome(imageStore: MeasurableImageStore): Promise<ImageProperties>;
+    /**
+     * Track events to record the outcome of the image guide for the current page.
+     *
+     * @param {MeasurableImageStore[]} imageStores - The image stores to track.
+     */
+    static trackPage(imageStores: MeasurableImageStore[]): Promise<void>;
+    /**
+     * Track the state of the UI when the user loads a page.
+     */
+    static trackInitialState(): void;
+    /**
+     * Track the state of the UI when the user changes it.
+     */
+    static trackUIStateChange(): void;
+}
+export {};

package/build/find-image-elements.d.ts

@@ -1,31 +1,31 @@
-import { FetchFn, MeasurableImage } from './MeasurableImage';
+import { FetchFn, MeasurableImage } from './MeasurableImage.js';
 /**
  * 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.
+ * @param {Element[]} nodes - A list of nodes to filter
+ * @return {HTMLElement[] | HTMLImageElement[]} - A list of nodes that are either image tags or have a background image.
  */
 export declare function findMeasurableElements(nodes: Element[]): HTMLElement[] | HTMLImageElement[];
 /**
  * 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.
+ * @param {HTMLImageElement} node - HTMLImageElement
+ * @return {string | null} - The URL of the image or null if it can't be determined.
  */
 export declare function imageTagSource(node: HTMLImageElement): string;
 /**
  * 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.
+ * @return {string | null} - The URL of the image or null if it can't be determined.
  */
 export declare function backgroundImageSource(node: HTMLElement): string;
 /**
  * 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.
+ * @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.
+ * @return {MeasurableImage[]} - A list of MeasurableImage objects.
  */
 export declare function getMeasurableImages(domNodes: Element[], fetchFn?: FetchFn | null): Promise<MeasurableImage[]>;

package/build/guide.css

@@ -0,0 +1 @@
+div.svelte-f6jc8{align-items:center;display:flex;justify-content:center}.spinner.svelte-2eb8gc{animation:svelte-2eb8gc-pulse 1.25s ease-in-out infinite reverse}@keyframes svelte-2eb8gc-pulse{0%{transform:scale(1) rotate(0deg)}70%{transform:scale(1.4) rotate(30deg)}to{transform:scale(.9) rotate(-190deg)}}svg.svelte-jkeb2{transform:translateY(2px)}.interaction-area.svelte-18vhu7m.svelte-18vhu7m{margin-bottom:-15px;margin-left:-15px;margin-top:-15px;padding:15px}.bubble.svelte-18vhu7m.svelte-18vhu7m{background-color:#069e08;border:1px solid hsla(0,0%,100%,.05);border-radius:50%;color:#fff;cursor:default;font-family:sans-serif;font-size:.8em;font-weight:600;height:32px;position:relative;text-align:center;text-shadow:0 0 1px rgba(0,0,0,.15);transition:background-color .3s ease;width:32px}.high.svelte-18vhu7m .bubble.svelte-18vhu7m{background-color:#e52e00}.medium.svelte-18vhu7m .bubble.svelte-18vhu7m{background-color:#e98800}.bubble-inner.svelte-18vhu7m.svelte-18vhu7m{align-items:center;bottom:0;display:flex;height:100%;justify-content:center;left:0;margin:auto;position:absolute;right:0;top:0;width:100%}.guide.small .interaction-area.svelte-18vhu7m.svelte-18vhu7m{padding:15px}.guide.small .bubble.svelte-18vhu7m.svelte-18vhu7m{font-size:10px;height:28px;width:28px}.guide.micro .interaction-area.svelte-18vhu7m.svelte-18vhu7m{margin-left:-10px;margin-top:-10px;padding:10px}.guide.micro .bubble.svelte-18vhu7m.svelte-18vhu7m{border:1px solid hsla(0,0%,100%,.3);font-size:0;height:10px;width:10px}.guide.micro .bubble.svelte-18vhu7m svg{display:none}svg.svelte-1g2gjwn{height:1em;margin:0;vertical-align:middle;width:1em;fill:currentcolor}a.svelte-52p8v6.svelte-52p8v6{color:#3c434a!important;font-weight:600!important}a.documentation.svelte-52p8v6.svelte-52p8v6{color:#3c434a!important;font-weight:500!important}.preview.svelte-52p8v6.svelte-52p8v6{align-items:flex-start;display:flex;gap:15px;margin-bottom:15px;max-width:360px;width:100%}.preview.svelte-52p8v6 img.svelte-52p8v6{border-radius:3px;box-shadow:0 0 2px 1px #f2f2f2}.info.svelte-52p8v6.svelte-52p8v6{font-size:.9em;margin-top:15px}.jetpack-boost-guide-popup.svelte-52p8v6.svelte-52p8v6{background-color:#fff;background:linear-gradient(159.87deg,#f6f6f4 7.24%,#f7f4ea 64.73%,#ddedd5 116.53%);border-radius:6px;color:#3c434a;font-family:sans-serif;margin-bottom:10px;min-width:320px;overflow:hidden;padding:25px;position:fixed;text-align:left;width:fit-content;z-index:90000}.title.svelte-52p8v6.svelte-52p8v6{font-weight:600;overflow-wrap:anywhere}.explanation.svelte-52p8v6.svelte-52p8v6{margin-top:5px}.description.svelte-52p8v6.svelte-52p8v6{font-size:.9em}.row.svelte-52p8v6.svelte-52p8v6{border-bottom:1px dotted #d9d9d9;display:flex;font-size:14px;gap:10px;justify-content:space-between;margin-bottom:5px}.row.svelte-52p8v6.svelte-52p8v6:last-child{border-bottom:none}.logo.svelte-52p8v6.svelte-52p8v6{bottom:-25px;opacity:.04;pointer-events:none;position:absolute;right:-50px;transform:rotate(15deg)}.guide.small .preview.svelte-52p8v6.svelte-52p8v6{gap:8px}.jetpack-boost-guide:not(.relative){left:0;position:absolute;top:0}.jetpack-boost-guide.relative{position:relative}.guide.svelte-1828btn{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif!important;font-size:15px!important;left:0;line-height:1.55;padding:20px;position:absolute;top:0;z-index:8000}.guide.small.svelte-1828btn{font-size:13px}.guide.micro.svelte-1828btn{font-size:13px;padding:10px}.guide.show.svelte-1828btn{z-index:9000}.previews.svelte-1828btn{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:15px;width:100%}.jetpack-boost-guide__backdrop{filter:brightness(.3);transition:opacity .2s ease-in-out,filter .2s ease-in-out}#jetpack-boost-guide-bar.ab-item.svelte-itog5b{align-items:center;display:flex;gap:10px}#jetpack-boost-guide-bar.ab-item.paused.svelte-itog5b svg{filter:grayscale(100%) contrast(1.7)}

package/build/index.d.ts

@@ -1,4 +1,22 @@
-import { Dimensions, MeasurableImage, Weight } from './MeasurableImage';
-import { getMeasurableImages } from './find-image-elements';
+import { Dimensions, FetchFn, MeasurableImage, Weight } from './MeasurableImage.js';
+import { TracksCallback } from './analytics.js';
+import { getMeasurableImages } from './find-image-elements.js';
+import AdminBarToggle from './ui/AdminBarToggle.svelte';
 export { MeasurableImage, getMeasurableImages };
 export type { Weight, Dimensions };
+type ImageGuideUIOptions = {
+    href: string;
+    tracksCallback: TracksCallback;
+    fetchFunction: FetchFn;
+};
+/**
+ * Set up the Image Guide UI in the given target parent.
+ *
+ * @param {string}   target              - The parent element to mount the UI in.
+ * @param {object}   args                - The arguments to pass to the UI.
+ * @param {string}   args.href           - The URL to the image guide.
+ * @param {Function} args.tracksCallback - The callback to call when tracking an event.
+ * @param {Function} args.fetchFunction  - The function to use to fetch the image weight.
+ * @return {object} The Svelte component instance.
+ */
+export declare function setupImageGuideUI(target: HTMLElement, { href, tracksCallback, fetchFunction }: ImageGuideUIOptions): AdminBarToggle;

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){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})()));
+class t{constructor(t,e,n=null){this.node=t,this.getURLCallback=e,this.fetch=null!=n?n:window.fetch.bind(window)}getURL(){return this.getURLCallback(this.node)}getSizeOnPage(){const{width:t,height:e}=this.node.getBoundingClientRect();return{width:Math.round(t),height:Math.round(e)}}async getFileSize(t){const[e,{width:n,height:i}]=await Promise.all([this.fetchFileWeight(t),this.fetchFileDimensions(t)]);return{width:n,height:i,weight:e}}getPotentialSavings(t,e){const n=this.getOversizedRatio(t,e);return n<=1?null:Math.round(t.weight-t.weight/n)}getExpectedSize(t){const e=window.devicePixelRatio||1;return{width:Math.round(t.width*e),height:Math.round(t.height*e)}}getOversizedRatio(t,e){if(0===t.width||0===t.height)return 1;const{width:n,height:i}=this.getExpectedSize(e);return 0===n||0===i?1:t.width*t.height/(n*i)}async fetchFileWeight(t){const e=await this.fetch(t);return e.ok?parseInt(e.headers.get("content-length"),10)/1024:(console.log(`Can't get image size for ${t} likely due to a CORS error.`),-1)}async fetchFileDimensions(t){const e=new Image;return e.src=t,new Promise(((t,n)=>{e.onload=()=>{t({width:Math.round(e.width),height:Math.round(e.height)})},e.onerror=()=>{n("Unable to load image.")}}))}async isImageTiny(){try{const t=65,e=await this.fetchFileDimensions(this.getURL());return e.width<t||e.height<t}catch(t){return!0}}}function e(t){return o(t.currentSrc)?t.currentSrc:o(t.src)?t.src:null}function n(t){const e=getComputedStyle(t).backgroundImage.match(/url\(\s*(['"])(.*?)\1\s*\)/i),n=window.location.href.split("#")[0];return e&&e[2]&&e[2]!==n&&o(e[2])?e[2]:null}async function i(i,o=null){return function(t){return t.filter((t=>t instanceof HTMLImageElement||t instanceof HTMLElement&&"none"!==getComputedStyle(t).backgroundImage))}(i).map((i=>i instanceof HTMLImageElement?new t(i,e,o):i instanceof HTMLElement&&n(i)?new t(i,n):null)).filter((t=>null!==t))}function o(t){if(t.startsWith("/")){return!t.split("?")[0].endsWith(".svg")}try{const e=new URL(t);return"http:"===e.protocol||"https:"===e.protocol}catch(t){return!1}}function r(){}const s=t=>t;function c(t){return t()}function l(){return Object.create(null)}function a(t){t.forEach(c)}function u(t){return"function"==typeof t}function d(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}let h;function f(t,e){return h||(h=document.createElement("a")),h.href=e,t===h.href}function p(t,...e){if(null==t)return r;const n=t.subscribe(...e);return n.unsubscribe?()=>n.unsubscribe():n}function g(t){let e;return p(t,(t=>e=t))(),e}function m(t,e,n){t.$$.on_destroy.push(p(e,n))}function $(t,e,n,i){return t[1]&&i?function(t,e){for(const n in e)t[n]=e[n];return t}(n.ctx.slice(),t[1](i(e))):n.ctx}function v(t){const e="string"==typeof t&&t.match(/^\s*(-?[\d.]+)([^\s]*)\s*$/);return e?[parseFloat(e[1]),e[2]||"px"]:[t,"px"]}const w="undefined"!=typeof window;let b=w?()=>window.performance.now():()=>Date.now(),y=w?t=>requestAnimationFrame(t):r;const x=new Set;function k(t){x.forEach((e=>{e.c(t)||(x.delete(e),e.f())})),0!==x.size&&y(k)}function _(t){let e;return 0===x.size&&y(k),{promise:new Promise((n=>{x.add(e={c:t,f:n})})),abort(){x.delete(e)}}}function z(t,e){t.appendChild(e)}function S(t){if(!t)return document;const e=t.getRootNode?t.getRootNode():t.ownerDocument;return e&&e.host?e:t.ownerDocument}function C(t){const e=P("style");return function(t,e){z(t.head||t,e),e.sheet}(S(t),e),e.sheet}function E(t,e,n){t.insertBefore(e,n||null)}function L(t){t.parentNode&&t.parentNode.removeChild(t)}function P(t){return document.createElement(t)}function T(t){return document.createElementNS("http://www.w3.org/2000/svg",t)}function M(t){return document.createTextNode(t)}function j(){return M(" ")}function O(){return M("")}function R(t,e,n,i){return t.addEventListener(e,n,i),()=>t.removeEventListener(e,n,i)}function I(t,e,n){null==n?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n)}function U(t,e){e=""+e,t.data!==e&&(t.data=e)}function F(t,e,n,i){null===n?t.style.removeProperty(e):t.style.setProperty(e,n,i?"important":"")}function A(t,e,n){t.classList[n?"add":"remove"](e)}function H(t,e,{bubbles:n=!1,cancelable:i=!1}={}){const o=document.createEvent("CustomEvent");return o.initCustomEvent(t,n,i,e),o}const B=new Map;let N,D=0;function W(t,e,n,i,o,r,s,c=0){const l=16.666/i;let a="{\n";for(let t=0;t<=1;t+=l){const i=e+(n-e)*r(t);a+=100*t+`%{${s(i,1-i)}}\n`}const u=a+`100% {${s(n,1-n)}}\n}`,d=`__svelte_${function(t){let e=5381,n=t.length;for(;n--;)e=(e<<5)-e^t.charCodeAt(n);return e>>>0}(u)}_${c}`,h=S(t),{stylesheet:f,rules:p}=B.get(h)||function(t,e){const n={stylesheet:C(e),rules:{}};return B.set(t,n),n}(h,t);p[d]||(p[d]=!0,f.insertRule(`@keyframes ${d} ${u}`,f.cssRules.length));const g=t.style.animation||"";return t.style.animation=`${g?`${g}, `:""}${d} ${i}ms linear ${o}ms 1 both`,D+=1,d}function V(t,e){const n=(t.style.animation||"").split(", "),i=n.filter(e?t=>t.indexOf(e)<0:t=>-1===t.indexOf("__svelte")),o=n.length-i.length;o&&(t.style.animation=i.join(", "),D-=o,D||y((()=>{D||(B.forEach((t=>{const{ownerNode:e}=t.stylesheet;e&&L(e)})),B.clear())})))}function G(t){N=t}function q(){if(!N)throw new Error("Function called outside component initialization");return N}function Z(t){q().$$.on_mount.push(t)}function K(t,e){const n=t.$$.callbacks[e.type];n&&n.slice().forEach((t=>t.call(this,e)))}const X=[],Y=[];let J=[];const Q=[],tt=Promise.resolve();let et=!1;function nt(t){J.push(t)}const it=new Set;let ot,rt=0;function st(){if(0!==rt)return;const t=N;do{try{for(;rt<X.length;){const t=X[rt];rt++,G(t),ct(t.$$)}}catch(t){throw X.length=0,rt=0,t}for(G(null),X.length=0,rt=0;Y.length;)Y.pop()();for(let t=0;t<J.length;t+=1){const e=J[t];it.has(e)||(it.add(e),e())}J.length=0}while(X.length);for(;Q.length;)Q.pop()();et=!1,it.clear(),G(t)}function ct(t){if(null!==t.fragment){t.update(),a(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(nt)}}function lt(){return ot||(ot=Promise.resolve(),ot.then((()=>{ot=null}))),ot}function at(t,e,n){t.dispatchEvent(H(`${e?"intro":"outro"}${n}`))}const ut=new Set;let dt;function ht(){dt={r:0,c:[],p:dt}}function ft(){dt.r||a(dt.c),dt=dt.p}function pt(t,e){t&&t.i&&(ut.delete(t),t.i(e))}function gt(t,e,n,i){if(t&&t.o){if(ut.has(t))return;ut.add(t),dt.c.push((()=>{ut.delete(t),i&&(n&&t.d(1),i())})),t.o(e)}else i&&i()}const mt={duration:0};function $t(t,e,n){const i={direction:"in"};let o,c,l=e(t,n,i),a=!1,d=0;function h(){o&&V(t,o)}function f(){const{delay:e=0,duration:n=300,easing:i=s,tick:u=r,css:f}=l||mt;f&&(o=W(t,0,1,n,e,i,f,d++)),u(0,1);const p=b()+e,g=p+n;c&&c.abort(),a=!0,nt((()=>at(t,!0,"start"))),c=_((e=>{if(a){if(e>=g)return u(1,0),at(t,!0,"end"),h(),a=!1;if(e>=p){const t=i((e-p)/n);u(t,1-t)}}return a}))}let p=!1;return{start(){p||(p=!0,V(t),u(l)?(l=l(i),lt().then(f)):f())},invalidate(){p=!1},end(){a&&(h(),a=!1)}}}function vt(t,e,n,i){const o={direction:"both"};let c=e(t,n,o),l=i?0:1,d=null,h=null,f=null;function p(){f&&V(t,f)}function g(t,e){const n=t.b-l;return e*=Math.abs(n),{a:l,b:t.b,d:n,duration:e,start:t.start,end:t.start+e,group:t.group}}function m(e){const{delay:n=0,duration:i=300,easing:o=s,tick:u=r,css:m}=c||mt,$={start:b()+n,b:e};e||($.group=dt,dt.r+=1),d||h?h=$:(m&&(p(),f=W(t,l,e,i,n,o,m)),e&&u(0,1),d=g($,i),nt((()=>at(t,e,"start"))),_((e=>{if(h&&e>h.start&&(d=g(h,i),h=null,at(t,d.b,"start"),m&&(p(),f=W(t,l,d.b,d.duration,0,o,c.css))),d)if(e>=d.end)u(l=d.b,1-l),at(t,d.b,"end"),h||(d.b?p():--d.group.r||a(d.group.c)),d=null;else if(e>=d.start){const t=e-d.start;l=d.a+d.d*o(t/d.duration),u(l,1-l)}return!(!d&&!h)})))}return{run(t){u(c)?lt().then((()=>{c=c(o),m(t)})):m(t)},end(){p(),d=h=null}}}const wt="undefined"!=typeof window?window:"undefined"!=typeof globalThis?globalThis:global;function bt(t){t&&t.c()}function yt(t,e,n,i){const{fragment:o,after_update:r}=t.$$;o&&o.m(e,n),i||nt((()=>{const e=t.$$.on_mount.map(c).filter(u);t.$$.on_destroy?t.$$.on_destroy.push(...e):a(e),t.$$.on_mount=[]})),r.forEach(nt)}function xt(t,e){const n=t.$$;null!==n.fragment&&(!function(t){const e=[],n=[];J.forEach((i=>-1===t.indexOf(i)?e.push(i):n.push(i))),n.forEach((t=>t())),J=e}(n.after_update),a(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}function kt(t,e){-1===t.$$.dirty[0]&&(X.push(t),et||(et=!0,tt.then(st)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function _t(t,e,n,i,o,s,c,u=[-1]){const d=N;G(t);const h=t.$$={fragment:null,ctx:[],props:s,update:r,not_equal:o,bound:l(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(d?d.$$.context:[])),callbacks:l(),dirty:u,skip_bound:!1,root:e.target||d.$$.root};c&&c(h.root);let f=!1;if(h.ctx=n?n(t,e.props||{},((e,n,...i)=>{const r=i.length?i[0]:n;return h.ctx&&o(h.ctx[e],h.ctx[e]=r)&&(!h.skip_bound&&h.bound[e]&&h.bound[e](r),f&&kt(t,e)),n})):[],h.update(),f=!0,a(h.before_update),h.fragment=!!i&&i(h.ctx),e.target){if(e.hydrate){const t=function(t){return Array.from(t.childNodes)}(e.target);h.fragment&&h.fragment.l(t),t.forEach(L)}else h.fragment&&h.fragment.c();e.intro&&pt(t.$$.fragment),yt(t,e.target,e.anchor,e.customElement),st()}G(d)}class zt{$destroy(){xt(this,1),this.$destroy=r}$on(t,e){if(!u(e))return r;const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(e),()=>{const t=n.indexOf(e);-1!==t&&n.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}const St=[];function Ct(t,e=r){let n;const i=new Set;function o(e){if(d(t,e)&&(t=e,n)){const e=!St.length;for(const e of i)e[1](),St.push(e,t);if(e){for(let t=0;t<St.length;t+=2)St[t][0](St[t+1]);St.length=0}}}return{set:o,update:function(e){o(e(t))},subscribe:function(s,c=r){const l=[s,c];return i.add(l),1===i.size&&(n=e(o)||r),s(t),()=>{i.delete(l),0===i.size&&n&&(n(),n=null)}}}}function Et(t,e,n){const i=!Array.isArray(t),o=i?[t]:t,s=e.length<2;return c=t=>{let n=!1;const c=[];let l=0,d=r;const h=()=>{if(l)return;d();const n=e(i?c[0]:c,t);s?t(n):d=u(n)?n:r},f=o.map(((t,e)=>p(t,(t=>{c[e]=t,l&=~(1<<e),n&&h()}),(()=>{l|=1<<e}))));return n=!0,h(),function(){a(f),d(),n=!1}},{subscribe:Ct(n,c).subscribe};var c}const Lt="jetpack-boost-guide",Pt={active:"Active",paused:"Paused"};let Tt=localStorage.getItem(Lt);Tt&&Pt[Tt]||(localStorage.setItem(Lt,"Active"),Tt="active");const{set:Mt,update:jt,subscribe:Ot}=Ct(Tt);Ot((t=>{localStorage.setItem(Lt,t)}));const Rt={subscribe:Ot,set:Mt,update:jt,cycle:()=>{jt((t=>{const e=Object.keys(Pt),n=e.indexOf(t);return e[(n+1)%e.length]}))}},It=Et(Rt,(t=>Pt[t]));class Ut{static setTracksCallback(t){Ut.tracksCallback=t}static async trackImageOutcome(t){return new Promise((e=>{t.loading.subscribe((n=>{if(!n){const n=g(t.oversizedRatio),i=function(t){return t>4?"red":t>2.5?"yellow":"green"}(n),o=g(t.fileSize),r=g(t.sizeOnPage),s=g(t.expectedSize),c=g(t.potentialSavings),l=g(t.url),a={severity:i,oversized_ratio:n,file_weight:o.weight,file_width:o.width,file_height:o.height,size_on_page_width:r.width,size_on_page_height:r.height,expected_width:s.width,expected_height:s.height,potential_savings:c,image_url:l};Ut.tracksCallback("image_guide_image_outcome",{...a,window_width:window.innerWidth,window_height:window.innerHeight,device_pixel_ratio:window.devicePixelRatio}),e(a)}}))}))}static async trackPage(t){if(!t.length||Ut.trackingComplete)return;Ut.trackingComplete=!0;const e=t.map(Ut.trackImageOutcome),n=await Promise.all(e),i=n.reduce(((t,e)=>t+(e.potential_savings||0)),0);Ut.tracksCallback("image_guide_page_outcome",{total_potential_savings:i,red_severity_count:n.filter((t=>"red"===t.severity)).length,yellow_severity_count:n.filter((t=>"yellow"===t.severity)).length,green_severity_count:n.filter((t=>"green"===t.severity)).length,window_width:window.innerWidth,window_height:window.innerHeight,device_pixel_ratio:window.devicePixelRatio})}static trackInitialState(){Ut.tracksCallback("image_guide_initial_ui_state",{image_guide_state:g(Rt)})}static trackUIStateChange(){Ut.tracksCallback("image_guide_ui_state_change",{image_guide_state:g(Rt)})}}Ut.trackingComplete=!1;class Ft{constructor(t){this.loading=Ct(!0),this.currentSrc="",this.image=t,this.node=t.node;this.url=Ct(t.getURL()),this.fileSize=Ct({width:0,height:0,weight:0}),this.sizeOnPage=Ct({width:0,height:0}),this.potentialSavings=this.derivePotentialSavings(),this.oversizedRatio=this.deriveOversizedRatio(),this.expectedSize=this.deriveExpectedSize()}deriveOversizedRatio(){return Et([this.fileSize,this.sizeOnPage],(([t,e])=>this.image.getOversizedRatio(t,e)))}deriveExpectedSize(){return Et(this.sizeOnPage,(t=>this.image.getExpectedSize(t)))}derivePotentialSavings(){return Et([this.fileSize,this.sizeOnPage],(([t,e])=>this.image.getPotentialSavings(t,e)))}async updateDimensions(){const t=this.image.getSizeOnPage();this.sizeOnPage.set(t),await this.maybeUpdateWeight()}async maybeUpdateWeight(){if(this.image.getURL()===this.currentSrc)return;let t;this.loading.set(!0),this.currentSrc=this.image.getURL();try{t=await this.image.getFileSize(this.currentSrc)}catch(e){t={weight:-1,height:-1,width:-1}}this.url.set(this.currentSrc),this.fileSize.set(t),this.loading.set(!1)}}function At(t){const e=1.70158;return--t*t*((e+1)*t+e)+1}function Ht(t){const e=t-1;return e*e*e+1}function Bt(t,{delay:e=0,duration:n=400,easing:i=s}={}){const o=+getComputedStyle(t).opacity;return{delay:e,duration:n,easing:i,css:t=>"opacity: "+t*o}}function Nt(t,{delay:e=0,duration:n=400,easing:i=Ht,x:o=0,y:r=0,opacity:s=0}={}){const c=getComputedStyle(t),l=+c.opacity,a="none"===c.transform?"":c.transform,u=l*(1-s),[d,h]=v(o),[f,p]=v(r);return{delay:e,duration:n,easing:i,css:(t,e)=>`\n\t\t\ttransform: ${a} translate(${(1-t)*d}${h}, ${(1-t)*f}${p});\n\t\t\topacity: ${l-u*e}`}}function Dt(t){let e,n,i,o,s;return{c(){e=P("div"),n=T("svg"),i=T("path"),o=T("path"),s=T("path"),I(i,"d","M55.4 107.8C84.3397 107.8 107.8 84.3397 107.8 55.4C107.8 26.4603 84.3397 3 55.4 3C26.4603 3 3 26.4603 3 55.4C3 84.3397 26.4603 107.8 55.4 107.8Z"),I(i,"fill",t[1]),I(o,"d","M58 46.6V97.4L84.2 46.6H58Z"),I(o,"fill","white"),I(s,"d","M52.7 64.1V13.4L26.6 64.1H52.7Z"),I(s,"fill","white"),I(n,"viewBox","0 0 110 110"),I(n,"fill","none"),I(n,"xmlns","http://www.w3.org/2000/svg"),F(e,"width",t[0]+"px"),F(e,"height",t[0]+"px"),I(e,"class","svelte-f6jc8")},m(t,r){E(t,e,r),z(e,n),z(n,i),z(n,o),z(n,s)},p(t,[n]){2&n&&I(i,"fill",t[1]),1&n&&F(e,"width",t[0]+"px"),1&n&&F(e,"height",t[0]+"px")},i:r,o:r,d(t){t&&L(e)}}}function Wt(t,e,n){let{size:i=16}=e,{bg:o="#069E08"}=e;return t.$$set=t=>{"size"in t&&n(0,i=t.size),"bg"in t&&n(1,o=t.bg)},[i,o]}class Vt extends zt{constructor(t){super(),_t(this,t,Wt,Dt,d,{size:0,bg:1})}}function Gt(t){let e,n,i,o;return n=new Vt({props:{size:12,bg:"transparent"}}),{c(){e=P("div"),bt(n.$$.fragment),I(e,"class","spinner svelte-2eb8gc")},m(t,i){E(t,e,i),yt(n,e,null),o=!0},p:r,i(t){o||(pt(n.$$.fragment,t),i&&i.end(1),o=!0)},o(t){gt(n.$$.fragment,t),i=function(t,e,n){const i={direction:"out"};let o,c=e(t,n,i),l=!0;const d=dt;function h(){const{delay:e=0,duration:n=300,easing:i=s,tick:u=r,css:h}=c||mt;h&&(o=W(t,1,0,n,e,i,h));const f=b()+e,p=f+n;nt((()=>at(t,!1,"start"))),_((e=>{if(l){if(e>=p)return u(0,1),at(t,!1,"end"),--d.r||a(d.c),!1;if(e>=f){const t=i((e-f)/n);u(1-t,t)}}return l}))}return d.r+=1,u(c)?lt().then((()=>{c=c(i),h()})):h(),{end(e){e&&c.tick&&c.tick(1,0),l&&(o&&V(t,o),l=!1)}}}(e,Bt,{duration:300}),o=!1},d(t){t&&L(e),xt(n),t&&i&&i.end()}}}class qt extends zt{constructor(t){super(),_t(this,t,null,Gt,d,{})}}function Zt(t){let e,n;return{c(){e=T("svg"),n=T("path"),I(n,"stroke-linecap","round"),I(n,"stroke-linejoin","round"),I(n,"stroke-width","2"),I(n,"d","M5 13l4 4L19 7"),I(e,"class","w-6 h-6 svelte-jkeb2"),I(e,"fill","none"),I(e,"stroke","white"),I(e,"width","18"),I(e,"height","18"),I(e,"viewBox","0 0 24 24"),I(e,"xmlns","http://www.w3.org/2000/svg")},m(t,i){E(t,e,i),z(e,n)},p:r,i:r,o:r,d(t){t&&L(e)}}}class Kt extends zt{constructor(t){super(),_t(this,t,null,Zt,d,{})}}function Xt(t){let e,n,i;return n=new qt({}),{c(){e=P("div"),bt(n.$$.fragment),I(e,"class","bubble-inner svelte-18vhu7m")},m(t,o){E(t,e,o),yt(n,e,null),i=!0},p:r,i(t){i||(pt(n.$$.fragment,t),i=!0)},o(t){gt(n.$$.fragment,t),i=!1},d(t){t&&L(e),xt(n)}}}function Yt(t){let e,n,i,o,r,s;const c=[te,Qt,Jt],l=[];function a(t,e){return t[0]>9?0:t[0]>.99?1:2}return i=a(t),o=l[i]=c[i](t),{c(){e=P("div"),n=P("div"),o.c(),I(n,"class","label"),I(e,"class","bubble-inner svelte-18vhu7m")},m(t,o){E(t,e,o),z(e,n),l[i].m(n,null),s=!0},p(t,e){let r=i;i=a(t),i===r?l[i].p(t,e):(ht(),gt(l[r],1,1,(()=>{l[r]=null})),ft(),o=l[i],o?o.p(t,e):(o=l[i]=c[i](t),o.c()),pt(o,1),o.m(n,null))},i(t){s||(pt(o),r||nt((()=>{r=$t(n,Bt,{delay:200,duration:300}),r.start()})),s=!0)},o(t){gt(o),s=!1},d(t){t&&L(e),l[i].d()}}}function Jt(t){let e,n;return{c(){e=P("span"),e.textContent="<",n=M(" 1x"),F(e,"font-size","0.75em")},m(t,i){E(t,e,i),E(t,n,i)},p:r,i:r,o:r,d(t){t&&L(e),t&&L(n)}}}function Qt(t){let e,n,i,o;const r=[ne,ee],s=[];function c(t,e){return"normal"===t[1]?0:1}return e=c(t),n=s[e]=r[e](t),{c(){n.c(),i=O()},m(t,n){s[e].m(t,n),E(t,i,n),o=!0},p(t,o){let l=e;e=c(t),e===l?s[e].p(t,o):(ht(),gt(s[l],1,1,(()=>{s[l]=null})),ft(),n=s[e],n?n.p(t,o):(n=s[e]=r[e](t),n.c()),pt(n,1),n.m(i.parentNode,i))},i(t){o||(pt(n),o=!0)},o(t){gt(n),o=!1},d(t){s[e].d(t),t&&L(i)}}}function te(t){let e,n,i=Math.floor(t[0])+"";return{c(){e=M(i),n=M("x")},m(t,i){E(t,e,i),E(t,n,i)},p(t,n){1&n&&i!==(i=Math.floor(t[0])+"")&&U(e,i)},i:r,o:r,d(t){t&&L(e),t&&L(n)}}}function ee(t){let e,n,i=t[0].toFixed(1)+"";return{c(){e=M(i),n=M("x")},m(t,i){E(t,e,i),E(t,n,i)},p(t,n){1&n&&i!==(i=t[0].toFixed(1)+"")&&U(e,i)},i:r,o:r,d(t){t&&L(e),t&&L(n)}}}function ne(t){let e,n;return e=new Kt({}),{c(){bt(e.$$.fragment)},m(t,i){yt(e,t,i),n=!0},p:r,i(t){n||(pt(e.$$.fragment,t),n=!0)},o(t){gt(e.$$.fragment,t),n=!1},d(t){xt(e,t)}}}function ie(t){let e,n,i,o,r,s,c,l,a;const u=[Yt,Xt],d=[];function h(t,e){return!1===t[3]?0:1}return i=h(t),o=d[i]=u[i](t),{c(){e=P("div"),n=P("div"),o.c(),I(n,"class","bubble svelte-18vhu7m"),I(e,"class",r="interaction-area "+t[1]+" svelte-18vhu7m")},m(o,r){E(o,e,r),z(e,n),d[i].m(n,null),t[10](e),c=!0,l||(a=R(e,"mouseenter",t[7]),l=!0)},p(s,[l]){let a=i;i=h(t=s),i===a?d[i].p(t,l):(ht(),gt(d[a],1,1,(()=>{d[a]=null})),ft(),o=d[i],o?o.p(t,l):(o=d[i]=u[i](t),o.c()),pt(o,1),o.m(n,null)),(!c||2&l&&r!==(r="interaction-area "+t[1]+" svelte-18vhu7m"))&&I(e,"class",r)},i(n){c||(pt(o),nt((()=>{c&&(s||(s=vt(e,Nt,t[6],!0)),s.run(1))})),c=!0)},o(n){gt(o),s||(s=vt(e,Nt,t[6],!1)),s.run(0),c=!1},d(n){n&&L(e),d[i].d(),t[10](null),n&&s&&s.end(),l=!1,a()}}}function oe(t,e,n){let i,o,r,{index:s}=e,{store:c}=e;const l=c.oversizedRatio;m(t,l,(t=>n(0,i=t)));const a=c.loading;m(t,a,(t=>n(3,o=t)));const u={delay:150+50*s,duration:250,y:2,easing:At};let d;const h=function(){const t=q();return(e,n,{cancelable:i=!1}={})=>{const o=t.$$.callbacks[e];if(o){const r=H(e,n,{cancelable:i});return o.slice().forEach((e=>{e.call(t,r)})),!r.defaultPrevented}return!0}}();return t.$$set=t=>{"index"in t&&n(8,s=t.index),"store"in t&&n(9,c=t.store)},t.$$.update=()=>{1&t.$$.dirty&&n(1,r=i>4?"high":i>2.5?"medium":"normal")},[i,r,d,o,l,a,u,function(){const t=d.getBoundingClientRect();h("hover",{index:s,position:{top:t.top+t.height+10,left:t.left}})},s,c,function(t){Y[t?"unshift":"push"]((()=>{d=t,n(2,d)}))}]}class re extends zt{constructor(t){super(),_t(this,t,oe,ie,d,{index:8,store:9})}}function se(t){let e,n;const i=t[2].default,o=function(t,e,n,i){if(t){const o=$(t,e,n,i);return t[0](o)}}(i,t,t[1],null);return{c(){e=P("div"),o&&o.c(),I(e,"class","jetpack-boost-guide-portal")},m(i,r){E(i,e,r),o&&o.m(e,null),t[3](e),n=!0},p(t,[e]){o&&o.p&&(!n||2&e)&&function(t,e,n,i,o,r){if(o){const s=$(e,n,i,r);t.p(s,o)}}(o,i,t,t[1],n?function(t,e,n,i){if(t[2]&&i){const o=t[2](i(n));if(void 0===e.dirty)return o;if("object"==typeof o){const t=[],n=Math.max(e.dirty.length,o.length);for(let i=0;i<n;i+=1)t[i]=e.dirty[i]|o[i];return t}return e.dirty|o}return e.dirty}(i,t[1],e,null):function(t){if(t.ctx.length>32){const e=[],n=t.ctx.length/32;for(let t=0;t<n;t++)e[t]=-1;return e}return-1}(t[1]),null)},i(t){n||(pt(o,t),n=!0)},o(t){gt(o,t),n=!1},d(n){n&&L(e),o&&o.d(n),t[3](null)}}}function ce(t,e,n){let i,{$$slots:o={},$$scope:r}=e;var s;return Z((()=>{document.body.appendChild(i)})),s=()=>{document.body.removeChild(i)},q().$$.on_destroy.push(s),t.$$set=t=>{"$$scope"in t&&n(1,r=t.$$scope)},[i,r,o,function(t){Y[t?"unshift":"push"]((()=>{i=t,n(0,i)}))}]}class le extends zt{constructor(t){super(),_t(this,t,ce,se,d,{})}}function ae(t){let e,n;return{c(){e=T("svg"),n=T("path"),I(n,"d","M18.2 17c0 .7-.6 1.2-1.2 1.2H7c-.7 0-1.2-.6-1.2-1.2V7c0-.7.6-1.2 1.2-1.2h3.2V4.2H7C5.5 4.2 4.2 5.5 4.2 7v10c0 1.5 1.2 2.8 2.8 2.8h10c1.5 0 2.8-1.2 2.8-2.8v-3.6h-1.5V17zM14.9 3v1.5h3.7l-6.4 6.4 1.1 1.1 6.4-6.4v3.7h1.5V3h-6.3z"),I(e,"xmlns","http://www.w3.org/2000/svg"),I(e,"viewBox","0 0 24 24"),I(e,"class","svelte-1g2gjwn")},m(t,i){E(t,e,i),z(e,n)},p:r,i:r,o:r,d(t){t&&L(e)}}}class ue extends zt{constructor(t){super(),_t(this,t,null,ae,d,{})}}const{window:de}=wt;function he(t){let e,n,i,o,r=t[29]+"";return{c(){e=P("div"),n=M("The image file is "),i=M(r),o=M("x smaller than expected on this screen. This might be\n\t\t\t\t\t\tfine, but you may want to check if the image appears blurry."),I(e,"class","explanation svelte-52p8v6")},m(t,r){E(t,e,r),z(e,n),z(e,i),z(e,o)},p(t,e){8&e&&r!==(r=t[29]+"")&&U(i,r)},d(t){t&&L(e)}}}function fe(t){let e,n,i=t[6]>1&&me(t);return{c(){e=P("div"),n=M("The image size is very close to the size it appears in the browser.\n\t\t\t\t\t\t"),i&&i.c(),I(e,"class","explanation svelte-52p8v6")},m(t,o){E(t,e,o),z(e,n),i&&i.m(e,null)},p(t,n){t[6]>1?i?i.p(t,n):(i=me(t),i.c(),i.m(e,null)):i&&(i.d(1),i=null)},d(t){t&&L(e),i&&i.d()}}}function pe(t){let e;return{c(){e=P("div"),e.textContent="The image is exactly the correct size for this screen.",I(e,"class","explanation svelte-52p8v6")},m(t,n){E(t,e,n)},p:r,d(t){t&&L(e)}}}function ge(t){let e,n,i,o,r,s,c=t[4].weight>450&&$e();return{c(){e=P("div"),n=M("The image loaded is "),i=P("strong"),o=M(t[6]),r=M("x"),s=M(" larger than it appears in the browser.\n\t\t\t\t\t\t"),c&&c.c(),I(e,"class","explanation svelte-52p8v6")},m(t,l){E(t,e,l),z(e,n),z(e,i),z(i,o),z(i,r),z(e,s),c&&c.m(e,null)},p(t,n){64&n&&U(o,t[6]),t[4].weight>450?c||(c=$e(),c.c(),c.m(e,null)):c&&(c.d(1),c=null)},d(t){t&&L(e),c&&c.d()}}}function me(t){let e,n,i,o,r;return{c(){e=M("Because there are various screen sizes, it's okay for the image to be\n\t\t\t\t\t\t\t"),n=P("strong"),i=M(t[6]),o=M("x"),r=M(" than it appears on the page.")},m(t,s){E(t,e,s),E(t,n,s),z(n,i),z(n,o),E(t,r,s)},p(t,e){64&e&&U(i,t[6])},d(t){t&&L(e),t&&L(n),t&&L(r)}}}function $e(t){let e;return{c(){e=M("Try using a smaller image or reduce the file size by compressing it.")},m(t,n){E(t,e,n)},d(t){t&&L(e)}}}function ve(t){let e,n;return{c(){e=P("img"),f(e.src,n=t[5])||I(e,"src",n),I(e,"alt",t[8]),F(e,"width",t[2]+"px"),F(e,"height",t[7]+"px"),I(e,"width",t[2]),I(e,"height",t[7]),I(e,"class","svelte-52p8v6")},m(t,n){E(t,e,n)},p(t,i){32&i&&!f(e.src,n=t[5])&&I(e,"src",n),256&i&&I(e,"alt",t[8]),4&i&&F(e,"width",t[2]+"px"),128&i&&F(e,"height",t[7]+"px"),4&i&&I(e,"width",t[2]),128&i&&I(e,"height",t[7])},d(t){t&&L(e)}}}function we(t){let e;function n(t,e){return t[16]?xe:ye}let i=n(t),o=i(t);return{c(){e=P("div"),o.c(),I(e,"class","value")},m(t,n){E(t,e,n),o.m(e,null)},p(t,r){i!==(i=n(t))&&(o.d(1),o=i(t),o&&(o.c(),o.m(e,null)))},d(t){t&&L(e),o.d()}}}function be(t){let e,n,i,o,r=t[4].width+"",s=t[4].height+"";return{c(){e=P("div"),n=M(r),i=M(" x "),o=M(s),I(e,"class","value")},m(t,r){E(t,e,r),z(e,n),z(e,i),z(e,o)},p(t,e){16&e&&r!==(r=t[4].width+"")&&U(n,r),16&e&&s!==(s=t[4].height+"")&&U(o,s)},d(t){t&&L(e)}}}function ye(t){let e;return{c(){e=P("em"),e.textContent="Unknown"},m(t,n){E(t,e,n)},d(t){t&&L(e)}}}function xe(t){let e;return{c(){e=M("Loading...")},m(t,n){E(t,e,n)},d(t){t&&L(e)}}}function ke(t){let e;return{c(){e=P("em"),e.textContent="Unknown"},m(t,n){E(t,e,n)},p:r,d(t){t&&L(e)}}}function _e(t){let e;return{c(){e=M("Loading...")},m(t,n){E(t,e,n)},p:r,d(t){t&&L(e)}}}function ze(t){let e,n,i=Math.round(t[4].weight)+"";return{c(){e=M(i),n=M(" KB")},m(t,i){E(t,e,i),E(t,n,i)},p(t,n){16&n&&i!==(i=Math.round(t[4].weight)+"")&&U(e,i)},d(t){t&&L(e),t&&L(n)}}}function Se(t){let e;return{c(){e=P("em"),e.textContent="N/A"},m(t,n){E(t,e,n)},p:r,d(t){t&&L(e)}}}function Ce(t){let e;return{c(){e=M("Loading...")},m(t,n){E(t,e,n)},p:r,d(t){t&&L(e)}}}function Ee(t){let e,n,i;return{c(){e=P("strong"),n=M(t[19]),i=M(" KB")},m(t,o){E(t,e,o),z(e,n),z(e,i)},p(t,e){524288&e&&U(n,t[19])},d(t){t&&L(e)}}}function Le(t){let e,n,i,o,r,s,c,l,a,u,d,h,f,p,g,m,$,v,w,b,y,x,k,_,S,C,T,O,A,H,B,N,D,W,V,G,q,Z,K,X,Y,J,Q,tt,et,it,ot,rt,st,ct,lt,at=t[17].width+"",ut=t[17].height+"",dt=t[18].width+"",ht=t[18].height+"",ft=`${t[0].top}px`,mt=`${t[0].left}px`;function vt(t,e){return t[6]>=1.3?ge:1===t[6]?pe:t[6]>=.99&&t[6]<1.3?fe:he}function wt(t,e){return e===he?function(t){const e=t.slice(),n=Me(1/e[3]);return e[29]=n,e}(t):t}i=new Vt({props:{size:250}});let kt=vt(t),_t=kt(wt(t,kt)),zt=t[5]&&ve(t);function St(t,e){return t[4].width>0&&t[4].height>0?be:we}let Ct=St(t),Et=Ct(t);function Lt(t,e){return t[4].weight>0?ze:t[16]?_e:ke}let Pt=Lt(t),Tt=Pt(t);function Mt(t,e){return t[19]>0?Ee:t[16]?Ce:Se}let jt=Mt(t),Ot=jt(t);return ot=new ue({}),{c(){e=P("div"),n=P("div"),bt(i.$$.fragment),o=j(),r=P("div"),s=P("div"),c=P("div"),l=P("a"),a=M(t[8]),u=j(),_t.c(),d=j(),zt&&zt.c(),h=j(),f=P("div"),p=P("div"),g=P("div"),g.textContent="Image File Dimensions",m=j(),Et.c(),$=j(),v=P("div"),w=P("div"),w.textContent="Expected Dimensions",b=j(),y=P("div"),x=M(at),k=M(" x "),_=M(ut),S=j(),C=P("div"),T=P("div"),T.textContent="Size on screen",O=j(),A=P("div"),H=M(dt),B=M(" x "),N=M(ht),D=j(),W=P("div"),V=P("div"),V.textContent="Image Size",G=j(),q=P("div"),Tt.c(),Z=j(),K=P("div"),X=P("div"),X.textContent="Potential savings",Y=j(),J=P("div"),Ot.c(),Q=j(),tt=P("div"),et=P("a"),it=M("Learn how to improve site speed by optimizing images "),bt(ot.$$.fragment),I(n,"class","logo svelte-52p8v6"),I(l,"href",t[5]),I(l,"target","_blank noreferrer"),I(l,"class","svelte-52p8v6"),I(c,"class","title svelte-52p8v6"),I(s,"class","description svelte-52p8v6"),I(r,"class","preview svelte-52p8v6"),I(g,"class","label"),I(p,"class","row svelte-52p8v6"),I(w,"class","label"),I(y,"class","value"),I(v,"class","row svelte-52p8v6"),I(T,"class","label"),I(A,"class","value"),I(C,"class","row svelte-52p8v6"),I(V,"class","label"),I(q,"class","value"),I(W,"class","row svelte-52p8v6"),I(X,"class","label"),I(J,"class","value"),I(K,"class","row svelte-52p8v6"),I(et,"class","documentation svelte-52p8v6"),I(et,"href",Te),I(et,"target","_blank noreferrer"),I(tt,"class","info svelte-52p8v6"),I(f,"class","meta"),I(e,"class","jetpack-boost-guide-popup keep-guide-open svelte-52p8v6"),F(e,"top",ft),F(e,"left",mt)},m(L,P){E(L,e,P),z(e,n),yt(i,n,null),z(e,o),z(e,r),z(r,s),z(s,c),z(c,l),z(l,a),z(s,u),_t.m(s,null),z(r,d),zt&&zt.m(r,null),z(e,h),z(e,f),z(f,p),z(p,g),z(p,m),Et.m(p,null),z(f,$),z(f,v),z(v,w),z(v,b),z(v,y),z(y,x),z(y,k),z(y,_),z(f,S),z(f,C),z(C,T),z(C,O),z(C,A),z(A,H),z(A,B),z(A,N),z(f,D),z(f,W),z(W,V),z(W,G),z(W,q),Tt.m(q,null),z(f,Z),z(f,K),z(K,X),z(K,Y),z(K,J),Ot.m(J,null),z(f,Q),z(f,tt),z(tt,et),z(et,it),yt(ot,et,null),st=!0,ct||(lt=R(e,"mouseleave",t[22]),ct=!0)},p(n,i){t=n,(!st||256&i)&&U(a,t[8]),(!st||32&i)&&I(l,"href",t[5]),kt===(kt=vt(t))&&_t?_t.p(wt(t,kt),i):(_t.d(1),_t=kt(wt(t,kt)),_t&&(_t.c(),_t.m(s,null))),t[5]?zt?zt.p(t,i):(zt=ve(t),zt.c(),zt.m(r,null)):zt&&(zt.d(1),zt=null),Ct===(Ct=St(t))&&Et?Et.p(t,i):(Et.d(1),Et=Ct(t),Et&&(Et.c(),Et.m(p,null))),(!st||131072&i)&&at!==(at=t[17].width+"")&&U(x,at),(!st||131072&i)&&ut!==(ut=t[17].height+"")&&U(_,ut),(!st||262144&i)&&dt!==(dt=t[18].width+"")&&U(H,dt),(!st||262144&i)&&ht!==(ht=t[18].height+"")&&U(N,ht),Pt===(Pt=Lt(t))&&Tt?Tt.p(t,i):(Tt.d(1),Tt=Pt(t),Tt&&(Tt.c(),Tt.m(q,null))),jt===(jt=Mt(t))&&Ot?Ot.p(t,i):(Ot.d(1),Ot=jt(t),Ot&&(Ot.c(),Ot.m(J,null))),1&i&&ft!==(ft=`${t[0].top}px`)&&F(e,"top",ft),1&i&&mt!==(mt=`${t[0].left}px`)&&F(e,"left",mt)},i(t){st||(pt(i.$$.fragment,t),pt(ot.$$.fragment,t),rt||nt((()=>{rt=$t(e,Nt,{duration:150,y:4,easing:At}),rt.start()})),st=!0)},o(t){gt(i.$$.fragment,t),gt(ot.$$.fragment,t),st=!1},d(t){t&&L(e),xt(i),_t.d(),zt&&zt.d(),Et.d(),Tt.d(),Ot.d(),xt(ot),ct=!1,lt()}}}function Pe(t){let e,n,i,o,r,s=!1,c=()=>{s=!1};return nt(t[23]),n=new le({props:{$$slots:{default:[Le]},$$scope:{ctx:t}}}),{c(){bt(n.$$.fragment)},m(l,a){yt(n,l,a),i=!0,o||(r=R(de,"scroll",(()=>{s=!0,clearTimeout(e),e=setTimeout(c,100),t[23]()})),o=!0)},p(t,[i]){2&i&&!s&&(s=!0,clearTimeout(e),scrollTo(de.pageXOffset,t[1]),e=setTimeout(c,100));const o={};1074725373&i&&(o.$$scope={dirty:i,ctx:t}),n.$set(o)},i(t){i||(pt(n.$$.fragment,t),i=!0)},o(t){gt(n.$$.fragment,t),i=!1},d(t){xt(n,t),o=!1,r()}}}const Te="https://jetpack.com/support/jetpack-boost/image-performance-guide/";function Me(t){return t%1==0?t:parseFloat(t.toFixed(2))}function je(t,e,n){let i,o,s,c,l,a,u,d,h,f,g,m,$,v,w,b,y,x,k=r,_=r,z=r,S=r,C=r,E=r,L=r;t.$$.on_destroy.push((()=>k())),t.$$.on_destroy.push((()=>_())),t.$$.on_destroy.push((()=>z())),t.$$.on_destroy.push((()=>S())),t.$$.on_destroy.push((()=>C())),t.$$.on_destroy.push((()=>E())),t.$$.on_destroy.push((()=>L()));let{store:P}=e,{size:T}=e,{position:M}=e,j=0,O=0,R=0;return Z((()=>{O=j,R=M.top})),t.$$set=t=>{"store"in t&&n(20,P=t.store),"size"in t&&n(21,T=t.size),"position"in t&&n(0,M=t.position)},t.$$.update=()=>{var e;1048576&t.$$.dirty&&(n(15,i=P.loading),S(),S=p(i,(t=>n(16,w=t)))),1048576&t.$$.dirty&&(n(14,o=P.oversizedRatio),k(),k=p(o,(t=>n(3,m=t)))),1048576&t.$$.dirty&&(n(13,s=P.fileSize),_(),_=p(s,(t=>n(4,$=t)))),1048576&t.$$.dirty&&(n(12,c=P.sizeOnPage),E(),E=p(c,(t=>n(18,y=t)))),1048576&t.$$.dirty&&(n(11,l=P.potentialSavings),L(),L=p(l,(t=>n(19,x=t)))),1048576&t.$$.dirty&&(n(10,a=P.expectedSize),C(),C=p(a,(t=>n(17,b=t)))),1048576&t.$$.dirty&&(n(9,u=P.url),z(),z=p(u,(t=>n(5,v=t)))),32&t.$$.dirty&&n(8,d=v.split("/").pop()),32&t.$$.dirty&&new URL(v).origin,2097152&t.$$.dirty&&n(2,h="normal"===T?100:50),20&t.$$.dirty&&n(7,f=Math.floor(h/($.width/$.height))),8&t.$$.dirty&&n(6,g=Me(m)),2&t.$$.dirty&&0!==(e=j)&&O!==e&&n(0,M.top=R+(O-e),M)},new URL(window.location.href).origin,[M,j,h,m,$,v,g,f,d,u,a,l,c,s,o,i,w,b,y,x,P,T,function(e){K.call(this,t,e)},function(){n(1,j=de.pageYOffset)}]}class Oe extends zt{constructor(t){super(),_t(this,t,je,Pe,d,{store:20,size:21,position:0})}}function Re(t,e,n){const i=t.slice();return i[10]=e[n],i[12]=n,i}function Ie(t){let e,n,i,o,r,s,c,l=t[0],a=[];for(let e=0;e<l.length;e+=1)a[e]=Ue(Re(t,l,e));const u=t=>gt(a[t],1,1,(()=>{a[t]=null}));let d=!1!==t[1]&&Fe(t);return{c(){e=P("div"),n=P("div");for(let t=0;t<a.length;t+=1)a[t].c();i=j(),d&&d.c(),I(n,"class","previews svelte-1828btn"),I(e,"class",o="guide "+t[3]+" svelte-1828btn"),A(e,"show",!1!==t[1]),A(e,"keep-guide-open",!1!==t[1])},m(o,l){E(o,e,l),z(e,n);for(let t=0;t<a.length;t+=1)a[t]&&a[t].m(n,null);z(e,i),d&&d.m(e,null),r=!0,s||(c=R(e,"mouseleave",t[5]),s=!0)},p(t,i){if(129&i){let e;for(l=t[0],e=0;e<l.length;e+=1){const o=Re(t,l,e);a[e]?(a[e].p(o,i),pt(a[e],1)):(a[e]=Ue(o),a[e].c(),pt(a[e],1),a[e].m(n,null))}for(ht(),e=l.length;e<a.length;e+=1)u(e);ft()}!1!==t[1]?d?(d.p(t,i),2&i&&pt(d,1)):(d=Fe(t),d.c(),pt(d,1),d.m(e,null)):d&&(ht(),gt(d,1,1,(()=>{d=null})),ft()),(!r||8&i&&o!==(o="guide "+t[3]+" svelte-1828btn"))&&I(e,"class",o),(!r||10&i)&&A(e,"show",!1!==t[1]),(!r||10&i)&&A(e,"keep-guide-open",!1!==t[1])},i(t){if(!r){for(let t=0;t<l.length;t+=1)pt(a[t]);pt(d),r=!0}},o(t){a=a.filter(Boolean);for(let t=0;t<a.length;t+=1)gt(a[t]);gt(d),r=!1},d(t){t&&L(e),function(t,e){for(let n=0;n<t.length;n+=1)t[n]&&t[n].d(e)}(a,t),d&&d.d(),s=!1,c()}}}function Ue(t){let e,n;return e=new re({props:{index:t[12],store:t[10]}}),e.$on("hover",t[7]),{c(){bt(e.$$.fragment)},m(t,i){yt(e,t,i),n=!0},p(t,n){const i={};1&n&&(i.store=t[10]),e.$set(i)},i(t){n||(pt(e.$$.fragment,t),n=!0)},o(t){gt(e.$$.fragment,t),n=!1},d(t){xt(e,t)}}}function Fe(t){let e,n;return e=new Oe({props:{store:t[0][t[1]],size:t[3],position:t[2]}}),e.$on("mouseleave",t[5]),{c(){bt(e.$$.fragment)},m(t,i){yt(e,t,i),n=!0},p(t,n){const i={};3&n&&(i.store=t[0][t[1]]),8&n&&(i.size=t[3]),4&n&&(i.position=t[2]),e.$set(i)},i(t){n||(pt(e.$$.fragment,t),n=!0)},o(t){gt(e.$$.fragment,t),n=!1},d(t){xt(e,t)}}}function Ae(t){let e,n,i="active"===t[4]&&Ie(t);return{c(){i&&i.c(),e=O()},m(t,o){i&&i.m(t,o),E(t,e,o),n=!0},p(t,[n]){"active"===t[4]?i?(i.p(t,n),16&n&&pt(i,1)):(i=Ie(t),i.c(),pt(i,1),i.m(e.parentNode,e)):i&&(ht(),gt(i,1,1,(()=>{i=null})),ft())},i(t){n||(pt(i),n=!0)},o(t){gt(i),n=!1},d(t){i&&i.d(t),t&&L(e)}}}function He(t,e,n){let i,o,r;m(t,Rt,(t=>n(4,r=t)));let{stores:s}=e,c=!1;Z((()=>{s.forEach((t=>t.updateDimensions()))}));const l=s[0].sizeOnPage;m(t,l,(t=>n(8,o=t)));let a={top:0,left:0};return t.$$set=t=>{"stores"in t&&n(0,s=t.stores)},t.$$.update=()=>{256&t.$$.dirty&&n(3,i=function(t=-1,e=-1){return t<200||e<200?"micro":t<400||e<400?"small":"normal"}(o.width,o.height)),2&t.$$.dirty&&function(t=!1){t?s.forEach((t=>t.node.classList.add("jetpack-boost-guide__backdrop"))):s.forEach((t=>t.node.classList.remove("jetpack-boost-guide__backdrop")))}(!1!==c)},[s,c,a,i,r,function(t){t.relatedTarget&&t.relatedTarget.classList.contains("keep-guide-open")||n(1,c=!1)},l,function(t){const e=t.detail,i=e.index;n(2,a=e.position),n(1,c=i)},o]}class Be extends zt{constructor(t){super(),_t(this,t,He,Ae,d,{stores:0})}}const Ne=[];let De;function We(t){window.frameElement||(De=t,window.addEventListener("load",Ve))}function Ve(){window.addEventListener("resize",function(){let t;return()=>{t&&clearTimeout(t),t=setTimeout((()=>{Ne.forEach((t=>{t.updateDimensions()}))}),500)}}()),Ut.trackInitialState(),Rt.subscribe((async t=>{if("paused"===t)return;const e=await i(Array.from(document.querySelectorAll("body *:not(.jetpack-boost-guide > *):not(.jetpack-boost-guide)")),De),n=await Promise.all(e.map((t=>t.isImageTiny())));Ne.push(...function(t){const e=t.reduce(((t,e)=>{var n;if(!e.node.parentNode)return console.error("Image has no parent",e.node),t;const i=function(t){const e=t.node;if(!(t.node instanceof HTMLImageElement)&&["static","relative"].includes(getComputedStyle(e).position))return e.classList.contains("jetpack-boost-guide")||(e.classList.add("jetpack-boost-guide","relative"),e.dataset.jetpackBoostGuideId=(++Ge).toString()),e;if(!e.parentNode||!e.parentElement)return;const n=function(t){let e,n=t.parentElement;for(;n&&n instanceof HTMLElement&&n!==document.body;){const t=getComputedStyle(n),i="inline"!==t.display,o="static"===t.position,r="relative"===t.position,s="auto"!==t.zIndex;i&&(!e&&(o||r)||r&&s)&&(e=n),n=n.parentElement}return e}(e);if(null==n?void 0:n.classList.contains("jetpack-boost-guide"))return n;if(n){const e=getComputedStyle(n);if("relative"===e.position){const t=Array.from(n.children).find((t=>t.classList.contains("jetpack-boost-guide")));if(t&&t instanceof HTMLElement)return t}const i=document.createElement("div");return i.classList.add("jetpack-boost-guide"),i.dataset.jetpackBoostGuideId=(++Ge).toString(),"static"===e.position&&(n.style.position="relative"),t.node instanceof HTMLImageElement&&(i.style.top=`${t.node.offsetTop}px`),n.prepend(i),i}return e.parentElement}(e);if(!i)return console.error("Could not find a parent for image",e),t;const o=parseInt(i.dataset.jetpackBoostGuideId||""),r=(null===(n=t[o])||void 0===n?void 0:n.props.stores)||[],s=new Ft(e);return r.push(s),1===r.length&&(t[o]={target:i,intro:!0,props:{stores:r}}),t}),{});return Object.values(e).map((t=>(new Be(t),t.props.stores))).flat()}(e.filter(((t,e)=>!n[e])))),Ut.trackPage(Ne)}))}let Ge=0;function qe(t){let e,n,i,o,r,s,c,l,a,u;return n=new Vt({}),{c(){e=P("a"),bt(n.$$.fragment),i=j(),o=P("span"),r=M("Image Guide: "),s=M(t[2]),I(e,"id","jetpack-boost-guide-bar"),I(e,"href",t[0]),I(e,"class",c="ab-item "+t[1]+" svelte-itog5b")},m(c,d){var h;E(c,e,d),yt(n,e,null),z(e,i),z(e,o),z(o,r),z(o,s),l=!0,a||(u=R(e,"click",(h=t[3],function(t){return t.preventDefault(),h.call(this,t)})),a=!0)},p(t,[n]){(!l||4&n)&&U(s,t[2]),(!l||1&n)&&I(e,"href",t[0]),(!l||2&n&&c!==(c="ab-item "+t[1]+" svelte-itog5b"))&&I(e,"class",c)},i(t){l||(pt(n.$$.fragment,t),l=!0)},o(t){gt(n.$$.fragment,t),l=!1},d(t){t&&L(e),xt(n),a=!1,u()}}}function Ze(t,e,n){let i,o;m(t,Rt,(t=>n(1,i=t))),m(t,It,(t=>n(2,o=t)));let{href:r}=e,{tracksCallback:s}=e;return t.$$set=t=>{"href"in t&&n(0,r=t.href),"tracksCallback"in t&&n(4,s=t.tracksCallback)},t.$$.update=()=>{16&t.$$.dirty&&Ut.setTracksCallback(s)},[r,i,o,function(){Rt.cycle(),Ut.trackUIStateChange()},s]}class Ke extends zt{constructor(t){super(),_t(this,t,Ze,qe,d,{href:0,tracksCallback:4})}}function Xe(t,{href:e,tracksCallback:n,fetchFunction:i}){return We(i),new Ke({target:t,props:{href:e,tracksCallback:n}})}export{t as MeasurableImage,i as getMeasurableImages,Xe as setupImageGuideUI};

package/build/initialize.d.ts

@@ -0,0 +1,22 @@
+import { MeasurableImageStore } from './stores/MeasurableImageStore.js';
+import type { FetchFn, MeasurableImage } from './MeasurableImage.js';
+/**
+ * Set up a listener to initialize stuff on window load.
+ *
+ * @param {Function} fetchFn - An optional custom function to use when fetching the URL weights.
+ */
+export declare function setupLoadListener(fetchFn?: FetchFn): void;
+/**
+ * This gets a little tricky because of the various layout positions
+ * the images can be in.
+ *
+ * For example, images can be positioned with static, absolute, fixed, etc.
+ * But on top of that, they can be a part of a parent that has that positioning.
+ * And to make things even more complex, they can change dynamically, for example in a slider.
+ *
+ * This function attempts to attach the Svelte Components to the DOM in a non-destructive way.
+ *
+ * @param {MeasurableImage[]} measuredImages - The images to attach the guides to.
+ * @return {MeasurableImageStore[]} The stores for the attached images.
+ */
+export declare function attachGuides(measuredImages: MeasurableImage[]): MeasurableImageStore[];

package/build/stores/GuideState.d.ts

@@ -0,0 +1,12 @@
+import { Writable } from 'svelte/store';
+declare const store: {
+    readonly active: "Active";
+    readonly paused: "Paused";
+};
+type State = keyof typeof store;
+type CyclableStore = Writable<State> & {
+    cycle: () => void;
+};
+export declare const guideState: CyclableStore;
+export declare const guideLabel: import("svelte/store").Readable<"Active" | "Paused">;
+export {};

package/build/stores/MeasurableImageStore.d.ts

@@ -0,0 +1,29 @@
+import { Writable, Readable } from 'svelte/store';
+import { MeasurableImage } from '../MeasurableImage.js';
+import type { Dimensions, Weight } from '../MeasurableImage.js';
+/**
+ * Each measurable image has its own set of Svelte stores.
+ *
+ * This class relies on MeasurableImage to calculate the values
+ * and stores them in multiple Svelte stores,
+ * so that the dimensions are easily
+ * accessible in the components.
+ */
+export declare class MeasurableImageStore {
+    readonly fileSize: Writable<Dimensions & Weight>;
+    readonly sizeOnPage: Writable<Dimensions>;
+    readonly potentialSavings: Readable<number | null>;
+    readonly expectedSize: Readable<Dimensions>;
+    readonly oversizedRatio: Readable<number>;
+    readonly url: Writable<string>;
+    readonly loading: Writable<boolean>;
+    readonly image: MeasurableImage;
+    readonly node: MeasurableImage['node'];
+    private currentSrc;
+    constructor(measurableImage: MeasurableImage);
+    private deriveOversizedRatio;
+    private deriveExpectedSize;
+    private derivePotentialSavings;
+    updateDimensions(): Promise<void>;
+    private maybeUpdateWeight;
+}

package/build/types.d.ts

@@ -0,0 +1,9 @@
+import type { MeasurableImageStore } from './stores/MeasurableImageStore.js';
+import type { ComponentConstructorOptions } from 'svelte';
+export type GuideSize = 'normal' | 'small' | 'micro';
+export interface ImageGuideConfig extends ComponentConstructorOptions {
+    target: HTMLElement;
+    props: {
+        stores: MeasurableImageStore[];
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-image-guide",
-	"version": "0.5.4",
+	"version": "0.5.6",
 	"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",
@@ -15,17 +15,46 @@
 	"license": "GPL-2.0-or-later",
 	"author": "Automattic",
 	"scripts": {
-		"build": "pnpm run clean && webpack",
-		"clean": "rm -rf build/",
-		"watch": "pnpm run build && pnpm webpack watch",
+		"build": "rollup -c && tsc --emitDeclarationOnly",
+		"build-concurrently": "pnpm run clear-dist && concurrently 'pnpm:validate-ts' 'rollup -c'",
+		"build-development": "pnpm run build-concurrently",
+		"build-production": "NODE_ENV=production BABEL_ENV=production pnpm run build-concurrently",
+		"validate-ts": "tsc --pretty --strict false",
+		"dev-validate-ts": "tsc --watch --pretty --strict false # Note: Disable Strict mode to avoid noisy development, while keeping strict errors visible in IDEs.",
+		"dev-compile": "pnpm run clear-dist && rollup -c -w",
+		"dev": "concurrently 'pnpm:dev-validate-ts' 'pnpm:dev-compile'",
+		"reformat-files": "../../../tools/js-tools/node_modules/.bin/prettier --ignore-path .eslintignore --write --plugin-search-dir=. ./**/*.{svelte,js,ts,json}",
+		"lint": "pnpm run reformat-files && echo 'Running eslint...' && pnpm eslint app/assets/src/js tests/e2e --fix && echo '✔ prettier and eslint ran successfully.'",
+		"clear-dist": "rm -rf app/assets/dist/*",
 		"test": "NODE_OPTIONS=--experimental-vm-modules jest"
 	},
+	"browser": {
+		"@automattic/jetpack-image-guide": false
+	},
 	"devDependencies": {
-		"@automattic/jetpack-webpack-config": "workspace:*",
+		"@babel/core": "^7.0.0",
+		"@babel/preset-env": "7.23.5",
+		"@babel/preset-react": "7.23.3",
+		"@babel/preset-typescript": "7.23.3",
+		"@rollup/plugin-babel": "5.3.1",
+		"@rollup/plugin-commonjs": "19.0.2",
+		"@rollup/plugin-json": "4.1.0",
+		"@rollup/plugin-node-resolve": "13.3.0",
+		"@rollup/plugin-replace": "5.0.2",
+		"@rollup/plugin-terser": "0.4.3",
+		"@rollup/plugin-typescript": "8.3.3",
 		"@typescript-eslint/parser": "6.7.5",
 		"eslint": "8.51.0",
-		"jest": "29.4.3",
-		"ts-loader": "9.4.2",
+		"jest": "29.7.0",
+		"postcss": "8.4.31",
+		"rollup": "2.79.1",
+		"rollup-plugin-postcss": "4.0.2",
+		"rollup-plugin-svelte": "7.1.0",
+		"rollup-plugin-svelte-svg": "0.2.3",
+		"sass": "1.64.1",
+		"svelte": "3.58.0",
+		"svelte-preprocess": "5.0.4",
+		"tslib": "2.5.0",
 		"typescript": "5.0.4",
 		"webpack": "5.76.0",
 		"webpack-cli": "4.9.1"
@@ -36,6 +65,5 @@
 			"default": "./build/index.js"
 		}
 	},
-	"main": "./build/index.js",
-	"types": "./build/index.d.ts"
+	"main": "./src/index.ts"
 }

package/rollup.config.js

@@ -0,0 +1,130 @@
+import path from 'path';
+import { babel } from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import resolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import terser from '@rollup/plugin-terser';
+import typescript from '@rollup/plugin-typescript';
+import postcss from 'rollup-plugin-postcss';
+import svelte from 'rollup-plugin-svelte';
+import svelteSVG from 'rollup-plugin-svelte-svg';
+import sveltePreprocess from 'svelte-preprocess';
+import tsconfig from './tsconfig.json';
+
+const production = process.env.NODE_ENV === 'production';
+
+const exportConditions = process.env.npm_config_jetpack_webpack_config_resolve_conditions
+	? process.env.npm_config_jetpack_webpack_config_resolve_conditions.split( ',' )
+	: [];
+
+/**
+ *
+ *
+ * Jetpack Boost Image Guide
+ *
+ *
+ */
+export default {
+	input: `./src/index.ts`,
+	output: {
+		sourcemap: ! production,
+		format: 'esm',
+		name: 'app',
+		file: `./build/index.js`,
+	},
+	plugins: [
+		replace( {
+			preventAssignment: true,
+			delimiters: [ '', '' ],
+			values: {
+				"@import '@automattic": "@import '~@automattic",
+				'process.env.NODE_ENV': '"production"',
+			},
+		} ),
+
+		resolve( {
+			browser: true,
+			preferBuiltins: false,
+			dedupe: [ 'svelte' ],
+			exportConditions,
+		} ),
+
+		commonjs(),
+		json(),
+
+		babel( {
+			presets: [ '@babel/preset-react' ],
+			babelHelpers: 'bundled',
+			compact: true,
+		} ),
+
+		// we'll extract any component CSS out into
+		// a separate file - better for performance
+		postcss( {
+			extensions: [ '.css', '.sss', '.pcss', '.sass', '.scss' ],
+			extract: path.resolve( `./build/guide.css` ),
+			minimize: production,
+		} ),
+
+		svelteSVG(),
+		svelte( {
+			preprocess: sveltePreprocess( {
+				sourceMap: ! production,
+				typescript: {
+					compilerOptions: {
+						module: 'esnext',
+						moduleResolution: 'bundler',
+					},
+				},
+			} ),
+			compilerOptions: {
+				// enable run-time checks when not in production
+				dev: ! production,
+			},
+		} ),
+
+		typescript( {
+			sourceMap: ! production,
+			inlineSources: ! production,
+			// In order to let @rollup/plugin-typescript hanlde TS files from js-packages
+			// we need to include those here and pass the custom tsconfig as well
+			include: tsconfig.include,
+			tsconfig: 'tsconfig.json',
+			declaration: true,
+		} ),
+
+		// If we're building for production (npm run build
+		// instead of npm run dev), minify
+		production && terser(),
+	],
+
+	watch: {
+		clearScreen: false,
+	},
+
+	onwarn: ( warning, defaultHandler ) => {
+		// Ignore unused external imports for known problem React / ReactDOM imports.
+		if ( warning.code === 'UNUSED_EXTERNAL_IMPORT' ) {
+			const ignoredImports = [
+				'createPortal',
+				'findDOMNode',
+				'render',
+				'unmountComponentAtNode',
+				'createRef',
+				'memo',
+				'useImperativeHandle',
+				'useDebugValue',
+				'lazy',
+				'Suspense',
+			];
+
+			const unignoredWarnings = warning.names.filter( name => ! ignoredImports.includes( name ) );
+			if ( unignoredWarnings.length === 0 ) {
+				return;
+			}
+		}
+
+		defaultHandler( warning );
+	},
+};

package/build/index.asset.php

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