From 0f25a8dbbb75d44c4b0466a2fd95d511b33b697f Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Tue, 27 Apr 2021 15:04:08 +0100
Subject: [PATCH 1/3] chore: remove spaces between triple backticks and the
 language (#1019)

---
 src/guide/a11y-basics.md          |   6 +-
 src/guide/component-edge-cases.md |   2 +-
 src/style-guide/README.md         | 172 +++++++++++++++---------------
 3 files changed, 90 insertions(+), 90 deletions(-)

diff --git a/src/guide/a11y-basics.md b/src/guide/a11y-basics.md
index d7d83d8106..84e5b5c5c5 100644
--- a/src/guide/a11y-basics.md
+++ b/src/guide/a11y-basics.md
@@ -12,7 +12,7 @@ You should add a link at the top of each page that goes directly to the main con
 
 Typically this is done on the top of `App.vue` as it will be the first focusable element on all your pages:
 
-``` html
+```html
 <ul class="skip-links">
   <li>
     <a href="#main" ref="skipLink">Skip to main content</a>
@@ -22,7 +22,7 @@ Typically this is done on the top of `App.vue` as it will be the first focusable
 
 To hide the link unless it is focused, you can add the following style:
 
-``` css
+```css
 .skipLink {
   white-space: nowrap;
   margin: 1em auto;
@@ -42,7 +42,7 @@ To hide the link unless it is focused, you can add the following style:
 
 Once a user changes route, bring focus back to the skip link. This can be achieved by calling focus to the `ref` provided below:
 
-``` vue
+```vue
 <script>
 export default {
   watch: {
diff --git a/src/guide/component-edge-cases.md b/src/guide/component-edge-cases.md
index 718c6cad72..d68fa00f20 100644
--- a/src/guide/component-edge-cases.md
+++ b/src/guide/component-edge-cases.md
@@ -20,7 +20,7 @@ However, if you've ruled out the above and find yourself in this extremely rare
 
 Rendering plain HTML elements is very fast in Vue, but sometimes you might have a component that contains **a lot** of static content. In these cases, you can ensure that it's only evaluated once and then cached by adding the `v-once` directive to the root element, like this:
 
-``` js
+```js
 app.component('terms-of-service', {
   template: `
     <div v-once>
diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index 8942647328..28820749b2 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -43,13 +43,13 @@ This [prevents conflicts](https://html.spec.whatwg.org/multipage/custom-elements
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` js
+```js
 app.component('todo', {
   // ...
 })
 ```
 
-``` js
+```js
 export default {
   name: 'Todo',
   // ...
@@ -60,13 +60,13 @@ export default {
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` js
+```js
 app.component('todo-item', {
   // ...
 })
 ```
 
-``` js
+```js
 export default {
   name: 'TodoItem',
   // ...
@@ -90,7 +90,7 @@ Detailed [prop definitions](/guide/component-props.html#prop-validation) have tw
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` js
+```js
 // This is only OK when prototyping
 props: ['status']
 ```
@@ -99,13 +99,13 @@ props: ['status']
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` js
+```js
 props: {
   status: String
 }
 ```
 
-``` js
+```js
 // Even better!
 props: {
   status: {
@@ -134,7 +134,7 @@ props: {
 ::: details Detailed Explanation
 Let's say you have a list of todos:
 
-``` js
+```js
 data() {
   return {
     todos: [
@@ -161,7 +161,7 @@ In our experience, it's better to _always_ add a unique key, so that you and you
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` html
+```html
 <ul>
   <li v-for="todo in todos">
     {{ todo.text }}
@@ -173,7 +173,7 @@ In our experience, it's better to _always_ add a unique key, so that you and you
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` html
+```html
 <ul>
   <li
     v-for="todo in todos"
@@ -198,7 +198,7 @@ There are two common cases where this can be tempting:
 ::: details Detailed Explanation
 When Vue processes directives, `v-if` has a higher priority than `v-for`, so that this template:
 
-``` html
+```html
 <ul>
   <li
     v-for="user in users"
@@ -214,7 +214,7 @@ Will throw an error, because the `v-if` directive will be evaluated first and th
 
 This could be fixed by iterating over a computed property instead, like this:
 
-``` js
+```js
 computed: {
   activeUsers() {
     return this.users.filter(user => user.isActive)
@@ -222,7 +222,7 @@ computed: {
 }
 ```
 
-``` html
+```html
 <ul>
   <li
     v-for="user in activeUsers"
@@ -250,7 +250,7 @@ Alternatively, we can use a `<template>` tag with `v-for` to wrap the `<li>` ele
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` html
+```html
 <ul>
   <li
     v-for="user in users"
@@ -266,7 +266,7 @@ Alternatively, we can use a `<template>` tag with `v-for` to wrap the `<li>` ele
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` html
+```html
 <ul>
   <li
     v-for="user in activeUsers"
@@ -307,7 +307,7 @@ Beyond the `scoped` attribute, using unique class names can help ensure that 3rd
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` html
+```html
 <template>
   <button class="btn btn-close">×</button>
 </template>
@@ -323,7 +323,7 @@ Beyond the `scoped` attribute, using unique class names can help ensure that 3rd
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` html
+```html
 <template>
   <button class="button button-close">×</button>
 </template>
@@ -341,7 +341,7 @@ Beyond the `scoped` attribute, using unique class names can help ensure that 3rd
 </style>
 ```
 
-``` html
+```html
 <template>
   <button :class="[$style.button, $style.buttonClose]">×</button>
 </template>
@@ -359,7 +359,7 @@ Beyond the `scoped` attribute, using unique class names can help ensure that 3rd
 </style>
 ```
 
-``` html
+```html
 <template>
   <button class="c-Button c-Button--close">×</button>
 </template>
@@ -393,7 +393,7 @@ Instead, we recommend combining the two prefixes into `$_`, as a convention for
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` js
+```js
 const myGreatMixin = {
   // ...
   methods: {
@@ -404,7 +404,7 @@ const myGreatMixin = {
 }
 ```
 
-``` js
+```js
 const myGreatMixin = {
   // ...
   methods: {
@@ -415,7 +415,7 @@ const myGreatMixin = {
 }
 ```
 
-``` js
+```js
 const myGreatMixin = {
   // ...
   methods: {
@@ -426,7 +426,7 @@ const myGreatMixin = {
 }
 ```
 
-``` js
+```js
 const myGreatMixin = {
   // ...
   methods: {
@@ -442,7 +442,7 @@ const myGreatMixin = {
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` js
+```js
 const myGreatMixin = {
   // ...
   methods: {
@@ -453,7 +453,7 @@ const myGreatMixin = {
 }
 ```
 
-``` js
+```js
 // Even better!
 const myGreatMixin = {
   // ...
@@ -484,7 +484,7 @@ This helps you to more quickly find a component when you need to edit it or revi
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` js
+```js
 app.component('TodoList', {
   // ...
 })
@@ -568,7 +568,7 @@ Some advantages of this convention:
 
 - Since these components are so frequently used, you may want to simply make them global instead of importing them everywhere. A prefix makes this possible with Webpack:
 
-  ``` js
+  ```js
   const requireComponent = require.context("./src", true, /Base[A-Z]\w+\.(vue|js)$/)
   requireComponent.keys().forEach(function (fileName) {
     let baseComponentConfig = requireComponent(fileName)
@@ -803,12 +803,12 @@ Unfortunately, HTML doesn't allow custom elements to be self-closing - only [off
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` html
+```html
 <!-- In single-file components, string templates, and JSX -->
 <MyComponent></MyComponent>
 ```
 
-``` html
+```html
 <!-- In DOM templates -->
 <my-component/>
 ```
@@ -817,12 +817,12 @@ Unfortunately, HTML doesn't allow custom elements to be self-closing - only [off
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` html
+```html
 <!-- In single-file components, string templates, and JSX -->
 <MyComponent/>
 ```
 
-``` html
+```html
 <!-- In DOM templates -->
 <my-component></my-component>
 ```
@@ -845,17 +845,17 @@ Also note that if you've already invested heavily in kebab-case, consistency wit
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` html
+```html
 <!-- In single-file components and string templates -->
 <mycomponent/>
 ```
 
-``` html
+```html
 <!-- In single-file components and string templates -->
 <myComponent/>
 ```
 
-``` html
+```html
 <!-- In DOM templates -->
 <MyComponent></MyComponent>
 ```
@@ -864,19 +864,19 @@ Also note that if you've already invested heavily in kebab-case, consistency wit
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` html
+```html
 <!-- In single-file components and string templates -->
 <MyComponent/>
 ```
 
-``` html
+```html
 <!-- In DOM templates -->
 <my-component></my-component>
 ```
 
 OR
 
-``` html
+```html
 <!-- Everywhere -->
 <my-component></my-component>
 ```
@@ -898,24 +898,24 @@ However, for applications that use **only** global component definitions via `ap
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` js
+```js
 app.component('myComponent', {
   // ...
 })
 ```
 
-``` js
+```js
 import myComponent from './MyComponent.vue'
 ```
 
-``` js
+```js
 export default {
   name: 'myComponent',
   // ...
 }
 ```
 
-``` js
+```js
 export default {
   name: 'my-component',
   // ...
@@ -926,23 +926,23 @@ export default {
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` js
+```js
 app.component('MyComponent', {
   // ...
 })
 ```
 
-``` js
+```js
 app.component('my-component', {
   // ...
 })
 ```
 
-``` js
+```js
 import MyComponent from './MyComponent.vue'
 ```
 
-``` js
+```js
 export default {
   name: 'MyComponent',
   // ...
@@ -985,13 +985,13 @@ We're simply following the conventions of each language. Within JavaScript, came
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` js
+```js
 props: {
   'greeting-text': String
 }
 ```
 
-``` html
+```html
 <WelcomeMessage greetingText="hi"/>
 ```
 </div>
@@ -999,13 +999,13 @@ props: {
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` js
+```js
 props: {
   greetingText: String
 }
 ```
 
-``` html
+```html
 <WelcomeMessage greeting-text="hi"/>
 ```
 </div>
@@ -1019,11 +1019,11 @@ In JavaScript, splitting objects with multiple properties over multiple lines is
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` html
+```html
 <img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
 ```
 
-``` html
+```html
 <MyComponent foo="a" bar="b" baz="c"/>
 ```
 </div>
@@ -1031,14 +1031,14 @@ In JavaScript, splitting objects with multiple properties over multiple lines is
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` html
+```html
 <img
   src="https://vuejs.org/images/logo.png"
   alt="Vue Logo"
 >
 ```
 
-``` html
+```html
 <MyComponent
   foo="a"
   bar="b"
@@ -1056,7 +1056,7 @@ Complex expressions in your templates make them less declarative. We should stri
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` html
+```html
 {{
   fullName.split(' ').map((word) => {
     return word[0].toUpperCase() + word.slice(1)
@@ -1068,12 +1068,12 @@ Complex expressions in your templates make them less declarative. We should stri
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` html
+```html
 <!-- In a template -->
 {{ normalizedFullName }}
 ```
 
-``` js
+```js
 // The complex expression has been moved to a computed property
 computed: {
   normalizedFullName() {
@@ -1110,7 +1110,7 @@ Simpler, well-named computed properties are:
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` js
+```js
 computed: {
   price() {
     const basePrice = this.manufactureCost / (1 - this.profitMargin)
@@ -1126,7 +1126,7 @@ computed: {
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` js
+```js
 computed: {
   basePrice() {
     return this.manufactureCost / (1 - this.profitMargin)
@@ -1152,11 +1152,11 @@ While attribute values without any spaces are not required to have quotes in HTM
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` html
+```html
 <input type=text>
 ```
 
-``` html
+```html
 <AppSidebar :style={width:sidebarWidth+'px'}>
 ```
 </div>
@@ -1164,11 +1164,11 @@ While attribute values without any spaces are not required to have quotes in HTM
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` html
+```html
 <input type="text">
 ```
 
-``` html
+```html
 <AppSidebar :style="{ width: sidebarWidth + 'px' }">
 ```
 </div>
@@ -1180,21 +1180,21 @@ While attribute values without any spaces are not required to have quotes in HTM
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` html
+```html
 <input
   v-bind:value="newTodoText"
   :placeholder="newTodoInstructions"
 >
 ```
 
-``` html
+```html
 <input
   v-on:input="onInput"
   @focus="onFocus"
 >
 ```
 
-``` html
+```html
 <template v-slot:header>
   <h1>Here might be a page title</h1>
 </template>
@@ -1208,35 +1208,35 @@ While attribute values without any spaces are not required to have quotes in HTM
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` html
+```html
 <input
   :value="newTodoText"
   :placeholder="newTodoInstructions"
 >
 ```
 
-``` html
+```html
 <input
   v-bind:value="newTodoText"
   v-bind:placeholder="newTodoInstructions"
 >
 ```
 
-``` html
+```html
 <input
   @input="onInput"
   @focus="onFocus"
 >
 ```
 
-``` html
+```html
 <input
   v-on:input="onInput"
   v-on:focus="onFocus"
 >
 ```
 
-``` html
+```html
 <template v-slot:header>
   <h1>Here might be a page title</h1>
 </template>
@@ -1246,7 +1246,7 @@ While attribute values without any spaces are not required to have quotes in HTM
 </template>
 ```
 
-``` html
+```html
 <template #header>
   <h1>Here might be a page title</h1>
 </template>
@@ -1367,7 +1367,7 @@ When components begin to feel cramped or difficult to read, adding spaces betwee
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` js
+```js
 props: {
   value: {
     type: String,
@@ -1394,7 +1394,7 @@ computed: {
 }
 ```
 
-``` js
+```js
 // No spaces are also fine, as long as the component
 // is still easy to read and navigate.
 props: {
@@ -1427,13 +1427,13 @@ computed: {
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` html
+```html
 <style>/* ... */</style>
 <script>/* ... */</script>
 <template>...</template>
 ```
 
-``` html
+```html
 <!-- ComponentA.vue -->
 <script>/* ... */</script>
 <template>...</template>
@@ -1449,7 +1449,7 @@ computed: {
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` html
+```html
 <!-- ComponentA.vue -->
 <script>/* ... */</script>
 <template>...</template>
@@ -1461,7 +1461,7 @@ computed: {
 <style>/* ... */</style>
 ```
 
-``` html
+```html
 <!-- ComponentA.vue -->
 <template>...</template>
 <script>/* ... */</script>
@@ -1491,7 +1491,7 @@ The problem is that large numbers of [element-attribute selectors](http://steves
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` html
+```html
 <template>
   <button>×</button>
 </template>
@@ -1507,7 +1507,7 @@ button {
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` html
+```html
 <template>
   <button class="btn btn-close">×</button>
 </template>
@@ -1531,7 +1531,7 @@ The problem is, there are also many _simple_ cases where these patterns may offe
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` js
+```js
 app.component('TodoItem', {
   props: {
     todo: {
@@ -1544,7 +1544,7 @@ app.component('TodoItem', {
 })
 ```
 
-``` js
+```js
 app.component('TodoItem', {
   props: {
     todo: {
@@ -1574,7 +1574,7 @@ app.component('TodoItem', {
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` js
+```js
 app.component('TodoItem', {
   props: {
     todo: {
@@ -1594,7 +1594,7 @@ app.component('TodoItem', {
 })
 ```
 
-``` js
+```js
 app.component('TodoItem', {
   props: {
     todo: {
@@ -1628,7 +1628,7 @@ Vuex is the [official flux-like implementation](/guide/state-management.html#off
 <div class="style-example style-example-bad">
 <h4>Bad</h4>
 
-``` js
+```js
 // main.js
 import { createApp } from 'vue'
 import mitt from 'mitt'
@@ -1657,7 +1657,7 @@ const app = createApp({
 <div class="style-example style-example-good">
 <h4>Good</h4>
 
-``` js
+```js
 // store/modules/todos.js
 export default {
   state: {
@@ -1678,7 +1678,7 @@ export default {
 }
 ```
 
-``` html
+```html
 <!-- TodoItem.vue -->
 <template>
   <span>

From da874b21fab5d00cd6edb876d69a841c0052ee69 Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Tue, 27 Apr 2021 15:05:03 +0100
Subject: [PATCH 2/3] docs: return values for render functions (#1006)

---
 src/guide/render-function.md | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index 80360f6dc4..37a44c73bc 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -567,6 +567,33 @@ render () {
 }
 ```
 
+## Return Values for Render Functions
+
+In all of the examples we've seen so far, the `render` function has returned a single root VNode. However, there are alternatives.
+
+Returning a string will create a text VNode, without any wrapping element:
+
+```js
+render() {
+  return 'Hello world!'
+}
+```
+
+We can also return an array of children, without wrapping them in a root node. This creates a fragment:
+
+```js
+// Equivalent to a template of `Hello<br>world!`
+render() {
+  return [
+    'Hello',
+    h('br'),
+    'world!'
+  ]
+}
+```
+
+If a component needs to render nothing, perhaps because data is still loading, it can just return `null`. This will be rendered as a comment node in the DOM.
+
 ## JSX
 
 If we're writing a lot of `render` functions, it might feel painful to write something like this:

From 5753b78caa80309065554b2c2583bcdce03bc325 Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Tue, 27 Apr 2021 15:54:34 +0100
Subject: [PATCH 3/3] chore: switch javascript code blocks to js (#1020)

---
 src/guide/migration/custom-directives.md | 4 ++--
 src/guide/migration/filters.md           | 2 +-
 src/guide/migration/listeners-removed.md | 4 ++--
 src/guide/render-function.md             | 2 +-
 src/guide/single-file-component.md       | 4 ++--
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/guide/migration/custom-directives.md b/src/guide/migration/custom-directives.md
index 985267b0e3..e6a2b32182 100644
--- a/src/guide/migration/custom-directives.md
+++ b/src/guide/migration/custom-directives.md
@@ -85,7 +85,7 @@ It's generally recommended to keep directives independent of the component insta
 
 In Vue 2, the component instance had to be accessed through the `vnode` argument:
 
-```javascript
+```js
 bind(el, binding, vnode) {
   const vm = vnode.context
 }
@@ -93,7 +93,7 @@ bind(el, binding, vnode) {
 
 In Vue 3, the instance is now part of the `binding`:
 
-```javascript
+```js
 mounted(el, binding, vnode) {
   const vm = binding.instance
 }
diff --git a/src/guide/migration/filters.md b/src/guide/migration/filters.md
index f622ade9c2..cc58cbb572 100644
--- a/src/guide/migration/filters.md
+++ b/src/guide/migration/filters.md
@@ -79,7 +79,7 @@ If you are using filters that were globally registered and then used throughout
 
 Instead, you can make your global filters available to all components through [globalProperties](../../api/application-config.html#globalproperties):
 
-```javascript
+```js
 // main.js
 const app = createApp(App)
 
diff --git a/src/guide/migration/listeners-removed.md b/src/guide/migration/listeners-removed.md
index 5a84f3592a..f6c650c5b0 100644
--- a/src/guide/migration/listeners-removed.md
+++ b/src/guide/migration/listeners-removed.md
@@ -10,7 +10,7 @@ badges:
 
 The `$listeners` object has been removed in Vue 3. Event listeners are now part of `$attrs`:
 
-```javascript
+```js
 {
   text: 'this is an attribute',
   onClose: () => console.log('close Event triggered')
@@ -54,7 +54,7 @@ export default {
 
 If this component received an `id` attribute and a `v-on:close` listener, the `$attrs` object will now look like this:
 
-```javascript
+```js
 {
   id: 'my-input',
   onClose: () => console.log('close Event triggered')
diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index 37a44c73bc..fda002f2e2 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -354,7 +354,7 @@ For the `.passive`, `.capture`, and `.once` event modifiers, they can be concate
 
 For example:
 
-```javascript
+```js
 render() {
   return h('input', {
     onClickCapture: this.doThisInCapturingMode,
diff --git a/src/guide/single-file-component.md b/src/guide/single-file-component.md
index 7760d56097..a92b709130 100644
--- a/src/guide/single-file-component.md
+++ b/src/guide/single-file-component.md
@@ -90,7 +90,7 @@ touch rollup.config.js
 
 Once the file is created we will need to open it with our editor of choice and add the following code.
 
-```javascript
+```js
 // import our third party plugins
 import commonjs from 'rollup-plugin-commonjs'
 import VuePlugin from 'rollup-plugin-vue'
@@ -144,7 +144,7 @@ Here we are specifying:
 To also build `umd` and `cjs` modules we can simply add a few lines of configuration to our `rollup.config.js` and `package.json`
 
 ##### rollup.config.js 
-```javascript
+```js
 output: [
   ...
    {