Add wrapResolved to be a faster version of wrapPromise

src/components/HighTable/HighTable.stories.tsx

@@ -1,16 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { DataFrame } from '../../helpers/dataframe.js'
-import { wrapPromise } from '../../utils/promise.js'
+import { wrapResolved } from '../../utils/promise.js'
 import HighTable from './HighTable.js'
 
 const data: DataFrame = {
   header: ['ID', 'Count'],
   numRows: 1000,
   rows: ({ start, end }) => Array.from({ length: end - start }, (_, index) => ({
-    index: wrapPromise(index + start),
+    index: wrapResolved(index + start),
     cells: {
-      ID: wrapPromise(`row ${index + start}`),
-      Count: wrapPromise(1000 - start - index),
+      ID: wrapResolved(`row ${index + start}`),
+      Count: wrapResolved(1000 - start - index),
     },
   })),
 }

src/helpers/dataframe.ts

@@ -1,4 +1,4 @@
-import { wrapPromise } from '../utils/promise.js'
+import { wrapResolved } from '../utils/promise.js'
 import { AsyncRow, Cells, asyncRows } from './row.js'
 import { OrderBy } from './sort.js'
 
@@ -186,8 +186,8 @@ export function arrayDataFrame(data: Cells[]): DataFrame {
     numRows: data.length,
     rows({ start, end }): AsyncRow[] {
       return data.slice(start, end).map((cells, i) => ({
-        index: wrapPromise(start + i),
-        cells: Object.fromEntries(Object.entries(cells).map(([key, value]) => [key, wrapPromise(value)])),
+        index: wrapResolved(start + i),
+        cells: Object.fromEntries(Object.entries(cells).map(([key, value]) => [key, wrapResolved(value)])),
       }))
     },
     getColumn({ column, start = 0, end = data.length }): Promise<any[]> {

src/utils/promise.ts

@@ -3,14 +3,16 @@ export type WrappedPromise<T> = Promise<T> & {
   rejected?: any
 }
 
+export type ResolvablePromise<T> = Promise<T> & {
+  resolve: (value: T) => void
+  reject: (reason?: any) => void
+}
+
 /**
  * Wrap a promise to save the resolved value and error.
  * Note: you can't await on a WrappedPromise, you must use then.
  */
-export function wrapPromise<T>(promise: Promise<T> | T): WrappedPromise<T> {
-  if (!(promise instanceof Promise)) {
-    promise = Promise.resolve(promise)
-  }
+export function wrapPromise<T>(promise: Promise<T>): WrappedPromise<T> {
   const wrapped: WrappedPromise<T> = promise.then(resolved => {
     wrapped.resolved = resolved
     return resolved
@@ -21,9 +23,14 @@ export function wrapPromise<T>(promise: Promise<T> | T): WrappedPromise<T> {
   return wrapped
 }
 
-export type ResolvablePromise<T> = Promise<T> & {
-  resolve: (value: T) => void
-  reject: (reason?: any) => void
+/**
+ * Similar to `wrapPromise`, but for a resolved value.
+ * Returns immediately without creating a microtask.
+ */
+export function wrapResolved<T>(value: T): WrappedPromise<T> {
+  const wrapped: WrappedPromise<T> = Promise.resolve(value) as WrappedPromise<T>
+  wrapped.resolved = value
+  return wrapped
 }
 
 /**

test/components/HighTable/HighTable.test.tsx

@@ -3,17 +3,17 @@ import React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import HighTable from '../../../src/components/HighTable/HighTable.js'
 import { DataFrame, sortableDataFrame } from '../../../src/helpers/dataframe.js'
-import { wrapPromise } from '../../../src/utils/promise.js'
+import { wrapResolved } from '../../../src/utils/promise.js'
 import { render } from '../../userEvent.js'
 
 const data: DataFrame = {
   header: ['ID', 'Count'],
   numRows: 1000,
   rows: ({ start, end }) => Array.from({ length: end - start }, (_, index) => ({
-    index: wrapPromise(index + start),
+    index: wrapResolved(index + start),
     cells: {
-      ID: wrapPromise(`row ${index + start}`),
-      Count: wrapPromise(1000 - start - index),
+      ID: wrapResolved(`row ${index + start}`),
+      Count: wrapResolved(1000 - start - index),
     },
   })),
 }
@@ -22,10 +22,10 @@ const otherData: DataFrame = {
   header: ['ID', 'Count'],
   numRows: 1000,
   rows: ({ start, end }) => Array.from({ length: end - start }, (_, index) => ({
-    index: wrapPromise(index + start),
+    index: wrapResolved(index + start),
     cells: {
-      ID: wrapPromise(`other ${index + start}`),
-      Count: wrapPromise(1000 - start - index),
+      ID: wrapResolved(`other ${index + start}`),
+      Count: wrapResolved(1000 - start - index),
     },
   })),
 }
@@ -35,11 +35,11 @@ describe('HighTable', () => {
     header: ['ID', 'Name', 'Age'],
     numRows: 100,
     rows: vi.fn(({ start, end }: { start: number, end: number }) => Array.from({ length: end - start }, (_, index) => ({
-      index: wrapPromise(index + start),
+      index: wrapResolved(index + start),
       cells: {
-        ID: wrapPromise(index + start),
-        Name: wrapPromise(`Name ${index + start}`),
-        Age: wrapPromise(20 + index % 50),
+        ID: wrapResolved(index + start),
+        Name: wrapResolved(`Name ${index + start}`),
+        Age: wrapResolved(20 + index % 50),
       },
     }))
     ),
@@ -67,11 +67,9 @@ describe('HighTable', () => {
     })
   })
 
-  it('creates the rows after having fetched the data', async () => {
-    const { findByRole, queryByRole } = render(<HighTable data={mockData}/>)
-    expect(queryByRole('cell', { name: 'Name 0' })).toBeNull()
-    // await because we have to wait for the data to be fetched first
-    await findByRole('cell', { name: 'Name 0' })
+  it('creates the rows after having fetched the data', () => {
+    const { queryByRole } = render(<HighTable data={mockData}/>)
+    expect(queryByRole('cell', { name: 'Name 0' })).toBeDefined()
   })
 
   it('handles scroll to load more rows', async () => {

test/helpers/dataframe.test.ts

@@ -1,13 +1,13 @@
 import { describe, expect, it } from 'vitest'
 import { DataFrame, arrayDataFrame, getGetColumn, getRanks, sortableDataFrame } from '../../src/helpers/dataframe.js'
 import { AsyncRow, Row, awaitRows } from '../../src/helpers/row.js'
-import { wrapPromise } from '../../src/utils/promise.js'
+import { wrapResolved } from '../../src/utils/promise.js'
 
 export function wrapObject({ index, cells }: Row): AsyncRow {
   return {
-    index: wrapPromise(index),
+    index: wrapResolved(index),
     cells: Object.fromEntries(
-      Object.entries(cells).map(([key, value]) => [key, wrapPromise(value)])
+      Object.entries(cells).map(([key, value]) => [key, wrapResolved(value)])
     ),
   }
 }

test/helpers/row.test.ts

@@ -1,12 +1,12 @@
 import { describe, expect, it } from 'vitest'
 import { AsyncRow, Row, awaitRows } from '../../src/helpers/row.js'
-import { wrapPromise } from '../../src/utils/promise.js'
+import { wrapResolved } from '../../src/utils/promise.js'
 
 export function wrapObject({ index, cells }: Row): AsyncRow {
   return {
-    index: wrapPromise(index),
+    index: wrapResolved(index),
     cells: Object.fromEntries(
-      Object.entries(cells).map(([key, value]) => [key, wrapPromise(value)])
+      Object.entries(cells).map(([key, value]) => [key, wrapResolved(value)])
     ),
   }
 }

test/helpers/rowCache.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest'
 import { AsyncRow, awaitRows } from '../../src/helpers/row.js'
 import { rowCache } from '../../src/helpers/rowCache.js'
-import { wrapPromise } from '../../src/utils/promise.js'
+import { wrapResolved } from '../../src/utils/promise.js'
 
 // Mock DataFrame
 function makeDf() {
@@ -12,9 +12,9 @@ function makeDf() {
       new Array(end - start)
         .fill(null)
         .map((_, index) => ({
-          index: wrapPromise(start + index),
+          index: wrapResolved(start + index),
           cells: {
-            id: wrapPromise(start + index),
+            id: wrapResolved(start + index),
           },
         }))
     ),

test/helpers/selection.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, it, test, vi } from 'vitest'
 import { DataFrame, sortableDataFrame } from '../../src/helpers/dataframe.js'
 import { AsyncRow, Row } from '../../src/helpers/row.js'
 import { areAllSelected, areValidRanges, convertSelection, extendFromAnchor, invertPermutationIndexes, isSelected, isValidIndex, isValidRange, selectRange, toggleAll, toggleIndex, toggleIndexInSelection, toggleRangeInSelection, toggleRangeInTable, unselectRange } from '../../src/helpers/selection.js'
-import { wrapPromise } from '../../src/utils/promise.js'
+import { wrapResolved } from '../../src/utils/promise.js'
 
 describe('an index', () => {
   test('is a positive integer', () => {
@@ -221,9 +221,9 @@ const data = [
 
 export function wrapObject({ index, cells }: Row): AsyncRow {
   return {
-    index: wrapPromise(index),
+    index: wrapResolved(index),
     cells: Object.fromEntries(
-      Object.entries(cells).map(([key, value]) => [key, wrapPromise(value)])
+      Object.entries(cells).map(([key, value]) => [key, wrapResolved(value)])
     ),
   }
 }