@zogjs/http 0.4.8

package/README.md

@@ -0,0 +1,850 @@
+# ZogHttp Plugin v1.0.0
+
+A powerful, production-ready HTTP client plugin for Zog.js with full support for all HTTP methods, file uploads with progress tracking, request/response interceptors, and reactive state management.
+
+## Features
+
+- ✅ All HTTP methods (GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS)
+- ✅ Request/Response interceptors (before/after hooks)
+- ✅ File upload with real-time progress tracking
+- ✅ File download with progress tracking
+- ✅ Authentication token management (Bearer, Basic)
+- ✅ Custom headers support
+- ✅ Automatic JSON parsing
+- ✅ Request cancellation via AbortController
+- ✅ Reactive loading/error states
+- ✅ Timeout configuration
+- ✅ Base URL configuration
+- ✅ Automatic retry mechanism
+- ✅ TypeScript-friendly API
+
+## Installation
+
+```html
+<script type="module">
+import { createApp } from 'zogjs';
+import { ZogHttpPlugin } from '@zogjs/http';
+
+createApp(() => ({
+  // your data
+}))
+.use(ZogHttpPlugin, {
+  baseURL: 'https://api.example.com',
+  timeout: 30000,
+})
+.mount('#app');
+</script>
+```
+
+## Quick Start
+
+```html
+<div id="app">
+  <div z-if="$http.state.loading">Loading...</div>
+  <div z-if="$http.state.error">{{ $http.state.error }}</div>
+  
+  <ul>
+    <li z-for="user in users" :key="user.id">{{ user.name }}</li>
+  </ul>
+  
+  <button @click="loadUsers">Load Users</button>
+</div>
+
+<script type="module">
+import { createApp, reactive } from './zog.js';
+import { ZogHttpPlugin } from './zog-http.js';
+
+createApp(() => {
+  const users = reactive([]);
+  
+  async function loadUsers() {
+    try {
+      const response = await this.$http.get('/users');
+      users.splice(0, users.length, ...response.data);
+    } catch (error) {
+      console.error('Failed to load users:', error);
+    }
+  }
+  
+  return { users, loadUsers };
+})
+.use(ZogHttpPlugin, { baseURL: 'https://api.example.com' })
+.mount('#app');
+</script>
+```
+
+## Configuration Options
+
+```javascript
+.use(ZogHttpPlugin, {
+  // Base URL for all requests
+  baseURL: 'https://api.example.com',
+  
+  // Default timeout in milliseconds
+  timeout: 30000,
+  
+  // Default headers for all requests
+  headers: {
+    'Content-Type': 'application/json',
+    'X-Custom-Header': 'value',
+  },
+  
+  // Include credentials (cookies) in requests
+  withCredentials: false,
+  
+  // Number of automatic retries on failure
+  retries: 0,
+  
+  // Delay between retries in milliseconds
+  retryDelay: 1000,
+})
+```
+
+## API Reference
+
+### HTTP Methods
+
+All methods return a Promise that resolves to a response object:
+
+```javascript
+// Response object structure
+{
+  data: any,              // Parsed response body
+  status: number,         // HTTP status code
+  statusText: string,     // HTTP status text
+  headers: object,        // Response headers
+  config: object,         // Request configuration
+  request: object,        // Original request info
+}
+```
+
+#### GET Request
+
+```javascript
+// Simple GET
+const response = await this.$http.get('/users');
+
+// GET with query parameters
+const response = await this.$http.get('/users', {
+  params: { page: 1, limit: 10, status: 'active' }
+});
+
+// GET with custom headers
+const response = await this.$http.get('/users', {
+  headers: { 'X-Request-ID': '123' }
+});
+```
+
+#### POST Request
+
+```javascript
+// Simple POST
+const response = await this.$http.post('/users', {
+  name: 'John Doe',
+  email: 'john@example.com'
+});
+
+// POST with additional options
+const response = await this.$http.post('/users', 
+  { name: 'John' },
+  { headers: { 'X-Custom': 'value' } }
+);
+```
+
+#### PUT Request
+
+```javascript
+const response = await this.$http.put('/users/123', {
+  name: 'Jane Doe',
+  email: 'jane@example.com'
+});
+```
+
+#### PATCH Request
+
+```javascript
+const response = await this.$http.patch('/users/123', {
+  name: 'Updated Name'
+});
+```
+
+#### DELETE Request
+
+```javascript
+const response = await this.$http.delete('/users/123');
+
+// DELETE with body
+const response = await this.$http.delete('/users', {
+  body: { ids: [1, 2, 3] }
+});
+```
+
+#### HEAD & OPTIONS
+
+```javascript
+const headResponse = await this.$http.head('/users');
+const optionsResponse = await this.$http.options('/users');
+```
+
+### Shorthand Methods
+
+For convenience, shorthand methods are also injected into scope:
+
+```javascript
+await this.$get('/users');
+await this.$post('/users', data);
+await this.$put('/users/1', data);
+await this.$patch('/users/1', data);
+await this.$delete('/users/1');
+```
+
+### Authentication
+
+#### Bearer Token
+
+```javascript
+// Set token
+this.$http.setAuthToken('your-jwt-token');
+
+// Clear token
+this.$http.clearAuth();
+
+// Or set directly
+this.$http.setHeader('Authorization', 'Bearer your-token');
+```
+
+#### Basic Authentication
+
+```javascript
+this.$http.setBasicAuth('username', 'password');
+```
+
+### Headers Management
+
+```javascript
+// Set single header
+this.$http.setHeader('X-API-Key', 'your-api-key');
+
+// Set multiple headers
+this.$http.setHeaders({
+  'X-API-Key': 'key',
+  'X-Client-Version': '1.0.0'
+});
+
+// Remove header
+this.$http.removeHeader('X-API-Key');
+```
+
+### Base URL
+
+```javascript
+// Change base URL at runtime
+this.$http.setBaseURL('https://api.newdomain.com');
+```
+
+### Timeout
+
+```javascript
+// Set global timeout
+this.$http.setTimeout(60000); // 60 seconds
+
+// Per-request timeout
+await this.$http.get('/slow-endpoint', { timeout: 120000 });
+```
+
+## Interceptors
+
+Interceptors allow you to run code before requests are sent and after responses are received.
+
+### Request Interceptors
+
+```javascript
+// Add request interceptor
+const interceptorId = this.$http.addRequestInterceptor(
+  // Success handler (called before each request)
+  async (config) => {
+    // Add timestamp to all requests
+    config.headers['X-Request-Time'] = Date.now();
+    
+    // Add token from storage
+    const token = localStorage.getItem('token');
+    if (token) {
+      config.headers['Authorization'] = `Bearer ${token}`;
+    }
+    
+    console.log('Request:', config.method, config.url);
+    return config; // Must return config
+  },
+  // Error handler (optional)
+  async (error) => {
+    console.error('Request error:', error);
+    throw error;
+  }
+);
+
+// Remove interceptor later
+this.$http.removeRequestInterceptor(interceptorId);
+```
+
+### Response Interceptors
+
+```javascript
+// Add response interceptor
+const interceptorId = this.$http.addResponseInterceptor(
+  // Success handler
+  async (response) => {
+    console.log('Response:', response.status, response.data);
+    
+    // Transform response data
+    if (response.data?.items) {
+      response.data = response.data.items;
+    }
+    
+    return response;
+  },
+  // Error handler
+  async (error) => {
+    if (error.status === 401) {
+      // Handle unauthorized - redirect to login
+      window.location.href = '/login';
+    }
+    
+    if (error.status === 429) {
+      // Handle rate limiting - wait and retry
+      await new Promise(r => setTimeout(r, 5000));
+      return this.$http.request(error.request);
+    }
+    
+    throw error;
+  }
+);
+```
+
+### Clear All Interceptors
+
+```javascript
+this.$http.clearInterceptors();
+```
+
+## File Upload
+
+The upload method provides real-time progress tracking and supports single/multiple files.
+
+### Basic Upload
+
+```javascript
+// Single file upload
+const fileInput = document.querySelector('input[type="file"]');
+const file = fileInput.files[0];
+
+const { promise, tracker, abort } = this.$http.upload('/upload', file);
+
+// Access reactive progress state
+console.log(tracker.progress); // 0-100
+console.log(tracker.status);   // 'idle' | 'uploading' | 'completed' | 'error'
+
+const response = await promise;
+```
+
+### Upload with Progress Callbacks
+
+```javascript
+const { promise, tracker, abort } = this.$http.upload('/upload', file, {
+  // Field name for the file
+  fieldName: 'document',
+  
+  // Additional form data
+  additionalData: {
+    description: 'My file',
+    category: 'documents'
+  },
+  
+  // Custom headers
+  headers: {
+    'X-Upload-ID': 'unique-id'
+  },
+  
+  // Progress callback
+  onProgress: (info) => {
+    console.log(`Progress: ${info.progress}%`);
+    console.log(`Speed: ${(info.speed / 1024).toFixed(2)} KB/s`);
+    console.log(`Remaining: ${info.remainingTime}s`);
+  },
+  
+  // Completion callback
+  onComplete: (response) => {
+    console.log('Upload complete!', response.data);
+  },
+  
+  // Error callback
+  onError: (error) => {
+    console.error('Upload failed:', error.message);
+  }
+});
+```
+
+### Multiple Files Upload
+
+```javascript
+const files = document.querySelector('input[type="file"]').files;
+
+const { promise, tracker } = this.$http.upload('/upload', Array.from(files), {
+  fieldName: 'files',
+  additionalData: { albumId: '123' }
+});
+```
+
+### Upload with FormData
+
+```javascript
+const formData = new FormData();
+formData.append('file', file);
+formData.append('name', 'custom name');
+
+const { promise } = this.$http.upload('/upload', formData);
+```
+
+### Cancel Upload
+
+```javascript
+const { promise, abort, requestId } = this.$http.upload('/upload', file);
+
+// Cancel by abort function
+abort();
+
+// Or cancel by request ID
+this.$http.cancelRequest(requestId);
+```
+
+### Reactive Upload State in Template
+
+```html
+<div id="app">
+  <input type="file" @change="handleFileSelect" />
+  
+  <div z-if="uploadState.status === 'uploading'">
+    <div class="progress-bar">
+      <div :style="{ width: uploadState.progress + '%' }"></div>
+    </div>
+    <p>{{ uploadState.progress }}% - {{ formatSpeed(uploadState.speed) }}</p>
+    <p>Remaining: {{ uploadState.remainingTime }}s</p>
+    <button @click="cancelUpload">Cancel</button>
+  </div>
+  
+  <div z-if="uploadState.status === 'completed'">
+    Upload complete! ✓
+  </div>
+  
+  <div z-if="uploadState.status === 'error'">
+    Error: {{ uploadState.error }}
+  </div>
+</div>
+
+<script type="module">
+createApp(() => {
+  const uploadState = reactive({
+    progress: 0,
+    status: 'idle',
+    speed: 0,
+    remainingTime: 0,
+    error: null
+  });
+  
+  let abortFn = null;
+  
+  async function handleFileSelect(e) {
+    const file = e.target.files[0];
+    if (!file) return;
+    
+    const { promise, tracker, abort } = this.$upload('/upload', file);
+    
+    // Sync tracker state with local state
+    Object.assign(uploadState, tracker);
+    abortFn = abort;
+    
+    try {
+      await promise;
+    } catch (err) {
+      // Error already handled via tracker
+    }
+  }
+  
+  function cancelUpload() {
+    if (abortFn) abortFn();
+  }
+  
+  function formatSpeed(bytesPerSec) {
+    return (bytesPerSec / 1024).toFixed(2) + ' KB/s';
+  }
+  
+  return { uploadState, handleFileSelect, cancelUpload, formatSpeed };
+}).use(ZogHttpPlugin).mount('#app');
+</script>
+```
+
+## File Download
+
+Download files with progress tracking and optional auto-save.
+
+### Basic Download
+
+```javascript
+const { promise, tracker, abort } = this.$http.download('/files/report.pdf', {
+  filename: 'report.pdf', // Auto-triggers download
+  
+  onProgress: (info) => {
+    console.log(`Downloaded: ${info.progress}%`);
+  },
+  
+  onComplete: ({ blob, filename, size }) => {
+    console.log(`Downloaded ${filename} (${size} bytes)`);
+  }
+});
+
+const { blob } = await promise;
+```
+
+### Download without Auto-Save
+
+```javascript
+const { promise } = this.$http.download('/files/image.jpg');
+const { blob } = await promise;
+
+// Process blob manually
+const imageUrl = URL.createObjectURL(blob);
+```
+
+## Reactive State
+
+The plugin provides reactive global state:
+
+```javascript
+// Access in JavaScript
+this.$http.state.loading       // true when any request is pending
+this.$http.state.error         // Last error message
+this.$http.state.pendingRequests // Number of pending requests
+this.$http.state.lastRequest   // Info about last request
+
+// Access in template
+<div z-show="$http.state.loading">Loading...</div>
+<div z-if="$http.state.pendingRequests > 0">
+  {{ $http.state.pendingRequests }} requests in progress
+</div>
+```
+
+## Request Cancellation
+
+### Cancel Single Request
+
+```javascript
+const { requestId } = this.$http.upload('/upload', file);
+
+// Cancel by ID
+this.$http.cancelRequest(requestId);
+```
+
+### Cancel All Requests
+
+```javascript
+// Cancel all pending requests
+this.$http.cancelAll();
+```
+
+## Error Handling
+
+### HttpError Object
+
+```javascript
+try {
+  await this.$http.get('/users');
+} catch (error) {
+  if (error.isHttpError) {
+    console.log(error.status);    // 404, 500, etc.
+    console.log(error.message);   // Error message
+    console.log(error.response);  // Full response object
+    console.log(error.request);   // Original request info
+  }
+}
+```
+
+### HTTP Status Codes
+
+```javascript
+import { HttpStatus } from './zog-http.js';
+
+if (error.status === HttpStatus.NOT_FOUND) {
+  // Handle 404
+}
+
+if (error.status === HttpStatus.UNAUTHORIZED) {
+  // Handle 401
+}
+```
+
+## Creating Instances
+
+Create multiple HTTP clients with different configurations:
+
+```javascript
+// Create a new instance
+const adminApi = this.$http.create({
+  baseURL: 'https://admin.api.com',
+  headers: { 'X-Admin-Key': 'secret' }
+});
+
+await adminApi.get('/dashboard');
+```
+
+## Standalone Usage
+
+Use without Zog.js:
+
+```javascript
+import { createHttpClient } from './zog-http.js';
+
+const http = createHttpClient({
+  baseURL: 'https://api.example.com',
+  timeout: 30000
+});
+
+// Add interceptor
+http.addRequestInterceptor(config => {
+  config.headers['Authorization'] = 'Bearer token';
+  return config;
+});
+
+// Make requests
+const users = await http.get('/users');
+```
+
+## Complete Example
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>ZogHttp Demo</title>
+  <style>
+    .loading { opacity: 0.5; pointer-events: none; }
+    .progress-bar { width: 100%; height: 20px; background: #eee; }
+    .progress-fill { height: 100%; background: #4caf50; transition: width 0.3s; }
+    .error { color: red; }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <!-- Global loading indicator -->
+    <div z-show="$http.state.loading" class="loading-overlay">
+      Loading...
+    </div>
+    
+    <!-- User list -->
+    <section>
+      <h2>Users</h2>
+      <button @click="fetchUsers" :disabled="$http.state.loading">
+        Refresh Users
+      </button>
+      <ul>
+        <li z-for="user in users" :key="user.id">
+          {{ user.name }} ({{ user.email }})
+          <button @click="deleteUser(user.id)">Delete</button>
+        </li>
+      </ul>
+    </section>
+    
+    <!-- Add user form -->
+    <section>
+      <h2>Add User</h2>
+      <input z-model="newUser.name" placeholder="Name" />
+      <input z-model="newUser.email" placeholder="Email" />
+      <button @click="addUser">Add User</button>
+    </section>
+    
+    <!-- File upload -->
+    <section>
+      <h2>Upload Avatar</h2>
+      <input type="file" @change="handleUpload" accept="image/*" />
+      
+      <div z-if="upload.status === 'uploading'">
+        <div class="progress-bar">
+          <div class="progress-fill" :style="{ width: upload.progress + '%' }"></div>
+        </div>
+        <span>{{ upload.progress }}%</span>
+        <button @click="cancelUpload">Cancel</button>
+      </div>
+      
+      <div z-if="upload.status === 'completed'" style="color: green;">
+        Upload complete! ✓
+      </div>
+      
+      <div z-if="upload.status === 'error'" class="error">
+        {{ upload.error }}
+      </div>
+    </section>
+    
+    <!-- Error display -->
+    <div z-if="error" class="error">
+      {{ error }}
+    </div>
+  </div>
+
+  <script type="module">
+    import { createApp, ref, reactive } from './zog.js';
+    import { ZogHttpPlugin } from './zog-http.js';
+    
+    createApp(() => {
+      // Reactive data
+      const users = reactive([]);
+      const newUser = reactive({ name: '', email: '' });
+      const error = ref('');
+      const upload = reactive({
+        progress: 0,
+        status: 'idle',
+        error: null
+      });
+      
+      let abortUpload = null;
+      
+      // Fetch users
+      async function fetchUsers() {
+        try {
+          error.value = '';
+          const response = await this.$http.get('/users');
+          users.splice(0, users.length, ...response.data);
+        } catch (e) {
+          error.value = e.message;
+        }
+      }
+      
+      // Add user
+      async function addUser() {
+        if (!newUser.name || !newUser.email) return;
+        
+        try {
+          error.value = '';
+          const response = await this.$http.post('/users', {
+            name: newUser.name,
+            email: newUser.email
+          });
+          users.push(response.data);
+          newUser.name = '';
+          newUser.email = '';
+        } catch (e) {
+          error.value = e.message;
+        }
+      }
+      
+      // Delete user
+      async function deleteUser(id) {
+        try {
+          error.value = '';
+          await this.$http.delete(`/users/${id}`);
+          const index = users.findIndex(u => u.id === id);
+          if (index > -1) users.splice(index, 1);
+        } catch (e) {
+          error.value = e.message;
+        }
+      }
+      
+      // Handle file upload
+      function handleUpload(event) {
+        const file = event.target.files[0];
+        if (!file) return;
+        
+        const { promise, tracker, abort } = this.$upload('/avatar', file, {
+          fieldName: 'avatar',
+          additionalData: { userId: 1 },
+          onProgress: (info) => {
+            upload.progress = info.progress;
+          },
+          onComplete: () => {
+            upload.status = 'completed';
+          },
+          onError: (err) => {
+            upload.status = 'error';
+            upload.error = err.message;
+          }
+        });
+        
+        upload.status = 'uploading';
+        upload.progress = 0;
+        upload.error = null;
+        abortUpload = abort;
+      }
+      
+      // Cancel upload
+      function cancelUpload() {
+        if (abortUpload) {
+          abortUpload();
+          upload.status = 'idle';
+        }
+      }
+      
+      return {
+        users,
+        newUser,
+        error,
+        upload,
+        fetchUsers,
+        addUser,
+        deleteUser,
+        handleUpload,
+        cancelUpload
+      };
+    })
+    .use(ZogHttpPlugin, {
+      baseURL: 'https://jsonplaceholder.typicode.com',
+      timeout: 30000,
+      retries: 2,
+      retryDelay: 1000,
+    })
+    .mount('#app');
+  </script>
+</body>
+</html>
+```
+
+## TypeScript Support
+
+The plugin is written in vanilla JavaScript but includes JSDoc comments for IDE support. For full TypeScript support, type definitions can be added:
+
+```typescript
+interface HttpResponse<T = any> {
+  data: T;
+  status: number;
+  statusText: string;
+  headers: Record<string, string>;
+  config: RequestConfig;
+  request: RequestInfo;
+}
+
+interface UploadProgress {
+  loaded: number;
+  total: number;
+  progress: number;
+  speed: number;
+  remainingTime: number;
+}
+
+interface UploadOptions {
+  fieldName?: string;
+  additionalData?: Record<string, any>;
+  headers?: Record<string, string>;
+  onProgress?: (info: UploadProgress) => void;
+  onComplete?: (response: HttpResponse) => void;
+  onError?: (error: HttpError) => void;
+}
+```
+
+## Browser Support
+
+- Chrome 66+
+- Firefox 57+
+- Safari 11.1+
+- Edge 79+
+
+Requires: `fetch`, `AbortController`, `FormData`, `Blob`, `URL.createObjectURL`
+
+## License
+
+MIT License - feel free to use in any project.

package/dist/zog-http.es.js

@@ -0,0 +1 @@
+var t=Object.defineProperty,e=Object.defineProperties,s=Object.getOwnPropertyDescriptors,r=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable,a=(e,s,r)=>s in e?t(e,s,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[s]=r,i=(t,e)=>{for(var s in e||(e={}))o.call(e,s)&&a(t,s,e[s]);if(r)for(var s of r(e))n.call(e,s)&&a(t,s,e[s]);return t},l=(t,r)=>e(t,s(r)),d=(t,e)=>{var s={};for(var a in t)o.call(t,a)&&e.indexOf(a)<0&&(s[a]=t[a]);if(null!=t&&r)for(var a of r(t))e.indexOf(a)<0&&n.call(t,a)&&(s[a]=t[a]);return s};const h={baseURL:"",timeout:3e4,headers:{"Content-Type":"application/json"},withCredentials:!1,retries:0,retryDelay:1e3},c={OK:200,CREATED:201,NO_CONTENT:204,BAD_REQUEST:400,UNAUTHORIZED:401,FORBIDDEN:403,NOT_FOUND:404,UNPROCESSABLE_ENTITY:422,INTERNAL_SERVER_ERROR:500,BAD_GATEWAY:502,SERVICE_UNAVAILABLE:503};class u extends Error{constructor(t,e,s,r){super(t),this.name="HttpError",this.status=e,this.response=s,this.request=r,this.isHttpError=!0}}class p{constructor(t){this.state=t({progress:0,loaded:0,total:0,status:"idle",error:null,startTime:null,speed:0,remainingTime:0})}start(t){this.state.progress=0,this.state.loaded=0,this.state.total=t,this.state.status="uploading",this.state.error=null,this.state.startTime=Date.now(),this.state.speed=0,this.state.remainingTime=0}update(t,e){this.state.loaded=t,this.state.total=e,this.state.progress=e>0?Math.round(t/e*100):0;const s=(Date.now()-this.state.startTime)/1e3;if(s>0){this.state.speed=Math.round(t/s);const r=e-t;this.state.remainingTime=this.state.speed>0?Math.round(r/this.state.speed):0}}complete(){this.state.progress=100,this.state.status="completed"}fail(t){this.state.status="error",this.state.error=t.message||"Upload failed"}reset(){this.state.progress=0,this.state.loaded=0,this.state.total=0,this.state.status="idle",this.state.error=null,this.state.startTime=null,this.state.speed=0,this.state.remainingTime=0}}class f{constructor(t,e,s){this.config=i(i({},h),t),this.reactive=e,this.ref=s,this.interceptors={request:[],response:[]},this.state=e({loading:!1,error:null,lastRequest:null,pendingRequests:0}),this.abortControllers=/* @__PURE__ */new Map}setBaseURL(t){return this.config.baseURL=t,this}setHeader(t,e){return this.config.headers[t]=e,this}setHeaders(t){return this.config.headers=i(i({},this.config.headers),t),this}removeHeader(t){return delete this.config.headers[t],this}setAuthToken(t){return t?this.config.headers.Authorization=`Bearer ${t}`:delete this.config.headers.Authorization,this}setBasicAuth(t,e){const s=btoa(`${t}:${e}`);return this.config.headers.Authorization=`Basic ${s}`,this}clearAuth(){return delete this.config.headers.Authorization,this}setTimeout(t){return this.config.timeout=t,this}addRequestInterceptor(t,e){const s=this.interceptors.request.length;return this.interceptors.request.push({fulfilled:t,rejected:e,id:s}),s}addResponseInterceptor(t,e){const s=this.interceptors.response.length;return this.interceptors.response.push({fulfilled:t,rejected:e,id:s}),s}removeRequestInterceptor(t){const e=this.interceptors.request.findIndex(e=>e.id===t);-1!==e&&this.interceptors.request.splice(e,1)}removeResponseInterceptor(t){const e=this.interceptors.response.findIndex(e=>e.id===t);-1!==e&&this.interceptors.response.splice(e,1)}clearInterceptors(){this.interceptors.request=[],this.interceptors.response=[]}buildURL(t,e={}){let s=t.startsWith("http")?t:`${this.config.baseURL}${t}`;const r=new URLSearchParams;for(const[n,a]of Object.entries(e))null!=a&&(Array.isArray(a)?a.forEach(t=>r.append(n,t)):r.append(n,a));const o=r.toString();return o&&(s+=(s.includes("?")?"&":"?")+o),s}async runRequestInterceptors(t){let e=i({},t);for(const r of this.interceptors.request)try{r.fulfilled&&(e=await r.fulfilled(e)||e)}catch(s){if(!r.rejected)throw s;e=await r.rejected(s)||e}return e}async runResponseInterceptors(t){let e=t;for(const r of this.interceptors.response)try{r.fulfilled&&(e=await r.fulfilled(e)||e)}catch(s){if(!r.rejected)throw s;e=await r.rejected(s)}return e}async runResponseErrorInterceptors(t){for(const s of this.interceptors.response)if(s.rejected)try{const e=await s.rejected(t);if(void 0!==e)return e}catch(e){t=e}throw t}generateRequestId(){return`req_${Date.now()}_${Math.random().toString(36).substr(2,9)}`}async request(t){const e=this.generateRequestId(),s=new AbortController;this.abortControllers.set(e,s);let r=i({method:"GET",headers:i({},this.config.headers),timeout:this.config.timeout,withCredentials:this.config.withCredentials,retries:this.config.retries,retryDelay:this.config.retryDelay},t);t.headers&&(r.headers=i(i({},r.headers),t.headers));try{r=await this.runRequestInterceptors(r)}catch(d){throw this.abortControllers.delete(e),d}const o=this.buildURL(r.url,r.params),n={method:r.method.toUpperCase(),headers:r.headers,signal:s.signal,credentials:r.withCredentials?"include":"same-origin"};void 0===r.body||["GET","HEAD"].includes(n.method)||(r.body instanceof FormData?(delete n.headers["Content-Type"],n.body=r.body):"object"==typeof r.body?n.body=JSON.stringify(r.body):n.body=r.body),this.state.loading=!0,this.state.pendingRequests++,this.state.lastRequest={url:o,method:n.method,time:Date.now()},this.state.error=null;const a=setTimeout(()=>{s.abort()},r.timeout),l=async t=>{try{const s=await fetch(o,n);let a;const d=s.headers.get("content-type");if(d&&d.includes("application/json"))a=await s.json();else if(d&&d.includes("text/"))a=await s.text();else{const t=await s.text();try{a=JSON.parse(t)}catch(e){a=t}}const h={data:a,status:s.status,statusText:s.statusText,headers:Object.fromEntries(s.headers.entries()),config:r,request:i({url:o},n)};if(!s.ok){const e=new u((null==a?void 0:a.message)||s.statusText||`Request failed with status ${s.status}`,s.status,h,i({url:o},n));if(s.status>=500&&t>0)return await new Promise(t=>setTimeout(t,r.retryDelay)),l(t-1);throw e}return await this.runResponseInterceptors(h)}catch(d){if("AbortError"===d.name)throw new u("Request timeout",408,null,i({url:o},n));if("TypeError"===d.name&&t>0)return await new Promise(t=>setTimeout(t,r.retryDelay)),l(t-1);try{return await this.runResponseErrorInterceptors(d)}catch(e){throw e}}};try{return await l(r.retries)}finally{clearTimeout(a),this.abortControllers.delete(e),this.state.pendingRequests--,this.state.loading=this.state.pendingRequests>0}}async get(t,e={}){return this.request(l(i({},e),{method:"GET",url:t}))}async post(t,e={},s={}){return this.request(l(i({},s),{method:"POST",url:t,body:e}))}async put(t,e={},s={}){return this.request(l(i({},s),{method:"PUT",url:t,body:e}))}async patch(t,e={},s={}){return this.request(l(i({},s),{method:"PATCH",url:t,body:e}))}async delete(t,e={}){return this.request(l(i({},e),{method:"DELETE",url:t}))}async head(t,e={}){return this.request(l(i({},e),{method:"HEAD",url:t}))}async options(t,e={}){return this.request(l(i({},e),{method:"OPTIONS",url:t}))}upload(t,e,s={}){const r=new p(this.reactive),o=new AbortController,n=this.generateRequestId();this.abortControllers.set(n,o);const a=s,{fieldName:l="file",additionalData:h={},headers:c={},onProgress:f,onComplete:m,onError:g}=a,b=d(a,["fieldName","additionalData","headers","onProgress","onComplete","onError"]);let w;if(e instanceof FormData)w=e;else{w=new FormData,Array.isArray(e)?e.forEach((t,e)=>{w.append(`${l}[${e}]`,t)}):w.append(l,e);for(const[t,e]of Object.entries(h))null!=e&&w.append(t,"object"==typeof e?JSON.stringify(e):e)}let y=0;for(const[,i]of w.entries())i instanceof File?y+=i.size:"string"==typeof i&&(y+=new Blob([i]).size);r.start(y);return{promise:new Promise((e,s)=>{var a;const l=new XMLHttpRequest;l.upload.addEventListener("progress",t=>{t.lengthComputable&&(r.update(t.loaded,t.total),f&&f({loaded:t.loaded,total:t.total,progress:r.state.progress,speed:r.state.speed,remainingTime:r.state.remainingTime}))}),l.addEventListener("load",async()=>{let o;this.abortControllers.delete(n);try{o=JSON.parse(l.responseText)}catch(i){o=l.responseText}const a={data:o,status:l.status,statusText:l.statusText,headers:this.parseXHRHeaders(l.getAllResponseHeaders())};if(l.status>=200&&l.status<300){r.complete();try{const t=await this.runResponseInterceptors(a);m&&m(t),e(t)}catch(d){r.fail(d),g&&g(d),s(d)}}else{const e=new u((null==o?void 0:o.message)||l.statusText||"Upload failed",l.status,a,{url:t,method:"POST"});r.fail(e);try{await this.runResponseErrorInterceptors(e)}catch(i){g&&g(i),s(i)}}}),l.addEventListener("error",()=>{this.abortControllers.delete(n);const e=new u("Network error during upload",0,null,{url:t,method:"POST"});r.fail(e),g&&g(e),s(e)}),l.addEventListener("abort",()=>{this.abortControllers.delete(n);const e=new u("Upload cancelled",0,null,{url:t,method:"POST"});r.fail(e),g&&g(e),s(e)}),l.addEventListener("timeout",()=>{this.abortControllers.delete(n);const e=new u("Upload timeout",408,null,{url:t,method:"POST"});r.fail(e),g&&g(e),s(e)}),o.signal.addEventListener("abort",()=>{l.abort()});const d=this.buildURL(t);l.open("POST",d);const h=i(i({},this.config.headers),c);delete h["Content-Type"];for(const[t,r]of Object.entries(h))l.setRequestHeader(t,r);l.timeout=b.timeout||this.config.timeout,l.withCredentials=null!=(a=b.withCredentials)?a:this.config.withCredentials,l.send(w)}),tracker:r.state,abort:()=>o.abort(),requestId:n}}parseXHRHeaders(t){const e={};return t?(t.split("\r\n").forEach(t=>{const[s,...r]=t.split(":");s&&r.length&&(e[s.trim().toLowerCase()]=r.join(":").trim())}),e):e}download(t,e={}){const s=new p(this.reactive),r=new AbortController,o=this.generateRequestId();this.abortControllers.set(o,r);const n=e,{filename:a,onProgress:l,onComplete:h,onError:c}=n;d(n,["filename","onProgress","onComplete","onError"]);return{promise:(async()=>{try{const n=await fetch(this.buildURL(t),{method:"GET",headers:i(i({},this.config.headers),e.headers),signal:r.signal,credentials:this.config.withCredentials?"include":"same-origin"});if(!n.ok)throw new u(`Download failed with status ${n.status}`,n.status,null,{url:t,method:"GET"});const d=n.headers.get("content-length"),c=d?parseInt(d,10):0;s.start(c);const p=n.body.getReader(),f=[];let m=0;for(;;){const{done:t,value:e}=await p.read();if(t)break;f.push(e),m+=e.length,c>0&&(s.update(m,c),l&&l({loaded:m,total:c,progress:s.state.progress,speed:s.state.speed,remainingTime:s.state.remainingTime}))}s.complete();const g=new Blob(f);if(a){const t=URL.createObjectURL(g),e=document.createElement("a");e.href=t,e.download=a,document.body.appendChild(e),e.click(),document.body.removeChild(e),URL.revokeObjectURL(t)}const b={blob:g,filename:a,size:g.size};return h&&h(b),this.abortControllers.delete(o),b}catch(n){if(this.abortControllers.delete(o),"AbortError"===n.name){const e=new u("Download cancelled",0,null,{url:t,method:"GET"});throw s.fail(e),c&&c(e),e}throw s.fail(n),c&&c(n),n}})(),tracker:s.state,abort:()=>r.abort(),requestId:o}}cancelRequest(t){const e=this.abortControllers.get(t);e&&(e.abort(),this.abortControllers.delete(t))}cancelAll(){for(const[t,e]of this.abortControllers)e.abort();this.abortControllers.clear(),this.state.loading=!1,this.state.pendingRequests=0}create(t={}){return new f(i(i({},this.config),t),this.reactive,this.ref)}}const m={install(t,e={}){const{reactive:s,ref:r}=t,o=new f(e,s,r);m._instance=o,t.onHook("afterCompile",(t,e,s)=>{e.$http||(e.$http=o,e.$get=o.get.bind(o),e.$post=o.post.bind(o),e.$put=o.put.bind(o),e.$patch=o.patch.bind(o),e.$delete=o.delete.bind(o),e.$upload=o.upload.bind(o),e.$download=o.download.bind(o))}),t.onHook("onError",(t,e,s)=>{t.isHttpError})},getInstance:()=>m._instance||null};function g(t={}){return new f(t,t=>t,t=>({value:t}))}export{u as HttpError,c as HttpStatus,p as UploadTracker,f as ZogHttpClient,m as ZogHttpPlugin,g as createHttpClient,m as default};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@zogjs/http",
+  "version": "0.4.8",
+  "description": "Powerful HTTP client plugin for Zog.js - Full-featured request library with interceptors, file upload/download progress tracking, and reactive state management",
+  "type": "module",
+  "main": "dist/zog-http.es.js",
+  "module": "dist/zog-http.es.js",
+  "exports": {
+    ".": "./dist/zog-http.es.js"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zogjs/zog-http.git"
+  },
+  "homepage": "https://github.com/zogjs/zog-http#readme",
+  "bugs": {
+    "url": "https://github.com/zogjs/zog-http/issues"
+  },
+  "author": "ZogJS Team",
+  "license": "MIT",
+  "keywords": [
+    "zogjs",
+    "zog",
+    "zog-http",
+    "plugin",
+    "utilities",
+    "http-client",
+    "performance",
+    "reactive",
+    "frontend",
+    "javascript"
+  ],
+  "peerDependencies": {
+    "zogjs": "^0.4.8"
+  },
+  "devDependencies": {
+    "terser": "^5.44.1",
+    "vite": "^7.0.0"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  }
+}