Typescript timeeeeeeeeeeeeeeeeeeeeee

Author: NellowTCS

Build/index.html

@@ -127,6 +127,6 @@ <h3>Select a Note or Create New</h3>
     </div>
     <div id="toastContainer" class="toast-container"></div>
 
-    <script type="module" src="./src/main.js"></script>
+    <script type="module" src="./src/main.ts"></script>
   </body>
 </html>

Build/package-lock.json

@@ -21,7 +21,6 @@
   "homepage": "https://github.com/NellowTCS/HTMLNotes#readme",
   "dependencies": {
     "marked": "^16.3.0",
-    "tiny-markdown-editor": "^0.2.3",
     "vite": "^7.1.3"
   },
   "devDependencies": {

Build/package.json

@@ -1,44 +1,47 @@
-// database.js - IndexedDB operations for notes
-
-let db;
+// database.ts - IndexedDB operations for notes
+let db: IDBDatabase;
 const DB_NAME = "HTMLNotesDB";
 const DB_VERSION = 1;
 const OBJECT_STORE_NAME = "notes";
 
-export function openDatabase() {
+export function openDatabase(): Promise<IDBDatabase> {
   return new Promise((resolve, reject) => {
     const request = indexedDB.open(DB_NAME, DB_VERSION);
     request.onerror = () => {
       console.error("IndexedDB error:", request.error);
       reject("Database error");
     };
-    request.onupgradeneeded = (event) => {
-      db = event.target.result;
+    request.onupgradeneeded = (event: IDBVersionChangeEvent) => {
+      if (!event.target) {
+        reject("Database upgrade event target is null");
+        return;
+      }
+      db = (event.target as IDBOpenDBRequest).result;
       const objectStore = db.createObjectStore(OBJECT_STORE_NAME, {
         keyPath: "id",
         autoIncrement: true,
       });
       objectStore.createIndex("date", "date", { unique: false });
       objectStore.createIndex("category", "category", { unique: false });
     };
-    request.onsuccess = () => {
-      db = event.target.result;
+    request.onsuccess = (event: Event) => {
+      db = (event.target as IDBOpenDBRequest).result;
       resolve(db);
     };
   });
 }
 
-export function addNote(note) {
+export function addNote(note: Note): Promise<number> {
   return new Promise((resolve, reject) => {
     const transaction = db.transaction([OBJECT_STORE_NAME], "readwrite");
     const objectStore = transaction.objectStore(OBJECT_STORE_NAME);
     const request = objectStore.add(note);
-    request.onsuccess = () => resolve(request.result);
+    request.onsuccess = () => resolve(request.result as number);
     request.onerror = () => reject("Error adding note");
   });
 }
 
-export function updateNote(note) {
+export function updateNote(note: Note): Promise<void> {
   return new Promise((resolve, reject) => {
     const transaction = db.transaction([OBJECT_STORE_NAME], "readwrite");
     const objectStore = transaction.objectStore(OBJECT_STORE_NAME);
@@ -48,7 +51,7 @@ export function updateNote(note) {
   });
 }
 
-export function deleteNote(id) {
+export function deleteNote(id: number): Promise<void> {
   return new Promise((resolve, reject) => {
     const transaction = db.transaction([OBJECT_STORE_NAME], "readwrite");
     const objectStore = transaction.objectStore(OBJECT_STORE_NAME);
@@ -58,24 +61,22 @@ export function deleteNote(id) {
   });
 }
 
-export function getAllNotes() {
+export function getAllNotes(): Promise<Note[]> {
   return new Promise((resolve, reject) => {
     const transaction = db.transaction([OBJECT_STORE_NAME], "readonly");
     const objectStore = transaction.objectStore(OBJECT_STORE_NAME);
     const request = objectStore.getAll();
-    request.onsuccess = () => resolve(request.result);
+    request.onsuccess = () => resolve(request.result as Note[]);
     request.onerror = () => reject("Error getting all notes");
   });
 }
 
-export function getNoteById(id) {
-  const noteId = parseInt(id);
-  if (isNaN(noteId)) return Promise.reject("Invalid note ID");
+export function getNoteById(id: number): Promise<Note | undefined> {
   return new Promise((resolve, reject) => {
     const transaction = db.transaction([OBJECT_STORE_NAME], "readonly");
     const objectStore = transaction.objectStore(OBJECT_STORE_NAME);
-    const request = objectStore.get(noteId);
-    request.onsuccess = () => resolve(request.result);
+    const request = objectStore.get(id);
+    request.onsuccess = () => resolve(request.result as Note | undefined);
     request.onerror = () => reject("Error getting note by ID");
   });
 }

Build/src/database.js Build/src/database.tsBuild/src/database.js renamed to Build/src/database.ts

@@ -1,15 +1,15 @@
-// editor.js - TinyMDE editor functions
+// editor.ts - TinyMDE editor functions
 const TinyMDE = window.TinyMDE;
 import { showToast } from "./notifications.js";
 import { showSavingIndicator, hideSavingIndicator } from "./ui.js";
 
-let tinyMdeEditor = null;
+let tinyMdeEditor: any = null;
 
-export function initializeTinyMDE(debounceCallback, attempts = 3) {
-  const editorContainer = document.getElementById("tinymde-editor");
+export function initializeTinyMDE(debounceCallback: () => void, attempts: number = 3): void {
+  const editorContainer = document.getElementById("tinymde-editor") as HTMLElement;
   if (!editorContainer) {
     if (attempts > 0) {
-      setTimeout(() => initializeTinyMDE(attempts - 1), 100);
+      setTimeout(() => initializeTinyMDE(debounceCallback, attempts - 1), 100);
       return;
     }
     showToast("Editor container not found.", "error");
@@ -51,75 +51,75 @@ export function initializeTinyMDE(debounceCallback, attempts = 3) {
       editor: tinyMdeEditor,
     });
 
-    const observer = new MutationObserver((mutations) => {
+    const observer = new MutationObserver((mutations: MutationRecord[]) => {
       if (
         mutations.some(
           (m) =>
             m.type === "childList" ||
             (m.type === "characterData" &&
-              m.target.parentNode?.closest(".TinyMDE"))
+              (m.target as Element).parentElement?.closest(".TinyMDE"))
         )
       ) {
-        if (!window.isSettingEditorContent) debounceCallback();
+        if (!(window as any).isSettingEditorContent) debounceCallback();
       }
     });
 
-    const editorContent = editorContainer.querySelector(".TinyMDE");
+    const editorContent = editorContainer.querySelector(".TinyMDE") as Element;
     if (editorContent) {
       observer.observe(editorContent, {
         childList: true,
         subtree: true,
         characterData: true,
       });
     }
-    window.editorObserver = observer;
+    (window as any).editorObserver = observer;
   } catch (error) {
     console.error("Error initializing TinyMDE:", error);
     showToast("Error initializing editor.", "error");
   }
 }
 
-export function setEditorContent(content) {
+export function setEditorContent(content: string): void {
   if (!tinyMdeEditor) return;
   try {
-    window.isSettingEditorContent = true;
+    (window as any).isSettingEditorContent = true;
     tinyMdeEditor.setContent(content || "");
-    setTimeout(() => (window.isSettingEditorContent = false), 100);
+    setTimeout(() => ((window as any).isSettingEditorContent = false), 100);
   } catch (error) {
     console.error("Error setting editor content:", error);
-    window.isSettingEditorContent = false;
+    (window as any).isSettingEditorContent = false;
   }
 }
 
-export function getEditorContent() {
+export function getEditorContent(): string {
   return tinyMdeEditor ? tinyMdeEditor.getContent().trim() : "";
 }
 
-export function enableEditor() {
+export function enableEditor(): void {
   if (tinyMdeEditor && typeof tinyMdeEditor.enable === "function") {
     tinyMdeEditor.enable();
   }
 }
 
-export function focusEditor() {
+export function focusEditor(): void {
   if (tinyMdeEditor && tinyMdeEditor.codemirror) {
     tinyMdeEditor.codemirror.focus();
   }
 }
 
-export function createDebounceAutosave(handleSaveNoteCallback) {
-  let timeout;
+export function createDebounceAutosave(handleSaveNoteCallback: (showNotification: boolean) => Promise<void>): () => void {
+  let timeout: number;
   let lastContent = "";
   let lastTitle = "";
   let lastTags = "";
-  let saveQueue = [];
+  let saveQueue: { currentContent: string; currentTitle: string; currentTags: string }[] = [];
   let isSaving = false;
 
   return () => {
     clearTimeout(timeout);
     const currentContent = getEditorContent();
-    const noteTitleInput = document.getElementById("noteTitle");
-    const noteTagsInput = document.getElementById("noteTags");
+    const noteTitleInput = document.getElementById("noteTitle") as HTMLInputElement;
+    const noteTagsInput = document.getElementById("noteTags") as HTMLInputElement;
     const currentTitle = noteTitleInput ? noteTitleInput.value.trim() : "";
     const currentTags = noteTagsInput ? noteTagsInput.value.trim() : "";
 
@@ -135,7 +135,7 @@ export function createDebounceAutosave(handleSaveNoteCallback) {
     const processQueue = async () => {
       if (saveQueue.length === 0 || isSaving) return;
       isSaving = true;
-      const addNoteBtn = document.getElementById("addNoteBtn");
+      const addNoteBtn = document.getElementById("addNoteBtn") as HTMLButtonElement;
       addNoteBtn.disabled = true;
       addNoteBtn.setAttribute("aria-disabled", "true");
       const timeoutId = setTimeout(() => {
@@ -147,10 +147,7 @@ export function createDebounceAutosave(handleSaveNoteCallback) {
         }
       }, 5000);
 
-      const { currentContent, currentTitle, currentTags } = saveQueue.shift();
-      const { showSavingIndicator, hideSavingIndicator } = await import(
-        "./ui.js"
-      );
+      const { currentContent, currentTitle, currentTags } = saveQueue.shift()!;
       showSavingIndicator();
       try {
         await handleSaveNoteCallback(false);