viewlogic 1.2.0 → 1.2.2

package/README.md

@@ -338,10 +338,15 @@ const current = router.getCurrentRoute();
 // In route components - global methods automatically available:
 export default {
     dataURL: '/api/products', // Auto-fetch data
-    mounted() {
+    async mounted() {
         const id = this.getParam('id');           // Get parameter
         this.navigateTo('detail', { id });        // Navigate
         console.log('Data loaded:', this.products); // From dataURL
+        
+        // New $api pattern for RESTful API calls
+        const user = await this.$api.get('/api/users/{userId}');
+        await this.$api.post('/api/analytics', { pageView: 'products' });
+        
         if (this.$isAuthenticated()) { /* auth check */ }
         const text = this.$t('welcome.message');   // i18n
     }
@@ -351,9 +356,9 @@ export default {
 ### Key Global Methods (Auto-available in all route components)
 - **Navigation**: `navigateTo()`, `getCurrentRoute()`
 - **Parameters**: `getParams()`, `getParam(key, defaultValue)`
-- **Data Fetching**: `$fetchData()`, `$fetchAllData()` (with dataURL)
+- **Data Fetching**: `$fetchData()` (with dataURL), `$api.get()`, `$api.post()`, `$api.put()`, `$api.patch()`, `$api.delete()`
 - **Authentication**: `$isAuthenticated()`, `$getToken()`, `$logout()`
-- **Forms**: Auto-binding with `action` attribute and `{param}` templates
+- **Forms**: Auto-binding with `action` attribute, duplicate prevention, validation
 - **i18n**: `$t(key, params)` for translations
 
 ### Auto-Injected Properties
@@ -659,9 +664,98 @@ export default {
 - ✅ **Built-in Security** - HTML sanitization included
 - ✅ **Zero Setup** - Works immediately without configuration
 
-## 📝 Automatic Form Handling with Variable Parameters
+## 🔥 RESTful API Calls with $api Pattern
+
+ViewLogic introduces a clean, RESTful API calling pattern with automatic parameter substitution and authentication handling.
+
+### Basic API Usage
+
+```javascript
+// src/logic/user-profile.js
+export default {
+    name: 'UserProfile',
+    
+    async mounted() {
+        try {
+            // GET request with automatic parameter substitution
+            const user = await this.$api.get('/api/users/{userId}');
+            
+            // POST request with data
+            const response = await this.$api.post('/api/users/{userId}/posts', {
+                title: 'New Post',
+                content: 'Post content here'
+            });
+            
+            // PUT request for updates
+            await this.$api.put('/api/users/{userId}', {
+                name: user.name,
+                email: user.email
+            });
+            
+            // DELETE request
+            await this.$api.delete('/api/posts/{postId}');
+            
+        } catch (error) {
+            console.error('API call failed:', error);
+            this.handleError(error);
+        }
+    }
+};
+```
+
+### Advanced API Features
+
+```javascript
+export default {
+    methods: {
+        async handleUserActions() {
+            // With custom headers
+            const data = await this.$api.get('/api/protected-data', {
+                headers: { 'X-Custom-Header': 'value' }
+            });
+            
+            // File upload with FormData
+            const formData = new FormData();
+            formData.append('file', this.selectedFile);
+            await this.$api.post('/api/upload', formData);
+            
+            // With query parameters (automatically added from current route)
+            // URL: /users?id=123 → API call includes ?id=123
+            const result = await this.$api.get('/api/user-data');
+        },
+        
+        // Error handling patterns
+        async safeApiCall() {
+            try {
+                const user = await this.$api.get('/api/users/{userId}');
+                this.user = user;
+                
+            } catch (error) {
+                if (error.message.includes('404')) {
+                    this.showError('User not found');
+                } else if (error.message.includes('401')) {
+                    this.navigateTo('login');
+                } else {
+                    this.showError('Something went wrong');
+                }
+            }
+        }
+    }
+};
+```
+
+### Key $api Features
 
-ViewLogic Router includes revolutionary automatic form handling that eliminates the need for manual form submission logic. Just define your forms with `action` attributes and the router handles the rest!
+- **🎯 Parameter Substitution**: `{userId}` automatically replaced with component data or route params
+- **🔐 Auto Authentication**: Authorization headers automatically added when token is available  
+- **📄 Smart Data Handling**: JSON and FormData automatically detected and processed
+- **🔗 Query Integration**: Current route query parameters automatically included
+- **⚡ Error Standardization**: Consistent error format across all API calls
+- **🚀 RESTful Pattern**: Clean `get()`, `post()`, `put()`, `patch()`, `delete()` methods
+
+## 📝 Advanced Form Handling with Smart Features
+
+ViewLogic Router includes revolutionary automatic form handling with duplicate prevention, validation, and error handling. Just define your forms with `action` attributes and the router handles everything!
 
 ### Basic Form Handling
 
@@ -683,14 +777,81 @@ ViewLogic Router includes revolutionary automatic form handling that eliminates
 export default {
     name: 'ContactPage',
     mounted() {
-        // Forms are automatically bound - no additional code needed!
-        // Form submission will automatically POST to /api/contact
-        console.log('Form handling is automatic!');
+        // Forms are automatically bound with smart features:
+        // ✅ Duplicate submission prevention
+        // ✅ Automatic validation
+        // ✅ Loading state management
+        // ✅ Error handling
+        console.log('Smart form handling is automatic!');
     }
 };
 ```
 
-### Variable Parameter Forms - 🆕 Revolutionary!
+### Smart Form Features - 🆕 Enhanced!
+
+ViewLogic FormHandler now includes advanced features for production-ready applications:
+
+```html
+<!-- Smart form with all features -->
+<form action="/api/users/{userId}/update" method="PUT" 
+      class="auto-form"
+      data-success-handler="handleSuccess"
+      data-error-handler="handleError"
+      data-loading-handler="handleLoading"
+      data-redirect="/profile">
+    
+    <input type="text" name="name" required 
+           data-validation="validateName">
+    <input type="email" name="email" required>
+    <button type="submit">Update Profile</button>
+</form>
+```
+
+```javascript
+export default {
+    methods: {
+        // Custom validation
+        validateName(value) {
+            return value.length >= 2 && value.length <= 50;
+        },
+        
+        // Success handler
+        handleSuccess(response, form) {
+            this.showToast('Profile updated successfully!', 'success');
+            // Automatic redirect to /profile happens after this
+        },
+        
+        // Error handler with smart error detection
+        handleError(error, form) {
+            if (error.message.includes('validation')) {
+                this.showToast('Please check your input', 'warning');
+            } else {
+                this.showToast('Update failed. Please try again.', 'error');
+            }
+        },
+        
+        // Loading state handler
+        handleLoading(isLoading, form) {
+            const button = form.querySelector('button[type="submit"]');
+            button.disabled = isLoading;
+            button.textContent = isLoading ? 'Updating...' : 'Update Profile';
+        }
+    }
+};
+```
+
+### Key Form Features
+
+- **🚫 Duplicate Prevention**: Automatic duplicate submission blocking
+- **⏱️ Timeout Management**: 30-second default timeout with abort capability
+- **✅ Built-in Validation**: HTML5 + custom validation functions
+- **🔄 Loading States**: Automatic loading state management
+- **🎯 Smart Error Handling**: Network vs validation error distinction
+- **📄 File Upload Support**: Automatic FormData vs JSON detection
+- **🔀 Auto Redirect**: Post-success navigation
+- **🏷️ Parameter Substitution**: Dynamic URL parameter replacement
+
+### Variable Parameter Forms - Revolutionary!
 
 The most powerful feature is **variable parameter support** in action URLs. You can use simple template syntax to inject dynamic values:
 

package/dist/viewlogic-router.js

@@ -1488,6 +1488,7 @@ var FormHandler = class {
     this.router = router;
     this.config = {
       debug: options.debug || false,
+      requestTimeout: options.requestTimeout || 3e4,
       ...options
     };
     this.log("debug", "FormHandler initialized");
@@ -1500,6 +1501,48 @@ var FormHandler = class {
       this.router.errorHandler.log(level, "FormHandler", ...args);
     }
   }
+  /**
+   * 중복 요청 체크
+   */
+  isDuplicateRequest(form) {
+    if (form._isSubmitting) {
+      this.log("debug", "Duplicate request blocked");
+      return true;
+    }
+    return false;
+  }
+  /**
+   * 폼 제출 시작
+   */
+  startFormSubmission(form) {
+    form._isSubmitting = true;
+    form._abortController = new AbortController();
+    form._timeoutId = setTimeout(() => {
+      if (form._isSubmitting) {
+        this.abortFormSubmission(form);
+      }
+    }, this.config.requestTimeout);
+  }
+  /**
+   * 폼 제출 완료
+   */
+  finishFormSubmission(form) {
+    form._isSubmitting = false;
+    if (form._timeoutId) {
+      clearTimeout(form._timeoutId);
+      delete form._timeoutId;
+    }
+    delete form._abortController;
+  }
+  /**
+   * 폼 제출 중단
+   */
+  abortFormSubmission(form) {
+    if (form._abortController) {
+      form._abortController.abort();
+    }
+    this.finishFormSubmission(form);
+  }
   /**
    * 자동 폼 바인딩
    */
@@ -1525,28 +1568,40 @@ var FormHandler = class {
     const errorHandler = form.getAttribute("data-error-handler");
     const loadingHandler = form.getAttribute("data-loading-handler");
     const redirectTo = form.getAttribute("data-redirect");
+    action = this.processActionParams(action, component);
+    if (!this.validateForm(form, component)) {
+      return;
+    }
+    if (this.isDuplicateRequest(form)) {
+      return;
+    }
+    this.startFormSubmission(form);
+    const formData = new FormData(form);
+    const data = Object.fromEntries(formData.entries());
     try {
       if (loadingHandler && component[loadingHandler]) {
         component[loadingHandler](true, form);
       }
-      action = this.processActionParams(action, component);
-      if (!this.validateForm(form, component)) {
-        return;
-      }
-      const formData = new FormData(form);
-      const data = Object.fromEntries(formData.entries());
       this.log("debug", `Form submitting to: ${action}`, data);
-      const response = await this.submitFormData(action, method, data, form, component);
+      const response = await this.submitFormData(action, method, data, form, component, form._abortController.signal);
       if (successHandler && component[successHandler]) {
         component[successHandler](response, form);
       }
+      this.finishFormSubmission(form);
       if (redirectTo) {
-        setTimeout(() => {
-          component.navigateTo(redirectTo);
-        }, 1e3);
+        requestAnimationFrame(() => {
+          setTimeout(() => {
+            component.navigateTo(redirectTo);
+          }, 1e3);
+        });
       }
     } catch (error) {
-      this.log("warn", `Form submission error:`, error);
+      if (error.name === "AbortError") {
+        this.log("debug", "Form submission aborted");
+        return;
+      }
+      this.log("warn", "Form submission error:", error);
+      this.finishFormSubmission(form);
       if (errorHandler && component[errorHandler]) {
         component[errorHandler](error, form);
       } else {
@@ -1567,11 +1622,13 @@ var FormHandler = class {
   /**
    * 폼 데이터 서브밋 (ApiHandler 활용)
    */
-  async submitFormData(action, method, data, form, component) {
+  async submitFormData(action, method, data, form, component, signal = null) {
     const hasFile = Array.from(form.elements).some((el) => el.type === "file" && el.files.length > 0);
     const options = {
       method: method.toUpperCase(),
-      headers: {}
+      headers: {},
+      signal
+      // AbortController 신호 추가
     };
     if (hasFile) {
       options.data = new FormData(form);
@@ -1624,20 +1681,44 @@ var FormHandler = class {
     this.log("warn", `Validation function '${validationFunction}' not found`);
     return true;
   }
+  /**
+   * 모든 폼 요청 취소
+   */
+  cancelAllRequests() {
+    const forms = document.querySelectorAll("form");
+    forms.forEach((form) => {
+      if (form._isSubmitting) {
+        this.abortFormSubmission(form);
+      }
+    });
+  }
   /**
    * 정리 (메모리 누수 방지)
    */
   destroy() {
+    this.cancelAllRequests();
     const forms = document.querySelectorAll("form.auto-form, form[action]");
     forms.forEach((form) => {
       if (form._boundSubmitHandler) {
         form.removeEventListener("submit", form._boundSubmitHandler);
         delete form._boundSubmitHandler;
       }
+      this.cleanupFormState(form);
     });
     this.log("debug", "FormHandler destroyed");
     this.router = null;
   }
+  /**
+   * 폼 상태 정리
+   */
+  cleanupFormState(form) {
+    delete form._isSubmitting;
+    delete form._abortController;
+    if (form._timeoutId) {
+      clearTimeout(form._timeoutId);
+      delete form._timeoutId;
+    }
+  }
 };
 
 // src/core/ApiHandler.js
@@ -1804,6 +1885,20 @@ var ApiHandler = class {
   async delete(url, component = null, options = {}) {
     return this.fetchData(url, component, { ...options, method: "DELETE" });
   }
+  /**
+   * 컴포넌트에 바인딩된 API 객체 생성
+   */
+  bindToComponent(component) {
+    return {
+      get: (url, options = {}) => this.get(url, component, options),
+      post: (url, data, options = {}) => this.post(url, data, component, options),
+      put: (url, data, options = {}) => this.put(url, data, component, options),
+      patch: (url, data, options = {}) => this.patch(url, data, component, options),
+      delete: (url, options = {}) => this.delete(url, component, options),
+      fetchData: (url, options = {}) => this.fetchData(url, component, options),
+      fetchMultipleData: (dataConfig) => this.fetchMultipleData(dataConfig, component)
+    };
+  }
   /**
    * 정리 (메모리 누수 방지)
    */
@@ -2278,6 +2373,7 @@ ${template}`;
         }
       },
       async mounted() {
+        this.$api = router.routeLoader.apiHandler.bindToComponent(this);
         if (script.mounted) {
           await script.mounted.call(this);
         }
@@ -2344,22 +2440,6 @@ ${template}`;
           } finally {
             this.$dataLoading = false;
           }
-        },
-        // HTTP 메서드 래퍼들 (ApiHandler 직접 접근)
-        async $get(url, options = {}) {
-          return await router.routeLoader.apiHandler.get(url, this, options);
-        },
-        async $post(url, data, options = {}) {
-          return await router.routeLoader.apiHandler.post(url, data, this, options);
-        },
-        async $put(url, data, options = {}) {
-          return await router.routeLoader.apiHandler.put(url, data, this, options);
-        },
-        async $patch(url, data, options = {}) {
-          return await router.routeLoader.apiHandler.patch(url, data, this, options);
-        },
-        async $delete(url, options = {}) {
-          return await router.routeLoader.apiHandler.delete(url, this, options);
         }
       },
       _routeName: routeName