Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

h-demi - h function for Vue 2 and 3 #65

Closed
dnldsht opened this issue May 6, 2021 · 2 comments
Closed

h-demi - h function for Vue 2 and 3 #65

dnldsht opened this issue May 6, 2021 · 2 comments

Comments

@dnldsht
Copy link
Contributor

dnldsht commented May 6, 2021

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
Copy link
Member

antfu commented May 7, 2021

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.

@antfu antfu changed the title render issue? h-demi - h function for Vue 2 and 3 May 7, 2021
@Shimada666
Copy link
Contributor

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

@vueuse vueuse locked and limited conversation to collaborators Jul 15, 2021
@antfu antfu closed this as completed Jul 15, 2021

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants