@indietabletop/appkit 7.0.0-0 → 7.0.0-rc.0

package/lib/ModalDialog/style.css.ts

@@ -0,0 +1,88 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { MinWidth } from "../media.ts";
+import { ZIndex } from "../vars.css.ts";
+
+const scaleTransition = {
+  transition: "transform 200ms, opacity 200ms",
+  transform: "scale(1.1)",
+
+  selectors: {
+    "&[data-enter]": {
+      opacity: 1,
+      transform: "scale(1)",
+    },
+
+    "&[data-leave]": {
+      opacity: 0,
+      transform: "scale(0.9)",
+    },
+  },
+};
+
+const translateTransition = {
+  transition: "transform 200ms, opacity 200ms",
+  transform: "translateY(5rem)",
+
+  selectors: {
+    "&[data-enter]": {
+      opacity: 1,
+      transform: "translateY(0)",
+    },
+
+    "&[data-leave]": {
+      opacity: 0,
+      transform: "translateY(5rem)",
+    },
+  },
+};
+
+export const dialog = recipe({
+  base: {
+    position: "fixed",
+    inset: 0,
+    zIndex: ZIndex.DIALOG,
+    margin: "auto",
+    overflow: "auto",
+    opacity: 0,
+    backgroundColor: "white",
+  },
+
+  variants: {
+    size: {
+      large: {
+        ...translateTransition,
+        inlineSize: "100%",
+        blockSize: "100%",
+
+        "@media": {
+          [MinWidth.MEDIUM]: {
+            ...scaleTransition,
+            blockSize: "fit-content",
+            maxInlineSize: "40rem",
+            maxBlockSize: "90%",
+            borderRadius: "1rem",
+          },
+        },
+      },
+
+      small: {
+        ...scaleTransition,
+        inlineSize: "min(24rem, 90svw)",
+        blockSize: "fit-content",
+        borderRadius: "1rem",
+      },
+    },
+  },
+});
+
+export const backdrop = style({
+  backgroundColor: "black",
+  opacity: 0,
+  transition: "opacity 200ms",
+  selectors: {
+    "&[data-enter]": {
+      opacity: 0.4,
+    },
+  },
+});

package/lib/ModernIDB/Cursor.ts

@@ -0,0 +1,91 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+
+import { requestToPromise } from "./utils.ts";
+
+export class Cursor<C extends IDBCursor = IDBCursor> {
+  idbCursor: C;
+
+  constructor(idbCursor: C) {
+    this.idbCursor = idbCursor;
+  }
+
+  get key() {
+    return this.idbCursor.key;
+  }
+
+  get primaryKey() {
+    return this.idbCursor.primaryKey;
+  }
+
+  get direction() {
+    return this.idbCursor.direction;
+  }
+
+  /**
+   * Advances the cursor through the next count records in range.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/IDBCursor/advance
+   */
+  advance(count: number): void {
+    this.idbCursor.advance(count);
+  }
+  /**
+   * Advances the cursor to the next record in range.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/IDBCursor/continue)
+   */
+  continue(key?: IDBValidKey): void {
+    this.idbCursor.continue(key);
+  }
+}
+
+export class CursorWithValue<Item> extends Cursor<IDBCursorWithValue> {
+  get value(): Item {
+    return this.idbCursor.value;
+  }
+
+  /**
+   * Delete the record pointed at by the cursor.
+   *
+   * If successful, request's result will be undefined.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/IDBCursor/delete)
+   */
+  delete(): Promise<undefined> {
+    return requestToPromise(this.idbCursor.delete());
+  }
+  /**
+   * Updated the record pointed at by the cursor with a new value.
+   *
+   * Throws a "DataError" DOMException if the effective object store uses in-line keys and the key would have changed.
+   *
+   * If successful, request's result will be the record's key.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/IDBCursor/update)
+   */
+  update(value: Item): Promise<IDBValidKey> {
+    return requestToPromise(this.idbCursor.update(value));
+  }
+}
+
+export class IndexCursor extends Cursor {
+  /**
+   * Advances the cursor to the next record in range matching or after key and primaryKey. Throws an "InvalidAccessError" DOMException if the source is not an index.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/IDBCursor/continuePrimaryKey)
+   */
+  continuePrimaryKey(key: IDBValidKey, primaryKey: IDBValidKey): void {
+    this.idbCursor.continuePrimaryKey(key, primaryKey);
+  }
+}
+
+export class IndexCursorWithValue<Item> extends CursorWithValue<Item> {
+  /**
+   * Advances the cursor to the next record in range matching or after key and primaryKey. Throws an "InvalidAccessError" DOMException if the source is not an index.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/IDBCursor/continuePrimaryKey)
+   */
+  continuePrimaryKey(key: IDBValidKey, primaryKey: IDBValidKey): void {
+    this.idbCursor.continuePrimaryKey(key, primaryKey);
+  }
+}

package/lib/ModernIDB/ModernIDB.ts

