Vue: Create a package for building custom renderers

[rigor789]

What problem does this feature solve?

As the author of nativescript-vue I had to set up a similar build setup as Vue's in order to be able to import certain parts of Vue directly into nativescript-vue. The main source of issues was the aliases used across the Vue repository (which do make sense btw!).

To solve that issue, I would love to have an official package for creating (and registering) custom renderers into Vue, which would enclose most of the Vue specific logic of patching / hydrating etc.

A good example of what I have in mind would be the react's package that does it: https://github.com/facebook/react/tree/master/packages/react-reconciler

I would love to get some work done on this, but I'd work with the core team to make sure the best possible quality.

What does the proposed API look like?

// my custom renderer
// for example: nativescript-vue.js
import VueRenderer from 'vue-renderer'

// a class for creating native views in NativeScript
import ViewUtils from './ViewUtils.js'

export default new VueRenderer({
  // Node operations
  createElement(tagName) {},
  createElementNS(namespace, tagName) {},
  createTextNode(text) {},
  createComment(text) {},
  insertBefore(parentNode, newNode, referenceNode) {},
  removeChild(node, child) {},
  appendChild(node, child) {},
  parentNode(node) {},
  nextSibling(node) {},
  tagName(node) {},
  setTextContent(node, text) {},
  setAttribute(node, attribute, value) {},

  // Additional methods that need to be specified
  // but for example:
  createRoot() {} // this would get called to create the root element for the root Vue instance
})

// then in userland we could just do
import Vue from 'vue'
import NativescriptVue from 'nativescript-vue'

Vue.use(NativescriptVue)


new Vue({
  render(h) => h('label', { text: 'Hello World' })
})

[yyx990803]

This is something I've had in mind for a while - definitely something valuable to have. And thanks for the suggested API design.

[altitudems]

It seems to me this is pretty important for the future of Vue.

Any chance it can be added somewhere into the official roadmap? Even if its just in the backlog?
https://github.com/vuejs/roadmap

Consider also that React and Angular already have this.

For example take a look at this list of React custom renderers:
http://iamdustan.com/react-renderers/

[Aaron-Pool]

Any updates here? Been nearly six months since it's gotten any love from a Vue contributor.

[amritk]

@Aaron-Pool looks like its coming in Vue 3.0

[LukeeeeBennett]

@Aaron-Pool looks like its coming in Vue 3.0

If it's coming in 3.0 is there existing progress?

[moritzruth]

@yyx990803 Will this be possible with Vue.js 3?

[rigor789]

@moritzruth yes! Vue 3.x is built with custom renderers in mind - in fact the DOM/web version is also a "custom" renderer on top of the core library.

See https://github.com/vuejs/vue-next/tree/master/packages/runtime-dom

[huruji]

thanks Vue.js 3.0, I build a custom canvas renderer named Vuvas based on https://github.com/vuejs/vue-next/tree/master/packages/runtime-core，so we can use css + vue3.0 to build our UI, just like flutter. The layout based on yoga-layout，so we can use flex layout. Maybe you will be interested @rigor789 @yyx990803