Skip to content
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

fix: Run correctly when used alongside @vue/compat #676

Merged
merged 1 commit into from
Feb 15, 2023

Conversation

snoozbuster
Copy link
Contributor

@snoozbuster snoozbuster commented Feb 14, 2023

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

changeset-bot bot commented Feb 14, 2023

⚠️ 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
Copy link

vercel bot commented Feb 14, 2023

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

@bcakmakoglu first needs to authorize it.

@vercel
Copy link

vercel bot commented Feb 14, 2023

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 snoozbuster changed the title Add compatConfig mode 3 to all components [fix] Run correctly when used alongside @vue/compat Feb 14, 2023
@vercel vercel bot temporarily deployed to Preview – vue-flow-typedoc February 14, 2023 05:56 Inactive
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import type { PanelProps } from '../../types'
import type { PanelProps } from '../../types/panel'
Copy link
Contributor Author

@snoozbuster snoozbuster Feb 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

image

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

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

@snoozbuster
Copy link
Contributor Author

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

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
Copy link
Contributor Author

snoozbuster commented Feb 14, 2023

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

@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

@bcakmakoglu bcakmakoglu changed the base branch from master to next-release February 14, 2023 23:51
@vercel vercel bot temporarily deployed to Preview – vue-flow-typedoc February 15, 2023 05:14 Inactive
@snoozbuster
Copy link
Contributor Author

@bcakmakoglu yep, done! thanks again!

@snoozbuster snoozbuster changed the title [fix] Run correctly when used alongside @vue/compat fix: Run correctly when used alongside @vue/compat Feb 15, 2023
@bcakmakoglu bcakmakoglu merged commit 6d875a3 into bcakmakoglu:next-release Feb 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants