viewlogic 1.2.3 → 1.2.5

package/README.md

@@ -12,64 +12,36 @@
   </a>
 </p>
 
-> **Complete Vue 3 Framework**: Routing + State Management + Authentication + i18n + Caching + API + Forms
+> **Complete Vue 3 Framework**: All-in-one solution for modern web development
 
-## 🎯 Core Philosophy: Simplicity Through Design
+## 🎯 Core Philosophy
 
-ViewLogic Router revolutionizes Vue development with two fundamental core principles:
+ViewLogic Router revolutionizes Vue development with two fundamental principles:
 
 ### 🎭 View-Logic Separation
-**Complete separation between View (presentation) and Logic (business logic)**. Views are pure HTML templates, logic is pure JavaScript components, making your code more maintainable, testable, and scalable.
+**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.
 
 ### 🚀 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.
 
-## 🚀 Why Choose ViewLogic Router?
+## ✨ What Makes ViewLogic Special
 
-**All-in-One Solution** - Replace 7+ libraries with one unified framework:
-- 🔀 **Vue Router** → ViewLogic Routing
-- 📦 **Pinia/Vuex** → StateHandler
-- 🔐 **Auth Libraries** → AuthManager
-- 🌐 **Vue I18n** → I18nManager
-- 💾 **Cache Libraries** → CacheManager
-- 🌐 **API Libraries** → ApiHandler
-- 📝 **Form Libraries** → FormHandler
+**All-in-One Solution** - Replace multiple libraries with one unified framework:
+- 🔀 **Routing** - File-based routing with zero configuration
+- 📦 **State Management** - Built-in reactive state without external dependencies
+- 🔐 **Authentication** - JWT auth with multiple storage options
+- 🌐 **Internationalization** - Multi-language support with lazy loading
+- 💾 **Caching** - Smart caching with TTL and LRU eviction
+- 🌐 **API Client** - HTTP client with automatic token injection
+- 📝 **Form Handling** - Revolutionary form processing with parameter substitution
 
-**Tiny Bundle Size** - Complete framework in just 51KB minified / 17KB gzipped!
+**Tiny Bundle Size** - Complete framework in just **51KB minified / 17KB gzipped**!
 
 **Easy Integration** - Drop-in UMD build available for instant usage without build tools.
 
-## ✨ Key Features
-
-- 🚀 **Ultra-Lightweight** - Complete routing system with zero dependencies and optimized codebase
-- 🔄 **Multiple API Support** - Parallel data fetching from multiple APIs with named data storage
-- 📝 **Automatic Form Handling** - Revolutionary form submission with `{paramName}` variable parameters
-- 🛠️ **Built-in Components** - Preloaded UI components including revolutionary DynamicInclude & HtmlInclude
-- 🔗 **Query-Based Parameter System** - Simple query-only parameters (`/users?id=123`) instead of complex path parameters
-- ⚡ **Optimized Production** - Pre-built individual route bundles for lightning-fast production
-- 📁 **Intuitive Structure** - Organized folder structure for views, logic, styles, layouts, and components
-- 💾 **Smart Caching** - Intelligent route and component caching with TTL and LRU eviction
-- 🔐 **Authentication** - Built-in JWT auth management with multiple storage options
-- 🌐 **i18n Ready** - Built-in internationalization support with lazy loading
-- 📊 **State Management** - Reactive state management without external dependencies
-
-### What's Included
-- ✅ Complete routing system with hash/history mode
-- ✅ Advanced caching with TTL and size limits
-- ✅ Built-in authentication with multiple storage options
-- ✅ Internationalization system with lazy loading
-- ✅ Form handling with automatic validation
-- ✅ RESTful API client with parameter substitution
-- ✅ Component loading and management
-- ✅ Error handling and logging system
-- ✅ Query parameter management
-- ✅ Layout system with slot-based composition
-- ✅ Global state management with reactivity
-- ✅ Event system for component communication
-
 ## 🏗️ Project Structure
 
