Convert with-why-did-you-render example to TypeScript

examples/with-why-did-you-render/README.md

@@ -3,7 +3,7 @@
 This is a simple example of how to use [why-did-you-render](https://github.com/welldone-software/why-did-you-render) within a Next.js app.
 
 We are essentially extending webpack config to allow the monkey patched `React` version of WDYR in development mode and adding to our application
-by importing `wdyr.js` at the top of Next.js `_app.js`.
+by importing `wdyr.ts` at the top of Next.js `_app.tsx`.
 
 By default, all pure components will be tracked, but you can add
 `Component.whyDidYouRender = true` to regular function components in case you need.

examples/with-why-did-you-render/next.config.js

@@ -1,12 +1,12 @@
 const path = require('path')
 
 /** @type {import('next').NextConfig} */
-module.exports = {
+const nextConfig = {
   webpack(config, { dev, isServer }) {
     if (dev && !isServer) {
       const originalEntry = config.entry
       config.entry = async () => {
-        const wdrPath = path.resolve(__dirname, './scripts/wdyr.js')
+        const wdrPath = path.resolve(__dirname, './scripts/wdyr.ts')
         const entries = await originalEntry()
 
         if (entries['main.js'] && !entries['main.js'].includes(wdrPath)) {
@@ -19,3 +19,5 @@ module.exports = {
     return config
   },
 }
+
+module.exports = nextConfig

examples/with-why-did-you-render/package.json

@@ -11,6 +11,10 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@welldone-software/why-did-you-render": "^7.0.1"
+    "@types/node": "^18.11.10",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@welldone-software/why-did-you-render": "^7.0.1",
+    "typescript": "^4.9.3"
   }
 }

examples/with-why-did-you-render/pages/_app.tsx

@@ -0,0 +1,6 @@
+import { AppProps } from 'next/app'
+import '../scripts/wdyr'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}

examples/with-why-did-you-render/pages/index.js → examples/with-why-did-you-render/pages/index.tsx

@@ -1,4 +1,4 @@
-import Header from '../components/header.js'
+import Header from '../components/header'
 
 export default function Home() {
   return (

examples/with-why-did-you-render/scripts/wdyr.js → examples/with-why-did-you-render/scripts/wdyr.ts

@@ -1,3 +1,4 @@
+/// <reference types="@welldone-software/why-did-you-render" />
 import React from 'react'
 
 if (process.env.NODE_ENV === 'development') {

examples/with-why-did-you-render/tsconfig.json

@@ -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"],
+  "exclude": ["node_modules"]
+}