chore: merge next/v1.3.x branch (#117)

@affects atoms, react
Omnistac · Sep 17, 2024 · b79f36a · b79f36a
1 parent b157917
commit b79f36a
Show file tree

Hide file tree

Showing 23 changed files with 407 additions and 241 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Tests",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "yarn",
+      "args": ["jest", "--runInBand"],
+      "console": "integratedTerminal",
+      "cwd": "${workspaceRoot}",
+      "internalConsoleOptions": "neverOpen"
+    },
+  ]
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,23 @@
+## v1.3.0-rc.2 (Jul 31, 2024)
+
+### Fixes:
+
+- `react`: only rerun `useAtomSelector` effect on cache id change (#110)
+
+## v1.3.0-rc.1 (Jul 30, 2024)
+
+### Fixes:
+
+- `react`: restore `useAtomSelector` mounted state when swapping inline refs (#108)
+
+## v1.3.0-rc.0 (Jul 30, 2024)
+
+This version contains huge fixes for `useAtomSelector` that are only fully compatible with React 19 or with React 18 when not using StrictMode. It's recommended to wait for React 19 before upgrading to this version.
+
+### Fixes:
+
+- `atoms`, `react`: optimize `useAtomSelector` for React 19 (#106)
+
 ## v1.2.3 (Sep 7, 2024)
 
 ### Fixes:

diff --git a/jest.setup.ts b/jest.setup.ts
@@ -1 +1,36 @@
 import '@testing-library/jest-dom/extend-expect'
+
+let callstacks: Record<string, string> = {}
+let id = 0
+
+afterEach(() => {
+  callstacks = {}
+  id = 0
+})
+
+const generateId = () => {
+  const stack =
+    (new Error().stack || '')
+      .split('\n')
+      .find(line => /\.test\.tsx:/.test(line)) || ''
+
+  return (callstacks[stack] ||= `:r${id++}:`)
+}
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useId: generateId,
+}))
+
+// React's `useId` gives new ids in the same callstack when a component tree is
+// destroyed/unmounted. Call this to manually force ids to be recreated in tests
+// to mimic React's behavior.
+;(globalThis as any).clearUseIdEntry = (idNum: number) => {
+  const key = Object.keys(callstacks).find(
+    key => callstacks[key] === `:r${idNum}:`
+  )
+
+  if (key) {
+    delete callstacks[key]
+  }
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "zedux",
-  "version": "1.2.3",
+  "version": "1.3.0-rc.2",
   "description": "A Molecular State Engine for React",
   "type": "module",
   "author": "Joshua Claunch (bowheart <[email protected]>)",

diff --git a/packages/atoms/package.json b/packages/atoms/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@zedux/atoms",
-  "version": "1.2.3",
+  "version": "1.3.0-rc.2",
   "description": "A Molecular State Engine for React",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -10,7 +10,7 @@
     "url": "https://github.com/Omnistac/zedux/issues"
   },
   "dependencies": {
-    "@zedux/core": "^1.2.3"
+    "@zedux/core": "^1.3.0-rc.2"
   },
   "exports": {
     ".": {

diff --git a/packages/atoms/src/classes/Selectors.ts b/packages/atoms/src/classes/Selectors.ts
@@ -48,18 +48,6 @@ export class Selectors {
    */
   public _refBaseKeys = new WeakMap<AtomSelectorOrConfig<any, any>, string>()
 
-  /**
-   * Used to work around React double-renders and double-effects.
-   */
-  public _storage: Record<
-    string,
-    {
-      cache?: SelectorCache
-      ignorePhase?: number
-      timeoutId?: ReturnType<typeof requestIdleCallback | typeof setTimeout>
-    }
-  > = {}
-
   constructor(private readonly ecosystem: Ecosystem) {}
 
   public addDependent(
@@ -182,9 +170,8 @@ export class Selectors {
       args as Args,
       true
     )
-    if (!id) return
 
-    return this._items[id]
+    return id && this._items[id]
   }
 
   /**
@@ -369,20 +356,19 @@ export class Selectors {
   /**
    * Should only be used internally
    */
-  public _swapRefs(
-    oldRef: AtomSelectorOrConfig<any, any[]>,
-    newRef: AtomSelectorOrConfig<any, any[]>,
+  public _swapRefs<T, Args extends any[]>(
+    oldCache: SelectorCache<T, Args>,
+    newRef: AtomSelectorOrConfig<T, Args>,
     args: any[] = []
   ) {
-    const existingCache = this.find(oldRef, args)
-    const baseKey = this._refBaseKeys.get(oldRef)
+    const baseKey = this._refBaseKeys.get(oldCache.selectorRef)
 
-    if (!existingCache || !baseKey) return
+    if (!baseKey) return
 
     this._refBaseKeys.set(newRef, baseKey)
-    this._refBaseKeys.delete(oldRef)
-    existingCache.selectorRef = newRef
-    this.runSelector(existingCache.id, args)
+    this._refBaseKeys.delete(oldCache.selectorRef)
+    oldCache.selectorRef = newRef
+    this.runSelector(oldCache.id, args, false, true)
   }
 
   /**
@@ -395,7 +381,6 @@ export class Selectors {
     })
 
     this._refBaseKeys = new WeakMap()
-    this._storage = {}
   }
 
   /**
@@ -429,7 +414,8 @@ export class Selectors {
   private runSelector<T = any, Args extends any[] = []>(
     id: string,
     args: Args,
-    isInitializing?: boolean
+    isInitializing?: boolean,
+    skipNotifyingDependents?: boolean
   ) {
     const { _evaluationStack, _graph, _mods, modBus } = this.ecosystem
     _graph.bufferUpdates(id)
@@ -451,7 +437,9 @@ export class Selectors {
       const result = selector(_evaluationStack.atomGetters, ...args)
 
       if (!isInitializing && !resultsComparator(result, cache.result as T)) {
-        _graph.scheduleDependents(id, cache.nextReasons, result, cache.result)
+        if (!skipNotifyingDependents) {
+          _graph.scheduleDependents(id, cache.nextReasons, result, cache.result)
+        }
 
         if (_mods.stateChanged) {
           modBus.dispatch(

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@zedux/core",
-  "version": "1.2.3",
+  "version": "1.3.0-rc.2",
   "description": "A high-level, declarative, composable form of Redux",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",

diff --git a/packages/immer/package.json b/packages/immer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@zedux/immer",
-  "version": "1.2.3",
+  "version": "1.3.0-rc.2",
   "description": "Official Immer integration for Zedux's store and atomic APIs",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -10,7 +10,7 @@
     "url": "https://github.com/Omnistac/zedux/issues"
   },
   "devDependencies": {
-    "@zedux/atoms": "^1.2.3",
+    "@zedux/atoms": "^1.3.0-rc.2",
     "immer": "^9.0.21"
   },
   "exports": {
@@ -41,7 +41,7 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "@zedux/atoms": "^1.2.3",
+    "@zedux/atoms": "^1.3.0-rc.2",
     "immer": ">=9.0.19"
   },
   "repository": {

diff --git a/packages/machines/package.json b/packages/machines/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@zedux/machines",
-  "version": "1.2.3",
+  "version": "1.3.0-rc.2",
   "description": "Simple native state machine implementation for Zedux atoms",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -10,7 +10,7 @@
     "url": "https://github.com/Omnistac/zedux/issues"
   },
   "devDependencies": {
-    "@zedux/atoms": "^1.2.3"
+    "@zedux/atoms": "^1.3.0-rc.2"
   },
   "exports": {
     ".": {
@@ -41,7 +41,7 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "@zedux/atoms": "^1.2.3"
+    "@zedux/atoms": "^1.3.0-rc.2"
   },
   "repository": {
     "directory": "packages/machines",

diff --git a/packages/machines/test/integrations/state-machines.test.tsx b/packages/machines/test/integrations/state-machines.test.tsx
@@ -3,7 +3,7 @@ import {
   InjectMachineStoreParams,
   MachineState,
 } from '@zedux/machines'
-import { api, atom } from '@zedux/react'
+import { api, atom } from '@zedux/atoms'
 import { ecosystem } from '../../../react/test/utils/ecosystem'
 
 const injectMachine = <

diff --git a/packages/machines/test/snippets/api.tsx b/packages/machines/test/snippets/api.tsx
@@ -5,7 +5,7 @@ import {
   ion,
   useAtomSelector,
   useAtomValue,
-} from '@zedux/react'
+} from '../../../react/src'
 import { injectMachineStore } from '@zedux/machines'
 import React, { Suspense, useState } from 'react'
 

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@zedux/react",
-  "version": "1.2.3",
+  "version": "1.3.0-rc.2",
   "description": "A Molecular State Engine for React",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -10,14 +10,15 @@
     "url": "https://github.com/Omnistac/zedux/issues"
   },
   "dependencies": {
-    "@zedux/atoms": "^1.2.3"
+    "@zedux/atoms": "^1.3.0-rc.2"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@types/react-dom": "^18.0.11",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@testing-library/react": "^16.0.1",
+    "@types/react-dom": "^18.3.0",
+    "react": "^19.0.0-rc-ee1a403a-20240916",
+    "react-dom": "^19.0.0-rc-ee1a403a-20240916"
   },
   "exports": {
     ".": {
@@ -55,7 +56,7 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "react": ">=18.0.0"
+    "react": ">=19.0.0"
   },
   "repository": {
     "directory": "packages/react",

diff --git a/packages/react/src/hooks/useAtomInstance.ts b/packages/react/src/hooks/useAtomInstance.ts
@@ -117,8 +117,12 @@ export const useAtomInstance: {
     }
 
     return () => {
-      // no need to set the "ref"'s `.mounted` property to false here
+      // remove the edge immediately - no need for a delay here. When StrictMode
+      // double-invokes (invokes, then cleans up, then re-invokes) this effect,
+      // it's expected that any `ttl: 0` atoms get destroyed and recreated -
+      // that's part of what StrictMode is ensuring
       ecosystem._graph.removeEdge(dependentKey, instance.id)
+      // no need to set `render.mounted` to false here
     }
   }, [instance.id])