JSFiddle - React, Tailwind, and code Playground

by An Phan

HTML

<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>

<div id="app">
  <textarea v-model="templateText" rows="7"></textarea>
  <div v-if="typeof result === 'object'">
    <label>render:</label>
    <pre><code>{{ result.render }}</code></pre>
    <label>staticRenderFns:</label>
    <pre v-for="(fn, index) in result.staticRenderFns"><code>_m({{ index }}): {{ fn }}</code></pre>
    <pre v-if="!result.staticRenderFns.length"><code>{{ result.staticRenderFns }}</code></pre>
  </div>
  <div v-else>
    <label>Compilation Error:</label>
    <pre><code>{{ result }}</code></pre>
  </div>
</div>

<script type="text/template" id="defaultTemplateText">
<div>
  <header>
    <h1>I'm a template!</h1>
  </header>
  <p v-if="message">{{ message }}</p>
  <p v-else>No message.</p>
</div>
</script>

CSS

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  -webkit-user-select: inherit;
  user-select: inherit;
  font-size: 14px;
  color: #34495e;
}

pre {
  padding: 10px;
  overflow-x: auto;
  background: #f2f2f2;
}

code {
  white-space: pre;
  padding: 0
}

code, pre, textarea {
  font-family: "Roboto Mono", Monaco, courier, monospace;
}

textarea {
  width: 100%;
  font-size: 14px;
  margin-bottom: 8px;
  border-color: #bbb;
  padding: 8px;
  border-bottom-width: 2px;
  outline: none;
  color: #34495e;
}

textarea:focus {
  background: lightyellow;
}

JavaScript

new Vue({
  el: '#app',
  
  data: function () {
    return {
      templateText: document.querySelector('#defaultTemplateText').innerHTML.trim(),
    }
  },
  
  computed: {
    result: function () {
      if (!this.templateText) {
        return 'Enter a valid template above'
      }
      
      try {
        var result = Vue.compile(this.templateText.replace(/\s{2,}/g, ''))
        
        return {
          render: this.formatFunction(result.render),
          staticRenderFns: result.staticRenderFns.map(this.formatFunction)
        }
      } catch (error) {
        return error.message
      }
    }
  },
  
  methods: {
    formatFunction: function (fn) {
      return fn.toString().replace(/(\{\n)(\S)/, '$1  $2')
    }
  }
})

console.error = function (error) {
  throw new Error(error)
}