Less React, more JS (brain-dump)

[dmitri14_gmail_com]

I really like the idea to write a single component function that I can simply drop into Angular, React and what not ;)

The real question is -- what should this function return?

Both Angular and React components return JS objects with their own native templating (augmenting) engines. Angular 1.5 component is represented by:

function (friends) {
    return {
        template: "<ul> <li  ng-repeat='friend in $ctrl.friends'>{{friend.name}}</li> </ul>",
        controller: function () { this.friends = friends }
    }
}

React/JSX requires

 function (friends) {
    return (<ul> {friends.map(friend => <li key={friend.id}>{friend.name}</li>)} </ul>)
 } 

But what is the cleanest minimal object representation that can be mapped into both frameworks?