@@ -0,0 +1,337 @@
+/* eslint-disable @typescript-eslint/prefer-promise-reject-errors */
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
+import { ModernIDBError } from "./ModernIDBError.ts";
+import { ObjectStore } from "./ObjectStore.ts";
+import type {
+  BlockingHandler,
+  ModernIDBIndexes,
+  ModernIDBSchema,
+  ModernIDBState,
+  OpenRequestHandlers,
+  TransactionMode,
+  VersionChangeHandler,
+} from "./types.ts";
+import { openRequestToPromise, transactionToPromise } from "./utils.ts";
+import { VersionChangeManager } from "./VersionChangeManager.ts";
+
+export class TransactionEvent<StoreName extends string> extends CustomEvent<{
+  storeNames: StoreName[];
+}> {
+  constructor(type: TransactionMode, storeNames: StoreName[]) {
+    super(type, { detail: { storeNames } });
+  }
+}
+
+type TransactionOptions = IDBTransactionOptions & {
+  /**
+   * Do not emit events when this transaction completes.
+   */
+  noEmit?: boolean;
+};
+
+type DatabaseProps = {
+  name: string;
+  version: number;
+};
+
+export class ModernIDB<
+  Schema extends ModernIDBSchema,
+  IndexNames extends ModernIDBIndexes<Schema>,
+> {
+  readonly name: string;
+  readonly version: number;
+
+  protected state: ModernIDBState = "closed";
+  protected idbDatabase: IDBDatabase | null = null;
+
+  private eventTarget: EventTarget;
+  private onBlocking?: BlockingHandler<Schema, IndexNames>;
+  private onUpgrade?: VersionChangeHandler<Schema, IndexNames>;
+  private onInit?: VersionChangeHandler<Schema, IndexNames>;
+
+  constructor(props: DatabaseProps & OpenRequestHandlers<Schema, IndexNames>) {
+    this.eventTarget = new EventTarget();
+    this.name = props.name;
+    this.version = props.version;
+
+    this.onInit = props.onInit;
+    this.onUpgrade = props.onUpgrade;
+    this.onBlocking = props.onBlocking;
+  }
+
+  public addEventListener(
+    type: TransactionMode,
+    callback: (event: TransactionEvent<string & keyof Schema>) => void,
+    options?: boolean | AddEventListenerOptions,
+  ): void {
+    this.eventTarget.addEventListener(
+      type,
+
+      // The EventTarget should only have events dispatched by ModernIDB,
+      // meaning that it should be safe to assume that the event will be
+      // a TransactionEvent.
+      callback as EventListener,
+      options,
+    );
+  }
+
+  public removeEventListener(
+    type: TransactionMode,
+    callback: (event: TransactionEvent<string & keyof Schema>) => void,
+    options?: boolean | EventListenerOptions,
+  ): void {
+    this.eventTarget.removeEventListener(
+      type,
+
+      // The EventTarget should only have events dispatched by ModernIDB,
+      // meaning that it should be safe to assume that the event will be
+      // a TransactionEvent.
+      callback as EventListener,
+      options,
+    );
+  }
+
+  /**
+   * Opens a connection to IndexedDB.
+   *
+   * ModernIDB instance must be in a `closed` state, otherwise an
+   * `InvalidConnectionStateError` will be thrown.
+   *
+   * If the database needs to upgrade (i.e. supplied version is higher than
+   * the current version), but there are existing connections that don't
+   * close on `versionchange` event (the onBlocking handler), an
+   * `OpenRequestBlockedError` will be thrown.
+   *
+   * Additional browser-specific exceptions can also be thrown. Make
+   * sure to inspect any error's `name` property to differentiate
+   * between the various types of errors that could occur.
+   */
+  async open(handlers?: OpenRequestHandlers<Schema, IndexNames>) {
+    if (this.state !== "closed") {
+      throw new ModernIDBError(
+        "InvalidConnectionStateError",
+        `Cannot open connection to database '${this.name}'. Instance must ` +
+          `be in a 'closed' state in order to be opened, but current ` +
+          `state is '${this.state}'.`,
+      );
+    }
+
+    this.state = "opening";
+
+    // Override handlers supplied in the constructor
+    Object.assign(this, handlers);
+
+    const handleInit = this.onInit;
+    const handleBlocking = this.onBlocking;
+    const handleUpgrade = this.onUpgrade;
+
+    return new Promise<Event>((resolve, reject) => {
+      try {
+        const request = indexedDB.open(this.name, this.version);
+
+        if (handleUpgrade || handleInit) {
+          request.addEventListener(
+            "upgradeneeded",
+            (event) => {
+              const idbDatabase = request.result;
+              const idbTransaction = request.transaction!;
+
+              const manager = new VersionChangeManager<Schema, IndexNames>({
+                idbDatabase,
+                idbTransaction,
+                event,
+              });
+
+              try {
+                if (event.oldVersion === 0) {
+                  handleInit?.({ event, manager, db: this });
+                } else {
+                  handleUpgrade?.({ event, manager, db: this });
+                }
+              } catch (error) {
+                console.error(error);
+                idbTransaction.abort();
+              }
+            },
+            { once: true },
+          );
+        }
+
+        request.addEventListener(
+          "blocked",
+          () => {
+            this.state = "closed";
+            reject(
+              new ModernIDBError(
+                "OpenRequestBlockedError",
+
+                `ModernIDB connection could not be opened because there ` +
+                  `is an open connection preventing a 'versionchange' ` +
+                  `transaction from being created.`,
+              ),
+            );
+          },
+          { once: true },
+        );
+
+        request.addEventListener(
+          "success",
+          (event) => {
+            if (this.state === "opening") {
+              const idb = request.result;
+              this.idbDatabase = idb;
+
+              if (handleBlocking) {
+                this.idbDatabase.addEventListener("versionchange", (event) => {
+                  handleBlocking({ event, db: this });
+                });
+              }
+
+              this.state = "open";
+              resolve(event);
+            }
+          },
+          { once: true },
+        );
+
+        request.addEventListener(
+          "error",
+          () => {
+            this.state = "closed";
+            reject(request.error);
+          },
+          { once: true },
+        );
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+
+  close() {
+    this.state = "closed";
+
+    this.idbDatabase?.close();
+    this.idbDatabase = null;
+  }
+
+  isOpen(): this is this & { idbDatabase: IDBDatabase } {
+    return !!this.idbDatabase;
+  }
+
+  private assertOpen(
+    hint: string,
+  ): asserts this is this & { idbDatabase: IDBDatabase } {
+    if (!this.isOpen()) {
+      throw new ModernIDBError("InvalidConnectionStateError", hint);
+    }
+  }
+
+  transaction<StoreName extends string & keyof Schema>(
+    name: StoreName,
+    mode?: TransactionMode,
+    options?: TransactionOptions,
+  ): [
+    ObjectStore<
+      Schema[StoreName],
+      IndexNames[StoreName] extends string ? IndexNames[StoreName] : never
+    >,
+    Promise<Event>,
+  ];
+
+  transaction<StoreNamesArray extends readonly (string & keyof Schema)[] | []>(
+    names: StoreNamesArray,
+    mode?: TransactionMode,
+    options?: TransactionOptions,
+  ): [
+    {
+      -readonly [Index in keyof StoreNamesArray]: ObjectStore<
+        Schema[StoreNamesArray[Index]],
+        IndexNames[StoreNamesArray[Index]] extends string
+          ? IndexNames[StoreNamesArray[Index]]
+          : never
+      >;
+    },
+    Promise<Event>,
+  ];
+
+  transaction(
+    nameOrNames: string | string[],
+    mode?: TransactionMode,
+    options?: TransactionOptions,
+  ) {
+    const transactionMode = mode ?? "readonly";
+
+    this.assertOpen(
+      `The "transaction" method can only be called on an instance that is ` +
+        `in the "open" state, but current state is: "${this.state}".`,
+    );
+
+    const transaction = this.idbDatabase.transaction(
+      nameOrNames,
+      transactionMode,
+      options,
+    );
+    const complete = transactionToPromise(transaction);
+
+    if (!options?.noEmit) {
+      // Generally, it is best practice to always attach then/catch handlers to
+      // promises. However, in this case, these should be attached in user-code,
+      // as it doesn't make sense to try to handle errors from here.
+      //
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      complete.then((event) => {
+        this.eventTarget.dispatchEvent(
+          new TransactionEvent(
+            transactionMode,
+            Array.isArray(nameOrNames) ? nameOrNames : [nameOrNames],
+          ),
+        );
+        return event;
+      });
+    }
+
+    if (Array.isArray(nameOrNames)) {
+      const objectStores = nameOrNames.map(
+        (name) => new ObjectStore(transaction.objectStore(name)),
+      );
+      return [objectStores, complete];
+    }
+
+    return [new ObjectStore(transaction.objectStore(nameOrNames)), complete];
+  }
+
+  async deleteFromStore(
+    storeName: string & keyof Schema,
+    query: IDBValidKey | IDBKeyRange,
+    options?: IDBTransactionOptions,
+  ) {
+    const [store, done] = this.transaction(storeName, "readwrite", options);
+    await Promise.all([store.delete(query), done]);
+  }
+
+  async getFromStore<StoreName extends string & keyof Schema>(
+    storeName: StoreName,
+    query: IDBValidKey | IDBKeyRange,
+    options?: IDBTransactionOptions,
+  ) {
+    const [store, done] = this.transaction(storeName, "readonly", options);
+    const [data] = await Promise.all([store.get(query), done]);
+    return data;
+  }
+
+  async putToStore<StoreName extends string & keyof Schema>(
+    storeName: StoreName,
+    value: Schema[StoreName],
+    key?: IDBValidKey,
+  ) {
+    const [store, done] = this.transaction(storeName, "readwrite");
+    const [itemKey] = await Promise.all([store.put(value, key), done]);
+    return itemKey;
+  }
+}
+
+export function deleteDatabase(name: string) {
+  return openRequestToPromise(indexedDB.deleteDatabase(name));
+}

package/lib/ModernIDB/ModernIDBError.ts

@@ -0,0 +1,9 @@
+export class ModernIDBError extends Error {
+  constructor(
+    name: "OpenRequestBlockedError" | "InvalidConnectionStateError",
+    message: string,
+  ) {
+    super(message);
+    this.name = name;
+  }
+}