h-demi - h function for Vue 2 and 3

[dnldsht]

I've started to build a library for vue and wanted to make it compatible with vue2 and vue3, so I decided to use VueDemi.

The library I'm building is vue-insta-stories a component library, I've struggled a little bit to make it compatible with both vue 2 & 3, first I've tried to use but didn't manage to get it working. I was using rollup to build it.

So I checked some examples on the vue-demi repo and discovered that everybody was using render and h to build templates, I switched to render function and everything seems to work nice, except that the first guy using it, was using vue2 and had some errors, after some checking I found out that the h function as different behaviours if used in vue2 and vue3 (I've never used render functions before :D)

To fix the issue I made a wrapper to the h function (h-demi.ts) basically the function has the same interface as vue2 createElement, and if you are using vue3 it adapts the arguments to the h function.

The version of h-demi.ts that I've written is pretty simple, it covers only what I used in vue-insta-stories, and is missing a lot of typings.

I was wondering if a more robust version of h-demi would be a "nice to have" feature inside vue-demi or vue/composition-api. That would help a lot of people that want to build a library and make it compatible with both 2 & 3 versions of vue.

That was my first approach to a library, I may also got the whole building process wrong, but I didn't found examples or really good guides, so i mixed up what I've found (if there is an another way of fix the render issues please tell me <3)

[antfu]

Nice working on h-demi!

vue-demi is trying to only be the thin redirecting layout without too much runtime polyfill of something. The difference between the rendering functions are non-trivial, and hard to cover all the edge cases from an external library.

In case you missed them, there are some good news:

• Vue 2.7 - we will migrate @vue/composition-api into Vue 2 and reduce the caveat by directly accessing to the internal APIs
• Vue 3.1 migration build - Migration for Vue 3 to have Vue 2 compatible behavior.

After that, the mission of vue-demi will be completed.

Before that, if someone what to have the compatible render function, definitely have a try with h-demi with the links above. Thanks.

[zwwtj2014]

hi @antfu , thank for your working.

And i have a few questions about vue2.7:

vue-demi is trying to only be the thin redirecting layout without too much runtime polyfill of something

Does vue 2.7 will add these runtime polyfill ?

And i can not find vue2.7 roadmap and feature plan. Is it still for internal test?

[Shimada666]

Nice! Thank for your working, it also helps me.

[wobsoriano]

Thanks for the h-demi workaround!