Merge pull request #8 from udecode/fix/react-import

Refactor react imports

.changeset/heavy-ravens-sneeze.md

@@ -0,0 +1,5 @@
+---
+'jotai-x': patch
+---
+
+Fix React imports for SSR

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<typeof Provider>;
+export type AtomProviderProps = React.ComponentProps<typeof Provider>;
 
 export { Provider as AtomProvider } from 'jotai';

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<Map<string, JotaiStore>>(new Map());
+const AtomStoreContext = React.createContext<Map<string, JotaiStore>>(
+  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 = <T extends object>({
 export const createAtomProvider = <T extends object, N extends string = ''>(
   storeScope: N,
   atoms: SimpleWritableAtomRecord<T>,
-  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<T>) => {
-    const [storeState, setStoreState] = useState<JotaiStore>(createStore());
+    const [storeState, setStoreState] =
+      React.useState<JotaiStore>(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) {

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 (
         <>

packages/jotai-x/src/createAtomStore.ts

@@ -1,11 +1,11 @@
+import React from 'react';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { useHydrateAtoms } from 'jotai/utils';
 
 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<typeof createStore>;
@@ -114,7 +114,7 @@ export type AtomStoreApi<
 > = {
   name: N;
 } & {
-  [key in keyof Record<NameProvider<N>, object>]: FC<
+  [key in keyof Record<NameProvider<N>, object>]: React.FC<
     ProviderProps<StoreInitialValues<T>>
   >;
 } & {
@@ -164,7 +164,7 @@ export interface CreateAtomStoreOptions<
 > {
   name: N;
   delay?: UseAtomOptions['delay'];
-  effect?: FC;
+  effect?: React.FC;
   extend?: (atomsWithoutExtend: StoreAtomsWithoutExtend<T>) => E;
 }
 
@@ -287,10 +287,12 @@ export const createAtomStore = <
     }
   }
 
-  const Provider: FC<ProviderProps<MyStoreInitialValues>> = createAtomProvider<
-    MyStoreInitialValues,
-    N
-  >(name, writableAtomsWithoutExtend, { effect });
+  const Provider: React.FC<ProviderProps<MyStoreInitialValues>> =
+    createAtomProvider<MyStoreInitialValues, N>(
+      name,
+      writableAtomsWithoutExtend,
+      { effect }
+    );
 
   const storeApi: StoreApi<T, E, N> = {
     atom: atoms,

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 (
       <ElementProvider element={element} scope="name">
@@ -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 (
       <ElementProvider element={element} scope="age">
@@ -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 (
       <AgeElementProvider age={age}>

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);
       }