Merge branch 'main' into atom-state-store-hook

dai-shi · web-flow · commit 725db109e180 · 2025-12-01T15:14:03.000+09:00
diff --git a/src/vanilla/internals.ts b/src/vanilla/internals.ts
@@ -528,6 +528,9 @@ const recomputeInvalidatedAtoms: RecomputeInvalidatedAtoms = (store) => {
   }
 }
 
+// Dev only
+const storeMutationSet = new WeakSet<Store>()
+
 const readAtomState: ReadAtomState = (store, atom) => {
   const buildingBlocks = getInternalBuildingBlocks(store)
   const mountedMap = buildingBlocks[1]
@@ -637,7 +640,15 @@ const readAtomState: ReadAtomState = (store, atom) => {
   }
   const prevEpochNumber = atomState.n
   try {
+    if (import.meta.env?.MODE !== 'production') {
+      storeMutationSet.delete(store)
+    }
     const valueOrPromise = atomRead(store, atom, getter, options as never)
+    if (import.meta.env?.MODE !== 'production' && storeMutationSet.has(store)) {
+      console.warn(
+        'Detected store mutation during atom read. This is not supported.',
+      )
+    }
     setAtomStateValueOrPromise(store, atom, valueOrPromise)
     if (isPromiseLike(valueOrPromise)) {
       registerAbortHandler(valueOrPromise, () => controller?.abort())
@@ -705,6 +716,9 @@ const writeAtomState: WriteAtomState = (store, atom, ...args) => {
           // NOTE technically possible but restricted as it may cause bugs
           throw new Error('atom not writable')
         }
+        if (import.meta.env?.MODE !== 'production') {
+          storeMutationSet.add(store)
+        }
         const prevEpochNumber = aState.n
         const v = args[0] as V
         setAtomStateValueOrPromise(store, a, v)
diff --git a/src/vanilla/utils/loadable.ts b/src/vanilla/utils/loadable.ts
@@ -21,51 +21,52 @@ export function loadable<Value>(anAtom: Atom<Value>): Atom<Loadable<Value>> {
       PromiseLike<Awaited<Value>>,
       Loadable<Value>
     >()
-    const refreshAtom = atom(0)
+    const refreshAtom = atom([() => {}, 0] as [() => void, number])
+    refreshAtom.unstable_onInit = (store) => {
+      store.set(refreshAtom, ([, c]) => [
+        () => store.set(refreshAtom, ([f, c]) => [f, c + 1]),
+        c,
+      ])
+    }
 
     if (import.meta.env?.MODE !== 'production') {
       refreshAtom.debugPrivate = true
     }
 
-    const derivedAtom = atom(
-      (get, { setSelf }) => {
-        get(refreshAtom)
-        let value: Value
-        try {
-          value = get(anAtom)
-        } catch (error) {
-          return { state: 'hasError', error } as Loadable<Value>
-        }
-        if (!isPromiseLike<Value>(value)) {
-          return { state: 'hasData', data: value } as Loadable<Value>
-        }
-        const promise = value
-        const cached1 = loadableCache.get(promise)
-        if (cached1) {
-          return cached1
-        }
-        promise.then(
-          (data) => {
-            loadableCache.set(promise, { state: 'hasData', data })
-            setSelf()
-          },
-          (error) => {
-            loadableCache.set(promise, { state: 'hasError', error })
-            setSelf()
-          },
-        )
+    const derivedAtom = atom((get) => {
+      const [triggerRefresh] = get(refreshAtom)
+      let value: Value
+      try {
+        value = get(anAtom)
+      } catch (error) {
+        return { state: 'hasError', error } as Loadable<Value>
+      }
+      if (!isPromiseLike<Value>(value)) {
+        return { state: 'hasData', data: value } as Loadable<Value>
+      }
+      const promise = value
+      const cached1 = loadableCache.get(promise)
+      if (cached1) {
+        return cached1
+      }
+      promise.then(
+        (data) => {
+          loadableCache.set(promise, { state: 'hasData', data })
+          triggerRefresh()
+        },
+        (error) => {
+          loadableCache.set(promise, { state: 'hasError', error })
+          triggerRefresh()
+        },
+      )
 
-        const cached2 = loadableCache.get(promise)
-        if (cached2) {
-          return cached2
-        }
-        loadableCache.set(promise, LOADING as Loadable<Value>)
-        return LOADING as Loadable<Value>
-      },
-      (_get, set) => {
-        set(refreshAtom, (c) => c + 1)
-      },
-    )
+      const cached2 = loadableCache.get(promise)
+      if (cached2) {
+        return cached2
+      }
+      loadableCache.set(promise, LOADING as Loadable<Value>)
+      return LOADING as Loadable<Value>
+    })
 
     if (import.meta.env?.MODE !== 'production') {
       derivedAtom.debugPrivate = true
diff --git a/src/vanilla/utils/unwrap.ts b/src/vanilla/utils/unwrap.ts
@@ -47,57 +47,58 @@ export function unwrap<Value, Args extends unknown[], Result, PendingValue>(
         PromiseLike<unknown>,
         Awaited<Value>
       >()
-      const refreshAtom = atom(0)
+      const refreshAtom = atom([() => {}, 0] as [() => void, number])
+      refreshAtom.unstable_onInit = (store) => {
+        store.set(refreshAtom, ([, c]) => [
+          () => store.set(refreshAtom, ([f, c]) => [f, c + 1]),
+          c,
+        ])
+      }
 
       if (import.meta.env?.MODE !== 'production') {
         refreshAtom.debugPrivate = true
       }
 
-      const promiseAndValueAtom: WritableAtom<PromiseAndValue, [], void> & {
+      const promiseAndValueAtom: Atom<PromiseAndValue> & {
         init?: undefined
-      } = atom(
-        (get, { setSelf }) => {
-          get(refreshAtom)
-          let prev: PromiseAndValue | undefined
-          try {
-            prev = get(promiseAndValueAtom) as PromiseAndValue | undefined
-          } catch {
-            // ignore previous errors to avoid getting stuck in error state
-          }
-          const promise = get(anAtom)
-          if (!isPromiseLike(promise)) {
-            return { v: promise as Awaited<Value> }
-          }
-          if (promise !== prev?.p) {
-            promise.then(
-              (v) => {
-                promiseResultCache.set(promise, v as Awaited<Value>)
-                setSelf()
-              },
-              (e) => {
-                promiseErrorCache.set(promise, e)
-                setSelf()
-              },
-            )
-          }
-          if (promiseErrorCache.has(promise)) {
-            throw promiseErrorCache.get(promise)
-          }
-          if (promiseResultCache.has(promise)) {
-            return {
-              p: promise,
-              v: promiseResultCache.get(promise) as Awaited<Value>,
-            }
+      } = atom((get) => {
+        const [triggerRefresh] = get(refreshAtom)
+        let prev: PromiseAndValue | undefined
+        try {
+          prev = get(promiseAndValueAtom) as PromiseAndValue | undefined
+        } catch {
+          // ignore previous errors to avoid getting stuck in error state
+        }
+        const promise = get(anAtom)
+        if (!isPromiseLike(promise)) {
+          return { v: promise as Awaited<Value> }
+        }
+        if (promise !== prev?.p) {
+          promise.then(
+            (v) => {
+              promiseResultCache.set(promise, v as Awaited<Value>)
+              triggerRefresh()
+            },
+            (e) => {
+              promiseErrorCache.set(promise, e)
+              triggerRefresh()
+            },
+          )
+        }
+        if (promiseErrorCache.has(promise)) {
+          throw promiseErrorCache.get(promise)
+        }
+        if (promiseResultCache.has(promise)) {
+          return {
+            p: promise,
+            v: promiseResultCache.get(promise) as Awaited<Value>,
           }
-          if (prev && 'v' in prev) {
-            return { p: promise, f: fallback(prev.v), v: prev.v }
-          }
-          return { p: promise, f: fallback() }
-        },
-        (_get, set) => {
-          set(refreshAtom, (c) => c + 1)
-        },
-      )
+        }
+        if (prev && 'v' in prev) {
+          return { p: promise, f: fallback(prev.v), v: prev.v }
+        }
+        return { p: promise, f: fallback() }
+      })
       // HACK to read PromiseAndValue atom before initialization
       promiseAndValueAtom.init = undefined
 
diff --git a/tests/vanilla/store.test.tsx b/tests/vanilla/store.test.tsx
@@ -1,5 +1,5 @@
 import { waitFor } from '@testing-library/react'
-import { assert, describe, expect, it, vi } from 'vitest'
+import { afterEach, assert, beforeEach, describe, expect, it, vi } from 'vitest'
 import { atom, createStore } from 'jotai/vanilla'
 import type { Atom, Getter, PrimitiveAtom } from 'jotai/vanilla'
 import {
@@ -49,6 +49,15 @@ const deriveStore = (
   return derivedStore
 }
 
+let savedConsoleWarn: any
+beforeEach(() => {
+  savedConsoleWarn = console.warn
+  console.warn = vi.fn()
+})
+afterEach(() => {
+  console.warn = savedConsoleWarn
+})
+
 it('should not fire on subscribe', async () => {
   const store = createStore()
   const countAtom = atom(0)
@@ -1270,3 +1279,15 @@ it('updates dependents when it eagerly recomputes dirty atoms', () => {
 
   expect(store.get(activeCountAtom)).toBe(1)
 })
+
+it('[DEV-ONLY] should warn store mutation during read', () => {
+  const store = createStore()
+  const countAtom = atom(0)
+  const derivedAtom = atom(() => {
+    store.set(countAtom, (c) => c + 1)
+  })
+  store.get(derivedAtom)
+  expect(console.warn).toHaveBeenCalledWith(
+    'Detected store mutation during atom read. This is not supported.',
+  )
+})
