shakyshane / module-federation-first-framework

Module Federation First Framework

A file-system based application builder & nested router with first-class support for Module Federation throughout.

• Every page & each level of routing can be it's own federated module
• Each level of routing can both 'resolve' it's component to use, + load it's own data

/user/index.tsx

// given the structure /user/orders/:id
export function User() {
    const { data } = useRouteData();
    return (
        <div>
            <h1>Welcome {data.name}</h1>        
            <Outlet />
        </div>    
    )
}

/user/orders/index.tsx

export function Orders() {
    const { data } = useRouteData();
    return (
        <div>
            <ul>{data.orders.map(order => <li key={order.id}>{order.product.name}</li>)}</ul>
            <Outlet />
        </div>    
    )
}

/user/orders/[id].tsx

export function Order() {
    const { data } = useRouteData();
    return (
        <div>
            <h1>{order.id}</h1>
        </div>    
    )
}