add ufbr addon

[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.

Implementation :

https://github.com/zakarialaoui10/ufbr/blob/main/src/preact/index.js

[rschristian]

I took a skim, but this doesn't seem to really be a Preact library, as you're consuming things that look like Preact components (but aren't) into a wrapper.

This isn't a file-based router that'd work for Preact apps, but your own framework. I don't think it's appropriate here

[zakarialaoui10]

I took a skim, but this doesn't seem to really be a Preact library, as you're consuming things that look like Preact components (but aren't) into a wrapper.

This isn't a file-based router that'd work for Preact apps, but your own framework. I don't think it's appropriate here

You can check the demo
I have already added this note

Ufbr takes zikojs file based router which can be customized by a domifier
zikofy/preact export both zikofy and domify
domify tranform preact component to HTMLElement

[zakarialaoui10]

I took a skim, but this doesn't seem to really be a Preact library, as you're consuming things that look like Preact components (but aren't) into a wrapper.

This isn't a file-based router that'd work for Preact apps, but your own framework. I don't think it's appropriate here

This how it works

It doesn't transform Preact to Zikojs
Just i used an util without reimplement it

[rschristian]

Yes, I had checked the demo, but those aren't Preact components being used as they can be async. That's very much not allowed.

This page should generally be about tools you can use in a Preact app, not tools that can take Preact-ish components for use elsewhere.

[zakarialaoui10]

Maybe something is wrong because i misunderstood how Preact works , i will solve it later with other approach

[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