npm - viewlogic - Versions diffs - 1.2.4 → 1.2.6 - Mend

viewlogic 1.2.4 → 1.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md +28 -34
package/dist/viewlogic-router.js +84 -99
package/dist/viewlogic-router.js.map +3 -3
package/dist/viewlogic-router.min.js +3 -3
package/dist/viewlogic-router.min.js.map +3 -3
package/package.json +4 -3

package/README.md CHANGED Viewed

@@ -12,11 +12,11 @@
   </a>
 </p>
-> **Complete Vue 3 Framework**: All-in-one solution for modern web development
+> **AI-First Vue 3 Framework**: The future of web development in the age of artificial intelligence
 ## 🎯 Core Philosophy
-ViewLogic Router revolutionizes Vue development with two fundamental principles:
+ViewLogic Router revolutionizes Vue development with three fundamental principles:
 ### 🎭 View-Logic Separation
 **Complete separation between View (presentation) and Logic (business logic)**. Views are pure HTML templates, logic is pure JavaScript components. This separation makes your code more maintainable, testable, and scalable.
@@ -24,6 +24,9 @@ ViewLogic Router revolutionizes Vue development with two fundamental principles:
 ### 🚀 Zero Build Development
 **Zero build step required in development mode**. Work directly with source files, see changes instantly without any compilation, bundling, or build processes. True real-time development experience.
+### 🤖 AI-First Architecture
+**Built from the ground up for the AI coding era**. Clear conventions, predictable patterns, and separated concerns make ViewLogic the perfect framework for AI-assisted development. Generate pages, components, and logic with AI tools seamlessly.
 ## ✨ What Makes ViewLogic Special
 **All-in-One Solution** - Replace multiple libraries with one unified framework:
