From a3e9f8e9ab85da6464014f6bf0a3c2f2d54ac4f5 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Wed, 14 Feb 2024 19:43:23 +0100 Subject: [PATCH 1/2] fix --- packages/jotai-x/src/atomProvider.ts | 4 +-- packages/jotai-x/src/createAtomProvider.tsx | 26 ++++++++----------- packages/jotai-x/src/createAtomStore.spec.tsx | 18 ++++++++----- packages/jotai-x/src/createAtomStore.ts | 16 +++++++----- packages/jotai-x/src/elementAtom.spec.tsx | 14 +++++----- packages/jotai-x/src/useHydrateStore.ts | 4 +-- 6 files changed, 42 insertions(+), 40 deletions(-) diff --git a/packages/jotai-x/src/atomProvider.ts b/packages/jotai-x/src/atomProvider.ts index 1b2219f..8ec9882 100644 --- a/packages/jotai-x/src/atomProvider.ts +++ b/packages/jotai-x/src/atomProvider.ts @@ -1,6 +1,6 @@ -import { ComponentProps } from 'react'; +import React from 'react'; import { Provider } from 'jotai'; -export type AtomProviderProps = ComponentProps; +export type AtomProviderProps = React.ComponentProps; export { Provider as AtomProvider } from 'jotai'; diff --git a/packages/jotai-x/src/createAtomProvider.tsx b/packages/jotai-x/src/createAtomProvider.tsx index efcc6d8..213d8fe 100644 --- a/packages/jotai-x/src/createAtomProvider.tsx +++ b/packages/jotai-x/src/createAtomProvider.tsx @@ -1,11 +1,4 @@ -import React, { - createContext, - FC, - useContext, - useEffect, - useMemo, - useState, -} from 'react'; +import React from 'react'; import { createStore } from 'jotai/vanilla'; import { AtomProvider, AtomProviderProps } from './atomProvider'; @@ -21,7 +14,9 @@ const getFullyQualifiedScope = (storeName: string, scope: string) => { * to reference any provider belonging to the store, regardless of scope. */ const PROVIDER_SCOPE = 'provider'; -const AtomStoreContext = createContext>(new Map()); +const AtomStoreContext = React.createContext>( + new Map() +); /** * Tries to find a store in each of the following places, in order: @@ -34,7 +29,7 @@ export const useAtomStore = ( scope: string = PROVIDER_SCOPE, warnIfUndefined: boolean = true ): JotaiStore | undefined => { - const storeContext = useContext(AtomStoreContext); + const storeContext = React.useContext(AtomStoreContext); const store = storeContext.get(getFullyQualifiedScope(storeName, scope)) ?? storeContext.get(getFullyQualifiedScope(storeName, PROVIDER_SCOPE)); @@ -82,23 +77,24 @@ export const HydrateAtoms = ({ export const createAtomProvider = ( storeScope: N, atoms: SimpleWritableAtomRecord, - options: { effect?: FC } = {} + options: { effect?: React.FC } = {} ) => { const Effect = options.effect; // eslint-disable-next-line react/display-name return ({ store, scope, children, resetKey, ...props }: ProviderProps) => { - const [storeState, setStoreState] = useState(createStore()); + const [storeState, setStoreState] = + React.useState(createStore()); - useEffect(() => { + React.useEffect(() => { if (resetKey) { setStoreState(createStore()); } }, [resetKey]); - const previousStoreContext = useContext(AtomStoreContext); + const previousStoreContext = React.useContext(AtomStoreContext); - const storeContext = useMemo(() => { + const storeContext = React.useMemo(() => { const newStoreContext = new Map(previousStoreContext); if (scope) { diff --git a/packages/jotai-x/src/createAtomStore.spec.tsx b/packages/jotai-x/src/createAtomStore.spec.tsx index 5fce47c..56465c3 100644 --- a/packages/jotai-x/src/createAtomStore.spec.tsx +++ b/packages/jotai-x/src/createAtomStore.spec.tsx @@ -1,6 +1,6 @@ import '@testing-library/jest-dom'; -import React, { ReactNode, useState } from 'react'; +import React from 'react'; import { act, queryByText, render, renderHook } from '@testing-library/react'; import { atom, PrimitiveAtom, useAtomValue } from 'jotai'; import { splitAtom } from 'jotai/utils'; @@ -54,8 +54,8 @@ describe('createAtomStore', () => { const MUTABLE_PROVIDER_INITIAL_AGE = 19; const MUTABLE_PROVIDER_NEW_AGE = 20; - const MutableProvider = ({ children }: { children: ReactNode }) => { - const [age, setAge] = useState(MUTABLE_PROVIDER_INITIAL_AGE); + const MutableProvider = ({ children }: { children: React.ReactNode }) => { + const [age, setAge] = React.useState(MUTABLE_PROVIDER_INITIAL_AGE); return ( <> @@ -71,8 +71,12 @@ describe('createAtomStore', () => { ); }; - const BecomeFriendsProvider = ({ children }: { children: ReactNode }) => { - const [becameFriends, setBecameFriends] = useState(false); + const BecomeFriendsProvider = ({ + children, + }: { + children: React.ReactNode; + }) => { + const [becameFriends, setBecameFriends] = React.useState(false); return ( <> @@ -107,7 +111,7 @@ describe('createAtomStore', () => { const BecomeFriendsSetter = () => { const setBecomeFriends = useMyTestStoreStore().set.becomeFriends(); - const [becameFriends, setBecameFriends] = useState(false); + const [becameFriends, setBecameFriends] = React.useState(false); return ( <> @@ -125,7 +129,7 @@ describe('createAtomStore', () => { const BecomeFriendsUser = () => { const [, setBecomeFriends] = useMyTestStoreStore().use.becomeFriends(); - const [becameFriends, setBecameFriends] = useState(false); + const [becameFriends, setBecameFriends] = React.useState(false); return ( <> diff --git a/packages/jotai-x/src/createAtomStore.ts b/packages/jotai-x/src/createAtomStore.ts index 7ea8217..c52c764 100644 --- a/packages/jotai-x/src/createAtomStore.ts +++ b/packages/jotai-x/src/createAtomStore.ts @@ -1,3 +1,4 @@ +import React from 'react'; import { useAtom, useAtomValue, useSetAtom } from 'jotai'; import { useHydrateAtoms } from 'jotai/utils'; @@ -5,7 +6,6 @@ import { atomWithFn } from './atomWithFn'; import { createAtomProvider, useAtomStore } from './createAtomProvider'; import type { ProviderProps } from './createAtomProvider'; -import type { FC } from 'react'; import type { Atom, createStore, WritableAtom } from 'jotai/vanilla'; export type JotaiStore = ReturnType; @@ -114,7 +114,7 @@ export type AtomStoreApi< > = { name: N; } & { - [key in keyof Record, object>]: FC< + [key in keyof Record, object>]: React.FC< ProviderProps> >; } & { @@ -164,7 +164,7 @@ export interface CreateAtomStoreOptions< > { name: N; delay?: UseAtomOptions['delay']; - effect?: FC; + effect?: React.FC; extend?: (atomsWithoutExtend: StoreAtomsWithoutExtend) => E; } @@ -287,10 +287,12 @@ export const createAtomStore = < } } - const Provider: FC> = createAtomProvider< - MyStoreInitialValues, - N - >(name, writableAtomsWithoutExtend, { effect }); + const Provider: React.FC> = + createAtomProvider( + name, + writableAtomsWithoutExtend, + { effect } + ); const storeApi: StoreApi = { atom: atoms, diff --git a/packages/jotai-x/src/elementAtom.spec.tsx b/packages/jotai-x/src/elementAtom.spec.tsx index 9f39037..22fb729 100644 --- a/packages/jotai-x/src/elementAtom.spec.tsx +++ b/packages/jotai-x/src/elementAtom.spec.tsx @@ -1,6 +1,6 @@ import '@testing-library/jest-dom'; -import React, { ReactNode, useMemo, useState } from 'react'; +import React from 'react'; import { act, render } from '@testing-library/react'; import { createAtomStore } from './createAtomStore'; @@ -63,9 +63,9 @@ describe('ElementProvider', () => { children, }: { name: string; - children: ReactNode; + children: React.ReactNode; }) => { - const element = useMemo(() => makeNameElement(name), [name]); + const element = React.useMemo(() => makeNameElement(name), [name]); return ( @@ -79,9 +79,9 @@ describe('ElementProvider', () => { children, }: { age: number; - children: ReactNode; + children: React.ReactNode; }) => { - const element = useMemo(() => makeAgeElement(age), [age]); + const element = React.useMemo(() => makeAgeElement(age), [age]); return ( @@ -99,9 +99,9 @@ describe('ElementProvider', () => { initialAge: number; increment: number; buttonLabel: string; - children: ReactNode; + children: React.ReactNode; }) => { - const [age, setAge] = useState(initialAge); + const [age, setAge] = React.useState(initialAge); return ( diff --git a/packages/jotai-x/src/useHydrateStore.ts b/packages/jotai-x/src/useHydrateStore.ts index 8af7ffe..138ce50 100644 --- a/packages/jotai-x/src/useHydrateStore.ts +++ b/packages/jotai-x/src/useHydrateStore.ts @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import React from 'react'; import { useSetAtom } from 'jotai'; import { useHydrateAtoms } from 'jotai/utils'; @@ -43,7 +43,7 @@ export const useSyncStore = ( const set = useSetAtom(atom, { store }); - useEffect(() => { + React.useEffect(() => { if (value !== undefined && value !== null) { set(value); } From 680cf7c1daf7f4ae67e98d10a61b7acc26dcca87 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Wed, 14 Feb 2024 19:53:01 +0100 Subject: [PATCH 2/2] fix --- .changeset/heavy-ravens-sneeze.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/heavy-ravens-sneeze.md diff --git a/.changeset/heavy-ravens-sneeze.md b/.changeset/heavy-ravens-sneeze.md new file mode 100644 index 0000000..da99796 --- /dev/null +++ b/.changeset/heavy-ravens-sneeze.md @@ -0,0 +1,5 @@ +--- +'jotai-x': patch +--- + +Fix React imports for SSR