Replace element-resize-detector with native ResizeObserver API
MODIFY
lib/project/list-view.js
lib/project/list-view.js
const etch = require('etch');
const $ = etch.dom;
-const resizeDetector = require('element-resize-detector');
module.exports = class ListView {
constructor({items, heightForItem, itemComponent, className}) {
@@ -12,7 +11,8 @@ module.exports = class ListView {
this.previousClientHeight = 0
etch.initialize(this);
- resizeDetector({strategy: 'scroll'}).listenTo(this.element, () => etch.update(this));
+ const resizeObserver = new ResizeObserver(() => etch.update(this));
+ resizeObserver.observe(this.element);
this.element.addEventListener('scroll', () => etch.update(this));
}

MODIFY
lib/project/results-view.js
lib/project/results-view.js
@@ -10,7 +10,6 @@ const {
const ListView = require('./list-view');
const etch = require('etch');
-const resizeDetector = require('element-resize-detector');
const binarySearch = require('binary-search')
const path = require('path');
@@ -63,10 +62,8 @@ class ResultsView {
etch.initialize(this);
- resizeDetector({strategy: 'scroll'}).listenTo(
- this.element,
- this.invalidateItemHeights.bind(this)
- );
+ const resizeObserver = new ResizeObserver(this.invalidateItemHeights.bind(this));
+ resizeObserver.observe(this.element);
this.element.addEventListener('mousedown', this.handleClick.bind(this));
this.subscriptions = new CompositeDisposable(

MODIFY
package-lock.json
package-lock.json
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
},
- "batch-processor": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
- "integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg="
- },
"binary-search": {
"version": "1.3.4",
"resolved": "https://registry.npmjs.org/binary-search/-/binary-search-1.3.4.tgz",
"integrity": "sha1-Dm2o8M5Sg471zsXI+TlrDBtko8s=",
"dev": true
},
- "element-resize-detector": {
- "version": "1.1.12",
- "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.1.12.tgz",
- "integrity": "sha1-iz/W7t2hf5wAs2Cg6i35knroC6I=",
- "requires": {
- "batch-processor": "^1.0.0"
- }
- },
"etch": {
"version": "0.9.3",
"resolved": "https://registry.npmjs.org/etch/-/etch-0.9.3.tgz",

MODIFY
package.json
package.json
},
"dependencies": {
"binary-search": "^1.3.3",
- "element-resize-detector": "^1.1.10",
"etch": "0.9.3",
"fs-plus": "^3.0.0",
"temp": "^0.8.3",

MODIFY
spec/project-find-view-spec.js
spec/project-find-view-spec.js
@@ -22,10 +22,6 @@ describe(`ProjectFindView (ripgrep=${ripgrep})`, () => {
function getExistingResultsPane() {
const pane = atom.workspace.paneForURI(ResultsPaneView.URI);
if (pane) {
-
- // Allow element-resize-detector to perform batched measurements
- advanceClock(1);
-
return pane.itemForURI(ResultsPaneView.URI);
}
}

MODIFY
spec/results-view-spec.js
spec/results-view-spec.js
@@ -24,10 +24,6 @@ describe('ResultsView', () => {
function getResultsPane() {
let pane = atom.workspace.paneForURI(ResultsPaneView.URI);
-
- // Allow element-resize-detector to perform batched measurements
- advanceClock(1);
-
if (pane) return pane.itemForURI(ResultsPaneView.URI);
}

Replace element-resize-detector with native ResizeObserver API

Co-Authored-By: Antonio Scandurra <as-cii@github.com>