feat(jotai): escape version 0 (#1205)

# Overview

The changes were not significant, so I included them in a single PR. If
you think the PR title is inappropriate, please feel free to change it.

- Improve type inference for atom
- Improved to ensure the same type inference as the original Jotai
package.
- Add test cases
- Remove experimental tag
  - in suspensive.org docs
  - in jotai interface

I have tested in the local environment to ensure that it behaves the
same as Jotai (across all features). Fortunately, it works well, and I
believe it is production-ready, just like Jotai.

With these improvements, I think the Jotai package is ready to be
released as version `1.0.0`.

## PR Checklist

- [x] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md)
2. I added documents and tests.

---------

Co-authored-by: Jonghyeon Ko <[email protected]>

Author: gwansikk

.changeset/config.json

@@ -8,7 +8,8 @@
       "@suspensive/react",
       "@suspensive/react-query",
       "@suspensive/react-query-4",
-      "@suspensive/react-query-5"
+      "@suspensive/react-query-5",
+      "@suspensive/jotai"
     ]
   ],
   "ignore": [

.changeset/gentle-moles-wink.md

@@ -0,0 +1,5 @@
+---
+"@suspensive/jotai": minor
+---
+
+feat(jotai): escape version 0

docs/suspensive.org/src/pages/docs/jotai/Atom.en.mdx

@@ -2,12 +2,6 @@ import { Callout } from '@/components'
 
 # Atom
 
-<Callout type='experimental'>
-
-`<Atom/>` is an experimental feature, so this interface may change.
-
-</Callout>
-
 The Atom component provides an interface similar to Jotai's [useAtom](https://jotai.org/docs/core/use-atom#useatom) hook as props, allowing declarative usage.
 
 ### props.atom

docs/suspensive.org/src/pages/docs/jotai/Atom.ko.mdx

@@ -2,12 +2,6 @@ import { Callout } from '@/components'
 
 # Atom
 
-<Callout type='experimental'>
-
-`<Atom/>`는 실험 기능이므로 이 인터페이스는 변경될 수 있습니다.
-
-</Callout>
-
 Atom 컴포넌트는 Jotai의 [useAtom](https://jotai.org/docs/core/use-atom#useatom) 훅과 동일한 인터페이스를 Props로 제공하며 선언적으로 사용할 수 있습니다.
 
 ### props.atom

docs/suspensive.org/src/pages/docs/jotai/AtomValue.en.mdx

@@ -2,12 +2,6 @@ import { Callout } from '@/components'
 
 # AtomValue
 
-<Callout type='experimental'>
-
-`<AtomValue/>` is an experimental feature, so this interface may change.
-
-</Callout>
-
 The AtomValue component provides an interface similar to Jotai's [useAtomValue](https://jotai.org/docs/core/use-atom#useatomvalue) hook as props, allowing declarative usage.
 
 ### props.atom

docs/suspensive.org/src/pages/docs/jotai/AtomValue.ko.mdx

@@ -2,12 +2,6 @@ import { Callout } from '@/components'
 
 # AtomValue
 
-<Callout type='experimental'>
-
-`<AtomValue/>`는 실험 기능이므로 이 인터페이스는 변경될 수 있습니다.
-
-</Callout>
-
 AtomValue 컴포넌트는 Jotai의 [useAtomValue](https://jotai.org/docs/core/use-atom#useatomvalue) 훅과 동일한 인터페이스를 Props로 제공하며 선언적으로 사용할 수 있습니다.
 
 ### props.atom

docs/suspensive.org/src/pages/docs/jotai/SetAtom.en.mdx

@@ -2,12 +2,6 @@ import { Callout } from '@/components'
 
 # SetAtom
 
-<Callout type='experimental'>
-
-`<SetAtom/>` is an experimental feature, so this interface may change.
-
-</Callout>
-
 The SetAtom component provides an interface similar to Jotai's [useSetAtom](https://jotai.org/docs/core/use-atom#usesetatom) hook as props, allowing declarative usage.
 
 ### props.atom

docs/suspensive.org/src/pages/docs/jotai/SetAtom.ko.mdx

@@ -2,12 +2,6 @@ import { Callout } from '@/components'
 
 # SetAtom
 
-<Callout type='experimental'>
-
-`<SetAtom/>`는 실험 기능이므로 이 인터페이스는 변경될 수 있습니다.
-
-</Callout>
-
 SetAtom 컴포넌트는 Jotai의 [useSetAtom](https://jotai.org/docs/core/use-atom#usesetatom) 훅과 동일한 인터페이스를 Props로 제공하며 선언적으로 사용할 수 있습니다.
 
 ### props.atom

packages/jotai/src/Atom.test-d.tsx

@@ -1,13 +1,16 @@
 import { atom, useAtom } from 'jotai'
+import { loadable } from 'jotai/utils'
 import type { ReactNode } from 'react'
 import { Atom } from './Atom'
 
 const countAtom = atom(0)
+const readOnlyCountAtom = atom((get) => get(countAtom))
+const writeOnlyCountAtom = atom(null, (get, set) => set(countAtom, get(countAtom) + 1))
 const asyncAtom = atom(async () => Promise.resolve('string'))
-// eslint-disable-next-line @typescript-eslint/require-await
 const asyncIncrementAtom = atom(null, async (get, set) => {
   set(countAtom, get(countAtom) + 1)
 })
+const loadableAtom = loadable(asyncAtom)
 
 describe('<Atom/>', () => {
   it('type check', () => {
@@ -20,6 +23,24 @@ describe('<Atom/>', () => {
         }}
       </Atom>
     )
+    ;() => (
+      <Atom atom={readOnlyCountAtom}>
+        {(result) => {
+          const returnOfJotai = useAtom(readOnlyCountAtom)
+          expectTypeOf(result).toEqualTypeOf<typeof returnOfJotai>()
+          return <></>
+        }}
+      </Atom>
+    )
+    ;() => (
+      <Atom atom={writeOnlyCountAtom}>
+        {(result) => {
+          const returnOfJotai = useAtom(writeOnlyCountAtom)
+          expectTypeOf(result).toEqualTypeOf<typeof returnOfJotai>()
+          return <></>
+        }}
+      </Atom>
+    )
     ;() => (
       <Atom atom={asyncAtom}>
         {(result) => {
@@ -38,12 +59,27 @@ describe('<Atom/>', () => {
         }}
       </Atom>
     )
+    ;() => (
+      <Atom atom={loadableAtom}>
+        {(result) => {
+          const returnOfJotai = useAtom(loadableAtom)
+          expectTypeOf(result).toEqualTypeOf<typeof returnOfJotai>()
+          return <></>
+        }}
+      </Atom>
+    )
 
     expectTypeOf(<Atom atom={countAtom}>{() => <></>}</Atom>).toEqualTypeOf<JSX.Element>()
     expectTypeOf(<Atom atom={countAtom}>{() => <></>}</Atom>).not.toEqualTypeOf<ReactNode>()
+    expectTypeOf(<Atom atom={readOnlyCountAtom}>{() => <></>}</Atom>).toEqualTypeOf<JSX.Element>()
+    expectTypeOf(<Atom atom={readOnlyCountAtom}>{() => <></>}</Atom>).not.toEqualTypeOf<ReactNode>()
+    expectTypeOf(<Atom atom={writeOnlyCountAtom}>{() => <></>}</Atom>).toEqualTypeOf<JSX.Element>()
+    expectTypeOf(<Atom atom={writeOnlyCountAtom}>{() => <></>}</Atom>).not.toEqualTypeOf<ReactNode>()
     expectTypeOf(<Atom atom={asyncAtom}>{() => <></>}</Atom>).toEqualTypeOf<JSX.Element>()
     expectTypeOf(<Atom atom={asyncAtom}>{() => <></>}</Atom>).not.toEqualTypeOf<ReactNode>()
     expectTypeOf(<Atom atom={asyncIncrementAtom}>{() => <></>}</Atom>).toEqualTypeOf<JSX.Element>()
     expectTypeOf(<Atom atom={asyncIncrementAtom}>{() => <></>}</Atom>).not.toEqualTypeOf<ReactNode>()
+    expectTypeOf(<Atom atom={loadableAtom}>{() => <></>}</Atom>).toEqualTypeOf<JSX.Element>()
+    expectTypeOf(<Atom atom={loadableAtom}>{() => <></>}</Atom>).not.toEqualTypeOf<ReactNode>()
   })
 })

packages/jotai/src/Atom.tsx

@@ -12,71 +12,60 @@ import {
   useSetAtom,
 } from 'jotai'
 import type { ReactNode } from 'react'
-import type { ChildrenRenderProps } from './utility-types'
-type UseAtomProps<TAtom extends JotaiAtom<unknown>> = {
+import type { ChildrenRenderProps, SetAtom } from './utility-types'
+
+type UseAtomProps<TAtom extends Parameters<typeof useAtom>[0]> = {
   atom: TAtom
   options?: Parameters<typeof useAtom>[1]
 }
 
-/**
- * @experimental This is experimental feature.
- */
 export function Atom<TValue, TArgs extends unknown[], TResult>({
   children,
   atom,
   options,
 }: UseAtomProps<WritableAtom<TValue, TArgs, TResult>> &
-  ChildrenRenderProps<[Awaited<TValue>, (...args: TArgs) => TResult]>): ReactNode
+  ChildrenRenderProps<[Awaited<TValue>, SetAtom<TArgs, TResult>]>): ReactNode
 
-/**
- * @experimental This is experimental feature.
- */
 export function Atom<TValue>({
   children,
   atom,
   options,
 }: UseAtomProps<PrimitiveAtom<TValue>> &
-  ChildrenRenderProps<[Awaited<TValue>, (...args: [SetStateAction<TValue>]) => void]>): ReactNode
+  ChildrenRenderProps<[Awaited<TValue>, SetAtom<[SetStateAction<TValue>], void>]>): ReactNode
 
-/**
- * @experimental This is experimental feature.
- */
 export function Atom<TValue>({
   children,
   atom,
   options,
 }: UseAtomProps<JotaiAtom<TValue>> & ChildrenRenderProps<[Awaited<TValue>, never]>): ReactNode
 
-/**
- * @experimental This is experimental feature.
- */
 export function Atom<TAtom extends WritableAtom<unknown, never[], unknown>>({
   children,
   atom,
   options,
 }: UseAtomProps<TAtom> &
   ChildrenRenderProps<
-    [Awaited<ExtractAtomValue<TAtom>>, (...args: ExtractAtomArgs<TAtom>) => ExtractAtomResult<TAtom>]
+    [Awaited<ExtractAtomValue<TAtom>>, SetAtom<ExtractAtomArgs<TAtom>, ExtractAtomResult<TAtom>>]
   >): ReactNode
 
-/**
- * @experimental This is experimental feature.
- */
 export function Atom<TAtom extends JotaiAtom<unknown>>({
   children,
   atom,
   options,
 }: UseAtomProps<TAtom> & ChildrenRenderProps<[Awaited<ExtractAtomValue<TAtom>>, never]>): ReactNode
 
-/**
- * @experimental This is experimental feature.
- */
 export function Atom<TValue, TArgs extends unknown[], TResult>({
   children,
   atom,
   options,
-}: UseAtomProps<JotaiAtom<unknown>> & ChildrenRenderProps<any>): ReactNode {
+}: UseAtomProps<JotaiAtom<TValue> | WritableAtom<TValue, TArgs, TResult>> &
+  ChildrenRenderProps<ReturnType<typeof useAtom>>): ReactNode {
   return (
-    <>{children([useAtomValue(atom, options), useSetAtom(atom as WritableAtom<TValue, TArgs, TResult>, options)])}</>
+    <>
+      {children([
+        useAtomValue(atom, options),
+        useSetAtom(atom as WritableAtom<TValue, TArgs, TResult>, options) as never,
+      ])}
+    </>
   )
 }

packages/jotai/src/AtomValue.test-d.tsx

@@ -1,11 +1,46 @@
 import { atom, useAtomValue } from 'jotai'
+import { loadable } from 'jotai/utils'
 import type { ReactNode } from 'react'
 import { AtomValue } from './AtomValue'
 
-const asyncAtom = atom(() => Promise.resolve('string'))
+const countAtom = atom(0)
+const readOnlyCountAtom = atom((get) => get(countAtom))
+const writeOnlyCountAtom = atom(null, (get, set) => set(countAtom, get(countAtom) + 1))
+const asyncAtom = atom(async () => Promise.resolve('string'))
+const asyncIncrementAtom = atom(null, async (get, set) => {
+  set(countAtom, get(countAtom) + 1)
+})
+const loadableAtom = loadable(asyncAtom)
 
 describe('<AtomValue/>', () => {
   it('type check', () => {
+    ;() => (
+      <AtomValue atom={countAtom}>
+        {(value) => {
+          const valueOfJotai = useAtomValue(countAtom)
+          expectTypeOf(value).toEqualTypeOf<typeof valueOfJotai>()
+          return <></>
+        }}
+      </AtomValue>
+    )
+    ;() => (
+      <AtomValue atom={readOnlyCountAtom}>
+        {(value) => {
+          const valueOfJotai = useAtomValue(readOnlyCountAtom)
+          expectTypeOf(value).toEqualTypeOf<typeof valueOfJotai>()
+          return <></>
+        }}
+      </AtomValue>
+    )
+    ;() => (
+      <AtomValue atom={writeOnlyCountAtom}>
+        {(value) => {
+          const valueOfJotai = useAtomValue(writeOnlyCountAtom)
+          expectTypeOf(value).toEqualTypeOf<typeof valueOfJotai>()
+          return <></>
+        }}
+      </AtomValue>
+    )
     ;() => (
       <AtomValue atom={asyncAtom}>
         {(value) => {
@@ -15,8 +50,36 @@ describe('<AtomValue/>', () => {
         }}
       </AtomValue>
     )
+    ;() => (
+      <AtomValue atom={asyncIncrementAtom}>
+        {(value) => {
+          const valueOfJotai = useAtomValue(asyncIncrementAtom)
+          expectTypeOf(value).toEqualTypeOf<typeof valueOfJotai>()
+          return <></>
+        }}
+      </AtomValue>
+    )
+    ;() => (
+      <AtomValue atom={loadableAtom}>
+        {(value) => {
+          const valueOfJotai = useAtomValue(loadableAtom)
+          expectTypeOf(value).toEqualTypeOf<typeof valueOfJotai>()
+          return <></>
+        }}
+      </AtomValue>
+    )
 
+    expectTypeOf(<AtomValue atom={countAtom}>{() => <></>}</AtomValue>).toEqualTypeOf<JSX.Element>()
+    expectTypeOf(<AtomValue atom={countAtom}>{() => <></>}</AtomValue>).not.toEqualTypeOf<ReactNode>()
+    expectTypeOf(<AtomValue atom={readOnlyCountAtom}>{() => <></>}</AtomValue>).toEqualTypeOf<JSX.Element>()
+    expectTypeOf(<AtomValue atom={readOnlyCountAtom}>{() => <></>}</AtomValue>).not.toEqualTypeOf<ReactNode>()
+    expectTypeOf(<AtomValue atom={writeOnlyCountAtom}>{() => <></>}</AtomValue>).toEqualTypeOf<JSX.Element>()
+    expectTypeOf(<AtomValue atom={writeOnlyCountAtom}>{() => <></>}</AtomValue>).not.toEqualTypeOf<ReactNode>()
     expectTypeOf(<AtomValue atom={asyncAtom}>{() => <></>}</AtomValue>).toEqualTypeOf<JSX.Element>()
     expectTypeOf(<AtomValue atom={asyncAtom}>{() => <></>}</AtomValue>).not.toEqualTypeOf<ReactNode>()
+    expectTypeOf(<AtomValue atom={asyncIncrementAtom}>{() => <></>}</AtomValue>).toEqualTypeOf<JSX.Element>()
+    expectTypeOf(<AtomValue atom={asyncIncrementAtom}>{() => <></>}</AtomValue>).not.toEqualTypeOf<ReactNode>()
+    expectTypeOf(<AtomValue atom={loadableAtom}>{() => <></>}</AtomValue>).toEqualTypeOf<JSX.Element>()
+    expectTypeOf(<AtomValue atom={loadableAtom}>{() => <></>}</AtomValue>).not.toEqualTypeOf<ReactNode>()
   })
 })

packages/jotai/src/AtomValue.tsx

@@ -1,18 +1,28 @@
-import { type Atom as JotaiAtom, useAtomValue } from 'jotai'
+import { type ExtractAtomValue, type Atom as JotaiAtom, useAtomValue } from 'jotai'
+import type { ReactNode } from 'react'
 import type { ChildrenRenderProps } from './utility-types'
 
-type UseAtomValueProps<TValue> = {
-  atom: JotaiAtom<TValue>
-  options?: Parameters<typeof useAtomValue>[1] & { delay?: number }
+type UseAtomValueProps<TAtom extends Parameters<typeof useAtomValue>[0]> = {
+  atom: TAtom
+  options?: Parameters<typeof useAtomValue>[1]
 }
 
-/**
- * @experimental This is experimental feature.
- */
 export function AtomValue<TValue>({
   children,
   atom,
   options,
-}: UseAtomValueProps<TValue> & ChildrenRenderProps<Awaited<TValue>>) {
+}: UseAtomValueProps<JotaiAtom<TValue>> & ChildrenRenderProps<Awaited<TValue>>): ReactNode
+
+export function AtomValue<TAtom extends JotaiAtom<unknown>>({
+  children,
+  atom,
+  options,
+}: UseAtomValueProps<TAtom> & ChildrenRenderProps<Awaited<ExtractAtomValue<TAtom>>>): ReactNode
+
+export function AtomValue<TValue>({
+  children,
+  atom,
+  options,
+}: UseAtomValueProps<JotaiAtom<TValue>> & ChildrenRenderProps<ReturnType<typeof useAtomValue>>): ReactNode {
   return <>{children(useAtomValue(atom, options))}</>
 }