05f8e2e3b6
- Create reusable components: auth, api-client, shared-types - ModeTemplate with Hono backend and SvelteKit frontend - Auth store refactored to class-based Svelte 5 pattern - SSR-safe hydrate() pattern for localStorage access - Frontend builds successfully with Svelte 5 runes
API Client Component
Frontend helper for making authenticated requests to the backend.
Usage
import { createApiClient } from './components/api-client';
import { STORAGE_KEYS } from './components/auth';
// Create client with token getter
const api = createApiClient({
baseUrl: '/api', // or 'http://localhost:3005/api'
getToken: () => localStorage.getItem(STORAGE_KEYS.PB_TOKEN),
});
// Make requests
const result = await api.get<User[]>('/users');
if (result.ok) {
console.log(result.data); // User[]
} else {
console.error(result.error); // Error message
}
// POST with body
const created = await api.post<Job>('/jobs', {
title: 'New Job',
status: 'open',
});
Methods
api.get<T>(path)- GET requestapi.post<T>(path, body?)- POST requestapi.put<T>(path, body?)- PUT requestapi.patch<T>(path, body?)- PATCH requestapi.delete<T>(path)- DELETE request
Response Type
interface ApiResponse<T> {
ok: boolean; // true if status 2xx
status: number; // HTTP status code
data?: T; // Response data (if ok)
error?: string; // Error message (if not ok)
}
Copying to a Mode
- Copy
components/api-client/to your mode'sfrontend/lib/api-client/ - Update imports
Dependencies
None - fully self-contained. No package.json needed - inherits from consuming project.