Merge pull request #3 from react18-tools/fix-compatibility

Fix-compatibility

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@2.3.1/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,17 +1,17 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,10 +1,9 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 **Is your feature request related to a problem? Please describe.**

README.md

@@ -1,16 +1,18 @@
-# PersistAndSync Zustand Store 
+# PersistAndSync Zustand Store
 
-[![test](https://github.com/mayank1513/persist-and-sync/actions/workflows/test.yml/badge.svg)](https://github.com/mayank1513/persist-and-sync/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/5355eb02cfedc9184e3f/maintainability)](https://codeclimate.com/github/mayank1513/persist-and-sync/maintainability) [![codecov](https://codecov.io/gh/mayank1513/persist-and-sync/graph/badge.svg)](https://codecov.io/gh/mayank1513/persist-and-sync) [![Version](https://img.shields.io/npm/v/persist-and-sync.svg?colorB=green)](https://www.npmjs.com/package/persist-and-sync) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/persist-and-sync.svg)](https://www.npmjs.com/package/persist-and-sync) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/persist-and-sync)
+[![test](https://github.com/react18-tools/persist-and-sync/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/persist-and-sync/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/5355eb02cfedc9184e3f/maintainability)](https://codeclimate.com/github/mayank1513/persist-and-sync/maintainability) [![codecov](https://codecov.io/gh/mayank1513/persist-and-sync/graph/badge.svg)](https://codecov.io/gh/mayank1513/persist-and-sync) [![Version](https://img.shields.io/npm/v/persist-and-sync.svg?colorB=green)](https://www.npmjs.com/package/persist-and-sync) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/persist-and-sync.svg)](https://www.npmjs.com/package/persist-and-sync) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/persist-and-sync)
 
 > Zustand middleware to easily persist and sync Zustand state between tabs / windows / iframes (Same Origin)
 
-> Motivation: Recently I got cought up in several issues working with persist miggleware and syncing tabs with zustand. This is a simple light weight middleware to persist and instantly share state between tabs or windows
+> Motivation: Recently I got caught up in several issues working with persist middleware and syncing tabs with Zustand. This is a simple light weight middleware to persist and instantly share state between tabs or windows
 
-- ✅ 🐙 (642 Bytes gZiped) ~ 0.5 kB size cross-tab state sharing + persistance for zustand
+- ✅ 🐙 (642 Bytes gZiped) ~ 0.5 kB size cross-tab state sharing + persistence for zustand
 - ✅ Full TypeScript Support
 - ✅ solid reliability in 1 writing and n reading tab-scenarios (with changing writing tab)
 - ✅ Fire and forget approach of always using the latest state. Perfect for single user systems
 - ✅ Share state between multiple browsing contexts
+- ✅ Additional control over which fields to persist-and-sync and which to ignore
+- ✅ Optimized for performance using memoization and closures.
 
 ## Install
 
@@ -48,7 +50,48 @@ const useStore = create<MyStore>(
 
 ⚡🎉Boom! Just a couple of lines and your state perfectly syncs between tabs/windows and it is also persisted using `localStorage`!
 
-## Advanced - ignore / filter out fields based on regExp
+## Advanced Usage (Customizations)
+
+In several cases you might want to exclude several fields from syncing. To support this scenario, we provide a mechanism to exclude fields based on list of fields or regular expression.
+
+```typescript
+type PersistNSyncOptionsType = {
+	name: string;
+	/** @deprecated */
+	regExpToIgnore?: RegExp;
+	include?: (string | RegExp)[];
+	exclude?: (string | RegExp)[];
+};
+```
+
+If `include` field is missing in the options, all the fields included by default (Filtered based on exclude only, if present). `exclude` filed is used to exclude fields from persisting and syncing. `exclude` is applied after `include`. This means that if you provided `include` array without including a specific field or a regular expression matching that field, it will be excluded irrespective of `exclude` array.
+
+**Example**
+
+```typescript
+export const useMyStore = create<MyStoreType>()(
+	persistNSync(
+		set => ({
+			count: 0,
+			_count: 0 /** skipped as it is included in exclude array */,
+			setCount: count => {
+				set(state => ({ ...state, count }));
+			},
+			set_Count: _count => {
+				set(state => ({ ...state, _count }));
+			},
+		}),
+		{ name: "example", exclude: ["_count"] },
+	),
+);
+```
+
+> It is good to note here that each element of `include` and `exclude` array can either be a string or a regular expression.
+> To use regular expression, you should either use `new RegExp()` or `/your-expression/` syntax. Double or single quoted strings are not treated as regular expression.
+
+## Legacy / Deprecated
+
+#### Ignore / filter out fields based on regExp
 
 In several cases you might want to exclude several fields from syncing. To support this scenario, we provide a mechanism to exclude fields based on regExp. Just pass `regExpToIgnore` (optional - default -> undefined) in options object.
 
@@ -77,13 +120,9 @@ For exactly matching a parameter/field use `/^your-field-name$/`. `^` forces mat
 
 use `regExpToIgnore: /^(field1|field2|field3)$/`
 
-## Roadmap
-
-- [ ] `regExpToInclude` -> once implemented, passing this parameter will sync only matching fields
-
 ### 🤩 Don't forger to start [this repo](https://github.com/mayank1513/persist-and-sync)!
 
-Want handson course for getting started with Turborepo? Check out [React and Next.js with TypeScript](https://mayank-chaudhari.vercel.app/courses/react-and-next-js-with-typescript) and [The Game of Chess with Next.js, React and TypeScrypt](https://www.udemy.com/course/game-of-chess-with-nextjs-react-and-typescrypt/?referralCode=851A28F10B254A8523FE)
+Want hands-on course for getting started with Turborepo? Check out [React and Next.js with TypeScript](https://mayank-chaudhari.vercel.app/courses/react-and-next-js-with-typescript) and [The Game of Chess with Next.js, React and TypeScrypt](https://www.udemy.com/course/game-of-chess-with-nextjs-react-and-typescrypt/?referralCode=851A28F10B254A8523FE)
 
 ## License
 

examples/nextjs/CHANGELOG.md

@@ -0,0 +1,9 @@
+# nextjs-example
+
+## 1.0.1
+
+### Patch Changes
+
+- Added inlcude and exclude arrays to control fields to include or exclude from persist and syncing. Deprecated `regExpToIgnore` option.
+- Updated dependencies
+  - persist-and-sync@1.0.0

examples/nextjs/app/store.ts

@@ -20,6 +20,6 @@ export const useMyStore = create<MyStoreType>()(
 				set(state => ({ ...state, _count }));
 			},
 		}),
-		{ name: "example", regExpToIgnore: /^_/ },
+		{ name: "example", exclude: ["_count"] },
 	),
 );

examples/nextjs/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nextjs-example",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"private": true,
 	"scripts": {
 		"dev": "next dev --port 3001",
@@ -9,19 +9,19 @@
 		"lint": "next lint"
 	},
 	"dependencies": {
-		"next": "^13.5.4",
+		"next": "^14.0.3",
 		"persist-and-sync": "workspace:*",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"zustand": "^4.4.3"
+		"zustand": "^4.4.6"
 	},
 	"devDependencies": {
-		"@next/eslint-plugin-next": "^13.5.4",
-		"@types/node": "^20.8.6",
-		"@types/react": "^18.2.28",
-		"@types/react-dom": "^18.2.13",
+		"@next/eslint-plugin-next": "^14.0.3",
+		"@types/node": "^20.9.4",
+		"@types/react": "^18.2.38",
+		"@types/react-dom": "^18.2.17",
 		"eslint-config-custom": "workspace:*",
 		"tsconfig": "workspace:*",
-		"typescript": "^5.2.2"
+		"typescript": "^5.3.2"
 	}
 }

package.json

@@ -8,10 +8,11 @@
 		"format": "prettier --write \"**/*.{ts,tsx,js,jsx,md,css,scss}\""
 	},
 	"devDependencies": {
-		"eslint": "^8.51.0",
-		"prettier": "^3.0.3",
+		"@changesets/cli": "^2.26.2",
+		"eslint": "^8.54.0",
+		"prettier": "^3.1.0",
 		"tsconfig": "workspace:*",
-		"turbo": "^1.10.15"
+		"turbo": "^1.10.16"
 	},
 	"packageManager": "pnpm@8.6.10",
 	"name": "turbo-template"

packages/eslint-config-custom/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "private": true,
   "devDependencies": {
-    "@vercel/style-guide": "^5.0.1",
-    "eslint-config-turbo": "^1.10.15"
+    "@vercel/style-guide": "^5.1.0",
+    "eslint-config-turbo": "^1.10.16"
   }
 }

