From: Eduardo San Martin Morote Date: Wed, 3 Mar 2021 15:13:49 +0000 (+0100) Subject: test(ssr): update X-Git-Tag: v0.2.0~34 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=9b1a8305a0febd94d09389ab339cc54fa0f8576e;p=thirdparty%2Fvuejs%2Fpinia.git test(ssr): update --- diff --git a/__tests__/ssr/app/App.ts b/__tests__/ssr/app/App.ts index d4fbfc04..3ab2781f 100644 --- a/__tests__/ssr/app/App.ts +++ b/__tests__/ssr/app/App.ts @@ -4,7 +4,7 @@ import { useStore } from './store' export default defineComponent({ async serverPrefetch() { const store = useStore() - store.$state.counter++ + store.counter++ }, setup() { @@ -12,7 +12,7 @@ export default defineComponent({ const doubleCount = computed(() => store.$state.counter * 2) function increment() { - store.$state.counter++ + store.counter++ } return { diff --git a/__tests__/ssr/app/entry-server.ts b/__tests__/ssr/app/entry-server.ts index c9a9996f..20956047 100644 --- a/__tests__/ssr/app/entry-server.ts +++ b/__tests__/ssr/app/entry-server.ts @@ -1,12 +1,8 @@ -import Vue from 'vue' import { createApp } from './main' -import { PiniaSsr, getRootState } from '../../../src' - -Vue.use(PiniaSsr) export default function (context: any) { return new Promise((resolve) => { - const { app } = createApp() + const { app, pinia } = createApp() // This `rendered` hook is called when the app has finished rendering context.rendered = () => { @@ -15,7 +11,7 @@ export default function (context: any) { // When we attach the state to the context, and the `template` option // is used for the renderer, the state will automatically be // serialized and injected into the HTML as `window.__INITIAL_STATE__`. - context.state = getRootState(context.req) + context.state = pinia.state.value } resolve(app) diff --git a/__tests__/ssr/app/main.ts b/__tests__/ssr/app/main.ts index 0581feb9..7a004c8c 100644 --- a/__tests__/ssr/app/main.ts +++ b/__tests__/ssr/app/main.ts @@ -1,3 +1,4 @@ +import { createPinia } from '../../../src' import Vue from 'vue' // import VueCompositionApi from '@vue/composition-api' import App from './App' @@ -7,11 +8,14 @@ import App from './App' export function createApp() { // create the app instance, injecting both the router and the store + const pinia = createPinia() + Vue.use(pinia) const app = new Vue({ // @ts-ignore + pinia, render: (h) => h(App), }) // expose the app, the router and the store. - return { app } + return { app, pinia } } diff --git a/__tests__/ssr/ssrPlugin.spec.ts b/__tests__/ssr/ssrPlugin.spec.ts deleted file mode 100644 index bc3a8cd4..00000000 --- a/__tests__/ssr/ssrPlugin.spec.ts +++ /dev/null @@ -1,15 +0,0 @@ -import Vue from 'vue' -import { PiniaSsr } from '../../src' -import { mockWarn } from 'jest-mock-warn' - -describe('SSR', () => { - mockWarn() - - it('should warn when installed in the browser', () => { - const mixinSpy = jest.spyOn(Vue, 'mixin') - Vue.use(PiniaSsr) - expect(/seems to be used in the client bundle/i).toHaveBeenWarned() - expect(mixinSpy).not.toHaveBeenCalled() - mixinSpy.mockRestore() - }) -}) diff --git a/src/rootStore.ts b/src/rootStore.ts index 9577a983..2cc4a6c7 100644 --- a/src/rootStore.ts +++ b/src/rootStore.ts @@ -137,6 +137,7 @@ export function createPinia(): Pinia { install(Vue) { // localApp = app this.Vue = Vue + Vue.prototype.$pinia = pinia // Equivalent of // app.config.globalProperties.$pinia = pinia @@ -146,19 +147,15 @@ export function createPinia(): Pinia { // Make pinia accessible everywhere through this.$pinia // FIXME: typings if (options.pinia) { - ;(this as any).$pinia = options.pinia // HACK: taken from provide(): https://github.com/vuejs/composition-api/blob/master/src/apis/inject.ts#L25 - // TODO: check if necessary - // if (!(this as any)._provided) { - // const provideCache = {} - // Object.defineProperty(this, '_provided', { - // get: () => provideCache, - // set: (v) => Object.assign(provideCache, v), - // }) - // } - // ;(this as any)._provided[piniaSymbol as any] = options.pinia - } else if (options.parent && options.parent.$pinia) { - ;(this as any).$pinia = options.parent.$pinia + if (!(this as any)._provided) { + const provideCache = {} + Object.defineProperty(this, '_provided', { + get: () => provideCache, + set: (v) => Object.assign(provideCache, v), + }) + } + ;(this as any)._provided[piniaSymbol as any] = options.pinia } }, }) diff --git a/src/ssrPlugin.ts b/src/ssrPlugin.ts deleted file mode 100644 index a0d90064..00000000 --- a/src/ssrPlugin.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { VueConstructor } from 'vue' -// FIXME: migrate to setActivePinia -import { setActiveReq } from './rootStore' -import { SetupContext } from '@vue/composition-api' - -export const PiniaSsr = (_Vue: VueConstructor) => { - const isServer = typeof window === 'undefined' - - if (!isServer) { - console.warn( - '`PiniaSsrPlugin` seems to be used in the client bundle. You should only call it on the server entry: https://github.com/posva/pinia#raw-vue-ssr' - ) - return - } - - _Vue.mixin({ - beforeCreate() { - // @ts-ignore - const { setup, serverPrefetch } = this.$options - if (setup) { - // @ts-ignore - this.$options.setup = (props: any, context: SetupContext) => { - // @ts-ignore TODO: fix usage with nuxt-composition-api https://github.com/posva/pinia/issues/179 - if (context.ssrContext) setActiveReq(context.ssrContext.req) - return setup(props, context) - } - } - - if (serverPrefetch) { - const patchedServerPrefetch = Array.isArray(serverPrefetch) - ? serverPrefetch.slice() - : // serverPrefetch not being an array cannot be triggered due to options merge - // https://github.com/vuejs/vue/blob/7912f75c5eb09e0aef3e4bfd8a3bb78cad7540d7/src/core/util/options.js#L149 - /* istanbul ignore next */ - [serverPrefetch] - - for (let i = 0; i < patchedServerPrefetch.length; i++) { - const original = patchedServerPrefetch[i] - patchedServerPrefetch[i] = function () { - // @ts-ignore - setActiveReq(this.$ssrContext.req) - - return original.call(this) - } - } - - // @ts-ignore - this.$options.serverPrefetch = patchedServerPrefetch - } - }, - }) -} diff --git a/src/store.ts b/src/store.ts index 13a5fb4f..e620fbef 100644 --- a/src/store.ts +++ b/src/store.ts @@ -5,6 +5,7 @@ import { Ref, getCurrentInstance, markRaw, + inject, } from '@vue/composition-api' import { StateTree, @@ -25,6 +26,7 @@ import { setActivePinia, getActivePinia, PiniaCustomProperties, + piniaSymbol, } from './rootStore' import Vue from 'vue' @@ -274,12 +276,14 @@ export function defineStore< const { id, state, getters, actions } = options return function useStore(pinia?: Pinia | null): Store { - const vm = getCurrentInstance() - pinia = pinia || (vm && ((vm as any).$pinia as Pinia)) + // const vm = getCurrentInstance() + // pinia = pinia || (vm && ((vm as any).$pinia as Pinia)) + pinia = pinia || (getCurrentInstance() && inject(piniaSymbol)) if (pinia) setActivePinia(pinia) pinia = getActivePinia() + let stores = storesMap.get(pinia) if (!stores) storesMap.set(pinia, (stores = new Map()))