add ufbr

[zakarialaoui10]

Overview

ufbr is an Universal File Based Router with Preact supports

Features

• File Based Routing
• Static and Dynamic Routes
• Dyamic routes
• Supports Fragement components

Demo

Usage

// .src/main.jsx
import { createFileBasedRouter } from "ufbr/preact";
createFileBasedRouter(
    {
        pages : import.meta.glob('./pages/**/*.jsx'),
        target : document.getElementById('app'),
    }
)

//  .src/pages/slug/[...slug].jsx
export default function Pags({ slug }) {
    const items = slug.split('/');
    return (
        <ul>
            {items.map((item, index) => (
                <li key={index}>{item}</li>
            ))}
        </ul>
    );
}

This setup supports the following routes:

• /slug/a
• /slug/a/b
• /slug/a/b/c
• and any deeper nested paths.

Best practices

Use ufbr with Preact when you need a client-side, file-based router and SEO is not a priority (for example, dashboards or internal tools).
For SSR and SEO-focused, file-based routing, consider using Next.js, Astro, or similar frameworks.

Checklist

• My contribution hasn't been previously submitted.
• My contribution description is short and simple, but descriptive.
• My contribution follows the format: [Title Case Name](link) - Description..

[zakarialaoui10]

@rschristian

I have closed this as well.
I will redesign the API because I misunderstood something about Preact rendering.
Once I fix it, I will reopen it

[zakarialaoui10]

@rschristian

I reimplemented it.

I’m no longer using the ZikoJS file-based router itself, only a few shared utilities for route matching and dynamic params (masks, checks, parsers, etc.).

With this approach, async function App() is not allowed.
If a component needs to perform async work, it should do so inside a useEffect hook instead, following Preact’s rendering rules.

The new Demo : https://stackblitz.com/edit/zakarialaoui10-ufbr-uggmzzzd?file=src%2Fpages%2Fasync%2Ftodos%2F[id].jsx
The new Implementation : https://github.com/zakarialaoui10/ufbr/blob/main/src/preact/index.js

If you consider this resolved, feel free to reopen the PR : preactjs/preact-www#1372

[zakarialaoui10]

@ooade

[ooade]

You'll probably want to take a look at that flash of content.

[zakarialaoui10]

@ooade

@rschristian noticed an issue in the initial implementation, so I temporarily closed the pull request.

The problem is now fixed, and the PR has been reopened.