refactor(dev): use explicit store bond (#1267)

* refactor(container): use explicit bond to rm babel display name plugin

* chore: fmt

* chore: fmt

Author: mydearxym

.babelrc

@@ -1,7 +1,6 @@
 {
   "presets": ["next/babel"],
   "plugins": [
-    "add-react-displayname",
     [
       "babel-plugin-styled-components",
       {

docs/architecture/convention.md

@@ -50,7 +50,7 @@ we can easily import files like:
 
 ```js
 import { ISSUE_WEB } from '@/config'
-import { pluggedIn, buildLog } from '@/utils'
+import { bond, buildLog } from '@/utils'
 
 import ArticleEditFooter from '@/widgets/ArticleEditFooter'
 ...
@@ -68,7 +68,7 @@ Import Waypoint from 'react-waypoint'
 Import R from 'ramda'
 
 // 2. import utils
-Import { pluggedIn, buildLog, ROUTE, THREAD } from '@/utils'
+Import { bond, buildLog, ROUTE, THREAD } from '@/utils'
 
 // 3. import global containers
 Import TagsBar from '@/containers/unit/TagsBar'

docs/architecture/convention.zh-CN.md

@@ -50,7 +50,7 @@ Doramon 为网站提供类似于 [alfred](https://www.alfredapp.com/) 的功能,
 
 ```js
 import { ISSUE_WEB } from '@/config'
-import { pluggedIn, buildLog } from '@/utils'
+import { bond, buildLog } from '@/utils'
 
 import ArticleEditFooter from '@/widgets/ArticleEditFooter'
 ...
@@ -67,7 +67,7 @@ import { inject, observer } from 'mobx-react'
 import Waypoint from 'react-waypoint'
 
 // 2. import utils
-import { pluggedIn, buildLog, ROUTE, THREAD } from '@/utils'
+import { bond, buildLog, ROUTE, THREAD } from '@/utils'
 
 // 3. import global containers
 import TagsBar from '@/containers/unit/TagsBar'

docs/architecture/intro.md

@@ -154,7 +154,7 @@ import Editor from './Editor'
 
 import { Wrapper, ViewerWrapper } from './styles'
 
-import { pluggedIn, buildLog } from '@/utils'
+import { bond, buildLog } from '@/utils'
 import { useInit, changeView, onPublish, cancelPublish } from './logic'
 
 const PostEditorContainer = ({ postEditor: store, attachment }) =>{
@@ -181,13 +181,13 @@ const PostEditorContainer = ({ postEditor: store, attachment }) =>{
   )
 }
 
-export default pluggedIn(PostEditorContainer)
+export default bond(PostEditorContainer)
 ```
 
 Based on my own experience and the actual situation of the project's evolution over the past year, I think the local state is bad. So all the states are handed to the external state management tool [Mobx-State-Tree](https://github.com/mobxjs/mobx-state-tree), and then the container is linked to the entire project state tree by the following function. Corresponding substate trees are linked together
 
 ```js
-export default pluggedIn(PostEditorContainer)
+export default bond(PostEditorContainer)
 ```
 
 #### store.js

docs/architecture/intro.zh-CN.md

@@ -151,7 +151,7 @@ import Editor from './Editor'
 
 import { Wrapper, ViewerWrapper } from './styles'
 
-import { pluggedIn, buildLog } from '@/utils'
+import { bond, buildLog } from '@/utils'
 import { useInit, changeView, onPublish, cancelPublish } from './logic'
 
 const PostEditorContainer = ({ postEditor: store, attachment }) =>{
@@ -178,13 +178,13 @@ const PostEditorContainer = ({ postEditor: store, attachment }) =>{
   )
 }
 
-export default pluggedIn(PostEditorContainer)
+export default bond(PostEditorContainer)
 ```
 
 根据我自己的一些经验和项目一年来演进的实际情况，我认为局部状态是糟糕的。所以所有的状态都交于外部的状态管理工具 [Mobx-State-Tree](https://github.com/mobxjs/mobx-state-tree), 然后通过下面函数将该容器与整个项目状态树中相对应的子状态树链接起来：
 
 ```js
-export default pluggedIn(PostEditorContainer)
+export default bond(PostEditorContainer)
 ```
 
 #### store.js

docs/js/state-management.md

@@ -8,10 +8,10 @@ The root state tree is a combination of the child-state-tree (store.js) scattere
 
 #### child state tree
 
-The substate tree exists only in the container component, named store.js, and is connected to the root state tree via [pluggedIn](https://github.com/coderplanets/coderplanets_web/blob/dev/utils/mobx_helper.js#L37) Take the PostEditor container as an example:
+The substate tree exists only in the container component, named store.js, and is connected to the root state tree via [bond](https://github.com/coderplanets/coderplanets_web/blob/dev/utils/mobx_helper.js#L37) Take the PostEditor container as an example:
 
 ```js
-export default pluggedIn(PostEditorContainer)
+export default bond(PostEditorContainer)
 ```
 
 Containers/PostEditor/store.js in the same directory only contains the state required by the PostEditor container, and the state can only be changed by the method method exposed in the store, which is changed by the method call in logic.js in the same directory. The view layer cannot be directly Change the status.

docs/js/state-management.zh-CN.md

@@ -8,10 +8,10 @@ root 状态树由分散在各个容器组件内的子状态树(store.js) 以及
 
 #### 子状态树
 
-子状态树只存在于容器组件, 统一命名为 store.js, 通过 [pluggedIn](https://github.com/coderplanets/coderplanets_web/blob/dev/utils/mobx_helper.js#L37) 连接到根状态树, 以 PostEditor 容器为例:
+子状态树只存在于容器组件, 统一命名为 store.js, 通过 [bond](https://github.com/coderplanets/coderplanets_web/blob/dev/utils/mobx_helper.js#L37) 连接到根状态树, 以 PostEditor 容器为例:
 
 ```js
-export default pluggedIn(PostEditorContainer)
+export default bond(PostEditorContainer)
 ```
 
 相同目录下的 containers/PostEditor/store.js 只包含 PostEditor 容器所需的状态，且状态只能通过该 store 暴露出的 action 方法，由同目录下 logic.js 中的方法调用改变， 视图层无法直接改变状态。

next.config.js

@@ -13,7 +13,7 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 
 // if move pwa config to witPlugins, it will not work
 const nextConfig = withPWA({
-  // swcMinify: true,
+  swcMinify: false,
   productionBrowserSourceMaps: false,
   pwa: {
     dest: 'public',