@typedly/indexeddb

A TypeScript type definitions package for IndexedDB.

Table of contents

• Related packages
• Installation
• Api
  • Interface
    • IDBConfig
    • IDBOpenDBRequestEvents
    • IDBOpenStoreResult
    • IDBOpenStoresResult
    • IDBOpenTransactionResult
    • IDBQueryTransactionOptions
    • IDBRequestEvents
    • IDBStoreParameters
    • IDBStoreQuery
    • IDBTransactionEvents
  • Query
    • IDBQueryAdd
    • IDBQueryClear
    • IDBQueryCount
    • IDBQueryDelete
    • IDBQueryGet
    • IDBQueryGetAll
    • IDBQueryGetAllKeys
    • IDBQueryGetKey
    • IDBQueryIndex
    • IDBQueryMethod
    • IDBQueryOpenCursor
    • IDBQueryOpenKeyCursor
    • IDBQueryPut
    • IDBRangeBound
  • Type
    • IDBQueryMethodToStore
    • IDBQueryStoreToMethod
    • IDBRequestHandler
    • IDBSchema
    • IDBStoresFromSchema
    • IDBStoresParameters
  • Settings
    • IDBConnectionSettings
    • IDBSettings
    • IDBSettingsWithConnection
  • Utility
    • IDBKeyPath
    • InsertValue
• Contributing
• Support
• Code of Conduct
• Git
  • Commit
  • Versioning
• License
• Packages

Related packages

• @typescript-package/indexeddb: A TypeScript wrapper for IndexedDB client-side storage.

Installation

npm install @typedly/indexeddb --save-peer

Api

import type {
  // Interface.
  IDBConfig,
  IDBOpenDBRequestEvents,
  IDBOpenStoreResult,
  IDBOpenStoresResult,
  IDBOpenTransactionResult,
  IDBQueryTransactionOptions,
  IDBRequestEvents,
  IDBStoreParameters,
  IDBStoreQuery,
  IDBTransactionEvents,
  // Query
  IDBQueryAdd,
  IDBQueryClear,
  IDBQueryCount,
  IDBQueryDelete,
  IDBQueryGet,
  IDBQueryGetAll,
  IDBQueryGetAllKeys,
  IDBQueryGetKey,
  IDBQueryIndex,
  IDBQueryMethod,
  IDBQueryOpenCursor,
  IDBQueryPut,
  IDBRangeBound,
  // Type.
  IDBQueryMethodToStore,
  IDBQueryStoreToMethod,
  IDBRequestHandler,
  IDBSchema,
  IDBStoresFromSchema,
  IDBStoresParameters,
  // Settings.
  IDBConnectionSettings,
  IDBSettings,
  IDBSettingsWithConnection,
  // Utility Types.
  IDBKeyPath,
  InsertValue
} from '@typedly/indexeddb';

Interface

IDBConfig

import { IDBConfig } from '@typedly/indexeddb';

const config: IDBConfig<'MyDatabase', 'users' | 'orders', 1> = {
  name: 'MyDatabase',
  version: 1,
  stores: {
    users: {
      keyPath: 'id',
      autoIncrement: true,
      index: [{
        keyPath: 'id',
        name: 'idIndex',
        options: { unique: true }
      }]
    },
    orders: {
      keyPath: 'orderId',
      autoIncrement: true,
    },
  },
}

const indexeddb = indexedDB.open(
  'test-db', // name
  1 // version
);

indexeddb.onupgradeneeded = (event) => {
  const db = (event.target as IDBOpenDBRequest).result;

  if (!config.stores) return;

  for (const [storeName, params] of Object.entries(config.stores)) {
    if (db.objectStoreNames.contains(storeName)) continue;

    const store = db.createObjectStore(storeName, {
      keyPath: params.keyPath, // config.stores[storeName].keyPath
      autoIncrement: params.autoIncrement, // config.stores[storeName].autoIncrement
    });

    params.index?.forEach((idx) => {
      store.createIndex(idx.name, idx.keyPath, idx.options); // config.stores[storeName].index
    });
  }
};

IDBOpenDBRequestEvents

import { IDBOpenDBRequestEvents } from '@typedly/indexeddb';

