john-okeefe
48eaa2d286
- 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.
36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import { Alpine } from "./alpine";
|
|
import { showToast } from "./toast";
|
|
|
|
function showErrorToast(message: string): void {
|
|
showToast(message, "error", 8000);
|
|
|
|
// Add retry button to the toast
|
|
setTimeout(() => {
|
|
const toastContainer = document.getElementById("toast-container");
|
|
if (toastContainer && toastContainer.lastElementChild) {
|
|
const toast = toastContainer.lastElementChild as HTMLElement;
|
|
const retryBtn = document.createElement("button");
|
|
retryBtn.className =
|
|
"ml-4 px-3 py-1 bg-white/20 hover:bg-white/30 rounded text-sm font-medium transition-colors";
|
|
retryBtn.textContent = "Retry";
|
|
retryBtn.onclick = function () {
|
|
window.location.reload();
|
|
};
|
|
|
|
// Insert before the close button
|
|
const closeBtn = toast.querySelector(".toast-close");
|
|
if (closeBtn && closeBtn.parentElement) {
|
|
closeBtn.parentElement.insertBefore(retryBtn, closeBtn);
|
|
} else {
|
|
toast.appendChild(retryBtn);
|
|
}
|
|
}
|
|
}, 100);
|
|
}
|
|
|
|
export { showErrorToast };
|
|
|
|
Alpine.data("toastError", () => ({
|
|
showErrorToast,
|
|
}));
|