Learning Petite Vue

petite-vue^[1] is a small version of vue, with far fewer features but also far smaller bundle size. Even You says it's "done". There haven't been changes in over a year.

1. No virtual dom. It directly uses the DOM <template> and cloneNode.
2. It scans the entire page, looking for v-scope. This may work well for me, as I would no longer need to have JS code that looks for specific IDs and mounts Vue on them. But you can also specify an ID.
3. It seems to use v-effect expressions in the html instead of watch functions in the javascript
4. There's no computed or render functions or SSR
5. No reactivity for Set and Map
6. Seems to have no event system^[2]
7. Has a very different component system (discussion^[3]) that doesn't feel like Vue's components
8. No transition, keep-alive, suspense, teleport
9. Other missing features

I decided to rewrite some of the circle drawing code^[4] in petite-vue. Observations at the end.

Thoughts:

1. Not having a component system with props down events up was disorienting.
2. The non-component parts of my template seemed to work without much change!
3. v-scope seems like it might be even more useful for my tutorials than how vue usually works.
4. Not having computed setters was inconvenient. I tried using get and set but those don't work either because I can't pass the pair of them to a component like the drag handle. I tried using get and a separate setter function, but that made the page reactive but the components were not reactive. I ended up having to pass in a separate getter and setter function to the component, because the get function wasn't reactive.

My initial conclusion is that I love the bundle size and the intended use, but … I also want a more fully featured component system. Petite-Vue being an abandoned project is probably ok if it did everything I wanted.

Source: learning-petite-vue.js