[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

Author: dai-shi

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

@@ -12,8 +12,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        build: [cjs, umd] # [cjs, esm, umd, system]
-        env: [development, production]
+        build: [cjs, esm, umd] # [cjs, esm, umd, system]
+        env: [development] # [development, production]
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
@@ -23,10 +23,6 @@ jobs:
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
       - run: yarn install --frozen-lockfile --check-files
       - run: yarn build
-      - name: Use React 17 for production test
-        if: ${{ matrix.env == 'production' }}
-        run: |
-          yarn add -D [email protected] [email protected] @testing-library/[email protected]
       - name: Patch for DEV-ONLY
         if: ${{ matrix.env == 'development' }}
         run: |
@@ -44,8 +40,8 @@ jobs:
       - name: Patch for ESM
         if: ${{ matrix.build == 'esm' }}
         run: |
-          sed -i~ "s/<rootDir>\/src\(.*\)\.ts/<rootDir>\/dist\/esm\1.js" package.json
-          sed -i~ "1s/^/import.meta.env=import.meta.env||{};import.meta.env.MODE='${NODE_ENV}';/" tests.ts tests/*.tsx
+          sed -i~ "s/<rootDir>\/src\(.*\)\.ts/<rootDir>\/dist\/esm\1.js/" package.json
+          sed -i~ "1s/^/import.meta.env=import.meta.env||{};import.meta.env.MODE='${NODE_ENV}';/" tests/*.ts tests/*.tsx
         env:
           NODE_ENV: ${{ matrix.env }}
       - name: Patch for UMD

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

@@ -27,9 +27,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

package.json

@@ -108,8 +108,7 @@
   "homepage": "https://github.com/pmndrs/valtio",
   "dependencies": {
     "proxy-compare": "2.5.1",
-    "derive-valtio": "0.1.0",
-    "use-sync-external-store": "1.2.0"
+    "derive-valtio": "0.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",
@@ -130,7 +129,6 @@
     "@types/jsdom": "^21.1.4",
     "@types/react": "^18.2.34",
     "@types/react-dom": "^18.2.14",
-    "@types/use-sync-external-store": "^0.0.5",
     "@typescript-eslint/eslint-plugin": "^6.9.1",
     "@typescript-eslint/parser": "^6.9.1",
     "@vitest/coverage-v8": "0.33.0",
@@ -166,8 +164,8 @@
     "vitest": "0.33.0"
   },
   "peerDependencies": {
-    "@types/react": ">=16.8",
-    "react": ">=16.8"
+    "@types/react": ">=18.0",
+    "react": ">=18.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {

rollup.config.js

@@ -72,8 +72,6 @@ function createESMConfig(input, output) {
               'import.meta.env?.MODE':
                 '(import.meta.env ? import.meta.env.MODE : undefined)',
             }),
-        // a workround for #410
-        'use-sync-external-store/shim': 'use-sync-external-store/shim/index.js',
         delimiters: ['\\b', '\\b(?!(\\.|/))'],
         preventAssignment: true,
       }),

src/react.ts

@@ -1,20 +1,19 @@
-import { useCallback, useDebugValue, useEffect, useMemo, useRef } from 'react'
+import {
+  useCallback,
+  useDebugValue,
+  useEffect,
+  useMemo,
+  useRef,
+  useSyncExternalStore,
+} from 'react'
 import {
   affectedToPathList,
   createProxy as createProxyToCompare,
   isChanged,
 } from 'proxy-compare'
-// import { useSyncExternalStore } from 'use-sync-external-store/shim'
-// This doesn't work in ESM, because use-sync-external-store only exposes CJS.
-// See: https://github.com/pmndrs/valtio/issues/452
-// The following is a workaround until ESM is supported.
-// eslint-disable-next-line import/extensions
-import useSyncExternalStoreExports from 'use-sync-external-store/shim'
 import { snapshot, subscribe } from './vanilla.ts'
 import type { INTERNAL_Snapshot as Snapshot } from './vanilla.ts'
 
-const { useSyncExternalStore } = useSyncExternalStoreExports
-
 const useAffectedDebugValue = (
   state: object,
   affected: WeakMap<object, unknown>,

yarn.lock

@@ -1691,11 +1691,6 @@
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.4.tgz#cf2f0c7c51b985b6afecea73eb2cd65421ecb717"
   integrity sha512-95Sfz4nvMAb0Nl9DTxN3j64adfwfbBPEYq14VN7zT5J5O2M9V6iZMIIQU1U+pJyl9agHYHNCqhCXgyEtIRRa5A==
 
-"@types/use-sync-external-store@^0.0.5":
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.5.tgz#a4416edea87d78115c8339f668775c5ba102653d"
-  integrity sha512-+fHc7rdrgMIng29ISUqNjsbPl1EMo1PCDh/+16HNlTOJeQzs6c9Om23rVizETd3dDx4YM+aWGbyF/KP4FUwZyg==
-
 "@typescript-eslint/eslint-plugin@^6.9.1":
   version "6.9.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.9.1.tgz#d8ce497dc0ed42066e195c8ecc40d45c7b1254f4"
@@ -5051,11 +5046,6 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
-[email protected]:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
-  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
-
 v8-to-istanbul@^9.1.0:
   version "9.1.3"
   resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-9.1.3.tgz#ea456604101cd18005ac2cae3cdd1aa058a6306b"