feat: up vue-devtools

Author: posva

packages/pinia/package.json

@@ -76,7 +76,7 @@
     "vue2": "npm:vue@2"
   },
   "dependencies": {
-    "@vue/devtools-api": "^6.0.13",
+    "@vue/devtools-api": "^6.1.0",
     "vue-demi": "*"
   },
   "peerDependencies": {

packages/pinia/src/devtools/plugin.ts

@@ -63,6 +63,12 @@ export function registerPiniaDevtools(app: DevtoolsApp, pinia: Pinia) {
       app,
     },
     (api) => {
+      if (typeof api.now !== 'function') {
+        toastMessage(
+          'You seem to be using an outdated version of Vue Devtools. Are you still using the Beta release instead of the stable one? You can find the links at https://devtools.vuejs.org/guide/installation.html.'
+        )
+      }
+
       api.addTimelineLayer({
         id: MUTATIONS_LAYER_ID,
         label: `Pinia 🍍`,
@@ -289,13 +295,16 @@ function addStoreToDevtools(app: DevtoolsApp, store: StoreGeneric) {
       },
     },
     (api) => {
+      // gracefully handle errors
+      const now = typeof api.now === 'function' ? api.now.bind(api) : Date.now
+
       store.$onAction(({ after, onError, name, args }) => {
         const groupId = runningActionId++
 
         api.addTimelineEvent({
           layerId: MUTATIONS_LAYER_ID,
           event: {
-            time: api.now(),
+            time: now(),
             title: '🛫 ' + name,
             subtitle: 'start',
             data: {
@@ -312,7 +321,7 @@ function addStoreToDevtools(app: DevtoolsApp, store: StoreGeneric) {
           api.addTimelineEvent({
             layerId: MUTATIONS_LAYER_ID,
             event: {
-              time: api.now(),
+              time: now(),
               title: '🛬 ' + name,
               subtitle: 'end',
               data: {
@@ -331,7 +340,7 @@ function addStoreToDevtools(app: DevtoolsApp, store: StoreGeneric) {
           api.addTimelineEvent({
             layerId: MUTATIONS_LAYER_ID,
             event: {
-              time: api.now(),
+              time: now(),
               logType: 'error',
               title: '💥 ' + name,
               subtitle: 'end',
@@ -357,7 +366,7 @@ function addStoreToDevtools(app: DevtoolsApp, store: StoreGeneric) {
               api.addTimelineEvent({
                 layerId: MUTATIONS_LAYER_ID,
                 event: {
-                  time: api.now(),
+                  time: now(),
                   title: 'Change',
                   subtitle: name,
                   data: {
@@ -382,7 +391,7 @@ function addStoreToDevtools(app: DevtoolsApp, store: StoreGeneric) {
           // rootStore.state[store.id] = state
 
           const eventData: TimelineEvent = {
-            time: api.now(),
+            time: now(),
             title: formatMutationType(type),
             data: {
               store: formatDisplay(store.$id),
@@ -427,7 +436,7 @@ function addStoreToDevtools(app: DevtoolsApp, store: StoreGeneric) {
         api.addTimelineEvent({
           layerId: MUTATIONS_LAYER_ID,
           event: {
-            time: api.now(),
+            time: now(),
             title: '🔥 ' + store.$id,
             subtitle: 'HMR update',
             data: {

yarn.lock

@@ -2236,10 +2236,10 @@
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.21.1.tgz#f1410f53c42aa67fa3b01ca7bdba891f69d7bc97"
   integrity sha512-FqC4s3pm35qGVeXRGOjTsRzlkJjrBLriDS9YXbflHLsfA9FrcKzIyWnLXoNm+/7930E8rRakXuAc2QkC50swAw==
 
-"@vue/devtools-api@^6.0.13":
-  version "6.0.13"
-  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.13.tgz#33f8debe2d0239903b6fc8af10ace45ed3a4fab1"
-  integrity sha512-T34EjcArVqzANedEZe2kXQ+AZsld2z1ptJlkOGm87+blk+s6udnP4ze/NYqV8lz1o9AIivimN0xxteLlWiWQdg==
+"@vue/devtools-api@^6.1.0":
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.1.1.tgz#10fd2ca8d5b3cbcde4d6aec5c3fcc7113fa913d6"
+  integrity sha512-VeqwqAOtI42AWeiAIHaoigw+0Km8MVwzDwICgsX95hy6R4UaHnLtTdF0a5JFy4T5vacTeRnuWxZtQ0B/Cytq4g==
 
 "@vue/[email protected]":
   version "3.2.31"