From 10c6729819868c3e59315cd5c7b7e8fd709bb2c2 Mon Sep 17 00:00:00 2001 From: daishi Date: Sun, 14 Jul 2024 21:42:04 +0900 Subject: [PATCH] examples/04 --- examples/04_slices/index.html | 9 +++++ examples/04_slices/package.json | 22 +++++++++++ examples/04_slices/src/app.tsx | 67 ++++++++++++++++++++++++++++++++ examples/04_slices/src/main.tsx | 10 +++++ examples/04_slices/tsconfig.json | 14 +++++++ package.json | 3 +- 6 files changed, 124 insertions(+), 1 deletion(-) create mode 100644 examples/04_slices/index.html create mode 100644 examples/04_slices/package.json create mode 100644 examples/04_slices/src/app.tsx create mode 100644 examples/04_slices/src/main.tsx create mode 100644 examples/04_slices/tsconfig.json diff --git a/examples/04_slices/index.html b/examples/04_slices/index.html new file mode 100644 index 0000000..ec005a3 --- /dev/null +++ b/examples/04_slices/index.html @@ -0,0 +1,9 @@ + + + example + + +
+ + + diff --git a/examples/04_slices/package.json b/examples/04_slices/package.json new file mode 100644 index 0000000..12e720a --- /dev/null +++ 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 new file mode 100644 index 0000000..60ca1c0 --- /dev/null +++ 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 ( + <> +

+ Count: {count} + +

+

+ updateText(e.target.value)} /> +

+

+ +

+ + ); +}; + +const App = () => ( +
+ +
+); + +export default App; diff --git a/examples/04_slices/src/main.tsx b/examples/04_slices/src/main.tsx new file mode 100644 index 0000000..1a72c01 --- /dev/null +++ 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( + + + , +); diff --git a/examples/04_slices/tsconfig.json b/examples/04_slices/tsconfig.json new file mode 100644 index 0000000..f9e0a7e --- /dev/null +++ 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 index f60c185..d5948ae 100644 --- 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",