From 96a2c7fdc827327131f7e3c18ffb713787be91a8 Mon Sep 17 00:00:00 2001 From: Romain Date: Sun, 1 Sep 2024 18:17:11 +0200 Subject: [PATCH 1/5] =?UTF-8?q?=E2=9C=A8=20feat:=20support=20with=20Zustan?= =?UTF-8?q?d=205?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/package-lock.json | 45 ++++++++++++++++++--------------------- example/package.json | 4 ++-- src/shared.ts | 2 +- 3 files changed, 24 insertions(+), 27 deletions(-) diff --git a/example/package-lock.json b/example/package-lock.json index 4f18fc3..8455972 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -10,8 +10,8 @@ "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", - "use-broadcast-ts": "^1.4.3", - "zustand": "^4.5.0" + "use-broadcast-ts": "file:..", + "zustand": "^5.0.0-rc.1" }, "devDependencies": { "@types/react": "^18.0.37", @@ -32,8 +32,7 @@ }, "..": { "name": "use-broadcast-ts", - "version": "1.4.3", - "extraneous": true, + "version": "1.7.0", "license": "MIT", "devDependencies": { "@babel/core": "7.21.4", @@ -72,7 +71,7 @@ }, "optionalDependencies": { "react": ">=18.0", - "zustand": "^4.0.0" + "zustand": "^5.0.0-rc.1" } }, "node_modules/@alloc/quick-lru": { @@ -3444,18 +3443,15 @@ } }, "node_modules/use-broadcast-ts": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/use-broadcast-ts/-/use-broadcast-ts-1.5.0.tgz", - "integrity": "sha512-ho4HiKoQXyil2Xs0oaZXmc0ei0pJqELlbJRh95TrniYolRm82A1fj9quYr4gZywPTC8ndKDJCvaJJ5EwzRaJsg==", - "optionalDependencies": { - "react": ">=18.0", - "zustand": "^4.0.0" - } + "resolved": "..", + "link": true }, "node_modules/use-sync-external-store": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", - "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz", + "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==", + "optional": true, + "peer": true, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } @@ -3666,19 +3662,17 @@ } }, "node_modules/zustand": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.0.tgz", - "integrity": "sha512-zlVFqS5TQ21nwijjhJlx4f9iGrXSL0o/+Dpy4txAP22miJ8Ti6c1Ol1RLNN98BMib83lmDH/2KmLwaNXpjrO1A==", - "dependencies": { - "use-sync-external-store": "1.2.0" - }, + "version": "5.0.0-rc.1", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.0-rc.1.tgz", + "integrity": "sha512-/PBSVVNuzgLZUqNeZDWdWp7ehKjiAqKkUva8+cj3gYeHXgUaAd5b5AQm39T1/Q3aUYEnsfp5ZqhQKZZipZz8vA==", "engines": { - "node": ">=12.7.0" + "node": ">=12.20.0" }, "peerDependencies": { - "@types/react": ">=16.8", + "@types/react": ">=18.0.0", "immer": ">=9.0.6", - "react": ">=16.8" + "react": ">=18.0.0", + "use-sync-external-store": ">=1.2.0" }, "peerDependenciesMeta": { "@types/react": { @@ -3689,6 +3683,9 @@ }, "react": { "optional": true + }, + "use-sync-external-store": { + "optional": true } } } diff --git a/example/package.json b/example/package.json index a45cc1b..76cd00f 100644 --- a/example/package.json +++ b/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": "file:..", + "zustand": "^5.0.0-rc.1" }, "devDependencies": { "@types/react": "^18.0.37", diff --git a/src/shared.ts b/src/shared.ts index 920afe2..4304bbb 100644 --- a/src/shared.ts +++ b/src/shared.ts @@ -147,7 +147,7 @@ const sharedImpl: SharedImpl = (f, options) => (set, get, store) => { /** * Update the states */ - set(...args); + set(...(args as Parameters)); /** * If the stores should not be synced, return. From 0d1a361d5fcdfe63d8bc8b6d84984530e74c1719 Mon Sep 17 00:00:00 2001 From: Romain Date: Mon, 2 Sep 2024 11:05:28 +0200 Subject: [PATCH 2/5] =?UTF-8?q?=E2=9C=A8=20feat:=20Support=20with=20v5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 11 ++++------- example/package-lock.json | 2 +- example/package.json | 2 +- example/src/App.tsx | 2 +- example/src/stores/useCountStore.ts | 2 +- package-lock.json | 4 ++-- package.json | 4 ++-- 7 files changed, 12 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index a4096e5..9664e3c 100644 --- a/README.md +++ b/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( // 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 (

