feat: withProxy (#5)

* feat: withProxy * support persist middleware * update CHANGELOG * support valtio v1
zustandjs · Jul 13, 2024 · be6c97a · be6c97a
1 parent 9ab6125
commit be6c97a
Show file tree

Hide file tree

Showing 13 changed files with 823 additions and 640 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+## Added
+
+- feat: withProxy #5
+
 ## [0.2.0] - 2024-04-25
 
 ## Added

diff --git a/README.md b/README.md
@@ -16,20 +16,23 @@ npm install zustand zustand-valtio valtio
 ## Usage
 
 ```jsx
-import { createWithProxy } from 'zustand-valtio';
-
-const useCounterState = createWithProxy({
-  count: 0,
-  inc() {
-    this.count++;
-  },
-});
+import { create } from 'zustand';
+import { withProxy } from 'zustand-valtio';
+
+const useCounterState = create(
+  withProxy({
+    count: 0,
+    inc() {
+      this.count++;
+    },
+  }),
+);
 
 const Counter = () => {
   const count = useCounterState((state) => state.count);
   const inc = useCounterState((state) => state.inc);
   // Or this works too
-  // const inc = () => ++useCounterState.proxyState.count;
+  // const inc = () => ++useCounterState.getProxyState().count;
   return (
     <>
       <div>Count: {count}</div>
@@ -60,6 +63,7 @@ and open <http://localhost:8080> in your web browser.
 You can also try them directly:
 [01](https://stackblitz.com/github/zustandjs/zustand-valtio/tree/main/examples/01_counter)
 [02](https://stackblitz.com/github/zustandjs/zustand-valtio/tree/main/examples/02_methods)
+[03](https://stackblitz.com/github/zustandjs/zustand-valtio/tree/main/examples/03_middleware)
 
 ## Tweets
 

diff --git a/examples/01_counter/src/app.tsx b/examples/01_counter/src/app.tsx
@@ -1,10 +1,11 @@
-import { createWithProxy } from 'zustand-valtio';
+import { create } from 'zustand';
+import { withProxy } from 'zustand-valtio';
 
-const useCounterState = createWithProxy({ count: 0 });
+const useCounterState = create(withProxy({ count: 0 }));
 
 const Counter = () => {
   const count = useCounterState((state) => state.count);
-  const inc = () => ++useCounterState.proxyState.count;
+  const inc = () => ++useCounterState.getProxyState().count;
   return (
     <>
       <div>Count: {count}</div>

diff --git a/examples/02_methods/src/app.tsx b/examples/02_methods/src/app.tsx
@@ -1,11 +1,14 @@
-import { createWithProxy } from 'zustand-valtio';
+import { create } from 'zustand';
+import { withProxy } from 'zustand-valtio';
 
-const useCounterState = createWithProxy({
-  count: 0,
-  inc() {
-    this.count++;
-  },
-});
+const useCounterState = create(
+  withProxy({
+    count: 0,
+    inc() {
+      this.count++;
+    },
+  }),
+);
 
 const Counter = () => {
   const count = useCounterState((state) => state.count);

diff --git a/examples/03_middleware/index.html b/examples/03_middleware/index.html
@@ -0,0 +1,9 @@
+<html>
+  <head>
+    <title>example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/03_middleware/package.json b/examples/03_middleware/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "example",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "react": "latest",
+    "react-dom": "latest",
+    "valtio": "latest",
+    "zustand": "latest",
+    "zustand-valtio": "latest"
+  },
+  "devDependencies": {
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "typescript": "latest",
+    "vite": "latest"
+  },
+  "scripts": {
+    "dev": "vite"
+  }
+}
diff --git a/examples/03_middleware/src/app.tsx b/examples/03_middleware/src/app.tsx
@@ -0,0 +1,36 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { withProxy } from 'zustand-valtio';
+
+const useCounterState = create(
+  persist(
+    withProxy({
+      count: 0,
+      inc() {
+        this.count++;
+      },
+    }),
+    { name: 'counter' },
+  ),
+);
+
+const Counter = () => {
+  const count = useCounterState((state) => state.count);
+  const inc = useCounterState((state) => state.inc);
+  return (
+    <>
+      <div>Count: {count}</div>
+      <button type="button" onClick={inc}>
+        +1
+      </button>
+    </>
+  );
+};
+
+const App = () => (
+  <div>
+    <Counter />
+  </div>
+);
+
+export default App;
diff --git a/examples/03_middleware/src/main.tsx b/examples/03_middleware/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './app';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/examples/03_middleware/tsconfig.json b/examples/03_middleware/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "es2018",
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "allowJs": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "jsx": "react-jsx"
+  }
+}
diff --git a/package.json b/package.json
@@ -41,7 +41,8 @@
     "test:types:examples": "tsc -p examples --noEmit",
     "test:spec": "vitest run",
     "examples:01_counter": "DIR=01_counter vite",
-    "examples:02_methods": "DIR=02_methods vite"
+    "examples:02_methods": "DIR=02_methods vite",
+    "examples:03_middleware": "DIR=03_middleware vite"
   },
   "keywords": [
     "react",
@@ -53,36 +54,34 @@
     "singleQuote": true
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^15.0.2",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/node": "^20.12.7",
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
-    "@typescript-eslint/eslint-plugin": "^7.7.0",
-    "@typescript-eslint/parser": "^7.7.0",
-    "eslint": "^8.57.0",
+    "@types/node": "^20.14.10",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
+    "eslint": "8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "happy-dom": "^14.7.1",
-    "prettier": "^3.2.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "happy-dom": "^14.12.3",
+    "prettier": "^3.3.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "ts-expect": "^1.3.0",
-    "typescript": "^5.4.5",
+    "typescript": "^5.5.3",
     "valtio": "^1.13.2",
-    "vite": "^5.2.10",
-    "vitest": "^1.5.0",
-    "zustand": "^4.5.2",
+    "vite": "^5.3.3",
+    "vitest": "^2.0.2",
+    "zustand": "^4.5.4",
     "zustand-valtio": "link:."
   },
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "valtio": ">=1.0.0",
-    "zustand": ">=4.0.0"
+    "valtio": ">=1.0.0"
   }
 }