@simplysm/core-browser 13.0.85 → 13.0.86

package/src/utils/IndexedDbStore.ts

@@ -4,6 +4,9 @@ export interface StoreConfig {
 }
 
 export class IndexedDbStore {
+  private _db: IDBDatabase | undefined;
+  private _opening: Promise<IDBDatabase> | undefined;
+
   constructor(
     private readonly _dbName: string,
     private readonly _dbVersion: number,
@@ -11,7 +14,15 @@ export class IndexedDbStore {
   ) {}
 
   async open(): Promise<IDBDatabase> {
-    return new Promise((resolve, reject) => {
+    if (this._db != null) {
+      return this._db;
+    }
+
+    if (this._opening != null) {
+      return this._opening;
+    }
+
+    this._opening = new Promise<IDBDatabase>((resolve, reject) => {
       const req = indexedDB.open(this._dbName, this._dbVersion);
       req.onupgradeneeded = () => {
         const db = req.result;
@@ -21,10 +32,32 @@ export class IndexedDbStore {
           }
         }
       };
-      req.onsuccess = () => resolve(req.result);
-      req.onerror = () => reject(req.error);
-      req.onblocked = () => reject(new Error("Database blocked by another connection"));
+      req.onsuccess = () => {
+        const db = req.result;
+        db.onversionchange = () => {
+          db.close();
+          this._db = undefined;
+          this._opening = undefined;
+        };
+        db.onclose = () => {
+          this._db = undefined;
+          this._opening = undefined;
+        };
+        this._db = db;
+        this._opening = undefined;
+        resolve(db);
+      };
+      req.onerror = () => {
+        this._opening = undefined;
+        reject(req.error);
+      };
+      req.onblocked = () => {
+        this._opening = undefined;
+        reject(new Error("Database blocked by another connection"));
+      };
     });
+
+    return this._opening;
   }
 
   async withStore<TResult>(
@@ -33,71 +66,72 @@ export class IndexedDbStore {
     fn: (store: IDBObjectStore) => Promise<TResult>,
   ): Promise<TResult> {
     const db = await this.open();
-    try {
-      const tx = db.transaction(storeName, mode);
-      const store = tx.objectStore(storeName);
-
-      // Await fn result first
-      let result: TResult;
-      let fnError: unknown;
-      try {
-        result = await fn(store);
-      } catch (err) {
-        fnError = err;
-        tx.abort();
-      }
+    const tx = db.transaction(storeName, mode);
+    const store = tx.objectStore(storeName);
 
-      // Wait for transaction completion
-      return await new Promise<TResult>((resolve, reject) => {
-        if (fnError !== undefined) {
-          tx.onerror = () => {
-            db.close();
-            reject(fnError);
-          };
-        } else {
-          tx.oncomplete = () => {
-            db.close();
-            resolve(result!);
-          };
-          tx.onerror = () => {
-            db.close();
-            reject(tx.error);
-          };
-        }
-      });
+    // Await fn result first
+    let result: TResult;
+    let fnError: unknown;
+    let hasFnError = false;
+    try {
+      result = await fn(store);
     } catch (err) {
-      db.close();
-      throw err;
+      fnError = err;
+      hasFnError = true;
+      tx.abort();
     }
+
+    // Wait for transaction completion
+    return new Promise<TResult>((resolve, reject) => {
+      if (hasFnError) {
+        tx.onabort = () => {
+          reject(fnError);
+        };
+      } else {
+        tx.oncomplete = () => {
+          resolve(result!);
+        };
+        tx.onerror = () => {
+          reject(tx.error);
+        };
+      }
+    });
   }
 
   async get<TValue>(storeName: string, key: IDBValidKey): Promise<TValue | undefined> {
     return this.withStore(storeName, "readonly", async (store) => {
-      return new Promise((resolve, reject) => {
-        const req = store.get(key);
-        req.onsuccess = () => resolve(req.result as TValue | undefined);
-        req.onerror = () => reject(req.error);
-      });
+      return this._resolveRequest(store.get(key)) as Promise<TValue | undefined>;
     });
   }
 
   async put(storeName: string, value: unknown): Promise<void> {
-    return this.withStore(storeName, "readwrite", async (store) => {
-      return new Promise((resolve, reject) => {
-        const req = store.put(value);
-        req.onsuccess = () => resolve();
-        req.onerror = () => reject(req.error);
-      });
+    await this.withStore(storeName, "readwrite", async (store) => {
+      await this._resolveRequest(store.put(value));
+    });
+  }
+
+  async delete(storeName: string, key: IDBValidKey): Promise<void> {
+    await this.withStore(storeName, "readwrite", async (store) => {
+      await this._resolveRequest(store.delete(key));
     });
   }
 
   async getAll<TItem>(storeName: string): Promise<TItem[]> {
     return this.withStore(storeName, "readonly", async (store) => {
-      return new Promise((resolve, reject) => {
-        const req = store.getAll();
-        req.onsuccess = () => resolve(req.result as TItem[]);
-        req.onerror = () => reject(req.error);
-      });
+      return this._resolveRequest(store.getAll()) as Promise<TItem[]>;
     });
   }
+
+  private _resolveRequest<T>(req: IDBRequest<T>): Promise<T> {
+    return new Promise((resolve, reject) => {
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => reject(req.error);
+    });
+  }
+
+  close(): void {
+    this._db?.close();
+    this._db = undefined;
+    this._opening = undefined;
+  }
 }

package/src/utils/IndexedDbVirtualFs.ts

@@ -23,7 +23,7 @@ export class IndexedDbVirtualFs {
   async deleteByPrefix(keyPrefix: string): Promise<boolean> {
     return this._db.withStore(this._storeName, "readwrite", async (store) => {
       return new Promise((resolve, reject) => {
-        const req = store.openCursor();
+        const req = store.openCursor(IDBKeyRange.bound(keyPrefix, keyPrefix + "\uffff"));
         let found = false;
         req.onsuccess = () => {
           const cursor = req.result;
@@ -46,7 +46,7 @@ export class IndexedDbVirtualFs {
   async listChildren(prefix: string): Promise<{ name: string; isDirectory: boolean }[]> {
     return this._db.withStore(this._storeName, "readonly", async (store) => {
       return new Promise((resolve, reject) => {
-        const req = store.openCursor();
+        const req = store.openCursor(IDBKeyRange.bound(prefix, prefix + "\uffff"));
         const map = new Map<string, boolean>();
         req.onsuccess = () => {
           const cursor = req.result;

package/tests/extensions/element-ext.spec.ts

@@ -152,6 +152,40 @@ describe("Element prototype extensions", () => {
     });
   });
 
+  describe("findFirstFocusableChild", () => {
+    it("returns first focusable child element", () => {
+      container.innerHTML = `<span>text</span><button id="btn">click</button>`;
+
+      const result = container.findFirstFocusableChild();
+
+      expect(result?.id).toBe("btn");
+    });
+
+    it("returns undefined when no focusable child exists", () => {
+      container.innerHTML = `<span>text</span><div>no focusable</div>`;
+
+      const result = container.findFirstFocusableChild();
+
+      expect(result).toBeUndefined();
+    });
+
+    it("returns depth-first order element", () => {
+      container.innerHTML = `<div><button id="deep">deep</button></div><button id="shallow">shallow</button>`;
+
+      const result = container.findFirstFocusableChild();
+
+      expect(result?.id).toBe("deep");
+    });
+
+    it("recognizes tabindex attribute as focusable", () => {
+      container.innerHTML = `<div tabindex="0" id="tab">focusable</div>`;
+
+      const result = container.findFirstFocusableChild();
+
+      expect(result?.id).toBe("tab");
+    });
+  });
+
   describe("isOffsetElement", () => {
     it("position: relative is an offset element", () => {
       container.style.position = "relative";

package/tests/utils/IndexedDbStore.spec.ts

@@ -0,0 +1,103 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { IndexedDbStore } from "../../src/utils/IndexedDbStore";
+
+let dbCounter = 0;
+function uniqueDbName() {
+  return `test_db_${Date.now()}_${dbCounter++}`;
+}
+
+const STORE_NAME = "items";
+const KEY_PATH = "id";
+
+function createStore(dbName?: string) {
+  return new IndexedDbStore(dbName ?? uniqueDbName(), 1, [
+    { name: STORE_NAME, keyPath: KEY_PATH },
+  ]);
+}
+
+describe("IndexedDbStore", () => {
+  let store: IndexedDbStore;
+
+  afterEach(() => {
+    store.close();
+  });
+
+  it("put/get: 항목 저장 후 조회하면 값이 일치한다", async () => {
+    store = createStore();
+    const item = { id: "key1", value: "hello" };
+
+    await store.put(STORE_NAME, item);
+    const result = await store.get<{ id: string; value: string }>(STORE_NAME, "key1");
+
+    expect(result).toEqual(item);
+  });
+
+  it("getAll: 여러 항목 저장 후 전체 조회하면 배열 크기 및 내용이 일치한다", async () => {
+    store = createStore();
+    const items = [
+      { id: "a", value: 1 },
+      { id: "b", value: 2 },
+      { id: "c", value: 3 },
+    ];
+
+    for (const item of items) {
+      await store.put(STORE_NAME, item);
+    }
+
+    const result = await store.getAll<{ id: string; value: number }>(STORE_NAME);
+
+    expect(result).toHaveLength(3);
+    expect(result).toEqual(expect.arrayContaining(items));
+  });
+
+  it("delete: 항목 저장 후 삭제하면 get으로 undefined가 반환된다", async () => {
+    store = createStore();
+    await store.put(STORE_NAME, { id: "del1", value: "to-delete" });
+
+    await store.delete(STORE_NAME, "del1");
+
+    const result = await store.get(STORE_NAME, "del1");
+    expect(result).toBeUndefined();
+  });
+
+  it("존재하지 않는 키 get: undefined를 반환한다", async () => {
+    store = createStore();
+
+    const result = await store.get(STORE_NAME, "nonexistent");
+
+    expect(result).toBeUndefined();
+  });
+
+  it("커넥션 캐싱: 연속 호출 시 동일 DB 커넥션을 재사용한다", async () => {
+    store = createStore();
+
+    await store.put(STORE_NAME, { id: "cache1", value: "first" });
+    const result1 = await store.get<{ id: string; value: string }>(STORE_NAME, "cache1");
+
+    await store.put(STORE_NAME, { id: "cache2", value: "second" });
+    const result2 = await store.get<{ id: string; value: string }>(STORE_NAME, "cache2");
+
+    expect(result1).toEqual({ id: "cache1", value: "first" });
+    expect(result2).toEqual({ id: "cache2", value: "second" });
+  });
+
+  it("abort 처리: withStore 콜백에서 에러 발생 시 Promise가 reject된다", async () => {
+    store = createStore();
+
+    await expect(
+      store.withStore(STORE_NAME, "readwrite", () => {
+        throw new Error("intentional error");
+      }),
+    ).rejects.toThrow("intentional error");
+  }, 5000);
+
+  it("close 후 재연결: close() 호출 후 get 호출 시 자동으로 재연결되어 정상 동작한다", async () => {
+    store = createStore();
+
+    await store.put(STORE_NAME, { id: "reconnect", value: "data" });
+    store.close();
+
+    const result = await store.get<{ id: string; value: string }>(STORE_NAME, "reconnect");
+    expect(result).toEqual({ id: "reconnect", value: "data" });
+  });
+});

package/tests/utils/IndexedDbVirtualFs.spec.ts

@@ -0,0 +1,171 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { IndexedDbStore } from "../../src/utils/IndexedDbStore";
+import { IndexedDbVirtualFs } from "../../src/utils/IndexedDbVirtualFs";
+
+let dbCounter = 0;
+function uniqueDbName() {
+  return `test_vfs_${Date.now()}_${dbCounter++}`;
+}
+
+const STORE_NAME = "files";
+const KEY_FIELD = "path";
+
+function createVfs(dbName?: string) {
+  const store = new IndexedDbStore(dbName ?? uniqueDbName(), 1, [
+    { name: STORE_NAME, keyPath: KEY_FIELD },
+  ]);
+  const vfs = new IndexedDbVirtualFs(store, STORE_NAME, KEY_FIELD);
+  return { store, vfs };
+}
+
+describe("IndexedDbVirtualFs", () => {
+  let store: IndexedDbStore;
+
+  afterEach(() => {
+    store.close();
+  });
+
+  it("putEntry + getEntry (file): 파일 저장 후 조회하면 kind와 dataBase64가 일치한다", async () => {
+    const ctx = createVfs();
+    store = ctx.store;
+
+    await ctx.vfs.putEntry("/a/file.txt", "file", btoa("hello"));
+    const entry = await ctx.vfs.getEntry("/a/file.txt");
+
+    expect(entry).toMatchObject({ kind: "file", dataBase64: btoa("hello") });
+  });
+
+  it("putEntry + getEntry (dir): 디렉터리 저장 후 조회하면 kind가 dir이다", async () => {
+    const ctx = createVfs();
+    store = ctx.store;
+
+    await ctx.vfs.putEntry("/a", "dir");
+    const entry = await ctx.vfs.getEntry("/a");
+
+    expect(entry).toMatchObject({ kind: "dir" });
+  });
+
+  it("getEntry 미존재: 존재하지 않는 키를 조회하면 undefined를 반환한다", async () => {
+    const ctx = createVfs();
+    store = ctx.store;
+
+    const entry = await ctx.vfs.getEntry("/nonexist");
+
+    expect(entry).toBeUndefined();
+  });
+
+  it("deleteByPrefix - prefix 자체 삭제: prefix와 정확히 일치하는 항목이 삭제된다", async () => {
+    const ctx = createVfs();
+    store = ctx.store;
+
+    await ctx.vfs.putEntry("/a/b", "dir");
+
+    await ctx.vfs.deleteByPrefix("/a/b");
+
+    const entry = await ctx.vfs.getEntry("/a/b");
+    expect(entry).toBeUndefined();
+  });
+
+  it("deleteByPrefix - 하위 항목 삭제: prefix 하위의 모든 항목이 삭제된다", async () => {
+    const ctx = createVfs();
+    store = ctx.store;
+
+    await ctx.vfs.putEntry("/a/b", "dir");
+    await ctx.vfs.putEntry("/a/b/c", "file", btoa("c"));
+    await ctx.vfs.putEntry("/a/b/d", "file", btoa("d"));
+
+    await ctx.vfs.deleteByPrefix("/a/b");
+
+    expect(await ctx.vfs.getEntry("/a/b")).toBeUndefined();
+    expect(await ctx.vfs.getEntry("/a/b/c")).toBeUndefined();
+    expect(await ctx.vfs.getEntry("/a/b/d")).toBeUndefined();
+  });
+
+  it("deleteByPrefix - 무관한 항목 유지: prefix와 무관한 항목은 삭제되지 않는다", async () => {
+    const ctx = createVfs();
+    store = ctx.store;
+
+    await ctx.vfs.putEntry("/a/b", "dir");
+    await ctx.vfs.putEntry("/a/x", "file", btoa("x"));
+
+    await ctx.vfs.deleteByPrefix("/a/b");
+
+    const entry = await ctx.vfs.getEntry("/a/x");
+    expect(entry).toMatchObject({ kind: "file", dataBase64: btoa("x") });
+  });
+
+  it("deleteByPrefix - 반환값: 삭제 대상이 있으면 true, 없으면 false를 반환한다", async () => {
+    const ctx = createVfs();
+    store = ctx.store;
+
+    await ctx.vfs.putEntry("/a/b", "dir");
+
+    const resultTrue = await ctx.vfs.deleteByPrefix("/a/b");
+    expect(resultTrue).toBe(true);
+
+    const resultFalse = await ctx.vfs.deleteByPrefix("/nonexist");
+    expect(resultFalse).toBe(false);
+  });
+
+  it("listChildren - 직접 자식 목록: prefix의 직접 자식만 반환한다", async () => {
+    const ctx = createVfs();
+    store = ctx.store;
+
+    await ctx.vfs.putEntry("/root/a", "file", btoa("a"));
+    await ctx.vfs.putEntry("/root/b", "dir");
+    await ctx.vfs.putEntry("/root/b/c", "file", btoa("c"));
+
+    const children = await ctx.vfs.listChildren("/root/");
+
+    expect(children).toHaveLength(2);
+    const names = children.map((c) => c.name).sort();
+    expect(names).toEqual(["a", "b"]);
+  });
+
+  it("listChildren - isDirectory 판별: 파일과 디렉터리를 올바르게 구분한다", async () => {
+    const ctx = createVfs();
+    store = ctx.store;
+
+    await ctx.vfs.putEntry("/root/a", "file", btoa("a"));
+    await ctx.vfs.putEntry("/root/b", "dir");
+    await ctx.vfs.putEntry("/root/b/c", "file", btoa("c"));
+
+    const children = await ctx.vfs.listChildren("/root/");
+
+    const fileChild = children.find((c) => c.name === "a");
+    const dirChild = children.find((c) => c.name === "b");
+    expect(fileChild?.isDirectory).toBe(false);
+    expect(dirChild?.isDirectory).toBe(true);
+  });
+
+  it("ensureDir - 중첩 경로 생성: 중간 디렉터리가 모두 생성된다", async () => {
+    const ctx = createVfs();
+    store = ctx.store;
+
+    await ctx.vfs.ensureDir((p) => p, "/a/b/c");
+
+    expect(await ctx.vfs.getEntry("/a")).toMatchObject({ kind: "dir" });
+    expect(await ctx.vfs.getEntry("/a/b")).toMatchObject({ kind: "dir" });
+    expect(await ctx.vfs.getEntry("/a/b/c")).toMatchObject({ kind: "dir" });
+  });
+
+  it("ensureDir - 멱등성: 같은 경로로 두 번 호출해도 에러가 발생하지 않는다", async () => {
+    const ctx = createVfs();
+    store = ctx.store;
+
+    await ctx.vfs.ensureDir((p) => p, "/a/b/c");
+    await ctx.vfs.ensureDir((p) => p, "/a/b/c");
+
+    expect(await ctx.vfs.getEntry("/a/b/c")).toMatchObject({ kind: "dir" });
+  });
+
+  it("ensureDir - 루트: 루트 경로를 생성하면 getEntry로 조회 가능하다", async () => {
+    const ctx = createVfs();
+    store = ctx.store;
+
+    await ctx.vfs.ensureDir((p) => p, "/");
+
+    const entry = await ctx.vfs.getEntry("/");
+    expect(entry).toMatchObject({ kind: "dir" });
+  });
+});

package/tests/utils/fetch.spec.ts

@@ -0,0 +1,154 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { fetchUrlBytes } from "../../src/utils/fetch";
+
+function createMockReader(chunks: Uint8Array[]) {
+  let index = 0;
+  const releaseLock = vi.fn();
+  const reader = {
+    read: vi.fn(() => {
+      if (index < chunks.length) {
+        return Promise.resolve({ done: false as const, value: chunks[index++] });
+      }
+      return Promise.resolve({ done: true as const, value: undefined });
+    }),
+    releaseLock,
+  };
+  return { reader, releaseLock };
+}
+
+function createMockResponse(options: {
+  ok?: boolean;
+  status?: number;
+  statusText?: string;
+  contentLength?: number | null;
+  chunks?: Uint8Array[];
+  bodyNull?: boolean;
+}) {
+  const { reader, releaseLock } = options.bodyNull
+    ? { reader: undefined, releaseLock: vi.fn() }
+    : createMockReader(options.chunks ?? []);
+
+  return {
+    response: {
+      ok: options.ok ?? true,
+      status: options.status ?? 200,
+      statusText: options.statusText ?? "OK",
+      headers: {
+        get: (name: string) => {
+          if (name === "Content-Length" && options.contentLength != null) {
+            return String(options.contentLength);
+          }
+          return null;
+        },
+      },
+      body: options.bodyNull ? null : { getReader: () => reader },
+    } as unknown as Response,
+    releaseLock,
+  };
+}
+
+describe("fetchUrlBytes", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("downloads binary data when Content-Length is present", async () => {
+    const chunk1 = new Uint8Array([1, 2, 3, 4, 5]);
+    const chunk2 = new Uint8Array([6, 7, 8, 9, 10]);
+    const { response } = createMockResponse({
+      contentLength: 10,
+      chunks: [chunk1, chunk2],
+    });
+    vi.stubGlobal("fetch", vi.fn().mockResolvedValue(response));
+
+    const result = await fetchUrlBytes("https://example.com/file.bin");
+
+    expect(result).toEqual(new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]));
+  });
+
+  it("calls onProgress callback for each chunk", async () => {
+    const chunk1 = new Uint8Array([1, 2, 3, 4, 5]);
+    const chunk2 = new Uint8Array([6, 7, 8, 9, 10]);
+    const { response } = createMockResponse({
+      contentLength: 10,
+      chunks: [chunk1, chunk2],
+    });
+    vi.stubGlobal("fetch", vi.fn().mockResolvedValue(response));
+
+    const onProgress = vi.fn();
+    await fetchUrlBytes("https://example.com/file.bin", { onProgress });
+
+    expect(onProgress).toHaveBeenCalledTimes(2);
+    expect(onProgress).toHaveBeenNthCalledWith(1, { receivedLength: 5, contentLength: 10 });
+    expect(onProgress).toHaveBeenNthCalledWith(2, { receivedLength: 10, contentLength: 10 });
+  });
+
+  it("downloads binary data when Content-Length is absent", async () => {
+    const chunk1 = new Uint8Array([10, 20]);
+    const chunk2 = new Uint8Array([30, 40, 50]);
+    const { response } = createMockResponse({
+      contentLength: null,
+      chunks: [chunk1, chunk2],
+    });
+    vi.stubGlobal("fetch", vi.fn().mockResolvedValue(response));
+
+    const result = await fetchUrlBytes("https://example.com/stream");
+
+    expect(result).toEqual(new Uint8Array([10, 20, 30, 40, 50]));
+  });
+
+  it("throws on HTTP error response", async () => {
+    const { response } = createMockResponse({
+      ok: false,
+      status: 404,
+      statusText: "Not Found",
+    });
+    vi.stubGlobal("fetch", vi.fn().mockResolvedValue(response));
+
+    await expect(fetchUrlBytes("https://example.com/missing")).rejects.toThrow(
+      "Download failed: 404 Not Found",
+    );
+  });
+
+  it("throws when response body is null", async () => {
+    const { response } = createMockResponse({ bodyNull: true });
+    vi.stubGlobal("fetch", vi.fn().mockResolvedValue(response));
+
+    await expect(fetchUrlBytes("https://example.com/nobody")).rejects.toThrow(
+      "Response body is not readable",
+    );
+  });
+
+  it("calls releaseLock after successful download", async () => {
+    const { response, releaseLock } = createMockResponse({
+      contentLength: 3,
+      chunks: [new Uint8Array([1, 2, 3])],
+    });
+    vi.stubGlobal("fetch", vi.fn().mockResolvedValue(response));
+
+    await fetchUrlBytes("https://example.com/file.bin");
+
+    expect(releaseLock).toHaveBeenCalledOnce();
+  });
+
+  it("calls releaseLock even when reader.read throws", async () => {
+    const releaseLock = vi.fn();
+    const reader = {
+      read: vi.fn().mockRejectedValue(new Error("Network error")),
+      releaseLock,
+    };
+    const response = {
+      ok: true,
+      status: 200,
+      statusText: "OK",
+      headers: {
+        get: () => null,
+      },
+      body: { getReader: () => reader },
+    } as unknown as Response;
+    vi.stubGlobal("fetch", vi.fn().mockResolvedValue(response));
+
+    await expect(fetchUrlBytes("https://example.com/fail")).rejects.toThrow("Network error");
+    expect(releaseLock).toHaveBeenCalledOnce();
+  });
+});