From f2e29f6adee5fe7b223b30d57842efde09ed58a2 Mon Sep 17 00:00:00 2001
From: Jason Miller <developit@users.noreply.github.com>
Date: Tue, 9 Jun 2020 16:35:52 -0400
Subject: [PATCH] [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 | 34 ++++++++++++++++++++++++++++
 examples/using-preact/package.json   | 13 +++++++----
 2 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 examples/using-preact/next.config.js

diff --git a/examples/using-preact/next.config.js b/examples/using-preact/next.config.js
new file mode 100644
index 0000000000000..9ea297c607aa3
--- /dev/null
+++ b/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
+  },
+})
diff --git a/examples/using-preact/package.json b/examples/using-preact/package.json
index 22c0b55c3652c..23d27167fce24 100644
--- a/examples/using-preact/package.json
+++ b/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"
   }
 }