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? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

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

Already on GitHub? Sign in 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