From a046bded6422be24bc942cc537215787951de918 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Thu, 30 Jan 2025 17:28:46 +0100 Subject: [PATCH] refactor: wip remove vue-demi --- packages/docs/vite.config.ts | 4 +- packages/nuxt/src/runtime/plugin.vue2.ts | 42 --------- packages/pinia/__tests__/storeToRefs.spec.ts | 8 +- packages/pinia/package.json | 3 +- packages/pinia/src/createPinia.ts | 22 +++-- packages/pinia/src/devtools/formatting.ts | 2 +- packages/pinia/src/devtools/plugin.ts | 2 +- packages/pinia/src/hmr.ts | 8 +- packages/pinia/src/mapHelpers.ts | 2 +- packages/pinia/src/rootStore.ts | 2 +- packages/pinia/src/store.ts | 87 ++++++------------- packages/pinia/src/storeToRefs.ts | 57 +++++------- packages/pinia/src/subscriptions.ts | 2 +- packages/pinia/src/types.ts | 2 +- packages/pinia/src/vue2-plugin.ts | 2 +- .../playground/src/views/AllStoresDispose.vue | 2 +- packages/playground/vite.config.ts | 7 +- packages/testing/package.json | 3 - packages/testing/src/testing.ts | 24 ++--- packages/testing/tsup.config.ts | 2 +- pnpm-lock.yaml | 7 -- rollup.config.mjs | 3 +- 22 files changed, 88 insertions(+), 205 deletions(-) delete mode 100644 packages/nuxt/src/runtime/plugin.vue2.ts diff --git a/packages/docs/vite.config.ts b/packages/docs/vite.config.ts index a084967b..3da0892c 100644 --- a/packages/docs/vite.config.ts +++ b/packages/docs/vite.config.ts @@ -1,4 +1,4 @@ -import { defineConfig, Plugin } from 'vite' +import { defineConfig, type Plugin } from 'vite' import _fs from 'fs' import path from 'path' // import TypeDocPlugin from './vite-typedoc-plugin' @@ -24,7 +24,7 @@ export default defineConfig({ __BROWSER__: 'true', }, optimizeDeps: { - exclude: ['vue-demi', '@vueuse/shared', '@vueuse/core', 'pinia'], + exclude: ['@vueuse/shared', '@vueuse/core', 'pinia'], }, }) diff --git a/packages/nuxt/src/runtime/plugin.vue2.ts b/packages/nuxt/src/runtime/plugin.vue2.ts deleted file mode 100644 index 188c3f99..00000000 --- a/packages/nuxt/src/runtime/plugin.vue2.ts +++ /dev/null @@ -1,42 +0,0 @@ -import _Vue2 from 'vue' -import { createPinia, setActivePinia, PiniaVuePlugin } from 'pinia' - -// TODO: workaround that should probably be removed in the future -const Vue = 'default' in _Vue2 ? (_Vue2 as any).default : _Vue2 -Vue.use(PiniaVuePlugin) - -export default (context: any, provide: any) => { - const pinia = createPinia() - context.app.pinia = pinia - setActivePinia(pinia) - - // add access to `$nuxt` - pinia._p.push(({ store }) => { - // make it non enumerable so it avoids any serialization and devtools - Object.defineProperty(store, '$nuxt', { value: context }) - }) - - if (import.meta.server) { - context.beforeNuxtRender((ctx: any) => { - ctx.nuxtState.pinia = pinia.state.value - }) - } else if (context.nuxtState && context.nuxtState.pinia) { - pinia.state.value = context.nuxtState.pinia - } - - // Inject $pinia - provide('pinia', pinia) -} - -declare module 'pinia' { - export interface PiniaCustomProperties { - /** - * Nuxt context. Requires you to install `@nuxt/types` to have types. - * - * @deprecated use `useNuxtApp()` and global `$fetch()` instead. See - * https://v3.nuxtjs.org/bridge/bridge-composition-api/ - */ - // @ts-ignore: heavy types, must be added by the user - $nuxt: import('@nuxt/types').Context - } -} diff --git a/packages/pinia/__tests__/storeToRefs.spec.ts b/packages/pinia/__tests__/storeToRefs.spec.ts index 17b4a354..d571f1b9 100644 --- a/packages/pinia/__tests__/storeToRefs.spec.ts +++ b/packages/pinia/__tests__/storeToRefs.spec.ts @@ -1,7 +1,6 @@ import { describe, beforeEach, it, expect, vi } from 'vitest' import { computed, reactive, ref, ToRefs } from 'vue' import { createPinia, defineStore, setActivePinia, storeToRefs } from '../src' -import { set } from 'vue-demi' describe('storeToRefs', () => { beforeEach(() => { @@ -181,11 +180,10 @@ describe('storeToRefs', () => { const { double } = storeToRefs(store) // Assuming HMR operation - set( - store, - 'double', + // @ts-expect-error: hmr + store.double = + // computed(() => 1) - ) expect(double.value).toEqual(1) }) diff --git a/packages/pinia/package.json b/packages/pinia/package.json index 70f7952c..678a75d5 100644 --- a/packages/pinia/package.json +++ b/packages/pinia/package.json @@ -73,8 +73,7 @@ "@vue/test-utils": "^2.4.6" }, "dependencies": { - "@vue/devtools-api": "^6.6.3", - "vue-demi": "^0.14.10" + "@vue/devtools-api": "^6.6.3" }, "peerDependencies": { "typescript": ">=4.4.4", diff --git a/packages/pinia/src/createPinia.ts b/packages/pinia/src/createPinia.ts index 7749247a..41129cfa 100644 --- a/packages/pinia/src/createPinia.ts +++ b/packages/pinia/src/createPinia.ts @@ -1,5 +1,5 @@ import { Pinia, PiniaPlugin, setActivePinia, piniaSymbol } from './rootStore' -import { ref, App, markRaw, effectScope, isVue2, Ref } from 'vue-demi' +import { ref, App, markRaw, effectScope, Ref } from 'vue' import { registerPiniaDevtools, devtoolsPlugin } from './devtools' import { IS_CLIENT } from './env' import { StateTree, StoreGeneric } from './types' @@ -24,21 +24,19 @@ export function createPinia(): Pinia { // this allows calling useStore() outside of a component setup after // installing pinia's plugin setActivePinia(pinia) - if (!isVue2) { - pinia._a = app - app.provide(piniaSymbol, pinia) - app.config.globalProperties.$pinia = pinia - /* istanbul ignore else */ - if (__USE_DEVTOOLS__ && IS_CLIENT) { - registerPiniaDevtools(app, pinia) - } - toBeInstalled.forEach((plugin) => _p.push(plugin)) - toBeInstalled = [] + pinia._a = app + app.provide(piniaSymbol, pinia) + app.config.globalProperties.$pinia = pinia + /* istanbul ignore else */ + if (__USE_DEVTOOLS__ && IS_CLIENT) { + registerPiniaDevtools(app, pinia) } + toBeInstalled.forEach((plugin) => _p.push(plugin)) + toBeInstalled = [] }, use(plugin) { - if (!this._a && !isVue2) { + if (!this._a) { toBeInstalled.push(plugin) } else { _p.push(plugin) diff --git a/packages/pinia/src/devtools/formatting.ts b/packages/pinia/src/devtools/formatting.ts index 651c9ef3..ea55dce6 100644 --- a/packages/pinia/src/devtools/formatting.ts +++ b/packages/pinia/src/devtools/formatting.ts @@ -4,7 +4,7 @@ import { CustomInspectorState, } from '@vue/devtools-api' import { MutationType, StoreGeneric } from '../types' -import { DebuggerEvent } from 'vue-demi' +import { DebuggerEvent } from 'vue' import { Pinia } from '../rootStore' import { isPinia } from './utils' diff --git a/packages/pinia/src/devtools/plugin.ts b/packages/pinia/src/devtools/plugin.ts index 2c9fdd5c..9f15af9f 100644 --- a/packages/pinia/src/devtools/plugin.ts +++ b/packages/pinia/src/devtools/plugin.ts @@ -3,7 +3,7 @@ import { TimelineEvent, App as DevtoolsApp, } from '@vue/devtools-api' -import { ComponentPublicInstance, markRaw, toRaw, unref, watch } from 'vue-demi' +import { ComponentPublicInstance, markRaw, toRaw, unref, watch } from 'vue' import { Pinia, PiniaPluginContext } from '../rootStore' import { _GettersTree, diff --git a/packages/pinia/src/hmr.ts b/packages/pinia/src/hmr.ts index b5798d49..c8ce9b8e 100644 --- a/packages/pinia/src/hmr.ts +++ b/packages/pinia/src/hmr.ts @@ -1,4 +1,4 @@ -import { isRef, isReactive, isVue2, set } from 'vue-demi' +import { isRef, isReactive } from 'vue' import { Pinia } from './rootStore' import { isPlainObject, @@ -53,11 +53,7 @@ export function patchObject( } else { // objects are either a bit more complex (e.g. refs) or primitives, so we // just set the whole thing - if (isVue2) { - set(newState, key, subPatch) - } else { - newState[key] = subPatch - } + newState[key] = subPatch } } diff --git a/packages/pinia/src/mapHelpers.ts b/packages/pinia/src/mapHelpers.ts index aa7662cb..eb5290a8 100644 --- a/packages/pinia/src/mapHelpers.ts +++ b/packages/pinia/src/mapHelpers.ts @@ -1,4 +1,4 @@ -import type { ComponentPublicInstance, ComputedRef, UnwrapRef } from 'vue-demi' +import type { ComponentPublicInstance, ComputedRef, UnwrapRef } from 'vue' import type { _GettersTree, _StoreWithGetters_Writable, diff --git a/packages/pinia/src/rootStore.ts b/packages/pinia/src/rootStore.ts index 1b30996a..78e75c6a 100644 --- a/packages/pinia/src/rootStore.ts +++ b/packages/pinia/src/rootStore.ts @@ -5,7 +5,7 @@ import { hasInjectionContext, InjectionKey, Ref, -} from 'vue-demi' +} from 'vue' import { StateTree, PiniaCustomProperties, diff --git a/packages/pinia/src/store.ts b/packages/pinia/src/store.ts index a09196a4..2eb7021f 100644 --- a/packages/pinia/src/store.ts +++ b/packages/pinia/src/store.ts @@ -19,11 +19,8 @@ import { toRefs, Ref, ref, - set, - del, nextTick, - isVue2, -} from 'vue-demi' +} from 'vue' import { StateTree, SubscriptionCallback, @@ -166,11 +163,7 @@ function createOptionsStore< function setup() { if (!initialState && (!__DEV__ || !hot)) { /* istanbul ignore if */ - if (isVue2) { - set(pinia.state.value, id, state ? state() : {}) - } else { - pinia.state.value[id] = state ? state() : {} - } + pinia.state.value[id] = state ? state() : {} } // avoid creating a state in pinia.state.value @@ -198,8 +191,6 @@ function createOptionsStore< const store = pinia._s.get(id)! // allow cross using stores - /* istanbul ignore if */ - if (isVue2 && !store._r) return // @ts-expect-error // return getters![name].call(context, context) @@ -250,7 +241,7 @@ function createSetupStore< // watcher options for $subscribe const $subscribeOptions: WatchOptions = { deep: true } /* istanbul ignore else */ - if (__DEV__ && !isVue2) { + if (__DEV__) { $subscribeOptions.onTrigger = (event) => { /* istanbul ignore else */ if (isListening) { @@ -282,11 +273,7 @@ function createSetupStore< // by the setup if (!isOptionsStore && !initialState && (!__DEV__ || !hot)) { /* istanbul ignore if */ - if (isVue2) { - set(pinia.state.value, $id, {}) - } else { - pinia.state.value[$id] = {} - } + pinia.state.value[$id] = {} } const hotState = ref({} as S) @@ -478,12 +465,6 @@ function createSetupStore< $dispose, } as _StoreWithState - /* istanbul ignore if */ - if (isVue2) { - // start as non ready - partialStore._r = false - } - const store: Store = reactive( __DEV__ || (__USE_DEVTOOLS__ && IS_CLIENT) ? assign( @@ -517,7 +498,7 @@ function createSetupStore< if ((isRef(prop) && !isComputed(prop)) || isReactive(prop)) { // mark it as a piece of state to be serialized if (__DEV__ && hot) { - set(hotState.value, key, toRef(setupStore, key)) + hotState.value[key] = toRef(setupStore, key) // createOptionStore directly sets the state in pinia.state.value so we // can just skip that } else if (!isOptionsStore) { @@ -532,12 +513,7 @@ function createSetupStore< } } // transfer the ref to the pinia state to keep everything in sync - /* istanbul ignore if */ - if (isVue2) { - set(pinia.state.value[$id], key, prop) - } else { - pinia.state.value[$id][key] = prop - } + pinia.state.value[$id][key] = prop } /* istanbul ignore else */ @@ -549,13 +525,8 @@ function createSetupStore< const actionValue = __DEV__ && hot ? prop : action(prop as _Method, key) // this a hot module replacement store because the hotUpdate method needs // to do it with the right context - /* istanbul ignore if */ - if (isVue2) { - set(setupStore, key, actionValue) - } else { - // @ts-expect-error - setupStore[key] = actionValue - } + // @ts-expect-error + setupStore[key] = actionValue /* istanbul ignore else */ if (__DEV__) { @@ -585,16 +556,10 @@ function createSetupStore< // add the state, getters, and action properties /* istanbul ignore if */ - if (isVue2) { - Object.keys(setupStore).forEach((key) => { - set(store, key, setupStore[key]) - }) - } else { - assign(store, setupStore) - // allows retrieving reactive objects with `storeToRefs()`. Must be called after assigning to the reactive object. - // Make `storeToRefs()` work with `reactive()` #799 - assign(toRaw(store), setupStore) - } + assign(store, setupStore) + // allows retrieving reactive objects with `storeToRefs()`. Must be called after assigning to the reactive object. + // Make `storeToRefs()` work with `reactive()` #799 + assign(toRaw(store), setupStore) // use this instead of a computed with setter to be able to create it anywhere // without linking the computed lifespan to wherever the store is first @@ -635,13 +600,15 @@ function createSetupStore< } // patch direct access properties to allow store.stateProperty to work as // store.$state.stateProperty - set(store, stateKey, toRef(newStore.$state, stateKey)) + // @ts-expect-error: any type + store[stateKey] = toRef(newStore.$state, stateKey) }) // remove deleted state properties Object.keys(store.$state).forEach((stateKey) => { if (!(stateKey in newStore.$state)) { - del(store, stateKey) + // @ts-expect-error: noop if doesn't exist + delete store[stateKey] } }) @@ -657,7 +624,10 @@ function createSetupStore< for (const actionName in newStore._hmrPayload.actions) { const actionFn: _Method = newStore[actionName] - set(store, actionName, action(actionFn, actionName)) + // @ts-expect-error: actionName is a string + store[actionName] = + // + action(actionFn, actionName) } // TODO: does this work in both setup and option store? @@ -671,20 +641,25 @@ function createSetupStore< }) : getter - set(store, getterName, getterValue) + // @ts-expect-error: getterName is a string + store[getterName] = + // + getterValue } // remove deleted getters Object.keys(store._hmrPayload.getters).forEach((key) => { if (!(key in newStore._hmrPayload.getters)) { - del(store, key) + // @ts-expect-error: noop if doesn't exist + delete store[key] } }) // remove old actions Object.keys(store._hmrPayload.actions).forEach((key) => { if (!(key in newStore._hmrPayload.actions)) { - del(store, key) + // @ts-expect-error: noop if doesn't exist + delete store[key] } }) @@ -715,12 +690,6 @@ function createSetupStore< ) } - /* istanbul ignore if */ - if (isVue2) { - // mark the store as ready before plugins - store._r = true - } - // apply all plugins pinia._p.forEach((extender) => { /* istanbul ignore else */ diff --git a/packages/pinia/src/storeToRefs.ts b/packages/pinia/src/storeToRefs.ts index 3278b0c6..45211ac0 100644 --- a/packages/pinia/src/storeToRefs.ts +++ b/packages/pinia/src/storeToRefs.ts @@ -3,14 +3,12 @@ import { ComputedRef, isReactive, isRef, - isVue2, toRaw, ToRef, toRef, ToRefs, - toRefs, WritableComputedRef, -} from 'vue-demi' +} from 'vue' import { StoreGetters, StoreState } from './store' import type { _ActionsTree, @@ -89,37 +87,30 @@ export type StoreToRefs = export function storeToRefs( store: SS ): StoreToRefs { - // See https://github.com/vuejs/pinia/issues/852 - // It's easier to just use toRefs() even if it includes more stuff - if (isVue2) { - // @ts-expect-error: toRefs include methods and others - return toRefs(store) - } else { - const rawStore = toRaw(store) + const rawStore = toRaw(store) - const refs = {} as StoreToRefs - for (const key in rawStore) { - const value = rawStore[key] - // There is no native method to check for a computed - // https://github.com/vuejs/core/pull/4165 - if (value.effect) { - // @ts-expect-error: too hard to type correctly - refs[key] = - // ... - computed({ - get: () => store[key], - set(value) { - store[key] = value - }, - }) - } else if (isRef(value) || isReactive(value)) { - // @ts-expect-error: the key is state or getter - refs[key] = - // --- - toRef(store, key) - } + const refs = {} as StoreToRefs + for (const key in rawStore) { + const value = rawStore[key] + // There is no native method to check for a computed + // https://github.com/vuejs/core/pull/4165 + if (value.effect) { + // @ts-expect-error: too hard to type correctly + refs[key] = + // ... + computed({ + get: () => store[key], + set(value) { + store[key] = value + }, + }) + } else if (isRef(value) || isReactive(value)) { + // @ts-expect-error: the key is state or getter + refs[key] = + // --- + toRef(store, key) } - - return refs } + + return refs } diff --git a/packages/pinia/src/subscriptions.ts b/packages/pinia/src/subscriptions.ts index 876966d6..49b2d717 100644 --- a/packages/pinia/src/subscriptions.ts +++ b/packages/pinia/src/subscriptions.ts @@ -1,4 +1,4 @@ -import { getCurrentScope, onScopeDispose } from 'vue-demi' +import { getCurrentScope, onScopeDispose } from 'vue' import { _Method } from './types' export const noop = () => {} diff --git a/packages/pinia/src/types.ts b/packages/pinia/src/types.ts index 085bb39f..79a188df 100644 --- a/packages/pinia/src/types.ts +++ b/packages/pinia/src/types.ts @@ -5,7 +5,7 @@ import type { UnwrapRef, WatchOptions, WritableComputedRef, -} from 'vue-demi' +} from 'vue' import { Pinia } from './rootStore' /** diff --git a/packages/pinia/src/vue2-plugin.ts b/packages/pinia/src/vue2-plugin.ts index fbb9aad2..2ca3d052 100644 --- a/packages/pinia/src/vue2-plugin.ts +++ b/packages/pinia/src/vue2-plugin.ts @@ -1,4 +1,4 @@ -import type { Plugin } from 'vue-demi' +import type { Plugin } from 'vue' import { registerPiniaDevtools } from './devtools' import { IS_CLIENT } from './env' import { Pinia, piniaSymbol, setActivePinia } from './rootStore' diff --git a/packages/playground/src/views/AllStoresDispose.vue b/packages/playground/src/views/AllStoresDispose.vue index 10862550..a8e6e136 100644 --- a/packages/playground/src/views/AllStoresDispose.vue +++ b/packages/playground/src/views/AllStoresDispose.vue @@ -15,7 +15,7 @@ import { useUserStore } from '../stores/user' import { useCartStore } from '../stores/cart' import { useCounter } from '../stores/counter' -import { onUnmounted } from 'vue-demi' +import { onUnmounted } from 'vue' const userStore = useUserStore() const cartStore = useCartStore() diff --git a/packages/playground/vite.config.ts b/packages/playground/vite.config.ts index 91da24a2..5d474d30 100644 --- a/packages/playground/vite.config.ts +++ b/packages/playground/vite.config.ts @@ -12,17 +12,14 @@ export default defineConfig({ __TEST__: 'false', }, resolve: { - // alias: { - // '@vue/composition-api': 'vue-demi', - // }, - dedupe: ['vue-demi', 'vue', 'pinia'], + dedupe: ['vue', 'pinia'], alias: { // FIXME: use fileToUrl pinia: path.resolve(__dirname, '../pinia/src/index.ts'), }, }, optimizeDeps: { - exclude: ['vue-demi', '@vueuse/shared', '@vueuse/core', 'pinia'], + exclude: ['@vueuse/shared', '@vueuse/core', 'pinia'], }, }) diff --git a/packages/testing/package.json b/packages/testing/package.json index 428e932f..9099d908 100644 --- a/packages/testing/package.json +++ b/packages/testing/package.json @@ -43,9 +43,6 @@ "build": "tsup", "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s --commit-path . -l @pinia/testing -r 1" }, - "dependencies": { - "vue-demi": "^0.14.10" - }, "devDependencies": { "pinia": "workspace:*", "tsup": "^8.3.5" diff --git a/packages/testing/src/testing.ts b/packages/testing/src/testing.ts index 978cf662..964a07c8 100644 --- a/packages/testing/src/testing.ts +++ b/packages/testing/src/testing.ts @@ -1,15 +1,5 @@ -import { - App, - createApp, - customRef, - isReactive, - isRef, - isVue2, - set, - toRaw, - triggerRef, -} from 'vue-demi' -import type { ComputedRef, WritableComputedRef } from 'vue-demi' +import { createApp, customRef, isReactive, isRef, toRaw, triggerRef } from 'vue' +import type { App, ComputedRef, WritableComputedRef } from 'vue' import { Pinia, PiniaPlugin, @@ -191,12 +181,10 @@ function mergeReactiveObjects( ) { target[key] = mergeReactiveObjects(targetValue, subPatch) } else { - if (isVue2) { - set(target, key, subPatch) - } else { - // @ts-expect-error: subPatch is a valid value - target[key] = subPatch - } + // @ts-expect-error: subPatch is a valid value + target[key] = + // + subPatch } } diff --git a/packages/testing/tsup.config.ts b/packages/testing/tsup.config.ts index fbf80f04..dd73743d 100644 --- a/packages/testing/tsup.config.ts +++ b/packages/testing/tsup.config.ts @@ -5,7 +5,7 @@ export default defineConfig({ clean: true, format: ['cjs', 'esm'], dts: true, - external: ['vue-demi', 'vue', 'pinia'], + external: ['vue', 'pinia'], tsconfig: './tsconfig.build.json', // onSuccess: 'npm run build:fix', }) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9a897b03..851852e1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -203,9 +203,6 @@ importers: vue: specifier: ^2.7.0 || ^3.5.11 version: 3.5.13(typescript@5.6.3) - vue-demi: - specifier: ^0.14.10 - version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3)) devDependencies: '@microsoft/api-extractor': specifier: 7.48.0 @@ -256,10 +253,6 @@ importers: version: 1.0.5 packages/testing: - dependencies: - vue-demi: - specifier: ^0.14.10 - version: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3)) devDependencies: pinia: specifier: workspace:* diff --git a/rollup.config.mjs b/rollup.config.mjs index e829bb16..c29aca19 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -94,7 +94,6 @@ function createConfig(buildName, output, plugins = []) { output.banner = banner output.externalLiveBindings = false output.globals = { - 'vue-demi': 'VueDemi', vue: 'Vue', } @@ -126,7 +125,7 @@ function createConfig(buildName, output, plugins = []) { // during a single build. hasTSChecked = true - const external = ['vue-demi', 'vue'] + const external = ['vue'] if ( !isGlobalBuild && // pinia.prod.cjs should not require `@vue/devtools-api` (like Vue) -- 2.47.3