Migrate to typescript

vercel · Sep 21, 2022 · b244cad · b244cad
1 parent 606ea58
commit b244cad
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 24 deletions.
diff --git a/examples/with-typestyle/package.json b/examples/with-typestyle/package.json
@@ -10,5 +10,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typestyle": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.7.18",
+    "@types/react": "16.9.17",
+    "typescript": "4.8.2"
   }
 }
diff --git a/examples/with-typestyle/pages/_document.js b/examples/with-typestyle/pages/_document.js
diff --git a/examples/with-typestyle/pages/_document.tsx b/examples/with-typestyle/pages/_document.tsx
@@ -0,0 +1,37 @@
+import Document, {
+  Html,
+  Head,
+  Main,
+  NextScript,
+  DocumentInitialProps,
+  DocumentContext,
+} from 'next/document'
+import { getStyles } from 'typestyle'
+
+export default function MyDocument() {
+  return (
+    <Html>
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
+
+MyDocument.getInitialProps = async (
+  ctx: DocumentContext
+): Promise<DocumentInitialProps> => {
+  const initialProps = await Document.getInitialProps(ctx)
+  const styleTags = getStyles()
+  return {
+    ...initialProps,
+    styles: (
+      <>
+        {initialProps.styles}
+        <style id="typestyle-target">{styleTags}</style>
+      </>
+    ),
+  }
+}
diff --git a/examples/with-typestyle/pages/index.js → examples/with-typestyle/pages/index.tsx b/examples/with-typestyle/pages/index.js → examples/with-typestyle/pages/index.tsx
@@ -1,8 +1,7 @@
 import { style } from 'typestyle'
 
 const className = style({ color: 'red' })
-const RedText = ({ text }) => <div className={className}>{text}</div>
 
 export default function Home() {
-  return <RedText text="Hello Next.js!" />
+  return <div className={className}>Hello Next.js!</div>
 }
diff --git a/examples/with-typestyle/tsconfig.json b/examples/with-typestyle/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}