var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import { jsx as _jsx } from "react/jsx-runtime";
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import NProgress from 'nprogress';
import { createRoot } from 'react-dom/client';
import { RecoilRoot } from 'recoil';
import { ErrorBoundary } from '@darajs/ui-components';
import { ConfigContextProvider, GlobalTaskProvider } from './shared/context';
import './index.css';
import RouterRoot from './router/router-root';
import { DirectionCtx, deferred } from './shared';
import { preloadAuthComponent } from './shared/dynamic-component/dynamic-auth-component';
import { preloadComponents } from './shared/dynamic-component/dynamic-component';
import { preloadActions } from './shared/interactivity/use-action';
export function Root(props) {
    return (_jsx(ConfigContextProvider, { initialConfig: props.daraData, children: _jsx(QueryClientProvider, { client: props.queryClient, children: _jsx(ErrorBoundary, { children: _jsx(DirectionCtx.Provider, { value: { direction: 'row' }, children: _jsx(RecoilRoot, { children: _jsx(GlobalTaskProvider, { children: _jsx(RouterRoot, { daraData: props.daraData }) }) }) }) }) }) }));
}
/**
 * The main run function for the JS half of the application creates a div and binds the react app onto the tree. It sets
 * up a lot of context providers for the rest of the application. It accepts an object of importers as an argument. An
 * importer is a function that calls a dynamic import statement and allows arbitrary JS code to be loaded into the core
 * application code (DynamicComponent). This object needs to be defined in the client application.
 *
 * @param importers - the importers object.
 */
function run(importers) {
    return __awaiter(this, void 0, void 0, function* () {
        var _a;
        const queryClient = new QueryClient();
        const daraData = JSON.parse((_a = document.getElementById('__DARA_DATA__').textContent) !== null && _a !== void 0 ? _a : '{}');
        document.title = daraData.title;
        NProgress.configure({ showSpinner: false });
        // ensure we have a deferred WS client
        window.dara.ws = deferred();
        yield Promise.all([
            // preload auth components to prevent flashing of extra spinners
            ...Object.values(daraData.auth_components).map((component) => preloadAuthComponent(importers, component)),
            // preload components and actions for the entire loaded registry
            preloadComponents(importers, Object.values(daraData.components)),
            preloadActions(importers, Object.values(daraData.actions)),
        ]);
        const container = document.getElementById('dara_root');
        const root = createRoot(container);
        root.render(_jsx(Root, { daraData: daraData, queryClient: queryClient }));
    });
}
export default run;
//# sourceMappingURL=run.js.map