feature (#169): add migration badges (#181)

* feature (#169): add new migration badges

* docs (#169): update badges on parts of migration guide

* feature (#169): update migration badges

Author: bencodezen

src/.vuepress/components/MigrationBadges.vue

@@ -0,0 +1,74 @@
+<script>
+const validBadges = ['new', 'breaking', 'removed', 'updated']
+
+export default {
+  props: {
+    badges: {
+      type: Array,
+      default: () => [],
+      validator(value) {
+        return validBadges.includes(value)
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="migration-badge-wrapper">
+    <span
+      v-for="badgeType in badges"
+      :class="`migration-badge is-${badgeType}`"
+      :key="`badge-type-${badgeType}`"
+    >
+      {{ badgeType }}
+    </span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.migration-badge {
+  background-color: #ccc;
+  font-size: 0.8rem;
+  border: 2px solid #ccc;
+  border-radius: 5px;
+  margin-right: 0.5rem;
+  margin-top: 0.5rem;
+  color: #222;
+  padding: 0.25rem 0.25rem;
+  font-weight: bold;
+
+  &:first-child {
+    margin-left: 1rem;
+  }
+
+  &.is-new {
+    background-color: #228740;
+    border-color: #228740;
+    color: #fff;
+  }
+
+  &.is-breaking {
+    background-color: #b00000;
+    border-color: #b00000;
+    color: #fff;
+  }
+
+  &.is-removed {
+    background-color: #cf8700;
+    border-color: #cf8700;
+    color: #fff;
+  }
+
+  &.is-updated {
+    background-color: #fcff44;
+    border-color: #fcff44;
+    color: #222;
+  }
+}
+
+.migration-badge-wrapper {
+  display: flex;
+  margin-top: -0.5rem;
+}
+</style>

src/.vuepress/theme/styles/index.styl

@@ -128,6 +128,7 @@ h1, h2, h3, h4, h5, h6
 
     &:first-child
       display flex
+      flex-wrap wrap
       align-items center
       margin-top -1.5rem
       margin-bottom 1rem

src/guide/migration/async-components.md

@@ -1,4 +1,9 @@
-# Async Components
+---
+badges:
+  - new
+---
+
+# Async Components <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 

src/guide/migration/attribute-coercion.md

@@ -1,4 +1,9 @@
-# Attribute Coercion Behavior
+---
+badges:
+  - breaking
+---
+
+# Attribute Coercion Behavior <MigrationBadges :badges="$frontmatter.badges" />
 
 ::: info Info
 This is a low-level internal API change and does not affect most developers.
@@ -27,7 +32,7 @@ In 2.x, we had the following strategies for coercing `v-bind` values:
 
 The following table describes how Vue coerce "enumerated attributes" differently with normal non-boolean attributes:
 
-| Binding expression       | `foo` <sup>normal</sup> | `draggable` <sup>enumerated</sup> |
+| Binding expression  | `foo` <sup>normal</sup> | `draggable` <sup>enumerated</sup> |
 | ------------------- | ----------------------- | --------------------------------- |
 | `:attr="null"`      | /                       | `draggable="false"`               |
 | `:attr="undefined"` | /                       | /                                 |
@@ -53,7 +58,7 @@ For non-boolean attributes, Vue will stop removing them if they are `false` and
 
 The following table describes the new behavior:
 
-| Binding expression       | `foo` <sup>normal</sup>    | `draggable` <sup>enumerated</sup> |
+| Binding expression  | `foo` <sup>normal</sup>    | `draggable` <sup>enumerated</sup> |
 | ------------------- | -------------------------- | --------------------------------- |
 | `:attr="null"`      | /                          | / <sup>†</sup>                    |
 | `:attr="undefined"` | /                          | /                                 |

src/guide/migration/custom-directives.md

@@ -1,4 +1,9 @@
-# Custom Directives
+---
+badges:
+  - breaking
+---
+
+# Custom Directives <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 

src/guide/migration/custom-elements-interop.md

@@ -1,9 +1,9 @@
 ---
-types:
+badges:
   - breaking
 ---
 
-# Custom Elements Interop changes <span v-for="type in $frontmatter.types" class="badge" :key="`type-${type}`">{{ type }}</span>
+# Custom Elements Interop changes <MigrationBadges :badges="$frontmatter.badges" />
 
 # Overview
 

src/guide/migration/data-option.md

@@ -1,9 +1,10 @@
 ---
-types:
+title: Data Option
+badges:
   - breaking
 ---
 
-# Data Option <span v-for="type in $frontmatter.types" class="badge" :key="`type-${type}`">{{ type }}</span>
+# {{ $frontmatter.title }} <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 

src/guide/migration/events-api.md

@@ -1,10 +1,9 @@
 ---
-types:
-  - removed
+badges:
   - breaking
 ---
 
-# Events API <span v-for="type in $frontmatter.types" class="badge" :key="`type-${type}`">{{ type }}</span>
+# Events API <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 

src/guide/migration/filters.md

@@ -1,10 +1,9 @@
 ---
-types:
+badges:
   - removed
-  - breaking
 ---
 
-# Filters <span v-for="type in $frontmatter.types" class="badge" :key="`type-${type}`">{{ type }}</span>
+# Filters <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 

src/guide/migration/fragments.md

@@ -1,4 +1,9 @@
-# Fragments
+---
+badges:
+  - new
+---
+
+# Fragments <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 

src/guide/migration/functional-components.md

@@ -1,13 +1,18 @@
-# Functional Components
+---
+badges:
+  - breaking
+---
+
+# Functional Components <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 
 In terms of what has changed, at a high level:
 
 - Performance gains from 2.x for functional components are now negligible in 3.x, so we recommend just using stateful components
 - Functional components can only be created using a plain function that receives `props` and `context` (i.e., `slots`, `attrs`, `emit`)
-- **DEPRECATED:** `functional` attribute on single-file component (SFC) `<template>` is deprecated
-- **DEPRECATED:** `{ functional: true }` option in components created by functions is deprecated
+- **BREAKING:** `functional` attribute on single-file component (SFC) `<template>` is removed
+- **BREAKING:** `{ functional: true }` option in components created by functions is removed
 
 For more information, read on!
 

src/guide/migration/global-api-treeshaking.md

@@ -1,4 +1,9 @@
-# Global API Treeshaking
+---
+badges:
+  - breaking
+---
+
+# Global API Treeshaking <MigrationBadges :badges="$frontmatter.badges" />
 
 ## 2.x Syntax
 
@@ -96,11 +101,7 @@ is compiled into something similar to the following:
 import { h, Transition, withDirectives, vShow } from 'vue'
 
 export function render() {
-  return h(Transition, [
-    withDirectives(h('div', 'hello'), [
-      [vShow, this.ok]
-    ])
-  ])
+  return h(Transition, [withDirectives(h('div', 'hello'), [[vShow, this.ok]])])
 }
 ```
 

src/guide/migration/global-api.md

@@ -1,4 +1,9 @@
-# Global API
+---
+badges:
+  - breaking
+---
+
+# Global API <MigrationBadges :badges="$frontmatter.badges" />
 
 Vue 2.x has a number of global APIs and configurations that globally mutate Vue’s behavior. For instance, to create a global component, you would use the `Vue.component` API like this:
 
@@ -23,18 +28,18 @@ While this approach is convenient, it leads to a couple of problems. Technically
 
 - Global configuration makes it easy to accidentally pollute other test cases during testing. Users need to carefully store original global configuration and restore it after each test (e.g. resetting `Vue.config.errorHandler`). Some APIs like `Vue.use` and `Vue.mixin` don't even have a way to revert their effects. This makes tests involving plugins particularly tricky. In fact, vue-test-utils has to implement a special API `createLocalVue` to deal with this:
 
-  ```js
-  import { createLocalVue, mount } from '@vue/test-utils'
+```js
+import { createLocalVue, mount } from '@vue/test-utils'
 
-  // create an extended `Vue` constructor
-  const localVue = createLocalVue()
+// create an extended `Vue` constructor
+const localVue = createLocalVue()
 
-  // install a plugin “globally” on the “local” Vue constructor
-  localVue.use(MyPlugin)
+// install a plugin “globally” on the “local” Vue constructor
+localVue.use(MyPlugin)
 
-  // pass the `localVue` to the mount options
-  mount(Component, { localVue })
-  ```
+// pass the `localVue` to the mount options
+mount(Component, { localVue })
+```
 
 - Global configuration makes it difficult to share the same copy of Vue between multiple "apps" on the same page, but with different global configurations.
 

src/guide/migration/inline-template-attribute.md

@@ -1,10 +1,9 @@
 ---
-types:
+badges:
   - breaking
-  - removal
 ---
 
-# Inline Template Attribute
+# Inline Template Attribute <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 
@@ -68,7 +67,7 @@ A component previously using `inline-template` can also be refactored using the
 </my-comp>
 ```
 
-The child, instead of providing no template, should now render the default slot*:
+The child, instead of providing no template, should now render the default slot\*:
 
 ```html
 <!--
@@ -80,4 +79,4 @@ The child, instead of providing no template, should now render the default slot*
 </template>
 ```
 
-> * Note: In 3.x, slots can be rendered as the root with native [fragments](/guide/migration/fragments) support!
+> - Note: In 3.x, slots can be rendered as the root with native [fragments](/guide/migration/fragments) support!

src/guide/migration/keycode-modifiers.md

@@ -1,4 +1,9 @@
-# KeyCode Modifiers
+---
+badges:
+  - breaking
+---
+
+# KeyCode Modifiers <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 

src/guide/migration/render-function-api.md

@@ -1,4 +1,9 @@
-# Render Function API
+---
+badges:
+  - breaking
+---
+
+# Render Function API <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 

src/guide/migration/slots-unification.md

@@ -1,4 +1,9 @@
-# Slots Unification
+---
+badges:
+  - breaking
+---
+
+# Slots Unification <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 

src/guide/migration/v-model.md

@@ -1,4 +1,9 @@
-# `v-model`
+---
+badges:
+  - breaking
+---
+
+# `v-model` <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview