Convert with-goober example to TS (#39761)

## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc]


Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>

examples/with-goober/package.json

@@ -6,10 +6,15 @@
     "start": "next start"
   },
   "dependencies": {
-    "goober": "^2.0.2",
-    "goober-autoprefixer": "^1.2.0",
+    "goober": "^2.1.10",
+    "goober-autoprefixer": "^1.2.3",
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.7.7",
+    "@types/react": "^18.0.17",
+    "typescript": "^4.7.4"
   }
 }

examples/with-goober/pages/_app.js → examples/with-goober/pages/_app.tsx

@@ -1,12 +1,13 @@
-import React from 'react'
-import { prefix } from 'goober-autoprefixer'
+import { createElement } from 'react'
 import { setup } from 'goober'
+import { prefix } from 'goober/prefixer'
+import type { AppProps } from 'next/app'
 
 // goober's needs to know how to render the `styled` nodes.
 // So to let it know, we run the `setup` function with the
 // `createElement` function and prefixer function.
-setup(React.createElement, prefix)
+setup(createElement, prefix)
 
-export default function App({ Component, pageProps }) {
+export default function App({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />
 }

examples/with-goober/pages/_document.js → examples/with-goober/pages/_document.tsx

@@ -1,10 +1,19 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
 import { extractCss } from 'goober'
+import NextDocument, {
+  DocumentContext,
+  Head,
+  Html,
+  Main,
+  NextScript,
+} from 'next/document'
 
-export default class MyDocument extends Document {
-  static async getInitialProps({ renderPage }) {
+type Props = {
+  css: string
+}
+
+class Document extends NextDocument<Props> {
+  static async getInitialProps({ renderPage }: DocumentContext) {
     const page = await renderPage()
-    // Extrach the css for each page render
     const css = extractCss()
     return { ...page, css }
   }
@@ -27,3 +36,5 @@ export default class MyDocument extends Document {
     )
   }
 }
+
+export default Document

examples/with-goober/tsconfig.json

@@ -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"]
+}