chore(dep/vue) bump peerDep composition-api to 0.6

.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**.

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",

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<StateMachine.State<TContext, TEvent, any>>(
+  const state = shallowRef<StateMachine.State<TContext, TEvent, any>>(
     getServiceValue(service)
   );
 
@@ -80,21 +80,27 @@ export function useService<
     service
   )
     ? service
-    : ref(service);
-  const state = ref<StateMachine.State<TContext, TEvent, TState>>(
+    : shallowRef(service);
+  const state = shallowRef<StateMachine.State<TContext, TEvent, TState>>(
     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);
 

packages/xstate-vue/src/index.ts

@@ -1,5 +1,5 @@
 import {
-  ref,
+  shallowRef,
   watch,
   isRef,
   onMounted,
@@ -68,7 +68,7 @@ export function useMachine<TContext, TEvent extends EventObject>(
     rehydratedState ? State.create(rehydratedState) : undefined
   );
 
-  const state = ref<State<TContext, TEvent>>(service.state);
+  const state = shallowRef<State<TContext, TEvent>>(service.state);
 
   onMounted(() => {
     service.onTransition((currentState) => {
@@ -98,18 +98,24 @@ export function useService<TContext, TEvent extends EventObject>(
 } {
   const serviceRef = isRef(service)
     ? service
-    : ref<Interpreter<TContext, any, TEvent>>(service);
-  const state = ref<State<TContext, TEvent>>(serviceRef.value.state);
+    : shallowRef<Interpreter<TContext, any, TEvent>>(service);
+  const state = shallowRef<State<TContext, TEvent>>(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);
 

packages/xstate-vue/test/UseMachine.vue

@@ -11,8 +11,9 @@
 </template>
 
 <script lang="ts">
+import { PropType } from 'vue';
 import { useMachine } from '../src';
-import { Machine, assign, Interpreter, spawn, doneInvoke, State } from 'xstate';
+import { Machine, assign, State } from 'xstate';
 import { watch } from '@vue/composition-api';
 
 const context = {
@@ -45,8 +46,12 @@ const fetchMachine = Machine<typeof context, any>({
 });
 
 export default {
-  props: ['persistedState'],
-  setup({ persistedState }): { persistedState: State<any, any> } {
+  props: {
+    persistedState: {
+      type: Object as PropType<State<any>>
+    }
+  },
+  setup({ persistedState }) {
     const onFetch = () =>
       new Promise((res) => setTimeout(() => res('some data'), 50));
 

packages/xstate-vue/test/UseService.vue

@@ -6,28 +6,26 @@
 </template>
 
 <script lang="ts">
+import { PropType } from 'vue';
 import { useService } from '../src';
-import {
-  Machine,
-  assign,
-  Interpreter,
-  spawn,
-  doneInvoke,
-  State,
-  Service
-} from 'xstate';
-import { watch, ref } from '@vue/composition-api';
+import { Interpreter } from 'xstate';
+import { watchEffect } from '@vue/composition-api';
 
 export default {
-  props: ['service'],
-  setup(props): { service: Service } {
+  props: {
+    service: {
+      type: Object as PropType<Interpreter<any>>
+    }
+  },
+  setup(props) {
     let { state, send } = useService(props.service);
 
-    watch(() => {
+    watchEffect(() => {
       let currentState = useService(props.service);
       state.value = currentState.state.value;
       send = currentState.send;
     });
+
     return { state, send };
   }
 };

yarn.lock

@@ -1991,12 +1991,12 @@
     source-map "~0.6.1"
     vue-template-es2015-compiler "^1.9.0"
 
-"@vue/composition-api@^0.3.4":
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-0.3.4.tgz#43d2c3377173cfe1d02e51e3342bcf0fbde9c4b6"
-  integrity sha512-aMbg/pEk0PSQAIFyWWLqbAmaCCTx1kFq+49KZslIBJH9Wqos7eEPLtMv4gGxd/EcciBIgfbtUXaXGg/O3mheRA==
+"@vue/composition-api@~0.6.5":
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-0.6.5.tgz#890b4ab3777ee95c6d633872db2bf53a45446d5b"
+  integrity sha512-IRdtn6/59yPNmvzlu5JTAR3SK0kK5T69wtz8oefSY8FFUPoOe7A2BlcVCypRX7jTmpBADhrHkAiklc8ffmPOuQ==
   dependencies:
-    tslib "^1.9.3"
+    tslib "^2.0.0"
 
 "@vue/test-utils@^1.0.0-beta.29", "@vue/test-utils@^1.0.0-beta.30", "@vue/test-utils@^1.0.0-beta.31":
   version "1.0.0-beta.32"
@@ -13746,6 +13746,11 @@ tslib@^1.10.0, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
   integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
 
+tslib@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.0.tgz#18d13fc2dce04051e20f074cc8387fd8089ce4f3"
+  integrity sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==
+
 tslint@^5.11.0:
   version "5.20.1"
   resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.20.1.tgz#e401e8aeda0152bc44dd07e614034f3f80c67b7d"