From 0fa296908ca1fb1586339067c8174526140604de Mon Sep 17 00:00:00 2001
From: Brad Jorsch <brad.jorsch@automattic.com>
Date: Thu, 13 May 2021 16:28:09 -0400
Subject: [PATCH 1/5] Lazy Images: Use calypso-build to build

---
 .eslintignore                                 |   1 -
 projects/packages/lazy-images/.gitattributes  |   6 +-
 projects/packages/lazy-images/.gitignore      |   2 +
 projects/packages/lazy-images/package.json    |  14 +-
 .../src/js/intersectionobserver-polyfill.js   | 730 ------------------
 .../packages/lazy-images/src/lazy-images.php  |   6 +-
 .../packages/lazy-images/webpack.config.js    |  25 -
 7 files changed, 15 insertions(+), 769 deletions(-)
 delete mode 100644 projects/packages/lazy-images/src/js/intersectionobserver-polyfill.js
 delete mode 100644 projects/packages/lazy-images/webpack.config.js

diff --git a/.eslintignore b/.eslintignore
index 8c67ac8095ae6..34050acb9ea48 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -34,5 +34,4 @@ projects/github-actions/*/dist
 projects/packages/*/wordpress
 projects/packages/connection-ui/build
 projects/packages/jitm/src/js/jetpack-jitm.js
-projects/packages/lazy-images/src/js/intersectionobserver-polyfill.js
 projects/plugins/backup/build
diff --git a/projects/packages/lazy-images/.gitattributes b/projects/packages/lazy-images/.gitattributes
index 09e1fdd890120..f8bc8ba4b2b34 100644
--- a/projects/packages/lazy-images/.gitattributes
+++ b/projects/packages/lazy-images/.gitattributes
@@ -2,14 +2,12 @@
 .gitattributes    export-ignore
 .github/          export-ignore
 package.json      export-ignore
-webpack.config.js export-ignore
 
 # Files to include in the mirror repo