-ViewLogic Router follows a clean, intuitive folder structure that promotes maintainability:
+ViewLogic Router follows a clean, intuitive folder structure:
 
 ```
 project/
@@ -88,58 +60,81 @@ project/
 │   ├── layouts/            # Layout templates
 │   │   ├── default.html
 │   │   └── admin.html
-│   ├── styles/             # CSS files
-│   │   ├── home.css
-│   │   └── global.css
-│   └── locales/            # i18n files (optional)
-│       ├── en.json
-│       └── ko.json
+│   └── styles/             # Page-specific CSS files
+│       ├── home.css
+│       └── user-profile.css
+├── css/                    # Global CSS files
+│   └── base.css            # Base styles
+├── js/                     # JavaScript library files
+│   ├── viewlogic-router.js     # Development version
+│   ├── viewlogic-router.min.js # Minified version
+│   └── viewlogic-router.umd.js # UMD bundle
+├── i18n/                   # Internationalization files
+│   ├── en.json            # English translations
+│   ├── ko.json            # Korean translations
+│   └── ja.json            # Japanese translations
+├── routes/                 # Auto-generated after building
+│   ├── home.js            # Built route bundles
+│   ├── user-profile.js
+│   └── dashboard.js
 ├── index.html              # Main entry point
-├── package.json
-└── config.json             # Optional configuration
+└── package.json
 ```
 
 ## 🚀 Quick Start
 
-### Method 1: ES6 Modules (Recommended)
+### Method 1: Create New Project (Recommended)
 
 ```bash
-npm install viewlogic
+npm create viewlogic myapp
+cd myapp
+npm run dev
 ```
 
+This creates a complete project with examples and starts the development server.
+
+### Method 2: UMD Build (No Build Tools)
+
 ```html
 <!DOCTYPE html>
 <html>
 <head>
     <title>My ViewLogic App</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/viewlogic/dist/viewlogic-router.umd.js"></script>
 </head>
 <body>
     <div id="app"></div>
-    <script type="module">
-        import { ViewLogicRouter } from 'viewlogic';
-        const router = new ViewLogicRouter({
-            authEnabled: true,
-            useI18n: true
+    <script>
+        ViewLogicRouter({
+            environment: 'development'
         });
     </script>
 </body>
 </html>
 ```
 
-### Method 2: UMD Build (No Build Tools)
+### Method 3: ES6 Modules
+
+```bash
+npm install viewlogic
+```
 
 ```html
 <!DOCTYPE html>
 <html>
 <head>
     <title>My ViewLogic App</title>
-    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/viewlogic/dist/viewlogic-router.umd.js"></script>
 </head>
 <body>
     <div id="app"></div>
-    <script>
-        const router = new ViewLogicRouter();
+    <script type="module">
+        import { ViewLogicRouter } from 'viewlogic';
+        const router = new ViewLogicRouter({
+            environment: 'production',
+            authEnabled: true,
+            useI18n: true
+        });
     </script>
 </body>
 </html>
@@ -151,83 +146,194 @@ npm install viewlogic
 ```html
 <div class="home">
     <h1>{{ message }}</h1>
-    <p>Counter: {{ count }} | Global Count: {{ globalCount }}</p>
-    <button @click="increment">Local +1</button>
-    <button @click="incrementGlobal">Global +1</button>
-    <button @click="saveUser" :disabled="loading">
-        {{ loading ? 'Saving...' : 'Save User' }}
-    </button>
-    <div v-if="user">
-        <h3>{{ $t('welcome.message', { name: user.name }) }}</h3>
-    </div>
+    <button @click="increment">Click me: {{ count }}</button>
 </div>
 ```
 
 **src/logic/home.js**
 ```javascript
 export default {
+    // Optional: specify layout (defaults to 'default')
+    layout: 'default',        // Use layouts/default.html
+    // layout: 'admin',       // Use layouts/admin.html
+    // layout: null,          // No layout (page-only content)
+
     data() {
         return {
             message: 'Welcome to ViewLogic!',
-            count: 0,
-            loading: false
+            count: 0
         };
     },
+    methods: {
+        increment() {
+            this.count++;
+        }
+    }
+};
+```
+
+**src/styles/home.css** (optional)
+```css
+.home {
+    padding: 2rem;
+    text-align: center;
+}
+
+.home h1 {
+    color: #2c3e50;
+    margin-bottom: 1rem;
+}
+```
+
+**src/layouts/default.html** (optional)
+```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
+
+**src/views/user-profile.html**
+```html
+<div class="user-profile">
+    <h1>User Profile</h1>
+    <p>User ID: {{ userId }}</p>
+    <p>Tab: {{ activeTab }}</p>
+    <button @click="switchTab('settings')">Settings</button>
+    <button @click="switchTab('posts')">Posts</button>
+</div>
+```
+
+**src/logic/user-profile.js**
+```javascript
+export default {
     computed: {
-        globalCount() {
-            return this.$state.get('globalCounter', 0);
+        userId() {
+            return this.getParam('userId', 'No ID');
         },
-        user() {
-            return this.$state.get('currentUser');
+        activeTab() {
+            return this.getParam('tab', 'profile');
         }
     },
     methods: {
-        increment() {
-            this.count++;
-        },
-        incrementGlobal() {
-            const current = this.$state.get('globalCounter', 0);
-            this.$state.set('globalCounter', current + 1);
-        },
-        async saveUser() {
-            this.loading = true;
-            try {
-                const userData = {
-                    name: 'John Doe',
-                    email: 'john@example.com'
-                };
+        switchTab(tab) {
+            // Navigate with query parameters
+            this.navigateTo('user-profile', {
+                userId: this.userId,
+                tab: tab
+            });
+        }
+    }
+};
+```
 