const openDBRequest = indexedDB.open('MyDatabase', 1);
const events: IDBOpenDBRequestEvents = {
  onerror: (event) => {
    console.error('Error opening database:', event);
  },
  onsuccess: (event) => {
    console.log('Database opened successfully:', event);
  },
  onupgradeneeded: (event) => {
    console.log('Database upgrade needed:', event);
    const db = openDBRequest.result;
    if (!db.objectStoreNames.contains('users')) {
      db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
    }
  },
  onblocked: (event) => {
    console.warn('Database open request is blocked:', event);
  },
};
Object.assign(openDBRequest, events);

IDBOpenStoreResult

import { IDBOpenStoreResult } from '@typedly/indexeddb';

const openStoreResult: IDBOpenStoreResult = {
  done: new Promise((resolve) => resolve()),
  store: {} as IDBObjectStore,
  transaction: {} as IDBTransaction,
};

IDBOpenStoresResult

import { IDBOpenStoresResult } from '@typedly/indexeddb';

const openStoresResult: IDBOpenStoresResult<'users' | 'orders'> = {
  done: new Promise((resolve) => resolve()),
  stores: {
    users: {} as IDBObjectStore,
    orders: {} as IDBObjectStore,
  },
  transaction: {} as IDBTransaction,
};

IDBOpenTransactionResult

import { IDBOpenTransactionResult } from '@typedly/indexeddb';

const openTransactionResult: IDBOpenTransactionResult = {
  done: new Promise((resolve) => resolve()),
  transaction: {} as IDBTransaction,
};

IDBQueryTransactionOptions

import { IDBQueryTransactionOptions } from '@typedly/indexeddb';

const transactionOptions: IDBQueryTransactionOptions = {
  mode: 'readwrite',
  ondone: (done) => console.log('Transaction completed:', done),
  ontransaction: (transaction) => console.log('Transaction event:', transaction),
  options: { durability: 'relaxed' },
};

IDBRequestEvents

import { IDBRequestEvents } from '@typedly/indexeddb';

const requestEvents: IDBRequestEvents<string> = {
  onsuccess: (result) => console.log('Request succeeded with result:', result),
  onerror: (error) => console.error('Request failed with error:', error),
};

IDBStoreParameters

import { IDBStoreParameters } from '@typedly/indexeddb';

const storeParameters: IDBStoreParameters = {
  keyPath: 'id',
  autoIncrement: true,
  index: [
    {
      name: 'nameIndex',
      keyPath: 'name',
      options: { unique: false },
    },
    {
      name: 'emailIndex',
      keyPath: 'email',
      options: { unique: true },
    },
  ],
};

IDBStoreQuery

import { IDBStoreQuery } from '@typedly/indexeddb';

const storeQuery: IDBStoreQuery<MySchema, 'users' | 'orders'> = {
  store: (store) => {
    // Perform operations on the store
  },
  method: (method) => {
    // Perform operations using the method
  },
};

IDBTransactionEvents

import { IDBTransactionEvents } from '@typedly/indexeddb';

IDBQueryAdd

import { IDBQueryAdd } from '@typedly/indexeddb';

const addQuery: IDBQueryAdd<{ periodic: { id: number, name: string } }, 'periodic'> = {
  value: { id: 1, name: 'Hydrogen' },
  key: 1,
  onsuccess: (ev) => console.log('Add operation successful.', ev),
  onerror: (ev) => console.error('Add operation failed.', ev),
};

IDBQueryClear

import { IDBQueryClear } from '@typedly/indexeddb';

const clearQuery: IDBQueryClear = {
  onsuccess: (ev) => console.log('Clear operation successful.', ev),
  onerror: (ev) => console.error('Clear operation failed.', ev),
};

IDBQueryCount

import { IDBQueryCount } from '@typedly/indexeddb';

const countQuery: IDBQueryCount = {
  query: IDBKeyRange.bound(1, 10),
  onsuccess: (ev) => console.log('Count operation successful.', ev),
  onerror: (ev) => console.error('Count operation failed.', ev),
};

IDBQueryDelete

import { IDBQueryDelete } from '@typedly/indexeddb';

const deleteQuery: IDBQueryDelete = {
  query: IDBKeyRange.bound(1, 10),
  onsuccess: (ev) => console.log('Delete operation successful.', ev),
  onerror: (ev) => console.error('Delete operation failed.', ev),
};

