chore (react-hooks): improve type of selector argument in useShape ho…

…ok (#1610)

The default value for the `selector` argument used to be typed as
`never` which is wrong. This PR improves the type of the default value.

.changeset/lemon-eggs-care.md

@@ -0,0 +1,5 @@
+---
+"@electric-sql/react": patch
+---
+
+Improve type of selector argument in useShape hook.

packages/react-hooks/src/react-hooks.tsx

@@ -55,7 +55,7 @@ export function getShape(shapeStream: ShapeStream): Shape {
   }
 }
 
-interface UseShapeResult {
+export interface UseShapeResult {
   /**
    * The array of rows that make up the Shape.
    * @type {{ [key: string]: Value }[]}
@@ -91,14 +91,16 @@ function parseShapeData(shape: Shape): UseShapeResult {
   }
 }
 
-const identity = (arg: unknown) => arg
+function identity<T>(arg: T): T {
+  return arg
+}
 
 interface UseShapeOptions<Selection> extends ShapeStreamOptions {
   selector?: (value: UseShapeResult) => Selection
 }
 
 export function useShape<Selection = UseShapeResult>({
-  selector = identity as never,
+  selector = identity as (arg: UseShapeResult) => Selection,
   ...options
 }: UseShapeOptions<Selection>): Selection {
   const shapeStream = getShapeStream(options as ShapeStreamOptions)

packages/react-hooks/test/react-hooks.test-d.ts

@@ -0,0 +1,50 @@
+import { describe, expectTypeOf, it } from 'vitest'
+import { useShape, UseShapeResult } from '../src/react-hooks'
+
+describe(`useShape`, () => {
+  it(`should infer correct return type when no selector is provided`, () => {
+    const shape = useShape({
+      url: ``,
+    })
+
+    expectTypeOf(shape).toEqualTypeOf<UseShapeResult>()
+  })
+
+  type SelectorRetType = {
+    foo: number
+    bar: boolean
+    baz: string
+  }
+
+  it(`should infer correct return type when a selector is provided`, () => {
+    const shape = useShape({
+      url: ``,
+      selector: (_value: UseShapeResult) => {
+        return {
+          foo: 5,
+          bar: true,
+          baz: `str`,
+        }
+      },
+    })
+
+    expectTypeOf(shape).toEqualTypeOf<SelectorRetType>()
+  })
+
+  it(`should raise a type error if type argument does not equal inferred return type`, () => {
+    const shape = useShape<number>({
+      url: ``,
+      // @ts-expect-error - should have type mismatch, because doesn't match the declared `Number` type
+      selector: (_value: UseShapeResult) => {
+        return {
+          foo: 5,
+          bar: true,
+          baz: `str`,
+        }
+      },
+    })
+
+    // Return type is based on the type argument
+    expectTypeOf(shape).toEqualTypeOf<number>()
+  })
+})

packages/react-hooks/vitest.config.ts

@@ -3,5 +3,6 @@ import { defineConfig } from 'vitest/config'
 export default defineConfig({
   test: {
     globalSetup: `test/support/global-setup.ts`,
+    typecheck: { enabled: true },
   },
 })