API Reference

createRouter(config)

Creates a new router instance with the given configuration.

Parameters

• config.routes - Route configuration object mapping paths to components
• config.hooks (optional) - Navigation lifecycle hooks

Returns

Returns a RouterApi object with:

• navigate(path, options?) - Navigate to a new route
• route - Reactive route state (pathname, params, etc.)

Example

import { createRouter } from '@mdrv/arc'

const { navigate, route } = createRouter({
  routes: {
    '/': Home,
    '/about': About,
    '/user/:id': UserDetail,
  },
  hooks: {
    before: (to, from) => {
      console.log('Navigating from', from, 'to', to)
      return true // Return false to cancel navigation
    }
  }
})

Router

Component that renders the active route. Used for nested routing.

Example

import Router from '@mdrv/arc/router.svelte'

<div class="layout">
  <nav><!-- Navigation --></nav>
  <main>
    <Router /> <!-- Active route renders here -->
  </main>
</div>

navigate(path, options?)

Programmatically navigate to a route.

Parameters

• path - Target route path
• options.transition (optional) - View transition configuration
• options.replace (optional) - Replace history instead of push

Example

import { createRouter, transitionPresets } from '@mdrv/arc'

const { navigate } = createRouter({ routes })

// Simple navigation
navigate('/about')

// With transition
navigate('/profile', {
  transition: transitionPresets.fade()
})

// Replace history
navigate('/login', { replace: true })

isActiveLink(path)

Check if a path matches the current route.

Example

import { isActiveLink } from '@mdrv/arc'

<a href="/about" class:active={isActiveLink('/about')}>
  About
</a>

route

Reactive state object containing current route information.

Properties

• route.pathname - Current path
• route.params - Route parameters
• route.search - Query string

Example

const { route } = createRouter({ routes })

<p>Current path: {route.pathname}</p>
<p>User ID: {route.params?.id}</p>

transitionPresets

Pre-configured transition effects for common use cases.

Available Presets

• transitionPresets.fade() - Simple opacity fade
• transitionPresets.slide(direction?) - Slide animation (left, right, up, down)
• transitionPresets.scale() - Scale up/down
• transitionPresets.material() - Material Design-style transition

Example

import { transitionPresets } from '@mdrv/arc'

navigate('/next', {
  transition: transitionPresets.slide({ direction: 'left' })
})

// Custom duration
navigate('/page', {
  transition: {
    ...transitionPresets.fade(),
    duration: 500
  }
})

generateTransitionCSS(config)

Generate CSS for custom view transitions.

Example

import { generateTransitionCSS } from '@mdrv/arc'

const css = generateTransitionCSS({
  duration: 300,
  easing: 'ease-in-out',
  name: 'custom-transition'
})

detectNavigationDirection(from, to, patterns?)

Detect if navigation is forward or backward.

Returns

Returns 'forward', 'back', or 'unknown'

Example

import { detectNavigationDirection } from '@mdrv/arc'

const direction = detectNavigationDirection('/step1', '/step2')
// 'forward'

const direction2 = detectNavigationDirection('/step3', '/step1')
// 'back'

supportsViewTransitions()

Check if browser supports View Transition API.

Example

import { supportsViewTransitions } from '@mdrv/arc'

if (supportsViewTransitions()) {
  // Use transitions
} else {
  // Fallback
}

startViewTransition(callback)

Manually start a view transition.

Example

import { startViewTransition } from '@mdrv/arc'

await startViewTransition(() => {
  // Update DOM
  element.classList.toggle('active')
})

viewTransitionName(name)

Helper for setting view-transition-name CSS property.

Example

import { viewTransitionName } from '@mdrv/arc'

<div style={viewTransitionName('hero-image')}>
  <img src="hero.jpg" alt="Hero" />
</div>

Loader

Component for displaying loading states during route transitions.

Example

import { Loader } from '@mdrv/arc'

<Loader>
  {#snippet loading()}
    <div>Loading...</div>
  {/snippet}
  
  {#snippet error(err)}
    <div>Error: {err.message}</div>
  {/snippet}
  
  {#snippet children()}
    <Router />
  {/snippet}
</Loader>

searchParams

Reactive proxy for reading and writing URL search parameters.

Example

import { searchParams } from '@mdrv/arc'

// Read parameter
const page = searchParams.page // '1'

// Write parameter
searchParams.page = '2' // Updates URL to ?page=2

// Delete parameter
delete searchParams.page

Status

Enum for loader status values.

Values

• Status.IDLE
• Status.LOADING
• Status.SUCCESS
• Status.ERROR

countProgress(promises)

Track loading progress across multiple promises.

Example

import { countProgress } from '@mdrv/arc'

const promises = [
  fetch('/api/users'),
  fetch('/api/posts'),
  fetch('/api/comments'),
]

const progress = countProgress(promises)
// progress.loaded = 0, progress.total = 3

// As promises resolve:
// progress.loaded = 1, progress.total = 3
// progress.loaded = 2, progress.total = 3
// progress.loaded = 3, progress.total = 3

Core Types

• Routes - Route configuration object type
• RouterApi - Return type of createRouter()
• RouteComponent - Component type for routes
• LazyRouteComponent - Lazy-loaded component type
• LayoutComponent - Layout component type

Navigation Types

• NavigateOptions - Options for navigate() function
• Location - Location object type
• Path - Path string type
• PathParams - Route parameters type
• AllParams - All extracted parameters

Transition Types

• TransitionConfig - View transition configuration
• TransitionDirection - 'forward' | 'back' | 'unknown'
• ViewTransition - Native ViewTransition interface

Hook Types

• Hooks - Navigation hooks configuration
• Phase - Hook execution phase

Component Tree Types

• ComponentTree - Component tree structure
• ComponentTreeNode - Individual tree node

Type Usage Example

import type { 
  Routes, 
  NavigateOptions, 
  TransitionConfig 
} from '@mdrv/arc'

const routes: Routes = {
  '/': Home,
  '/about': About,
}

const navOptions: NavigateOptions = {
  transition: {
    duration: 300,
    easing: 'ease-in-out'
  }
}