IDBQueryGet

import { IDBQueryGet } from '@typedly/indexeddb';

const getQuery: IDBQueryGet<'periodic', { periodic: { id: number, name: string } }, 'periodic'> = {
  query: 1,
  onsuccess: (ev) => console.log('Get operation successful.', ev),
  onerror: (ev) => console.error('Get operation failed.', ev),
};

IDBQueryGetAll

import { IDBQueryGetAll } from '@typedly/indexeddb';

const getAllQuery: IDBQueryGetAll<'periodic', { periodic: { id: number, name: string } }, 'periodic'> = {
  query: IDBKeyRange.bound(1, 10),
  count: 5,
  onsuccess: (ev) => console.log('Get All operation successful.', ev),
  onerror: (ev) => console.error('Get All operation failed.', ev),
};

IDBQueryGetAllKeys

import { IDBQueryGetAllKeys } from '@typedly/indexeddb';

const getAllKeysQuery: IDBQueryGetAllKeys = {
  query: IDBKeyRange.bound(1, 10),
  count: 5,
  onsuccess: (ev) => console.log('Get All Keys operation successful.', ev),
  onerror: (ev) => console.error('Get All Keys operation failed.', ev),
};

IDBQueryGetKey

import { IDBQueryGetKey } from '@typedly/indexeddb';

const getKeyQuery: IDBQueryGetKey = {
  query: IDBKeyRange.bound(1, 10),
  onsuccess: (ev) => console.log('Get Key operation successful.', ev),
  onerror: (ev) => console.error('Get Key operation failed.', ev),
};

IDBQueryIndex

import { IDBQueryIndex } from '@typedly/indexeddb';

const indexQuery: IDBQueryIndex = {
  name: 'indexName',
  onsuccess: (ev) => console.log('Index query operation successful.', ev),
  onerror: (ev) => console.error('Index query operation failed.', ev),
};

IDBQueryMethod

import { IDBQueryMethod } from '@typedly/indexeddb';

const queryMethod: IDBQueryMethod<{ periodic: { id: number, name: string } }, 'periodic', 'periodic'> = {
  add: {
    storeName: 'periodic',
    value: { id: 1, name: 'Hydrogen' },
    key: 1,
    onsuccess: (ev) => console.log('Add operation successful.', ev),
    onerror: (ev) => console.error('Add operation failed.', ev),
  },
  clear: {
    storeName: 'periodic',
    onsuccess: (ev) => console.log('Clear operation successful.', ev),
    onerror: (ev) => console.error('Clear operation failed.', ev),
  },
  count: {
    storeName: 'periodic',
    query: IDBKeyRange.bound(1, 10),
    onsuccess: (ev) => console.log('Count operation successful.', ev),
    onerror: (ev) => console.error('Count operation failed.', ev),
  },
  delete: {
    storeName: 'periodic',
    query: 1,
    onsuccess: (ev) => console.log('Delete operation successful.', ev),
    onerror: (ev) => console.error('Delete operation failed.', ev),
  },
  get: {
    storeName: 'periodic',
    query: 1,
    onsuccess: (ev) => console.log('Get operation successful.', ev),
    onerror: (ev) => console.error('Get operation failed.', ev),
  },
  getAll: {
    storeName: 'periodic',
    query: IDBKeyRange.bound(1, 10),
    count: 5,
    onsuccess: (ev) => console.log('Get All operation successful.', ev),
    onerror: (ev) => console.error('Get All operation failed.', ev),
  },
  index: {
    storeName: 'periodic',
    name: 'indexName',
    onsuccess: (ev) => console.log('Index operation successful.', ev),
    onerror: (ev) => console.error('Index operation failed.', ev),
  },
  openCursor: {
    storeName: 'periodic',
    query: IDBKeyRange.bound(1, 10),
    direction: 'next',
    onsuccess: (ev) => console.log('Open Cursor operation successful.', ev),
    onerror: (ev) => console.error('Open Cursor operation failed.', ev),
  },
  put: {
    storeName: 'periodic',
    value: { id: 1, name: 'Hydrogen' },
    key: 1,
    onsuccess: (ev) => console.log('Put operation successful.', ev),
    onerror: (ev) => console.error('Put operation failed.', ev),
  },
};

