Modular ownership runtime for React. ​

import { inject } from "@remodulo/container"
import { App, AppProvider, createModuleComponent, withModule, useResolve } from "@remodulo/react"

// Providers
// --------------------

class ApiClient {
    // ...
}

class UserApi {
    private readonly client = inject(ApiClient)

    // ...
}

class UserStore {
    private readonly api = inject(UserApi)

    onModuleMount(): void {
        void this.load()
    }

    async load(): Promise<void> {
        // ...
    }
}

// Module
// --------------------

const UsersModule = createModuleComponent({ providers: [UserApi, UserStore] })

function UsersView() {
    const store = useResolve(UserStore)

    return <UsersTable store={store} />
}

const Users = withModule(UsersModule, UsersView)

// App
// --------------------

export const app = new App({ providers: [ApiClient] })

export function Root() {
    return (
        <AppProvider app={app}>
            <Users />
        </AppProvider>
    )
}