Search index not loaded
'; - searchResults.classList.remove("hidden"); - return; - } - - const results = idx.search(query); - - if (results.length === 0) { - searchResults.innerHTML = - 'No results found
'; - } else { - searchResults.innerHTML = results - .slice(0, 10) - .map((result: { ref: string }) => { - const doc = docsData[result.ref]; - if (!doc) return ""; - - return ` - -${doc.title || result.ref}
- ${doc.section ? `${doc.section}
` : ""} - - `; - }) - .join(""); - } - - searchResults.classList.remove("hidden"); - } catch (error) { - console.error("Search error:", error); - searchResults.innerHTML = - 'Search error
'; - searchResults.classList.remove("hidden"); - } -} - -document.addEventListener("DOMContentLoaded", () => { - initializeDocsSearch(); -}); - -// Register with Alpine for template access -Alpine.global("docs", { - toggleSidebar, - initializeSearch: initializeDocsSearch, -}); - -// ES module exports -export { toggleSidebar, initializeDocsSearch }; -``` - ---- - -**ESBuild Migration Changes Only:** -- ✅ Added 1 import (Alpine from "./alpine") -- ✅ Removed 1 line (window export) -- ✅ Added 7 lines (Alpine.global() registration) -- ✅ Added 1 line (ES module export) - -**Search Functionality:** Unchanged (handled by separate DOCS_SEARCH_IMPLEMENTATION.md task) - -**Note:** The `lunrIndexData` and `docsData` undefined variables will be fixed when the backend API search is implemented (see DOCS_SEARCH_IMPLEMENTATION.md). - ---- - -#### 1.4.3: No Other Files Need Function Wrapping Changes - -**Confirmed Analysis:** -- ✅ `header.ts` - Only exports functions, no wrapping -- ✅ `woodPaneling.ts` - Only exports functions, no wrapping -- ✅ All other consumer files - Only import/use functions, no wrapping - -**Only 2 files affected:** themeDropdown.ts and docs.ts - ---- - -#### 1.4.4: Verification Steps - -After completing both file conversions: - -```bash -# Build TypeScript -npm run build:ts - -# Run application -go run . - -# Test in browser: -# 1. Navigate to dashboard -# 2. Click theme dropdown - should work and update indicators -# 3. Navigate to /docs -# 4. Search in docs - should work without console errors -``` - -**Expected Results:** -- ✅ Theme dropdown opens and updates indicators -- ✅ Wood paneling indicators update correctly -- ✅ Docs search works (lunr loaded via ES import) -- ✅ No console errors about missing window.lunr -- ✅ No console errors about missing window.lunrIndex -- ✅ No console errors about missing window.docsData - -**Common Issues:** -- If theme dropdown doesn't open: Check if toggleThemeDropdown import is correct -- If indicators don't update: Check if updateWoodPanelingIndicators is called -- If docs search fails: Check if lunr is imported correctly (not via window) -- If data missing: Check if fetch() API is working (not using window globals) - -### Step 1.5: Remove Window Exports from Consumer Files (If Present) - -After converting all reads to imports, check if consumer files have window exports to remove. - -**Note:** Not all files have window exports. Some files (like dashboard.ts) use event delegation and don't export to window. - -**Files WITH window exports to remove:** - -**web/src/library.ts** (lines 690-704) -```typescript -// DELETE these window exports: -(window as any).deleteLibrary = deleteLibrary; -(window as any).showLibraryFolders = showLibraryFolders; -(window as any).addLibraryFolder = addLibraryFolder; -(window as any).removeLibraryFolder = removeLibraryFolder; -(window as any).setLibraryVisibility = setLibraryVisibility; -(window as any).loadUserVisibility = loadUserVisibility; -(window as any).editLibrary = editLibrary; -(window as any).handleCreateLibrarySubmit = handleCreateLibrarySubmit; -(window as any).showFolderBrowser = showFolderBrowser; -(window as any).navigateFolderBrowser = navigateFolderBrowser; -(window as any).selectBrowseFolder = selectBrowseFolder; -(window as any).hideFolderBrowser = hideFolderBrowser; -(window as any).showDeleteModal = showDeleteModal; -(window as any).hideDeleteModal = hideDeleteModal; -(window as any).confirmDeleteLibrary = confirmDeleteLibrary; -``` - -**web/src/collections.ts** (multiple locations: lines 204-208, 243, 315-317, 472-476, 912-923) -```typescript -// DELETE all window exports (26 functions total) -// Examples: -(window as any).loadCollections = loadCollections; -(window as any).loadCollectionRules = loadCollectionRules; -// ... etc (all 26 exports) -``` - -**web/src/bookshelf.ts** (lines 127-130) -```typescript -// DELETE these window exports: -(window as any).selectLibrary = selectLibrary; -(window as any).loadBookshelf = loadBookshelf; -(window as any).selectBook = selectBook; -(window as any).changePage = changePage; -``` - -**web/src/api-explorer.ts** (lines 186-189) -```typescript -// DELETE these window exports: -(window as any).sendApiRequest = sendApiRequest; -(window as any).loadFromHistory = loadFromHistory; -(window as any).copyCurl = copyCurl; -(window as any).formatJson = formatJson; -``` - -**Files WITHOUT window exports (already clean):** -- ✅ **dashboard.ts** - Uses event delegation, no window exports -- ✅ **admin.ts** - Check if it has exports -- ✅ **queue.ts** - Check if it has exports -- ✅ **conflicts.ts** - Check if it has exports -- ✅ **analytics.ts** - Check if it has exports -- ✅ **device-management.ts** - Check if it has exports -- ✅ **linking.ts** - Check if it has exports -- ✅ **custom-section-builder.ts** - Check if it has exports - -**Verification:** -For each file, search for `(window as any).` at the end of the file. If present, remove those lines. - -**Only keep Alpine.global()** for functions that templates call directly. - -### Step 1.6: Verify Build and Test - -```bash -npm run build:ts -go run . -``` - -**Verification**: -- Build succeeds -- All pages still work (dashboard, library, collections, etc.) -- Console shows no errors -- All onclick handlers still work - -**Why this works**: Internal dependencies now use imports, but window exports still exist for templates. App is fully functional. - ---- - -## Phase 2: Dual Exports - ES Modules + Alpine Bridge - -**Goal**: Establish Alpine.js as the bridge to templates while keeping ES exports for TypeScript. - -**Files**: All files that export functions used by templates - -**Duration**: 2-3 hours - -### Step 2.1: Ensure Alpine Initialization File - -**web/src/alpine.ts** (Already exists, verify it's correct) -```typescript -import Alpine from "alpinejs"; - -// Extend Window interface -declare global { - interface Window { - Alpine: typeof Alpine; - } -} - -// Initialize Alpine -window.Alpine = Alpine; -Alpine.start(); - -// Re-export for other modules -export { Alpine }; -``` - -### Step 2.2: Register Template Functions with Alpine - -For each file that templates call, register functions with Alpine: - -**web/src/api.ts** (Already done ✅) -```typescript -Alpine.global("api", { - get: apiGet, - post: apiPost, - // ... etc -}); -``` - -**web/src/toast.ts** (Already done ✅) -```typescript -Alpine.global("showToast", { - error: (message: string, duration?: number) => showToast(message, "error", duration), - success: (message: string, duration?: number) => showToast(message, "success", duration), - info: (message: string, duration?: number) => showToast(message, "info", duration), -}); -``` - -**web/src/header.ts** -```typescript -Alpine.global("header", { - logout, - toggleThemeDropdown, - toggleUserMenu, - changeThemeTo: (theme: string) => { - changeThemeTo(theme); - updateThemeIndicators(); // Call themeDropdown function - }, -}); -``` - -**web/src/library.ts** -```typescript -Alpine.global("library", { - deleteLibrary, - showLibraryFolders, - addLibraryFolder, - removeLibraryFolder, -}); -``` - -**web/src/collections.ts** -```typescript -Alpine.global("collections", { - loadCollections, - createRule, - deleteRule, - testRule, - navigateToCollection, - selectColor, - closeCollectionModal, - initColorSelection, - selectIcon, - filterIcons, - showAllIcons, - populateIconGrid, - initIconSelection, - initCollectionDetail, - showAddBooksModal, - hideAddBooksModal, - searchBooksForCollections, - toggleBookSelection, - addbooksToAdd, - removeBook, - toggleBookForRemoval, - updateSelectedCount, - removebooksToAdd, - filterCollectionBooks, - backToCollections, -}); -``` - -**web/src/admin.ts** -```typescript -Alpine.global("admin", { - triggerLibraryScan, - triggerQuickScan, - loadSystemStats, - scanAllLibraries, - loadWatchStatus, - hideScanProgress, - stopScanStatusPolling, -}); -``` - -**web/src/queue.ts** -```typescript -Alpine.global("queue", { - refreshQueue, - processPendingItems, - clearFailedItems, - clearAllItems, - retryQueueItem, - deleteQueueItem, -}); -``` - -**web/src/conflicts.ts** -```typescript -Alpine.global("conflicts", { - refreshConflicts, - resolveConflict, - bulkResolve, - bulkDismiss, - dismissAllResolved, - showResolveModal, - hideResolveModal, - handleResolveSubmit, -}); -``` - -**web/src/docs.ts** -```typescript -Alpine.global("docs", { - toggleSidebar, - initializeSearch: initializeDocsSearch, -}); -``` - -**web/src/search.ts** -```typescript -Alpine.global("search", { - selectLibraryAndBook, -}); -``` - -**web/src/device-management.ts** -```typescript -Alpine.global("devices", { - copyToClipboard, - regenerateDeviceToken, -}); -``` - -**web/src/password_validation.ts** -```typescript -Alpine.global("validation", { - initPasswordValidation, -}); -``` - -### Step 2.3: Remove Old Window Exports - -After Alpine registration, REMOVE the old window export lines: - -**Before**: -```typescript -(window as any).api = { ... }; -Alpine.global("api", { ... }); -``` - -**After**: -```typescript -Alpine.global("api", { ... }); -``` - -Systematically search and remove these patterns from all files. - -### Step 2.4: Verify Build - -```bash -npm run build:ts -go run . -``` - -**Verification**: -- Build succeeds -- All pages still work -- Alpine is loaded (check browser DevTools: `window.Alpine` should be defined) -- Console shows no errors - -**Why this works**: Functions now registered with Alpine instead of window, but templates still use onclick="func()" so they still work. - ---- - -## Phase 3: Template Migration (Incremental) - -**Goal**: Migrate templates one-by-one from onclick handlers to Alpine directives. - -**Strategy**: One template at a time, test each, can ship after each migration. - -**Duration**: 1-2 hours per template (27 templates = 27-54 hours total) - -### Template Migration Pattern - -For each template file: - -#### Step A: Remove Individual Script Tags - -**Before**: -```templ - - - - - - -``` - -**After**: -```templ - - -``` - -**Note**: Keep htmx.min.js separate (loaded before main.js) - -#### Step B: Convert onclick to @click - -**Before**: -```templ - -