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:
@@ -7,7 +7,9 @@ let mediaItems: unknown[] = [];
|
||||
function initBookshelf(): void {
|
||||
const savedLibrary = localStorage.getItem("selectedLibrary");
|
||||
if (savedLibrary) {
|
||||
const select = document.getElementById("library-select") as HTMLSelectElement;
|
||||
const select = document.getElementById(
|
||||
"library-select",
|
||||
) as HTMLSelectElement;
|
||||
if (select && select.value) {
|
||||
currentLibraryId = savedLibrary;
|
||||
loadBookshelf(savedLibrary);
|
||||
@@ -196,7 +198,7 @@ export {
|
||||
viewBook,
|
||||
};
|
||||
|
||||
Alpine.store("bookshelf", {
|
||||
Alpine.data("bookshelf", () => ({
|
||||
changePage,
|
||||
initBookshelf,
|
||||
loadBookshelf,
|
||||
@@ -204,4 +206,4 @@ Alpine.store("bookshelf", {
|
||||
selectLibrary,
|
||||
setupEventDelegation,
|
||||
viewBook,
|
||||
});
|
||||
}));
|
||||
|
||||
Reference in New Issue
Block a user