@darajs/core 1.20.3 → 1.21.1

package/dist/run.d.ts

@@ -1,4 +1,8 @@
+import { QueryClient } from '@tanstack/react-query';
+import type { WebSocketClientInterface } from './api';
 import './index.css';
+import { type Deferred } from './shared';
+import type { DaraData } from './types';
 declare global {
     interface Window {
         dara: DaraGlobals;
@@ -6,7 +10,16 @@ declare global {
 }
 interface DaraGlobals {
     base_url: string;
+    ws: Deferred<WebSocketClientInterface>;
 }
+export declare function Root(props: {
+    daraData: DaraData;
+    queryClient: QueryClient;
+    importers: {
+        [k: string]: () => Promise<any>;
+    };
+    theme: any;
+}): JSX.Element;
 /**
  * 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
@@ -17,6 +30,6 @@ interface DaraGlobals {
  */
 declare function run(importers: {
     [k: string]: () => Promise<any>;
-}): void;
+}): Promise<void>;
 export default run;
 //# sourceMappingURL=run.d.ts.map

package/dist/run.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"run.d.ts","sourceRoot":"","sources":["../js/run.tsx"],"names":[],"mappings":"AAeA,OAAO,aAAa,CAAC;AAGrB,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,IAAI,EAAE,WAAW,CAAC;KACrB;CACJ;AAED,UAAU,WAAW;IACjB,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,iBAAS,GAAG,CAAC,SAAS,EAAE;IAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,CAAA;CAAE,GAAG,IAAI,CA2CjE;AAED,eAAe,GAAG,CAAC"}
+{"version":3,"file":"run.d.ts","sourceRoot":"","sources":["../js/run.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAuB,MAAM,uBAAuB,CAAC;AAUzE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,QAAQ,EAAsD,MAAM,UAAU,CAAC;AAI7F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,IAAI,EAAE,WAAW,CAAC;KACrB;CACJ;AAED,UAAU,WAAW;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,EAAE,EAAE,QAAQ,CAAC,wBAAwB,CAAC,CAAC;CAC1C;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE;IACxB,QAAQ,EAAE,QAAQ,CAAC;IACnB,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,CAAA;KAAE,CAAC;IAC/C,KAAK,EAAE,GAAG,CAAC;CACd,GAAG,GAAG,CAAC,OAAO,CAoBd;AAED;;;;;;;GAOG;AACH,iBAAe,GAAG,CAAC,SAAS,EAAE;IAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,CAAA;CAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAwBhF;AAED,eAAe,GAAG,CAAC"}

package/dist/run.js

@@ -1,18 +1,29 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { createBrowserHistory } from 'history';
+import NProgress from 'nprogress';
 import { createRoot } from 'react-dom/client';
-import { Router } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
-import { RecoilURLSync } from 'recoil-sync';
-import { ThemeProvider, theme } from '@darajs/styled-components';
+import { ThemeProvider } from '@darajs/styled-components';
 import { ErrorBoundary } from '@darajs/ui-components';
-import { NotificationWrapper } from '@darajs/ui-notifications';
-import { GlobalTaskProvider } from './shared/context';
-import { useUrlSync } from './shared/utils';
-import AuthWrapper from './auth/auth-wrapper';
+import { ConfigContextProvider, GlobalTaskProvider } from './shared/context';
 import './index.css';
-import { DirectionCtx, ImportersCtx, TemplateRoot } from './shared';
+import RouterRoot from './router/router-root';
+import { DirectionCtx, ImportersCtx, deferred, resolveTheme } 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(ThemeProvider, { theme: props.theme, children: _jsx(ErrorBoundary, { children: _jsx(ImportersCtx.Provider, { value: props.importers, 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
@@ -22,20 +33,26 @@ import { DirectionCtx, ImportersCtx, TemplateRoot } from './shared';
  * @param importers - the importers object.
  */
 function run(importers) {
-    const queryClient = new QueryClient();
-    let basename = '';
-    // The base_url is set in the html template by the backend when returning it
-    if (window.dara.base_url !== '') {
-        basename = new URL(window.dara.base_url, window.origin).pathname;
-    }
-    function Root() {
-        const history = createBrowserHistory({ basename });
-        const syncOptions = useUrlSync({ history });
-        return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemeProvider, { theme: theme, children: _jsx(ErrorBoundary, { children: _jsx(ImportersCtx.Provider, { value: importers, children: _jsx(DirectionCtx.Provider, { value: { direction: 'row' }, children: _jsx(Router, { history: history, children: _jsx(RecoilRoot, { children: _jsx(RecoilURLSync, Object.assign({}, syncOptions, { children: _jsx(GlobalTaskProvider, { children: _jsxs(AuthWrapper, { children: [_jsx(NotificationWrapper, {}), _jsx(TemplateRoot, {})] }) }) })) }) }) }) }) }) }) }));
-    }
-    const container = document.getElementById('dara_root');
-    const root = createRoot(container);
-    root.render(_jsx(Root, {}));
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        const queryClient = new QueryClient();
+        const daraData = JSON.parse(document.getElementById('__DARA_DATA__').textContent);
+        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 theme = resolveTheme((_a = daraData.theme) === null || _a === void 0 ? void 0 : _a.main, (_b = daraData.theme) === null || _b === void 0 ? void 0 : _b.base);
+        const container = document.getElementById('dara_root');
+        const root = createRoot(container);
+        root.render(_jsx(Root, { daraData: daraData, queryClient: queryClient, importers: importers, theme: theme }));
+    });
 }
 export default run;
 //# sourceMappingURL=run.js.map

package/dist/run.js.map

@@ -1 +1 @@
-{"version":3,"file":"run.js","sourceRoot":"","sources":["../js/run.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,OAAO,WAAW,MAAM,qBAAqB,CAAC;AAC9C,OAAO,aAAa,CAAC;AACrB,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAYpE;;;;;;;GAOG;AACH,SAAS,GAAG,CAAC,SAA8C;IACvD,MAAM,WAAW,GAAG,IAAI,WAAW,EAAE,CAAC;IAEtC,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,4EAA4E;IAC5E,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,KAAK,EAAE,EAAE,CAAC;QAC9B,QAAQ,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC;IACrE,CAAC;IAED,SAAS,IAAI;QACT,MAAM,OAAO,GAAG,oBAAoB,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;QACnD,MAAM,WAAW,GAAG,UAAU,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;QAE5C,OAAO,CACH,KAAC,mBAAmB,IAAC,MAAM,EAAE,WAAW,YACpC,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,YACvB,KAAC,aAAa,cACV,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,YACnC,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,YAC9C,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,YACpB,KAAC,UAAU,cACP,KAAC,aAAa,oBAAK,WAAW,cAC1B,KAAC,kBAAkB,cACf,MAAC,WAAW,eACR,KAAC,mBAAmB,KAAG,EACvB,KAAC,YAAY,KAAG,IACN,GACG,IACT,GACP,GACR,GACW,GACJ,GACZ,GACJ,GACE,CACzB,CAAC;IACN,CAAC;IAED,MAAM,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAE,CAAC;IACxD,MAAM,IAAI,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;IACnC,IAAI,CAAC,MAAM,CAAC,KAAC,IAAI,KAAG,CAAC,CAAC;AAC1B,CAAC;AAED,eAAe,GAAG,CAAC"}
+{"version":3,"file":"run.js","sourceRoot":"","sources":["../js/run.tsx"],"names":[],"mappings":"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"}

package/dist/shared/context/config-context.d.ts

@@ -0,0 +1,7 @@
+import type { Config } from '../../types';
+export declare function ConfigContextProvider(props: {
+    initialConfig: Config;
+    children: React.ReactNode;
+}): React.ReactNode;
+export declare function useConfig(): Config;
+//# sourceMappingURL=config-context.d.ts.map

package/dist/shared/context/config-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-context.d.ts","sourceRoot":"","sources":["../../../js/shared/context/config-context.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAQtC,wBAAgB,qBAAqB,CAAC,KAAK,EAAE;IAAE,aAAa,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,SAAS,CAGlH;AAED,wBAAgB,SAAS,IAAI,MAAM,CAQlC"}

package/dist/shared/context/config-context.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+const configContext = createContext(null);
+export function ConfigContextProvider(props) {
+    const contextValue = useMemo(() => ({ config: props.initialConfig }), [props.initialConfig]);
+    return _jsx(configContext.Provider, { value: contextValue, children: props.children });
+}
+export function useConfig() {
+    const context = useContext(configContext);
+    if (!context) {
+        throw new Error('useConfigContext must be used within a ConfigContextProvider');
+    }
+    return context.config;
+}
+//# sourceMappingURL=config-context.js.map

package/dist/shared/context/config-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-context.js","sourceRoot":"","sources":["../../../js/shared/context/config-context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAQ3D,MAAM,aAAa,GAAG,aAAa,CAAuB,IAAI,CAAC,CAAC;AAEhE,MAAM,UAAU,qBAAqB,CAAC,KAA2D;IAC7F,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,aAAa,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;IAC7F,OAAO,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAAG,KAAK,CAAC,QAAQ,GAA0B,CAAC;AAClG,CAAC;AAED,MAAM,UAAU,SAAS;IACrB,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAE1C,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,MAAM,IAAI,KAAK,CAAC,8DAA8D,CAAC,CAAC;IACpF,CAAC;IAED,OAAO,OAAO,CAAC,MAAM,CAAC;AAC1B,CAAC"}

package/dist/shared/context/global-task-context.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { type GlobalTaskContext } from '../../types/core';
 /**
  * Represents a task run
@@ -9,7 +10,7 @@ export interface VariableTaskEntry {
     triggerKey?: string;
 }
 interface GlobalTaskProviderProps {
-    children: JSX.Element;
+    children: React.ReactNode;
     tasks?: Set<string>;
     variableTaskMap?: Map<string, Array<VariableTaskEntry>>;
 }

package/dist/shared/context/global-task-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"global-task-context.d.ts","sourceRoot":"","sources":["../../../js/shared/context/global-task-context.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAMtD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAC9B,cAAc;IACd,MAAM,EAAE,MAAM,CAAC;IACf,gFAAgF;IAChF,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,UAAU,uBAAuB;IAC7B,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACpB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC;CAC3D;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CA4FrH;AAED,wBAAgB,cAAc,IAAI,iBAAiB,CAQlD"}
+{"version":3,"file":"global-task-context.d.ts","sourceRoot":"","sources":["../../../js/shared/context/global-task-context.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAMtD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAC9B,cAAc;IACd,MAAM,EAAE,MAAM,CAAC;IACf,gFAAgF;IAChF,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,UAAU,uBAAuB;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACpB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC;CAC3D;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CA4FrH;AAED,wBAAgB,cAAc,IAAI,iBAAiB,CAQlD"}

package/dist/shared/context/index.d.ts

@@ -3,8 +3,9 @@ export { default as ImportersCtx } from './importers-context';
 export { default as GlobalTaskProvider, useTaskContext } from './global-task-context';
 export { default as VariableCtx } from './variable-context';
 export { default as WebSocketCtx } from './websocket-context';
-export { default as RegistriesCtx } from './registries-context';
+export { RegistriesCtxProvider, useRegistriesCtx } from './registries-context';
 export { default as DisplayCtx } from './display-context';
 export { default as FallbackCtx } from './fallback-context';
 export { default as RequestExtrasCtx, useRequestExtras, RequestExtrasProvider, PartialRequestExtrasProvider, } from './request-extras-context';
+export { useConfig, ConfigContextProvider } from './config-context';
 //# sourceMappingURL=index.d.ts.map

package/dist/shared/context/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../js/shared/context/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EACH,OAAO,IAAI,gBAAgB,EAC3B,gBAAgB,EAChB,qBAAqB,EACrB,4BAA4B,GAC/B,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../js/shared/context/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EACH,OAAO,IAAI,gBAAgB,EAC3B,gBAAgB,EAChB,qBAAqB,EACrB,4BAA4B,GAC/B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/shared/context/index.js

@@ -3,8 +3,9 @@ export { default as ImportersCtx } from './importers-context';
 export { default as GlobalTaskProvider, useTaskContext } from './global-task-context';
 export { default as VariableCtx } from './variable-context';
 export { default as WebSocketCtx } from './websocket-context';
-export { default as RegistriesCtx } from './registries-context';
+export { RegistriesCtxProvider, useRegistriesCtx } from './registries-context';
 export { default as DisplayCtx } from './display-context';
 export { default as FallbackCtx } from './fallback-context';
 export { default as RequestExtrasCtx, useRequestExtras, RequestExtrasProvider, PartialRequestExtrasProvider, } from './request-extras-context';
+export { useConfig, ConfigContextProvider } from './config-context';
 //# sourceMappingURL=index.js.map

package/dist/shared/context/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../js/shared/context/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EACH,OAAO,IAAI,gBAAgB,EAC3B,gBAAgB,EAChB,qBAAqB,EACrB,4BAA4B,GAC/B,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../js/shared/context/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EACH,OAAO,IAAI,gBAAgB,EAC3B,gBAAgB,EAChB,qBAAqB,EACrB,4BAA4B,GAC/B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/shared/context/registries-context.d.ts

@@ -1,6 +1,4 @@
-import { type QueryObserverResult, type RefetchOptions } from '@tanstack/react-query';
-import { RequestError } from '@darajs/ui-utils';
-import { type ActionDef, type Component } from '../../types';
+import { type ActionDef, type Component, type ComponentInstance } from '../../types';
 type RegistriesCtx = {
     /**
      * Action registry
@@ -11,10 +9,15 @@ type RegistriesCtx = {
      */
     componentRegistry: Record<string, Component>;
     /**
-     * Callback to force a refetch of the components registry
+     * Callback to get a component from the components registry
      */
-    refetchComponents: (options?: RefetchOptions) => Promise<QueryObserverResult<Record<string, Component>, RequestError>>;
+    getComponent: (instance: ComponentInstance) => Promise<Component>;
 };
-declare const registriesCtx: import("react").Context<RegistriesCtx>;
-export default registriesCtx;
+export declare function RegistriesCtxProvider(props: {
+    componentRegistry: Record<string, Component>;
+    actionRegistry: Record<string, ActionDef>;
+    children: React.ReactNode;
+}): React.ReactNode;
+export declare function useRegistriesCtx(): RegistriesCtx;
+export {};
 //# sourceMappingURL=registries-context.d.ts.map

package/dist/shared/context/registries-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registries-context.d.ts","sourceRoot":"","sources":["../../../js/shared/context/registries-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,mBAAmB,EAAE,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGtF,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzD,KAAK,aAAa,GAAG;IACjB;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC1C;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC7C;;OAEG;IACH,iBAAiB,EAAE,CACf,OAAO,CAAC,EAAE,cAAc,KACvB,OAAO,CAAC,mBAAmB,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC;CAC9E,CAAC;AAEF,QAAA,MAAM,aAAa,wCAIjB,CAAC;AAEH,eAAe,aAAa,CAAC"}
+{"version":3,"file":"registries-context.d.ts","sourceRoot":"","sources":["../../../js/shared/context/registries-context.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAIjF,KAAK,aAAa,GAAG;IACjB;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC1C;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC7C;;OAEG;IACH,YAAY,EAAE,CAAC,QAAQ,EAAE,iBAAiB,KAAK,OAAO,CAAC,SAAS,CAAC,CAAC;CACrE,CAAC;AAIF,wBAAgB,qBAAqB,CAAC,KAAK,EAAE;IACzC,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC7C,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,GAAG,KAAK,CAAC,SAAS,CA0ClB;AAED,wBAAgB,gBAAgB,IAAI,aAAa,CAQhD"}

package/dist/shared/context/registries-context.js

@@ -1,11 +1,51 @@
-import {} from '@tanstack/react-query';
-import { createContext } from 'react';
-import { RequestError } from '@darajs/ui-utils';
+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 { useMutation } from '@tanstack/react-query';
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { HTTP_METHOD, validateResponse } from '@darajs/ui-utils';
+import { request } from '../../api/http';
+import { handleAuthErrors } from '../../auth/auth';
 import {} from '../../types';
-const registriesCtx = createContext({
-    actionRegistry: {},
-    componentRegistry: {},
-    refetchComponents: null,
-});
-export default registriesCtx;
+import { useRequestExtras } from './request-extras-context';
+const registriesCtx = createContext(null);
+export function RegistriesCtxProvider(props) {
+    const [actionRegistry] = useState(props.actionRegistry);
+    const [componentRegistry, setComponentRegistry] = useState(props.componentRegistry);
+    const extras = useRequestExtras();
+    const refetchComponentMutation = useMutation({
+        mutationKey: ['component-definition'],
+        mutationFn: (_a) => __awaiter(this, [_a], void 0, function* ({ name }) {
+            const response = yield request(`/api/core/components/${name}/definition`, { method: HTTP_METHOD.GET }, extras);
+            yield handleAuthErrors(response, true);
+            yield validateResponse(response, `Failed to fetch the component definition for ${name}, was it registered in the app?`);
+            return response.json();
+        }),
+        retry: 3,
+    });
+    const getComponent = useCallback((instance) => __awaiter(this, void 0, void 0, function* () {
+        if (componentRegistry[instance.name]) {
+            return componentRegistry[instance.name];
+        }
+        const component = yield refetchComponentMutation.mutateAsync({ name: instance.name });
+        setComponentRegistry((prev) => (Object.assign(Object.assign({}, prev), { [instance.name]: component })));
+        return component;
+    }), [componentRegistry, refetchComponentMutation]);
+    const contextValue = useMemo(() => ({ actionRegistry, componentRegistry, getComponent }), [actionRegistry, componentRegistry, getComponent]);
+    return _jsx(registriesCtx.Provider, { value: contextValue, children: props.children });
+}
+export function useRegistriesCtx() {
+    const context = useContext(registriesCtx);
+    if (!context) {
+        throw new Error('useRegistriesCtx must be used within a RegistriesCtxProvider');
+    }
+    return context;
+}
 //# sourceMappingURL=registries-context.js.map

package/dist/shared/context/registries-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"registries-context.js","sourceRoot":"","sources":["../../../js/shared/context/registries-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiD,MAAM,uBAAuB,CAAC;AACtF,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAkC,MAAM,SAAS,CAAC;AAmBzD,MAAM,aAAa,GAAG,aAAa,CAAgB;IAC/C,cAAc,EAAE,EAAE;IAClB,iBAAiB,EAAE,EAAE;IACrB,iBAAiB,EAAE,IAAW;CACjC,CAAC,CAAC;AAEH,eAAe,aAAa,CAAC"}
+{"version":3,"file":"registries-context.js","sourceRoot":"","sources":["../../../js/shared/context/registries-context.tsx"],"names":[],"mappings":";;;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEjE,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAA0D,MAAM,SAAS,CAAC;AAEjF,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAiB5D,MAAM,aAAa,GAAG,aAAa,CAAuB,IAAI,CAAC,CAAC;AAEhE,MAAM,UAAU,qBAAqB,CAAC,KAIrC;IACG,MAAM,CAAC,cAAc,CAAC,GAAG,QAAQ,CAA4B,KAAK,CAAC,cAAc,CAAC,CAAC;IACnF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAA4B,KAAK,CAAC,iBAAiB,CAAC,CAAC;IAC/G,MAAM,MAAM,GAAG,gBAAgB,EAAE,CAAC;IAElC,MAAM,wBAAwB,GAAG,WAAW,CAAqC;QAC7E,WAAW,EAAE,CAAC,sBAAsB,CAAC;QACrC,UAAU,EAAE,KAAiB,EAAE,0CAAZ,EAAE,IAAI,EAAE;YACvB,MAAM,QAAQ,GAAG,MAAM,OAAO,CAC1B,wBAAwB,IAAI,aAAa,EACzC,EAAE,MAAM,EAAE,WAAW,CAAC,GAAG,EAAE,EAC3B,MAAM,CACT,CAAC;YACF,MAAM,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;YACvC,MAAM,gBAAgB,CAClB,QAAQ,EACR,gDAAgD,IAAI,iCAAiC,CACxF,CAAC;YACF,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAC;QAC3B,CAAC,CAAA;QACD,KAAK,EAAE,CAAC;KACX,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,WAAW,CAC5B,CAAO,QAA2B,EAAsB,EAAE;QACtD,IAAI,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;YACnC,OAAO,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAE,CAAC;QAC7C,CAAC;QAED,MAAM,SAAS,GAAG,MAAM,wBAAwB,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;QACtF,oBAAoB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iCAAM,IAAI,KAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,IAAG,CAAC,CAAC;QAC1E,OAAO,SAAS,CAAC;IACrB,CAAC,CAAA,EACD,CAAC,iBAAiB,EAAE,wBAAwB,CAAC,CAChD,CAAC;IAEF,MAAM,YAAY,GAAG,OAAO,CACxB,GAAG,EAAE,CAAC,CAAC,EAAE,cAAc,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAC,EAC3D,CAAC,cAAc,EAAE,iBAAiB,EAAE,YAAY,CAAC,CACpD,CAAC;IAEF,OAAO,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAAG,KAAK,CAAC,QAAQ,GAA0B,CAAC;AAClG,CAAC;AAED,MAAM,UAAU,gBAAgB;IAC5B,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAE1C,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,MAAM,IAAI,KAAK,CAAC,8DAA8D,CAAC,CAAC;IACpF,CAAC;IAED,OAAO,OAAO,CAAC;AACnB,CAAC"}

package/dist/shared/dynamic-component/dynamic-auth-component.d.ts

@@ -0,0 +1,12 @@
+import type { AuthComponent, ModuleContent } from '../../types/core';
+export declare function preloadAuthComponent(importers: Record<string, () => Promise<ModuleContent>>, component: AuthComponent): Promise<void>;
+/**
+ * Simplified version of DynamicComponent, just for the auth components.
+ * This is because we can't use the component registry for auth components, since the component registry operates
+ * in an authenticated context, and we need to be able to render the login page without being authenticated.
+ */
+declare function DynamicAuthComponent(props: {
+    component: AuthComponent;
+}): React.ReactNode;
+export default DynamicAuthComponent;
+//# sourceMappingURL=dynamic-auth-component.d.ts.map

package/dist/shared/dynamic-component/dynamic-auth-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-auth-component.d.ts","sourceRoot":"","sources":["../../../js/shared/dynamic-component/dynamic-auth-component.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAQjE,wBAAsB,oBAAoB,CACtC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,CAAC,aAAa,CAAC,CAAC,EACvD,SAAS,EAAE,aAAa,GACzB,OAAO,CAAC,IAAI,CAAC,CAyBf;AAED;;;;GAIG;AACH,iBAAS,oBAAoB,CAAC,KAAK,EAAE;IAAE,SAAS,EAAE,aAAa,CAAA;CAAE,GAAG,KAAK,CAAC,SAAS,CAOlF;AAED,eAAe,oBAAoB,CAAC"}

package/dist/shared/dynamic-component/dynamic-auth-component.js

@@ -0,0 +1,53 @@
+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 {} from 'react';
+const PRELOADED_COMPONENTS = {};
+function getIdentifier(component) {
+    return `${component.py_module}.${component.js_name}`;
+}
+export function preloadAuthComponent(importers, component) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const importer = importers[component.py_module];
+        if (!importer) {
+            throw new Error(`Missing importer for module ${component.py_module}`);
+        }
+        let moduleContent = null;
+        try {
+            moduleContent = yield importer();
+        }
+        catch (err) {
+            throw new Error(`Failed to import module ${component.py_module}`, err);
+        }
+        if (!moduleContent) {
+            throw new Error(`Failed to import module ${component.py_module}`);
+        }
+        const Component = moduleContent[component.js_name];
+        if (!Component) {
+            throw new Error(`Failed to import component ${component.js_name} from module ${component.py_module}`);
+        }
+        PRELOADED_COMPONENTS[getIdentifier(component)] = _jsx(Component, {});
+    });
+}
+/**
+ * Simplified version of DynamicComponent, just for the auth components.
+ * This is because we can't use the component registry for auth components, since the component registry operates
+ * in an authenticated context, and we need to be able to render the login page without being authenticated.
+ */
+function DynamicAuthComponent(props) {
+    const identifier = getIdentifier(props.component);
+    // should not happen
+    if (!(identifier in PRELOADED_COMPONENTS)) {
+        throw new Error(`Component ${identifier} not found`);
+    }
+    return PRELOADED_COMPONENTS[identifier];
+}
+export default DynamicAuthComponent;
+//# sourceMappingURL=dynamic-auth-component.js.map

