fix(examples/with-wdyr): example config to support SWC (#39465)

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

@@ -1,60 +1,21 @@
 # Why did you render
 
-This is a simple example of how to use [why-did-you-render](https://github.com/welldone-software/why-did-you-render).
+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.
 
-The header component will rerender despite the state staying the same.
+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 default, all pure components will be tracked, but you can add
+`Component.whyDidYouRender = true` to regular function components in case you need.
+
+In this example, the header component will rerender despite the state staying the same.
 
 You can see `why-did-you-render` console logs about this redundant re-render in the developer console.
 
-## Installation guide
-
-1. add `why-did-you-render` to the project by running:
-
-   ```
-   yarn add @welldone-software/why-did-you-render
-   ```
-
-1. Create `scripts/wdyr.js` with the code:
-
-   ```jsx
-   import React from 'react'
-
-   if (process.env.NODE_ENV === 'development') {
-     if (typeof window !== 'undefined') {
-       const whyDidYouRender = require('@welldone-software/why-did-you-render')
-       whyDidYouRender(React, {
-         trackAllPureComponents: true,
-       })
-     }
-   }
-   ```
-
-1. Import `scripts/wdyr.js` as the first import of `_app`.
-
-1. Make sure that [`react-preset`](https://babeljs.io/docs/en/babel-preset-react) uses `@welldone-software/why-did-you-render` to import the monkey patched `React` with WDYR, by modifying `next/babel` in `babel.config.js`:
-
-```jsx
-// babel.config.js
-module.exports = function (api) {
-  const isServer = api.caller((caller) => caller?.isServer)
-  const isCallerDevelopment = api.caller((caller) => caller?.isDev)
-
-  const presets = [
-    [
-      'next/babel',
-      {
-        'preset-react': {
-          importSource:
-            !isServer && isCallerDevelopment
-              ? '@welldone-software/why-did-you-render'
-              : 'react',
-        },
-      },
-    ],
-  ]
-
-  return { presets }
-}
+When using Typescript, call the file `wdyr.ts` instead and add the following line to the top of the file to import the package's types:
+
+```
+/// <reference types="@welldone-software/why-did-you-render" />
 ```
 
 ## Deploy your own

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

@@ -0,0 +1,20 @@
+const path = require('path')
+
+module.exports = {
+  webpack(config, { dev, isServer }) {
+    if (dev && !isServer) {
+      const originalEntry = config.entry
+      config.entry = async () => {
+        const wdrPath = path.resolve(__dirname, './scripts/wdyr.js')
+        const entries = await originalEntry()
+
+        if (entries['main.js'] && !entries['main.js'].includes(wdrPath)) {
+          entries['main.js'].push(wdrPath)
+        }
+        return entries
+      }
+    }
+
+    return config
+  },
+}

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

@@ -1,14 +1,16 @@
 {
   "private": true,
   "scripts": {
-    "dev": "next",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start"
   },
   "dependencies": {
-    "@welldone-software/why-did-you-render": "^6.0.5",
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@welldone-software/why-did-you-render": "^7.0.1"
   }
 }