fix(resize): uses `ResizeObserver` if possible

As discussed in #4233, ResizeObserver is now widely available (~90% as
of 15/01/2021, [source](http://caniuse.com/?search=ResizeObserver)) so
we can use it instead of a custom-built solution to listen to resizes.

I also needed to add @types/resize-observer-browser because the type
definition for `ResizeObserver` hasn't landed in TS yet (see
microsoft/TypeScript#28502).

Closes #4233.

package-lock.json

@@ -291,6 +291,12 @@
       "integrity": "sha512-aOmXdv1a1/vYUn1OT1CED8ftbkmmYbKhKGSyMDeJiidLvKRKvZUQOdXwG/wcNY7T1Qb0XTlVdiYjIq00U7pLrQ==",
       "dev": true
     },
+    "@types/resize-observer-browser": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.5.tgz",
+      "integrity": "sha512-8k/67Z95Goa6Lznuykxkfhq9YU3l1Qe6LNZmwde1u7802a3x8v44oq0j91DICclxatTr0rNnhXx7+VTIetSrSQ==",
+      "dev": true
+    },
     "@types/resolve": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",

package.json

@@ -105,6 +105,7 @@
     "@sveltejs/eslint-config": "github:sveltejs/eslint-config#v5.6.0",
     "@types/mocha": "^7.0.0",
     "@types/node": "^8.10.53",
+    "@types/resize-observer-browser": "^0.1.5",
     "@typescript-eslint/eslint-plugin": "^4.9.0",
     "@typescript-eslint/parser": "^4.9.0",
     "acorn": "^7.4.0",

src/compiler/tsconfig.json

@@ -3,9 +3,9 @@
 	"include": ["."],
 
 	"compilerOptions": {
-		"lib": ["es2017", "webworker"]
+		"lib": ["es2017", "webworker"],
 
 		// TODO: remove mocha types from the whole project
-		// "types": ["node", "estree"]
+		"types": ["node", "estree", "mocha"]
 	}
 }

src/runtime/internal/dom.ts

@@ -260,6 +260,19 @@ export function is_crossorigin() {
 }
 
 export function add_resize_listener(node: HTMLElement, fn: () => void) {
+	if (window.ResizeObserver) {
+		const observer = new ResizeObserver(entries => {
+			for (const entry of entries) {
+				if (entry.target === node) {
+					fn();
+					break;
+				}
+			}
+		});
+		observer.observe(node);
+		return observer.disconnect;
+	}
+
 	const computed_style = getComputedStyle(node);
 
 	if (computed_style.position === 'static') {

src/runtime/tsconfig.json

@@ -5,7 +5,7 @@
 	"compilerOptions": {
 		"lib": ["es2015", "dom", "dom.iterable"],
 		"target": "es2015",
-		"types": [],
+		"types": ["resize-observer-browser"],
 
 		"baseUrl": ".",
 		"paths": {