bootstrap-vue · tmorehouse · Dec 14, 2018 · Dec 12, 2018 · Dec 12, 2018 · Dec 12, 2018
diff --git a/docs/assets/css/styles.css b/docs/assets/css/styles.css
@@ -16,15 +16,10 @@
 }
 
 .hljs {
-  font-family: "Inconsolata", "Monaco", "Andale Mono", "Lucida Console", "Bitstream Vera Sans Mono", "Courier New",
-    Courier, monospace !important;
-  font-size: 17px;
   overflow-x: auto;
   position: relative;
   background-color: #f9f9f9;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
-  padding: 1em 1em 1em 1em;
-  margin-bottom: 1em;
 }
 
 .CodeMirror {
@@ -54,6 +49,10 @@ blockquote {
   z-index: 100 !important;
 }
 
+.vue-example {
+  overflow-x: auto;
+}
+
 pre.editable:after {
   content: '(double click to edit)';
   position: absolute;

diff --git a/docs/nuxt.config.js b/docs/nuxt.config.js
@@ -8,14 +8,14 @@ const renderer = new marked.Renderer()
 renderer.code = (code, language) => {
   const validLang = !!(language && hljs.getLanguage(language))
   const highlighted = validLang ? hljs.highlight(language, code).value : code
-  return `<pre class="hljs ${language}">${highlighted}</pre>`
+  return `<pre class="hljs ${language} text-monospace p-2">${highlighted}</pre>`
 }
 
 // BS4 table support for markdown renderer
 const originalTable = renderer.table
 renderer.table = function renderTable (header, body) {
   let r = originalTable.apply(this, arguments)
-  return r.replace('<table>', '<table class="table b-table table-sm table-striped">')
+  return r.replace('<table>', '<table class="table b-table table-striped">')
     .replace('<thead>', '<thead class="thead-default">')
 }
 
@@ -103,15 +103,18 @@ module.exports = {
   },
 
   head: {
+    meta: [
+      { 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' }
+    ],
     script: [
-      { type: 'javascript', src: '//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js' }
+      { type: 'text/javascript', src: '//unpkg.com/@babel/polyfill@latest/dist/polyfill.min.js' }
     ]
   },
 
   css: [
-    'bootstrap/dist/css/bootstrap.css',
     'highlightjs/styles/atom-one-light.css',
     'codemirror/lib/codemirror.css',
+    'bootstrap/dist/css/bootstrap.css',
     '../src/index.scss', // Boostrap-Vue SCSS
     '@assets/css/docs.min.css',
     '@assets/css/styles.css'

diff --git a/docs/pages/play.vue b/docs/pages/play.vue
@@ -13,6 +13,9 @@
           You can clone docs repo, to hack and develop components.
           changes will be reflected and hot-reloaded instantly.
         </p>
+        <div v-if="loading" class="alert alert-info show text-center">
+          <strong>Loading JavaScript Compiler...</strong>
+        </div>
       </div>
       <div class="col-12">
         <form
@@ -53,7 +56,7 @@
                   size="sm"
                   @click="toggleFull"
                   variant="outline-info"
-                  class="float-right">
+                  class="float-right d-none d-md-inline-block">
                   <span>{{ full ? 'Split' : 'Full' }}</span>
                 </b-btn>
               </div>
@@ -73,7 +76,7 @@
                   size="sm"
                   @click="toggleFull"
                   variant="outline-info"
-                  class="float-right">
+                  class="float-right d-none d-md-inline-block">
                   <span>{{ full ? 'Split' : 'Full' }}</span>
                 </b-btn>
               </div>
@@ -96,7 +99,7 @@
               size="sm"
               @click="toggleVertical"
               variant="outline-info"
-              class="float-right"
+              class="float-right d-none d-md-inline-block"
               v-if="!full">
               <span>{{ vertical ? 'Horizontal' : 'Vertical' }}</span>
             </b-btn>
@@ -121,15 +124,15 @@
             tag="ul"
             name="flip-list"
             class="list-group list-group-flush play-log">
-            <li v-if="!messages.length" key="console-1" class="list-group-item">&nbsp;</li>
+            <li v-if="!messages.length" key="empty-console" class="list-group-item">&nbsp;</li>
             <li
               v-for="(msg, idx) in messages"
-              class="list-group-item py-2"
+              class="list-group-item py-2 d-flex"
               :key="`console-${msg[2]}`">
               <b-badge :variant="msg[0]" class="mr-1" style="font-size:90%;">{{
                 msg[0] === 'danger' ? 'error' : msg[0] === 'warning' ? 'warn' : 'log'
               }}</b-badge>
-              <span :class="[`text-${msg[0]}`]"> {{ msg[1] }}</span>
+              <div :class="[`text-${msg[0]}`, 'text-monospace', 'small']" style="white-space: pre-wrap;">{{ msg[1] }}</div>
             </li>
           </transition-group>
         </div>
@@ -162,27 +165,29 @@ import Vue from 'vue'
 import debounce from 'lodash/debounce'
 
 const defaultJS = `{
-  data: {
-    name: 'Bootstrap-Vue',
-    show: true
+  data () {
+    return {
+      name: 'Bootstrap-Vue',
+      show: true
+    }
   },
   watch: {
-    show: function (newVal, oldVal) {
+    show (newVal, oldVal) {
       console.log('Alert is now ' + (this.show ? 'visible' : 'hidden'))
     }
   },
   methods: {
-    toggle: function () {
+    toggle () {
       console.log('Toggle button clicked')
       this.show = !this.show
     },
-    dismissed: function () {
+    dismissed () {
       console.log('Dismiss button clicked')
     }
   }
 }`
 
-const defaultHTML = `<div style="height:7.5rem;">
+const defaultHTML = `<div>
   <b-button @click="toggle">
     {{ show ? 'Hide' : 'Show' }} Alert
   </b-button>
@@ -210,7 +215,8 @@ export default {
       messages: [],
       logIdx: 1, // used as the ":key" on console section for transition hooks
       vertical: false,
-      full: false
+      full: false,
+      loading: false
     }
   },
   head () {
@@ -295,21 +301,31 @@ export default {
     this.playVM = null
     this.contentUnWatch = null
     this.run = () => {}
+    this.compiler = (code) => code
   },
   mounted () {
-    // Create our debounced runner
-    this.run = debounce(this._run, 500)
-
-    // Set up our editor content watcher.
-    // We do this on mount to avoid SSR issues as normal watchers
-    // can run before mount
-    this.contentUnWatch = this.$watch(
-      () => { return { js: this.js.trim(), html: this.html.trim() } },
-      (newVal, oldVal) => { this.run() }
-    )
-    // load our content into the editors after dom updated
-    // Which triggers our watcher
-    this.$nextTick(this.load)
+    this.$nextTick(() => {
+      // Start the loading indicator
+      this.loading = true
+      this.$nuxt.$loading.start()
+      // Lazy load the babel transpiler
+      import('../utils/compile-js').then((module) => {
+        // Update compiler reference
+        this.compiler = module.default
+        // Create our debounced runner
+        this.run = debounce(this._run, 500)
+        // Set up our editor content watcher.
+        this.contentUnWatch = this.$watch(
+          () => this.js.trim() + '::' + this.html.trim(),
+          (newVal, oldVal) => { this.run() }
+        )
+        // Stop the loading indicator
+        this.$nuxt.$loading.finish()
+        this.loading = false
+        // load our content into the editors
+        this.$nextTick(this.load)
+      })
+    })
   },
   beforeDestroy () {
     if (this.contentUnWatch) {
@@ -341,7 +357,7 @@ export default {
       const playground = this
       const js = this.js.trim() || '{}'
       const html = this.html.trim()
-      let options
+      let options = {}
       let console
 
       // Disable the export to fiddle button
@@ -351,11 +367,13 @@ export default {
       try {
         // Options are eval'ed in our variable scope, so we can override
         // the "global" console reference just for the user app
+        const code = this.compiler(`;options = ${js};`)
         /* eslint-disable no-eval */
-        eval(`console = this.fakeConsole; options = ${js};`)
+        eval(`console = this.fakeConsole; ${code}`)
         /* eslint-enable no-eval */
       } catch (err) {
         this.errHandler(err, 'javascript')
+        window.console.error('Error in javascript', err)
         return
       }
 
@@ -461,7 +479,7 @@ export default {
       }
       const msg = args.map(String).join(' ')
       if (this.messages.length && msg.indexOf('Error in render') !== -1 && msg === this.messages[0][1]) {
-        // prevent duplicate render errors
+        // prevent duplicate render error messages
         return
       }
       if (this.messages.length > 10) {

diff --git a/docs/plugins/play.js b/docs/plugins/play.js
@@ -13,6 +13,9 @@ const CLASS_NAMES = {
   error: 'error',
 }
 
+// Temporary compiler code, until directive is loaded/applied
+let compiler = (code) => code
+
 const match = (regex, text) => (regex.exec(text) || [])[1]
 const removeNode = node => node && node.parentNode && node.parentNode.removeChild(node)
 
@@ -29,7 +32,8 @@ const parseVueTemplate = text => {
   // Try to evalue script
   if (script && script.includes('export default')) {
     try {
-      eval(script.replace('export default', 'options = '))
+      const code = compiler(script.replace('export default', ';options = '))
+      eval(code)
     } catch (e) {
       return false
     }
@@ -76,62 +80,67 @@ const destroyVM = (name, vm) => {
 }
 
 Vue.directive('play', (el, binding, vnode, oldVnode) => {
-  // Get all code-snippets
-  const pres = [...el.querySelectorAll('pre.hljs')]
-
-  // Iterate over them and parse
-  pres.forEach(pre => {
-    // Store example name globally
-    const name = match(NAME_REGEX, pre.textContent)
+  import('../utils/compile-js').then((module) => {
+    // Save the compiler reference for template parser
+    compiler = module.default
+
+    // Get all code-snippets
+    const pres = [...el.querySelectorAll('pre.hljs')]
+
+    // Iterate over them and parse
+    pres.forEach(pre => {
+      // Store example name globally
+      const name = match(NAME_REGEX, pre.textContent)
+
+      // Exit early when no name is given
+      if (!name) {
+        return
+      }
 
-    // Exit early when no name is given
-    if (!name) {
-      return
-    }
+      // Remove name defintion
+      let text = pre.textContent.replace(NAME_DEFINITION_REGEX, '').trim()
+      pre.textContent = text
 
-    // Remove name defintion
-    let text = pre.textContent.replace(NAME_DEFINITION_REGEX, '').trim()
-    pre.textContent = text
+      // Highlight again
+      hljs.highlightBlock(pre)
 
-    // Highlight again
-    hljs.highlightBlock(pre)
+      // Add editable class
+      pre.classList.add(CLASS_NAMES.editable)
 
-    // Add editable class
-    pre.classList.add(CLASS_NAMES.editable)
+      // Initial load
+      let vm = createVM(name, pre, vnode)
 
-    // Initial load
-    let vm = createVM(name, pre, vnode)
+      if (!Array.isArray(vnode.context.$options['beforeDestroy'])) {
+        vnode.context.$options['beforeDestroy'] = []
+      }
 
-    if (!Array.isArray(vnode.context.$options['beforeDestroy'])) {
-      vnode.context.$options['beforeDestroy'] = []
-    }
+      vnode.context.$options['beforeDestroy'].push(() => destroyVM(name, vm))
 
-    vnode.context.$options['beforeDestroy'].push(() => destroyVM(name, vm))
+      // Enable live edit on double click
+      pre.ondblclick = async () => {
+        // Add live class
+        pre.classList.add(CLASS_NAMES.live)
+        // Make editable
+        pre.contentEditable = true
 
-    // Enable live edit on double click
-    pre.ondblclick = async () => {
-      // Add live class
-      pre.classList.add(CLASS_NAMES.live)
-      // Make editable
-      pre.contentEditable = true
+        pre.onblur = () => {
+          // Rehighlight
+          hljs.highlightBlock(pre)
+        }
 
-      pre.onblur = () => {
-        // Rehighlight
-        hljs.highlightBlock(pre)
+        pre.onkeyup = debounce(() => {
+          // Recreate VM
+          destroyVM(name, vm)
+          vm = createVM(name, pre, vnode)
+
+          // Toggle error class
+          if (vm === null) {
+            pre.classList.add(CLASS_NAMES.error)
+          } else {
+            pre.classList.remove(CLASS_NAMES.error)
+          }
+        }, 250)
       }
-
-      pre.onkeyup = debounce(() => {
-        // Recreate VM
-        destroyVM(name, vm)
-        vm = createVM(name, pre, vnode)
-
-        // Toggle error class
-        if (vm === null) {
-          pre.classList.add(CLASS_NAMES.error)
-        } else {
-          pre.classList.remove(CLASS_NAMES.error)
-        }
-      }, 250)
-    }
+    })
   })
 })