From edd8d9da78b20050095f5e5801b29b44b3e3400d Mon Sep 17 00:00:00 2001
From: Henrik Wenz <henrik.wenz@gmail.com>
Date: Sun, 4 Sep 2022 10:07:49 +0200
Subject: [PATCH 1/2] Update react

---
 examples/image-component/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/image-component/package.json b/examples/image-component/package.json
index f9170ae254fa3b5..65f904f0513c2f6 100644
--- a/examples/image-component/package.json
+++ b/examples/image-component/package.json
@@ -7,7 +7,7 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

From 45dbdf85f8235479e5c25d454515910981f17c3f Mon Sep 17 00:00:00 2001
From: Henrik Wenz <henrik.wenz@gmail.com>
Date: Sun, 4 Sep 2022 10:20:24 +0200
Subject: [PATCH 2/2] Migrate to typescript

---
 .../{view-source.js => view-source.tsx}       | 12 ++++++++----
 examples/image-component/package.json         |  5 +++++
 examples/image-component/pages/_app.js        |  5 -----
 examples/image-component/pages/_app.tsx       |  6 ++++++
 .../pages/{background.js => background.tsx}   | 12 ++++++------
 .../pages/{color.js => color.tsx}             |  6 +++---
 .../pages/{index.js => index.tsx}             |  7 +++++--
 .../pages/{layout-fill.js => layout-fill.tsx} |  2 +-
 .../{layout-fixed.js => layout-fixed.tsx}     |  2 +-
 ...yout-intrinsic.js => layout-intrinsic.tsx} |  2 +-
 ...ut-responsive.js => layout-responsive.tsx} |  2 +-
 .../pages/{placeholder.js => placeholder.tsx} |  2 +-
 .../pages/{shimmer.js => shimmer.tsx}         |  6 +++---
 examples/image-component/tsconfig.json        | 19 +++++++++++++++++++
 14 files changed, 60 insertions(+), 28 deletions(-)
 rename examples/image-component/components/{view-source.js => view-source.tsx} (77%)
 delete mode 100644 examples/image-component/pages/_app.js
 create mode 100644 examples/image-component/pages/_app.tsx
 rename examples/image-component/pages/{background.js => background.tsx} (59%)
 rename examples/image-component/pages/{color.js => color.tsx} (85%)
 rename examples/image-component/pages/{index.js => index.tsx} (95%)
 rename examples/image-component/pages/{layout-fill.js => layout-fill.tsx} (94%)
 rename examples/image-component/pages/{layout-fixed.js => layout-fixed.tsx} (87%)
 rename examples/image-component/pages/{layout-intrinsic.js => layout-intrinsic.tsx} (86%)
 rename examples/image-component/pages/{layout-responsive.js => layout-responsive.tsx} (86%)
 rename examples/image-component/pages/{placeholder.js => placeholder.tsx} (88%)
 rename examples/image-component/pages/{shimmer.js => shimmer.tsx} (89%)
 create mode 100644 examples/image-component/tsconfig.json

diff --git a/examples/image-component/components/view-source.js b/examples/image-component/components/view-source.tsx
similarity index 77%
rename from examples/image-component/components/view-source.js
rename to examples/image-component/components/view-source.tsx
index be1d66f32389b0f..7b316f9d0cc5fe5 100644
--- a/examples/image-component/components/view-source.js
+++ b/examples/image-component/components/view-source.tsx
@@ -1,13 +1,17 @@
-import { svg, arm } from './view-source.module.css'
+import styles from './view-source.module.css'
 
-const ViewSource = ({ pathname }) => (
+type ViewSourceProps = {
+  pathname: string
+}
+
+const ViewSource = ({ pathname }: ViewSourceProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="80"
     height="80"
     viewBox="0 0 250 250"
     fill="#151513"
-    className={svg}
+    className={styles.svg}
   >
     <a
       title="View Source"
@@ -15,7 +19,7 @@ const ViewSource = ({ pathname }) => (
     >
       <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#fff" />
       <path
-        className={arm}
+        className={styles.arm}
         d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
       />
       <path d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z" />
diff --git a/examples/image-component/package.json b/examples/image-component/package.json
index 65f904f0513c2f6..e800958c5882982 100644
--- a/examples/image-component/package.json
+++ b/examples/image-component/package.json
@@ -9,5 +9,10 @@
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.7.14",
+    "@types/react": "16.9.17",
+    "typescript": "4.8.2"
   }
 }
diff --git a/examples/image-component/pages/_app.js b/examples/image-component/pages/_app.js
deleted file mode 100644
index 14b610ee850f674..000000000000000
--- a/examples/image-component/pages/_app.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import '../app.css'
-
-export default function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
-}
diff --git a/examples/image-component/pages/_app.tsx b/examples/image-component/pages/_app.tsx
new file mode 100644
index 000000000000000..bde43d8134e74d8
--- /dev/null
+++ b/examples/image-component/pages/_app.tsx
@@ -0,0 +1,6 @@
+import type { AppProps } from 'next/app'
+import '../app.css'
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
diff --git a/examples/image-component/pages/background.js b/examples/image-component/pages/background.tsx
similarity index 59%
rename from examples/image-component/pages/background.js
rename to examples/image-component/pages/background.tsx
index b3e05ab83890cdb..d3c0d8dc1226708 100644
--- a/examples/image-component/pages/background.js
+++ b/examples/image-component/pages/background.tsx
@@ -1,11 +1,11 @@
 import Image from 'next/image'
 import ViewSource from '../components/view-source'
