# useAreModulesRegistered

const areModulesRegistered = useAreModulesRegistered()

import { createRoot } from "react";
import { registerLocalModules, FireflyRuntime, registerRemoteModules, type RemoteDefinition } from "@squide/firefly";
import { register } from "@sample/local-module";
import { App } from "./App.tsx";

const runtime = new FireflyRuntime();

const Remotes: RemoteDefinition = [
    { name: "remote1" }
];

await registerLocalModules([register], runtime, { context });
await registerRemoteModules(Remotes, runtime);

const root = createRoot(document.getElementById("root")!);

root.render(
    <RuntimeContext.Provider value={runtime}>
        <App />
    </RuntimeContext.Provider>
);

import { useMemo, useEffect } from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { completeModuleRegistrations, useAreModulesRegistered, useAreModulesReady, useRoutes, useRuntime } from "@squide/firefly";
import { fetchFeatureFlags, type FeatureFlags } from "@sample/shared";

export function App() {
    const runtime = useRuntime();

    // Re-render the application once all the modules are registered.
    const areModulesRegistered = useAreModulesRegistered();

    // Re-render the application once all the modules are registered.
    // Otherwise, the remotes routes won't be added to the router as the router will be
    // rendered before the remote modules registered their routes.
    const areModulesReady = useAreModulesReady();

    useEffect(() => {
        // Once the modules are registered, fetch the feature flags data.
        // The feature flags data cannot be fetched before the modules are registered because in development,
        // it might be one of the modules that register the MSW request handlers for the feature flags data.
        if (areModulesRegistered) {
            fetchFeatureFlags()
                .then(({ data }: { data?: FeatureFlags }) => {
                    // Execute the deferred registration functions with the feature flags data to complete
                    // the registration process.
                    completeModuleRegistrations(runtime, { featureFlags: data });
                });
        }
    }, [runtime, areModulesRegistered]);

    const routes = useRoutes();

    const router = useMemo(() => {
        return createBrowserRouter(routes);
    }, [routes]);

    if (!areModulesReady) {
        return <div>Loading...</div>;
    }

    return (
        <RouterProvider
            router={router}
            fallbackElement={<div>Loading...</div>}
        />
    );
}