package/dist/shared/dynamic-component/dynamic-auth-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-auth-component.js","sourceRoot":"","sources":["../../../js/shared/dynamic-component/dynamic-auth-component.tsx"],"names":[],"mappings":";;;;;;;;;;AAAA,OAAO,EAAsC,MAAM,OAAO,CAAC;AAI3D,MAAM,oBAAoB,GAA8B,EAAE,CAAC;AAE3D,SAAS,aAAa,CAAC,SAAwB;IAC3C,OAAO,GAAG,SAAS,CAAC,SAAS,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;AACzD,CAAC;AAED,MAAM,UAAgB,oBAAoB,CACtC,SAAuD,EACvD,SAAwB;;QAExB,MAAM,QAAQ,GAAG,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QAEhD,IAAI,CAAC,QAAQ,EAAE,CAAC;YACZ,MAAM,IAAI,KAAK,CAAC,+BAA+B,SAAS,CAAC,SAAS,EAAE,CAAC,CAAC;QAC1E,CAAC;QAED,IAAI,aAAa,GAAQ,IAAI,CAAC;QAE9B,IAAI,CAAC;YACD,aAAa,GAAG,MAAM,QAAQ,EAAE,CAAC;QACrC,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACX,MAAM,IAAI,KAAK,CAAC,2BAA2B,SAAS,CAAC,SAAS,EAAE,EAAE,GAAY,CAAC,CAAC;QACpF,CAAC;QACD,IAAI,CAAC,aAAa,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,2BAA2B,SAAS,CAAC,SAAS,EAAE,CAAC,CAAC;QACtE,CAAC;QAED,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAC,OAAO,CAA8B,CAAC;QAEhF,IAAI,CAAC,SAAS,EAAE,CAAC;YACb,MAAM,IAAI,KAAK,CAAC,8BAA8B,SAAS,CAAC,OAAO,gBAAgB,SAAS,CAAC,SAAS,EAAE,CAAC,CAAC;QAC1G,CAAC;QAED,oBAAoB,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,GAAG,KAAC,SAAS,KAAG,CAAC;IACnE,CAAC;CAAA;AAED;;;;GAIG;AACH,SAAS,oBAAoB,CAAC,KAAmC;IAC7D,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAClD,oBAAoB;IACpB,IAAI,CAAC,CAAC,UAAU,IAAI,oBAAoB,CAAC,EAAE,CAAC;QACxC,MAAM,IAAI,KAAK,CAAC,aAAa,UAAU,YAAY,CAAC,CAAC;IACzD,CAAC;IACD,OAAO,oBAAoB,CAAC,UAAU,CAAE,CAAC;AAC7C,CAAC;AAED,eAAe,oBAAoB,CAAC"}

