Vue 3 (now BETA) about easy-dnd HOT 34 CLOSED

Is anything new here? I wanna use it in my vue3 project. But I have no idea about how to modify it to support vue 3

from easy-dnd.

Update: Started Vue3 support today and plan on finishing it next week! 🥳

from easy-dnd.

Just an update. Majority of functionality is working again. Still a fair bit of code cleanup that I need to do, but progress is definitely being made! :)

from easy-dnd.

Great news. Using render() has worked! 🥳
Thanks for that @rlemaigre

I am going to be writing all the main components using render() as it seems more efficient

from easy-dnd.

Great news for everyone. Vue 3 beta is now live!
The Vue 2 variant can be found on vue-easy-dnd@^1 as per normal and Vue 3 is v2 or (vue-easy-dnd@latest).

if anyone is able to, please run it on your Vue 3 projects and report back any problems.
I am taking some time off now over the christmas and new year break so I plan on implementing it into my own Vue 3 project in mid-January, so beta will remain around for a while.

Documentation between both versions are the same. Only difference is any Vue 3 specific code such as how scoped slots and slots are identical.

from easy-dnd.

Implemented it last week in one of our projects, and it is working great! Couldn't notice any differences with the Vue2 version so far.
We are only using the main Drag and Drop components.

Thank you very much @nicholaszuccarelli for the hard work 😄 and enjoy Christmas! 🎄

from easy-dnd.

Great news. I've officially released Vue3 as ^2.0.0!
Been playing around with the beta on my app and DropList is super stable now. Can't see any differences from the Vue2 version.

Happy days!
If anyone does find a bug, please open a new issue :)

from easy-dnd.

Same for me.
Got the following warning :
[Vue Router warn]: Unexpected error when starting the router: Error: Couldn't resolve component "default" for the following record with path "***" at eval (vue-router.esm-browser.js?954b:1878)

from easy-dnd.

@lukeberryco you probably missed to name your component e.g. :

export default defineComponent({
  name:'MyAmazingComp',
  components:{...},
  setup(){...}
  ...
})

from easy-dnd.

Interesting, if there is any work happening for upgrading right now

from easy-dnd.

Any updates? Vue 3 is out for awhile

from easy-dnd.

Any updates on this? I would love to use this package for our vue3 projects. Maybe someone who made an initial start were we can work on, don't mind to contribute in this and help but maybe someone made already a head start on this?

from easy-dnd.

I plan on converting my existing Vue2 project to Vue3 at the start of next year and that will also include upgrading this package too. Stay tuned :)

from easy-dnd.

@nicholaszuccarelli Many thanks for your work on this library and on the Vue 3 port in particular.

from easy-dnd.

No worries! Glad to help this project.
It's a great learning experience for me as well, especially because of the Vue3 changes which I'm not familiar with.

from easy-dnd.

No worries! Glad to help this project. It's a great learning experience for me as well, especially because of the Vue3 changes which I'm not familiar with.

Let me know if I can help! Transitioned some other projects to Vue3 recently 😄

from easy-dnd.

Thanks @kimberley2310 :) If I come across any issues next week I'll be sure to shoot a msg across

from easy-dnd.

Stuck on quite a doozy right now!

Because of the Vue3 behaviour for rendering v-if, slots and v-for loops, I am unable to get DropList working as it does on Vue2.
The problem is that every time you drag an item into an inner-DropList (picture below from testing file App7.vue), it is unmounting and remounting the inner DropLists. This is a big problem for very long and complicated droplists, where every drag interaction would cause entire rerendering!
On the Vue2 variant, it does not rerender any of the components because it reuses/saves their specified index within the DropList even when a v-if changes, however Vue3 specifies unique keys to v-ifs which causes every inner-DropList to re-render.

This is the current Vue3 problematic file:
Lines 3 to 29 is where the problem is occurring.
Any help solving this problem would be greatly appreciated.

https://github.com/nicholaszuccarelli/Easy-DnD/blob/vue3-unfinished/lib/src/components/DropList.vue

from easy-dnd.

It's been a long long time since I wrote this so I don't remember well...

I don't see any :key in those v-for's. If I read my docs properly, users are supposed to provide a key for the content of the item slot. Are you sure Vue 3 properly honors those keys ? Maybe something changed with respect to v-for, slots and keys...

Instead of using a v-for on a slot, did you try wrapping the slot in a template and putting the v-for on the template ?

Also, I see those item slots with keys are on different levels in the hierarchy, due to templates with v-ifs. Performance improvements in the virtual dom diffing algorithm may cause Vue 3 to be less smart than Vue2 about this (although it would be surprising that "fake nodes" like templates would mess with this...). Perhaps it would be useful to try to restructure that template to make it simpler (not use those nested levels of template with v-ifs).

You may also try to simplify the template as much as possible (temporarily removing some useful functionality) and see if it works. If it does, add back piece by piece what you removed before, until it breaks again. That might help you to pinpoint the problem.

...just some ideas to play with, hope it can help

from easy-dnd.

I've tried all these steps unfortunately without luck.

due to templates with v-ifs. Performance improvements in the virtual dom diffing algorithm may cause Vue 3 to be less smart than Vue2 about this

