├── .gitignore ├── ARTICLE.md ├── README.md ├── images └── img.jpg ├── package.json ├── screenshots ├── SS-2.png ├── SS-3.png └── SS-final.png ├── src ├── components.ts ├── elements.ts ├── index.ts ├── nodeOps.ts ├── renderer.ts └── styling.ts ├── tsconfig.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | file.pdf 3 | -------------------------------------------------------------------------------- /ARTICLE.md: -------------------------------------------------------------------------------- 1 | ## Writing a Custom Renderer - Vue.js 3 2 | 3 | Among many other cool features, Vue.js 3 is much more modular than Vue.js 3. The project is consists of [many different packages](https://github.com/vuejs/vue-next), making it even more flexible and customizable. 4 | 5 | One of the more interesting architectural changes is the decoupled renderer and runtime. This makes it much easier to build custom renderers. 6 | 7 | ## What is a Custom Renderer? 8 | 9 | Vue consists of several "systems". There is the reactivity system, it's custom component system, a virtual DOM, and several others. A renderer is what takes the output of the virtual DOM and *renders* it using some UI layer. [The DOM renderer](https://github.com/vuejs/vue-next/tree/master/packages/runtime-dom) (the only one that ships with Vue) could be considered only official renderer, and as such, the reference renderer. 10 | 11 | So, a custom renderer is renderer that targets anything other than the DOM. 12 | 13 | The official DOM renderer can also be considered the best resource to learn to build a custom renderer - if you want to write one, you will become very well acquainted with it, since there are not many other resources on building a Vue 3 renderer. 14 | 15 | ## Existing Literature 16 | 17 | The main resources I used when preparing this post were: 18 | 19 | - [Vuminal](https://github.com/ycmjason/vuminal). A terminal renderer. It's source code is overly modular and kind of difficult to navigate, and I couldn't get it to do anything much more than the basic counter example in the README. 20 | - [Vugel](https://github.com/Planning-nl/vugel), a WebGL renderer. 21 | - [Vue 3 DOM Renderer source](https://github.com/vuejs/vue-next/tree/master/packages/runtime-dom). This was the most useful resource by far. 22 | - [React PDF](https://react-pdf.org/). This is a custom PDF renderer for React. Not Vue, but the ideas apply, and the inspiration for this project. 23 | 24 | ## What Are We Building? 25 | 26 | I decided to go with a *PDF renderer*. The goal is to take something like this: 27 | 28 | ```html 29 |