fix: add autoincrement types

Author: Miha J. Mulec

apps/mmstack/src/app/app.config.ts

@@ -21,6 +21,7 @@ import {
   withPreloading,
 } from '@angular/router';
 import { provideValidatorConfig } from '@mmstack/form-material';
+import { provideDBConfig } from '@mmstack/local';
 import {
   createCacheInterceptor,
   createDedupeRequestsInterceptor,
@@ -36,6 +37,20 @@ export const appConfig: ApplicationConfig = {
       provide: LOCALE_ID,
       useValue: 'en-US',
     },
+    provideDBConfig({
+      dbName: 'my-todo-app',
+      version: 1,
+      syncTabs: false, // Enable cross-tab synchronization
+      schema: {
+        tasks: {
+          primaryKey: 'id',
+          autoIncrement: true,
+          // indexes: {
+          //   byStatus: { keyPath: 'status' },
+          // },
+        },
+      },
+    }),
     provideClientHydration(
       withEventReplay(),
       withHttpTransferCacheOptions({

apps/mmstack/src/app/app.ts

@@ -1,14 +1,14 @@
 import { Component } from '@angular/core';
+import { TaskListComponent } from './todo.component';
 
 @Component({
   selector: 'app-root',
-  imports: [],
-  template: ``,
+  imports: [TaskListComponent],
+  template: `<app-task-list />`,
   styles: ``,
 })
 export class App {}
 
-
 export function test() {
-  return 'yay'
-}
+  return 'yay';
+}

apps/mmstack/src/app/todo.component.ts

@@ -0,0 +1,38 @@
+import { Component, effect } from '@angular/core';
+import { idb } from '@mmstack/local';
+
+type Task = {
+  id: number;
+  title: string;
+  status: 'pending' | 'completed';
+};
+
+@Component({
+  selector: 'app-task-list',
+  template: `
+    @if (tasks.isLoading()) {
+      <p>Loading tasks...</p>
+    }
+    <ul>
+      @for (task of tasks.value(); track task.id) {
+        <li>{{ task.title }}</li>
+      }
+    </ul>
+    <button (click)="addTask()">Add New Task</button>
+  `,
+})
+export class TaskListComponent {
+  // a call to 'tasks' will always return the same instance, so updates happen across the entire application
+  tasks = idb<Task, 'id'>('tasks');
+
+  constructor() {
+    effect(() => {
+      console.log('Tasks in the database:', this.tasks.value());
+    });
+  }
+
+  async addTask() {
+    await this.tasks.add({ title: 'A new adventure!', status: 'pending' });
+    console.log('Task added successfully!');
+  }
+}

packages/local/README.md

@@ -65,11 +65,11 @@ Use the `idb` helper function in any component or service to get a reactive hand
 ```typescript
 // task-list.component.ts
 
-type Task {
+type Task = {
   id?: number;
   title: string;
-  status: 'pending' | 'completed'
-}
+  status: 'pending' | 'completed';
+};
 
 @Component({
   selector: 'app-task-list',
@@ -85,9 +85,9 @@ type Task {
     <button (click)="addTask()">Add New Task</button>
   `,
 })
-export class TaskListComponent {
-   // a call to 'tasks' will always return the same instance, so updates happen across the entire application
-  tasks = idb<Task>('tasks');
+export class TaskList {
+  // a call to 'tasks' will always return the same instance, so updates happen across the entire application
+  tasks = idb<Task, 'id'>('tasks');
 
   constructor() {
     effect(() => {

packages/local/src/lib/idb/idb-client.ts

@@ -44,10 +44,13 @@ export type IDBClient = ResourceRef<IDBConnection> & {
    * @param opt Options for creating the table handler.
    * @returns An IDBTable handler for the specified table.
    */
-  useTable: <T extends Record<PropertyKey, any>>(
+  useTable: <
+    T extends Record<PropertyKey, any>,
+    TKey extends keyof T = keyof T,
+  >(
     tableName: string,
-    opt: CreateIDBTableOptions<T>,
-  ) => IDBTable<T>;
+    opt?: CreateIDBTableOptions<T>,
+  ) => IDBTable<T, TKey>;
 };
 
 /** Options for creating the IDBClient */
@@ -116,7 +119,7 @@ export function createIDBClient(
 
   const { onBlocked, onVersionChange, onClose } = lifeCycle ?? {};
 
-  const registry = new Map<string, IDBTable<any>>();
+  const registry = new Map<string, IDBTable<any, any>>();
 
   const events$ = dbEvents(dbName, version, injector);
 
@@ -127,12 +130,15 @@ export function createIDBClient(
   const base = {
     name: dbName,
     version,
-    useTable: <T extends Record<PropertyKey, any>>(
+    useTable: <
+      T extends Record<PropertyKey, any>,
+      TKey extends keyof T = keyof T,
+    >(
       tableName: string,
-      options: CreateIDBTableOptions<T>,
-    ) => {
+      options?: CreateIDBTableOptions<T>,
+    ): IDBTable<T, TKey> => {
       const found = registry.get(tableName);
-      if (found) return found;
+      if (found) return found as IDBTable<T, TKey>;
 
       const tableSchema = schema[tableName];
 
@@ -144,7 +150,7 @@ export function createIDBClient(
             ).join(', ')}`,
           );
 
-        return createNoopTable<T>(tableName);
+        return createNoopTable<T, TKey>(tableName);
       }
 
       const eventFactory = createEventFactory<T, IDBValidKey>(
@@ -153,9 +159,9 @@ export function createIDBClient(
         tableName,
       );
 
-      const newTable = createNewTable<T>(tableName, {
+      const newTable = createNewTable<T, TKey>(tableName, {
         ...options,
-        injector: options.injector ?? injector,
+        injector: options?.injector ?? injector,
         schema: tableSchema as IDBTableSchema<T>,
         client: client,
         fireEvent: (e) => {

packages/local/src/lib/idb/idb-events.ts

@@ -30,7 +30,7 @@ export class IDBEventBus {
   readonly events$ = new Subject<IDBChangeEvent<any, any>>();
 }
 
-function generateID() {
+export function generateID() {
   if (globalThis.crypto?.randomUUID) {
     return globalThis.crypto.randomUUID();
   }

packages/local/src/lib/idb/idb-table.ts

@@ -9,7 +9,7 @@ import {
 import { filter, Observable } from 'rxjs';
 import type { IDBClient } from './idb-client';
 import type { IDBConnection } from './idb-connection';
-import type { FireEvent, IDBChangeEvent } from './idb-events';
+import { generateID, type FireEvent, type IDBChangeEvent } from './idb-events';
 import type { IDBTableSchema } from './idb-schema';
 import { toResourceObject } from './to-resource-object';
 
@@ -26,17 +26,21 @@ export type CreateIDBTableOptions<T extends Record<PropertyKey, any>> = {
   equal?: ValueEqualityFn<T>;
 };
 
+type AddValue<T, TKey extends keyof T> = Omit<T, TKey> & {
+  [K in TKey]?: IDBValidKey;
+};
+
 /**
  * Represents a table handler for IndexedDB.
  * It provides methods to add, update, and remove items,
  * as well as to retrieve the table's data.
  * It extends ResourceRef to provide reactive data handling.
  * All updates happen optimistcally and are reverted in case of an error.
  */
-export type IDBTable<T extends Record<PropertyKey, any>> = Omit<
-  ResourceRef<T[]>,
-  'set' | 'update'
-> & {
+export type IDBTable<
+  T extends Record<PropertyKey, any>,
+  TKey extends keyof T,
+> = Omit<ResourceRef<T[]>, 'set' | 'update'> & {
   /**
    * The name of the table.
    */
@@ -46,26 +50,26 @@ export type IDBTable<T extends Record<PropertyKey, any>> = Omit<
    * @param value The item to add.
    * @returns A promise that resolves when the add operation is complete.
    */
-  add: (value: T) => Promise<void>;
+  add: (value: AddValue<T, TKey>) => Promise<T[TKey]>;
   /**
    *
    * @param key The key of the item to update.
    * @param itemOrUpdater The new item or a function that takes the previous item and returns the new item.
    * @returns A promise that resolves when the update is complete.
    */
-  update: (
-    key: IDBValidKey,
-    itemOrUpdater: T | ((prev: T) => T),
-  ) => Promise<void>;
+  update: (key: T[TKey], itemOrUpdater: T | ((prev: T) => T)) => Promise<void>;
   /**
    * Removes an item from the table by its key.
    * @param key The key of the item to remove.
    * @returns A promise that resolves when the remove operation is complete.
    */
-  remove: (key: IDBValidKey) => Promise<void>;
+  remove: (key: T[TKey]) => Promise<void>;
 };
 
-export function createNewTable<T extends Record<PropertyKey, any>>(
+export function createNewTable<
+  T extends Record<PropertyKey, any>,
+  TKey extends keyof T,
+>(
   tableName: string,
   {
     client,
@@ -79,7 +83,7 @@ export function createNewTable<T extends Record<PropertyKey, any>>(
     fireEvent: FireEvent<T, IDBValidKey>;
     events$: Observable<IDBChangeEvent<T, IDBValidKey>>;
   },
-): IDBTable<T> {
+): IDBTable<T, TKey> {
   const rawTableData = toResourceObject(
     resource<T[], IDBConnection>({
       params: () => client.value(),
@@ -123,17 +127,35 @@ export function createNewTable<T extends Record<PropertyKey, any>>(
     },
   };
 
-  const add = async (item: T, fromEvent = false): Promise<void> => {
+  const add = async (
+    item: AddValue<T, TKey>,
+    fromEvent = false,
+  ): Promise<T[TKey]> => {
     const prev = untracked(tableData.value);
 
+    let tempKey = (item as any)[schema.primaryKey] as T[TKey] | undefined;
+
+    if (schema.autoIncrement && tempKey === undefined && prev.length > 0) {
+      const isString = typeof prev[0]?.[schema.primaryKey] === 'string';
+      const isNumber = typeof prev[0]?.[schema.primaryKey] === 'number';
+      if (isString) {
+        tempKey = generateID() as T[TKey];
+      } else if (isNumber) {
+        tempKey = (Math.max(
+          ...prev.map((v) => v[schema.primaryKey] as number),
+        ) + 1) as T[TKey];
+      }
+    }
+
     try {
-      const tempKey = item[schema.primaryKey];
-      tableData.update((cur) => [...cur, item]);
-      let payload = item;
+      tableData.update((cur) => [...cur, item as T]);
+
+      let payload = item as T;
+
       if (!fromEvent) {
         const key = await untracked(client.value).add<T>(
           tableName,
-          item,
+          item as T,
           controller.signal,
         );
         if (key !== tempKey) {
@@ -146,11 +168,14 @@ export function createNewTable<T extends Record<PropertyKey, any>>(
           type: 'add',
           payload,
         });
+        return key as T[TKey];
       }
+      return tempKey as T[TKey];
     } catch (err) {
       if (isDevMode())
         console.error(`Error adding value to table ${tableName}:`, err);
       tableData.set(prev);
+      return tempKey as T[TKey];
     }
   };
 
@@ -225,9 +250,10 @@ export function createNewTable<T extends Record<PropertyKey, any>>(
   };
 }
 
-export function createNoopTable<T extends Record<PropertyKey, any>>(
-  tableName: string,
-): IDBTable<T> {
+export function createNoopTable<
+  T extends Record<PropertyKey, any>,
+  TKey extends keyof T,
+>(tableName: string): IDBTable<T, TKey> {
   const data = toResourceObject<T[]>(
     resource({
       loader: () => Promise.resolve([]),
@@ -239,7 +265,7 @@ export function createNoopTable<T extends Record<PropertyKey, any>>(
   return {
     ...data,
     name: tableName,
-    add: () => Promise.resolve(),
+    add: () => Promise.resolve(Math.random() as T[TKey]),
     update: () => Promise.resolve(),
     remove: () => Promise.resolve(),
   };

packages/local/src/lib/idb/idb.ts

@@ -110,13 +110,13 @@ export type CreateIDBOptions<T extends Record<PropertyKey, any>> = Omit<
  *  users.add({ name: 'John Doe' });
  *```
  */
-export function idb<T extends Record<PropertyKey, any>>(
-  tableName: string,
-  opt: CreateIDBTableOptions<T>,
-): IDBTable<T> {
+export function idb<
+  T extends Record<PropertyKey, any>,
+  TKey extends keyof T = keyof T,
+>(tableName: string, opt?: CreateIDBTableOptions<T>): IDBTable<T, TKey> {
   const client =
-    opt.client ??
-    (opt.injector
+    opt?.client ??
+    (opt?.injector
       ? opt.injector.get(DefaultConnection).client
       : inject(DefaultConnection).client);
 

tsconfig.base.json

@@ -7,7 +7,6 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "noUncheckedIndexedAccess": true,
     "importHelpers": true,
     "target": "es2015",
     "module": "esnext",