Convert with-cssed, with-csx, with-styled-jsx examples to TypeScript (#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)
This commit is contained in:
Max Proske
GitHub
parent
0a2ae766a8
commit
07d3da102d
13 changed files with 123 additions and 41 deletions
3
examples/with-cssed/.gitignore
vendored
3
examples/with-cssed/.gitignore
vendored
|
|
@ -34,3 +34,6 @@ yarn-error.log*
|
|||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
|
||||
# cssed compilation artifacts
|
||||
.*.module.css
|
||||
|
|
|
|||
|
|
@ -6,11 +6,16 @@
|
|||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/react": "^16.9.48",
|
||||
"babel-plugin-macros": "^2.8.0",
|
||||
"cssed": "^1.1.2",
|
||||
"babel-plugin-macros": "^3.1.0",
|
||||
"cssed": "^1.1.5",
|
||||
"next": "latest",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"typescript": "^4.9.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,13 +31,14 @@ const styles = css`
|
|||
|
||||
export default function Home() {
|
||||
const [isDark, setDark] = useState(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>With cssed</title>
|
||||
</Head>
|
||||
<div
|
||||
onClick={() => setDark(!isDark)}
|
||||
onClick={() => setDark((prevState) => !prevState)}
|
||||
className={styles.box + ' ' + (isDark ? styles.dark : styles.light)}
|
||||
>
|
||||
Cssed demo
|
||||
20
examples/with-cssed/tsconfig.json
Normal file
20
examples/with-cssed/tsconfig.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": false,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
|
@ -6,9 +6,16 @@
|
|||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"cxs": "^3.0.0",
|
||||
"cxs": "^6.2.0",
|
||||
"next": "latest",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/cxs": "^6.2.1",
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"typescript": "^4.9.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
import Document, { Html, Head, Main, NextScript } from 'next/document'
|
||||
import cxs from 'cxs/lite'
|
||||
|
||||
export default class MyDocument extends Document {
|
||||
static async getInitialProps({ renderPage }) {
|
||||
const page = await renderPage()
|
||||
const style = cxs.getCss()
|
||||
return { ...page, style }
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Html>
|
||||
<Head>
|
||||
<style
|
||||
id="cxs-style"
|
||||
dangerouslySetInnerHTML={{ __html: this.props.style }}
|
||||
/>
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
)
|
||||
}
|
||||
}
|
||||
35
examples/with-cxs/pages/_document.tsx
Normal file
35
examples/with-cxs/pages/_document.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import type { DocumentContext, DocumentInitialProps } from 'next/document'
|
||||
import Document, { Html, Head, Main, NextScript } from 'next/document'
|
||||
import cxs from 'cxs'
|
||||
|
||||
export default class MyDocument extends Document {
|
||||
static async getInitialProps(
|
||||
ctx: DocumentContext
|
||||
): Promise<DocumentInitialProps> {
|
||||
const initialProps = await Document.getInitialProps(ctx)
|
||||
const styles = cxs.css()
|
||||
cxs.reset()
|
||||
|
||||
return {
|
||||
...initialProps,
|
||||
styles: (
|
||||
<>
|
||||
{initialProps.styles}
|
||||
<style dangerouslySetInnerHTML={{ __html: styles }} />
|
||||
</>
|
||||
),
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Html>
|
||||
<Head />
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +1,4 @@
|
|||
import cxs from 'cxs/lite'
|
||||
|
||||
// Using cxs/lite on both the server and client,
|
||||
// the styles will need to be rehydrated.
|
||||
if (typeof window !== 'undefined') {
|
||||
const styleTag = document.getElementById('cxs-style')
|
||||
const serverCss = styleTag.innerHTML
|
||||
cxs.rehydrate(serverCss)
|
||||
}
|
||||
import cxs from 'cxs'
|
||||
|
||||
const cx = {
|
||||
root: cxs({
|
||||
20
examples/with-cxs/tsconfig.json
Normal file
20
examples/with-cxs/tsconfig.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": false,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
|
@ -9,5 +9,11 @@
|
|||
"next": "latest",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"typescript": "^4.9.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
20
examples/with-styled-jsx/tsconfig.json
Normal file
20
examples/with-styled-jsx/tsconfig.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": false,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Loading…
Reference in a new issue