@@ -187,33 +190,23 @@ export default {
 **src/layouts/default.html** (optional)
 ```html
-<!DOCTYPE html>
-<html>
-<head>
-    <title>My ViewLogic App</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-</head>
-<body>
-    <header class="navbar">
-        <h1>My App</h1>
-        <nav>
-            <a href="#/home">Home</a>
-            <a href="#/about">About</a>
-        </nav>
-    </header>
-    <main class="main-content">
-        <div class="container">
-            {{ content }}
-        </div>
-    </main>
-    <footer>
-        <p>&copy; 2024 My ViewLogic App</p>
-    </footer>
-</body>
-</html>
+<header class="navbar">
+    <h1>My App</h1>
+    <nav>
+        <a href="#/home">Home</a>
+        <a href="#/about">About</a>
+    </nav>
+</header>
+<main class="main-content">
+    <div class="container">
+        {{ content }}
+    </div>
+</main>
+<footer>
+    <p>&copy; 2024 My ViewLogic App</p>
+</footer>
 ```
 ### Query Parameter Example
@@ -357,7 +350,8 @@ if (this.$state.has('user')) {
 // Watch for changes (reactive)
 this.$state.watch('user', (newValue, oldValue) => {
     console.log('User changed:', newValue);
-    this.updateUI();
+    // Update component data to trigger reactivity
+    this.currentUser = newValue;
 });
 // Bulk updates
@@ -389,8 +383,7 @@ this.setToken('jwt-token-here');
 // Login with options
 this.setToken('jwt-token', {
-    storage: 'localStorage',  // 'localStorage', 'sessionStorage', 'cookie'
-    skipValidation: false     // Skip JWT validation
+    storage: 'localStorage'   // 'localStorage', 'sessionStorage', 'cookie'
 });
 // Get current token
@@ -685,8 +678,9 @@ const router = new ViewLogicRouter({
     maxCacheSize: 100,                  // Maximum number of cached items
     // API settings
-    apiBaseURL: '/api',                 // Base URL for API requests
-    apiTimeout: 10000,                  // Request timeout in milliseconds
+    apiBaseURL: 'https://api.example.com/v1',  // Base URL for API requests
+    requestTimeout: 30000,              // Form submission timeout in milliseconds (30 seconds)
+    uploadTimeout: 300000,              // File upload timeout in milliseconds (5 minutes)
     // Development settings
     environment: 'development',         // 'development' or 'production'

package/dist/viewlogic-router.js CHANGED Viewed

@@ -355,8 +355,7 @@ var AuthManager = class {
       checkAuthFunction: options.checkAuthFunction || null,
       redirectAfterLogin: options.redirectAfterLogin || "home",
       authCookieName: options.authCookieName || "authToken",
-      authStorage: options.authStorage || "localStorage",
-      authSkipValidation: options.authSkipValidation || false
+      authStorage: options.authStorage || "localStorage"
     };
     this.router = router;
     this.eventListeners = /* @__PURE__ */ new Map();
@@ -510,11 +509,10 @@ var AuthManager = class {
     }
     const {
       storage = this.config.authStorage,
-      cookieOptions = this.config.authCookieOptions,
-      skipValidation = this.config.authSkipValidation
+      cookieOptions = this.config.authCookieOptions
     } = options;
     try {
-      if (!skipValidation && !this.isTokenValid(token)) {
+      if (!this.isTokenValid(token)) {
         this.log("warn", "\u274C Token is expired or invalid");
         return false;
       }
@@ -541,7 +539,7 @@ var AuthManager = class {
       });
       return true;
     } catch (error) {
-      this.log("Failed to set token:", error);
+      this.log("error", "Failed to set token:", error);
       return false;
     }
   }
@@ -592,14 +590,14 @@ var AuthManager = class {
         break;
     }
     this.emitAuthEvent("token_removed", { storage });
-    this.log(`Token removed from: ${storage}`);
+    this.log("debug", `Token removed from: ${storage}`);
   }
   /**
    * 로그인 성공 처리
    */
   loginSuccess(targetRoute = null) {
     const redirectRoute = targetRoute || this.config.redirectAfterLogin;
-    this.log(`\u{1F389} Login success, redirecting to: ${redirectRoute}`);
+    this.log("info", `\u{1F389} Login success, redirecting to: ${redirectRoute}`);
     this.emitAuthEvent("login_success", { targetRoute: redirectRoute });
     if (this.router && typeof this.router.navigateTo === "function") {
       this.router.navigateTo(redirectRoute);
@@ -610,7 +608,7 @@ var AuthManager = class {
    * 로그아웃 처리
    */
   logout() {
-    this.log("\u{1F44B} Logging out user");
+    this.log("info", "\u{1F44B} Logging out user");
     this.removeAccessToken();
     this.emitAuthEvent("logout", {});
     if (this.router && typeof this.router.navigateTo === "function") {
@@ -635,11 +633,11 @@ var AuthManager = class {
         try {
           listener(data);
         } catch (error) {
-          this.log("Event listener error:", error);
+          this.log("error", "Event listener error:", error);
         }
       });
     }
-    this.log(`\u{1F514} Auth event emitted: ${eventType}`, data);
+    this.log("debug", `\u{1F514} Auth event emitted: ${eventType}`, data);
   }
   /**
    * 이벤트 리스너 등록
@@ -812,7 +810,7 @@ var CacheManager = class {
     patterns.forEach((pattern) => {
       totalInvalidated += this.deleteByPattern(pattern);
     });
-    this.log(`\u{1F504} Deleted component cache for route: ${routeName} (${totalInvalidated} entries)`);
+    this.log("debug", `\u{1F504} Deleted component cache for route: ${routeName} (${totalInvalidated} entries)`);
     return totalInvalidated;
   }
   /**
@@ -824,7 +822,7 @@ var CacheManager = class {
     componentPatterns.forEach((pattern) => {
       totalCleared += this.deleteByPattern(pattern);
     });
-    this.log(`\u{1F9FD} Deleted all component caches (${totalCleared} entries)`);
+    this.log("debug", `\u{1F9FD} Deleted all component caches (${totalCleared} entries)`);
     return totalCleared;
   }
   /**
@@ -835,7 +833,7 @@ var CacheManager = class {
     this.cache.clear();
     this.cacheTimestamps.clear();
     this.lruOrder = [];
-    this.log(`\u{1F525} Cleared all cache (${size} entries)`);
+    this.log("debug", `\u{1F525} Cleared all cache (${size} entries)`);
     return size;
   }
   /**
@@ -860,7 +858,7 @@ var CacheManager = class {
       }
     });
     if (expiredKeys.length > 0) {
-      this.log(`\u23F1\uFE0F Cleaned ${expiredKeys.length} expired cache entries`);
+      this.log("debug", `\u23F1\uFE0F Cleaned ${expiredKeys.length} expired cache entries`);
     }
     return expiredKeys.length;
   }
@@ -952,7 +950,7 @@ var CacheManager = class {
     this.cleanupInterval = setInterval(() => {
       this.cleanExpired();
     }, interval);
-    this.log(`\u{1F916} Auto cleanup started (interval: ${interval}ms)`);
+    this.log("debug", `\u{1F916} Auto cleanup started (interval: ${interval}ms)`);
   }
   /**
    * 자동 정리 중지
@@ -1174,11 +1172,8 @@ var QueryManager = class {
 var FormHandler = class {
   constructor(router, options = {}) {
     this.router = router;
-    this.config = {
-      debug: options.debug || false,
-      requestTimeout: options.requestTimeout || 3e4,
-      ...options
-    };
+    this.requestTimeout = options.requestTimeout || 3e4;
+    this.uploadTimeout = options.uploadTimeout || 3e5;
     this.log("debug", "FormHandler initialized");
   }
   /**
@@ -1205,11 +1200,13 @@ var FormHandler = class {
   startFormSubmission(form) {
     form._isSubmitting = true;
     form._abortController = new AbortController();
+    const hasFile = Array.from(form.elements).some((el) => el.type === "file" && el.files.length > 0);
+    const timeout = hasFile ? this.uploadTimeout : this.requestTimeout;
     form._timeoutId = setTimeout(() => {
       if (form._isSubmitting) {
         this.abortFormSubmission(form);
       }
-    }, this.config.requestTimeout);
+    }, timeout);
   }
   /**
    * 폼 제출 완료
@@ -1293,7 +1290,7 @@ var FormHandler = class {
       if (errorHandler && component[errorHandler]) {
         component[errorHandler](error, form);
       } else {
-        console.error("Form submission error:", error);
+        this.log("error", "Form submission error (no error handler defined):", error);
       }
     } finally {
       if (loadingHandler && component[loadingHandler]) {
@@ -1413,12 +1410,7 @@ var FormHandler = class {
 var ApiHandler = class {
   constructor(router, options = {}) {
     this.router = router;
-    this.config = {
-      debug: options.debug || false,
-      timeout: options.timeout || 1e4,
-      retries: options.retries || 1,
-      ...options
-    };
+    this.apiBaseURL = options.apiBaseURL || "";
     this.log("debug", "ApiHandler initialized");
   }
   /**
@@ -1435,6 +1427,9 @@ var ApiHandler = class {
   async fetchData(dataURL, component = null, options = {}) {
     try {
       let processedURL = this.processURLParameters(dataURL, component);
+      if (this.apiBaseURL && !this.isAbsoluteURL(processedURL)) {
+        processedURL = this.combineURLs(this.apiBaseURL, processedURL);
+      }
       const queryString = this.router.queryManager?.buildQueryString(this.router.queryManager?.getQueryParams()) || "";
       const fullURL = queryString ? `${processedURL}?${queryString}` : processedURL;
       this.log("debug", `Fetching data from: ${fullURL}`);
@@ -1525,15 +1520,15 @@ var ApiHandler = class {
         const paramName = match.slice(1, -1);
         try {
           let paramValue = null;
-          if (component.getParam) {
-            paramValue = component.getParam(paramName);
+          if (component.$options?.computed?.[paramName]) {
+            paramValue = component[paramName];
           }
           if (paramValue === null || paramValue === void 0) {
             paramValue = component[paramName];
           }
           if (paramValue === null || paramValue === void 0) {
-            if (component.$options?.computed?.[paramName]) {
-              paramValue = component[paramName];
+            if (component.getParam) {
+              paramValue = component.getParam(paramName);
             }
           }
           if (paramValue === null || paramValue === void 0) {
@@ -1587,6 +1582,20 @@ var ApiHandler = class {
       fetchMultipleData: (dataConfig) => this.fetchMultipleData(dataConfig, component)
     };
   }
+  /**
+   * 절대 URL인지 확인
+   */
+  isAbsoluteURL(url) {
+    return /^https?:\/\//.test(url) || url.startsWith("//");
+  }
+  /**
+   * 두 URL을 조합
+   */
+  combineURLs(baseURL, relativeURL) {
+    const cleanBase = baseURL.replace(/\/$/, "");
+    const cleanRelative = relativeURL.startsWith("/") ? relativeURL : `/${relativeURL}`;
+    return `${cleanBase}${cleanRelative}`;
+  }
   /**
    * 정리 (메모리 누수 방지)
    */
@@ -1602,7 +1611,6 @@ var ComponentLoader = class {
     this.config = {
       componentsPath: options.componentsPath || "/components",
       // srcPath 기준 상대 경로
-      debug: options.debug || false,
       environment: options.environment || "development",
       ...options
     };
@@ -1873,8 +1881,7 @@ var RouteLoader = class {
       // 프로덕션 라우트 경로
       environment: options.environment || "development",
       useLayout: options.useLayout !== false,
-      defaultLayout: options.defaultLayout || "default",
-      debug: options.debug || false
+      defaultLayout: options.defaultLayout || "default"
     };
     this.router = router;
     this.formHandler = new FormHandler(router, this.config);
@@ -2189,9 +2196,7 @@ ${template}`;
 var ErrorHandler = class {
   constructor(router, options = {}) {
     this.config = {
-      enableErrorReporting: options.enableErrorReporting !== false,
-      debug: options.debug || false,
-      logLevel: options.logLevel || (options.debug ? "debug" : "info"),
+      logLevel: options.logLevel || "info",
       environment: options.environment || "development"
     };
     this.router = router;
@@ -2221,9 +2226,7 @@ var ErrorHandler = class {
       errorMessage = "\uD398\uC774\uC9C0\uC5D0 \uC811\uADFC\uD560 \uAD8C\uD55C\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.";
     }
     this.debug("ErrorHandler", `\uC5D0\uB7EC \uCF54\uB4DC \uACB0\uC815: ${errorCode} (\uB77C\uC6B0\uD2B8: ${routeName})`);
-    if (this.config.enableErrorReporting) {
-      this.reportError(routeName, error, errorCode);
-    }
+    this.reportError(routeName, error, errorCode);
     try {
       if (errorCode === 404) {
         await this.load404Page();
@@ -2394,7 +2397,7 @@ var ErrorHandler = class {
     if (typeof level !== "string" || !this.logLevels.hasOwnProperty(level)) {
       args = [component, ...args];
       component = level;
-      level = this.config.debug ? "debug" : "info";
+      level = "info";
     }
     const currentLevelValue = this.logLevels[this.config.logLevel] || this.logLevels.info;
     const messageLevelValue = this.logLevels[level] || this.logLevels.info;
@@ -2635,6 +2638,9 @@ var ViewLogicRouter = class {
       i18nPath: "/i18n",
       // 다국어 파일 경로
       logLevel: "info",
+      apiBaseURL: "",
+      requestTimeout: 3e4,
+      uploadTimeout: 3e5,
       authEnabled: false,
       loginRoute: "login",
       protectedRoutes: [],
@@ -2643,8 +2649,7 @@ var ViewLogicRouter = class {
       checkAuthFunction: null,
       redirectAfterLogin: "home",
       authCookieName: "authToken",
-      authStorage: "localStorage",
-      authSkipValidation: false
+      authStorage: "localStorage"
     };
     const config = { ...defaults, ...options };
     config.srcPath = this.resolvePath(config.srcPath, config.basePath);
@@ -2653,49 +2658,42 @@ var ViewLogicRouter = class {
     return config;
   }
   /**
-   * 통합 경로 해결 - 서브폴더 배포 및 basePath 지원
+   * 두 경로를 안전하게 조합 및 정규화 (기본 유틸리티)
+   * @param {string} basePath - 기본 경로
+   * @param {string} relativePath - 상대 경로
+   * @returns {string} 조합된 경로 (예: '/examples' + '/about' → '/examples/about')
+   */
+  combinePaths(basePath, relativePath) {
+    if (!basePath || basePath === "/") {
+      return relativePath.replace(/\/+/g, "/");
+    }
+    const cleanBase = basePath.endsWith("/") ? basePath.slice(0, -1) : basePath;
+    const cleanRelative = relativePath.startsWith("/") ? relativePath : `/${relativePath}`;
+    const combined = `${cleanBase}${cleanRelative}`;
+    return combined.replace(/\/+/g, "/");
+  }
+  /**
+   * 상대 경로를 완전한 절대 URL로 변환 (파일 시스템 전용)
+   * @param {string} path - 변환할 경로
+   * @param {string} basePath - 기본 경로 (옵션)
+   * @returns {string} 완전한 절대 URL (예: 'http://localhost:3000/examples/about')
    */
   resolvePath(path, basePath = null) {
+    if (basePath === null) {
+      basePath = this.config?.basePath || "/";
+    }
     const currentOrigin = window.location.origin;
     if (path.startsWith("http")) {
       return path;
     }
     if (path.startsWith("/")) {
-      if (basePath && basePath !== "/") {
-        const cleanBasePath = basePath.endsWith("/") ? basePath.slice(0, -1) : basePath;
-        const cleanPath = path.startsWith("/") ? path : `/${path}`;
-        const fullPath = `${cleanBasePath}${cleanPath}`;
-        const fullUrl2 = `${currentOrigin}${fullPath}`;
-        return fullUrl2.replace(/([^:])\/{2,}/g, "$1/");
-      }
-      return `${currentOrigin}${path}`;
+      const combinedPath = this.combinePaths(basePath, path);
+      return `${currentOrigin}${combinedPath}`;
     }
     const currentPathname = window.location.pathname;
     const currentBase = currentPathname.endsWith("/") ? currentPathname : currentPathname.substring(0, currentPathname.lastIndexOf("/") + 1);
-    const resolvedPath = this.normalizePath(currentBase + path);
-    const fullUrl = `${currentOrigin}${resolvedPath}`;
-    return fullUrl.replace(/([^:])\/{2,}/g, "$1/");
-  }
-  /**
-   * URL 경로 정규화 (이중 슬래시 제거 및 ../, ./ 처리)
-   */
-  normalizePath(path) {
-    path = path.replace(/\/+/g, "/");
-    const parts = path.split("/").filter((part) => part !== "" && part !== ".");
-    const stack = [];
-    for (const part of parts) {
-      if (part === "..") {
-        if (stack.length > 0 && stack[stack.length - 1] !== "..") {
-          stack.pop();
-        } else if (!path.startsWith("/")) {
-          stack.push(part);
-        }
-      } else {
-        stack.push(part);
-      }
-    }
-    const normalized = "/" + stack.join("/");
-    return normalized === "/" ? "/" : normalized;
+    const resolvedPath = this.combinePaths(currentBase, path);
+    return `${currentOrigin}${resolvedPath}`;
   }
   /**
    * 로깅 래퍼 메서드
@@ -2842,7 +2840,7 @@ var ViewLogicRouter = class {
       if (this.errorHandler) {
         await this.errorHandler.handleRouteError(routeName, error);
       } else {
-        console.error("[Router] No error handler available");
+        console.error("[Router] Critical: No error handler available for route error:", error);
       }
     } finally {
       this.transitionInProgress = false;
@@ -2883,6 +2881,7 @@ var ViewLogicRouter = class {
       currentQuery: this.queryManager?.getQueryParams() || {}
     };
     newVueApp.mount(`#${newPageContainer.id}`);
+    window.scrollTo(0, 0);
     requestAnimationFrame(() => {
       this.cleanupPreviousPages();
       this.transitionInProgress = false;
@@ -2936,31 +2935,17 @@ var ViewLogicRouter = class {
   updateURL(route, params = null) {
     const queryParams = params || this.queryManager?.getQueryParams() || {};
     const queryString = this.queryManager?.buildQueryString(queryParams) || "";
-    const buildURL = (route2, queryString2, isHash = true) => {
-      let base = route2 === "home" ? "/" : `/${route2}`;
-      if (!isHash && this.config.basePath && this.config.basePath !== "/") {
-        base = `${this.config.basePath}${base}`;
-      }
-      const url = queryString2 ? `${base}?${queryString2}` : base;
-      return isHash ? `#${url}` : url;
-    };
+    let base = route === "home" ? "/" : `/${route}`;
     if (this.config.mode === "hash") {
-      const newHash = buildURL(route, queryString);
+      const url = queryString ? `${base}?${queryString}` : base;
+      const newHash = `#${url}`;
       if (window.location.hash !== newHash) {
         window.location.hash = newHash;
       }
     } else {
-      const newPath = buildURL(route, queryString, false);
-      let expectedPath = route === "home" ? "/" : `/${route}`;
-      if (this.config.basePath && this.config.basePath !== "/") {
-        expectedPath = `${this.config.basePath}${expectedPath}`;
-      }
-      const isSameRoute = window.location.pathname === expectedPath;
-      if (isSameRoute) {
-        window.history.replaceState({}, "", newPath);
-      } else {
-        window.history.pushState({}, "", newPath);
-      }
+      base = this.combinePaths(this.config.basePath, base);
+      const url = queryString ? `${base}?${queryString}` : base;
+      window.history.pushState({}, "", url);
       this.handleRouteChange();
     }
   }