docs: improve Codepen examples by transpile all scripts and styles

Author: marcosmoura

.travis.yml

@@ -23,6 +23,7 @@ before_script:
   - chmod +x ./cc-test-reporter
   - ./cc-test-reporter before-build
 script:
+  - npm rebuild node-sass
   - yarn lint
   - yarn coverage
   - yarn build

build/loaders/component-example-loader.js

@@ -1,11 +1,36 @@
+const sass = require('node-sass')
+const pretty = require('pretty')
+const prettier = require('prettier')
 const path = require('path')
 const compiler = require('vue-template-compiler')
 const transpile = require('vue-template-es2015-compiler')
+const { resolvePath } = require('../config')
+const { getIndentedSource } = require('../../docs/app/mixins/codeSource')
 
 function camelCaseToDash (str) {
   return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
 }
 
+function getComponentScript (script) {
+  return getIndentedSource(`
+    Vue.use(VueMaterial.default)
+
+    ${script}
+
+    const app = new Vue(example)
+
+    app.$mount('#app')
+  `)
+}
+
+function getComponentTemplate (template) {
+  return pretty(`
+    <div id="app">
+      ${template}
+    </div>
+  `)
+}
+
 module.exports = function (source) {
   this.cacheable && this.cacheable()
 
@@ -31,8 +56,36 @@ module.exports = function (source) {
 
   let { script, template, style } = parsedTags
 
+  if (style) {
+    style = style.replace(/~vue-material/g, '.')
+
+    const { css } = sass.renderSync({
+      data: style,
+      includePaths: [resolvePath('src')],
+      outputStyle: 'expanded'
+    })
+
+    style = css.toString('utf8')
+  }
+
+  if (template) {
+    template = template.replace(/src="\/assets/g, 'src="https://vuematerial.io/assets')
+    template = getComponentTemplate(template)
+  }
+
   if (script) {
-    script = script.replace('export default ', '')
+    let newScript = null
+
+    script = script.replace('export default ', 'const example = ')
+    script = getComponentScript(script)
+
+    try {
+      newScript = transpile(script)
+    } catch (e) {
+      newScript = script
+    }
+
+    script = prettier.format(newScript, { semi: false })
   }
 
   const code = `

docs/app/components/CodeBlock.vue

@@ -10,6 +10,65 @@
   </div>
 </template>
 
+<script>
+  import highlight from 'highlight.js/lib/highlight.js'
+  import highlightSCSS from 'highlight.js/lib/languages/scss'
+  import highlightXML from 'highlight.js/lib/languages/xml'
+  import highlightJavascript from 'highlight.js/lib/languages/javascript'
+  import highlightShell from 'highlight.js/lib/languages/shell'
+  import Clipboard from 'clipboard'
+  import codeSource from 'docs-mixins/codeSource'
+
+  highlight.registerLanguage('scss', highlightSCSS)
+  highlight.registerLanguage('xml', highlightXML)
+  highlight.registerLanguage('javascript', highlightJavascript)
+  highlight.registerLanguage('shell', highlightShell)
+
+  export default {
+    name: 'CodeBlock',
+    mixins: [codeSource],
+    props: {
+      lang: String,
+      label: String,
+      height: {
+        type: [Number, String],
+        default: '450px'
+      }
+    },
+    data: () => ({
+      showMessage: false
+    }),
+    methods: {
+      enableCopy () {
+        if (this.$refs.copy) {
+          const clipboard = new Clipboard(this.$refs.copy.$el, {
+            target: () => this.$refs.block
+          })
+          let timer = null
+
+          clipboard.on('success', (event) => {
+            event.clearSelection()
+            this.showMessage = true
+
+            window.clearTimeout(timer)
+            timer = window.setTimeout(() => {
+              this.showMessage = false
+            }, 2000)
+          })
+        }
+      }
+    },
+    async mounted () {
+      await this.$nextTick()
+
+      this.reindentSource()
+      this.enableCopy()
+
+      highlight.highlightBlock(this.$refs.block)
+    }
+  }
+</script>
+
 <style lang="scss" scoped>
   @import "~vue-material/components/MdAnimation/variables";
   @import "~vue-material/theme/engine";
@@ -193,81 +252,3 @@
     color: #bbdf88;
   }
 </style>
-
-<script>
-import highlight from 'highlight.js/lib/highlight.js'
-import highlightSCSS from 'highlight.js/lib/languages/scss'
-import highlightXML from 'highlight.js/lib/languages/xml'
-import highlightJavascript from 'highlight.js/lib/languages/javascript'
-import highlightShell from 'highlight.js/lib/languages/shell'
-import Clipboard from 'clipboard'
-
-highlight.registerLanguage('scss', highlightSCSS)
-highlight.registerLanguage('xml', highlightXML)
-highlight.registerLanguage('javascript', highlightJavascript)
-highlight.registerLanguage('shell', highlightShell)
-
-export default {
-  name: 'CodeBlock',
-  props: {
-    lang: String,
-    label: String,
-    height: {
-      type: [Number, String],
-      default: '450px'
-    }
-  },
-  data: () => ({
-    showMessage: false
-  }),
-  methods: {
-    enableCopy () {
-      if (this.$refs.copy) {
-        const clipboard = new Clipboard(this.$refs.copy.$el, {
-          target: () => this.$refs.block
-        })
-        let timer = null
-
-        clipboard.on('success', (event) => {
-          event.clearSelection()
-          this.showMessage = true
-
-          window.clearTimeout(timer)
-          timer = window.setTimeout(() => {
-            this.showMessage = false
-          }, 2000)
-        })
-      }
-    },
-    reindentSource () {
-      const block = this.$refs.block
-      let lines = block.textContent.split('\n')
-      let matches
-
-      if (lines[0] === '') {
-        lines.shift()
-      }
-
-      let indentation = (matches = (/^[\s\t]+/).exec(lines[0])) !== null ? matches[0] : null
-
-      if (indentation) {
-        lines = lines.map(line => {
-          line = line.replace(indentation, '')
-
-          return line.replace(/\t/g, '  ')
-        })
-
-        block.textContent = lines.join('\n').trim()
-      }
-    }
-  },
-  async mounted () {
-    await this.$nextTick()
-
-    this.reindentSource()
-    this.enableCopy()
-
-    highlight.highlightBlock(this.$refs.block)
-  }
-}
-</script>

docs/app/components/CodepenEdit.vue

@@ -22,43 +22,27 @@
       component: Object
     },
     computed: {
-      /* eslint-disable */
       styles () {
         return this.component.style ? this.component.style : ''
       },
       html () {
-        return `
-<div id="app">
-  ${this.component.template}
-</div>
-`
+        return this.component.template
       },
       script () {
-        return `
-Vue.use(VueMaterial.default)
-
-const example = ${this.component.script}
-
-new Vue({
-  name: 'root',
-  el: '#app',
-  ...example
-})
-`
+        return this.component.script
       },
       externalScripts () {
         return [
-          'https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js',
-          'https://unpkg.com/vue',
+          'https://unpkg.com/babel-standalone/babel.min.js',
+          'https://unpkg.com/vue/dist/vue.min.js',
           `${vueMaterialUrl}`
         ].join(';')
       },
       externalStyles () {
         return [
-          `https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic`,
-          `https://fonts.googleapis.com/icon?family=Material+Icons`,
+          'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons',
           `${vueMaterialUrl}/dist/vue-material.min.css`,
-          'https://unpkg.com/vue-material@beta/dist/theme/default.css'
+          `${vueMaterialUrl}/dist/theme/default.css`
         ].join(';')
       },
       apiJson () {
@@ -72,11 +56,9 @@ new Vue({
           html: `${this.html}`,
           html_pre_processor: 'none',
           css: `${this.styles}`,
-          css_pre_processor: 'scss',
           css_starter: 'neither',
           css_prefix: 'autoprefixer',
           js: `${this.script}`,
-          js_pre_processor: 'babel',
           html_classes: '',
           head: '<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">',
           css_external: `${this.externalStyles}`,
@@ -87,7 +69,6 @@ new Vue({
       apiContent () {
         return JSON.stringify(this.apiJson).replace(/"/g, '&​quot;').replace(/'/g, '&apos;');
       }
-      /* eslint-enable */
     }
   }
 </script>

docs/app/mixins/codeSource.js

@@ -0,0 +1,31 @@
+export const getIndentedSource = source => {
+  let lines = source.split('\n')
+  let matches
+
+  if (lines[0] === '') {
+    lines.shift()
+  }
+
+  let indentation = (matches = (/^[\s\t]+/).exec(lines[0])) !== null ? matches[0] : null
+
+  if (indentation) {
+    lines = lines.map(line => {
+      line = line.replace(indentation, '')
+
+      return line.replace(/\t/g, '  ')
+    })
+
+    return lines.join('\n').trim()
+  }
+
+  return source
+}
+
+export default {
+  getIndentedSource,
+  reindentSource () {
+    const block = this.$refs.block
+
+    block.textContent = getIndentedSource(block.textContent)
+  }
+}

docs/app/pages/Components/Button/examples/RegularButtons.vue

@@ -33,7 +33,7 @@
 </style>
 
 <script>
-export default {
-  name: 'RegularButtons'
-}
+  export default {
+    name: 'RegularButtons'
+  }
 </script>

docs/app/pages/Components/Datepicker/examples/DisabledDatesDatepicker.vue

@@ -5,17 +5,15 @@
 </template>
 
 <script>
-  function isWeekend (date) {
-    const day = date.getDay()
-
-    return day === 6 || day === 0
-  }
-
   export default {
     name: 'DisabledDatesDatepicker',
     data: () => ({
       selectedDate: null,
-      disabledDates: date => isWeekend(date)
+      disabledDates: date => {
+        const day = date.getDay()
+
+        return day === 6 || day === 0
+      }
     })
   }
 </script>

docs/app/pages/Components/Form/examples/FormValidation.vue

@@ -71,7 +71,6 @@
 </template>
 
 <script>
-  import Vue from 'vue'
   import { validationMixin } from 'vuelidate'
   import {
     required,

package.json

@@ -100,6 +100,8 @@
     "postcss": "^6.0.14",
     "preload-webpack-plugin": "^2.0.0",
     "prerender-spa-plugin": "^2.1.0",
+    "prettier": "^1.8.2",
+    "pretty": "^2.0.0",
     "sass-loader": "^6.0.6",
     "sinon": "^4.1.1",
     "url-loader": "^0.6.2",