refactor($core): inject root mixins to root component and make LayoutDistributor functional

[meteorlxy]

Summary

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Docs
• Build-related changes
• Other, please describe:

Does this PR introduce a breaking change? (check one)

• Yes (potentially)
• No

If yes, please describe the impact and migration path for existing applications:

The clientRootMixin should be ssr compatible.

In fact, developers should always be aware of that in Vuepress, but our current updateMeta.js of core and mixin.js of docs are not so good at that.

So this is not an exact "breaking change".

Other information:

Based on #1228.

• Inject root mixins to <Root> component, so they are "real" root mixins now.
• Make LayoutDistributor functional. It would be lighter-weighted, and the structure of Vuepress App in vue-devtool would be much clearer.

Maybe we could have further discussion about this implementation @ulivz

[meteorlxy]

I propose to move these two Vue.component() lines to app.js.

What do you think about that? @ulivz

[ulivz]

Thanks but optimizing the codes that is already running very well doesn't make much sense, unless it does solve some of the problems, or it would bring potential issue risks.

Thanks again, and welcome to join in the official blog theme development if you want.

[meteorlxy]

@ulivz I understand. I would like to express my opinions:

---

rootMixins is more reasonable to be injected to the root component, rather than to LayoutDistributor, because:

• As its literally meaning
• As how clientRootMixin explained in the docs:

  A path to the mixin file which allow you to control the life cycle of root component.

One possible usecase: user wants to add some properties to the root component via clientRootMixin, and accesses them via this.$root in some component. It's definitely different to inject them to LayoutDistributor.

---

About making LayoutDistributor functional:

• LayoutDistributor does nothing but conditionally render component. It's a typical functional component.
• Functional component is much cheaper to render
• LayoutDistributor should be "transparent" to users, and functional component won't show up in the Vue devtools component tree, so that users would only see what they are using in Vue devtools
• It's a preparation for future features like SPA application layout wrapper needed #1226 . If we could allow users to use custom LayoutDistributor, we should make our default LayoutDistributor as simple as possible. So we should move those Vue.component() codes out of it.

---

Seems like we usually have different opinions. Hope you can accept my opinion, but never mind if you declined. I just want to help make this project better 😉