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.
112 lines
2.6 KiB
TypeScript
112 lines
2.6 KiB
TypeScript
import { Alpine } from "./alpine";
|
|
import { showToast } from "./toast";
|
|
|
|
function getAuthHeader(): string {
|
|
const token = localStorage.getItem("token");
|
|
return token ? `Bearer ${token}` : "";
|
|
}
|
|
|
|
async function apiGet(url: string): Promise<Response> {
|
|
return fetch(`/api${url}`, {
|
|
headers: {
|
|
Authorization: getAuthHeader(),
|
|
"Content-Type": "application/json",
|
|
},
|
|
});
|
|
}
|
|
|
|
async function apiPost(url: string, data?: unknown): Promise<Response> {
|
|
return fetch(`/api${url}`, {
|
|
method: "POST",
|
|
headers: {
|
|
Authorization: getAuthHeader(),
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: data ? JSON.stringify(data) : undefined,
|
|
});
|
|
}
|
|
|
|
async function apiPut(url: string, data?: unknown): Promise<Response> {
|
|
return fetch(`/api${url}`, {
|
|
method: "PUT",
|
|
headers: {
|
|
Authorization: getAuthHeader(),
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: data ? JSON.stringify(data) : undefined,
|
|
});
|
|
}
|
|
|
|
async function apiDelete<T extends object>(
|
|
url: string,
|
|
data?: T,
|
|
): Promise<Response> {
|
|
return fetch(`/api${url}`, {
|
|
method: "DELETE",
|
|
headers: {
|
|
Authorization: getAuthHeader(),
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: data ? JSON.stringify(data) : undefined,
|
|
});
|
|
}
|
|
|
|
async function apiPatch(url: string, data?: unknown): Promise<Response> {
|
|
return fetch(`/api${url}`, {
|
|
method: "PATCH",
|
|
headers: {
|
|
Authorization: getAuthHeader(),
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: data ? JSON.stringify(data) : undefined,
|
|
});
|
|
}
|
|
|
|
async function handleResponse<T>(response: Response): Promise<T> {
|
|
if (!response.ok) {
|
|
const errorData = await response
|
|
.json()
|
|
.catch(() => ({ error: "Unknown error" }));
|
|
throw new Error(errorData.error || `HTTP ${response.status}`);
|
|
}
|
|
return response.json();
|
|
}
|
|
|
|
async function handleVoidResponse(response: Response): Promise<void> {
|
|
if (!response.ok) {
|
|
const errorData = await response
|
|
.json()
|
|
.catch(() => ({ error: "Unknown error" }));
|
|
throw new Error(errorData.error || `HTTP ${response.status}`);
|
|
}
|
|
}
|
|
|
|
function handleError(error: unknown, context: string): void {
|
|
console.error(`${context}:`, error);
|
|
const message =
|
|
error instanceof Error ? error.message : "An unexpected error occurred";
|
|
showToast(message, "error");
|
|
}
|
|
|
|
export {
|
|
apiGet,
|
|
apiPost,
|
|
apiPut,
|
|
apiDelete,
|
|
apiPatch,
|
|
handleResponse,
|
|
handleVoidResponse,
|
|
handleError,
|
|
};
|
|
|
|
Alpine.data("api", () => ({
|
|
get: apiGet,
|
|
post: apiPost,
|
|
put: apiPut,
|
|
delete: apiDelete,
|
|
patch: apiPatch,
|
|
handleResponse: handleResponse,
|
|
handleVoidResponse: handleVoidResponse,
|
|
handleError: handleError,
|
|
}));
|