IDBQueryOpenCursor

import { IDBQueryOpenCursor } from '@typedly/indexeddb';

const openCursorQuery: IDBQueryOpenCursor = {
  query: IDBKeyRange.bound(1, 10),
  direction: 'next',
  onsuccess: (ev) => console.log('Open Cursor operation successful.', ev),
  onerror: (ev) => console.error('Open Cursor operation failed.', ev),
};

IDBQueryOpenKeyCursor

import { IDBQueryOpenKeyCursor } from '@typedly/indexeddb';

const openKeyCursorQuery: IDBQueryOpenKeyCursor = {
  query: IDBKeyRange.bound(1, 10),
  direction: 'next',
  onsuccess: (ev) => console.log('Open Key Cursor operation successful.', ev),
  onerror: (ev) => console.error('Open Key Cursor operation failed.', ev),
};

IDBQueryPut

import { IDBQueryPut } from '@typedly/indexeddb';

const putQuery: IDBQueryPut<{ periodic: { id: number, name: string } }, 'periodic'> = {
  value: { id: 1, name: 'Hydrogen' },
  key: 1,
  onsuccess: (ev) => console.log('Put operation successful.', ev),
  onerror: (ev) => console.error('Put operation failed.', ev),
};

IDBRangeBound

import { IDBRangeBound } from '@typedly/indexeddb';

Type

IDBQueryMethodToStore

import { IDBQueryMethodToStore } from '@typedly/indexeddb';

const queryMethodToStore: IDBQueryMethodToStore<{periodic: {id: number, name: string}}> = {
  get: {
    periodic: {
      query: 1,
      onsuccess: (ev) => console.log('Get operation successful.', ev),
      onerror: (ev) => console.error('Get operation failed.', ev),
    }
  },
  put: {
    periodic: {
      value: { id: 1, name: 'Hydrogen' },
      onsuccess: (ev) => console.log('Put operation successful.', ev),
      onerror: (ev) => console.error('Put operation failed.', ev),
    }
  }
};

IDBQueryStoreToMethod

import { IDBQueryStoreToMethod } from '@typedly/indexeddb';

const queryStoreToMethod: IDBQueryStoreToMethod<{ users: { id: number } }, 'users'> = {
  users: {
    add: { value: { id: 1 } },
    get: { query: 1 },
    clear: {},
    index: { name: 'id' },
    openCursor: { query: IDBKeyRange.lowerBound(1), direction: 'next' }
  }
};

IDBRequestHandler

import { IDBRequestHandler } from '@typedly/indexeddb';

IDBSchema

import { IDBSchema } from '@typedly/indexeddb';

IDBStoresFromSchema

import { IDBStoresFromSchema } from '@typedly/indexeddb';

type User = {
  id: number;
  name: string;
  email: string;
  tags: string[];
  history: number[];
  profile: {
    bio: string;
    age?: number;
  };
  friends: { id: number; name: string }[];
};

type Post = {
  id: number;
  title: string;
};

type Schema = {
  users: User;
  posts: Post;
};

export class TestClass1<Schema extends IDBSchema> {
  constructor(private stores: IDBStoresFromSchema<Schema>) {}

  public add<Name extends keyof Schema>(store: Name, value: Schema[Name]) {
    // value is fully type-checked against your TypeScript types!
  }
}

const test = new TestClass1<Schema>({
  users: { keyPath: 'id', autoIncrement: true },
  posts: { keyPath: 'id', autoIncrement: true },
});

IDBStoresParameters

import { IDBStoresParameters } from '@typedly/indexeddb';

Settings

IDBConnectionSettings

import { IDBConnectionSettings } from '@typedly/indexeddb';

const connectionSettings: IDBConnectionSettings<'MyDatabase', 1> = {
  name: 'MyDatabase',
  version: 1,
  events: {
    onerror: (event) => {
      console.error('Error opening database:', event);
    },
    onsuccess: (event) => {
      console.log('Database opened successfully:', event);
    },
    onupgradeneeded: (event) => {
      console.log('Database upgrade needed:', event);
    },
    onblocked: (event) => {
      console.warn('Database open request blocked:', event);
    }
  }
};

