fix: Run correctly when used alongside @vue/compat

[snoozbuster]

🚀 What's changed?

• Don't break when run in a project using @vue/compat

🐛 Fixes

I didn't file a bug report because I'm lazy. However, when running VueFlow in a Vue 3 project that has @vue/compat installed, the package crashes when rendering edges. This is because of the change in the way functional components work in Vue 3 (simple functions are now functional components, but unless the ASYNC_COMPONENT flag in @vue/compat is disabled, it will attempt to process them as legacy-style async components which just... totally does not work).

I did test this in my project by running pnpm build and then using npm link to link @vue-flow/core into my project. Before this change, big crash. After this change, no crash and I'm able to render a basic chart without errors.

🪴 To-Dos

No todos to my knowledge 🎉 I believe I got all the components across both TS and Vue files across all packages but please let me know if I missed any. I'm no stranger to these types of PRs - I've made similar ones for @vue/test-utils and vue-router some time back (also, VueDraggable - but that package appears to not be maintained anymore). This package looks great and I'm excited to try it out in my project once this gets merged!

[changeset-bot]

⚠️ No Changeset found

Latest commit: ba84f20

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

Someone is attempting to deploy a commit to a Personal Account owned by @bcakmakoglu on Vercel.

@bcakmakoglu first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
vue-flow-docs	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Feb 15, 2023 at 5:14AM (UTC)
vue-flow-typedoc	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Feb 15, 2023 at 5:14AM (UTC)

[snoozbuster]

without this change, the build failed with the following error after I added the non-setup <script> tag:

I referenced Handle.vue which also has a non-setup <script> block and this appeared to be the only difference between them; indeed, it fixed the build. I'm not familiar with <script setup>, though - so I'm not sure if this is the correct fix or not. It was also the only component that had this problem.

[bcakmakoglu]

Thanks for the PR, I'll check it out 👍

[snoozbuster]

appreciate it @bcakmakoglu! I don't want to rush you but it would be super helpful if I could get this through quickly (want to avoid getting blocked on deploying with this library after finishing my prototype)

[bcakmakoglu]

I’ll include the PR in tomorrows release
Is that ok? There’s a couple details I want to include in the release but it’ll be done by tomorrow
Also I’ve been wondering, Is the compat mode necessary for non-functional components?
probably doesn’t hurt but just wanted to know if it’s necessary for regular components as well

[snoozbuster]

yes, tomorrow would be perfect! Thank you!

to answer your second question - it's definitely necessary for the functional components, but I'm not sure if it's strictly necessary for the non-functional ones. There are a lot of different flags that sometimes subtly change functionality (like how watch() works with arrays, for example) and it's hard to check for all of them. Obviously components written for Vue 3 aren't using things like $scopedSlots so there's some flags that won't be relevant but I think it's generally a pretty good practice to explicitly define all components with mode 3 in public projects, just in case someone (like me) who has a partially-migrated project needs to use it. (I actually have a export const FULLY_COMPATIBLE = { MODE: 3 } in my project to make this read even more nicely, but I don't know how necessary that is in most projects).

I also wanted to say, I love how you have your repo set up! Once I got docker installed and running development was a breeze 🏃‍♂️ - will probably end up spending some time looking at how things are set up here and take some learnings back to my own project

[bcakmakoglu]

@snoozbuster May I ask if you could update your commit message to adhere to conventional commits?
Something like fix: add compat config to components?

Other than that, this looks good to me 👍

I can add a changeset afterwards to patch the package versions

[snoozbuster]

@bcakmakoglu yep, done! thanks again!