v2 (#810)

* prepare for the next major version

* [v2] breaking: do not throw promises (#813)

* [v2] breaking: do not throw promises

* use use

* fix CI hopefully

* fix CI hopefully 2

* fix CI hopefully 3

* fix CI hopefully 4

* fix CI hopefully 5

* any type for simplicity

* [v2] breaking: do not copy initial objects (#815)

* [v2] breaking: do not copy initial objects

* fix deepClone

* refactor

* ah we need it

* deep clone

* minor fix

* breaking: require TS 4.5 at least (#817)

* TS minimal requirement v4.5

* wip: test old ts

* remove downlevel-dts

* simplify test

* simplify test 2

* simplify test 3

* wip: useMaybePromise

* wip: useMaybePromise 2

* wip: useMaybePromise 3

* rename back

* [v2] breaking: drop "module" condition (#818)

* run prettier

* [v2] breaking: require react 18 and drop use-sync-external-store (#819)

* [v2] breaking: require react 18 and drop use-sync-external-store

* drop tests pre react 18

* wip: cannot use react 17 for prd test

* drop production test which is impossible

* esm?

* fix regex

* fix sed

* [v2] breaking: remove deprecated features (#820)

* remove depreacated useProxy macro

* revert plugin-transform

* remove two more babel packages

* revert babel core

* remove proxyWithComputed

* remove addComputed

* remove devtools deprecated option

* [v2] breaking: remove derive-valtio dependency (#821)

* [v2] breaking: drop UMD/SystemJS builds and simplify babel config (#822)

* [v2] breaking: drop UMD/SystemJS builds and simplify babel config

* format

* 2.0.0-alpha.0

* run prettier

* 2.0.0-alpha.1

* simplify ts test script

* update react canary version

* remove depreacated proxyWithHistory

* 2.0.0-alpha.2

* update react canary

* [v2] export Snapshot type (#856)

* 2.0.0-beta.0

* [v2] drop es5 (#865)

* breaking: compatibility with memo (#866)

* update yarn lock

* 2.0.0-beta.1

* [v2] fix: make affected per proxy (#868)

* 2.0.0-beta.2

* [v2] fix rollup config for cjs (#873)

* 2.0.0-beta.3

* [v2] migration guide (#878)

* fix workflow file

* fix: explicit package.json type field (#882)

* 2.0.0-beta.4

* fix(react): Change to useLayoutEffect in useSnapshot (#891)

* Address spurious consistency check re-renders by using useLayoutEffect inside useSnapshot instead of useEffect

* Move regression tests for useSnapshot perf improvement to optimization test file

* Update tests/optimization.test.tsx

---------

Co-authored-by: Daishi Kato <[email protected]>

* 2.0.0-beta.5

* chore package.json

---------

Co-authored-by: Christopher Swasey <[email protected]>

Author: dai-shi

.github/workflows/test-multiple-builds.yml

@@ -13,7 +13,7 @@ jobs:
       fail-fast: false
       matrix:
         build: [cjs, esm]
-        env: [development, production]
+        env: [development] # [development, production]
     steps:
       - uses: actions/checkout@v3
       - uses: pnpm/action-setup@v2
@@ -26,10 +26,6 @@ jobs:
           cache-dependency-path: '**/pnpm-lock.yaml'
       - run: pnpm install --frozen-lockfile
       - run: pnpm build
-      - name: Use React 17 for production test
-        if: ${{ matrix.env == 'production' }}
-        run: |
-          pnpm add -D [email protected] [email protected] @testing-library/[email protected]
       - name: Patch for DEV-ONLY
         if: ${{ matrix.env == 'development' }}
         run: |
@@ -44,27 +40,13 @@ jobs:
         if: ${{ matrix.build == 'cjs' }}
         run: |
           sed -i~ "s/resolve('\.\/src\(.*\)\.ts')/resolve('\.\/dist\1.js')/" vitest.config.ts
-          sed -i~ "s/\"valtio\/vanilla\"/\"..\/..\/..\/..\/..\/..\/dist\/vanilla.js\"/" node_modules/derive-valtio/dist/index.umd.js
       - name: Patch for ESM
         if: ${{ matrix.build == 'esm' }}
         run: |
           sed -i~ "s/resolve('\.\/src\(.*\)\.ts')/resolve('\.\/dist\/esm\1.mjs')/" vitest.config.ts
           sed -i~ "1s/^/import.meta.env=import.meta.env||{};import.meta.env.MODE='${NODE_ENV}';/" tests/*.tsx
         env:
           NODE_ENV: ${{ matrix.env }}
-      - name: Patch for UMD
-        if: ${{ matrix.build == 'umd' }}
-        run: |
-          sed -i~ "s/resolve('\.\/src\(.*\)\.ts')/resolve('\.\/dist\/umd\1.${NODE_ENV}.js')/" vitest.config.ts
-          sed -i~ "s/\"valtio\/vanilla\"/\"..\/..\/..\/..\/..\/..\/dist\/umd\/vanilla.${NODE_ENV}.js\"/" node_modules/derive-valtio/dist/index.umd.js
-        env:
-          NODE_ENV: ${{ matrix.env }}
-      - name: Patch for SystemJS
-        if: ${{ matrix.build == 'system' }}
-        run: |
-          sed -i~ "s/resolve('\.\/src\(.*\)\.ts')/resolve('\.\/dist\/system\1.${NODE_ENV}.js')/" vitest.config.ts
-        env:
-          NODE_ENV: ${{ matrix.env }}
       - name: Test ${{ matrix.build }} ${{ matrix.env }}
         run: |
           pnpm test:spec

.github/workflows/test-multiple-versions.yml

@@ -29,9 +29,6 @@ jobs:
       fail-fast: false
       matrix:
         react:
-          - 16.8.0
-          - 16.9.0
-          - 17.0.0
           - 18.0.0
           - 18.1.0
           - 18.2.0

.github/workflows/test-old-typescript.yml

@@ -23,14 +23,6 @@ jobs:
           - 4.7.4
           - 4.6.4
           - 4.5.5
-          - 4.4.4
-          - 4.3.5
-          - 4.2.3
-          - 4.1.5
-          - 4.0.5
-          - 3.9.7
-          - 3.8.3
-          - 3.7.5
     steps:
       - uses: actions/checkout@v3
       - uses: pnpm/action-setup@v2
@@ -45,39 +37,12 @@ jobs:
       - run: pnpm build
       - name: Patch for Old TS
         run: |
-          sed -i~ 's/\/\/ @ts-expect-error.*\[LATEST-TS-ONLY\]//' tests/*.tsx
-          sed -i~ 's/"target":/"skipLibCheck":true,"target":/' tsconfig.json
-          sed -i~ 's/"exactOptionalPropertyTypes": true,//' tsconfig.json
           sed -i~ 's/"moduleResolution": "bundler",/"moduleResolution": "node",/' tsconfig.json
           sed -i~ 's/"allowImportingTsExtensions": true,//' tsconfig.json
-          sed -i~ 's/"valtio": \["\.\/src\/index\.ts"\],/"valtio": [".\/dist\/ts3.4\/index.d.ts"],/' tsconfig.json
-          sed -i~ 's/"valtio\/\*": \["\.\/src\/\*\.ts"\]/"valtio\/*": [".\/dist\/ts3.4\/*.d.ts"]/' tsconfig.json
+          sed -i~ 's/"valtio": \["\.\/src\/index\.ts"\],/"valtio": [".\/dist\/index.d.ts"],/' tsconfig.json
+          sed -i~ 's/"valtio\/\*": \["\.\/src\/\*\.ts"\]/"valtio\/*": [".\/dist\/*.d.ts"]/' tsconfig.json
           sed -i~ 's/"include": .*/"include": ["src\/types.d.ts", "dist\/**\/*", "tests\/**\/*"],/' tsconfig.json
-      - name: Patch for Older TS
-        if: ${{ matrix.typescript == '4.4.4' ||matrix.typescript == '4.3.5' ||  matrix.typescript == '4.2.3' || matrix.typescript == '4.1.5' ||  matrix.typescript == '4.0.5' || startsWith(matrix.typescript, '3.') }}
-        run: |
-          sed -i~ 's/import\.meta\.env/(import.meta.env as any)/' tests/*.tsx
-          sed -i~ '1s/^/import React from "react";/' tests/*.tsx
-          sed -i~ 's/"jsx": "react-jsx"/"jsx": "react"/' tsconfig.json
-          sed -i~ 's/"noUncheckedIndexedAccess": true,//' tsconfig.json
-          pnpm json -I -f package.json -e "this.resolutions={}; this.resolutions['pretty-format']='25.5.0'; this.resolutions['@types/prettier']='2.4.2'; this.resolutions['@types/yargs']='17.0.13'; this.resolutions['@types/node']='18.11.18';"
-          pnpm add -D [email protected] @types/[email protected] @types/[email protected] @types/[email protected] @types/[email protected]
-          rm -r tests/macro-vite.*
       - name: Install old TypeScript
-        run: |
-          pnpm add -D typescript@${{ matrix.typescript }}
-          rm node_modules/.pnpm/parse5@*/node_modules/parse5/dist/*.d.ts
-      - name: Patch testing setup for Old TS
-        if: ${{ matrix.typescript == '4.4.4' || matrix.typescript == '4.3.5' || matrix.typescript == '4.2.3' || matrix.typescript == '4.1.5' ||  matrix.typescript == '4.0.5' || startsWith(matrix.typescript, '3.') }}
-        run: |
-          pnpm add -D [email protected] @vitest/[email protected] @vitest/[email protected]
-      - name: Patch testing setup for older TS
-        if: ${{ matrix.typescript == '4.0.5' || startsWith(matrix.typescript, '3.') }}
-        run: |
-          pnpm add -D @testing-library/[email protected] @testing-library/[email protected]
-          rm node_modules/vitest/dist/*.d.ts
-          rm node_modules/.pnpm/@types+babel__traverse@*/node_modules/@types/babel__traverse/*.d.ts
-          echo "declare module 'vitest'" >> ./src/types.d.ts
+        run: pnpm add -D typescript@${{ matrix.typescript }}
       - name: Test ${{ matrix.typescript }}
-        run: |
-          pnpm test:types
+        run: pnpm test:types

babel.config.js

@@ -0,0 +1,83 @@
+---
+title: 'How to Migrate to v2 from v1'
+---
+
+# How to Migrate to v2 from v1
+
+## Changes in v2
+
+React 19 officially introduces the `use` hook to handle promises.
+Valtio v1 internally handled promises, which is no longer recommended.
+In Valtio v2, promises are not handled internally,
+and developers should explicitly use the `use` hook to manage promises.
+
+Valtio v2 also introduces several changes in its design choices:
+
+First, the behavior of `proxy(obj)` has changed. In v1, it was a pure function and deeply copied `obj`. In v2, it is an impure function and deeply modifies `obj`. Generally, reusing `obj` is not recommended, and if you have followed this convention, nothing will break.
+
+Second, the behavior of `useSnapshot()` has been altered. Although it is a subtle change, it is less optimized to ensure compatibility with `useMemo` and the upcoming React compiler. The change may lead to extra re-renders in some edge cases, but it might not be noticeable.
+
+Other notable changes to keep things updated and fresh include:
+
+- Removal of all deprecated features
+- Requirement of React version 18 and above
+- Requirement of TypeScript version 4.5 and above
+- The build target updated to ES2018
+
+## Migration for breaking changes
+
+### Resolving promises
+
+```js
+// v1
+import { proxy, useSnapshot } from 'valtio'
+
+const state = proxy({ data: fetch(...).then((res) => res.json()) })
+
+const Component = () => {
+  const snap = useSnapshot(state)
+  return <>{JSON.stringify(snap.data)}</>
+}
+```
+
+```js
+// v2
+import { use } from 'react'
+import { proxy, useSnapshot } from 'valtio'
+
+const state = proxy({ data: fetch(...).then((res) => res.json()) })
+
+const Component = () => {
+  const snap = useSnapshot(state)
+  return <>{JSON.stringify(use(snap.data))}</>
+  // If `data` is not an object, you can directly embed it in JSX.
+  // return <>{snap.data}</>
+}
+```
+
+### Impure `proxy(obj)`
+
+```js
+// v1
+import { proxy } from 'valtio'
+
+const state = proxy({ count: 1, obj: { text: 'hi' } })
+state.obj = { text: 'hello' }
+```
+
+```js
+// v2
+import { proxy } from 'valtio'
+import { deepClone } from 'valtio/utils'
+
+const state = proxy(deepClone({ count: 1, obj: { text: 'hi' } }))
+state.obj = deepClone({ text: 'hello' })
+```
+
+Note that `deepClone` is unnecessary unless you are reusing the object.
+It is generally recommended to avoid reusing the object.
+
+## Links
+
+- https://github.com/pmndrs/valtio/discussions/703
+- https://github.com/pmndrs/valtio/pull/810

docs/guides/migrating-to-v2.mdx

@@ -3,16 +3,27 @@
   "description": "💊 Valtio makes proxy-state simple for React and Vanilla",
   "private": true,
   "type": "commonjs",
-  "version": "1.13.2",
+  "version": "2.0.0-beta.5",
+  "publishConfig": {
+    "tag": "next"
+  },
   "main": "./index.js",
   "types": "./index.d.ts",
   "typesVersions": {
-    "<4.5": {
+    ">=4.5": {
+      "esm/*": [
+        "esm/*"
+      ],
+      "*": [
+        "*"
+      ]
+    },
+    "*": {
       "esm/*": [
-        "ts3.4/*"
+        "ts_version_4.5_and_above_is_required.d.ts"
       ],
       "*": [
-        "ts3.4/*"
+        "ts_version_4.5_and_above_is_required.d.ts"
       ]
     }
   },
@@ -23,10 +34,6 @@
         "types": "./esm/index.d.mts",
         "default": "./esm/index.mjs"
       },
-      "module": {
-        "types": "./esm/index.d.ts",
-        "default": "./esm/index.js"
-      },
       "default": {
         "types": "./index.d.ts",
         "default": "./index.js"
@@ -37,10 +44,6 @@
         "types": "./esm/*.d.mts",
         "default": "./esm/*.mjs"
       },
-      "module": {
-        "types": "./esm/*.d.ts",
-        "default": "./esm/*.js"
-      },
       "default": {
         "types": "./*.d.ts",
         "default": "./*.js"
@@ -61,9 +64,7 @@
     "build:vanilla_utils": "rollup -c --config-vanilla_utils",
     "build:react": "rollup -c --config-react",
     "build:react_utils": "rollup -c --config-react_utils",
-    "build:macro": "rollup -c --config-macro",
-    "build:macro_vite": "rollup -c --config-macro_vite",
-    "postbuild": "pnpm patch-d-ts && pnpm copy && pnpm patch-macro-vite && pnpm patch-ts3.4 && pnpm patch-esm-ts",
+    "postbuild": "pnpm patch-d-ts && pnpm copy && pnpm patch-old-ts && pnpm patch-esm-ts",
     "prettier": "prettier '*.{js,json,md}' '{src,tests,docs}/**/*.{ts,tsx,md,mdx}' --write",
     "eslint": "eslint --no-eslintrc --c .eslintrc.json --fix '*.{js,json,ts}' '{src,tests}/**/*.{ts,tsx}'",
     "test": "pnpm run '/^test:.*/'",
@@ -72,10 +73,9 @@
     "test:lint": "eslint --no-eslintrc --c .eslintrc.json '*.{js,json,ts}' '{src,tests}/**/*.{ts,tsx}'",
     "test:spec": "vitest",
     "patch-d-ts": "node -e \"var {entries}=require('./rollup.config.js');require('shelljs').find('dist/**/*.d.ts').forEach(f=>{entries.forEach(({find,replacement})=>require('shelljs').sed('-i',new RegExp(' from \\''+find.source.slice(0,-1)+'\\';$'),' from \\''+replacement+'\\';',f));require('shelljs').sed('-i',/ from '(\\.[^']+)\\.ts';$/,' from \\'\\$1\\';',f)})\"",
-    "copy": "shx cp -r dist/src/* dist/esm && shx cp -r dist/src/* dist && shx rm -rf dist/{src,tests} && downlevel-dts dist dist/ts3.4 && shx cp package.json readme.md LICENSE dist && json -I -f dist/package.json -e \"this.private=false; this.devDependencies=undefined; this.optionalDependencies=undefined; this.scripts=undefined; this.prettier=undefined;\"",
-    "patch-macro-vite": "shx cp dist/esm/macro/vite.d.ts dist/macro/ && shx cp dist/ts3.4/esm/macro/vite.d.ts dist/ts3.4/macro/",
-    "patch-ts3.4": "node -e \"require('shelljs').find('dist/ts3.4/**/*.d.ts').forEach(f=>{require('fs').appendFileSync(f,'declare type Awaited<T> = T extends Promise<infer V> ? V : T;');require('shelljs').sed('-i',/^declare type Snapshot<T> =/,'declare type Snapshot<T> = T extends SnapshotIgnore ? T : T extends Promise<unknown> ? Awaited<T> : T extends object ? { readonly [K in keyof T]: Snapshot2<T[K]> } : T; declare type Snapshot2<T> = T extends SnapshotIgnore ? T : T extends Promise<unknown> ? Awaited<T> : T extends object ? { readonly [K in keyof T]: T[K] } : T;;declare type _Snapshot<T> =',f)})\"",
-    "patch-esm-ts": "node -e \"require('shelljs').find('dist/esm/**/*.d.ts').forEach(f=>{var f2=f.replace(/\\.ts$/,'.mts');require('fs').copyFileSync(f,f2);require('shelljs').sed('-i',/ from '(\\.[^']+)';$/,' from \\'\\$1.mjs\\';',f2);require('shelljs').sed('-i',/^declare module '(\\.[^']+)'/,'declare module \\'\\$1.mjs\\'',f2)})\""
+    "copy": "shx cp -r dist/src/* dist/esm && shx cp -r dist/src/* dist && shx rm -rf dist/{src,tests} && shx cp package.json readme.md LICENSE dist && json -I -f dist/package.json -e \"this.private=false; this.devDependencies=undefined; this.optionalDependencies=undefined; this.scripts=undefined; this.prettier=undefined;\"",
+    "patch-old-ts": "shx touch dist/ts_version_4.5_and_above_is_required.d.ts",
+    "patch-esm-ts": "node -e \"require('shelljs').find('dist/esm/**/*.d.ts').forEach(f=>{var f2=f.replace(/\\.ts$/,'.mts');require('fs').renameSync(f,f2);require('shelljs').sed('-i',/ from '(\\.[^']+)';$/,' from \\'\\$1.mjs\\';',f2);require('shelljs').sed('-i',/^declare module '(\\.[^']+)'/,'declare module \\'\\$1.mjs\\'',f2)})\""
   },
   "engines": {
     "node": ">=12.20.0"
@@ -106,42 +106,22 @@
   "homepage": "https://github.com/pmndrs/valtio",
   "packageManager": "[email protected]",
   "dependencies": {
-    "derive-valtio": "0.1.0",
-    "proxy-compare": "2.6.0",
-    "use-sync-external-store": "1.2.2"
+    "proxy-compare": "^3.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.5",
-    "@babel/helper-module-imports": "^7.24.3",
-    "@babel/plugin-transform-react-jsx": "^7.23.4",
-    "@babel/plugin-transform-typescript": "^7.24.5",
-    "@babel/preset-env": "^7.24.5",
-    "@babel/types": "^7.24.5",
     "@redux-devtools/extension": "^3.3.0",
     "@rollup/plugin-alias": "^5.1.0",
-    "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
-    "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
     "@testing-library/react": "^15.0.6",
-    "@typed-macro/core": "1.0.0-alpha",
-    "@typed-macro/runtime": "1.0.0-alpha",
-    "@types/babel-plugin-macros": "^3.1.3",
-    "@types/babel-plugin-tester": "^9.0.10",
-    "@types/babel__traverse": "^7.20.5",
     "@types/jsdom": "^21.1.6",
-    "@types/react": "18.2.56",
+    "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
-    "@types/use-sync-external-store": "^0.0.6",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
     "@vitest/coverage-v8": "^1.6.0",
     "@vitest/ui": "^1.6.0",
-    "aslemammad-vite-plugin-macro": "^1.0.0",
-    "babel-plugin-macros": "^3.1.0",
-    "babel-plugin-tester": "10.1.0",
-    "downlevel-dts": "^0.11.0",
     "esbuild": "^0.20.2",
     "eslint": "8.57.0",
     "eslint-config-prettier": "^9.1.0",
@@ -157,8 +137,8 @@
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^3.2.5",
     "proxy-memoize": "^3.0.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "19.0.0-beta-1beb73de0f-20240503",
+    "react-dom": "19.0.0-beta-1beb73de0f-20240503",
     "redux": "^5.0.1",
     "rollup": "^4.17.2",
     "rollup-plugin-esbuild": "^6.1.1",
@@ -174,8 +154,8 @@
     "@types/react": "18.2.56"
   },
   "peerDependencies": {
-    "@types/react": ">=16.8",
-    "react": ">=16.8"
+    "@types/react": ">=18.0.0",
+    "react": ">=18.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {