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,38 @@ 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 => ({
+      id: record.id,
+      text: record.text,
+      completed: record.completed,
+      created_at: new Date(record.created_at * 1000),
+      updated_at: new Date(record.updated_at * 1000),
+    }),
+    serialize: (item) => ({
+      id: item.id,
+      text: item.text,
+      completed: item.completed,
+      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 +210,37 @@ 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 => ({
+      id: record.id,
+      key: record.key,
+      value: record.value,
+      created_at: new Date(record.created_at * 1000),
+      updated_at: new Date(record.updated_at * 1000),
+    }),
+    serialize: (item) => ({
+      id: item.id,
+      key: item.key,
+      value: item.value,
+      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

@@ -9,6 +9,7 @@ import type { CollectionConfig, SyncConfig, UtilsRecord } from "@tanstack/db"
  */
 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>) => Partial<TRecord>
 }
 
 export type AwaitTxIdFn = (txId: string, timeout?: number) => Promise<boolean>
@@ -26,9 +30,13 @@ 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 seenIds = new Store(new Map<string, number>())
@@ -83,7 +91,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 +125,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: (config.parse?.(item) ?? item) as TItem,
+            })
           }
 
           if (length < limit) break
@@ -205,7 +216,7 @@ export function trailBaseCollectionOptions<TItem extends object>(
           if (type !== `insert`) {
             throw new Error(`Expected 'insert', got: ${type}`)
           }
-          return changes
+          return (config.serialize?.(changes) ?? changes) as TRecord
         })
       )
 
@@ -224,7 +235,10 @@ export function trailBaseCollectionOptions<TItem extends object>(
             throw new Error(`Expected 'update', got: ${type}`)
           }
 
-          await config.recordApi.update(key, changes)
+          await config.recordApi.update(
+            key,
+            (config.serialize?.(changes) ?? changes) as Partial<TRecord>
+          )
           return String(key)
         })
       )