feat: set up "preact" config

Author: acd02

.babelrc

@@ -1,14 +1,4 @@
 {
-  "presets": [
-    [
-      "next/babel",
-      {
-        "preset-react": {
-          "runtime": "automatic",
-          "importSource": "@emotion/react"
-        }
-      }
-    ]
-  ],
-  "plugins": ["@emotion/babel-plugin"]
+  "plugins": [],
+  "presets": ["next/babel", "@emotion/babel-preset-css-prop"]
 }

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)