New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create a package for building custom renderers #7005

Open
rigor789 opened this Issue Nov 6, 2017 · 4 comments

Comments

Projects
None yet
5 participants
@rigor789

rigor789 commented Nov 6, 2017

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 comment has been minimized.

Member

yyx990803 commented Nov 6, 2017

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

@altitudems

This comment has been minimized.

altitudems commented Apr 13, 2018

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

This comment has been minimized.

Aaron-Pool commented May 22, 2018

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

@amritk

This comment has been minimized.

amritk commented Dec 6, 2018

@Aaron-Pool looks like its coming in Vue 3.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment