Skip to content

SeamlessRouter v1.0.0: Complete Zero-Config Router with Prefetch, Caching, Offline Mode & Animations

Latest
Latest

Choose a tag to compare

View all tags
@v01gh7 v01gh7 released this 23 Dec 17:18
· 8 commits to main since this release
release
59c8989

🚀 SeamlessRouter v1.0.0

The first complete zero-configuration AJAX router for traditional websites and CMS

SeamlessRouter reaches its first major release! This isn't just another router - it's a complete navigation solution that brings modern SPA features to traditional multi-page websites without the complexity of frameworks.

✨ What Makes This Different?

Feature SeamlessRouter Other Solutions
Setup 1 file, 0 config Complex toolchains
Size 12.3KB gzipped 50-200KB+
Dependencies Zero React/Vue/Angular
Compatibility Any HTML/CMS Framework-specific
Learning Curve Minutes Weeks

🎯 Core Philosophy

"Just work" - SeamlessRouter requires no configuration. All advanced features are enabled by default with intelligent settings that adapt to your users' behavior.

🚀 Four Advanced Systems Included

1. Intelligent Prefetching System ⚡

  • Hover prediction: Loads pages 300ms before click
  • Touch-aware: Works perfectly on mobile
  • Learning algorithm: Adapts to user navigation patterns
  • Smart resource management: Cancels unnecessary prefetches

2. LRU Caching Engine 🧠

  • 30MB smart cache: Automatically manages memory
  • Important pages always cached: Critical paths never expire
  • Update detection: Checks for fresh content via headers
  • Statistics included: Monitor cache performance in console

3. Offline-First Architecture 📶

  • Service Worker powered: Real offline capability
  • Network-first strategy: Balance between speed and freshness
  • Beautiful offline UI: Customizable fallback experience
  • Cache management: Full control over offline storage

4. Animation Framework 🎬

  • 7 animation types: fade, slide (4 directions), collapse, diagonal
  • Direction-aware: Different animations for forward/back
  • Accessibility first: Respects prefers-reduced-motion
  • Browser compatible: Works everywhere, graceful fallbacks

📦 Installation (Choose Your Method)

Method 1: Quick Start (Recommended)

<!-- Just copy this line -->
<script data-keep data-skip src="SeamlessRouter.umd.min.js"></script>

Method 2: Development Build

pnpm install
pnpm build:all

🔧 How It Actually Works

  1. Include the script with data-keep data-skip attributes
  2. Wrap your page scripts in IIFE (one-time requirement)
  3. That's it - everything else happens automatically
// Your page scripts should look like this:
(function() {
    'use strict';
    // Your code - isolated and safe
    window.pageData = { title: 'Page' }; // Optional global export
})();

🛡️ Complete Script Isolation

The secret sauce: IIFE + Sandbox System. Every page's scripts run in complete isolation:

  • No variable conflicts between pages
  • Automatic cleanup of timers and event listeners
  • Memory leak prevention
  • Controlled global exports via window

⚙️ Data Attributes for Control

<!-- Keep script across navigations -->
<script data-keep src="analytics.js"></script>

<!-- Skip re-execution -->
<script data-skip src="library.js"></script>

<!-- Force reload every time -->
<script data-reload src="widget.js"></script>

🧪 Built-in Testing Suite

Open browser console and run:

  • runIntegrationTests() - Full system test
  • testInitialization() - Core functionality
  • testCache() / testPrefetch() - Individual systems
  • testServiceWorker() - Offline capabilities

📊 Performance Metrics

  • Bundle size: 45.8KB minified, 12.3KB gzipped
  • Memory usage: Intelligent 30MB LRU cache
  • Network optimization: Prefetch + cache + offline
  • Zero overhead: No runtime dependencies

🎯 Perfect Use Cases

  1. CMS Websites (WordPress, MODX, Bitrix) - Drop-in speed boost
  2. Legacy Applications - Modernize without rewriting
  3. E-commerce Stores - Faster category navigation
  4. Content Portals - Smooth article browsing
  5. Any Multi-Page Site - Immediate performance improvement

🔗 Quick Links

⚠️ Important Note

CSS mask animations (mask-circle and mask-gradient) have been removed to ensure maximum browser compatibility. The router now includes 7 standard animation types that work reliably across all browsers. LOCATED IN INEW BRANCH "with-mask-animation"

🙏 Why This Exists

Most websites don't need React/Vue/Angular. They just want faster navigation without the framework overhead. SeamlessRouter solves exactly that problem.

License: MIT | Size: 12.3KB gzipped | Dependencies: 0 | Requires: IIFE-wrapped scripts

Built with ❤️ for developers who value simplicity and performance over complexity.

Assets 3
Loading