chore: update

toss · Nov 19, 2024 · 1e1238f · 1e1238f
1 parent 145e048
commit 1e1238f
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 35 deletions.
diff --git a/examples/visualization/src/app/react-dom/FadeIn/page.tsx b/examples/visualization/src/app/react-dom/FadeIn/page.tsx
@@ -29,40 +29,47 @@ const query = {
 }
 
 export default function Page() {
-  const userId = 1
-
   return (
-    <ErrorBoundary fallback={({ error }) => <>{error.message}</>}>
-      <Suspense
-        clientOnly
-        fallback={
-          <FadeIn delay={200} duration={1000}>
-            {skeleton}
-          </FadeIn>
-        }
-      >
-        <SuspenseQuery {...query.user(userId)}>
-          {({ data: user }) => (
-            <FadeIn duration={200} className="max-w-[344px]">
-              <h1 className="text-lg font-bold">{user.username}</h1>
-              <p className="text-xs">{user.userAgent}</p>
-              <p>{user.age}</p>
-              <p>{user.maidenName}</p>
-            </FadeIn>
-          )}
-        </SuspenseQuery>
-      </Suspense>
-    </ErrorBoundary>
+    <div>
+      <ErrorBoundary fallback={({ error }) => <>{error.message}</>}>
+        {Array.from({ length: 20 }).map((_, i) => {
+          const userId = i + 1
+          return (
+            <Suspense
+              key={userId}
+              clientOnly
+              fallback={
+                <FadeIn delay={200} duration={1000}>
+                  {skeleton}
+                </FadeIn>
+              }
+            >
+              <SuspenseQuery {...query.user(userId)}>
+                {({ data: user }) => (
+                  <FadeIn duration={200} className="max-w-[344px]">
+                    <h1 className="text-lg font-bold">{user.username}</h1>
+                    <p className="text-xs">{user.userAgent}</p>
+                    <p>{user.age}</p>
+                    <p>{user.maidenName}</p>
+                    <div className="mb-6" />
+                  </FadeIn>
+                )}
+              </SuspenseQuery>
+            </Suspense>
+          )
+        })}
+      </ErrorBoundary>
+    </div>
   )
 }
 
 const skeleton = (
-  <div role="status" className="animate-pulse space-y-2">
-    <div className="h-4 w-[42px] rounded-sm bg-gray-300 dark:bg-gray-600"></div>
-    <div className="h-2 w-[34px] rounded-sm bg-gray-300 dark:bg-gray-600"></div>
-    <div className="h-2 w-[344px] rounded-sm bg-gray-300 dark:bg-gray-600"></div>
-    <div className="h-2 w-[344px] rounded-sm bg-gray-300 dark:bg-gray-600"></div>
-    <div className="h-4 w-[42px] rounded-sm bg-gray-300 dark:bg-gray-600"></div>
-    <div className="h-4 w-[34px] rounded-sm bg-gray-300 dark:bg-gray-600"></div>
+  <div role="status" className="mb-6 animate-pulse space-y-2">
+    <div className="h-4 w-[42px] rounded-sm bg-gray-300 dark:bg-gray-600" />
+    <div className="h-2 w-[34px] rounded-sm bg-gray-300 dark:bg-gray-600" />
+    <div className="h-2 w-[344px] rounded-sm bg-gray-300 dark:bg-gray-600" />
+    <div className="h-2 w-[344px] rounded-sm bg-gray-300 dark:bg-gray-600" />
+    <div className="h-4 w-[42px] rounded-sm bg-gray-300 dark:bg-gray-600" />
+    <div className="h-4 w-[34px] rounded-sm bg-gray-300 dark:bg-gray-600" />
   </div>
 )
diff --git a/packages/react-dom/src/FadeIn.test-d.tsx b/packages/react-dom/src/FadeIn.test-d.tsx
@@ -0,0 +1,17 @@
+import { FadeIn } from './FadeIn'
+
+describe('<FadeIn/>', () => {
+  // eslint-disable-next-line vitest/expect-expect
+  it('type check', () => {
+    // @ts-expect-error ts(2322)
+    ;(() => <FadeIn as="div" href="https://example.com"></FadeIn>)()
+    ;(() => <FadeIn as="a" href="https://example.com"></FadeIn>)()
+    ;(() => <FadeIn></FadeIn>)()
+    ;(() => <FadeIn as={Example1} x="string"></FadeIn>)()
+    // @ts-expect-error ts(2322)
+    ;(() => <FadeIn as={Example2} x="string"></FadeIn>)()
+  })
+})
+
+const Example1 = ({}: { x: string }) => <></>
+const Example2 = () => <></>
diff --git a/packages/react-dom/src/FadeIn.tsx b/packages/react-dom/src/FadeIn.tsx
@@ -1,15 +1,24 @@
 import { type CSSProperties, type ComponentPropsWithoutRef, type ElementType } from 'react'
 import { useInView } from './useInView'
 
-type FadeInBaseProps = {
+type FadeInProps<TAs extends ElementType> = ComponentPropsWithoutRef<TAs> & {
+  /**
+   * The element type to render.
+   */
+  as?: TAs
+  /**
+   * The delay in milliseconds before the animation starts.
+   */
   delay?: number
+  /**
+   * The duration in milliseconds of the animation.
+   */
   duration?: number
+  /**
+   * The timing function of the animation.
+   */
   timingFunction?: CSSProperties['animationTimingFunction']
 }
-type FadeInProps<TAs extends ElementType> = {
-  as?: TAs
-} & Omit<ComponentPropsWithoutRef<TAs>, 'as' | keyof FadInBaseProps> &
-  FadeInBaseProps
 
 export function FadeIn<TAs extends ElementType = 'div'>({
   as,