Using (petite) Vue in Hype

MaxZieb · July 2, 2021, 4:21pm

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.

Download:
HypePetiteVue.hype.zip (84,6 KB)

MaxZieb · July 3, 2021, 7:38am

Here is the announcement tweet of Evan You … fresh from the assembly line

… and the next version will support mounted.

Someone already posted a basic todo app:

This example is interesting as it demonstrates how to use a more extensive scope function.

MaxZieb · July 4, 2021, 12:23am

You can easily make the Hype API available and distribute the Petite Vue syntax across Hype nodes and groups... really nice!

download:
HypePetiteVue_withHypeAPI.hype.zip (43,7 KB)

intaplink · July 4, 2021, 11:48am

I understand that this script allows you to accelerate the loading of Hype Animation on the page?

MaxZieb · July 4, 2021, 4:16pm

No, it provides reactivity. Please read about regular Vue here (this is the petite version with in place mutations):

https://v3.vuejs.org/guide/introduction.html#what-is-vue-js
and also read about the differences here https://github.com/vuejs/petite-vue

MaxZieb · July 5, 2021, 1:24pm

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?

Daniel · July 5, 2021, 4:10pm

I think this is definitely an if you build it they will come (or find it when searching) sort of thing. This is very cool to see and a great example!

intaplink · July 6, 2021, 6:16am

if we manage to implement this in Hype to speed up the reaction of actions of elements for the user on the page, it would be just good and super

MaxZieb · July 6, 2021, 7:20am

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…

MaxZieb · July 7, 2021, 6:05pm

Here is a version that works. For now it does a hard clone to destroy v-on events*… please check:
HypePetiteVue_scopeAndSymbols.hype.zip (154,4 KB)

Feedback welcome.

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!

MaxZieb · July 9, 2021, 12:49am

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.

Download:
HypePetiteVue_Questionnaire.hype.zip (78,6 KB)

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.

gleb · October 5, 2021, 3:17pm

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.

petite_percistent_symbol.hype.zip (115.5 KB)

MaxZieb · October 5, 2021, 7:21pm

Seems an execution order problem as permanent symbols has a special status and is moved around my the runtime in the DOM. I am not certain if I could and want to fix or work around it.