From 7dcd04eff63841bc75d65ad6187f297a325e17a6 Mon Sep 17 00:00:00 2001 From: daishi Date: Sat, 28 Oct 2023 09:33:04 +0900 Subject: [PATCH 1/2] fix: importing CJS React in ESM --- src/context.ts | 26 +++++++++++++++++++------- src/react.ts | 9 ++++++--- src/react/shallow.ts | 8 +++++++- src/traditional.ts | 9 ++++++--- 4 files changed, 38 insertions(+), 14 deletions(-) diff --git a/src/context.ts b/src/context.ts index cd9cad9be6..36e70df6ba 100644 --- a/src/context.ts +++ b/src/context.ts @@ -1,15 +1,27 @@ -import { - createElement, - createContext as reactCreateContext, - useContext, - useMemo, - useRef, -} from 'react' +// import { +// createElement, +// createContext as reactCreateContext, +// useContext, +// useMemo, +// useRef, +// } from 'react' +// That doesnt work in ESM, because React libs are CJS only. +// The following is a workaround until ESM is supported. +// eslint-disable-next-line import/extensions +import ReactExports from 'react' import type { ReactNode } from 'react' import type { StoreApi } from 'zustand' // eslint-disable-next-line import/extensions import { useStoreWithEqualityFn } from 'zustand/traditional' +const { + createElement, + createContext: reactCreateContext, + useContext, + useMemo, + useRef, +} = ReactExports + type UseContextStore> = { (): ExtractState ( diff --git a/src/react.ts b/src/react.ts index c0f52d6853..1ca376b6fa 100644 --- a/src/react.ts +++ b/src/react.ts @@ -1,10 +1,12 @@ -import { useDebugValue } from 'react' +// import { useDebugValue } from 'react' // import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector' -// This doesn't work in ESM, because use-sync-external-store only exposes CJS. +// Those don't work in ESM, because React libs are CJS only. // See: https://github.com/pmndrs/valtio/issues/452 // The following is a workaround until ESM is supported. -// eslint-disable-next-line import/extensions +/* eslint-disable import/extensions */ +import ReactExports from 'react' import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector' +/* eslint-enable import/extensions */ import { createStore } from './vanilla.ts' import type { Mutate, @@ -13,6 +15,7 @@ import type { StoreMutatorIdentifier, } from './vanilla.ts' +const { useDebugValue } = ReactExports const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports type ExtractState = S extends { getState: () => infer T } ? T : never diff --git a/src/react/shallow.ts b/src/react/shallow.ts index 234f905190..98e62daeec 100644 --- a/src/react/shallow.ts +++ b/src/react/shallow.ts @@ -1,6 +1,12 @@ -import { useRef } from 'react' +// import { useDebugValue } from 'react' +// That doesnt work in ESM, because React libs are CJS only. +// The following is a workaround until ESM is supported. +// eslint-disable-next-line import/extensions +import ReactExports from 'react' import { shallow } from '../vanilla/shallow.ts' +const { useRef } = ReactExports + export function useShallow(selector: (state: S) => U): (state: S) => U { const prev = useRef() diff --git a/src/traditional.ts b/src/traditional.ts index 94e1743cc7..e284cebe17 100644 --- a/src/traditional.ts +++ b/src/traditional.ts @@ -1,10 +1,12 @@ -import { useDebugValue } from 'react' +// import { useDebugValue } from 'react' // import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector' -// This doesn't work in ESM, because use-sync-external-store only exposes CJS. +// Those don't work in ESM, because React libs are CJS only. // See: https://github.com/pmndrs/valtio/issues/452 // The following is a workaround until ESM is supported. -// eslint-disable-next-line import/extensions +/* eslint-disable import/extensions */ +import ReactExports from 'react' import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector' +/* eslint-enable import/extensions */ import { createStore } from './vanilla.ts' import type { Mutate, @@ -13,6 +15,7 @@ import type { StoreMutatorIdentifier, } from './vanilla.ts' +const { useDebugValue } = ReactExports const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports type ExtractState = S extends { getState: () => infer T } ? T : never From 5b7ff8d56bd46daadf2cbf497f8648ded5f8b387 Mon Sep 17 00:00:00 2001 From: daishi Date: Sat, 28 Oct 2023 09:54:47 +0900 Subject: [PATCH 2/2] change disable comment --- src/react.ts | 4 ++-- src/traditional.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/react.ts b/src/react.ts index 1ca376b6fa..be34b8dfcc 100644 --- a/src/react.ts +++ b/src/react.ts @@ -3,10 +3,10 @@ // Those don't work in ESM, because React libs are CJS only. // See: https://github.com/pmndrs/valtio/issues/452 // The following is a workaround until ESM is supported. -/* eslint-disable import/extensions */ +// eslint-disable-next-line import/extensions import ReactExports from 'react' +// eslint-disable-next-line import/extensions import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector' -/* eslint-enable import/extensions */ import { createStore } from './vanilla.ts' import type { Mutate, diff --git a/src/traditional.ts b/src/traditional.ts index e284cebe17..be78a438bb 100644 --- a/src/traditional.ts +++ b/src/traditional.ts @@ -3,10 +3,10 @@ // Those don't work in ESM, because React libs are CJS only. // See: https://github.com/pmndrs/valtio/issues/452 // The following is a workaround until ESM is supported. -/* eslint-disable import/extensions */ +// eslint-disable-next-line import/extensions import ReactExports from 'react' +// eslint-disable-next-line import/extensions import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector' -/* eslint-enable import/extensions */ import { createStore } from './vanilla.ts' import type { Mutate,