-                const savedUser = await this.$api.post('/api/users', userData);
-                this.$state.set('currentUser', savedUser);
+**Usage:** Navigate to `/user-profile?userId=123&tab=settings` or `#/user-profile?userId=123&tab=settings` (hash mode)
 
-                this.$toast?.success?.('User saved successfully!');
-            } catch (error) {
-                this.$toast?.error?.('Failed to save user');
-            } finally {
-                this.loading = false;
-            }
+**Multiple ways to access parameters:**
+```javascript
+// Direct parameter access
+const userId = this.$params.userId;        // Route parameter (direct access)
+const tab = this.$query.tab;               // Query parameter (direct access)
+const search = this.getParam('search');    // Either route or query param
+const allParams = this.getParams();        // Get all parameters
+
+// With default values
+const page = this.getParam('page', 1);     // Default to 1 if not found
+const sort = this.$query.sort || 'asc';    // Manual default for query params
+```
+
+### Reusable Components
+
+ViewLogic automatically loads components from the `components/` folder:
+
+**src/components/UserCard.js**
+```javascript
+export default {
+    name: 'UserCard',
+    template: `
+        <div class="user-card">
+            <img :src="user.avatar" :alt="user.name" class="avatar">
+            <div class="info">
+                <h3>{{ user.name }}</h3>
+                <p>{{ user.email }}</p>
+                <button @click="$emit('edit', user)" class="btn-edit">
+                    Edit User
+                </button>
+            </div>
+        </div>
+    `,
+    emits: ['edit'],
+    props: {
+        user: {
+            type: Object,
+            required: true
         }
+    }
+};
+```
+
+**Using components in views:**
+
+**src/views/users.html**
+```html
+<div class="users-page">
+    <h1>Users</h1>
+    <UserCard
+        v-for="user in users"
+        :key="user.id"
+        :user="user"
+        @edit="editUser"
+    />
+</div>
+```
+
+**src/logic/users.js**
+```javascript
+export default {
+    data() {
+        return {
+            users: []
+        };
     },
-    mounted() {
-        // Watch for global state changes
-        this.$state.watch('currentUser', (newUser) => {
-            console.log('User changed globally:', newUser);
-        });
+    methods: {
+        editUser(user) {
+            this.navigateTo('user-edit', { userId: user.id });
+        }
     }
 };
 ```
 
+**Dynamic Component Loading:**
+- Just add `.js` files to `src/components/` folder
+- Components are automatically discovered and loaded
+- No import statements needed - ViewLogic handles everything
+- Components are available instantly in all views
+
 ## 🎯 Core APIs
 
 ### State Management
 
-ViewLogic Router includes a powerful built-in state management system:
+Built-in reactive state management system:
 
 ```javascript
 // Set state (any component can access)
 this.$state.set('user', { name: 'John', age: 30 });
 this.$state.set('theme', 'dark');
-this.$state.set('shoppingCart', []);
 
 // Get state with optional default
 const user = this.$state.get('user');
@@ -241,12 +347,10 @@ 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;
 });
 
-// Stop watching
-this.$state.unwatch('user', callbackFunction);
-
 // Bulk updates
 this.$state.update({
     theme: 'dark',
@@ -263,42 +367,32 @@ this.$state.delete('temporaryData');
 
 ### Authentication System
 
-Complete authentication management with multiple storage options:
+Complete authentication management:
 
 ```javascript
 // Check authentication status