-/src/js/intersectionobserver-polyfill.min.js  production-include
-/src/js/lazy-images.min.js                    production-include
+/dist/**          production-include
 
 # Files to exclude from the mirror repo
-/changelog/**    production-exclude
+/changelog/**     production-exclude
 .eslintrc.js      production-exclude
 .gitignore        production-exclude
 phpunit.xml.dist  production-exclude
diff --git a/projects/packages/lazy-images/.gitignore b/projects/packages/lazy-images/.gitignore
index 3b72d7da36465..91387d86f8e4b 100644
--- a/projects/packages/lazy-images/.gitignore
+++ b/projects/packages/lazy-images/.gitignore
@@ -1,3 +1,5 @@
+.cache/
+dist/
 node_modules
 vendor
 wordpress
diff --git a/projects/packages/lazy-images/package.json b/projects/packages/lazy-images/package.json
index 9430250a32dbf..e1368c64359c8 100644
--- a/projects/packages/lazy-images/package.json
+++ b/projects/packages/lazy-images/package.json
@@ -13,18 +13,20 @@
 	"author": "Automattic",
 	"scripts": {
 		"build": "yarn install-if-deps-outdated && yarn clean && yarn build-js",
-		"build-js": "webpack --config ./webpack.config.js",
+		"build-js": "calypso-build --output-path=./dist lazy-images='./src/js/lazy-images.js' && cp ./node_modules/intersection-observer/intersection-observer.js dist/",
 		"build-production": "yarn distclean && yarn install --production=false && yarn build-production-js",
-		"build-production-js": "NODE_ENV=production BABEL_ENV=production yarn build-js && yarn validate-es5 ./src/",
-		"clean": "true",
+		"build-production-js": "NODE_ENV=production BABEL_ENV=production yarn build-js && yarn validate-es5 ./dist/",
+		"clean": "rm -rf dist",
 		"distclean": "rm -rf node_modules && yarn clean",
 		"install-if-deps-outdated": "yarn install --check-files --production=false --frozen-lockfile",
 		"validate-es5": "eslint --parser-options=ecmaVersion:5 --no-eslintrc --no-ignore"
 	},
+	"dependencies": {
+		"intersection-observer": "^0.12.0"
+	},
 	"devDependencies": {
-		"eslint": "7.25.0",
-		"webpack": "4.46.0",
-		"webpack-cli": "4.5.0"
+		"@automattic/calypso-build": "6.5.0",
+		"eslint": "7.25.0"
 	},
 	"engines": {
 		"node": "^14.16.0",
diff --git a/projects/packages/lazy-images/src/js/intersectionobserver-polyfill.js b/projects/packages/lazy-images/src/js/intersectionobserver-polyfill.js
deleted file mode 100644
index 722fdeb71afa7..0000000000000
--- a/projects/packages/lazy-images/src/js/intersectionobserver-polyfill.js
+++ /dev/null
@@ -1,730 +0,0 @@
-/**
- * The following is an Intersection observer polyfill which is licensed under
- * the W3C SOFTWARE AND DOCUMENT NOTICE AND LICENSE and can be found at:
- * https://github.com/w3c/IntersectionObserver/tree/master/polyfill
- */
-
-/**
- * Copyright 2016 Google Inc. All Rights Reserved.
- *
- * Licensed under the W3C SOFTWARE AND DOCUMENT NOTICE AND LICENSE.
- *
- *  https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- */
-
-(function(window, document) {
-	'use strict';
-
-
-	// Exits early if all IntersectionObserver and IntersectionObserverEntry
-	// features are natively supported.
-	if ('IntersectionObserver' in window &&
-		'IntersectionObserverEntry' in window &&
-		'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
-
-		// Minimal polyfill for Edge 15's lack of `isIntersecting`
-		// See: https://github.com/w3c/IntersectionObserver/issues/211
-		if (!('isIntersecting' in window.IntersectionObserverEntry.prototype)) {
-		Object.defineProperty(window.IntersectionObserverEntry.prototype,
-			'isIntersecting', {
-			get: function () {
-			return this.intersectionRatio > 0;
-			}
-		});
-		}
-		return;
-	}
-
-
-	/**
-	 * An IntersectionObserver registry. This registry exists to hold a strong
-	 * reference to IntersectionObserver instances currently observering a target
-	 * element. Without this registry, instances without another reference may be
-	 * garbage collected.
-	 */
-	var registry = [];
-
-
-	/**
-	 * Creates the global IntersectionObserverEntry constructor.
-	 * https://w3c.github.io/IntersectionObserver/#intersection-observer-entry
-	 * @param {Object} entry A dictionary of instance properties.
-	 * @constructor
-	 */
-	function IntersectionObserverEntry(entry) {
-		this.time = entry.time;
-		this.target = entry.target;
-		this.rootBounds = entry.rootBounds;
-		this.boundingClientRect = entry.boundingClientRect;
-		this.intersectionRect = entry.intersectionRect || getEmptyRect();
-		this.isIntersecting = !!entry.intersectionRect;
-
-		// Calculates the intersection ratio.
-		var targetRect = this.boundingClientRect;
-		var targetArea = targetRect.width * targetRect.height;
-		var intersectionRect = this.intersectionRect;
-		var intersectionArea = intersectionRect.width * intersectionRect.height;
-
-		// Sets intersection ratio.
-		if (targetArea) {
-		this.intersectionRatio = intersectionArea / targetArea;
-		} else {
-		// If area is zero and is intersecting, sets to 1, otherwise to 0
-		this.intersectionRatio = this.isIntersecting ? 1 : 0;
-		}
-	}
-
-
-	/**
-	 * Creates the global IntersectionObserver constructor.
-	 * https://w3c.github.io/IntersectionObserver/#intersection-observer-interface
-	 * @param {Function} callback The function to be invoked after intersection
-	 *     changes have queued. The function is not invoked if the queue has
-	 *     been emptied by calling the `takeRecords` method.
-	 * @param {Object=} opt_options Optional configuration options.
-	 * @constructor
-	 */
-	function IntersectionObserver(callback, opt_options) {
-
-		var options = opt_options || {};
-
-		if (typeof callback !== 'function') {
-		throw new Error('callback must be a function');
-		}
-
-		if (options.root && options.root.nodeType != 1) {
-		throw new Error('root must be an Element');
-		}
-
-		// Binds and throttles `this._checkForIntersections`.
-		this._checkForIntersections = throttle(
-			this._checkForIntersections.bind(this), this.THROTTLE_TIMEOUT);
-
-		// Private properties.
-		this._callback = callback;
-		this._observationTargets = [];
-		this._queuedEntries = [];
-		this._rootMarginValues = this._parseRootMargin(options.rootMargin);
-
-		// Public properties.
-		this.thresholds = this._initThresholds(options.threshold);
-		this.root = options.root || null;
-		this.rootMargin = this._rootMarginValues.map(function(margin) {
-		return margin.value + margin.unit;
-		}).join(' ');
-	}
-
-
-	/**
-	 * The minimum interval within which the document will be checked for
-	 * intersection changes.
-	 */
-	IntersectionObserver.prototype.THROTTLE_TIMEOUT = 100;
-
-
-	/**
-	 * The frequency in which the polyfill polls for intersection changes.
-	 * this can be updated on a per instance basis and must be set prior to
-	 * calling `observe` on the first target.
-	 */
-	IntersectionObserver.prototype.POLL_INTERVAL = null;
-
-	/**
-	 * Use a mutation observer on the root element
-	 * to detect intersection changes.
-	 */
-	IntersectionObserver.prototype.USE_MUTATION_OBSERVER = true;
-
-
-	/**
-	 * Starts observing a target element for intersection changes based on
-	 * the thresholds values.
-	 * @param {Element} target The DOM element to observe.
-	 */
-	IntersectionObserver.prototype.observe = function(target) {
-		var isTargetAlreadyObserved = this._observationTargets.some(function(item) {
-		return item.element == target;
-		});
-
-		if (isTargetAlreadyObserved) {
-		return;
-		}
-
-		if (!(target && target.nodeType == 1)) {
-		throw new Error('target must be an Element');
-		}
-
-		this._registerInstance();
-		this._observationTargets.push({element: target, entry: null});
-		this._monitorIntersections();
-		this._checkForIntersections();
-	};
-
-
-	/**
-	 * Stops observing a target element for intersection changes.
-	 * @param {Element} target The DOM element to observe.
-	 */
-	IntersectionObserver.prototype.unobserve = function(target) {
-		this._observationTargets =
-			this._observationTargets.filter(function(item) {
-
-		return item.element != target;
-		});
-		if (!this._observationTargets.length) {
-		this._unmonitorIntersections();
-		this._unregisterInstance();
-		}
-	};
-
-
-	/**
-	 * Stops observing all target elements for intersection changes.
-	 */
-	IntersectionObserver.prototype.disconnect = function() {
-		this._observationTargets = [];
-		this._unmonitorIntersections();
-		this._unregisterInstance();
-	};
-
-
-	/**
-	 * Returns any queue entries that have not yet been reported to the
-	 * callback and clears the queue. This can be used in conjunction with the
-	 * callback to obtain the absolute most up-to-date intersection information.
-	 * @return {Array} The currently queued entries.
-	 */
-	IntersectionObserver.prototype.takeRecords = function() {
-		var records = this._queuedEntries.slice();
-		this._queuedEntries = [];
-		return records;
-	};
-
-
-	/**
-	 * Accepts the threshold value from the user configuration object and
-	 * returns a sorted array of unique threshold values. If a value is not
-	 * between 0 and 1 and error is thrown.
-	 * @private
-	 * @param {Array|number=} opt_threshold An optional threshold value or
-	 *     a list of threshold values, defaulting to [0].
-	 * @return {Array} A sorted list of unique and valid threshold values.
-	 */
-	IntersectionObserver.prototype._initThresholds = function(opt_threshold) {
-		var threshold = opt_threshold || [0];
-		if (!Array.isArray(threshold)) {threshold = [threshold];}
-
-		return threshold.sort().filter(function(t, i, a) {
-		if (typeof t !== 'number' || isNaN(t) || t < 0 || t > 1) {
-			throw new Error('threshold must be a number between 0 and 1 inclusively');
-		}
-		return t !== a[i - 1];
-		});
-	};
-
-
-	/**
-	 * Accepts the rootMargin value from the user configuration object
-	 * and returns an array of the four margin values as an object containing
-	 * the value and unit properties. If any of the values are not properly
-	 * formatted or use a unit other than px or %, and error is thrown.
-	 * @private
-	 * @param {string=} opt_rootMargin An optional rootMargin value,
-	 *     defaulting to '0px'.
-	 * @return {Array<Object>} An array of margin objects with the keys
-	 *     value and unit.
-	 */
-	IntersectionObserver.prototype._parseRootMargin = function(opt_rootMargin) {
-		var marginString = opt_rootMargin || '0px';
-		var margins = marginString.split(/\s+/).map(function(margin) {
-		var parts = /^(-?\d*\.?\d+)(px|%)$/.exec(margin);
-		if (!parts) {
-			throw new Error('rootMargin must be specified in pixels or percent');
-		}
-		return {value: parseFloat(parts[1]), unit: parts[2]};
-		});
-
-		// Handles shorthand.
-		margins[1] = margins[1] || margins[0];
-		margins[2] = margins[2] || margins[0];
-		margins[3] = margins[3] || margins[1];
-
-		return margins;
-	};
-
-
-	/**
-	 * Starts polling for intersection changes if the polling is not already
-	 * happening, and if the page's visibility state is visible.
-	 * @private
-	 */
-	IntersectionObserver.prototype._monitorIntersections = function() {
-		if (!this._monitoringIntersections) {
-		this._monitoringIntersections = true;
-
-		// If a poll interval is set, use polling instead of listening to
-		// resize and scroll events or DOM mutations.
-		if (this.POLL_INTERVAL) {
-			this._monitoringInterval = setInterval(
-				this._checkForIntersections, this.POLL_INTERVAL);
-		}
-		else {
-			addEvent(window, 'resize', this._checkForIntersections, true);
-			addEvent(document, 'scroll', this._checkForIntersections, true);
-
-			if (this.USE_MUTATION_OBSERVER && 'MutationObserver' in window) {
-			this._domObserver = new MutationObserver(this._checkForIntersections);
-			this._domObserver.observe(document, {
-				attributes: true,
-				childList: true,
-				characterData: true,
-				subtree: true
-			});
-			}
-		}
-		}
-	};
-
-
-	/**
-	 * Stops polling for intersection changes.
-	 * @private
-	 */
-	IntersectionObserver.prototype._unmonitorIntersections = function() {
-		if (this._monitoringIntersections) {
-		this._monitoringIntersections = false;
-
-		clearInterval(this._monitoringInterval);
-		this._monitoringInterval = null;
-
-		removeEvent(window, 'resize', this._checkForIntersections, true);
-		removeEvent(document, 'scroll', this._checkForIntersections, true);
-
-		if (this._domObserver) {
-			this._domObserver.disconnect();
-			this._domObserver = null;
-		}
-		}
-	};
-
-
-	/**
-	 * Scans each observation target for intersection changes and adds them
-	 * to the internal entries queue. If new entries are found, it
-	 * schedules the callback to be invoked.
-	 * @private
-	 */
-	IntersectionObserver.prototype._checkForIntersections = function() {
-		var rootIsInDom = this._rootIsInDom();
-		var rootRect = rootIsInDom ? this._getRootRect() : getEmptyRect();
-
-		this._observationTargets.forEach(function(item) {
-		var target = item.element;
-		var targetRect = getBoundingClientRect(target);
-		var rootContainsTarget = this._rootContainsTarget(target);
-		var oldEntry = item.entry;
-		var intersectionRect = rootIsInDom && rootContainsTarget &&
-			this._computeTargetAndRootIntersection(target, rootRect);
-
-		var newEntry = item.entry = new IntersectionObserverEntry({
-			time: now(),
-			target: target,
-			boundingClientRect: targetRect,
-			rootBounds: rootRect,
-			intersectionRect: intersectionRect
-		});
-
-		if (!oldEntry) {
-			this._queuedEntries.push(newEntry);
-		} else if (rootIsInDom && rootContainsTarget) {
-			// If the new entry intersection ratio has crossed any of the
-			// thresholds, add a new entry.
-			if (this._hasCrossedThreshold(oldEntry, newEntry)) {
-			this._queuedEntries.push(newEntry);
-			}
-		} else {
-			// If the root is not in the DOM or target is not contained within
-			// root but the previous entry for this target had an intersection,
-			// add a new record indicating removal.
-			if (oldEntry && oldEntry.isIntersecting) {
-			this._queuedEntries.push(newEntry);
-			}
-		}
-		}, this);
-
-		if (this._queuedEntries.length) {
-		this._callback(this.takeRecords(), this);
-		}
-	};
-
-
-	/**
-	 * Accepts a target and root rect computes the intersection between then
-	 * following the algorithm in the spec.
-	 * TODO(philipwalton): at this time clip-path is not considered.
-	 * https://w3c.github.io/IntersectionObserver/#calculate-intersection-rect-algo
-	 * @param {Element} target The target DOM element
-	 * @param {Object} rootRect The bounding rect of the root after being
-	 *     expanded by the rootMargin value.
-	 * @return {?Object} The final intersection rect object or undefined if no
-	 *     intersection is found.
-	 * @private
-	 */
-	IntersectionObserver.prototype._computeTargetAndRootIntersection =
-		function(target, rootRect) {
-
-		// If the element isn't displayed, an intersection can't happen.
-		if (window.getComputedStyle(target).display == 'none') {return;}
-
-		var targetRect = getBoundingClientRect(target);
-		var intersectionRect = targetRect;
-		var parent = getParentNode(target);
-		var atRoot = false;
-
-		while (!atRoot) {
-		var parentRect = null;
-		var parentComputedStyle = parent.nodeType == 1 ?
-			window.getComputedStyle(parent) : {};
-
-		// If the parent isn't displayed, an intersection can't happen.
-		if (parentComputedStyle.display == 'none') {return;}
-
-		if (parent == this.root || parent == document) {
-			atRoot = true;
-			parentRect = rootRect;
-		} else {
-			// If the element has a non-visible overflow, and it's not the <body>
-			// or <html> element, update the intersection rect.
-			// Note: <body> and <html> cannot be clipped to a rect that's not also
-			// the document rect, so no need to compute a new intersection.
-			if (parent != document.body &&
-				parent != document.documentElement &&
-				parentComputedStyle.overflow != 'visible') {
-			parentRect = getBoundingClientRect(parent);
-			}
-		}
-
-		// If either of the above conditionals set a new parentRect,
-		// calculate new intersection data.
-		if (parentRect) {
-			intersectionRect = computeRectIntersection(parentRect, intersectionRect);
-
-			if (!intersectionRect) {break;}
-		}
-		parent = getParentNode(parent);
-		}
-		return intersectionRect;
-	};
-
-
-	/**
-	 * Returns the root rect after being expanded by the rootMargin value.
-	 * @return {Object} The expanded root rect.
-	 * @private
-	 */
-	IntersectionObserver.prototype._getRootRect = function() {
-		var rootRect;
-		if (this.root) {
-		rootRect = getBoundingClientRect(this.root);
-		} else {
-		// Use <html>/<body> instead of window since scroll bars affect size.
-		var html = document.documentElement;
-		var body = document.body;
-		rootRect = {
-			top: 0,
-			left: 0,
-			right: html.clientWidth || body.clientWidth,
-			width: html.clientWidth || body.clientWidth,
-			bottom: html.clientHeight || body.clientHeight,
-			height: html.clientHeight || body.clientHeight
-		};
-		}
-		return this._expandRectByRootMargin(rootRect);
-	};
-
-
-	/**
-	 * Accepts a rect and expands it by the rootMargin value.
-	 * @param {Object} rect The rect object to expand.
-	 * @return {Object} The expanded rect.
-	 * @private
-	 */
-	IntersectionObserver.prototype._expandRectByRootMargin = function(rect) {
-		var margins = this._rootMarginValues.map(function(margin, i) {
-		return margin.unit == 'px' ? margin.value :
-			margin.value * (i % 2 ? rect.width : rect.height) / 100;
-		});
-		var newRect = {
-		top: rect.top - margins[0],
-		right: rect.right + margins[1],
-		bottom: rect.bottom + margins[2],
-		left: rect.left - margins[3]
-		};
-		newRect.width = newRect.right - newRect.left;
-		newRect.height = newRect.bottom - newRect.top;
-
-		return newRect;
-	};
-
-
-	/**
-	 * Accepts an old and new entry and returns true if at least one of the
-	 * threshold values has been crossed.
-	 * @param {?IntersectionObserverEntry} oldEntry The previous entry for a
-	 *    particular target element or null if no previous entry exists.
-	 * @param {IntersectionObserverEntry} newEntry The current entry for a
-	 *    particular target element.
-	 * @return {boolean} Returns true if a any threshold has been crossed.
-	 * @private
-	 */
-	IntersectionObserver.prototype._hasCrossedThreshold =
-		function(oldEntry, newEntry) {
-
-		// To make comparing easier, an entry that has a ratio of 0
-		// but does not actually intersect is given a value of -1
-		var oldRatio = oldEntry && oldEntry.isIntersecting ?
-			oldEntry.intersectionRatio || 0 : -1;
-		var newRatio = newEntry.isIntersecting ?
-			newEntry.intersectionRatio || 0 : -1;
-
-		// Ignore unchanged ratios
-		if (oldRatio === newRatio) {return;}
-
-		for (var i = 0; i < this.thresholds.length; i++) {
-		var threshold = this.thresholds[i];
-
-		// Return true if an entry matches a threshold or if the new ratio
-		// and the old ratio are on the opposite sides of a threshold.
-		if (threshold == oldRatio || threshold == newRatio ||
-			threshold < oldRatio !== threshold < newRatio) {
-			return true;
-		}
-		}
-	};
-
-
-	/**
-	 * Returns whether or not the root element is an element and is in the DOM.
-	 * @return {boolean} True if the root element is an element and is in the DOM.
-	 * @private
-	 */
-	IntersectionObserver.prototype._rootIsInDom = function() {
-		return !this.root || containsDeep(document, this.root);
-	};
-
-
-	/**
-	 * Returns whether or not the target element is a child of root.
-	 * @param {Element} target The target element to check.
-	 * @return {boolean} True if the target element is a child of root.
-	 * @private
-	 */
-	IntersectionObserver.prototype._rootContainsTarget = function(target) {
-		return containsDeep(this.root || document, target);
-	};
-
-
-	/**
-	 * Adds the instance to the global IntersectionObserver registry if it isn't
-	 * already present.
-	 * @private
-	 */
-	IntersectionObserver.prototype._registerInstance = function() {
-		if (registry.indexOf(this) < 0) {
-		registry.push(this);
-		}
-	};
-
-
-	/**
-	 * Removes the instance from the global IntersectionObserver registry.
-	 * @private
-	 */
-	IntersectionObserver.prototype._unregisterInstance = function() {
-		var index = registry.indexOf(this);
-		if (index != -1) {registry.splice(index, 1);}
-	};
-
-
-	/**
-	 * Returns the result of the performance.now() method or null in browsers
-	 * that don't support the API.
-	 * @return {number} The elapsed time since the page was requested.
-	 */
-	function now() {
-		return window.performance && performance.now && performance.now();
-	}
-
-
-	/**
-	 * Throttles a function and delays its executiong, so it's only called at most
-	 * once within a given time period.
-	 * @param {Function} fn The function to throttle.
-	 * @param {number} timeout The amount of time that must pass before the
-	 *     function can be called again.
-	 * @return {Function} The throttled function.
-	 */
-	function throttle(fn, timeout) {
-		var timer = null;
-		return function () {
-		if (!timer) {
-			timer = setTimeout(function() {
-			fn();
-			timer = null;
-			}, timeout);
-		}
-		};
-	}
-
-
-	/**
-	 * Adds an event handler to a DOM node ensuring cross-browser compatibility.
-	 * @param {Node} node The DOM node to add the event handler to.
-	 * @param {string} event The event name.
-	 * @param {Function} fn The event handler to add.
-	 * @param {boolean} opt_useCapture Optionally adds the even to the capture
-	 *     phase. Note: this only works in modern browsers.
-	 */
-	function addEvent(node, event, fn, opt_useCapture) {
-		if (typeof node.addEventListener === 'function') {
-		node.addEventListener(event, fn, opt_useCapture || false);
-		}
-		else if (typeof node.attachEvent === 'function') {
-		node.attachEvent('on' + event, fn);
-		}
-	}
-
-
-	/**
-	 * Removes a previously added event handler from a DOM node.
-	 * @param {Node} node The DOM node to remove the event handler from.
-	 * @param {string} event The event name.
-	 * @param {Function} fn The event handler to remove.
-	 * @param {boolean} opt_useCapture If the event handler was added with this
-	 *     flag set to true, it should be set to true here in order to remove it.
-	 */
-	function removeEvent(node, event, fn, opt_useCapture) {
-		if (typeof node.removeEventListener === 'function') {
-		node.removeEventListener(event, fn, opt_useCapture || false);
-		}
-		else if (typeof node.detatchEvent === 'function') {
-		node.detatchEvent('on' + event, fn);
-		}
-	}
-
-
-	/**
-	 * Returns the intersection between two rect objects.
-	 * @param {Object} rect1 The first rect.
-	 * @param {Object} rect2 The second rect.
-	 * @return {?Object} The intersection rect or undefined if no intersection
-	 *     is found.
-	 */
-	function computeRectIntersection(rect1, rect2) {
-		var top = Math.max(rect1.top, rect2.top);
-		var bottom = Math.min(rect1.bottom, rect2.bottom);
-		var left = Math.max(rect1.left, rect2.left);
-		var right = Math.min(rect1.right, rect2.right);
-		var width = right - left;
-		var height = bottom - top;
-
-		return (width >= 0 && height >= 0) && {
-		top: top,
-		bottom: bottom,
-		left: left,
-		right: right,
-		width: width,
-		height: height
-		};
-	}
-
-
-	/**
-	 * Shims the native getBoundingClientRect for compatibility with older IE.
-	 * @param {Element} el The element whose bounding rect to get.
-	 * @return {Object} The (possibly shimmed) rect of the element.
-	 */
-	function getBoundingClientRect(el) {
-		var rect;
-
-		try {
-		rect = el.getBoundingClientRect();
-		} catch (err) {
-		// Ignore Windows 7 IE11 "Unspecified error"
-		// https://github.com/w3c/IntersectionObserver/pull/205
-		}
-
-		if (!rect) {return getEmptyRect();}
-
-		// Older IE
-		if (!(rect.width && rect.height)) {
-		rect = {
-			top: rect.top,
-			right: rect.right,
-			bottom: rect.bottom,
-			left: rect.left,
-			width: rect.right - rect.left,
-			height: rect.bottom - rect.top
-		};
-		}
-		return rect;
-	}
-
-
-	/**
-	 * Returns an empty rect object. An empty rect is returned when an element
-	 * is not in the DOM.
-	 * @return {Object} The empty rect.
-	 */
-	function getEmptyRect() {
-		return {
-		top: 0,
-		bottom: 0,
-		left: 0,
-		right: 0,
-		width: 0,
-		height: 0
-		};
-	}
-
-	/**
-	 * Checks to see if a parent element contains a child elemnt (including inside
-	 * shadow DOM).
-	 * @param {Node} parent The parent element.
-	 * @param {Node} child The child element.
-	 * @return {boolean} True if the parent node contains the child node.
-	 */
-	function containsDeep(parent, child) {
-		var node = child;
-		while (node) {
-		if (node == parent) {return true;}
-
-		node = getParentNode(node);
-		}
-		return false;
-	}
-
-
-	/**
-	 * Gets the parent node of an element or its host element if the parent node
-	 * is a shadow root.
-	 * @param {Node} node The node whose parent to get.
-	 * @return {Node|null} The parent node or null if no parent exists.
-	 */
-	function getParentNode(node) {
-		var parent = node.parentNode;
-
-		if (parent && parent.nodeType == 11 && parent.host) {
-		// If the parent is a shadow root, return the host element.
-		return parent.host;
-		}
-		return parent;
-	}
-
-
-	// Exposes the constructors globally.
-	window.IntersectionObserver = IntersectionObserver;
-	window.IntersectionObserverEntry = IntersectionObserverEntry;
-
-	}(window, document));
diff --git a/projects/packages/lazy-images/src/lazy-images.php b/projects/packages/lazy-images/src/lazy-images.php
index 858b05e680873..ce499c7ec1920 100644
--- a/projects/packages/lazy-images/src/lazy-images.php
+++ b/projects/packages/lazy-images/src/lazy-images.php
@@ -37,7 +37,7 @@ class Jetpack_Lazy_Images {
 	 *
 	 * @var string Assets version.
 	 */
-	const ASSETS_VERSION = '1.1.2';
+	const ASSETS_VERSION = '1.1.3';
 
 	/**
 	 * Class instance.
@@ -483,14 +483,14 @@ private static function build_attributes_string( $attributes ) {
 	public function enqueue_assets() {
 		wp_enqueue_script(
 			'jetpack-lazy-images-polyfill-intersectionobserver',
-			Assets::get_file_url_for_environment( 'js/intersectionobserver-polyfill.min.js', 'js/intersectionobserver-polyfill.js', __FILE__ ),
+			Assets::get_file_url_for_environment( '../dist/intersection-observer.js', '../dist/intersection-observer.js', __FILE__ ),
 			array(),
 			self::ASSETS_VERSION,
 			true
 		);
 		wp_enqueue_script(
 			'jetpack-lazy-images',
-			Assets::get_file_url_for_environment( 'js/lazy-images.min.js', 'js/lazy-images.js', __FILE__ ),
+			Assets::get_file_url_for_environment( '../dist/lazy-images.js', 'js/lazy-images.js', __FILE__ ),
 			array( 'jetpack-lazy-images-polyfill-intersectionobserver' ),
 			self::ASSETS_VERSION,
 			true
diff --git a/projects/packages/lazy-images/webpack.config.js b/projects/packages/lazy-images/webpack.config.js
deleted file mode 100644
index 61b2089056651..0000000000000
--- a/projects/packages/lazy-images/webpack.config.js
+++ /dev/null
@@ -1,25 +0,0 @@
-// @todo Remove this, use calypso-build instead. See https://github.com/Automattic/jetpack/pull/17571.
-// That should also allow us to remove webpack from package.json.
-const path = require( 'path' );
-const packagesFolder = path.resolve( __dirname, 'src/js' );
-
-module.exports = [
-	{
-		mode: 'production',
-		context: packagesFolder,
-		entry: './lazy-images.js',
-		output: {
-			path: packagesFolder,
-			filename: 'lazy-images.min.js',
-		},
-	},
-	{
-		mode: 'production',
-		context: packagesFolder,
-		entry: './intersectionobserver-polyfill.js',
-		output: {
-			path: packagesFolder,
-			filename: 'intersectionobserver-polyfill.min.js',
-		},
-	},
-];

From b011cc5d1427d5fbc92c7130fce003b067566258 Mon Sep 17 00:00:00 2001
From: Brad Jorsch <brad.jorsch@automattic.com>
Date: Thu, 13 May 2021 16:54:25 -0400
Subject: [PATCH 2/5] Add changelog entry

---
 .../lazy-images/changelog/update-lazy-images-build-system     | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 projects/packages/lazy-images/changelog/update-lazy-images-build-system

diff --git a/projects/packages/lazy-images/changelog/update-lazy-images-build-system b/projects/packages/lazy-images/changelog/update-lazy-images-build-system
new file mode 100644
index 0000000000000..03711734d6f1a
--- /dev/null
+++ b/projects/packages/lazy-images/changelog/update-lazy-images-build-system
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Build using calypso-build, and use the intersection-observer npm module instead of bundling a copy.

From d5c040717d295ec8541dc42fb5542d7cba2925cd Mon Sep 17 00:00:00 2001
From: Brad Jorsch <brad.jorsch@automattic.com>
Date: Thu, 10 Jun 2021 09:04:39 -0400
Subject: [PATCH 3/5] Update pnpm lockfile

---
 pnpm-lock.yaml | 63 +++++++++-----------------------------------------
 1 file changed, 11 insertions(+), 52 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 69ecbdc8ac3b1..a8206e243e29d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -218,13 +218,14 @@ importers:
 
   projects/packages/lazy-images:
     specifiers:
+      '@automattic/calypso-build': 6.5.0
       eslint: 7.25.0
-      webpack: 4.46.0
-      webpack-cli: 4.5.0
+      intersection-observer: ^0.12.0
+    dependencies:
+      intersection-observer: 0.12.0
     devDependencies:
+      '@automattic/calypso-build': 6.5.0
       eslint: 7.25.0
-      webpack: 4.46.0_webpack-cli@4.5.0
-      webpack-cli: 4.5.0_webpack@4.46.0
 
   projects/plugins/backup:
     specifiers:
@@ -699,7 +700,6 @@ packages:
       - ts-node
       - utf-8-validate
       - webpack-command
-    dev: false
 
   /@automattic/calypso-build/6.5.0_c504176ad779f4702b362565f13dc47d:
     resolution: {integrity: sha512-g8bpSNQ3jOzbkAqggaHxgiMqsKk1ElMzZPaFh0dLjjBBS+TD/2CR7RLqYvpjAz3mtP7o12vCLhFwObT6/H6huA==}
@@ -874,7 +874,6 @@ packages:
       schema-utils: 1.0.0
       webpack: 4.46.0_webpack-cli@3.3.12
       webpack-sources: 1.4.3
-    dev: false
 
   /@automattic/popup-monitor/1.0.0:
     resolution: {integrity: sha512-hZzcOOfNB150rq/mTEWjDHM16Kuuia8OlAAHosylpacPDYJnh2zjPg910fpApuUrhRnOSaiZ+sv3Ydkt0LdTZg==}
@@ -911,7 +910,6 @@ packages:
       cssnano: 4.1.11
       rtlcss: 2.6.2
       webpack-sources: 2.2.0
-    dev: false
 
   /@automattic/webpack-rtl-plugin/4.0.0_webpack@5.31.0:
     resolution: {integrity: sha512-LnVhDhupOlYiKO/yAHd35kbS0JV1z8CJfEjhHBgd2Cve3jtTyHMA/dGa/6e+7Sr32Viz40ckbLeqrr+x6uMnEw==}
@@ -988,7 +986,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.12.13
-      '@babel/generator': 7.13.9
+      '@babel/generator': 7.14.1
       '@babel/helper-compilation-targets': 7.13.16_@babel+core@7.13.14
       '@babel/helper-module-transforms': 7.14.0
       '@babel/helpers': 7.13.10
@@ -1005,13 +1003,6 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
-  /@babel/generator/7.13.9:
-    resolution: {integrity: sha512-mHOOmY0Axl/JCTkxTU6Lf5sWOg/v8nUa+Xkt4zMTftX0wqmb6Sh7J8gvcehBw7q0AhrhAR+FDacKjCZ2X8K+Sw==}
-    dependencies:
-      '@babel/types': 7.14.1
-      jsesc: 2.5.2
-      source-map: 0.5.7
-
   /@babel/generator/7.14.1:
     resolution: {integrity: sha512-TMGhsXMXCP/O1WtQmZjpEYDhCYC9vFhayWZPJSZCGkPJgUqX0rF0wwtrYvnzVxIjcF80tkUertXVk5cwqi5cAQ==}
     dependencies:
@@ -3328,7 +3319,6 @@ packages:
     dependencies:
       mkdirp: 1.0.4
       rimraf: 3.0.2
-    dev: false
 
   /@octokit/auth-action/1.3.2:
     resolution: {integrity: sha512-eCFGNq30e8ObTh6fwcmq8JRaGoputPQtPi9PTgbsEo+NPd5JrOoynI2bV7OpePRqgtATp1JRWC0y/3iXTB11ow==}
@@ -5646,7 +5636,6 @@ packages:
       prop-types: 15.7.2
       prop-types-exact: 1.2.0
       react-is: 16.13.1
-    dev: false
 
   /airbnb-prop-types/2.16.0_react@16.14.0:
     resolution: {integrity: sha512-7WHOFolP/6cS96PhKNrslCLMYAI8yB1Pp6u6XmxozQOiZbsI5ycglZr5cHhBFfuRcQQjzCMith5ZPZdYiJCxUg==}
@@ -6219,7 +6208,6 @@ packages:
       make-dir: 3.1.0
       schema-utils: 2.7.1
       webpack: 4.46.0_webpack-cli@3.3.12
-    dev: false
 
   /babel-loader/8.2.2_991341eb2b6fedd10c30055d938042bc:
     resolution: {integrity: sha512-JvTd0/D889PQBtUXJ2PXaKU/pjZDMtHA9V2ecm+eNRmmBCMR09a+fmpGTNwnJtFmFl5Ei7Vy47LjBb+L0wQ99g==}
@@ -6847,7 +6835,6 @@ packages:
       ssri: 8.0.1
       tar: 6.1.0
       unique-filename: 1.1.1
-    dev: false
 
   /cache-base/1.0.1:
     resolution: {integrity: sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==}
@@ -6876,7 +6863,6 @@ packages:
       neo-async: 2.6.2
       schema-utils: 2.7.1
       webpack: 4.46.0_webpack-cli@3.3.12
-    dev: false
 
   /cache-loader/4.1.0_webpack@5.31.0:
     resolution: {integrity: sha512-ftOayxve0PwKzBF/GLsZNC9fJBXl8lkZE3TOsjkboHfVHVkL39iUEs1FO07A33mizmci5Dudt38UZrrYXDtbhw==}
@@ -7127,7 +7113,6 @@ packages:
   /chownr/2.0.0:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
     engines: {node: '>=10'}
-    dev: false
 
   /chrome-trace-event/1.0.3:
     resolution: {integrity: sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==}
@@ -7721,7 +7706,6 @@ packages:
       schema-utils: 2.7.1
       semver: 6.3.0
       webpack: 4.46.0_webpack-cli@3.3.12
-    dev: false
 
   /css-loader/3.6.0_webpack@5.31.0:
     resolution: {integrity: sha512-M5lSukoWi1If8dhQAUCvj4H8vUt3vOnwbQBH9DdTm/s4Ym2B/3dPMtYZeJmq7Q3S3Pa+I94DcZ7pc9bP14cWIQ==}
@@ -8518,7 +8502,6 @@ packages:
       react-is: 16.13.1
       react-test-renderer: 16.14.0
       semver: 5.7.1
-    dev: false
 
   /enzyme-adapter-react-16/1.15.6_4f82faf5e8cab057bc46d4d95079ec42:
     resolution: {integrity: sha512-yFlVJCXh8T+mcQo8M6my9sPgeGzj85HSHi6Apgf1Cvq/7EL/J9+1JoJmJsRxZgyTvPMAqOEpRSu/Ii/ZpyOk0g==}
@@ -8592,7 +8575,6 @@ packages:
       object.fromentries: 2.0.4
       prop-types: 15.7.2
       semver: 5.7.1
-    dev: false
 
   /enzyme-adapter-utils/1.14.0_react@16.14.0:
     resolution: {integrity: sha512-F/z/7SeLt+reKFcb7597IThpDp0bmzcH1E9Oabqv+o01cID2/YInlqHbFl7HzWBl4h3OdZYedtwNDOmSKkk0bg==}
@@ -9450,7 +9432,6 @@ packages:
       loader-utils: 1.4.0
       schema-utils: 2.7.1
       webpack: 4.46.0_webpack-cli@3.3.12
-    dev: false
 
   /file-loader/4.3.0_webpack@5.31.0:
     resolution: {integrity: sha512-aKrYPYjF1yG3oX0kWRrqrSMfgftm7oJW5M+m4owoldH5C51C0RkIwB++JbRvEW3IU6/ZG5n8UvEcdgwOt2UOWA==}
@@ -9722,7 +9703,6 @@ packages:
     engines: {node: '>= 8'}
     dependencies:
       minipass: 3.1.3
-    dev: false
 
   /fs-mkdirp-stream/1.0.0:
     resolution: {integrity: sha1-C3gV/DIBxqaeFNuYzgmMFpNSWes=}
@@ -9978,7 +9958,6 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       global-prefix: 3.0.0
-    dev: false
 
   /global-prefix/1.0.2:
     resolution: {integrity: sha1-2/dDxsFJklk8ZVVoy2btMsASLr4=}
@@ -9997,7 +9976,6 @@ packages:
       ini: 1.3.8
       kind-of: 6.0.3
       which: 1.3.1
-    dev: false
 
   /globals/11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
@@ -10645,7 +10623,6 @@ packages:
     dependencies:
       pkg-dir: 3.0.0
       resolve-cwd: 2.0.0
-    dev: false
 
   /import-local/3.0.2:
     resolution: {integrity: sha512-vjL3+w0oulAVZ0hBHnxa/Nm5TAurf9YLQJDhqRZyqb+VKGOB6LU8t9H1Nr5CIo16vh9XfJTOoHwU0B71S557gA==}
@@ -10746,6 +10723,10 @@ packages:
     resolution: {integrity: sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==}
     engines: {node: '>= 0.10'}
 
+  /intersection-observer/0.12.0:
+    resolution: {integrity: sha512-2Vkz8z46Dv401zTWudDGwO7KiGHNDkMv417T5ItcNYfmvHR/1qCTVBO9vwH8zZmQ0WkA/1ARwpysR9bsnop4NQ==}
+    dev: false
+
   /invariant/2.2.4:
     resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
     dependencies:
@@ -10998,7 +10979,6 @@ packages:
   /is-plain-obj/1.1.0:
     resolution: {integrity: sha1-caUMhCnfync8kqOQpKA7OfzVHT4=}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /is-plain-obj/2.1.0:
     resolution: {integrity: sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==}
@@ -11316,7 +11296,6 @@ packages:
       - bufferutil
       - canvas
       - utf-8-validate
-    dev: false
 
   /jest-environment-enzyme/7.1.2_847a09de400b6a6d5a9c863e7946818d:
     resolution: {integrity: sha512-3tfaYAzO7qZSRrv+srQnfK16Vu5XwH/pHi8FpoqSHjKKngbHzXf7aBCBuWh8y3w0OtknHRfDMFrC60Khj+g1hA==}
@@ -11391,7 +11370,6 @@ packages:
       - canvas
       - react
       - utf-8-validate
-    dev: false
 
   /jest-enzyme/7.1.2_847a09de400b6a6d5a9c863e7946818d:
     resolution: {integrity: sha512-j+jkph3t5hGBS12eOldpfsnERYRCHi4c/0KWPMnqRPoJJXvCpLIc5th1MHl0xDznQDXVU0AHUXg3rqMrf8vGpA==}
@@ -12652,28 +12630,24 @@ packages:
     engines: {node: '>= 8'}
     dependencies:
       minipass: 3.1.3
-    dev: false
 
   /minipass-flush/1.0.5:
     resolution: {integrity: sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==}
     engines: {node: '>= 8'}
     dependencies:
       minipass: 3.1.3
-    dev: false
 
   /minipass-pipeline/1.2.4:
     resolution: {integrity: sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==}
     engines: {node: '>=8'}
     dependencies:
       minipass: 3.1.3
-    dev: false
 
   /minipass/3.1.3:
     resolution: {integrity: sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==}
     engines: {node: '>=8'}
     dependencies:
       yallist: 4.0.0
-    dev: false
 
   /minizlib/2.1.2:
     resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
@@ -12681,7 +12655,6 @@ packages:
     dependencies:
       minipass: 3.1.3
       yallist: 4.0.0
-    dev: false
 
   /mississippi/3.0.0:
     resolution: {integrity: sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==}
@@ -13030,7 +13003,6 @@ packages:
       prepend-http: 1.0.4
       query-string: 4.3.4
       sort-keys: 1.1.2
-    dev: false
 
   /normalize-url/3.3.0:
     resolution: {integrity: sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==}
@@ -13380,7 +13352,6 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       aggregate-error: 3.1.0
-    dev: false
 
   /p-try/2.2.0:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
@@ -14122,7 +14093,6 @@ packages:
   /prepend-http/1.0.4:
     resolution: {integrity: sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /prettier-linter-helpers/1.0.0:
     resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
@@ -14304,7 +14274,6 @@ packages:
     dependencies:
       object-assign: 4.1.1
       strict-uri-encode: 1.1.0
-    dev: false
 
   /query-string/7.0.0:
     resolution: {integrity: sha512-Iy7moLybliR5ZgrK/1R3vjrXq03S13Vz4Rbm5Jg3EFq1LUmQppto0qtXz4vqZ386MSRjZgnTSZ9QC+NZOSd/XA==}
@@ -14624,7 +14593,6 @@ packages:
       prop-types: 15.7.2
       react-is: 16.13.1
       scheduler: 0.19.1
-    dev: false
 
   /react-test-renderer/16.14.0_react@16.14.0:
     resolution: {integrity: sha512-L8yPjqPE5CZO6rKsKXRO/rVPiaCOy0tQQJbC+UjPNlobl5mad59lvPjwFsQHTvL03caVDIVr9x9/OSgDe6I5Eg==}
@@ -15105,7 +15073,6 @@ packages:
     engines: {node: '>=4'}
     dependencies:
       resolve-from: 3.0.0
-    dev: false
 
   /resolve-cwd/3.0.0:
     resolution: {integrity: sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==}
@@ -15362,7 +15329,6 @@ packages:
       schema-utils: 2.7.1
       semver: 6.3.0
       webpack: 4.46.0_webpack-cli@3.3.12
-    dev: false
 
   /sass-loader/8.0.2_node-sass@4.14.1+webpack@5.31.0:
     resolution: {integrity: sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==}
@@ -15683,7 +15649,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       is-plain-obj: 1.1.0
-    dev: false
 
   /sort-object-keys/1.1.3:
     resolution: {integrity: sha512-855pvK+VkU7PaKYPc+Jjnmt4EzejQHyhhF33q31qG8x7maDzkeFhAAThdCYay11CISO+qAMwjOBP+fPZe0IPyg==}
@@ -15840,7 +15805,6 @@ packages:
     engines: {node: '>= 8'}
     dependencies:
       minipass: 3.1.3
-    dev: false
 
   /stable/0.1.8:
     resolution: {integrity: sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==}
@@ -15910,7 +15874,6 @@ packages:
   /strict-uri-encode/1.1.0:
     resolution: {integrity: sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /strict-uri-encode/2.0.0:
     resolution: {integrity: sha1-ucczDHBChi9rFC3CdLvMWGbONUY=}
@@ -16268,7 +16231,6 @@ packages:
       minizlib: 2.1.2
       mkdirp: 1.0.4
       yallist: 4.0.0
-    dev: false
 
   /terminal-link/2.1.1:
     resolution: {integrity: sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==}
@@ -16338,7 +16300,6 @@ packages:
       terser: 5.7.0
       webpack: 4.46.0_webpack-cli@3.3.12
       webpack-sources: 1.4.3
-    dev: false
 
   /terser-webpack-plugin/5.1.1_webpack@5.31.0:
     resolution: {integrity: sha512-5XNNXZiR8YO6X6KhSGXfY0QrGrCRlSwAEjIIrlRQR4W8nP69TaJUlh3bkuac6zzgspiGPfKEHcY295MMVExl5Q==}
@@ -16405,7 +16366,6 @@ packages:
       loader-utils: 1.4.0
       neo-async: 2.6.2
       webpack: 4.46.0_webpack-cli@3.3.12
-    dev: false
 
   /thread-loader/2.1.3_webpack@5.31.0:
     resolution: {integrity: sha512-wNrVKH2Lcf8ZrWxDF/khdlLlsTMczdcwPA9VEK4c2exlEPynYWxi9op3nPTo5lAnDIkE0rQEB3VBP+4Zncc9Hg==}
@@ -16983,6 +16943,7 @@ packages:
 
   /uuid/3.4.0:
     resolution: {integrity: sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==}
+    deprecated: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
     hasBin: true
 
   /uuid/8.3.0:
@@ -17175,7 +17136,6 @@ packages:
       v8-compile-cache: 2.2.0
       webpack: 4.46.0_webpack-cli@3.3.12
       yargs: 13.3.2
-    dev: false
 
   /webpack-cli/4.5.0_webpack@4.46.0:
     resolution: {integrity: sha512-wXg/ef6Ibstl2f50mnkcHblRPN/P9J4Nlod5Hg9HGFgSeF8rsqDGHJeVe4aR26q9l62TUJi6vmvC2Qz96YJw1Q==}
@@ -17400,7 +17360,6 @@ packages:
       watchpack: 1.7.5
       webpack-cli: 3.3.12_webpack@4.46.0
       webpack-sources: 1.4.3
-    dev: false
 
   /webpack/4.46.0_webpack-cli@4.5.0:
     resolution: {integrity: sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==}

From 0411d07853beb86f36387c7ce55874e44904316f Mon Sep 17 00:00:00 2001
From: Brad Jorsch <brad.jorsch@automattic.com>
Date: Thu, 10 Jun 2021 09:08:05 -0400
Subject: [PATCH 4/5] Minify intersection-observer.js

---
 projects/packages/lazy-images/package.json        | 2 +-
 projects/packages/lazy-images/src/lazy-images.php | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/packages/lazy-images/package.json b/projects/packages/lazy-images/package.json
index 9e8055c1df46e..65515d4fde573 100644
--- a/projects/packages/lazy-images/package.json
+++ b/projects/packages/lazy-images/package.json
@@ -13,7 +13,7 @@
 	"author": "Automattic",
 	"scripts": {
 		"build": "pnpm run install-if-deps-outdated && pnpm run clean && pnpm run build-js",
-		"build-js": "calypso-build --output-path=./dist lazy-images='./src/js/lazy-images.js' && cp ./node_modules/intersection-observer/intersection-observer.js dist/",
+		"build-js": "calypso-build --output-path=./dist lazy-images='./src/js/lazy-images.js' intersection-observer=./node_modules/intersection-observer/intersection-observer.js && cp ./node_modules/intersection-observer/intersection-observer.js ./dist/intersection-observer.src.js",
 		"build-production": "pnpm run distclean && pnpm run install-if-deps-outdated && pnpm run build-production-js",
 		"build-production-js": "NODE_ENV=production BABEL_ENV=production pnpm run build-js && pnpm run validate-es5 -- ./dist/",
 		"clean": "rm -rf dist",
diff --git a/projects/packages/lazy-images/src/lazy-images.php b/projects/packages/lazy-images/src/lazy-images.php
index ce499c7ec1920..74e6b3874e3be 100644
--- a/projects/packages/lazy-images/src/lazy-images.php
+++ b/projects/packages/lazy-images/src/lazy-images.php
@@ -483,7 +483,7 @@ private static function build_attributes_string( $attributes ) {
 	public function enqueue_assets() {
 		wp_enqueue_script(
 			'jetpack-lazy-images-polyfill-intersectionobserver',
-			Assets::get_file_url_for_environment( '../dist/intersection-observer.js', '../dist/intersection-observer.js', __FILE__ ),
+			Assets::get_file_url_for_environment( '../dist/intersection-observer.js', '../dist/intersection-observer.src.js', __FILE__ ),
 			array(),
 			self::ASSETS_VERSION,
 			true

From 49c94d1e057a8e56fc8a4429882bbea00fe5e187 Mon Sep 17 00:00:00 2001
From: Brad Jorsch <brad.jorsch@automattic.com>
Date: Thu, 10 Jun 2021 11:53:29 -0400
Subject: [PATCH 5/5] Minor change, not patch change

The question there is whether the paths or URLs of those JS files would
be considered part of the "API" of the package, or just an internal
implementation detail. Let's err on the safe side.
---
 .../lazy-images/changelog/update-lazy-images-build-system   | 2 +-
 projects/packages/lazy-images/composer.json                 | 2 +-
 .../jetpack/changelog/update-lazy-images-build-system       | 4 ++++
 projects/plugins/jetpack/composer.json                      | 2 +-
 projects/plugins/jetpack/composer.lock                      | 6 +++---
 5 files changed, 10 insertions(+), 6 deletions(-)
 create mode 100644 projects/plugins/jetpack/changelog/update-lazy-images-build-system

diff --git a/projects/packages/lazy-images/changelog/update-lazy-images-build-system b/projects/packages/lazy-images/changelog/update-lazy-images-build-system
index 03711734d6f1a..825cb8d54b930 100644
--- a/projects/packages/lazy-images/changelog/update-lazy-images-build-system
+++ b/projects/packages/lazy-images/changelog/update-lazy-images-build-system
@@ -1,4 +1,4 @@
-Significance: patch
+Significance: minor
 Type: changed
 
 Build using calypso-build, and use the intersection-observer npm module instead of bundling a copy.
diff --git a/projects/packages/lazy-images/composer.json b/projects/packages/lazy-images/composer.json
index 7b0c959615b98..36960ebee3bdb 100644
--- a/projects/packages/lazy-images/composer.json
+++ b/projects/packages/lazy-images/composer.json
@@ -57,7 +57,7 @@
 			"link-template": "https://github.com/Automattic/jetpack-lazy-images/compare/v${old}...v${new}"
 		},
 		"branch-alias": {
-			"dev-master": "1.4.x-dev"
+			"dev-master": "1.5.x-dev"
 		}
 	}
 }
diff --git a/projects/plugins/jetpack/changelog/update-lazy-images-build-system b/projects/plugins/jetpack/changelog/update-lazy-images-build-system
new file mode 100644
index 0000000000000..1eaea6a769e84
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/update-lazy-images-build-system
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Updated package dependencies.
diff --git a/projects/plugins/jetpack/composer.json b/projects/plugins/jetpack/composer.json
index cd96263167130..d436b906cbb3d 100644
--- a/projects/plugins/jetpack/composer.json
+++ b/projects/plugins/jetpack/composer.json
@@ -27,7 +27,7 @@
 		"automattic/jetpack-heartbeat": "1.3.x-dev",
 		"automattic/jetpack-identity-crisis": "0.1.x-dev",
 		"automattic/jetpack-jitm": "1.16.x-dev",
-		"automattic/jetpack-lazy-images": "1.4.x-dev",
+		"automattic/jetpack-lazy-images": "1.5.x-dev",
 		"automattic/jetpack-licensing": "1.4.x-dev",
 		"automattic/jetpack-logo": "1.5.x-dev",
 		"automattic/jetpack-options": "1.13.x-dev",
diff --git a/projects/plugins/jetpack/composer.lock b/projects/plugins/jetpack/composer.lock
index 44359761fe309..a78ef99ac928b 100644
--- a/projects/plugins/jetpack/composer.lock
+++ b/projects/plugins/jetpack/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "e74ed7c4bb792ba1ccb00d4015429234",
+    "content-hash": "5bbbaae3fb4fea788de38d53169d859e",
     "packages": [
         {
             "name": "automattic/jetpack-a8c-mc-stats",
@@ -859,7 +859,7 @@
             "dist": {
                 "type": "path",
                 "url": "../../packages/lazy-images",
-                "reference": "88de058e96cc2f2ccf727f803c838e83367c6e15"
+                "reference": "949b657ccbf0f096060d9e162374b6320579ee7f"
             },
             "require": {
                 "automattic/jetpack-assets": "^1.11",
@@ -878,7 +878,7 @@
                     "link-template": "https://github.com/Automattic/jetpack-lazy-images/compare/v${old}...v${new}"
                 },
                 "branch-alias": {
-                    "dev-master": "1.4.x-dev"
+                    "dev-master": "1.5.x-dev"
                 }
             },
             "autoload": {