IDBSettings

import { IDBSettings } from '@typedly/indexeddb';

const settings: IDBSettings<'MyDatabase', 'MyStore', 1> = {
  name: 'MyDatabase',
  version: 1,
  parameters: {
    MyStore: {
      keyPath: 'id',
      autoIncrement: true,
      index: [
        { name: 'nameIndex', keyPath: 'name', options: { unique: false } }
      ]
    }
  },
  connectionEvents: {
    onerror: (event) => {
      console.error('Error opening database:', event);
    },
    onsuccess: (event) => {
      console.log('Database opened successfully:', event);
    },
    onupgradeneeded: (event) => {
      console.log('Database upgrade needed:', event);
    },
    onblocked: (event) => {
      console.warn('Database open request blocked:', event);
    }
  }
};

IDBSettingsWithConnection

import { IDBSettingsWithConnection } from '@typedly/indexeddb';

const settingsWithConnection: IDBSettingsWithConnection<'MyDatabase', 'MyStore', 1> = {
  parameters: {
    MyStore: {
      keyPath: 'id',
      autoIncrement: true,
      index: [
        { name: 'nameIndex', keyPath: 'name', options: { unique: false } }
      ]
    }
  },
  connection: {
    name: 'MyDatabase',
    version: 1,
    events: {
      onerror: (event) => {
        console.error('Error opening database:', event);
      },
      onsuccess: (event) => {
        console.log('Database opened successfully:', event);
      },
      onupgradeneeded: (event) => {
        console.log('Database upgrade needed:', event);
      },
      onblocked: (event) => {
        console.warn('Database open request blocked:', event);
      }
    }
  }
};

Utility

IDBKeyPath

import { IDBKeyPath } from '@typedly/indexeddb';

InsertValue

import { InsertValue } from '@typedly/indexeddb';

Contributing

Your contributions are valued! If you'd like to contribute, please feel free to submit a pull request. Help is always appreciated.

Support

If you find this package useful and would like to support its and general development, you can contribute through one of the following payment methods. Your support helps maintain the packages and continue adding new.

Support via:

• 4Fund
• DonorBox
• GitHub
• Ko-fi
• OpenCollective
• Patreon
• PayPal
• Stripe
• ~~Revolut~~

or via Trust Wallet

• BNB
• BTC
• ETH
• USDT (BEP20)
• XLM

Thanks for your support!

Code of Conduct

By participating in this project, you agree to follow Code of Conduct.

GIT

Commit

• AngularJS Git Commit Message Conventions
• Karma Git Commit Msg
• Conventional Commits

Versioning

Semantic Versioning 2.0.0

Given a version number MAJOR.MINOR.PATCH, increment the:

• MAJOR version when you make incompatible API changes,
• MINOR version when you add functionality in a backwards-compatible manner, and
• PATCH version when you make backwards-compatible bug fixes.

Additional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format.

FAQ How should I deal with revisions in the 0.y.z initial development phase?

The simplest thing to do is start your initial development release at 0.1.0 and then increment the minor version for each subsequent release.

How do I know when to release 1.0.0?

If your software is being used in production, it should probably already be 1.0.0. If you have a stable API on which users have come to depend, you should be 1.0.0. If you’re worrying a lot about backwards compatibility, you should probably already be 1.0.0.

License

MIT © typedly (license)

Packages

• @typedly/array: A TypeScript type definitions package to handle array-related operations.
• @typedly/callback: A TypeScript type definitions package for asynchronous and synchronous callback functions of various types.
• @typedly/character: A TypeScript type definitions package for various character types.
• @typedly/context: A TypeScript type definitions package for context data structures.
• @typedly/descriptor: A TypeScript type definitions package for property descriptor.
• @typedly/digit: A TypeScript type definitions package for digit types.
• @typedly/letter: A TypeScript type definitions package for handling letter types.
• @typedly/object: A TypeScript type definitions package to handle object-related operations.
• @typedly/payload: A TypeScript type definitions package for payload data structures.
• @typedly/property: A TypeScript type definitions package to handle object property-related operations.
• @typedly/regexp: A TypeScript type definitions package for RegExp.
• @typedly/symbol: A TypeScript type definitions package for various symbols.