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