[Examples] using-preact: add Prefresh, DevTools & chunking fix (#13976)

This adds [prefresh](https://github.com/JoviDeCroock/prefresh) and [preact/debug + DevTools](https://preactjs.com/guide/v10/debugging/) during development. It also fixes the chunking/splitting configuration for production builds by creating a `preact` chunk based on the existing framework chunk.

I'm still considering publishing the config here as a plugin, since I worry about the copy-paste effect on this much regex-foo.

/cc @JoviDeCroock

examples/using-preact/next.config.js

@@ -0,0 +1,34 @@
+const withPrefresh = require('@prefresh/next')
+
+module.exports = withPrefresh({
+  webpack(config, { dev, isServer }) {
+    // Move Preact into the framework chunk instead of duplicating in routes:
+    const splitChunks = config.optimization && config.optimization.splitChunks
+    if (splitChunks) {
+      const cacheGroups = splitChunks.cacheGroups
+      const test = /[\\/]node_modules[\\/](preact|preact-render-to-string|preact-context-provider)[\\/]/
+      if (cacheGroups.framework) {
+        cacheGroups.preact = Object.assign({}, cacheGroups.framework, { test })
+        cacheGroups.commons.name = 'framework'
+      } else {
+        cacheGroups.preact = { name: 'commons', chunks: 'all', test }
+      }
+    }
+
+    // Install webpack aliases:
+    const aliases = config.resolve.alias || (config.resolve.alias = {})
+    aliases.react = aliases['react-dom'] = 'preact/compat'
+
+    // Automatically inject Preact DevTools:
+    if (dev && !isServer) {
+      const entry = config.entry
+      config.entry = () =>
+        entry().then((entries) => {
+          entries['main.js'] = ['preact/debug'].concat(entries['main.js'] || [])
+          return entries
+        })
+    }
+
+    return config
+  },
+})

examples/using-preact/package.json

@@ -6,11 +6,16 @@
     "build": "next build",
     "start": "next start"
   },
+  "devDependencies": {
+    "@prefresh/next": "^0.3.0",
+    "react-refresh": "^0.8.3"
+  },
   "dependencies": {
-    "next": "^9.2.3-canary.21",
-    "preact": "^10.2.1",
-    "preact-render-to-string": "^5.1.4",
+    "next": "^9.4.0",
+    "preact": "^10.4.4",
+    "preact-render-to-string": "^5.1.9",
     "react": "github:preact-compat/react#1.0.0",
-    "react-dom": "github:preact-compat/react-dom#1.0.0"
+    "react-dom": "github:preact-compat/react-dom#1.0.0",
+    "react-ssr-prepass": "npm:preact-ssr-prepass@^1.0.1"
   }
 }