feat: set up "preact" config

Author: acd02

next.config.js

@@ -1,12 +1,18 @@
 const computePath = require('./utils').computePath
+const withPrefresh = require('@prefresh/next')
 
-module.exports = {
-  webpack(config, options) {
+const config = {
+  experimental: {
+    modern: true,
+    polyfillsOptimization: true,
+  },
+
+  webpack(config, { dev, isServer }) {
     const esLintRule = {
       test: /\.tsx$/,
       enforce: 'pre',
       exclude: ['/node_modules/', '/.next/'],
-      loader: 'eslint-loader'
+      loader: 'eslint-loader',
     }
     config.module.rules.push(esLintRule)
 
@@ -22,6 +28,41 @@ module.exports = {
       utils: computePath('./src/utils')
     }
 
+    // Preact stuff
+    const splitChunks = config.optimization && config.optimization.splitChunks
+    if (splitChunks) {
+      const cacheGroups = splitChunks.cacheGroups
+      const preactModules = /[\\/]node_modules[\\/](preact|preact-render-to-string|preact-context-provider)[\\/]/
+      if (cacheGroups.framework) {
+        cacheGroups.preact = Object.assign({}, cacheGroups.framework, {
+          test: preactModules,
+        })
+        cacheGroups.commons.name = 'framework'
+      } else {
+        cacheGroups.preact = {
+          name: 'commons',
+          chunks: 'all',
+          test: preactModules,
+        }
+      }
+    }
+
+    // Install webpack aliases:
+    const aliases = config.resolve.alias || (config.resolve.alias = {})
+    aliases.react = aliases['react-dom'] = 'preact/compat'
+
+    // 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
-  }
+  },
 }
+
+module.exports = withPrefresh(config)

package.json

@@ -29,6 +29,7 @@
     "@emotion/babel-preset-css-prop": "11.0.0",
     "@emotion/react": "11.1.4",
     "@emotion/styled": "11.0.0",
+    "@prefresh/next": "1.4.4",
     "@testing-library/jest-dom": "5.11.9",
     "@testing-library/react": "11.2.3",
     "@types/jest": "26.0.20",
@@ -62,9 +63,12 @@
     "lint-staged": "10.5.3",
     "next": "10.0.5",
     "nprogress": "0.2.0",
+    "preact": "10.5.11",
+    "preact-render-to-string": "5.1.12",
     "prettier": "2.2.1",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "react": "npm:@preact/compat@^0.0.3",
+    "react-dom": "npm:@preact/compat@^0.0.3",
+    "react-ssr-prepass": "npm:preact-ssr-prepass@^1.1.1",
     "react-transition-group": "4.4.1",
     "ts-jest": "26.4.4",
     "ts-node": "9.1.1",