vue-formulate
vue-formulate copied to clipboard
wearebraid
Support Vue 3 (update: use FormKit [https://formkit.com], the successor to Vue Formulate for Vue 3)
Describe the new feature you'd like
Now that Vue 3 has hit release candidate stage, it could be a good time to look into supporting it? Just tried on a fresh Vue project and the first issue I ran into was:
Uncaught TypeError: Cannot set property '$formulate' of undefined
Which I'm guessing is related to Vue.prototype.$formulate now needing to be something more like app.config.globalProperties.$formulate.
I pulled down vue-formulate to get a sense of what might need updating and realised there are potentially a few dependencies as well that may need updating too - and I'm not sure what their Vue 3 support is like yet.
I'd be happy to try and help with the update if it's something you think you'd be willing to look at soon?
Yep, we definitely need Vue 3 support asap! I don’t think it is going to require much of a change, but there are some big questions around how we do things like testing. The dependencies you're referring to are all for the testing. I would really like to avoid having 2 libraries (a lot of packages have a xyz-next library for Vue3 support). I think we can probably get away with some small code tweaks to detect which version of vue is used and slightly alter things like the install process.
I'd love any help you'd like to offer 👍
Yes, I was going to ask about that - I too have been seeing lots of xyz-next packages. I think you're right to want to avoid that here. Unless the next packages are exposing a bunch of Vue 3 specific functionality I don't think the trade off is worth it, eg converting all your plugins to expose composition APIs instead or something.
I'll try and take a more thorough look around later this week to get my head around what changes might be necessary.
On the testing side, are you thinking about actually running the tests against both versions of Vue in two separate runs/environments? Otherwise it's hard to be sure at any point that you don't introduce something that is gonna clash with the version your tests aren't actually running against.
Yeah, ideally I would really like to run all the tests against both Vue2 and Vue3. I think vue-formulate currently has ~500 tests and I just know getting them to all work with vue-test-utils-next is going to be a major pain. In fact that repo's readme says:
We are working on some documentation to help people migrate. At this point you will have better luck trying this out with a brand new Vue 3 app, as opposed to upgrading an existing Vue 2 app. Feedback and bug reports are welcome!
But the idea of re-writing 500+ tests for Vue3 sounds absolutely horrible. Open to suggestions on the best path forward there. Maybe we isolate any areas where there are likely to be breaking changes between the two? I'm not confident either that vue-test-utils-next will be stable anytime soon, especially considering vue-test-utils for Vue2 was beta until May 5th of 2020 😬 and regularly introduced breaking changes.
Maybe invest heavily into cypress testing?
Those are the 3 options that came to my mind too.
1. Run the same tests against both Vue 2 and Vue 3 with vue-test-utils and vue-test-utils-next respectively
- You'd have to update the tests to potentially behave differently for each version of Vue /
vue-test-utils. You could extract this out where possible into your ownmounthelpers or whatever it is that needs this version-dependent behaviour. - How time consuming this is initially depends on how much the API and behaviour of
vue-test-utils-nextis changing vs the old version. And like you say, there's a good chance of it not being stable for a while! - If memory serves me rightly,
vue-test-utilswasn't initially under the vuejs namespace/org, so maybe that contributed to the delay in a full stable release? I think it was avoriaz or something originally? A stable test library release could hopefully get a bit more priority now!
2. Write completely new tests just for Vue 3
- Like you, I didn't really want to think about this!
3. Use Cypress or similar
- You're having to rewrite your tests here too (or at least write additional tests), but at least it feels like it comes with other benefits, ie slightly more future-proofed testing, the ability to test against different browsers etc.
- Potentially increased chance of test flakiness vs your existing tests.
- Going to take considerably longer to run these tests.
- Cypress has experimental component testing but that's currently tied to Vue 2 and isn't certain to stick around, so that's probably not much help right now
Something like option (1) seems like potentially the best option to look into first?
Have you read through much of the migration docs for Vue 2 -> 3? Do have much of a sense of which parts may impact vue-formulate? I can try running the migration helper too.
I ran the migration helper for src/ and examples / - no obsolete syntax was detected. For test/, all I got was:
1. Replace "src/*.{js,vue}" with "src/:.{js,vue}+"
Line 21: test/jest.conf.js
Reason: The syntax for route matching has changed since Vue Router now uses path-to-regexp under the hood
More info: http://vuejs.org/guide/migration-vue-router.html#One-or-More-Named-Parameters
They do understandably say:
Note however that only about 80% of API changes are detectable with this utility.
And this won't cover the vue-test-utils-next stuff also.
I've had a couple of hours to look into this this evening. I've opened up a very, very early stages PR, but I don't necessarily expect it to be the way you want to move forward. For the moment it's there mostly just to pass on my thoughts/learnings so far!
I was trying to use Vue-Formulate in Vue 3 project and got an issue (please see the attached screenshot)
Please help me out.
Hi, @sudip571 - Vue 3 is not yet supported by vue-formulate. It's on the future roadmap, but it will not work right now.
Hey @justin-schroeder, hot on the heels of the full Vue 3 release announcement - have you thought any more about whether to have a separate -next package or not?
Still working through it, there will definitely need to be a full Vue 3 only version at some point so we can drop V2 support, but a compatibility version might be doable. I still need to figure out how to get around some of the tree shaking api differences though, like import { h } from 'vue' not sure if there is a way to do that optionally with static analysis 😬
Hmm, I can see how that could be tricky. When you talk about tree shaking, do you mean when you're bundling with rollup to deploy vue-formulate to npm? I know you can't do conditional ES module imports, but could you use commonjs for those with a flag - something like:
if (process.env.VUE_TARGET_VERSION === '3') {
const { h } = require('vue')
}
From what I understand tree shaking can work with this sort of constant evaluation. This would be for building two separate versions though, but at least it would be from the same source.
When you have a clearer picture of what you want to do, let me know if there's anything I might be able to help with!
vue-demi may be helpful for the import issue. It allows you to import from vue-demi instead of vue or @vue/composition-api depending on which version of Vue is doing the importing.
@bbugh I saw vue-demi a few weeks ago and thought it looked really cool, but am I right in thinking though that to use vue-demi I would need to re-write Vue Formulate using the composition API? It seems like at first glance it’s more for new libraries that want to be written in Vue 3 but have backwards compatibility with Vue 2, but maybe I just don't really understand it?
That is correct, if during vue-formulate@next you decide to use the composition API (which would may be really for this use case) in order to support Vue 3, vue-demi will make it easy to also support Vue 2 with the composition API.
We're also not really sure what the Vue 2 compatibility build is going to include, it may make it easy on everyone to move from Vue 2 to Vue 3.
Status update: at this point the current plan is to completely re-write Vue Formulate for Vue 3 and TypeScript, all other solutions are pretty hacky and not good long-term options. Vue Formulate serves some pretty critical roles in people's business apps and I don't want to put out anything that would compromise that, so I think a full rewrite for Vue 3 is in order. The positive is we'll have the opportunity to incorporate lots of learnings and efficiency improvements to make it much better.
V3 is being cooked up right now. Shooting for the end of Q1 2021 for some kind of release (alpha, beta, or stable — ?), but you know how these timelines can go, so honestly — not ready till it's ready 😬.
Ok, better get back to it 😉
Final thought — if you're interested in being notified when there's news on V3 I would recommend subscribing to the Vue Formulate newsletter. We only send out messages when we make new releases and since version 3 is the next big one that will likely be the next email sent out. You can subscribe here:
https://mailchi.mp/193f17457807/vue-formulate-newsletter
Final thought — if you're interested in being notified when there's news on V3 I would recommend subscribing to the Vue Formulate newsletter.
Cheers for that @justin-schroeder.
Is there an in-progress branch here on GitHub we can look at?
@timsayshey once there is an alpha to show I'll be looking for people to use/test it early. I'll keep you in mind.
Thanks for the suggestion. To be clear though its not a technical issue, it’s really just a time issue. Takes a lot of time to rewrite, and, ya know it’s volunteer time.
Do we have any timeline on when Vue3 might be supported? I'm pretty dependent on its i18n features and have just moved to Vue3.
@justin-schroeder Just in case you haven't seen this: https://github.com/vueuse/vue-demi
Vue Demi is a developing utility that allows you to write Universal Vue Libraries for Vue 2 and 3. Without worrying about users’ installed versions.
Now that Vue Compat is available as a migration build (https://v3.vuejs.org/guide/migration/migration-build.html#overview) I'm wondering if this could be used to make vue-formulate work with Vue 3. I will try it myself when I get a chance.
@justin-schroeder Just in case you haven't seen this: https://github.com/vueuse/vue-demi
Vue Demi is a developing utility that allows you to write Universal Vue Libraries for Vue 2 and 3. Without worrying about users’ installed versions.
Unfortunately @chasegiunta I think Vue Demi is only helpful for writing a Vue 3 library that is compatible with Vue 2.
Now that Vue Compat is available as a migration build (https://v3.vuejs.org/guide/migration/migration-build.html#overview) I'm wondering if this could be used to make
vue-formulatework with Vue 3. I will try it myself when I get a chance.
I'm going to look into it as well — although if it works it's a stopgap solution either way since a full re-write is underway with native Vue 3 support and lots of other improvements. Yes — it's taking longer than I anticipated due to unforeseen external circumstances (not related to this project). But we're actually more committed than ever to this project — it will be worth the wait :)
@justin-schroeder Any updates on a stopgap solution? (Or how to help with one?)
Currently, we're developing a web app in Vue 3 and trying to decide whether to wait for Vue Formulate, use another framework, or build our own.
