chore(deps): upgrade next 12 (#1265)

* chore(deps): upgrade next.12 latest swc

* chore(deps): rm useless babel pkgs

* chore: wip

* chore: add babel back for prod, displayName issue

* chore(swc): styledComponents for dev mode

Author: mydearxym

.babelrc

@@ -14,4 +14,8 @@ cypress//integration/examples
 .eslintcache
 
 cypress/videos/*
-tsconfig.tsbuildinfo
+tsconfig.tsbuildinfopublic/sw.js
+public/sw.js
+public/sw.js.map
+public/workbox-*
+tsconfig.tsbuildinfo

.gitignore

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

next-env.d.ts

@@ -13,6 +13,7 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 
 // if move pwa config to witPlugins, it will not work
 const nextConfig = withPWA({
+  // swcMinify: true,
   productionBrowserSourceMaps: false,
   pwa: {
     dest: 'public',
@@ -21,6 +22,13 @@ const nextConfig = withPWA({
     // scope: '/cp',
     sw: 'sw.js',
   },
+  compiler: {
+    // ssr and displayName are configured by default
+    styledComponents: true,
+  },
+  // experimental: {
+  //   outputStandalone: true,
+  // },
 })
 
 module.exports = withPlugins([withBundleAnalyzer, withSourceMaps], nextConfig)

next.config.js

@@ -40,7 +40,6 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.13.14",
     "@groupher/react-editor": "^1.1.30",
     "@next-boost/hybrid-disk-cache": "^0.3.0",
     "@next-boost/next-boost": "^0.15.1",
@@ -54,7 +53,7 @@
     "accepts": "^1.3.4",
     "ali-oss": "^5.3.2",
     "babel-plugin-add-react-displayname": "^0.0.5",
-    "babel-plugin-styled-components": "^1.12.0",
+    "babel-plugin-styled-components": "^2.0.3",
     "cacheable-response": "^2.0.9",
     "chalk": "^2.4.1",
     "compatible-debug": "^1.0.0",
@@ -77,7 +76,7 @@
     "mobx-state-tree": "5.0.2",
     "module-alias": "^2.0.1",
     "nanoid": "^3.1.12",
-    "next": "^12.0.1",
+    "next": "^12.1.0",
     "next-compose-plugins": "^2.2.0",
     "next-i18next": "4.4.1",
     "next-offline": "4.0.6",
@@ -92,13 +91,13 @@
     "pubsub-js": "^1.9.3",
     "qrcode.react": "^1.0.1",
     "ramda": "0.26.1",
-    "react": "17.0.2",
+    "react": "^17.0.2",
     "react-animation": "^1.2.2",
     "react-calendar-heatmap": "1.8.1",
     "react-content-loader": "3.4.2",
     "react-copy-to-clipboard": "^5.0.3",
     "react-device-detect": "^2.1.2",
-    "react-dom": "17.0.2",
+    "react-dom": "^17.0.2",
     "react-highlight-words": "^0.16.0",
     "react-lazy-load-image-component": "1.5.0",
     "react-masonry-component": "^6.0.1",
@@ -143,8 +142,6 @@
     "@types/styled-components": "^5.1.8",
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",
-    "babel-eslint": "^10.0.2",
-    "babel-jest": "^23.6.0",
     "bundlewatch": "^0.2.7",
     "commitizen": "3.1.2",
     "coveralls": "3.0.14",

package-lock.json

@@ -2,7 +2,7 @@
 import dynamic from 'next/dynamic'
 
 import { LavaLampLoading } from '@/widgets/dynamic'
-import EditorLoading from '@/widgets/Loading/EditorLoading'
+// import EditorLoading from '@/widgets/Loading/EditorLoading'
 
 import { LavaLoadingWrapper } from './styles'
 
@@ -21,38 +21,53 @@ const commonConfig = {
 }
 
 // editor style loading config
-const editorConfig = {
-  // @ts-ignore
-  loading: () => <EditorLoading />,
-  ssr: false,
-}
+// const editorConfig = {
+//   // @ts-ignore
+//   loading: () => <EditorLoading />,
+//   ssr: false,
+// }
 
 // viewers
 export const ArticleViewer = dynamic(
   () => import('@/containers/viewer/ArticleViewer'),
-  commonConfig,
+  {
+    loading: () => <CommonLoading />,
+    ssr: false,
+  },
 )
 
 export const MailsViewer = dynamic(
   () => import('@/containers/viewer/MailsViewer'),
-  commonConfig,
+  {
+    loading: () => <CommonLoading />,
+    ssr: false,
+  },
 )
 
 export const RepoViewer = dynamic(
   () => import('@/containers/viewer/RepoViewer'),
-  commonConfig,
+  {
+    loading: () => <CommonLoading />,
+    ssr: false,
+  },
 )
 
 // editors
 export const AccountEditor = dynamic(
   () => import('@/containers/editor/AccountEditor'),
-  commonConfig,
+  {
+    loading: () => <CommonLoading />,
+    ssr: false,
+  },
 )
 
 // user lister
 export const UserLister = dynamic(
   () => import('@/containers/user/UserLister'),
-  commonConfig,
+  {
+    loading: () => <CommonLoading />,
+    ssr: false,
+  },
 )
 
 // export const RepoEditor = dynamic(
@@ -63,5 +78,8 @@ export const UserLister = dynamic(
 // utils
 export const C11NSettingPanel = dynamic(
   () => import('@/containers/tool/C11NSettingPanel'),
-  commonConfig,
+  {
+    loading: () => <CommonLoading />,
+    ssr: false,
+  },
 )

package.json

@@ -31,11 +31,13 @@ const DigestView: FC<TProps> = ({ curCommunity, entry }) => {
   // 尤其是在 Tab 切换的时候。手机端因为目前没有这些组件，性能暂无问题。
   // 本不应该存在的无聊问题，蛋疼的解决办法，
   useEffect(() => {
-    const cfg = { ssr: false }
-
-    Upvote = dynamic(() => import('@/widgets/Upvote'), cfg)
-    ArticleReadLabel = dynamic(() => import('@/widgets/ArticleReadLabel'), cfg)
-    ArticlePinLabel = dynamic(() => import('@/widgets/ArticlePinLabel'), cfg)
+    Upvote = dynamic(() => import('@/widgets/Upvote'), { ssr: false })
+    ArticleReadLabel = dynamic(() => import('@/widgets/ArticleReadLabel'), {
+      ssr: false,
+    })
+    ArticlePinLabel = dynamic(() => import('@/widgets/ArticlePinLabel'), {
+      ssr: false,
+    })
 
     setTimeout(() => {
       setLoaded(true)