package/dist/shared/dynamic-component/dynamic-component.d.ts

@@ -1,9 +1,18 @@
-import { type ComponentInstance } from '../../types';
+import { type Component, type ComponentInstance } from '../../types';
+import { type ModuleContent } from '../../types/core';
 /**
  * Clear the caches for testing.
  * In prod we don't want to clear ever
  */
 export declare function clearCaches_TEST(): void;
+/**
+ * Pre-warm the caches for the given components.
+ * This is useful to pre-warm the core components on startup to avoid spinners
+ *
+ * @param importers - the importers object.
+ * @param components - the components to pre-warm
+ */
+export declare function preloadComponents(importers: Record<string, () => Promise<ModuleContent>>, components: Component[]): Promise<void>;
 interface DynamicComponentProps {
     /** The component instance to inject */
     component: ComponentInstance | null | undefined;

package/dist/shared/dynamic-component/dynamic-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-component.d.ts","sourceRoot":"","sources":["../../../js/shared/dynamic-component/dynamic-component.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAkB,KAAK,iBAAiB,EAA2C,MAAM,SAAS,CAAC;AA8D1G;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,IAAI,CAGvC;AAuID,UAAU,qBAAqB;IAC3B,uCAAuC;IACvC,SAAS,EAAE,iBAAiB,GAAG,IAAI,GAAG,SAAS,CAAC;CACnD;AA8BD;;;;;;;GAOG;AACH,iBAAS,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,KAAK,CAAC,SAAS,CAwIvE;;AAkED,wBAAsC"}
+{"version":3,"file":"dynamic-component.d.ts","sourceRoot":"","sources":["../../../js/shared/dynamic-component/dynamic-component.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,iBAAiB,EAA2C,MAAM,SAAS,CAAC;AAC1G,OAAO,EAAoB,KAAK,aAAa,EAA8C,MAAM,cAAc,CAAC;AA6DhH;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,IAAI,CAGvC;AAED;;;;;;GAMG;AACH,wBAAsB,iBAAiB,CACnC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,CAAC,aAAa,CAAC,CAAC,EACvD,UAAU,EAAE,SAAS,EAAE,GACxB,OAAO,CAAC,IAAI,CAAC,CA6Cf;AA4ID,UAAU,qBAAqB;IAC3B,uCAAuC;IACvC,SAAS,EAAE,iBAAiB,GAAG,IAAI,GAAG,SAAS,CAAC;CACnD;AA8BD;;;;;;;GAOG;AACH,iBAAS,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,KAAK,CAAC,SAAS,CA0IvE;;AAkED,wBAAsC"}

package/dist/shared/dynamic-component/dynamic-component.js

@@ -8,16 +8,19 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import groupBy from 'lodash/groupBy';
+import partition from 'lodash/partition';
 import { Suspense, memo, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
+import { useLatestRef } from '@darajs/ui-utils';
 import DefaultFallback from '../../components/fallback/default';
 import { hasMarkers } from '../../components/for/templating';
-import ProgressTracker from '../../components/progress-tracker/progress-tracker';
-import { FallbackCtx, ImportersCtx, VariableCtx, useTaskContext } from '../../shared/context';
+import ProgressTracker from '../../components/progress-tracker';
+import { FallbackCtx, ImportersCtx, VariableCtx, useRegistriesCtx, useTaskContext } from '../../shared/context';
 import { ErrorDisplay, isSelectorError } from '../../shared/error-handling';
 import { useRefreshSelector } from '../../shared/interactivity';
 import useServerComponent, { useRefreshServerComponent } from '../../shared/interactivity/use-server-component';
-import { isJsComponent, useComponentRegistry, useInterval } from '../../shared/utils';
+import { isJsComponent, useInterval } from '../../shared/utils';
 import { isDerivedVariable } from '../../types';
 import { UserError, isInvalidComponent, isRawString } from '../../types/core';
 import { cleanProps } from './clean-props';
@@ -76,6 +79,56 @@ export function clearCaches_TEST() {
     MODULE_CACHE.clear();
     COMPONENT_METADATA_CACHE.clear();
 }
+/**
+ * Pre-warm the caches for the given components.
+ * This is useful to pre-warm the core components on startup to avoid spinners
+ *
+ * @param importers - the importers object.
+ * @param components - the components to pre-warm
+ */
+export function preloadComponents(importers, components) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const [jsComponents, pyComponents] = partition(components, isJsComponent);
+        // for py-components we just add a metadata cache entry
+        for (const component of pyComponents) {
+            if (COMPONENT_METADATA_CACHE.has(component.name)) {
+                continue;
+            }
+            COMPONENT_METADATA_CACHE.set(component.name, component);
+        }
+        const componentsByModule = groupBy(jsComponents, (component) => component.py_module);
+        // for js-components we load the module and pre-load the components
+        for (const [pyModule, componentsInModule] of Object.entries(componentsByModule)) {
+            if (MODULE_CACHE.has(pyModule)) {
+                continue;
+            }
+            // Load module
+            const importer = importers[pyModule];
+            if (!importer) {
+                throw new Error(`Missing importer for module ${pyModule}`);
+            }
+            let moduleContent = null;
+            try {
+                // there will be at most a couple of modules, fine to do serially
+                // eslint-disable-next-line no-await-in-loop
+                moduleContent = yield importer();
+                if (moduleContent) {
+                    MODULE_CACHE.set(pyModule, moduleContent);
+                }
+            }
+            catch (e) {
+                throw new Error(`Failed to load module ${pyModule}: ${String(e)}`);
+            }
+            // pre-load components
+            for (const component of componentsInModule) {
+                if (COMPONENT_METADATA_CACHE.has(component.name)) {
+                    continue;
+                }
+                COMPONENT_METADATA_CACHE.set(component.name, component);
+            }
+        }
+    });
+}
 /**
  * Try resolving component synchronously from cache
  */
