Add a parse/serialize translation layer to map JS Date objects w/o changing downstream example code.

Author: ignatz

examples/react/todo/src/lib/collections.ts

@@ -107,13 +107,34 @@ export const queryTodoCollection = createCollection(
   })
 )
 
+type Todo = {
+  id: number
+  text: string
+  completed: boolean
+  created_at: number
+  updated_at: number
+}
+
 // TrailBase Todo Collection
-export const trailBaseTodoCollection = createCollection<SelectTodo>(
-  trailBaseCollectionOptions({
+export const trailBaseTodoCollection = createCollection(
+  trailBaseCollectionOptions<SelectTodo, Todo>({
     id: `todos`,
     getKey: (item) => item.id,
     schema: selectTodoSchema,
     recordApi: trailBaseClient.records(`todos`),
+    // Re-using the example's drizzle-schema requires remapping the items.
+    parse: (record: Todo): SelectTodo => ({
+      ...record,
+      created_at: new Date(record.created_at * 1000),
+      updated_at: new Date(record.updated_at * 1000),
+    }),
+    serialize: (item) => ({
+      ...item,
+      created_at:
+        item.created_at && Math.floor(item.created_at.valueOf() / 1000),
+      updated_at:
+        item.updated_at && Math.floor(item.updated_at.valueOf() / 1000),
+    }),
   })
 )
 
@@ -185,12 +206,33 @@ export const queryConfigCollection = createCollection(
   })
 )
 
+type Config = {
+  id: number
+  key: string
+  value: string
+  created_at: number
+  updated_at: number
+}
+
 // TrailBase Config Collection
-export const trailBaseConfigCollection = createCollection<SelectConfig>(
-  trailBaseCollectionOptions({
+export const trailBaseConfigCollection = createCollection(
+  trailBaseCollectionOptions<SelectConfig, Config>({
     id: `config`,
     getKey: (item) => item.id,
     schema: selectConfigSchema,
     recordApi: trailBaseClient.records(`config`),
+    // Re-using the example's drizzle-schema requires remapping the items.
+    parse: (record: Config): SelectConfig => ({
+      ...record,
+      created_at: new Date(record.created_at * 1000),
+      updated_at: new Date(record.updated_at * 1000),
+    }),
+    serialize: (item) => ({
+      ...item,
+      created_at:
+        item.created_at && Math.floor(item.created_at.valueOf() / 1000),
+      updated_at:
+        item.updated_at && Math.floor(item.updated_at.valueOf() / 1000),
+    }),
   })
 )

examples/react/todo/traildepot/migrations/U1752518653__create_table_todos.sql

@@ -2,11 +2,11 @@ CREATE TABLE todos (
   "id"          INTEGER PRIMARY KEY NOT NULL,
   "text"        TEXT NOT NULL,
   "completed"   INTEGER NOT NULL DEFAULT 0,
-  "created_at"  TEXT NOT NULL DEFAULT(STRFTIME('%FT%TZ')),
-  "updated_at"  TEXT NOT NULL DEFAULT(STRFTIME('%FT%TZ'))
+  "created_at"  INTEGER NOT NULL DEFAULT(UNIXEPOCH()),
+  "updated_at"  INTEGER NOT NULL DEFAULT(UNIXEPOCH())
 ) STRICT;
 
 CREATE TRIGGER _todos__update_trigger AFTER UPDATE ON todos FOR EACH ROW
   BEGIN
-    UPDATE todos SET updated_at = STRFTIME('%FT%TZ') WHERE id = OLD.id;
+    UPDATE todos SET updated_at = UNIXEPOCH() WHERE id = OLD.id;
   END;

examples/react/todo/traildepot/migrations/U1752518746__create_table_config.sql

@@ -2,15 +2,15 @@ CREATE TABLE config (
   "id"          INTEGER PRIMARY KEY NOT NULL,
   "key"         TEXT NOT NULL,
   "value"       TEXT NOT NULL,
-  "created_at"  TEXT NOT NULL DEFAULT(STRFTIME('%FT%TZ')),
-  "updated_at"  TEXT NOT NULL DEFAULT(STRFTIME('%FT%TZ'))
-);
+  "created_at"  INTEGER NOT NULL DEFAULT(UNIXEPOCH()),
+  "updated_at"  INTEGER NOT NULL DEFAULT(UNIXEPOCH())
+) STRICT;
 
 CREATE UNIQUE INDEX _config_key_index ON config ("key");
 
 CREATE TRIGGER _config__update_trigger AFTER UPDATE ON config FOR EACH ROW
   BEGIN
-    UPDATE config SET updated_at = STRFTIME('%FT%TZ') WHERE id = OLD.id;
+    UPDATE config SET updated_at = UNIXEPOCH() WHERE id = OLD.id;
   END;
 
 -- Insert default config for background color

packages/trailbase-db-collection/src/trailbase.ts

@@ -5,10 +5,11 @@ import type { Event, RecordApi } from "trailbase"
 import type { CollectionConfig, SyncConfig, UtilsRecord } from "@tanstack/db"
 
 /**
- * Configuration interface for TrailbaseCollection
+ * Configuration interface for Trailbase Collection
  */
 export interface TrailBaseCollectionConfig<
   TItem extends object,
+  TRecord extends object = TItem,
   TKey extends string | number = string | number,
 > extends Omit<
     CollectionConfig<TItem, TKey>,
@@ -17,7 +18,10 @@ export interface TrailBaseCollectionConfig<
   /**
    * Record API name
    */
-  recordApi: RecordApi<TItem>
+  recordApi: RecordApi<TRecord>
+
+  parse?: (record: TRecord) => TItem
+  serialize?: (item: Partial<TItem> | TItem) => Partial<TRecord> | TRecord
 }
 
 export type AwaitTxIdFn = (txId: string, timeout?: number) => Promise<boolean>
@@ -26,11 +30,21 @@ export interface TrailBaseCollectionUtils extends UtilsRecord {
   cancel: () => void
 }
 
-export function trailBaseCollectionOptions<TItem extends object>(
-  config: TrailBaseCollectionConfig<TItem>
-): CollectionConfig<TItem> & { utils: TrailBaseCollectionUtils } {
+export function trailBaseCollectionOptions<
+  TItem extends object,
+  TRecord extends object = TItem,
+  TKey extends string | number = string | number,
+>(
+  config: TrailBaseCollectionConfig<TItem, TRecord, TKey>
+): CollectionConfig<TItem, TKey> & { utils: TrailBaseCollectionUtils } {
   const getKey = config.getKey
 
+  const parse = (record: TRecord) => (config.parse?.(record) ?? record) as TItem
+  const serialUpd = (item: Partial<TItem>) =>
+    (config.serialize?.(item) ?? item) as Partial<TRecord>
+  const serialIns = (item: TItem) =>
+    (config.serialize?.(item) ?? item) as TRecord
+
   const seenIds = new Store(new Map<string, number>())
 
   const awaitIds = (
@@ -83,7 +97,7 @@ export function trailBaseCollectionOptions<TItem extends object>(
     }
   }, 120 * 1000)
 
-  type SyncParams = Parameters<SyncConfig<TItem>[`sync`]>[0]
+  type SyncParams = Parameters<SyncConfig<TItem, TKey>[`sync`]>[0]
 
   let eventReader: ReadableStreamDefaultReader<Event> | undefined
   const cancel = () => {
@@ -117,7 +131,10 @@ export function trailBaseCollectionOptions<TItem extends object>(
 
           got = got + length
           for (const item of response.records) {
-            write({ type: `insert`, value: item })
+            write({
+              type: `insert`,
+              value: parse(item),
+            })
           }
 
           if (length < limit) break
@@ -149,13 +166,13 @@ export function trailBaseCollectionOptions<TItem extends object>(
           begin()
           let value: TItem | undefined
           if (`Insert` in event) {
-            value = event.Insert as TItem
+            value = parse(event.Insert as TRecord)
             write({ type: `insert`, value })
           } else if (`Delete` in event) {
-            value = event.Delete as TItem
+            value = parse(event.Delete as TRecord)
             write({ type: `delete`, value })
           } else if (`Update` in event) {
-            value = event.Update as TItem
+            value = parse(event.Update as TRecord)
             write({ type: `update`, value })
           } else {
             console.error(`Error: ${event.Error}`)
@@ -205,7 +222,7 @@ export function trailBaseCollectionOptions<TItem extends object>(
           if (type !== `insert`) {
             throw new Error(`Expected 'insert', got: ${type}`)
           }
-          return changes
+          return serialIns(changes)
         })
       )
 
@@ -224,7 +241,8 @@ export function trailBaseCollectionOptions<TItem extends object>(
             throw new Error(`Expected 'update', got: ${type}`)
           }
 
-          await config.recordApi.update(key, changes)
+          await config.recordApi.update(key, serialUpd(changes))
+
           return String(key)
         })
       )