diff --git a/example/package-lock.json b/example/package-lock.json index 8455972..a2874f4 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -71,7 +71,7 @@ }, "optionalDependencies": { "react": ">=18.0", - "zustand": "^5.0.0-rc.1" + "zustand": "^4.0.0" } }, "node_modules/@alloc/quick-lru": { diff --git a/example/package.json b/example/package.json index 76cd00f..879b82b 100644 --- a/example/package.json +++ b/example/package.json @@ -12,7 +12,7 @@ "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", - "use-broadcast-ts": "file:..", + "use-broadcast-ts": "^2.0.0", "zustand": "^5.0.0-rc.1" }, "devDependencies": { diff --git a/example/src/App.tsx b/example/src/App.tsx index 29a5738..3cfc56b 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -13,7 +13,7 @@ const App = () => {

use-broadcast-ts

- +
diff --git a/example/src/stores/useCountStore.ts b/example/src/stores/useCountStore.ts index dd2c789..4b623d2 100644 --- a/example/src/stores/useCountStore.ts +++ b/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; diff --git a/package-lock.json b/package-lock.json index 4209056..09564ef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "use-broadcast-ts", - "version": "1.7.0", + "version": "2.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "use-broadcast-ts", - "version": "1.7.0", + "version": "2.0.0", "license": "MIT", "devDependencies": { "@babel/core": "7.21.4", diff --git a/package.json b/package.json index b2a07d8..d311d8d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "use-broadcast-ts", - "version": "1.7.0", + "version": "2.0.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" } } From 3044c7dcd93f4a1d261bed2ec199864e6a877c7e Mon Sep 17 00:00:00 2001 From: Romain Date: Sun, 20 Oct 2024 17:56:10 +0200 Subject: [PATCH 3/5] rebased from Date: Mon Sep 30 14:13:30 2024 +0200 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🔧 fix: Typescript with slices (#18) --- example/src/App.tsx | 2 +- package-lock.json | 4 ++-- package.json | 2 +- src/shared.ts | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/example/src/App.tsx b/example/src/App.tsx index 3cfc56b..6f853d5 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -13,7 +13,7 @@ const App = () => {

use-broadcast-ts

- +
diff --git a/package-lock.json b/package-lock.json index 09564ef..11fdc27 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "use-broadcast-ts", - "version": "2.0.0", + "version": "1.7.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "use-broadcast-ts", - "version": "2.0.0", + "version": "1.7.1", "license": "MIT", "devDependencies": { "@babel/core": "7.21.4", diff --git a/package.json b/package.json index d311d8d..6b94beb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "use-broadcast-ts", - "version": "2.0.0", + "version": "1.7.1", "description": "Use the Broadcast Channel API in React easily with hooks or Zustand, and Typescript!", "type": "module", "types": "./dist/index.d.ts", diff --git a/src/shared.ts b/src/shared.ts index 4304bbb..ed3d4eb 100644 --- a/src/shared.ts +++ b/src/shared.ts @@ -43,7 +43,7 @@ export type Shared = < >( f: StateCreator, options?: SharedOptions -) => StateCreator; +) => StateCreator; /** * Type implementation of the Shared function From 80c709122d88ca065d191c670152e770a889d61c Mon Sep 17 00:00:00 2001 From: Romain Date: Sun, 20 Oct 2024 18:04:56 +0200 Subject: [PATCH 4/5] =?UTF-8?q?=E2=9C=A8=20feat:=20support=20for=20Zustand?= =?UTF-8?q?=20v5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/deploy.yml | 2 +- example/package-lock.json | 53 +++++++++++++++++++++++++++++------- example/package.json | 4 +-- example/src/App.tsx | 2 +- package-lock.json | 6 ++-- package.json | 2 +- 6 files changed, 51 insertions(+), 18 deletions(-) diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 06fdbe0..1fdadc3 100644 --- a/.github/workflows/deploy.yml +++ b/.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 diff --git a/example/package-lock.json b/example/package-lock.json index a2874f4..6919aa9 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -10,8 +10,8 @@ "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", - "use-broadcast-ts": "file:..", - "zustand": "^5.0.0-rc.1" + "use-broadcast-ts": "^1.7.1", + "zustand": "^5.0.0" }, "devDependencies": { "@types/react": "^18.0.37", @@ -32,7 +32,8 @@ }, "..": { "name": "use-broadcast-ts", - "version": "1.7.0", + "version": "1.8.0", + "extraneous": true, "license": "MIT", "devDependencies": { "@babel/core": "7.21.4", @@ -71,7 +72,7 @@ }, "optionalDependencies": { "react": ">=18.0", - "zustand": "^4.0.0" + "zustand": "^4.0.0 || ^5.0.0" } }, "node_modules/@alloc/quick-lru": { @@ -3443,15 +3444,47 @@ } }, "node_modules/use-broadcast-ts": { - "resolved": "..", - "link": true + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/use-broadcast-ts/-/use-broadcast-ts-1.7.1.tgz", + "integrity": "sha512-h9uxqP/YnE0b5v8pJ/YSt+GKKo6URVOr74HSfe/2c2b9xyUiwGRYlR1mdUU/t6cyw/5D/QSKfLLDwLjMDCfjGA==", + "optionalDependencies": { + "react": ">=18.0", + "zustand": "^4.0.0" + } + }, + "node_modules/use-broadcast-ts/node_modules/zustand": { + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.5.tgz", + "integrity": "sha512-+0PALYNJNgK6hldkgDq2vLrw5f6g/jCInz52n9RTpropGgeAf/ioFUCdtsjCqu4gNhW9D01rUQBROoRjdzyn2Q==", + "optional": true, + "dependencies": { + "use-sync-external-store": "1.2.2" + }, + "engines": { + "node": ">=12.7.0" + }, + "peerDependencies": { + "@types/react": ">=16.8", + "immer": ">=9.0.6", + "react": ">=16.8" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "immer": { + "optional": true + }, + "react": { + "optional": true + } + } }, "node_modules/use-sync-external-store": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz", "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==", "optional": true, - "peer": true, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } @@ -3662,9 +3695,9 @@ } }, "node_modules/zustand": { - "version": "5.0.0-rc.1", - "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.0-rc.1.tgz", - "integrity": "sha512-/PBSVVNuzgLZUqNeZDWdWp7ehKjiAqKkUva8+cj3gYeHXgUaAd5b5AQm39T1/Q3aUYEnsfp5ZqhQKZZipZz8vA==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.0.tgz", + "integrity": "sha512-LE+VcmbartOPM+auOjCCLQOsQ05zUTp8RkgwRzefUk+2jISdMMFnxvyTjA4YNWr5ZGXYbVsEMZosttuxUBkojQ==", "engines": { "node": ">=12.20.0" }, diff --git a/example/package.json b/example/package.json index 879b82b..3899e69 100644 --- a/example/package.json +++ b/example/package.json @@ -12,8 +12,8 @@ "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", - "use-broadcast-ts": "^2.0.0", - "zustand": "^5.0.0-rc.1" + "use-broadcast-ts": "^1.7.1", + "zustand": "^5.0.0" }, "devDependencies": { "@types/react": "^18.0.37", diff --git a/example/src/App.tsx b/example/src/App.tsx index 6f853d5..fa6f93c 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -13,7 +13,7 @@ const App = () => {

use-broadcast-ts

- +
diff --git a/package-lock.json b/package-lock.json index 11fdc27..04af78c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "use-broadcast-ts", - "version": "1.7.1", + "version": "1.8.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "use-broadcast-ts", - "version": "1.7.1", + "version": "1.8.0", "license": "MIT", "devDependencies": { "@babel/core": "7.21.4", @@ -45,7 +45,7 @@ }, "optionalDependencies": { "react": ">=18.0", - "zustand": "^4.0.0" + "zustand": "^4.0.0 || ^5.0.0" } }, "node_modules/@adobe/css-tools": { diff --git a/package.json b/package.json index 6b94beb..0734489 100644 --- a/package.json +++ b/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", From 9dec98485209a2a860c78682b75bdbe6bfa9a0cf Mon Sep 17 00:00:00 2001 From: Romain Date: Sun, 20 Oct 2024 18:09:12 +0200 Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=94=A7=20fix:=20docs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/package-lock.json | 39 ++++++--------------------------------- example/package.json | 2 +- 2 files changed, 7 insertions(+), 34 deletions(-) diff --git a/example/package-lock.json b/example/package-lock.json index 6919aa9..2e8b782 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -10,7 +10,7 @@ "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", - "use-broadcast-ts": "^1.7.1", + "use-broadcast-ts": "^1.8.0", "zustand": "^5.0.0" }, "devDependencies": { @@ -3444,40 +3444,12 @@ } }, "node_modules/use-broadcast-ts": { - "version": "1.7.1", - "resolved": "https://registry.npmjs.org/use-broadcast-ts/-/use-broadcast-ts-1.7.1.tgz", - "integrity": "sha512-h9uxqP/YnE0b5v8pJ/YSt+GKKo6URVOr74HSfe/2c2b9xyUiwGRYlR1mdUU/t6cyw/5D/QSKfLLDwLjMDCfjGA==", + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/use-broadcast-ts/-/use-broadcast-ts-1.8.0.tgz", + "integrity": "sha512-0P96KV3fj2RalmWPAEVm5J7vFuB3PLxBIzei4Nv2z9ckvr6+MxgbtpgJXLWcVBa3JsvI6G7a6u11mzsuUdpjuA==", "optionalDependencies": { "react": ">=18.0", - "zustand": "^4.0.0" - } - }, - "node_modules/use-broadcast-ts/node_modules/zustand": { - "version": "4.5.5", - "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.5.tgz", - "integrity": "sha512-+0PALYNJNgK6hldkgDq2vLrw5f6g/jCInz52n9RTpropGgeAf/ioFUCdtsjCqu4gNhW9D01rUQBROoRjdzyn2Q==", - "optional": true, - "dependencies": { - "use-sync-external-store": "1.2.2" - }, - "engines": { - "node": ">=12.7.0" - }, - "peerDependencies": { - "@types/react": ">=16.8", - "immer": ">=9.0.6", - "react": ">=16.8" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "immer": { - "optional": true - }, - "react": { - "optional": true - } + "zustand": "^4.0.0 || ^5.0.0" } }, "node_modules/use-sync-external-store": { @@ -3485,6 +3457,7 @@ "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz", "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==", "optional": true, + "peer": true, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } diff --git a/example/package.json b/example/package.json index 3899e69..668e1cb 100644 --- a/example/package.json +++ b/example/package.json @@ -12,7 +12,7 @@ "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", - "use-broadcast-ts": "^1.7.1", + "use-broadcast-ts": "^1.8.0", "zustand": "^5.0.0" }, "devDependencies": {