feat: rows and rowsSync API on Shape

.changeset/friendly-toes-check.md

@@ -0,0 +1,6 @@
+---
+"@electric-sql/client": patch
+"@electric-sql/react": patch
+---
+
+Implement `rows` and `rowsSync` getters on `Shape` interface for easier data access.

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

@@ -96,7 +96,7 @@ function parseShapeData<T extends Row<unknown>>(
   shape: Shape<T>
 ): UseShapeResult<T> {
   return {
-    data: [...shape.valueSync.values()],
+    data: shape.rowsSync,
     isLoading: shape.isLoading(),
     lastSyncedAt: shape.lastSyncedAt(),
     isError: shape.error !== false,

packages/typescript-client/src/shape.ts

@@ -69,6 +69,14 @@ export class Shape<T extends Row<unknown> = Row> {
     return this.#stream.isUpToDate
   }
 
+  get rows(): Promise<T[]> {
+    return this.value.then((v) => Array.from(v.values()))
+  }
+
+  get rowsSync(): T[] {
+    return Array.from(this.valueSync.values())
+  }
+
   get value(): Promise<ShapeData<T>> {
     return new Promise((resolve, reject) => {
       if (this.#stream.isUpToDate) {

packages/typescript-client/test/client.test.ts

@@ -14,8 +14,10 @@ describe(`Shape`, () => {
     })
     const shape = new Shape(shapeStream)
     const map = await shape.value
+    const rows = await shape.rows
 
     expect(map).toEqual(new Map())
+    expect(rows).toEqual([])
     expect(shape.lastSyncedAt()).toBeGreaterThanOrEqual(start)
     expect(shape.lastSyncedAt()).toBeLessThanOrEqual(Date.now())
     expect(shape.lastSynced()).toBeLessThanOrEqual(Date.now() - start)
@@ -48,6 +50,9 @@ describe(`Shape`, () => {
     })
 
     expect(map).toEqual(expectedValue)
+    expect(shape.rowsSync).toEqual([
+      { id: id, title: `test title`, priority: 10 },
+    ])
     expect(shape.lastSyncedAt()).toBeGreaterThanOrEqual(start)
     expect(shape.lastSyncedAt()).toBeLessThanOrEqual(Date.now())
     expect(shape.lastSynced()).toBeLessThanOrEqual(Date.now() - start)