feat: orderBy in the query builder

packages/optimistic/package.json

@@ -3,7 +3,7 @@
   "description": "Core optimistic updates library",
   "version": "0.0.3",
   "dependencies": {
-    "@electric-sql/d2ts": "^0.1.4",
+    "@electric-sql/d2ts": "^0.1.5",
     "@standard-schema/spec": "^1.0.0",
     "@tanstack/store": "^0.7.0"
   },

packages/optimistic/src/collection.ts

@@ -262,7 +262,21 @@ export class Collection<T extends object = Record<string, unknown>> {
     // Create a derived array from the map to avoid recalculating it
     this.derivedArray = new Derived({
       fn: ({ currDepVals: [stateMap] }) => {
-        return Array.from(stateMap.values())
+        // Collections returned by a query that has an orderBy are annotated
+        // with the _orderByIndex field.
+        // This is used to sort the array when it's derived.
+        const array: Array<T & { _orderByIndex?: number }> = Array.from(
+          stateMap.values()
+        )
+        if (array[0] && `_orderByIndex` in array[0]) {
+          ;(array as Array<T & { _orderByIndex: number }>).sort((a, b) => {
+            if (a._orderByIndex === b._orderByIndex) {
+              return 0
+            }
+            return a._orderByIndex < b._orderByIndex ? -1 : 1
+          })
+        }
+        return array
       },
       deps: [this.derivedState],
     })

packages/optimistic/src/query/order-by.ts

@@ -137,7 +137,7 @@ export function processOrderBy(
     }
     // if a and b are both booleans, compare them
     if (typeof a === `boolean` && typeof b === `boolean`) {
-      return a ? 1 : -1
+      return a === b ? 0 : a ? 1 : -1
     }
     // if a and b are both dates, compare them
     if (a instanceof Date && b instanceof Date) {
@@ -149,11 +149,34 @@ export function processOrderBy(
     }
     // if a and b are both arrays, compare them element by element
     if (Array.isArray(a) && Array.isArray(b)) {
-      for (let i = 0; i < a.length; i++) {
-        const result = comparator(a[i], b[i])
-        if (result !== 0) return result
+      for (let i = 0; i < Math.min(a.length, b.length); i++) {
+        // Get the values from the array
+        const aVal = a[i]
+        const bVal = b[i]
+
+        // Compare the values
+        let result: number
+
+        if (typeof aVal === `boolean` && typeof bVal === `boolean`) {
+          // Special handling for booleans - false comes before true
+          result = aVal === bVal ? 0 : aVal ? 1 : -1
+        } else if (typeof aVal === `number` && typeof bVal === `number`) {
+          // Numeric comparison
+          result = aVal - bVal
+        } else if (typeof aVal === `string` && typeof bVal === `string`) {
+          // String comparison
+          result = aVal.localeCompare(bVal)
+        } else {
+          // Default comparison using the general comparator
+          result = comparator(aVal, bVal)
+        }
+
+        if (result !== 0) {
+          return result
+        }
       }
-      return 0
+      // All elements are equal up to the minimum length
+      return a.length - b.length
     }
     // if a and b are both null/undefined, return 0
     if ((a === null || a === undefined) && (b === null || b === undefined)) {

packages/optimistic/src/query/query-builder.ts

@@ -262,6 +262,12 @@ export class BaseQueryBuilder<TContext extends Context<Schema>> {
       return select
     })
 
+    // Ensure we have an orderByIndex in the select if we have an orderBy
+    // This is required if select is called after orderBy
+    if (this._query.orderBy) {
+      validatedSelects.push({ _orderByIndex: { ORDER_INDEX: `numeric` } })
+    }
+
     const newBuilder = new BaseQueryBuilder<TContext>(
       (this as BaseQueryBuilder<TContext>).query
     )
@@ -704,6 +710,13 @@ export class BaseQueryBuilder<TContext extends Context<Schema>> {
     // Set the orderBy clause
     newBuilder.query.orderBy = orderBy
 
+    // Ensure we have an orderByIndex in the select if we have an orderBy
+    // This is required if select is called before orderBy
+    newBuilder.query.select = [
+      ...(newBuilder.query.select ?? []),
+      { _orderByIndex: { ORDER_INDEX: `numeric` } },
+    ]
+
     return newBuilder as QueryBuilder<TContext>
   }
 

packages/optimistic/tests/query/query-builder/key-by.test.ts

@@ -97,7 +97,13 @@ describe(`QueryBuilder.keyBy`, () => {
     expect(builtQuery.as).toBe(`e`)
     expect(builtQuery.join).toBeDefined()
     expect(builtQuery.where).toBeDefined()
-    expect(builtQuery.select).toHaveLength(3)
+    expect(builtQuery.select).toHaveLength(4)
+    expect(builtQuery.select).toEqual([
+      `@e.id`,
+      `@e.name`,
+      `@d.name`,
+      { _orderByIndex: { ORDER_INDEX: `numeric` } }, // Added by the orderBy method
+    ])
     expect(builtQuery.orderBy).toBe(`@e.salary`)
     expect(builtQuery.limit).toBe(10)
     expect(builtQuery.offset).toBe(5)

packages/optimistic/tests/query/query-builder/order-by.test.ts

@@ -125,7 +125,12 @@ describe(`QueryBuilder orderBy, limit, and offset`, () => {
       expect(builtQuery.as).toBe(`e`)
       expect(builtQuery.join).toBeDefined()
       expect(builtQuery.where).toBeDefined()
-      expect(builtQuery.select).toHaveLength(3)
+      expect(builtQuery.select).toEqual([
+        `@e.id`,
+        `@e.name`,
+        `@d.name`,
+        { _orderByIndex: { ORDER_INDEX: `numeric` } }, // Added by the orderBy method
+      ])
     })
   })
 })