Finally, Evan You (creator of Vue) has launched a slim version of Vue called petite Vue.
Vue.js is a product that has many assets, which can be overwhelming at times. To address this issue, Evan You has launched petite Vue which is a slim version of Vue. It is faster and more lightweight than the original Vue.js
The regular Vue Virtual DOM is a virtual representation of a DOM, but it is much faster to use and renders in only milliseconds. The Hype Runtime is a library that generates pixel-perfect animations for the web. It can be used not just in games, but also in movies, interactive art installations, or even web design.
This project solves issues concerning running Vue and the Hype Runtime at the same time because the petite version omits the Virtual DOM while keeping reactivity (with in place mutations).
petite-vue is an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivity mental model with standard Vue. However, it is specifically optimized for "sprinkling" small amount of interactions on an existing HTML page rendered by a server framework.
Only 5.5kb
DOM-based, mutates in place
Driven by @vue/reactivity
Here is a basic implementation with Hype. The v-scope attribute enables reactivity for the inner HTML and can be either set in additional attributes or on a DIV-wrapper. Either example is provided in the example file.
Limiting the scope targeting and checking how mount/unmount works best… should be the next step in integrating this deeper. Interesting would also be to bind or register a component like approach tailored to Hype Symbols. Anybody else finds this interesting or am I on my own with this?
It is not mainly about execution performance. It is more about ease of use and reactive behavior (data binding) etc. … this can / might speed up development of web apps (as it auto updates values and more) but still requires specific insights and logical thinking when setting up such scenarios. The benefit of Petite Vue … it is derived from a mature product but it is still early days…
I opened a discussion on GitHub about it. Hopefully there is a better solution down the line but for now it does the job. Beware, It does destroy all event listeners, also from third parties. It only happens on scene changes and has the upside to mirror Hypes own reset behavior. If you need values to “survive “ transitions just init them (in v-scope) from a global data store or use the exposed customData object!
Crude example of a Questionnaire in Hype Petite Vue. Could obviously be done even nicer with subcomponents and symbols, but I wanted to keep this example simple.
Update and hints: Made some minor updates as reactivity does update immediately when influencing values. Also, I added a correct answer feedback with a simple checkmark. Another hint is that v-show influences display and can interfere with subsequent calls. I used visibility instead.
Hi, is there a way to make petite vue work with persistent symbols? In my attached example I have made two buttons that open a panel. Ideally I would like to go to another scene and still have the panel be opened. Then if I close the panel and go to another scene, the panel will remain closed. The buttons seem to work when on a symbol, but not when the symbol is made persistent. Thank you.
Seems an execution order problem as permanent symbols has a special status and is moved around by the runtime in the DOM. I am not certain if I could and want to fix or work around it.
