-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
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
@xstate/vue not working with vue beta #1252
Comments
I would accept a PR for this 🙏 |
We don't use |
I wanted to try @xstate/vue with Vite and Vue 3 and can confirm it doesn't work. It still tries to import @vue/composition-api. One of the errors I get is:
Here I created a repo for the example with the steps below: Reproduction Repo Reproduction:1. Create project with Vite:
2. Install xstate and @xstate/vue:
3. Create test machine from docs<template>
<button @click="send('TOGGLE')">
{{
state.value === 'inactive'
? 'Click to activate'
: 'Active! Click to deactivate'
}}
</button>
</template>
<script>
import { useMachine } from '@xstate/vue';
import { Machine } from 'xstate';
const toggleMachine = Machine({
id: 'toggle',
initial: 'inactive',
states: {
inactive: {
on: { TOGGLE: 'active' }
},
active: {
on: { TOGGLE: 'inactive' }
}
}
});
export default {
setup() {
const { state, send } = useMachine(toggleMachine);
return {
state,
send
};
}
};
</script> 4. Try to run it
Again, here is a repo from the steps above: Reproduction Repo |
@AleksejDix Would you know what we would need to do here? |
Add this here, I actually get this error with using
|
There are two ways to use the Composition API:
The problem comes from the fact that this file tries to import Composition functions from If you want Let us know what your vision is for this @davidkpiano. I'd be happy to PR. |
@sarahdayan Thanks so much for this. My assumption is that Vue developers who want to use the composition API are probably already using Vue 3 beta, so Vue 2 developers can use the implementation in the docs. Does this seem accurate? If that's right (and we want to avoid supporting multiple entry points), I would vote to do the second option (switch peer dep to Vue, major release). What do you think? |
@davidkpiano My thought is that the Composition API is ultimately meant to be used in Vue 3. The Vue 2 plugin was a great way to discover the API and get familiar with it while Vue 3 was being developed, but there's a high chance that it ends up being deprecated and users are encouraged to upgrade. The plugin has limitations and a performance impact in Vue 2 because the Vue 2 API wasn't designed for it. Of course, this is only my guess as an individual Vue developer. I'm not a Vue team member, nor do I speak for the entire community. I asked on the repo what the future of the plugin is to get more objective data. Additionally, as soon as Vue 3 comes out (which should be anytime now since it's in RC as we speak), Vue 2 will go in LTS for no longer than 18 months (and then another 18 months in maintenance mode). Finally, you can see a significant drop in npm downloads for I would personally recommend going with the second option as well. It's going to be much easier to maintain, and users willing to try the XState Composition functions within Vue 2 with the UPDATE: As suggested by this reply, the plugin isn't likely to get deprecated. It will go to v1 and hopefully, the last minor release of Vue 2 will backport enough features to remove performance issues and limitations. Yet, there's a plugin that allows library maintainers to write Vue 2/3 universal APIs, that could be an interesting solution. Based on the detected local version of Vue, it either installs the |
What are your thoughts @davidkpiano? |
Let's go the compatibility route if it doesn't add complexity or other issues. Vue-demi looks good! |
Has |
@davidkpiano Using
If you want to preserve compatibility for now, what do you think about adding new entry points? // Rely on `vue`
import * as XState from '@xstate/vue';
import * as XStateFSM from '@xstate/fsm';
// Rely on `@vue/composition-api`
import * as XStateCmpPlugin from '@xstate/vue/composition-plugin';
import * as XStateFSMCmpPlugin from '@xstate/fsm/composition-plugin'; The existing code should be easy to share with dependency injection. It will also be much easier to test. |
Hmm, thanks for the info. I thought it would be more seamless. Maybe it would be best to only target Vue 3 then? For Vue 2, integrating XState can be done manually (as is explained the docs). |
Yeah, so we'd go with For Vue 2, the recommendation from the recipe is to use the Options API. Vue 2 users who are already using If yes, I'll PR soon 🙂 |
Yes! ✅ |
Finally found some time to work on this! I'm trying to get the project running but encountering issues after install @davidkpiano. The install is successful, but I'm getting a bunch of errors when running tests on Anything I should be aware of @davidkpiano? |
@sarahdayan Thanks so much! Do you have this in a repo somewhere? |
@davidkpiano I tried this on my fork. At first I thought it was my changes, but I checked out |
@sarahdayan the setup should be as easy as running |
@Andarist Yep that's what I did (run I'll give it another look and will ping you on Twitter if I can't get it to work. |
@sarahdayan sorry - I've subconsciously mapped The |
any progress about this issue ? |
I started taking a look at this as well. @Andarist @sarahdayan thoughts on 👇 ?
[0] e.g.
|
@pearofducks could u link to exact lines that you are asking about? It would ensure that we can be on the same page right from the start. |
@Andarist - sure! Related to the renderless component:
edit // I removed the Related to the test utilities:
Related to ESM:
|
I've published a stopgap package This package should only be used for interim development while official support is added - but the APIs should match so switching packages once official support is added should be trivial. As a side note: it's generally considered poor form to ping open-source projects asking for status updates. Please think of the fact that maintainers are generally volunteering their free time to make these things, and don't need additional pressure from people asking when something will be done. Should you like faster progress, it's best to start finding out how you can help! |
I would be fine with removing those computed properties if they are not used and cant be consumed by consumers right now.
I don't know much about Vue but this might have been implemented before
I'm fine with refactoring tests to only use one of them. Which one is preferred by the Vue community?
This is already handled on the
❤️ |
@pearofducks thank you . the thing is I am very new to xstate and it's ecosystem. so I asked about the progress . but if there any thing I could help I would . |
Thank you! Working on the fix as we speak. Expect a PR soon. |
Description
@xstate/vue is not working with vue beta. The module still use @vue/composition-api as a dependency. Should we drop it as vue has enter beta ?
Actual Result
when I use the example in the readme, I get an error like
Reproduction
Create a new project with
vue-cli
orvite
To use vue 3 (with composition api) with
vue-cli
you need to do :vue add vue-next
Then just write the example in the readme file, you should get the error.
I am pretty new to xstate and all the concepts behind it, so I am not sure how to start.
Any ideas ? Thanks a lot !
The text was updated successfully, but these errors were encountered: