new method for methods!

zustandjs · Apr 25, 2024 · a22b200 · a22b200
1 parent 6484ced
commit a22b200
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -49,6 +49,7 @@ and open <http://localhost:8080> in your web browser.
 
 You can also try them in codesandbox.io:
 [01](https://codesandbox.io/s/github/zustandjs/zustand-valtio/tree/main/examples/01_counter)
+[02](https://codesandbox.io/s/github/zustandjs/zustand-valtio/tree/main/examples/02_methods)
 
 ## Tweets
 

diff --git a/examples/02_methods/package.json b/examples/02_methods/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "example",
+  "version": "0.0.0",
+  "private": true,
+  "type": "commonjs",
+  "dependencies": {
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "typescript": "latest",
+    "valtio": "latest",
+    "zustand": "latest",
+    "zustand-valtio": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/examples/02_methods/public/index.html b/examples/02_methods/public/index.html
@@ -0,0 +1,8 @@
+<html>
+  <head>
+    <title>example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/examples/02_methods/src/app.tsx b/examples/02_methods/src/app.tsx
@@ -0,0 +1,29 @@
+import { createWithProxy } from 'zustand-valtio';
+
+const useCounterState = createWithProxy({
+  count: 0,
+  inc() {
+    this.count++;
+  },
+});
+
+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/02_methods/src/index.tsx b/examples/02_methods/src/index.tsx
@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './app';
+
+const ele = document.getElementById('app');
+if (ele) {
+  createRoot(ele).render(
+    <StrictMode>
+      <App />
+    </StrictMode>,
+  );
+}
diff --git a/package.json b/package.json
@@ -40,7 +40,8 @@
     "test:types": "tsc -p . --noEmit",
     "test:types:examples": "tsc -p examples --noEmit",
     "test:spec": "vitest run",
-    "examples:01_counter": "DIR=01_counter vite"
+    "examples:01_counter": "DIR=01_counter vite",
+    "examples:02_methods": "DIR=02_methods vite"
   },
   "keywords": [
     "react",

diff --git a/src/index.ts b/src/index.ts
@@ -9,6 +9,12 @@ export function createWithProxy<T extends object>(
   proxyState: T;
 } {
   const proxyState = proxy(initialObject);
+  Object.keys(proxyState as object).forEach((key) => {
+    const fn = (proxyState as Record<string, unknown>)[key];
+    if (typeof fn === 'function') {
+      (proxyState as Record<string, unknown>)[key] = fn.bind(proxyState);
+    }
+  });
   const store = createStore(() => snapshot(proxyState));
   subscribe(proxyState, () => store.setState(snapshot(proxyState), true));
   const useProxyState = <Slice>(selector: (state: Snapshot<T>) => Slice) =>