From 23470cdb472f16d60c5ef1fb47d4cd49d24a6b6d Mon Sep 17 00:00:00 2001
From: Adam Skoufis <askoufis@seek.com.au>
Date: Tue, 10 Dec 2024 11:13:54 +1100
Subject: [PATCH] Remove `IntersectionObserver` polyfill

---
 .changeset/twelve-stingrays-train.md |   9 ++
 package.json                         |   1 -
 pnpm-lock.yaml                       |   7 --
 src/index.js                         | 119 +++++++++++++--------------
 4 files changed, 64 insertions(+), 72 deletions(-)
 create mode 100644 .changeset/twelve-stingrays-train.md

diff --git a/.changeset/twelve-stingrays-train.md b/.changeset/twelve-stingrays-train.md
new file mode 100644
index 00000000..2663124b
--- /dev/null
+++ b/.changeset/twelve-stingrays-train.md
@@ -0,0 +1,9 @@
+---
+'playroom': minor
+---
+
+Drop support for browser versions that do not support the `IntersectionObserver` API
+
+Playroom no longer provides a polyfill for [`IntersectionObserver`].
+
+[`intersectionobserver`]: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
diff --git a/package.json b/package.json
index 6f3813f7..73e4b920 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,6 @@
     "fuzzy": "^0.1.3",
     "history": "^5.3.0",
     "html-webpack-plugin": "^5.5.0",
-    "intersection-observer": "^0.12.2",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 92f590a6..c87fff40 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -98,9 +98,6 @@ dependencies:
   html-webpack-plugin:
     specifier: ^5.5.0
     version: 5.5.0(webpack@5.75.0)
-  intersection-observer:
-    specifier: ^0.12.2
-    version: 0.12.2
   localforage:
     specifier: ^1.10.0
     version: 1.10.0
@@ -6426,10 +6423,6 @@ packages:
       side-channel: 1.0.4
     dev: true
 
-  /intersection-observer@0.12.2:
-    resolution: {integrity: sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==}
-    dev: false
-
   /ipaddr.js@1.9.1:
     resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
     engines: {node: '>= 0.10'}
diff --git a/src/index.js b/src/index.js
index 4bd28845..cafb1ac6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,67 +5,58 @@ import playroomConfig from './config';
 import faviconPath from '../images/favicon.png';
 import faviconInvertedPath from '../images/favicon-inverted.png';
 
-const polyfillIntersectionObserver = () =>
-  typeof window.IntersectionObserver !== 'undefined'
-    ? Promise.resolve()
-    : import('intersection-observer');
-
-polyfillIntersectionObserver().then(() => {
-  const widths = playroomConfig.widths || [320, 375, 768, 1024];
-
-  const outlet = document.createElement('div');
-  document.body.appendChild(outlet);
-
-  const selectedElement = document.head.querySelector('link[rel="icon"]');
-  const favicon = window.matchMedia('(prefers-color-scheme: dark)').matches
-    ? faviconInvertedPath
-    : faviconPath;
-
-  if (selectedElement) {
-    selectedElement.setAttribute('href', favicon);
-  }
-
-  const renderPlayroom = ({
-    themes = require('./themes'),
-    components = require('./components'),
-    snippets = require('./snippets'),
-  } = {}) => {
-    const themeNames = Object.keys(themes);
-
-    // Exclude undefined components, e.g. an exported TypeScript type.
-    const filteredComponents = Object.fromEntries(
-      Object.entries(components).filter(([_, value]) => value)
-    );
-
-    renderElement(
-      <StoreProvider themes={themeNames} widths={widths}>
-        <Playroom
-          components={filteredComponents}
-          widths={widths}
-          themes={themeNames}
-          snippets={
-            typeof snippets.default !== 'undefined'
-              ? snippets.default
-              : snippets
-          }
-        />
-      </StoreProvider>,
-      outlet
-    );
-  };
-  renderPlayroom();
-
-  if (module.hot) {
-    module.hot.accept('./components', () => {
-      renderPlayroom({ components: require('./components') });
-    });
-
-    module.hot.accept('./themes', () => {
-      renderPlayroom({ themes: require('./themes') });
-    });
-
-    module.hot.accept('./snippets', () => {
-      renderPlayroom({ snippets: require('./snippets') });
-    });
-  }
-});
+const widths = playroomConfig.widths || [320, 375, 768, 1024];
+
+const outlet = document.createElement('div');
+document.body.appendChild(outlet);
+
+const selectedElement = document.head.querySelector('link[rel="icon"]');
+const favicon = window.matchMedia('(prefers-color-scheme: dark)').matches
+  ? faviconInvertedPath
+  : faviconPath;
+
+if (selectedElement) {
+  selectedElement.setAttribute('href', favicon);
+}
+
+const renderPlayroom = ({
+  themes = require('./themes'),
+  components = require('./components'),
+  snippets = require('./snippets'),
+} = {}) => {
+  const themeNames = Object.keys(themes);
+
+  // Exclude undefined components, e.g. an exported TypeScript type.
+  const filteredComponents = Object.fromEntries(
+    Object.entries(components).filter(([_, value]) => value)
+  );
+
+  renderElement(
+    <StoreProvider themes={themeNames} widths={widths}>
+      <Playroom
+        components={filteredComponents}
+        widths={widths}
+        themes={themeNames}
+        snippets={
+          typeof snippets.default !== 'undefined' ? snippets.default : snippets
+        }
+      />
+    </StoreProvider>,
+    outlet
+  );
+};
+renderPlayroom();
+
+if (module.hot) {
+  module.hot.accept('./components', () => {
+    renderPlayroom({ components: require('./components') });
+  });
+
+  module.hot.accept('./themes', () => {
+    renderPlayroom({ themes: require('./themes') });
+  });
+
+  module.hot.accept('./snippets', () => {
+    renderPlayroom({ snippets: require('./snippets') });
+  });
+}