diff --git a/packages/pinia/package.json b/packages/pinia/package.json index 956ede460a..955c919b55 100644 --- a/packages/pinia/package.json +++ b/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": { diff --git a/packages/pinia/src/devtools/plugin.ts b/packages/pinia/src/devtools/plugin.ts index ae8b8eb01e..04e4abdc55 100644 --- a/packages/pinia/src/devtools/plugin.ts +++ b/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: { diff --git a/yarn.lock b/yarn.lock index 43a71a8af0..a3dc56e560 100644 --- a/yarn.lock +++ b/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/reactivity-transform@3.2.31": version "3.2.31"