JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app" v-cloak>
  <b-container id="app_container">
    <h1>Testing components from uibuilder-vuejs-component-extras</h1>

    <vue-svg-gauge ref="gauge1" @shout="onShout"></vue-svg-gauge>
    <vue-svg-gauge ref="gauge2" class="green"></vue-svg-gauge>
  </b-container>
</div>

CSS

.gauge {
  border: 1px solid red;
  padding: 10px;
}

.green {
  background: green;
}

JavaScript

// This section defines third-party components.
// These are outside our direct control.
Vue.component('b-container', {
  template: `<div><slot/></div>`
})

Vue.component('vue-svg-gauge', {
  props: ['value'],
  template: `
    <div class="gauge" @click="$emit('shout')">
      {{ value }}
		</div>
	`
})

// This section defines uibuilder.
// I assume we can do whatever we want in this section.
const uibuilder = {
  start (vueApp) {
    this.vueApp = vueApp
    
    const oldComponents = vueApp.$options.components
    const newComponents = vueApp.$options.components = Object.create(null)
    
    for (const name in oldComponents) {
      let component = null
      
      Object.defineProperty(newComponents, name, {
        get () {
          if (!component) {
            const oldComponent = oldComponents[name]
          
            component = {
              inheritAttrs: false,
            
              render (h) {
                return h(oldComponent, {
                  attrs: this.attributes,
                  on: this.$listeners,
                  scopedSlots: this.$scopedSlots
                })
              },
              
              data () {
                return {
                	uib: {}
                }
              },
              
              computed: {
                attributes () {
                  return {
                    ...this.uib,
                    ...this.$attrs
                  }
                }
              }
            }
          }
          
          return component
        }
      })
    }
  },
  
  // Process new data from the 'server'
  update (msg) {
    const { vueApp } = this
  
  	Object.keys(msg._uib.options).forEach( function(key) {
    	try {
        Vue.set(vueApp.$refs[msg._uib.componentRef].uib, key, msg._uib.options[key])
    	} catch (e) {}
    })
  }
}

// This section is the user's code.
// We don't control this directly but can specify what
// it should look like.
new Vue({
  el:...