examples/04

zustandjs · Jul 14, 2024 · 10c6729 · 10c6729
1 parent 22b1ffe
commit 10c6729
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 1 deletion.
diff --git a/examples/04_slices/index.html b/examples/04_slices/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/04_slices/package.json b/examples/04_slices/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/04_slices/src/app.tsx b/examples/04_slices/src/app.tsx
@@ -0,0 +1,67 @@
+import { create } from 'zustand';
+import { withProxy } from 'zustand-valtio';
+
+const countSlice = {
+  value: 0,
+  inc() {
+    this.value++;
+  },
+  reset() {
+    this.value = 0;
+  },
+};
+
+const textSlice = {
+  value: 'Hello',
+  updateText(newText: string) {
+    this.value = newText;
+  },
+  reset() {
+    this.value = 'Hello';
+  },
+};
+
+const useCounterState = create(
+  withProxy({
+    count: countSlice,
+    text: textSlice,
+    reset() {
+      this.count.reset();
+      this.text.reset();
+    },
+  }),
+);
+
+const Counter = () => {
+  const count = useCounterState((state) => state.count.value);
+  const inc = useCounterState((state) => state.count.inc);
+  const text = useCounterState((state) => state.text.value);
+  const updateText = useCounterState((state) => state.text.updateText);
+  const reset = useCounterState((state) => state.reset);
+  return (
+    <>
+      <p>
+        Count: {count}
+        <button type="button" onClick={inc}>
+          +1
+        </button>
+      </p>
+      <p>
+        <input value={text} onChange={(e) => updateText(e.target.value)} />
+      </p>
+      <p>
+        <button type="button" onClick={reset}>
+          Reset
+        </button>
+      </p>
+    </>
+  );
+};
+
+const App = () => (
+  <div>
+    <Counter />
+  </div>
+);
+
+export default App;
diff --git a/examples/04_slices/src/main.tsx b/examples/04_slices/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/04_slices/tsconfig.json b/examples/04_slices/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
@@ -42,7 +42,8 @@
     "test:spec": "vitest run",
     "examples:01_counter": "DIR=01_counter vite",
     "examples:02_methods": "DIR=02_methods vite",
-    "examples:03_middleware": "DIR=03_middleware vite"
+    "examples:03_middleware": "DIR=03_middleware vite",
+    "examples:04_slices": "DIR=04_slices vite"
   },
   "keywords": [
     "react",