Yeah that's right unfortunately. The <templates> tags are each keyed now in Vue3. This means that the slots within the ifs don't treat them as a single "loop" with a single index as we do with the Vue2 version. This causes the slots to reload every time the drag event interacts with the order position which is incredibly inefficient.

from easy-dnd.

Are you sure about that thing about templates in Vue 3 ? Seems so weird...I always considered template tags as parenthesis : virtual tags used to target a group of other tags to apply a condition or a loop but their presence shouldn't change anything.

...oh I think I get it. It's not related to templates, it's related to v-if, v-else, v-else-if : https://v3-migration.vuejs.org/breaking-changes/key-attribute.html . It seems keys are automatically generated now in that case. What if you force the key explicitly to get back vue 2 behavior ? So on template v-if, you add key = "mykey" and on template v-else, you add key = "mykey" as well (so same key for both branches of condition).

If that doesn't work, you can always use a render function. I never had to do that, and I would be surprised if it really were necessary here. But it would work.

from easy-dnd.

I can't add key = "mykey" to the tempaltes because it complains with <template> cannot be keyed. So it must internally key them. But yes you're right about the v3 v-if behaviour.
I'll give render() function a go. Was my last point of attack. It's probably the only way that this will be able to work now.

from easy-dnd.

Using render functions everywhere may make maintenance more difficult and contributions less likely because most people don't know render functions. Also I think render functions may be less efficient than templates sometimes actually (although templates do compile eventually to render functions). That's because the template compiler is very smart in Vue 3 and may produce code that is more efficient than a hand written render function. So I wouldn't rewrite everything with render functions unless there is a compelling reason to do so (like, you do actually need the flexibility of render functions, or you do notice a significant improvement in performance).

Here is another idea worth a try : you could define a "If" component, with a boolean prop and two slots, "true" and "false". When the prop is true, you show the true slot, and the false slot otherwise and of course both slots have the same key (or no key). And that component, you define it with a render function, to get back Vue 2 behavior regarding if-else. Then you use that utility component everywhere you need vue 2 behaving v-if v-else.

What do you think ?

from easy-dnd.

A separate component won't work because it still requires separate if/else states which will still cause the render of separate keys. As far as I can see render() is the only solution to this.
I'll leave DropList as the only render component.

Feel free to have a look at the render() code I used on my fork.

from easy-dnd.

I don't understand this. In a render function, I suppose you can choose the keys as you wish. So what if you have a render function in your "If" component that looks like this :

render() {
  if (props.test) {
    return vnode(...render true slot..., key = 1)
  }
  else {
    return vnode(...render false slot..., key = 1 too)
  }
}

...so when props.test changes value, the render function is called, but it returns a vnode with same key as before. So Vue should try to patch nodes instead of unmount / mount and it should work...maybe. But it's possible I have a bad understanding of how render functions work. I'll take a look at your code.

Another idea I had was simply to use two v-if's instead of a v-if and a v-else to prevent vue from assigning different keys automatically, causing unmounting / mounting when the value of the condition changes. So v-if="condition" and v-if="!condition" instead of v-if v-else.

Thank you for your work on this.

from easy-dnd.

Heres how I understand it now works in Vue3:
For example:
<template v-if="something"> // internal key: A
<slot v-for="i in 5" :key="i" /> // keys 1-5
<template v-else> // internal key: B
<slot v-for="i in 5" :key="i" /> // keys 1-5
</template>

Internally the keys for each of the slots (for example) would be:
A1, A2, A3, A4, A5 or A(1-5)
B1, B2, B3, B4, B5 or B(1-5)

So any time you create a v-if, that conditional element (including template) is given an internal key (ie: A, B). Because those conditions change, it causes a rerender for the code inside those specific loops.

But as you mentioned with the render() example above, because render internally does not use v-if, v-else-if, v-else, you are able to produce keys which match the functionality from Vue2

This thought process also matches up with what the migration guide states:
NEW: keys are no longer necessary on v-if/v-else/v-else-if branches, since Vue now automatically generates unique keys

from easy-dnd.

That is great news! I hope to test it in our project maybe this week or next week, so I'll keep you updated :) Enjoy your time off and thanks for all the effort!

from easy-dnd.

Great work !

from easy-dnd.

Thank you. Are you able to produce a CodePen with the error? Or some lines of code showing your component structure etc

from easy-dnd.

Thank you. It's a naming problem. I just solved it

This component is great. Thank you so much for developing this component

from easy-dnd.

Glad you like it!!
Let me know if you come across any other issues.

from easy-dnd.

ok, wish you a merry Christmas on the 25th in advance

from easy-dnd.

Happy new year everyone.

I've released Beta 3 now.
Please note the following:

(REQUIRED FOR Vue 3): Make sure to import the generated CSS file to use the components properly
import 'vue-easy-dnd/dist/dnd.css'

Vue 3 also relies on the Options API and mixins. So make sure you have enabled the Options API on your project (enabled by default)

I've gotten around to installing the plugin on my personal project and have already found some problems with the DropList :-) So I will be looking into these over the next few days.

from easy-dnd.

Beta 4 now available which uses properly Vue3 emits handler. Seems quite stable using DropList now!

from easy-dnd.