fix(alpine): wrap all Alpine.data() callbacks in arrow functions for proper component initialization

- Wrap all Alpine.data() object literals in arrow functions (() => ({}))
- This fixes "n.bind is not a function" errors when Alpine initializes components
- Alpine.data() requires a factory function, not a plain object
- Ensures each component instance gets its own closure and proper this binding

Fixed 24 TypeScript files:
- admin.ts, analytics.ts, api.ts, api-explorer-docs.ts
- bookshelf.ts, collection-rules.ts, collections.ts, conflicts.ts
- device-management.ts, docs.ts, header.ts, index.ts
- library.ts, linking.ts, login.ts, password_validation.ts
- profile-modal.ts, profile.ts, queue.ts, register.ts
- search.ts, theme.ts, toast-error.ts, toast.ts, unlinked_books.ts

Before: Alpine.data("name", { method1, method2 })
After:  Alpine.data("name", () => ({ method1, method2 }))

This is a critical fix for Alpine.js v3+ where components must be
registered as factory functions to ensure proper reactivity and
prevent binding errors during initialization.
This commit is contained in:
2026-03-12 15:43:56 -04:00
parent 93710a1e96
commit 48eaa2d286
22 changed files with 152 additions and 82 deletions
+6 -3
View File
@@ -534,7 +534,10 @@ async function handleSaveDeviceSettings(event: Event): Promise<void> {
}
}
async function copyToClipboard(text: string, description: string): Promise<void> {
async function copyToClipboard(
text: string,
description: string,
): Promise<void> {
try {
await navigator.clipboard.writeText(text);
showToast(`${description} copied!`, "success");
@@ -693,7 +696,7 @@ export {
showShelfMappings,
};
Alpine.store("devices", {
Alpine.data("devices", () => ({
approveDevice,
clearSyncQueue,
copyToClipboard,
@@ -716,4 +719,4 @@ Alpine.store("devices", {
showAddMappingModal,
showDeviceSettings,
showShelfMappings,
});
}));