skatejs-vue 1221 proto

index.html

<x-vue yell>Dude</x-vue>

vue-skate-render.js

import { props, withProps } from 'skatejs/esnext/with-props';
import { withRender } from 'skatejs/esnext/with-render';
import Vue from 'vue';

const mySweetVueComponent = {
  name: "my-sweet-vue-component",
  props: {
    yell: {
      type: Boolean,
      default: true
    }
  },
  data(){
    return {
      count: 1
    }
  },
  created(){
    this.countUp();
  },
  methods:{
    countUp(){
      setInterval(() => {
        this.count += 1;
      },750);
    }
  },
  render(h) {
    const containerElement = this.yell ? 'strong' : 'span';
    return h(containerElement, [...this.$slots.default, h('span', `${Array(this.count).join("!")}`)]);
  }
};

const withVue = Base => class extends withRender(withProps(Base || HTMLElement)) {  
  rendererCallback(renderRoot, renderCallback) {
    const { props } = this;
    if (this._vue) {
      Object.assign(this._vue, props);      
    } else {
      // Vue calls cloneNode() so we can't use the
      // shadowRoot directly as "el" because you can't
      // clone a shadow root.
      const vueRoot = document.createElement('div');
      vueRoot.innerHTML = renderCallback(this._vue);
      renderRoot.appendChild(vueRoot);
      this._vue = new Vue({
        el: vueRoot,
        data: props,
        components:{
          mySweetVueComponent
        }
      });
    }
  }
}

class XVue extends withVue() {
  static props = {
    yell: props.boolean
  }

  // Let the sweet vue component handle all the template logic
  // as it will have access to createElement (and can even have
  // jsx if you are using the babel-plugin-transform-vue-jsx
  renderCallback() {
    return `Hello <my-sweet-vue-component :yell="yell">
                      <real-slot></real-slot>
                  </my-sweet-vue-component>`;
  }
}

class RealSlot extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<slot></slot>';
  }
}

customElements.define('real-slot', RealSlot);
customElements.define('x-vue', XVue);