@wener/console/lib/console/ConsoleLoader.js

Base console UI toolkit

import React, { useState } from "react";
import { createHashRouter, Outlet, RouterProvider } from "react-router-dom";
import { ErrorSuspenseBoundary, useAsyncEffect, useDebugRender } from "@wener/reaction";
import { useStore } from "zustand";
import { isDev } from "../const.js";
import { useLogger } from "../hooks/index.js";
import { getConsoleContext, NotFoundPage, PageErrorState } from "../web/index.js";
import { LoadingIndicator } from "./components/index.js";
import { RootRouterReactor } from "./components/RootRouterReactor.js";
import { getRouteStore, getSiteStore } from "./context.js";
var ServiceState = /*#__PURE__*/ function (ServiceState) {
    ServiceState["New"] = "New";
    ServiceState["Pending"] = "Pending";
    ServiceState["Done"] = "Done";
    ServiceState["Error"] = "Error";
    return ServiceState;
}(ServiceState || {});
let _state = "New";
export const ConsoleLoader = ({ loadModule, modules = [], render, createRouter = createHashRouter, // createRootRoutes = _createRootRoutes,
children, future = {
    v7_startTransition: true
} }) => {
    const router = useStore(getRouteStore(), ({ router }) => router);
    useDebugRender(`ConsoleAppContent`);
    const log = useLogger("ConsoleContent");
    const [state, _setState] = useState("New");
    const setState = (s) => {
        // fixme avoid restrict mode rerender
        _state = s;
        _setState(s);
    };
    useAsyncEffect(async () => {
        if (_state !== "New") {
            log(`Skip reinit APP`);
            return;
        }
        log("Initializing");
        setState("Pending");
        const moduleService = getConsoleContext().getModuleService();
        moduleService.loader = loadModule;
        try {
            log(`Load modules: ${modules.join(", ")}`);
            await moduleService.loadModules(modules);
            if (isDev()) {
                console.log(`Loaded`, moduleService.modules);
            }
        }
        catch (e) {
            console.error("load module failed", e);
            setState("Error");
            return;
        }
        const routes = await moduleService.createRoutes();
        const router = createRouter(createRootRoutes({
            children: routes,
            render
        }));
        getRouteStore().setState({
            router,
            routes
        });
        setState("Done");
        log("Initialized");
        if (isDev()) {
            log(`Final Store`, moduleService.store.getState());
        }
    }, [
        state
    ]);
    if (!router) {
        log(`Router not ready: ${state}`);
        return /*#__PURE__*/ React.createElement(LoadingIndicator, null);
    }
    return /*#__PURE__*/ React.createElement(React.Fragment, null, children, /*#__PURE__*/ React.createElement(RouterProvider, {
        router: router,
        fallbackElement: /*#__PURE__*/ React.createElement(LoadingIndicator, null),
        future: future
    }));
};
function createRootRoutes({ children, render = (children) => children }) {
    return [
        {
            element: /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(RootRouterReactor, null), render(/*#__PURE__*/ React.createElement(ErrorSuspenseBoundary, null, /*#__PURE__*/ React.createElement(Outlet, null)))),
            errorElement: /*#__PURE__*/ React.createElement(PageErrorState, null),
            handle: {
                title: getSiteStore().getState().title
            },
            children: [
                ...children,
                {
                    path: "*",
                    element: /*#__PURE__*/ React.createElement(NotFoundPage, null)
                }
            ]
        }
    ];
}
//# sourceMappingURL=ConsoleLoader.js.map