Ember Vue Component API

components.my-component.js

import vue from '../utils/vue';

export default vue({
	data() {
		return {
			name: 1,
      items: [],
      james: {
      	name: 12
      }
		}
	},
	watch: {
		name() {
			console.log('name changed');
		}
	},
	computed: {
		fullName() {
    	return 'full ' + this.name;
    }
	},
  methods: {
  	click() {
      this.name++;
      this.items.push(Date.now());
      const j = this.james;
      this.james = Object.assign({}, j, { name: Date.now() }) ; 
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

{{my-component}}

templates.components.my-component.hbs

{{this.name}}

{{this.james.name}}

{{input value=this.name}}

{{this.user.name}} & {{this.user.age}}
<button {{action 'click' }} type="button">Click</button>
{{fullName}}

<ul>

{{#each this.items as |item|}}
	<li>i: {{item}}</li>
{{/each}}
</ul>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}

utils.vue.js

import { computed, observer, set } from '@ember/object';
import Component from '@ember/component';
const noop = function() {};

let handler = {
  get(target, name) {
    if (typeof target[name] === 'object' && target[name] !== null) {
    	return new Proxy(target[name], handler);
    }
    return target[name];
  },
  set(target, name, value) {
    set(target, name, value);
    return true;
  },
  has(target, name) {
    return name in target; 
  }
};

export default function toEmberComponent(input) {
  const defaultData = {
    	beforeCreate: input.beforeCreate || noop,
    	beforeUpdate: input.beforeUpdate || noop,
    	beforeDestroy: input.beforeDestroy || noop,
    	beforeMounted: input.beforeMounted || noop,
    	created: input.created || noop,
    	mounted: input.mounted || noop,
    	updated: input.updated || noop,
    	destroyed: input.destroyed || noop,
    	tagName: '',
    	willDestroyElement() {
      		this.beforeDestroy();
      },
    	didDestroyElement() {
      		this.destroyed();
      },
  		init() {
        this.beforeCreate();
      	this._super(...arguments);
        this.dataKeys = {};
        if (typeof input.data === 'object') {
        	this.dataKeys = JSON.parse(JSON.stringify(input.data));
        } else if (typeof input.data === 'function') {
          this.dataKeys = input.data();
        }
        this.setProperties(this.dataKeys);
        this.created();
        this.beforeMounted();
      },
    	willUpdate() {
        this.beforeUpdate();
      	this.triggerComputeds();
      },
    	didInsertElement() {
      	this.mounted();
      },
    	didRender() {
      	this.updated();
      },
    	triggerComputeds() {
      	Object.keys(input.computed).forEach((key) => {
        		this.notifyPropertyChange(key);
        });
      },
    	actions: input.actions || input.methods || {}
  }
  if (input.template) {
  	defaultData.layout = input.template;
  }
  
  Object.keys(defaultData.actions).forEach((actionName) => {
    const originalAction = defaultData.actions[actionName]
    defaultData.actions[actionName] = function(...args) {
      originalAction.apply(new Proxy(this, handler), args);
    }                      
  });
  
  Object.keys(input.watch).forEach((propName) => {
  	defaultData['_ob_' + propName] = observer(propName, input.watch[propName]);
  });
  Object.keys(input.computed).forEach((propName) => {
  	defaultData[propName] = computed(input.computed[propName]).volatile();
  });
	return Ember.Component.extend(defaultData);
}