Skip to content

zakarialaoui10/ufbr

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ufbr

Universal File-Based Router - A framework-agnostic file-based routing solution for modern web applications.

ufbr automatically generates routes from your file structure, eliminating the need for manual route configuration. Perfect for building single-page applications with intuitive file organization.

Features

  • 📁 File-Based Routing - Routes automatically generated from your file structure
  • Sync & Async Components - Support for both synchronous and asynchronous component loading
  • 🔗 Nested Routes - Build hierarchical route structures effortlessly
  • 🎯 Dynamic Routes - Create parameterized routes with [param] syntax
  • 🎨 Framework Agnostic - Works with Preact, Solid, Ziko, Vue, and more

Installation

npm install ufbr

Quick Start

Basic Usage

import { createFileBasedRouter } from 'ufbr/[FRAMEWORK]'

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

Demos

Tech Stackblitz Link
Van Open in StackBlitz
Preact Open in StackBlitz
Solid Open in StackBlitz
Vue
Svelte

API

createFileBasedRouter(options)

Options:

  • pages (object) - Result of import.meta.glob() pattern with all page components
  • target (Element) - DOM element where the router will render components

File Structure Example

pages/
├── index.[extension]           → /
├── about.[extension]           → /about
├── blog/
│   ├── index.[extension]       → /blog
│   └── [id].[extension]        → /blog/:id
└── user/
    └── [name].[extension]      → /user/:name

License

MIT

Releases

No releases published

Packages

No packages published