Skip to content
Ufbr

How It Works

Ufbr bridges Vite’s build-time module discovery with fast client-side SPA routing. At its core, ufbr is powered by the Ziko.js router engine, leveraging its lightweight, framework-agnostic path-matching logic to drive client-side navigation across React, Preact, Solid, Svelte, Vue, Van, and Ziko.

The Core Pipeline

Section titled “The Core Pipeline”

When you initialize ufbr, it processes your project files through a 4-stage pipeline:

  1. Vite Glob Parsing

    ufbr consumes Vite’s import.meta.glob() utility to discover your pages at build time. When you pass your page glob to createFileBasedRouter:

    createFileBasedRouter({
      pages: import.meta.glob('./pages/**/*.[jsx,js]'),
      target: document.body
    })

    Vite generates an object mapping file paths to dynamic import functions:

    // Raw Vite Glob Object
    {
      './pages/index.jsx': () => import('./pages/index.jsx'),
      './pages/about.jsx': () => import('./pages/about.jsx'),
      './pages/blog/[id].jsx': () => import('./pages/blog/[id].jsx'),
      './pages/[...slug].jsx': () => import('./pages/[...slug].jsx')
    }

  2. Route Manifest Normalization

    ufbr iterates over the glob object, stripping the base directory (./pages/) and file extensions to convert filesystem syntax into standardized URL patterns.

    File Path                           Transformed Route
    |-- ./pages/index.jsx        -->    /
    |-- ./pages/about.jsx        -->    /about
    |-- ./pages/blog/index.jsx   -->    /blog
    |-- ./pages/blog/[id].jsx    -->    /blog/:id
    |-- ./pages/[...slug].jsx    -->    /*

  3. Powered by Ziko.js Router

    Once normalized, these route definitions are registered directly into the Ziko.js routing engine. Instead of reinventing routing logic for every framework, ufbr relies on Ziko’s core to handle fast pattern matching and parameter extraction.

  4. Framework Adapter Render

    The final stage triggers when a URL change occurs. The Ziko router identifies the match and extracts any parameters. The framework adapter (e.g., ufbr/preact or ufbr/react) resolves the dynamic import and mounts the resulting component tree directly into your specified DOM target, all without a full page refresh.