-import { bgWrap, bgText } from '../styles.module.css'
+import styles from '../styles.module.css'
 
-const Background = () => (
+const BackgroundPage = () => (
   <div>
-    <ViewSource pathname="pages/background.js" />
-    <div className={bgWrap}>
+    <ViewSource pathname="pages/background.tsx" />
+    <div className={styles.bgWrap}>
       <Image
         alt="Mountains"
         src="/mountains.jpg"
@@ -14,7 +14,7 @@ const Background = () => (
         quality={100}
       />
     </div>
-    <p className={bgText}>
+    <p className={styles.bgText}>
       Image Component
       <br />
       as a Background
@@ -22,4 +22,4 @@ const Background = () => (
   </div>
 )
 
-export default Background
+export default BackgroundPage
diff --git a/examples/image-component/pages/color.js b/examples/image-component/pages/color.tsx
similarity index 85%
rename from examples/image-component/pages/color.js
rename to examples/image-component/pages/color.tsx
index dca5d6d3b9722b0..b04797028014530 100644
--- a/examples/image-component/pages/color.js
+++ b/examples/image-component/pages/color.tsx
@@ -5,20 +5,20 @@ import ViewSource from '../components/view-source'
 const keyStr =
   'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
 
-const triplet = (e1, e2, e3) =>
+const triplet = (e1: number, e2: number, e3: number) =>
   keyStr.charAt(e1 >> 2) +
   keyStr.charAt(((e1 & 3) << 4) | (e2 >> 4)) +
   keyStr.charAt(((e2 & 15) << 2) | (e3 >> 6)) +
   keyStr.charAt(e3 & 63)
 
-const rgbDataURL = (r, g, b) =>
+const rgbDataURL = (r: number, g: number, b: number) =>
   `data:image/gif;base64,R0lGODlhAQABAPAA${
     triplet(0, r, g) + triplet(b, 255, 255)
   }/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`
 
 const Color = () => (
   <div>
-    <ViewSource pathname="pages/color.js" />
+    <ViewSource pathname="pages/color.tsx" />
     <h1>Image Component With Color Data URL</h1>
     <Image
       alt="Dog"
diff --git a/examples/image-component/pages/index.js b/examples/image-component/pages/index.tsx
similarity index 95%
rename from examples/image-component/pages/index.js
rename to examples/image-component/pages/index.tsx
index a676dc866602187..55e23411e7d21cd 100644
--- a/examples/image-component/pages/index.js
+++ b/examples/image-component/pages/index.tsx
@@ -3,12 +3,15 @@ import Image from 'next/image'
 import Link from 'next/link'
 import ViewSource from '../components/view-source'
 import vercel from '../public/vercel.png'
+import type { PropsWithChildren } from 'react'
 
-const Code = (p) => <code className={styles.inlineCode} {...p} />
+const Code = (props: PropsWithChildren) => (
+  <code className={styles.inlineCode} {...props} />
+)
 
 const Index = () => (
   <div className={styles.container}>
-    <ViewSource pathname="pages/index.js" />
+    <ViewSource pathname="pages/index.tsx" />
     <div className={styles.card}>
       <h1>Image Component with Next.js</h1>
       <p>
diff --git a/examples/image-component/pages/layout-fill.js b/examples/image-component/pages/layout-fill.tsx
similarity index 94%
rename from examples/image-component/pages/layout-fill.js
rename to examples/image-component/pages/layout-fill.tsx
index 526723d427f8419..dca195e8096c426 100644
--- a/examples/image-component/pages/layout-fill.js
+++ b/examples/image-component/pages/layout-fill.tsx
@@ -4,7 +4,7 @@ import mountains from '../public/mountains.jpg'
 
 const Fill = () => (
   <div>
-    <ViewSource pathname="pages/layout-fill.js" />
+    <ViewSource pathname="pages/layout-fill.tsx" />
     <h1>Image Component With Layout Fill</h1>
     <div style={{ position: 'relative', width: '300px', height: '500px' }}>
       <Image alt="Mountains" src={mountains} layout="fill" objectFit="cover" />
diff --git a/examples/image-component/pages/layout-fixed.js b/examples/image-component/pages/layout-fixed.tsx
similarity index 87%
rename from examples/image-component/pages/layout-fixed.js
rename to examples/image-component/pages/layout-fixed.tsx
index cd5e26d8b4e3595..bff5459735662fb 100644
--- a/examples/image-component/pages/layout-fixed.js
+++ b/examples/image-component/pages/layout-fixed.tsx
@@ -4,7 +4,7 @@ import mountains from '../public/mountains.jpg'
 
 const Fixed = () => (
   <div>
-    <ViewSource pathname="pages/layout-fixed.js" />
+    <ViewSource pathname="pages/layout-fixed.tsx" />
     <h1>Image Component With Layout Fixed</h1>
     <Image
       alt="Mountains"
diff --git a/examples/image-component/pages/layout-intrinsic.js b/examples/image-component/pages/layout-intrinsic.tsx
similarity index 86%
rename from examples/image-component/pages/layout-intrinsic.js
rename to examples/image-component/pages/layout-intrinsic.tsx
index 1ebfeb98a773410..fa0ecbbfa4c7f8a 100644
--- a/examples/image-component/pages/layout-intrinsic.js
+++ b/examples/image-component/pages/layout-intrinsic.tsx
@@ -4,7 +4,7 @@ import mountains from '../public/mountains.jpg'
 
 const Intrinsic = () => (
   <div>
-    <ViewSource pathname="pages/layout-intrinsic.js" />
+    <ViewSource pathname="pages/layout-intrinsic.tsx" />
     <h1>Image Component With Layout Intrinsic</h1>
     <Image
       alt="Mountains"
diff --git a/examples/image-component/pages/layout-responsive.js b/examples/image-component/pages/layout-responsive.tsx
similarity index 86%
rename from examples/image-component/pages/layout-responsive.js
rename to examples/image-component/pages/layout-responsive.tsx
index 4cfc6462afc74d5..7d5e3decb71bbc3 100644
--- a/examples/image-component/pages/layout-responsive.js
+++ b/examples/image-component/pages/layout-responsive.tsx
@@ -4,7 +4,7 @@ import mountains from '../public/mountains.jpg'
 
 const Responsive = () => (
   <div>
-    <ViewSource pathname="pages/layout-responsive.js" />
+    <ViewSource pathname="pages/layout-responsive.tsx" />
     <h1>Image Component With Layout Responsive</h1>
     <Image
       alt="Mountains"
diff --git a/examples/image-component/pages/placeholder.js b/examples/image-component/pages/placeholder.tsx
similarity index 88%
rename from examples/image-component/pages/placeholder.js
rename to examples/image-component/pages/placeholder.tsx
index f044b3138dd7769..9d5d9c0fa326e74 100644
--- a/examples/image-component/pages/placeholder.js
+++ b/examples/image-component/pages/placeholder.tsx
@@ -4,7 +4,7 @@ import mountains from '../public/mountains.jpg'
 
 const PlaceholderBlur = () => (
   <div>
-    <ViewSource pathname="pages/placeholder.js" />
+    <ViewSource pathname="pages/placeholder.tsx" />
     <h1>Image Component With Placeholder Blur</h1>
     <Image
       alt="Mountains"
diff --git a/examples/image-component/pages/shimmer.js b/examples/image-component/pages/shimmer.tsx
similarity index 89%
rename from examples/image-component/pages/shimmer.js
rename to examples/image-component/pages/shimmer.tsx
index f38e018e4ddc70f..b53990982c7b51e 100644
--- a/examples/image-component/pages/shimmer.js
+++ b/examples/image-component/pages/shimmer.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image'
 import ViewSource from '../components/view-source'
 
-const shimmer = (w, h) => `
+const shimmer = (w: number, h: number) => `
 <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
     <linearGradient id="g">
@@ -15,14 +15,14 @@ const shimmer = (w, h) => `
   <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
 </svg>`
 
-const toBase64 = (str) =>
+const toBase64 = (str: string) =>
   typeof window === 'undefined'
     ? Buffer.from(str).toString('base64')
     : window.btoa(str)
 
 const Shimmer = () => (
   <div>
-    <ViewSource pathname="pages/shimmer.js" />
+    <ViewSource pathname="pages/shimmer.tsx" />
     <h1>Image Component With Shimmer Data URL</h1>
     <Image
       alt="Mountains"
diff --git a/examples/image-component/tsconfig.json b/examples/image-component/tsconfig.json
new file mode 100644
index 000000000000000..3859fdbcde1ff0e
--- /dev/null
+++ b/examples/image-component/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}