Merge pull request #138 from jefrydco/pull-upstream

fix(upstream): update from upstream and fix merge conflict

package.json

@@ -1,7 +1,7 @@
 {
   "devDependencies": {
     "@vuepress/plugin-pwa": "^1.5.4",
-    "node-sass": "^4.13.1",
+    "sass": "^1.32.0",
     "sass-loader": "^8.0.2",
     "vuepress": "^1.5.4"
   },
@@ -14,7 +14,7 @@
     "@docsearch/css": "^1.0.0-alpha.27",
     "@docsearch/js": "^1.0.0-alpha.27",
     "algoliasearch": "^4.4.0",
-    "axios": "^0.19.1",
+    "axios": "^0.21.1",
     "intersection-observer": "^0.11.0",
     "showdown": "^1.9.1"
   }

src/.vuepress/components/support/Coins.vue

@@ -54,13 +54,18 @@ export default {
       }
     }
   }),
-  created () {
-    if (typeof window === 'undefined') return
+  mounted () {
+    this.updateType()
 
-    this.type = window.location.hash.slice(1)
-    window.addEventListener('hashchange', function () {
+    window.addEventListener('hashchange', this.updateType)
+  },
+  beforeDestroy () {
+    window.removeEventListener('hashchange', this.updateType)
+  },
+  methods: {
+    updateType () {
       this.type = window.location.hash.slice(1)
-    })
+    }
   }
 }
 </script>
@@ -74,7 +79,12 @@ export default {
 
   a {
     margin: 20px;
-    color: $medium;
+    color: $textColor;
+    text-decoration: none !important;
+
+    &:hover {
+      color: $accentColor;
+    }
   }
 
   svg {

src/.vuepress/config.js

@@ -58,6 +58,16 @@ const sidebar = {
       title: 'Reusability & Composition',
       collapsable: false,
       children: [
+        {
+          title: 'Composition API',
+          children: [
+            '/guide/composition-api-introduction',
+            '/guide/composition-api-setup',
+            '/guide/composition-api-lifecycle-hooks',
+            '/guide/composition-api-provide-inject',
+            '/guide/composition-api-template-refs'
+          ]
+        },
         '/guide/mixins',
         '/guide/custom-directive',
         '/guide/teleport',
@@ -77,16 +87,6 @@ const sidebar = {
             '/guide/reactivity-computed-watchers'
           ]
         },
-        {
-          title: 'Composition API',
-          children: [
-            '/guide/composition-api-introduction',
-            '/guide/composition-api-setup',
-            '/guide/composition-api-lifecycle-hooks',
-            '/guide/composition-api-provide-inject',
-            '/guide/composition-api-template-refs'
-          ]
-        },
         '/guide/optimizations',
         '/guide/change-detection'
       ]
@@ -203,10 +203,15 @@ const sidebar = {
         '/guide/migration/v-model',
         '/guide/migration/v-if-v-for',
         '/guide/migration/v-bind',
+        '/guide/migration/vnode-lifecycle-events',
         '/guide/migration/watch'
       ]
     }
   ],
+  ssr: [
+    ['/guide/ssr/introduction', 'Introduction'],
+    '/guide/ssr/getting-started'
+  ],
   contributing: [
     {
       title: 'Contribute to the Docs',
@@ -363,7 +368,7 @@ module.exports = {
               {
                 text: 'Vue Test Utils',
                 link:
-                  'https://vuejs.github.io/vue-test-utils-next-docs/guide/introduction.html'
+                  'https://next.vue-test-utils.vuejs.org/v2/guide/introduction.html'
               },
               {
                 text: 'Devtools',
@@ -372,6 +377,10 @@ module.exports = {
               {
                 text: 'Weekly news',
                 link: 'https://news.vuejs.org/'
+              },
+              {
+                text: 'Blog',
+                link: 'https://blog.vuejs.org/'
               }
             ]
           }
@@ -394,6 +403,16 @@ module.exports = {
             link: 'https://vue.threadless.com/'
           }
         ]
+      },
+      {
+        text: 'Translations',
+        link: '#',
+        items: [
+          {
+            text: '中文',
+            link: 'https://v3.cn.vuejs.org/'
+          }
+        ]
       }
     ],
     repo: 'vuejs/docs-next',
