Convert more jsx/styled-components examples to TypeScript (#43117)
Converted 3 more examples to TypeScript. Individual contributions pushed as separate commits. ## 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
3f30e26a3a
commit
8eb82b3891
15 changed files with 139 additions and 49 deletions
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"presets": ["next/babel"],
|
||||
"plugins": [["styled-components", { "ssr": true }]]
|
||||
}
|
||||
8
examples/with-styled-components-rtl/next.config.js
Normal file
8
examples/with-styled-components-rtl/next.config.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
compiler: {
|
||||
styledComponents: true,
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = nextConfig
|
||||
|
|
@ -9,11 +9,16 @@
|
|||
"next": "latest",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-is": "^17.0.2",
|
||||
"styled-components": "^5.2.3",
|
||||
"stylis-plugin-rtl": "1.0.0"
|
||||
"react-is": "^18.2.0",
|
||||
"styled-components": "^5.3.6",
|
||||
"stylis-plugin-rtl": "^2.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-plugin-styled-components": "^1.12.0"
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"@types/styled-components": "^5.1.26",
|
||||
"babel-plugin-styled-components": "^2.0.7",
|
||||
"typescript": "^4.9.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
import type { AppProps } from 'next/app'
|
||||
import type { DefaultTheme } from 'styled-components'
|
||||
import { ThemeProvider } from 'styled-components'
|
||||
|
||||
const theme = {
|
||||
const theme: DefaultTheme = {
|
||||
colors: {
|
||||
primary: '#0070f3',
|
||||
},
|
||||
}
|
||||
|
||||
export default function App({ Component, pageProps }) {
|
||||
export default function App({ Component, pageProps }: AppProps) {
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<Component {...pageProps} />
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import Document, { Html, Head, Main, NextScript } from 'next/document'
|
||||
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
|
||||
import stylisRTLPlugin from 'stylis-plugin-rtl'
|
||||
|
||||
export default class MyDocument extends Document {
|
||||
static getInitialProps({ renderPage }) {
|
||||
const sheet = new ServerStyleSheet()
|
||||
|
||||
const page = renderPage(
|
||||
(App) => (props) =>
|
||||
sheet.collectStyles(
|
||||
<StyleSheetManager stylisPlugins={[stylisRTLPlugin]}>
|
||||
<App {...props} />
|
||||
</StyleSheetManager>
|
||||
)
|
||||
)
|
||||
|
||||
const styleTags = sheet.getStyleElement()
|
||||
|
||||
return { ...page, styleTags }
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<Html>
|
||||
<Head>{this.props.styleTags}</Head>
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
)
|
||||
}
|
||||
}
|
||||
33
examples/with-styled-components-rtl/pages/_document.tsx
Normal file
33
examples/with-styled-components-rtl/pages/_document.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import type { DocumentContext, DocumentInitialProps } from 'next/document'
|
||||
import Document from 'next/document'
|
||||
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
|
||||
import stylisRTLPlugin from 'stylis-plugin-rtl'
|
||||
|
||||
export default class MyDocument extends Document {
|
||||
static async getInitialProps(
|
||||
ctx: DocumentContext
|
||||
): Promise<DocumentInitialProps> {
|
||||
const sheet = new ServerStyleSheet()
|
||||
const originalRenderPage = ctx.renderPage
|
||||
|
||||
try {
|
||||
ctx.renderPage = () =>
|
||||
originalRenderPage({
|
||||
enhanceApp: (App) => (props) =>
|
||||
sheet.collectStyles(
|
||||
<StyleSheetManager stylisPlugins={[stylisRTLPlugin]}>
|
||||
<App {...props} />
|
||||
</StyleSheetManager>
|
||||
),
|
||||
})
|
||||
|
||||
const initialProps = await Document.getInitialProps(ctx)
|
||||
return {
|
||||
...initialProps,
|
||||
styles: [initialProps.styles, sheet.getStyleElement()],
|
||||
}
|
||||
} finally {
|
||||
sheet.seal()
|
||||
}
|
||||
}
|
||||
}
|
||||
9
examples/with-styled-components-rtl/styled.d.ts
vendored
Normal file
9
examples/with-styled-components-rtl/styled.d.ts
vendored
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import 'styled-components'
|
||||
|
||||
declare module 'styled-components' {
|
||||
export interface DefaultTheme {
|
||||
colors: {
|
||||
primary: string
|
||||
}
|
||||
}
|
||||
}
|
||||
20
examples/with-styled-components-rtl/tsconfig.json
Normal file
20
examples/with-styled-components-rtl/tsconfig.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"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", "styled.d.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
|
@ -6,18 +6,24 @@
|
|||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"lost": "^9.0.1",
|
||||
"next": "latest",
|
||||
"lost": "8.2.0",
|
||||
"postcss-nested": "5.0.5",
|
||||
"postcss": "8.2.9",
|
||||
"postcss": "^8.4.19",
|
||||
"postcss-nested": "^6.0.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"styled-jsx-plugin-postcss": "4.0.1"
|
||||
"styled-jsx-plugin-postcss": "^4.0.1"
|
||||
},
|
||||
"postcss": {
|
||||
"plugins": {
|
||||
"lost": {},
|
||||
"postcss-nested": {}
|
||||
}
|
||||
},
|
||||
"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-plugins/tsconfig.json
Normal file
20
examples/with-styled-jsx-plugins/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"]
|
||||
}
|
||||
|
|
@ -11,7 +11,11 @@
|
|||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"sass": "^1.32.8",
|
||||
"@styled-jsx/plugin-sass": "^3.0.0"
|
||||
"@styled-jsx/plugin-sass": "^4.0.2",
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
"sass": "^1.56.1",
|
||||
"typescript": "^4.9.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
20
examples/with-styled-jsx-scss/tsconfig.json
Normal file
20
examples/with-styled-jsx-scss/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