From e3583465b99bc46fabd3fb7bf75171651ae45179 Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Mon, 26 Feb 2024 14:35:36 +0000
Subject: [PATCH] Examples: Remove polyfill.io example (#875)

Removes polyfill.io example. We don't recommend it Next.js in general.
See:
https://github.com/vercel/next.js/blob/bbf6dfac615ae50b1db87a02a1179a2808ba0746/errors/no-unwanted-polyfillio.mdx
---
 .../pages/index.tsx                           | 14 -----
 .../pages/polyfill.tsx                        | 57 -------------------
 2 files changed, 71 deletions(-)
 delete mode 100644 solutions/script-component-strategies/pages/polyfill.tsx

diff --git a/solutions/script-component-strategies/pages/index.tsx b/solutions/script-component-strategies/pages/index.tsx
index cfc07c271..058aba2b7 100644
--- a/solutions/script-component-strategies/pages/index.tsx
+++ b/solutions/script-component-strategies/pages/index.tsx
@@ -59,20 +59,6 @@ function Home() {
 
       <hr className="border-t border-accents-2 my-6" />
 
-      <section id="beforeInteractive" className="flex flex-col gap-3">
-        <Text variant="h2">beforeInteractive examples</Text>
-        <List>
-          <li>
-            Polyfill: <Link href="/polyfill">Demo</Link> -{' '}
-            <Link href="https://github.com/vercel/examples/blob/main/solutions/script-component-strategies/pages/polyfill.tsx">
-              Code
-            </Link>
-          </li>
-        </List>
-      </section>
-
-      <hr className="border-t border-accents-2 my-6" />
-
       <section id="afterInteractive" className="flex flex-col gap-3">
         <Text variant="h2">afterInteractive examples</Text>
         <List>
diff --git a/solutions/script-component-strategies/pages/polyfill.tsx b/solutions/script-component-strategies/pages/polyfill.tsx
deleted file mode 100644
index c2c248645..000000000
--- a/solutions/script-component-strategies/pages/polyfill.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import Script from 'next/script'
-import { Layout, Page, Text } from '@vercel/examples-ui'
-
-function Polyfill() {
-  const ref = useRef<HTMLSpanElement>(null)
-  const [lastIntersection, setIntersection] = useState(new Date())
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      (intersections) => {
-        const isIntersecting = intersections[0]?.isIntersecting
-
-        if (isIntersecting) {
-          setIntersection(new Date())
-        }
-      },
-      {
-        rootMargin: '45px',
-      }
-    )
-
-    if (ref.current) {
-      observer.observe(ref.current)
-    }
-
-    return () => observer.disconnect()
-  }, [])
-
-  return (
-    <>
-      {/* We ensure that intersection observer is available by polyfilling it */}
-      <Script
-        src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserverEntry%2CIntersectionObserver"
-        strategy="beforeInteractive"
-      />
-      <Page>
-        <section className="flex flex-col gap-6">
-          <Text variant="h1">IntersectionObserver polyfill</Text>
-          <Text>Scroll down to see when was the last intersection</Text>
-        </section>
-        <section
-          className="flex items-center justify-center"
-          style={{ height: '300vh' }}
-        >
-          <span ref={ref}>
-            Last intersection at {lastIntersection.toTimeString()}
-          </span>
-        </section>
-      </Page>
-    </>
-  )
-}
-
-Polyfill.Layout = Layout
-
-export default Polyfill