diff --git a/.changeset/tiny-guests-wash.md b/.changeset/tiny-guests-wash.md new file mode 100644 index 0000000000..c9005c8df8 --- /dev/null +++ b/.changeset/tiny-guests-wash.md @@ -0,0 +1,5 @@ +--- +'@xstate/vue': minor +--- + +Upgraded package for compatibility with the newest `@vue/composition-api@^0.6.0`, which means that a peer dependency requirement has changed to this version, which is a **breaking change**. The only observable behavior change is that exposed refs are now **shallow**. diff --git a/packages/xstate-vue/package.json b/packages/xstate-vue/package.json index 00249678fa..566f4e7ba8 100644 --- a/packages/xstate-vue/package.json +++ b/packages/xstate-vue/package.json @@ -41,7 +41,7 @@ "url": "https://github.com/davidkpiano/xstate/issues" }, "peerDependencies": { - "@vue/composition-api": "^0.3.4", + "@vue/composition-api": "^0.6.0", "@xstate/fsm": "^1.0.0", "vue": "^2.6.10", "xstate": "^4.7.8" @@ -57,7 +57,7 @@ "devDependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/vue": "^4.1.0", - "@vue/composition-api": "^0.3.4", + "@vue/composition-api": "^0.6.5", "@vue/test-utils": "^1.0.0-beta.30", "@xstate/fsm": "*", "babel-core": "^6.26.3", diff --git a/packages/xstate-vue/src/fsm.ts b/packages/xstate-vue/src/fsm.ts index cf57b37c07..4d3d74f4ce 100644 --- a/packages/xstate-vue/src/fsm.ts +++ b/packages/xstate-vue/src/fsm.ts @@ -1,5 +1,5 @@ import { - ref, + shallowRef, isRef, watch, onMounted, @@ -50,7 +50,7 @@ export function useMachine< ) ).start(); - const state = ref>( + const state = shallowRef>( getServiceValue(service) ); @@ -80,21 +80,27 @@ export function useService< service ) ? service - : ref(service); - const state = ref>( + : shallowRef(service); + const state = shallowRef>( serviceRef.value.state ); - watch(serviceRef, (service, _, onCleanup) => { - state.value = getServiceValue(service); + watch( + serviceRef, + (service, _, onCleanup) => { + state.value = getServiceValue(service); - const { unsubscribe } = service.subscribe((currentState) => { - if (currentState.changed) { - state.value = currentState; - } - }); - onCleanup(unsubscribe); - }); + const { unsubscribe } = service.subscribe((currentState) => { + if (currentState.changed) { + state.value = currentState; + } + }); + onCleanup(unsubscribe); + }, + { + immediate: true + } + ); const send = (event: TEvent | TEvent['type']) => serviceRef.value.send(event); diff --git a/packages/xstate-vue/src/index.ts b/packages/xstate-vue/src/index.ts index 3048a49667..fa5f098f2a 100644 --- a/packages/xstate-vue/src/index.ts +++ b/packages/xstate-vue/src/index.ts @@ -1,5 +1,5 @@ import { - ref, + shallowRef, watch, isRef, onMounted, @@ -68,7 +68,7 @@ export function useMachine( rehydratedState ? State.create(rehydratedState) : undefined ); - const state = ref>(service.state); + const state = shallowRef>(service.state); onMounted(() => { service.onTransition((currentState) => { @@ -98,18 +98,24 @@ export function useService( } { const serviceRef = isRef(service) ? service - : ref>(service); - const state = ref>(serviceRef.value.state); + : shallowRef>(service); + const state = shallowRef>(serviceRef.value.state); - watch(serviceRef, (service, _, onCleanup) => { - state.value = service.state; - const { unsubscribe } = service.subscribe((currentState) => { - if (currentState.changed) { - state.value = currentState; - } - }); - onCleanup(() => unsubscribe()); - }); + watch( + serviceRef, + (service, _, onCleanup) => { + state.value = service.state; + const { unsubscribe } = service.subscribe((currentState) => { + if (currentState.changed) { + state.value = currentState; + } + }); + onCleanup(() => unsubscribe()); + }, + { + immediate: true + } + ); const send = (event: TEvent | TEvent['type']) => serviceRef.value.send(event); diff --git a/packages/xstate-vue/test/UseMachine.vue b/packages/xstate-vue/test/UseMachine.vue index b81f496105..272108c5f9 100644 --- a/packages/xstate-vue/test/UseMachine.vue +++ b/packages/xstate-vue/test/UseMachine.vue @@ -11,8 +11,9 @@