-if (this.$isAuthenticated()) {
+if (this.isAuth()) {
     console.log('User is logged in');
 }
 
 // Login with token
-this.$setToken('jwt-token-here');
+this.setToken('jwt-token-here');
 
 // Login with options
-this.$setToken('jwt-token', {
-    storage: 'localStorage',  // 'localStorage', 'sessionStorage', 'cookie'
-    skipValidation: false     // Skip JWT validation
+this.setToken('jwt-token', {
+    storage: 'localStorage'   // 'localStorage', 'sessionStorage', 'cookie'
 });
 
 // Get current token
-const token = this.$getToken();
-
-// Login success handling (redirects to protected route or default)
-this.$loginSuccess('/dashboard');
+const token = this.getToken();
 
 // Logout (clears token and redirects to login)
-this.$logout();
-
-// Manual auth check for specific route
-const authResult = await this.$checkAuth('admin-panel');
-if (authResult.allowed) {
-    // User can access admin panel
-}
+this.logout();
 ```
 
 ### API Management
 
-Built-in HTTP client with automatic token injection and parameter substitution:
+Built-in HTTP client with automatic token injection:
 
 ```javascript
 // GET request
@@ -324,11 +418,6 @@ await this.$api.delete('/api/users/{userId}');
 // If current route is /users?userId=123, this becomes /api/users/123
 const user = await this.$api.get('/api/users/{userId}');
 
-// Custom headers
-const response = await this.$api.post('/api/secure-endpoint', data, {
-    headers: { 'X-Custom-Header': 'value' }
-});
-
 // Automatic data loading in components
 export default {
     // Single API endpoint
@@ -344,13 +433,48 @@ export default {
     mounted() {
         // Data automatically loaded and available as:
         // this.profile, this.posts, this.notifications
+    },
+
+    methods: {
+        // Manual data refresh - reuses dataURL configuration
+        async refreshData() {
+            await this.fetchData();
+            // All dataURL endpoints are called again
+        },
+
+        // Refresh when filters change
+        async applyFilter(filterType) {
+            this.$query.filter = filterType;
+            await this.fetchData(); // Refetch with new filter parameter
+        },
+
+        // Refresh when user changes
+        async switchUser(newUserId) {
+            this.$params.userId = newUserId;
+            await this.fetchData(); // Refetch with new userId parameter
+        },
+
+        // Pagination
+        async changePage(page) {
+            this.$query.page = page;
+            await this.fetchData(); // Load new page data
+        },
+
+        // Custom data loading
+        async loadSpecificData() {
+            const customData = await this.fetchData({
+                profile: '/api/admin/profile',
+                stats: '/api/stats?period={period}'
+            });
+            // Override default dataURL temporarily
+        }
     }
 };
 ```
 
 ### Internationalization
 
-Comprehensive i18n system with lazy loading and pluralization:
+Comprehensive i18n system:
 
 ```javascript
 // Simple translation
@@ -362,30 +486,57 @@ const greeting = this.$t('hello.user', { name: 'John', role: 'admin' });
 // Nested keys
 const errorMsg = this.$t('errors.validation.email.required');
 
-// Plural forms
-const itemCount = this.$plural('items.count', count, { count });
-// items.count.singular: "{count} item"
-// items.count.plural: "{count} items"
-
 // Check current language
-const currentLang = this.$i18n.getCurrentLanguage();
+const currentLang = this.getLanguage();
 
 // Change language (automatically reloads interface)
-await this.$i18n.setLanguage('ko');
+await this.setLanguage('ko');
+```
 
-// Format dates/numbers according to locale
-const date = this.$i18n.formatDate(new Date(), {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric'
-});
+### Logging & Error Handling
 
-const price = this.$i18n.formatNumber(1234.56, {
-    style: 'currency',
-    currency: 'USD'
-});
+Built-in logging system for debugging and error tracking:
+
+```javascript
+export default {
+    async mounted() {
+        this.log('info', 'Component mounted successfully');
+    },
+
+    methods: {
+        async handleUserAction() {
+            this.log('debug', 'User action started', { action: 'submit' });
+
+            try {
+                const result = await this.$api.post('/api/users', userData);
+                this.log('info', 'User created successfully', result);
+            } catch (error) {
+                this.log('error', 'Failed to create user:', error);
+            }
+        },
+
+        async loadData() {
+            this.log('debug', 'Loading user data...');
+
+            try {
+                const data = await this.fetchData();
+                this.log('info', 'Data loaded', { count: data.length });
+            } catch (error) {
+                this.log('warn', 'Data loading failed, using cache', error);
+            }
+        }
+    }
+};
 ```
 
+**Log Levels:**
+- `debug` - Development debugging information
+- `info` - General information and success messages
+- `warn` - Warning messages for recoverable issues
+- `error` - Error messages for failures
+
+All logs include the component name automatically: `[routeName] Your message`
+
 ### Navigation & Routing
 
 Simple yet powerful routing system:
@@ -403,76 +554,93 @@ this.navigateTo({
     params: { query: 'vue', category: 'tutorials' }
 });
 
-// Get current route information
-const currentRoute = this.$route.current;
-const routeParams = this.$route.params;
-const queryParams = this.$route.query;
-
-// Access specific parameters
-const userId = this.$params.userId;        // Route parameter
-const tab = this.$query.tab;               // Query parameter
-const searchTerm = this.$param('search');  // Either route or query param
-
-// Check if route is protected
-const isProtected = this.$route.isProtected('admin-dashboard');
-
-// Navigate with state preservation
-this.navigateTo('dashboard', {
-    preserveState: true,
-    scrollTop: false
-});
 ```
 
+
 ### Form Handling
 
-Revolutionary form processing with automatic parameter substitution:
+Revolutionary automatic form processing with parameter substitution:
 
 ```html
-<!-- Basic form with automatic handling -->
-<form action="/api/users" method="POST">
+<!-- Basic form - automatically handled on submit -->
+<form action="/api/users" method="POST"
+      data-success="onUserCreated"
+      data-error="onUserError"
+      data-loading="setLoading">
     <input name="name" v-model="userData.name" required>
     <input name="email" v-model="userData.email" type="email" required>
     <button type="submit">Create User</button>
 </form>
 
 <!-- Form with parameter substitution -->
-<form action="/api/users/{userId}" method="PUT">
+<form action="/api/users/{userId}" method="PUT"
+      data-success="onUserUpdated"
+      data-redirect="user-profile">
     <input name="name" v-model="user.name">
     <input name="email" v-model="user.email">
     <button type="submit">Update User</button>
 </form>
 
 <!-- File upload form -->
-<form action="/api/upload" method="POST" enctype="multipart/form-data">
+<form action="/api/upload" method="POST" enctype="multipart/form-data"
+      data-success="onFileUploaded">
     <input name="avatar" type="file" accept="image/*">
     <input name="description" v-model="description">
     <button type="submit">Upload</button>
 </form>
+
+<!-- Form with custom validation -->
+<form action="/api/contact" method="POST">
+    <input name="email" type="email" data-validation="validateEmail" required>
+    <textarea name="message" data-validation="validateMessage" required></textarea>
+    <button type="submit">Send Message</button>
+</form>
 ```
 
 ```javascript
-// Programmatic form submission
+// Component logic with form handlers
 export default {
+    data() {
+        return {
+            userData: { name: '', email: '' },
+            user: { name: 'John', email: 'john@example.com' },
+            loading: false
+        };
+    },
     methods: {
-        async submitForm() {
-            const formData = {
-                name: this.userData.name,
-                email: this.userData.email
-            };
+        // Success handlers
+        onUserCreated(response, form) {
+            this.$state.set('newUser', response);
+            this.navigateTo('user-profile', { userId: response.id });
+        },
 
-            try {
-                const result = await this.$form.submit('/api/users', formData, {
-                    method: 'POST',
-                    onProgress: (progress) => {
-                        this.uploadProgress = progress;
-                    }
-                });
-
-                this.$state.set('newUser', result);
-                this.navigateTo('user-profile', { userId: result.id });
-            } catch (error) {
-                this.handleError(error);
-            }
+        onUserUpdated(response, form) {
+            this.$state.set('currentUser', response);
+            // Auto redirect via data-redirect="user-profile"
+        },
+
+        onFileUploaded(response, form) {
+            this.$state.set('uploadedFile', response.file);
+        },
+
+        // Error handler
+        onUserError(error, form) {
+            console.error('User operation failed:', error);
+        },
+
+        // Loading handler
+        setLoading(isLoading, form) {
+            this.loading = isLoading;
+        },
+
+        // Custom validation functions
+        validateEmail(value, input) {
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            return emailRegex.test(value);
+        },
+
+        validateMessage(value, input) {
+            return value.length >= 10;
         }
     }
 };
@@ -488,9 +656,6 @@ const router = new ViewLogicRouter({
     basePath: '/',                      // Base path for the application
     mode: 'hash',                       // 'hash' or 'history'
 
-    // State management (always enabled)
-    // No configuration needed - StateHandler is always available
-
     // Authentication settings
     authEnabled: true,                  // Enable authentication system
     loginRoute: 'login',                // Route name for login page
@@ -502,16 +667,17 @@ const router = new ViewLogicRouter({
     // Internationalization
     useI18n: true,                      // Enable i18n system
     defaultLanguage: 'en',              // Default language
-    i18nPath: '/src/locales',          // Path to language files
+    i18nPath: '/i18n',                  // Path to language files
 
     // Caching system
-    cacheMode: 'memory',                // 'memory' only (others removed for simplicity)
+    cacheMode: 'memory',                // Memory caching only
     cacheTTL: 300000,                   // Cache TTL in milliseconds (5 minutes)
     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'
@@ -525,163 +691,18 @@ const router = new ViewLogicRouter({
 const router = new ViewLogicRouter({
     // Custom authentication function
     authEnabled: true,
-    checkAuthFunction: async (routeName) => {
-        const token = localStorage.getItem('authToken');
-        if (!token) return false;
-
+    checkAuthFunction: async (route) => {
         try {
-            const response = await fetch('/api/auth/verify', {
-                method: 'POST',
-                headers: {
-                    'Authorization': `Bearer ${token}`,
-                    'Content-Type': 'application/json'
-                }
-            });
-
-            if (response.ok) {
-                const userData = await response.json();
-                // Store user data in global state
-                router.stateHandler.set('currentUser', userData);
-                return true;
-            }
-            return false;
+            // Use ViewLogic APIs like in components
+            const userData = await route.$api.get('/api/auth/verify');
+            route.$state.set('currentUser', userData);
+            return true;
         } catch (error) {
             console.error('Auth verification failed:', error);
             return false;
         }
-    },
-
-    // Custom route loading
-    routeResolver: (routeName) => {
-        // Custom logic for resolving route files
-        if (routeName.startsWith('admin/')) {
-            return {
-                viewPath: `/admin/views/${routeName.slice(6)}.html`,
-                logicPath: `/admin/logic/${routeName.slice(6)}.js`
-            };
-        }
-        return null; // Use default resolution
-    },
-
-    // Global error handler
-    onError: (error, context) => {
-        console.error('ViewLogic Error:', error, context);
-        // Send to error tracking service
-        if (window.errorTracker) {
-            window.errorTracker.log(error, context);
-        }
-    },
-
-    // Global route change handler
-    onRouteChange: (newRoute, oldRoute) => {
-        // Analytics tracking
-        if (window.analytics) {
-            window.analytics.track('page_view', {
-                route: newRoute,
-                previous_route: oldRoute
-            });
-        }
-    }
-});
-```
-
-## 📦 Bundle Size Comparison
-
-| Solution | Minified | Gzipped |
-|----------|----------|---------|
-| **ViewLogic Router** (Complete) | **51KB** | **17KB** |
-| Vue Router + Pinia + Vue I18n | 150KB+ | 45KB+ |
-| React Router + Redux + i18next | 200KB+ | 60KB+ |
-| Next.js (Runtime) | 300KB+ | 85KB+ |
-
-*ViewLogic Router provides the functionality of 7+ libraries in a package smaller than most single-purpose libraries.*
-
-## 🎯 Migration Guide
-
-### From Vue Router + Pinia
-
-**Before:**
-```javascript
-// main.js - Multiple library setup
-import { createApp } from 'vue';
-import { createRouter, createWebHistory } from 'vue-router';
-import { createPinia } from 'pinia';
-import { createI18n } from 'vue-i18n';
-import App from './App.vue';
-
-const router = createRouter({
-    history: createWebHistory(),
-    routes: [/* complex route config */]
-});
-
-const pinia = createPinia();
-const i18n = createI18n({/* complex i18n config */});
-
-const app = createApp(App);
-app.use(router).use(pinia).use(i18n);
-app.mount('#app');
-```
-
-**After:**
-```javascript
-// index.html - Single setup
-import { ViewLogicRouter } from 'viewlogic';
-
-const router = new ViewLogicRouter({
-    mode: 'history',
-    useI18n: true,
-    authEnabled: true
-});
-// Everything is auto-configured and ready to use!
-```
-
-### State Management Migration
-
-**Before (Pinia):**
-```javascript
-// stores/user.js
-import { defineStore } from 'pinia';
-
-export const useUserStore = defineStore('user', {
-    state: () => ({
-        currentUser: null,
-        preferences: {}
-    }),
-    getters: {
-        isLoggedIn: (state) => !!state.currentUser,
-        userName: (state) => state.currentUser?.name || 'Guest'
-    },
-    actions: {
-        setUser(userData) {
-            this.currentUser = userData;
-        },
-        updatePreferences(prefs) {
-            this.preferences = { ...this.preferences, ...prefs };
-        }
     }
 });
-
-// In components
-import { useUserStore } from '@/stores/user';
-const userStore = useUserStore();
-userStore.setUser(userData);
-```
-
-**After (ViewLogic):**
-```javascript
-// In any component - no store files needed!
-this.$state.set('currentUser', userData);
-this.$state.update({ preferences: newPrefs });
-
-// Computed properties work naturally
-computed: {
-    isLoggedIn() {
-        return !!this.$state.get('currentUser');
-    },
-    userName() {
-        return this.$state.get('currentUser')?.name || 'Guest';
-    }
-}
 ```
 
 ## 🔧 Production Build
@@ -695,9 +716,6 @@ npm run build
 
 # Preview production build
 npm run serve
-
-# Build with custom config
-npm run build -- --config custom.config.js
 ```
 
 ### Production Optimizations
@@ -710,102 +728,6 @@ ViewLogic Router automatically optimizes for production:
 - **Caching**: Aggressive caching for static assets
 - **Lazy loading**: Routes and components load on demand
 
-## 🌟 Advanced Examples
-
-### E-commerce Dashboard
-
-```javascript
-// logic/dashboard.js
-export default {
-    dataURL: {
-        overview: '/api/dashboard/overview',
-        sales: '/api/sales/recent',
-        products: '/api/products/trending'
-    },
-
-    computed: {
-        totalRevenue() {
-            return this.sales?.reduce((sum, sale) => sum + sale.amount, 0) || 0;
-        },
-        cartItems() {
-            return this.$state.get('shoppingCart', []);
-        }
-    },
-
-    methods: {
-        async addToCart(product) {
-            const cart = this.$state.get('shoppingCart', []);
-            const existingItem = cart.find(item => item.id === product.id);
-
-            if (existingItem) {
-                existingItem.quantity += 1;
-            } else {
-                cart.push({ ...product, quantity: 1 });
-            }
-
-            this.$state.set('shoppingCart', cart);
-
-            // Sync with backend
-            await this.$api.post('/api/cart/sync', { items: cart });
-        },
-
-        async checkout() {
-            const items = this.$state.get('shoppingCart', []);
-            try {
-                const order = await this.$api.post('/api/orders', { items });
-                this.$state.set('shoppingCart', []);
-                this.$state.set('lastOrder', order);
-                this.navigateTo('order-confirmation', { orderId: order.id });
-            } catch (error) {
-                this.$toast?.error?.('Checkout failed. Please try again.');
-            }
-        }
-    }
-};
-```
-
-### Multi-tenant Application
-
-```javascript
-// Handle different tenants with state management
-export default {
-    async mounted() {
-        const tenantId = this.$params.tenantId || this.$query.tenant;
-
-        if (tenantId !== this.$state.get('currentTenant')?.id) {
-            await this.switchTenant(tenantId);
-        }
-    },
-
-    methods: {
-        async switchTenant(tenantId) {
-            try {
-                const tenant = await this.$api.get('/api/tenants/{tenantId}', {
-                    params: { tenantId }
-                });
-
-                // Update global state
-                this.$state.update({
-                    currentTenant: tenant,
-                    userPermissions: tenant.permissions,
-                    theme: tenant.branding.theme
-                });
-
-                // Update language if tenant has preference
-                if (tenant.defaultLanguage) {
-                    await this.$i18n.setLanguage(tenant.defaultLanguage);
-                }
-
-                // Update API base URL for tenant
-                this.$api.setBaseURL(`/api/tenants/${tenantId}`);
-
-            } catch (error) {
-                this.navigateTo('tenant-not-found');
-            }
-        }
-    }
-};
-```
 
 ## 🤝 Contributing