Migrate to zustand v5. Upgrade typescript

.changeset/twelve-emus-itch.md

@@ -0,0 +1,5 @@
+---
+"@use-coordination/core": major
+---
+
+Upgrade Zustand from v3 to v5.

examples/plots/src/missing-types.d.ts

@@ -10,4 +10,5 @@ declare module 'react-plotly.js';
 
 declare module '@deck.gl/core';
 declare module '@deck.gl/react';
-declare module '@deck.gl/layers';
+declare module '@deck.gl/layers';
+declare module '@trrack/vis-react';

package.json

@@ -36,7 +36,7 @@
   "devDependencies": {
     "@changesets/cli": "^2.17.0",
     "@changesets/get-github-info": "^0.5.2",
-    "@playwright/test": "^1.40.1",
+    "@playwright/test": "^1.52.0",
     "@pnpm/meta-updater": "^0.0.6",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@testing-library/jest-dom": "^5.16.4",
@@ -70,7 +70,7 @@
     "sass": "^1.55.0",
     "serve-static": "^1.15.0",
     "terser": "^5.15.0",
-    "typescript": "^4.7.4",
+    "typescript": "^5.5.3",
     "unified": "^8.3.2",
     "vite": "^4.3.0",
     "vitest": "^0.23.4"

packages/core/package.json

@@ -30,7 +30,7 @@
     "@use-coordination/utils": "workspace:*",
     "@use-coordination/config": "workspace:*",
     "lodash-es": "^4.17.21",
-    "zustand": "^3.5.10",
+    "zustand": "^5.0.4",
     "zod": "^3.21.4"
   },
   "devDependencies": {

packages/core/src/CallbackPublisher.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
-import { useCoordinationStoreApi } from './hooks.js';
-import { CallbackPublisherProps } from './prop-types.js';
+import { type CoordinationState, useCoordinationStoreApi } from './hooks.js';
+import { CallbackPublisherProps, type CmvConfigObject } from './prop-types.js';
 
 /**
  * This is a dummy component which handles
@@ -21,18 +21,20 @@ export default function CallbackPublisher(props: CallbackPublisherProps) {
   // to subscribe to spec changes.
   // Reference: https://github.com/react-spring/zustand#transient-updates-for-often-occuring-state-changes
   useEffect(() => storeApi.subscribe(
+    // The function to specify which part of the store
+    // we want to subscribe to (the "selector").
+    // Reference: https://github.com/pmndrs/zustand?tab=readme-ov-file#using-subscribe-with-selector
+    (state: CoordinationState) => state.spec,
     // The function to run on each publish.
-    (spec: any) => {
+    (spec: CmvConfigObject) => {
       if (validateOnSpecChange && spec && validater) {
         validater(spec);
       }
       if (onSpecChange && spec) {
         onSpecChange(spec);
       }
     },
-    // The function to specify which part of the store
-    // we want to subscribe to.
-    (state: any) => state.spec,
+    // TODO: here, should we specify the "shallow" equality function?
   ), [onSpecChange, validater, validateOnSpecChange, storeApi]);
 
   // Render nothing.