✨ feat: support with Zustand 5

.github/workflows/deploy.yml

@@ -35,7 +35,7 @@ jobs:
         run: npm run build
 
       - name: Upload Artifacts 🔼
-        uses: actions/upload-artifact@v1
+        uses: actions/upload-artifact@v4
         with:
           name: site
           path: example/dist

README.md

@@ -11,7 +11,7 @@ Use the Broadcast Channel API in React easily with `hooks` or `Zustand`, and Typ
 npm install use-broadcast-ts
 ```
 
-This package allows you to use the Broadcast API with a simple hook or by using Zustand.
+This package allows you to use the Broadcast API with a simple hook or by using Zustand v4/v5.
 
 Checkout the [demo](https://romainlg29.github.io/use-broadcast/)!
 
@@ -39,15 +39,12 @@ const useStore = create<MyStore>(
 
 // MyComponent.tsx
 import { FC } from 'react';
+import { useShallow } from 'zustand/shallow'
 
 const MyComponent : FC = () => {
 
-    const { count, set } = useStore(
-        (s) => ({
-            count: s.count,
-            set: s.set
-        })
-    )
+    const count = useStore((s) => s.count);
+    const set = useStore((s) => s.set);
 
     return (
         <p>

example/package.json

@@ -12,8 +12,8 @@
 	"dependencies": {
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"use-broadcast-ts": "^1.4.3",
-		"zustand": "^4.5.0"
+		"use-broadcast-ts": "^1.8.0",
+		"zustand": "^5.0.0"
 	},
 	"devDependencies": {
 		"@types/react": "^18.0.37",

example/src/App.tsx

@@ -13,7 +13,7 @@ const App = () => {
 			<div className="toast toast-top toast-start animate-in">
 				<div className="alert flex items-center justify-center">
 					<h1 className="font-semibold">use-broadcast-ts</h1>
-					<button className="btn btn-sm btn-neutral">v1.7.1</button>
+					<button className="btn btn-sm btn-neutral">v1.8.0</button>
 				</div>
 			</div>
 

example/src/stores/useCountStore.ts

@@ -1,5 +1,5 @@
-import { create } from 'zustand';
 import { shared } from 'use-broadcast-ts';
+import { createWithEqualityFn as create } from 'zustand/traditional';
 
 type CountStore = {
 	count: number;

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "use-broadcast-ts",
-	"version": "1.7.1",
+	"version": "1.8.0",
 	"description": "Use the Broadcast Channel API in React easily with hooks or Zustand, and Typescript!",
 	"type": "module",
 	"types": "./dist/index.d.ts",
@@ -87,7 +87,7 @@
 	},
 	"homepage": "https://github.com/Romainlg29/use-broadcast",
 	"optionalDependencies": {
-		"zustand": "^4.0.0",
+		"zustand": "^4.0.0 || ^5.0.0",
 		"react": ">=18.0"
 	}
 }

src/shared.ts

@@ -147,7 +147,7 @@ const sharedImpl: SharedImpl = (f, options) => (set, get, store) => {
 		/**
 		 * Update the states
 		 */
-		set(...args);
+		set(...(args as Parameters<typeof set>));
 
 		/**
 		 * If the stores should not be synced, return.