@@ -129,7 +182,13 @@ function resolveComponentAsync(component, getComponent, importers) {
             return;
         }
         // Get component entry from registry
-        const entry = yield getComponent(component);
+        let entry;
+        try {
+            entry = yield getComponent(component);
+        }
+        catch (e) {
+            throw new ComponentLoadError(e instanceof Error ? e.message : String(e), 'Failed to load component');
+        }
         if (!isJsComponent(entry)) {
             // Python component, just cache metadata and nothing else to do here
             COMPONENT_METADATA_CACHE.set(component.name, entry);
@@ -203,7 +262,7 @@ function DynamicComponent(props) {
     var _a, _b, _c, _d, _e, _f;
     const importers = useContext(ImportersCtx);
     const fallbackCtx = useContext(FallbackCtx);
-    const { get: getComponent } = useComponentRegistry();
+    const { getComponent } = useRegistriesCtx();
     // Try sync resolution first
     const [component, setComponent] = useState(() => resolveComponentSync(props.component));
     const [isLoading, setIsLoading] = useState(() => component === null);
@@ -242,13 +301,14 @@ function DynamicComponent(props) {
             setLoadingStarted(false);
         }
     }, [props.component]);
+    const getComponentStable = useLatestRef(getComponent);
     // Async loading effect
     useEffect(() => {
         if (!isLoading || loadingStarted) {
             return;
         }
         setLoadingStarted(true);
-        resolveComponentAsync(props.component, getComponent, importers)
+        resolveComponentAsync(props.component, getComponentStable.current, importers)
             .then(() => {
             // Try sync resolution again after async loading
             const resolvedComponent = resolveComponentSync(props.component);
@@ -263,7 +323,7 @@ function DynamicComponent(props) {
                 setComponent(_jsx(ErrorDisplay, { config: { title: error.title, description: error.message } }));
             }
         });
-    }, [props.component, getComponent, importers, isLoading, loadingStarted]);
+    }, [props.component, getComponentStable, importers, isLoading, loadingStarted]);
     const refreshSelector = useRefreshSelector();
     function onResetErrorBoundary(error) {
         if (isSelectorError(error)) {