From 283dfd31619d79eb0cfae4201c87a3b6c2e49a6b Mon Sep 17 00:00:00 2001
From: Travis Fischer <fisch0920@gmail.com>
Date: Fri, 22 Nov 2024 15:42:27 +0700
Subject: [PATCH] feat: add valtio-reactive framework

---
 package.json             |  3 ++-
 pnpm-lock.yaml           | 12 +++++++++++
 src/config.ts            |  7 ++++---
 src/frameworks/valtio.ts | 44 +++++++---------------------------------
 4 files changed, 25 insertions(+), 41 deletions(-)

diff --git a/package.json b/package.json
index b7f2206..f0235ac 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,8 @@
     "solid-js": "^1.9.3",
     "svelte": "5.2.7",
     "usignal": "^0.9.0",
-    "valtio": "^2.1.2"
+    "valtio": "^2.1.2",
+    "valtio-reactive": "^0.1.0"
   },
   "devDependencies": {
     "@types/node": "^22.9.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d195f92..306e19e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -71,6 +71,9 @@ importers:
       valtio:
         specifier: ^2.1.2
         version: 2.1.2(react@18.3.1)
+      valtio-reactive:
+        specifier: ^0.1.0
+        version: 0.1.0(valtio@2.1.2(react@18.3.1))
     devDependencies:
       '@types/node':
         specifier: ^22.9.1
@@ -1115,6 +1118,11 @@ packages:
     resolution: {integrity: sha512-CVNliz6KF2yet3HBIkbFJKZmjlt95C8dsNZDnwoS6X98+QJRpsSz9uxo3TziBqdyJQkWwfD3VG9lRzsQNvF24Q==}
     engines: {node: '>= 0.6.0'}
 
+  valtio-reactive@0.1.0:
+    resolution: {integrity: sha512-Tct50NWi/wV5/Glg5Dd+0AySjSib4JEhZ33ysduHuLImjOq8Xu8FW/Aj4ISyzEMMzzDFkUUVvD/EpHBqUtFKLg==}
+    peerDependencies:
+      valtio: '>=2.0.0'
+
   valtio@2.1.2:
     resolution: {integrity: sha512-fhekN5Rq7dvHULHHBlJeXHrQDl0Jj9GXfNavCm3gkD06crGchaG1nf/J7gSlfZU2wPcRdVS5jBKWHtE2NNz97A==}
     engines: {node: '>=12.20.0'}
@@ -1991,6 +1999,10 @@ snapshots:
 
   v8-natives@1.2.5: {}
 
+  valtio-reactive@0.1.0(valtio@2.1.2(react@18.3.1)):
+    dependencies:
+      valtio: 2.1.2(react@18.3.1)
+
   valtio@2.1.2(react@18.3.1):
     dependencies:
       proxy-compare: 3.0.1
diff --git a/src/config.ts b/src/config.ts
index df9740e..21577ab 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -16,9 +16,12 @@ import { vueReactivityFramework } from "./frameworks/vueReactivity";
 import { xReactivityFramework } from "./frameworks/xReactivity";
 import { svelteFramework } from "./frameworks/svelte";
 // import { compostateFramework } from "./frameworks/compostate";
-// import { valtioFramework } from "./frameworks/valtio";
+import { valtioFramework } from "./frameworks/valtio";
 
 export const frameworkInfo: FrameworkInfo[] = [
+  // NOTE: Valtio currently hangs on some of the `dynamic` tests, so disable it if you want to run them. (https://github.com/pmndrs/valtio/discussions/949)
+  { framework: valtioFramework },
+
   { framework: alienFramework, testPullCounts: true },
   { framework: preactSignalFramework, testPullCounts: true },
   { framework: svelteFramework, testPullCounts: true },
@@ -41,8 +44,6 @@ export const frameworkInfo: FrameworkInfo[] = [
   // { framework: compostateFramework },
   // NOTE: the kairo adapter is currently broken and unused.
   // { framework: kairoFramework, testPullCounts: true },
-  // NOTE: Valtio currently hangs on some of the `dynamic` tests, so disable it if you want to run them. (https://github.com/pmndrs/valtio/discussions/949)
-  // { framework: valtioFramework },
 ];
 
 export const perfTests: TestConfig[] = [
diff --git a/src/frameworks/valtio.ts b/src/frameworks/valtio.ts
index 32e4c87..2cf4e07 100644
--- a/src/frameworks/valtio.ts
+++ b/src/frameworks/valtio.ts
@@ -1,13 +1,8 @@
 import { ReactiveFramework } from "../util/reactiveFramework";
 import { proxy } from "valtio/vanilla";
-import { watch } from "valtio/utils";
+import { batch, computed, effect } from "valtio-reactive";
 
-// The Valtio adapter is currently not working and unused: https://github.com/pmndrs/valtio/discussions/949
-
-type WatchGet = <T extends object>(proxyObject: T) => T;
-
-// stack of watch getters because Valtio doesn't auto-track dependency reads
-let watchGet: Array<WatchGet> = [];
+// For more discussion, see: https://github.com/pmndrs/valtio/discussions/949
 
 export const valtioFramework: ReactiveFramework = {
   name: "Valtio",
@@ -16,44 +11,19 @@ export const valtioFramework: ReactiveFramework = {
     return {
       write: (v) => (s.value = v),
       read: () => {
-        const get = watchGet.at(-1);
-        if (get) {
-          return get(s).value;
-        } else {
-          return s.value;
-        }
+        return s.value;
       },
     };
   },
   computed: (fn) => {
-    const c = proxy({
-      get value() {
-        return fn();
-      },
-    });
+    const c = computed({ value: fn });
     return {
       read: () => {
-        const get = watchGet.at(-1);
-        if (get) {
-          return get(c).value;
-        } else {
-          return c.value;
-        }
+        return c.value;
       },
     };
   },
-  effect: (fn) => {
-    return watch(
-      (get) => {
-        watchGet.push(get);
-        fn();
-        watchGet.pop();
-      },
-      {
-        sync: true,
-      }
-    );
-  },
-  withBatch: (fn) => fn(),
+  effect,
+  withBatch: (fn) => batch(fn),
   withBuild: (fn) => fn(),
 };