How to hmr?

[qwe12e]

I'm trying to use this awesome library in vue 3 with vite. But I couldn't find any documentation for hot module replacement. Is there an example?

[NetanelBasal]

What are the requirements?

[qwe12e]

@NetanelBasal As an example I'm looking at pinia it is a state management library for vue 3.

In that library when you change something in a store you have to refresh to see the changes. But if you activate the hmr, changes are directly updated you don't need to refresh the page. creating or deleting a field in the store or changing how a getter works, new getters new actions etc. It keeps its latest state. Only problem is that if you change the id of the store pinia automatically refreshes the page which is fine.

I'm working on a dashboard application and in that app after fetching some requests and filling the stores I don't want the app refresh itself when I just change a few things. and wait for request one more time etc.

If you look at this file you can see the implementation. I did try to implement same logic like below but no luck. I'm still investigating whats the problem, I think the registry that I stored to hot.data is not updating itself.

import type { Store } from '@ngneat/elf';

export const isUseStore = (fn: any): fn is Store<any, any> => {
  return typeof fn !== 'function' && typeof fn.name === 'string';
};

export function acceptHMRUpdate(
  initialStore: Store<any, any>,
  initialRegistry: Map<string, Store<any, any>>,
  hot: NonNullable<ImportMeta['hot']>
) {
  return (newModule: any) => {
    const registry: Map<string, Store<any, any>> | undefined = hot.data.registry || initialRegistry;

    if (!registry) {
      return;
    }

    hot.data.registry = registry;

    for (const exportName in newModule) {
      const store = newModule[exportName];
      if (isUseStore(store) && registry.get(store.name)) {
        const id = store.name;

        if (id !== initialStore.name) {
          console.warn(
            `The id of the store changed from "${initialStore.name}" to "${id}". Reloading.`
          );
          return hot.invalidate();
        }

        const existingStore: Store<any, any> = registry.get(id)!;
        if (!existingStore) {
          console.log(`skipping hmr because store doesn't exist yet`);
          return;
        }
        console.log('accepted data', existingStore.getValue());
        store.next(existingStore.getValue());
      }
    }
  };
}

[NetanelBasal]

I'm sorry but I'm not familiar with Pinia and how Vue handles hmr. In Angular, for example, you just need to do the following:

https://datorama.github.io/akita/docs/angular/hmr/