• Quick Start 🔥

  Lightweight browser utilities for event management, and window operations in modern JavaScript applications.

  • Setup

    install hmm first.

    hmm i @minejs/browser

  
  

  • Usage

    import {
        WindowManager, EventsManager
    } from '@minejs/browser'

    • 1. Manage Window & DOM with WindowManager

      import { WindowManager } from '@minejs/browser'
      
      const windowManager = new WindowManager()
      
      // Responsive viewport tracking
      const viewport = windowManager.getViewport()
      if (viewport().isMobile) {
          // Handle mobile layout
      }
      
      // Theme management
      windowManager.setTheme('dark')
      
      // Local storage helpers
      windowManager.setStorage('user', { name: 'John' })

    • 2. Track & Manage Events Efficiently

      import { EventsManager } from '@minejs/browser'
      
      const events = new EventsManager()
      
      // Bind event with auto cleanup
      const unbind = events.on(window, 'scroll', () => {
          console.log('Scrolled!')
      })
      
      // Unbind when done
      unbind()
      
      // Auto cleanup
      events.destroy()

  
  

• API Reference 🔥

  • WindowManager

    DOM utilities for viewport tracking, scroll management, theme switching, local storage, meta tags, and element utilities.

  • EventsManager

    Efficient event binding and cleanup with automatic reference tracking and batch unbinding capabilities.

    
    

• Real-World Examples

  • Complete SPA with Router & Window Manager

    import { createRouter, useRoute, WindowManager } from '@minejs/browser'
    
    const windowManager = new WindowManager()
    const router = createRouter({
        routes: [
            {
                path: '/dashboard',
                component: () => DashboardPage,
                meta: { title: 'Dashboard' }
            },
            {
                path: '/products/:id',
                component: () => ProductPage,
                loader: async (ctx) => {
                    return await fetchProduct(ctx.params.id)
                }
            }
        ],
        scrollBehavior: 'smooth'
    })
    
    // Setup guards
    router.beforeEach((to, from) => {
        if (to.path === '/admin' && !isAuthed()) return false
        return true
    })
    
    // Navigation
    router.push('/dashboard')
    
    // Monitor viewport
    const viewport = windowManager.getViewport()
    console.log(viewport().isDesktop) // true

  • Event Delegation with Auto Cleanup

    import { EventsManager } from '@minejs/browser'
    
    const events = new EventsManager()
    
    // Bind multiple events
    events.on(document, 'click', handleClick)
    events.on(window, 'resize', handleResize)
    events.on(window, 'scroll', handleScroll, { passive: true })
    
    // Later: cleanup everything
    events.destroy() // All listeners removed automatically

    
    

---