@@ -406,6 +425,7 @@ module.exports = {
       collapsable: false,
       '/guide/migration/': sidebar.migration,
       '/guide/contributing/': sidebar.contributing,
+      '/guide/ssr/': sidebar.ssr,
       '/guide/': sidebar.guide,
       '/community/': sidebar.guide,
       '/cookbook/': sidebar.cookbook,

src/.vuepress/theme/components/CarbonAds.vue

@@ -28,29 +28,28 @@ export default {
 <style>
 .carbon-ads {
   min-height: 102px;
-  padding: 1.5rem 1.5rem 0;
-  margin-bottom: -0.5rem;
   font-size: 0.75rem;
 
   width: 125px;
   position: fixed;
   z-index: 1;
-  bottom: 22px;
+  bottom: 14px;
   right: 14px;
   padding: 10px;
   border-radius: 4px;
   background-color: rgba(255, 255, 255, 0.8);
-  /* background-color: #fff; */
-  /* font-size: 13px; */
 }
 
-@media screen and (max-width: 1300px) {
+@media screen and (max-width: 1376px) {
   .carbon-ads {
     position: relative;
-    top: 87px;
-    right: 12px;
+    bottom: auto;
+    right: auto;
+
     float: right;
-    padding: 0 0 20px 30px;
+    margin: 71px 12px 0 15px;
+    padding: 0 0 10px 10px;
+    z-index: 5;
   }
 }
 
@@ -60,14 +59,9 @@ export default {
   display: inline;
 }
 
-.carbon-ads .carbon-img {
-  float: left;
-  margin-right: 1rem;
-  border: 1px solid var(--border-color);
-}
-
 .carbon-ads .carbon-img img {
   display: block;
+  width: 125px;
 }
 
 .carbon-ads .carbon-poweredby {

src/.vuepress/theme/components/Home.vue

@@ -39,7 +39,7 @@
 
     <Content class="theme-default-content custom" />
 
-    <section class="section-sponsors" ref="sponsors">
+    <section class="section-sponsors" :class="{ active: sponsorsActive }" ref="sponsors">
       <div class="inner">
         <PatreonSponsors :sponsors="sponsors" />
         <OpenCollectiveSponsors />
@@ -85,7 +85,8 @@ export default {
   },
 
   data: () => ({
-    sponsors
+    sponsors,
+    sponsorsActive: false
   }),
 
   computed: {
@@ -103,29 +104,19 @@ export default {
   },
 
   mounted() {
-    if (!window) {
-      return
-    }
+    window.addEventListener('scroll', this.onPageScroll)
+  },
 
-    const sponsors = this.$refs.sponsors
-    let sponsorTop = sponsors.offsetTop
-    let sponsorActive = false
-
-    window.addEventListener('resize', () => (sponsorTop = sponsors.offsetTop))
-
-    window.addEventListener('scroll', () => {
-      if (window.pageYOffset > sponsorTop - 100) {
-        if (!sponsorActive) {
-          sponsorActive = true
-          sponsors.classList.add('active')
-        }
-      } else {
-        if (sponsorActive) {
-          sponsorActive = false
-          sponsors.classList.remove('active')
-        }
-      }
-    })
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.onPageScroll)
+  },
+
+  methods: {
+    onPageScroll() {
+      const sponsorTop = this.$refs.sponsors.offsetTop
+
+      this.sponsorsActive = window.pageYOffset > sponsorTop - 100
+    }
   }
 }
 </script>

src/.vuepress/theme/layouts/Layout.vue

@@ -155,19 +155,3 @@ export default {
   }
 }
 </script>
-
-<style>
-/* add a placeholder to give space to ads so they don't overlap with content */
-@media screen and (max-width: 1376px) {
-  .content__default::before {
-    content: '';
-    position: relative;
-    display: block;
-    float: right;
-    height: 221px;
-    padding: 0 0 20px 30px;
-    margin-top: 20px;
-    margin-right: -24px;
-  }
-}
-</style>

src/README.md

@@ -27,7 +27,7 @@ features:
       Minimal Optimization Efforts
 footer: |
   Released under the <a href="https://opensource.org/licenses/MIT" target="_blank" rel="noopener">MIT License</a><br>
-  Copyright © 2014-2020 Evan You
+  Copyright © 2014-2021 Evan You
 socialIcons:
   - type: GitHub
     link: https://github.com/vuejs/vue-next

src/api/application-api.md

@@ -261,13 +261,9 @@ app.provide('user', 'administrator')
 
 ## unmount
 
-- **Arguments:**
-
-  - `{Element | string} rootContainer`
-
 - **Usage:**
 
-  Unmounts a root component of the application instance on the provided DOM element.
+  Unmounts a root component of the application instance.
 
 - **Example:**
 
@@ -285,7 +281,7 @@ const app = createApp({})
 app.mount('#my-app')
 
 // Application will be unmounted 5 seconds after mount
-setTimeout(() => app.unmount('#my-app'), 5000)
+setTimeout(() => app.unmount(), 5000)
 ```
 
 ## use
@@ -307,4 +303,16 @@ setTimeout(() => app.unmount('#my-app'), 5000)
 
   When this method is called on the same plugin multiple times, the plugin will be installed only once.
 
+- **Example:**
+
+  ```js
+  import { createApp } from 'vue'
+  import MyPlugin from './plugins/MyPlugin'
+
+  const app = createApp({})
+
+  app.use(MyPlugin)
+  app.mount('#app')
+  ```
+
 - **See also:** [Plugins](../guide/plugins.html)

src/api/application-config.md

@@ -1,15 +1,15 @@
 # Application Config
 
-`config` is an object containing Vue application global configurations. You can modify its properties listed below before mounting your application:
+Every Vue application exposes a `config` object that contains the configuration settings for that application:
 
 ```js
-const app = Vue.createApp({})
+const app = createApp({})
 
-app.config = {...}
-
-app.mount(...);
+console.log(app.config)
 ```
 
+You can modify its properties, listed below, before mounting your application.
+
 ## errorHandler
 
 - **Type:** `Function`
@@ -73,7 +73,7 @@ This can replace Vue 2.x `Vue.prototype` extending:
 Vue.prototype.$http = () => {}
 
 // After
-const app = Vue.createApp({})
+const app = createApp({})
 app.config.globalProperties.$http = () => {}
 ```
 
@@ -94,6 +94,10 @@ Specifies a method to recognize custom elements defined outside of Vue (e.g., us
 
 > Note that all native HTML and SVG tags don't need to be matched in this function - Vue parser performs this check automatically
 
+::: tip Important
+This config option is only respected when using the runtime compiler. If you are using the runtime-only build, `isCustomElement` must be passed to `@vue/compiler-dom` in the build setup instead - for example, via the [`compilerOptions` option in vue-loader](https://vue-loader.vuejs.org/options.html#compileroptions).
+:::
+
 ## optionMergeStrategies
 
 - **Type:** `{ [key: string]: Function }`
@@ -103,7 +107,7 @@ Specifies a method to recognize custom elements defined outside of Vue (e.g., us
 - **Usage:**
 
 ```js
-const app = Vue.createApp({
+const app = createApp({
   mounted() {
     console.log(this.$options.hello)
   }