Remove IntersectionObserver polyfill (#380)

.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

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",

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') });
+  });
+}