packages/persist-and-sync/CHANGELOG.md

@@ -0,0 +1,7 @@
+# persist-and-sync
+
+## 1.0.0
+
+### Major Changes
+
+- Added inlcude and exclude arrays to control fields to include or exclude from persist and syncing. Deprecated `regExpToIgnore` option.

packages/persist-and-sync/createPackageJSON.js

@@ -8,4 +8,7 @@ const { devDependencies, scripts, ...newPackageJSON } = packageJson;
 newPackageJSON.main = packageJson.main.split("/")[1];
 newPackageJSON.types = packageJson.types.split("/")[1];
 
-fs.writeFileSync(path.resolve(__dirname, "dist", "package.json"), JSON.stringify(newPackageJSON, null, 2));
+fs.writeFileSync(
+	path.resolve(__dirname, "dist", "package.json"),
+	JSON.stringify(newPackageJSON, null, 2),
+);

packages/persist-and-sync/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "persist-and-sync",
 	"author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
-	"version": "0.1.2",
+	"version": "1.0.0",
 	"description": "Zustand middleware to easily persist and sync Zustand state between tabs and windows",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -25,14 +25,14 @@
 		"url": "https://github.com/sponsors/mayank1513"
 	},
 	"devDependencies": {
-		"@testing-library/react": "^14.0.0",
-		"@types/node": "^20.8.6",
-		"@vitejs/plugin-react": "^4.1.0",
+		"@testing-library/react": "^14.1.2",
+		"@types/node": "^20.9.4",
+		"@vitejs/plugin-react": "^4.2.0",
 		"@vitest/coverage-v8": "^0.34.6",
 		"jsdom": "^22.1.0",
-		"typescript": "^5.2.2",
+		"typescript": "^5.3.2",
 		"vitest": "^0.34.6",
-		"zustand": "^4.4.3"
+		"zustand": "^4.4.6"
 	},
 	"peerDependencies": {
 		"zustand": "^3 || ^4"