Skip to content

Commit 07d3da1

Browse files
maxproskemaxproske
authored
Convert with-cssed, with-csx, with-styled-jsx examples to TypeScript (vercel#43018)
Updated 3 more examples to TypeScript. Changes to individual examples pushed as separate commits. - Swapped `cxs/lite` for `cxs`, as it's the only mode supported by `@types/cxs`. ## Documentation / Examples - [X] Make sure the linting passes by running `pnpm build && pnpm lint` - [X] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
1 parent 0a2ae76 commit 07d3da1

File tree

13 files changed

+123
-41
lines changed

13 files changed

+123
-41
lines changed

‎examples/with-cssed/.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,6 @@ yarn-error.log*
3434
# typescript
3535
*.tsbuildinfo
3636
next-env.d.ts
37+
38+
# cssed compilation artifacts
39+
.*.module.css

‎examples/with-cssed/lib/theme.js ‎examples/with-cssed/lib/theme.ts

File renamed without changes.

‎examples/with-cssed/package.json

+8-3
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,16 @@
66
"start": "next start"
77
},
88
"dependencies": {
9-
"@types/react": "^16.9.48",
10-
"babel-plugin-macros": "^2.8.0",
11-
"cssed": "^1.1.2",
9+
"babel-plugin-macros": "^3.1.0",
10+
"cssed": "^1.1.5",
1211
"next": "latest",
1312
"react": "^18.2.0",
1413
"react-dom": "^18.2.0"
14+
},
15+
"devDependencies": {
16+
"@types/node": "^18.11.9",
17+
"@types/react": "^18.0.25",
18+
"@types/react-dom": "^18.0.9",
19+
"typescript": "^4.9.3"
1520
}
1621
}

‎examples/with-cssed/pages/index.js ‎examples/with-cssed/pages/index.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,14 @@ const styles = css`
3131

3232
export default function Home() {
3333
const [isDark, setDark] = useState(false)
34+
3435
return (
3536
<>
3637
<Head>
3738
<title>With cssed</title>
3839
</Head>
3940
<div
40-
onClick={() => setDark(!isDark)}
41+
onClick={() => setDark((prevState) => !prevState)}
4142
className={styles.box + ' ' + (isDark ? styles.dark : styles.light)}
4243
>
4344
Cssed demo

‎examples/with-cssed/tsconfig.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"lib": ["dom", "dom.iterable", "esnext"],
5+
"allowJs": true,
6+
"skipLibCheck": true,
7+
"strict": false,
8+
"forceConsistentCasingInFileNames": true,
9+
"noEmit": true,
10+
"esModuleInterop": true,
11+
"module": "esnext",
12+
"moduleResolution": "node",
13+
"resolveJsonModule": true,
14+
"isolatedModules": true,
15+
"jsx": "preserve",
16+
"incremental": true
17+
},
18+
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
19+
"exclude": ["node_modules"]
20+
}

‎examples/with-cxs/package.json

+8-1
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,16 @@
66
"start": "next start"
77
},
88
"dependencies": {
9-
"cxs": "^3.0.0",
9+
"cxs": "^6.2.0",
1010
"next": "latest",
1111
"react": "^18.2.0",
1212
"react-dom": "^18.2.0"
13+
},
14+
"devDependencies": {
15+
"@types/cxs": "^6.2.1",
16+
"@types/node": "^18.11.9",
17+
"@types/react": "^18.0.25",
18+
"@types/react-dom": "^18.0.9",
19+
"typescript": "^4.9.3"
1320
}
1421
}

‎examples/with-cxs/pages/_document.js

-27
This file was deleted.

‎examples/with-cxs/pages/_document.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import type { DocumentContext, DocumentInitialProps } from 'next/document'
2+
import Document, { Html, Head, Main, NextScript } from 'next/document'
3+
import cxs from 'cxs'
4+
5+
export default class MyDocument extends Document {
6+
static async getInitialProps(
7+
ctx: DocumentContext
8+
): Promise<DocumentInitialProps> {
9+
const initialProps = await Document.getInitialProps(ctx)
10+
const styles = cxs.css()
11+
cxs.reset()
12+
13+
return {
14+
...initialProps,
15+
styles: (
16+
<>
17+
{initialProps.styles}
18+
<style dangerouslySetInnerHTML={{ __html: styles }} />
19+
</>
20+
),
21+
}
22+
}
23+
24+
render() {
25+
return (
26+
<Html>
27+
<Head />
28+
<body>
29+
<Main />
30+
<NextScript />
31+
</body>
32+
</Html>
33+
)
34+
}
35+
}

‎examples/with-cxs/pages/index.js ‎examples/with-cxs/pages/index.tsx

+1-9
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,4 @@
1-
import cxs from 'cxs/lite'
2-
3-
// Using cxs/lite on both the server and client,
4-
// the styles will need to be rehydrated.
5-
if (typeof window !== 'undefined') {
6-
const styleTag = document.getElementById('cxs-style')
7-
const serverCss = styleTag.innerHTML
8-
cxs.rehydrate(serverCss)
9-
}
1+
import cxs from 'cxs'
102

113
const cx = {
124
root: cxs({

‎examples/with-cxs/tsconfig.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"lib": ["dom", "dom.iterable", "esnext"],
5+
"allowJs": true,
6+
"skipLibCheck": true,
7+
"strict": false,
8+
"forceConsistentCasingInFileNames": true,
9+
"noEmit": true,
10+
"esModuleInterop": true,
11+
"module": "esnext",
12+
"moduleResolution": "node",
13+
"resolveJsonModule": true,
14+
"isolatedModules": true,
15+
"jsx": "preserve",
16+
"incremental": true
17+
},
18+
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
19+
"exclude": ["node_modules"]
20+
}

‎examples/with-styled-jsx/package.json

+6
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,11 @@
99
"next": "latest",
1010
"react": "^18.2.0",
1111
"react-dom": "^18.2.0"
12+
},
13+
"devDependencies": {
14+
"@types/node": "^18.11.9",
15+
"@types/react": "^18.0.25",
16+
"@types/react-dom": "^18.0.9",
17+
"typescript": "^4.9.3"
1218
}
1319
}

‎examples/with-styled-jsx/pages/index.js ‎examples/with-styled-jsx/pages/index.tsx

File renamed without changes.

‎examples/with-styled-jsx/tsconfig.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"lib": ["dom", "dom.iterable", "esnext"],
5+
"allowJs": true,
6+
"skipLibCheck": true,
7+
"strict": false,
8+
"forceConsistentCasingInFileNames": true,
9+
"noEmit": true,
10+
"esModuleInterop": true,
11+
"module": "esnext",
12+
"moduleResolution": "node",
13+
"resolveJsonModule": true,
14+
"isolatedModules": true,
15+
"jsx": "preserve",
16+
"incremental": true
17+
},
18+
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
19+
"exclude": ["node_modules"]
20+
}

0 commit comments

Comments
 (0)