Composables HMR issue

[mvrlin]

When I create a composable and HMR is triggered the state just resets.

The first thing that comes to mind is to sync the counter state with initialState in viteSSR method as Pinia does. Is there a clean way to sync composables state when HMR is triggered?

For example:

// composables/counter.ts
import { reactive } from 'vue'

const state = reactive({
  value: 0
})

export function useCounter() {
  return {
    decrement() {
      state.value--
    },
    
    increment() {
      state.value++
    },

    get value() {
      return state.value
    },
  }
}

// Counter.vue

<script lang="ts" setup>
import { useCounter } from '~/composables'
const counter = useCounter()
</script>

<template>
  <div class="grid grid-flow-col gap-4">
    <button @click="counter.increment">+</button>
    <span>{{ counter.value }}</span>
    <button @click="counter.decrement">-</button>
  </div>
</template>

[frandiox]

Ah right, I guess Vite is adding a random querystring to the file to bust the cache so it just downloads a new version of the composables/counter.ts file.

In any case, there's a deeper problem here and it's that this counter will be shared across different requests in your server. In order to avoid that, you need to create a new counter for every request. You can do this from Vite SSR main hook and save it in initialState:

    initialState.myState = import.meta.env.SSR
      ? reactive({ counter: 0 })
      : reactive(initialState.myState)

Then, get that request-scoped counter with useContext from your hooks:

import { useContext } from 'vite-ssr'

export function useCounter() {
  const {
    initialState: { myState },
  } = useContext()


  return {
    decrement() {
      myState.counter--
    },
    
    increment() {
      myState.counter++
    },

    get value() {
      myState state.counter
    },
  }
}

That should be enough to fix the issue I was talking about but if you save the file that is setting {counter:0} (main.js, probably), the HMR will still reset the counter. For that you might need to use Vite HMR API and see if it's possible to keep the same value from the previous initial state or something like that 🤔