Skip to content

Commit d0fc673

Browse files
HaNdTriXHaNdTriX
authored
[Docs] Migrate image-component example to typescript (vercel#40204)
<!-- Thanks for opening a PR! Your contribution is much appreciated. In order to make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below. Choose the right checklist for the change that you're making: --> @styfle as suggested here the TS PR. > I suggest creating the first PR that is just JS => TS. > > The create a second PR that makes style changes. > ## Changelog - Update react - Migrated to typescript ## Related vercel#40153 ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm lint` - [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
1 parent 5a04e82 commit d0fc673

File tree

14 files changed

+62
-30
lines changed

14 files changed

+62
-30
lines changed

examples/image-component/components/view-source.js renamed to examples/image-component/components/view-source.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
1-
import { svg, arm } from './view-source.module.css'
1+
import styles from './view-source.module.css'
22

3-
const ViewSource = ({ pathname }) => (
3+
type ViewSourceProps = {
4+
pathname: string
5+
}
6+
7+
const ViewSource = ({ pathname }: ViewSourceProps) => (
48
<svg
59
xmlns="http://www.w3.org/2000/svg"
610
width="80"
711
height="80"
812
viewBox="0 0 250 250"
913
fill="#151513"
10-
className={svg}
14+
className={styles.svg}
1115
>
1216
<a
1317
title="View Source"
1418
href={`https://github.com/vercel/next.js/tree/canary/examples/image-component/${pathname}`}
1519
>
1620
<path d="M0 0l115 115h15l12 27 108 108V0z" fill="#fff" />
1721
<path
18-
className={arm}
22+
className={styles.arm}
1923
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"
2024
/>
2125
<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" />

‎examples/image-component/package.json‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,12 @@
77
},
88
"dependencies": {
99
"next": "latest",
10-
"react": "^17.0.2",
11-
"react-dom": "^17.0.2"
10+
"react": "^18.2.0",
11+
"react-dom": "^18.2.0"
12+
},
13+
"devDependencies": {
14+
"@types/node": "18.7.14",
15+
"@types/react": "16.9.17",
16+
"typescript": "4.8.2"
1217
}
1318
}

‎examples/image-component/pages/_app.js‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎examples/image-component/pages/_app.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import type { AppProps } from 'next/app'
2+
import '../app.css'
3+
4+
export default function MyApp({ Component, pageProps }: AppProps) {
5+
return <Component {...pageProps} />
6+
}

examples/image-component/pages/background.js renamed to examples/image-component/pages/background.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import Image from 'next/image'
22
import ViewSource from '../components/view-source'
3-
import { bgWrap, bgText } from '../styles.module.css'
3+
import styles from '../styles.module.css'
44

5-
const Background = () => (
5+
const BackgroundPage = () => (
66
<div>
7-
<ViewSource pathname="pages/background.js" />
8-
<div className={bgWrap}>
7+
<ViewSource pathname="pages/background.tsx" />
8+
<div className={styles.bgWrap}>
99
<Image
1010
alt="Mountains"
1111
src="/mountains.jpg"
@@ -14,12 +14,12 @@ const Background = () => (
1414
quality={100}
1515
/>
1616
</div>
17-
<p className={bgText}>
17+
<p className={styles.bgText}>
1818
Image Component
1919
<br />
2020
as a Background
2121
</p>
2222
</div>
2323
)
2424

25-
export default Background
25+
export default BackgroundPage

examples/image-component/pages/color.js renamed to examples/image-component/pages/color.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,20 @@ import ViewSource from '../components/view-source'
55
const keyStr =
66
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
77

8-
const triplet = (e1, e2, e3) =>
8+
const triplet = (e1: number, e2: number, e3: number) =>
99
keyStr.charAt(e1 >> 2) +
1010
keyStr.charAt(((e1 & 3) << 4) | (e2 >> 4)) +
1111
keyStr.charAt(((e2 & 15) << 2) | (e3 >> 6)) +
1212
keyStr.charAt(e3 & 63)
1313

14-
const rgbDataURL = (r, g, b) =>
14+
const rgbDataURL = (r: number, g: number, b: number) =>
1515
`data:image/gif;base64,R0lGODlhAQABAPAA${
1616
triplet(0, r, g) + triplet(b, 255, 255)
1717
}/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`
1818

1919
const Color = () => (
2020
<div>
21-
<ViewSource pathname="pages/color.js" />
21+
<ViewSource pathname="pages/color.tsx" />
2222
<h1>Image Component With Color Data URL</h1>
2323
<Image
2424
alt="Dog"

examples/image-component/pages/index.js renamed to examples/image-component/pages/index.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,15 @@ import Image from 'next/image'
33
import Link from 'next/link'
44
import ViewSource from '../components/view-source'
55
import vercel from '../public/vercel.png'
6+
import type { PropsWithChildren } from 'react'
67

7-
const Code = (p) => <code className={styles.inlineCode} {...p} />
8+
const Code = (props: PropsWithChildren) => (
9+
<code className={styles.inlineCode} {...props} />
10+
)
811

912
const Index = () => (
1013
<div className={styles.container}>
11-
<ViewSource pathname="pages/index.js" />
14+
<ViewSource pathname="pages/index.tsx" />
1215
<div className={styles.card}>
1316
<h1>Image Component with Next.js</h1>
1417
<p>

examples/image-component/pages/layout-fill.js renamed to examples/image-component/pages/layout-fill.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import mountains from '../public/mountains.jpg'
44

55
const Fill = () => (
66
<div>
7-
<ViewSource pathname="pages/layout-fill.js" />
7+
<ViewSource pathname="pages/layout-fill.tsx" />
88
<h1>Image Component With Layout Fill</h1>
99
<div style={{ position: 'relative', width: '300px', height: '500px' }}>
1010
<Image alt="Mountains" src={mountains} layout="fill" objectFit="cover" />

examples/image-component/pages/layout-fixed.js renamed to examples/image-component/pages/layout-fixed.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import mountains from '../public/mountains.jpg'
44

55
const Fixed = () => (
66
<div>
7-
<ViewSource pathname="pages/layout-fixed.js" />
7+
<ViewSource pathname="pages/layout-fixed.tsx" />
88
<h1>Image Component With Layout Fixed</h1>
99
<Image
1010
alt="Mountains"

examples/image-component/pages/layout-intrinsic.js renamed to examples/image-component/pages/layout-intrinsic.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import mountains from '../public/mountains.jpg'
44

55
const Intrinsic = () => (
66
<div>
7-
<ViewSource pathname="pages/layout-intrinsic.js" />
7+
<ViewSource pathname="pages/layout-intrinsic.tsx" />
88
<h1>Image Component With Layout Intrinsic</h1>
99
<Image
1010
alt="Mountains"

0 commit comments

Comments
 (0)