fix(docs): drop self-closing tags + build system improvements (fixes #2882) (#2893)

* fix(docs): drop self-closing tags + build system improvements

* prettify

* further remove self-closing tags

* remove all remaining self-closing tags

* Update table-tfoot-events.spec.js

* Update table-thead-events.spec.js

* improve docs markup

* Update search.vue

Author: jacobmllr95

.eslintignore

@@ -1,3 +1,6 @@
 .nuxt/
+dist/
+docs-dist/
+es/
 node_modules/
 nuxt/plugin.template.js

.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   extends: ['standard', 'plugin:vue/recommended', 'plugin:prettier/recommended'],
-  plugins: ['jest', 'node', 'promise'],
+  plugins: ['jest', 'markdown', 'node', 'promise'],
   parserOptions: {
     parser: 'babel-eslint',
     sourceType: 'module'
@@ -14,6 +14,16 @@ module.exports = {
     Vue: true
   },
   rules: {
+    'vue/html-self-closing': [
+      'error',
+      {
+        html: {
+          void: 'never',
+          normal: 'never',
+          component: 'never'
+        }
+      }
+    ],
     'vue/max-attributes-per-line': ['error', { singleline: 4 }],
     'vue/no-template-shadow': 'off',
     'vue/no-use-v-if-with-v-for': 'off',

README.md

@@ -89,7 +89,7 @@ Thank you to all our backers! 🙏
 
 This project exists thanks to all the people who contribute. [[Contribute]](CONTRIBUTING.md).
 
-<a href="https://github.com/bootstrap-vue/bootstrap-vue/graphs/contributors"><img src="https://opencollective.com/bootstrap-vue/contributors.svg?width=890" /></a>
+<a href="https://github.com/bootstrap-vue/bootstrap-vue/graphs/contributors"><img src="https://opencollective.com/bootstrap-vue/contributors.svg?width=890"></a>
 
 <h2 align="center">License</h2>
 

babel.config.js

@@ -1,8 +1,13 @@
-module.exports = function(api) {
+module.exports = api => {
   const isDocs = api.env('docs')
 
+  let presets = []
+  if (!isDocs) {
+    presets.push(['@babel/env', { useBuiltIns: 'entry', corejs: { version: 2 } }])
+  }
+
   return {
-    presets: isDocs ? [] : [['@babel/env', { useBuiltIns: 'entry', corejs: { version: 2 } }]],
+    presets,
     env: {
       es: {
         plugins: [['@babel/plugin-transform-modules-commonjs', { noInterop: true, loose: true }]]

docs/components/codemirror.vue

@@ -1,5 +1,5 @@
 <template>
-  <textarea ref="textArea" :value="value" />
+  <textarea ref="textArea" :value="value"></textarea>
 </template>
 
 <script>

docs/components/componentdoc.vue

@@ -1,8 +1,5 @@
 <template>
-  <section
-    v-if="component"
-    class="bd-content"
-  >
+  <section v-if="component" class="bd-content">
     <b-row tag="header" align-v="center">
       <b-col sm="9">
         <anchored-heading :id="`comp-ref-${componentName}`" level="2">
@@ -44,7 +41,7 @@
           <b-badge variant="warning">
             {{ typeof item.deprecated === 'string' ? 'deprecation' : 'deprecated' }}
           </b-badge>
-          <!-- if deprecated is a string, show the string value -->
+          <!-- If deprecated is a string, show the string value -->
           <small v-if="typeof item.deprecated === 'string'">{{ item.deprecated }}</small>
         </template>
         <template slot="defaultValue" slot-scope="{ value }">
@@ -83,7 +80,7 @@
         small
         head-variant="default"
         striped
-      />
+      ></b-table>
     </article>
 
     <article v-if="events && events.length > 0">
@@ -113,7 +110,10 @@
       <anchored-heading :id="`comp-ref-${componentName}-rootEventListeners`" level="4">
         $root Event Listeners
       </anchored-heading>
-      <p>You can control <code>{{ tag }}</code> by emitting the following events on <samp>$root</samp>:</p>
+      <p>
+        You can control <code>{{ tag }}</code> by emitting the following events on
+        <samp>$root</samp>:
+      </p>
       <b-table
         :items="rootEventListeners"
         :fields="rootEventListenersFields"
@@ -151,9 +151,7 @@ import kebabCase from 'lodash/kebabCase'
 import AnchoredHeading from './anchored-heading'
 
 export default {
-  components: {
-    AnchoredHeading
-  },
+  components: { AnchoredHeading },
   props: {
     component: {},
     slots: {
@@ -206,7 +204,6 @@ export default {
     },
     propsFields() {
       const props = this.componentProps
-
       const hasRequired = Object.keys(props).some(p => props[p].required)
 
       const fields = [
@@ -259,19 +256,15 @@ export default {
 
         // Describe value
         let defaultVal = p.default
-
         if (defaultVal instanceof Function && !Array.isArray(defaultVal)) {
           defaultVal = defaultVal()
         }
-
         if (typeof defaultVal !== 'string') {
           defaultVal = JSON.stringify(defaultVal)
         }
-
         if (defaultVal === '' || defaultVal === null || defaultVal === 'null') {
           defaultVal = ''
         }
-
         defaultVal = (defaultVal || '').replace(/"/g, "'")
 
         // Requied prop?
@@ -294,7 +287,7 @@ export default {
       return kebabCase(this.component)
     },
     tag() {
-      return '<' + this.componentName + '>'
+      return `<${this.componentName}>`
     },
     githubURL() {
       const base = 'https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components'

docs/components/importdoc.vue

@@ -20,7 +20,7 @@
 
         <p><strong>Example:</strong></p>
 
-        <pre class="hljs js text-monospace p-2"><code v-html="componentImportCode" /></pre>
+        <pre class="hljs js text-monospace p-2"><code v-html="componentImportCode"></code></pre>
       </article>
     </template>
 
@@ -41,7 +41,7 @@
 
         <p><strong>Example:</strong></p>
 
-        <pre class="hljs js text-monospace p-2"><code v-html="directiveImportCode" /></pre>
+        <pre class="hljs js text-monospace p-2"><code v-html="directiveImportCode"></code></pre>
       </article>
     </template>
 
@@ -59,7 +59,7 @@
         This plugin includes all of the above listed individual directives.
       </p>
 
-      <pre class="hljs js text-monospace p-2"><code v-html="pluginImportCode" /></pre>
+      <pre class="hljs js text-monospace p-2"><code v-html="pluginImportCode"></code></pre>
 
       <template v-if="meta.plugins && meta.plugins.length > 0">
         <p>This plugin also automatically includes the following plugins:</p>
@@ -72,15 +72,13 @@
 </template>
 
 <script>
+import hljs from 'highlightjs'
 import kebabCase from 'lodash/kebabCase'
 import startCase from 'lodash/startCase'
-import hljs from 'highlightjs'
 import AnchoredHeading from './anchored-heading'
 
 export default {
-  components: {
-    AnchoredHeading
-  },
+  components: { AnchoredHeading },
   props: {
     meta: {}
   },

docs/components/jsfiddle.vue

@@ -8,11 +8,8 @@
       :allowtransparency="true"
       frameborder="0"
       :src="src"
-    />
-    <div
-      v-if="height === 0"
-      class="text-center"
-    >
+    ></iframe>
+    <div v-if="height === 0" class="text-center">
       <img src="//jsfiddle.net/img/embeddable/logo-dark.png" alt="jsfiddle">
       <br>
       <small class="text-muted mt-1">
@@ -66,13 +63,14 @@ export default {
   },
   computed: {
     src() {
-      let url = `//jsfiddle.net/${this.slug}/embedded/${this.tabs}/${this.theme}?`
-      ;['fontColor', 'accentColor', 'bodyColor', 'menuColor'].forEach(attr => {
+      const attrs = ['fontColor', 'accentColor', 'bodyColor', 'menuColor']
+      const baseUrl = `//jsfiddle.net/${this.slug}/embedded/${this.tabs}/${this.theme}?`
+      return attrs.reduce((url, attr) => {
         if (this[attr] && this[attr].length > 0) {
           url += `${attr}=${this[attr]}&`
         }
-      })
-      return url
+        return url
+      }, baseUrl)
     },
     url() {
       return `//jsfiddle.net/${this.slug}`
@@ -90,23 +88,14 @@ export default {
   },
   methods: {
     setHeight(data) {
-      let height
       if (this.slug === data.slug) {
-        height = data.height <= 0 ? 400 : data.height + 50
-        this.height = height
-        return height
+        this.height = data.height <= 0 ? 400 : data.height + 50
       }
     },
     onMessage(event) {
-      const eventName = event.data[0]
-      const data = event.data[1]
-      switch (eventName) {
-        case 'embed':
-          return this.setHeight(data)
-        case 'resultsFrame':
-          return this.setHeight(data)
-        default:
-          break
+      const [eventName, data] = event.data
+      if (eventName === 'embed' || eventName === 'resultsFrame') {
+        this.setHeight(data)
       }
     }
   }

docs/components/nav.vue

@@ -1,6 +1,6 @@
 <template>
   <b-navbar toggleable="md" class="navbar-dark bd-navbar" sticky>
-    <b-navbar-toggle target="bd-main-nav" />
+    <b-navbar-toggle target="bd-main-nav"></b-navbar-toggle>
 
     <b-navbar-brand to="/" exact>
       <svg
@@ -110,7 +110,7 @@
             scrolling="0"
             width="100px"
             height="20px"
-          />
+          ></iframe>
         </div>
       </b-navbar-nav>
     </b-collapse>