Inject ResizeObserver polyfill where needed (#20754)

build-scripts/babel-plugins/custom-polyfill-plugin.js

@@ -1,4 +1,8 @@
 import defineProvider from "@babel/helper-define-polyfill-provider";
+import { join } from "node:path";
+import paths from "../paths.cjs";
+
+const POLYFILL_DIR = join(paths.polymer_dir, "src/resources/polyfills");
 
 // List of polyfill keys with supported browser targets for the functionality
 const PolyfillSupport = {
@@ -36,14 +40,29 @@ const PolyfillSupport = {
     safari: 10.0,
     samsung: 5.0,
   },
+  "resize-observer": {
+    android: 64,
+    chrome: 64,
+    edge: 79,
+    firefox: 69,
+    ios: 13.4,
+    opera: 51,
+    opera_mobile: 47,
+    safari: 13.1,
+    samsung: 9.0,
+  },
 };
 
 // Map of global variables and/or instance and static properties to the
 // corresponding polyfill key and actual module to import
 const polyfillMap = {
   global: {
-    Proxy: { key: "proxy", module: "proxy-polyfill" },
     fetch: { key: "fetch", module: "unfetch/polyfill" },
+    Proxy: { key: "proxy", module: "proxy-polyfill" },
+    ResizeObserver: {
+      key: "resize-observer",
+      module: join(POLYFILL_DIR, "resize-observer.ts"),
+    },
   },
   instance: {
     attachInternals: {

build-scripts/bundle.cjs

@@ -147,7 +147,7 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
   overrides: [
     {
       // Add plugin to inject various polyfills, excluding the polyfills
-      // themselves to prevent self- injection.
+      // themselves to prevent self-injection.
       plugins: [
         [
           path.join(BABEL_PLUGINS, "custom-polyfill-plugin.js"),
@@ -155,11 +155,15 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
         ],
       ],
       exclude: [
-        "@webcomponents/scoped-custom-element-registry",
-        "element-internals-polyfill",
-        "proxy-polyfill",
-        "unfetch",
-      ].map((p) => new RegExp(`/node_modules/${p}/`)),
+        path.join(paths.polymer_dir, "src/resources/polyfills"),
+        ...[
+          "@lit-labs/virtualizer/polyfills",
+          "@webcomponents/scoped-custom-element-registry",
+          "element-internals-polyfill",
+          "proxy-polyfill",
+          "unfetch",
+        ].map((p) => new RegExp(`/node_modules/${p}/`)),
+      ],
     },
     {
       // Use unambiguous for dependencies so that require() is correctly injected into CommonJS files