@vendure/dashboard 3.2.0

package/dist/plugin/vite-plugin-config.js

@@ -0,0 +1,38 @@
+import path from 'path';
+export function viteConfigPlugin({ packageRoot }) {
+    return {
+        name: 'vendure:vite-config-plugin',
+        config: (config) => {
+            var _a, _b;
+            config.root = packageRoot;
+            config.resolve = {
+                alias: {
+                    '@': path.resolve(packageRoot, './src/lib'),
+                },
+            };
+            // This is required to prevent Vite from pre-bundling the
+            // dashboard source when it resides in node_modules.
+            config.optimizeDeps = Object.assign(Object.assign({}, config.optimizeDeps), { exclude: [
+                    ...(((_a = config.optimizeDeps) === null || _a === void 0 ? void 0 : _a.exclude) || []),
+                    '@vendure/dashboard',
+                    '@/providers',
+                    '@/framework',
+                    '@/lib',
+                    '@/components',
+                    '@/hooks',
+                    'virtual:vendure-ui-config',
+                    'virtual:admin-api-schema',
+                    'virtual:dashboard-extensions',
+                ], 
+                // We however do want to pre-bundle recharts, as it depends
+                // on lodash which is a CJS packages and _does_ require
+                // pre-bundling.
+                include: [
+                    ...(((_b = config.optimizeDeps) === null || _b === void 0 ? void 0 : _b.include) || []),
+                    '@/components > recharts',
+                    '@/components > react-dropzone',
+                ] });
+            return config;
+        },
+    };
+}

package/dist/plugin/vite-plugin-dashboard-metadata.d.ts

@@ -0,0 +1,9 @@
+import { Plugin } from 'vite';
+/**
+ * This Vite plugin scans the configured plugins for any dashboard extensions and dynamically
+ * generates an import statement for each one, wrapped up in a `runDashboardExtensions()`
+ * function which can then be imported and executed in the Dashboard app.
+ */
+export declare function dashboardMetadataPlugin(options: {
+    rootDir: string;
+}): Plugin;

package/dist/plugin/vite-plugin-dashboard-metadata.js

@@ -0,0 +1,52 @@
+import { getPluginDashboardExtensions } from '@vendure/core';
+import path from 'path';
+import { getConfigLoaderApi } from './vite-plugin-config-loader.js';
+const virtualModuleId = 'virtual:dashboard-extensions';
+const resolvedVirtualModuleId = `\0${virtualModuleId}`;
+/**
+ * This Vite plugin scans the configured plugins for any dashboard extensions and dynamically
+ * generates an import statement for each one, wrapped up in a `runDashboardExtensions()`
+ * function which can then be imported and executed in the Dashboard app.
+ */
+export function dashboardMetadataPlugin(options) {
+    let configLoaderApi;
+    let vendureConfig;
+    return {
+        name: 'vendure:dashboard-extensions-metadata',
+        configResolved({ plugins }) {
+            configLoaderApi = getConfigLoaderApi(plugins);
+        },
+        resolveId(id) {
+            if (id === virtualModuleId) {
+                return resolvedVirtualModuleId;
+            }
+        },
+        async load(id) {
+            var _a;
+            if (id === resolvedVirtualModuleId) {
+                if (!vendureConfig) {
+                    vendureConfig = await configLoaderApi.getVendureConfig();
+                }
+                const extensions = getPluginDashboardExtensions((_a = vendureConfig.plugins) !== null && _a !== void 0 ? _a : []);
+                const extensionData = extensions.map(extension => {
+                    const providedPath = typeof extension === 'string' ? extension : extension.location;
+                    const jsPath = normalizeImportPath(options.rootDir, providedPath);
+                    return { importPath: `./${jsPath}` };
+                });
+                this.info(`Found ${extensionData.length} Dashboard extensions`);
+                return `
+                    export async function runDashboardExtensions() {
+                        ${extensionData.map(extension => `await import('${extension.importPath}');`).join('\n')}
+                    }
+                `;
+            }
+        },
+    };
+}
+/**
+ * Converts an import path to a normalized path relative to the rootDir.
+ */
+function normalizeImportPath(rootDir, importPath) {
+    const relativePath = path.relative(rootDir, importPath).replace(/\\/g, '/');
+    return relativePath.replace(/\.tsx?$/, '.js');
+}

package/dist/plugin/vite-plugin-gql-tada.d.ts

@@ -0,0 +1,6 @@
+import { Plugin } from 'vite';
+export declare function gqlTadaPlugin(options: {
+    gqlTadaOutputPath: string;
+    tempDir: string;
+    packageRoot: string;
+}): Plugin;

package/dist/plugin/vite-plugin-gql-tada.js

@@ -0,0 +1,51 @@
+import { generateOutput } from '@gql.tada/cli-utils';
+import * as fs from 'fs/promises';
+import { printSchema } from 'graphql';
+import * as path from 'path';
+import { generateSchema } from './schema-generator.js';
+import { getConfigLoaderApi } from './vite-plugin-config-loader.js';
+export function gqlTadaPlugin(options) {
+    let configLoaderApi;
+    return {
+        name: 'vendure:gql-tada',
+        configResolved({ plugins }) {
+            configLoaderApi = getConfigLoaderApi(plugins);
+        },
+        async buildStart() {
+            const vendureConfig = await configLoaderApi.getVendureConfig();
+            const safeSchema = await generateSchema({ vendureConfig });
+            const tsConfigContent = {
+                compilerOptions: {
+                    plugins: [
+                        {
+                            name: 'gql.tada/ts-plugin',
+                            schema: './schema.graphql',
+                        },
+                    ],
+                },
+            };
+            const tsConfigPath = path.join(options.tempDir, 'tsconfig.json');
+            await fs.writeFile(tsConfigPath, JSON.stringify(tsConfigContent, null, 2));
+            const schemaPath = path.join(options.tempDir, 'schema.graphql');
+            await fs.writeFile(schemaPath, printSchema(safeSchema));
+            await generateOutput({
+                output: path.join(options.gqlTadaOutputPath, 'graphql-env.d.ts'),
+                tsconfig: tsConfigPath,
+            });
+            // Copy the graphql.ts file to the output path
+            const graphqlTsPath = path.join(options.packageRoot, 'src/lib/graphql/graphql.ts');
+            try {
+                await fs.copyFile(graphqlTsPath, path.join(options.gqlTadaOutputPath, 'graphql.ts'));
+            }
+            catch (error) {
+                if (error instanceof Error) {
+                    this.error(error.message);
+                }
+                else {
+                    this.error('Failed to copy graphql.ts file');
+                }
+            }
+            this.info('graphql introspection files output to ' + options.gqlTadaOutputPath);
+        },
+    };
+}

package/dist/plugin/vite-plugin-set-root.d.ts

@@ -0,0 +1,4 @@
+import { Plugin } from 'vite';
+export declare function setRootPlugin({ packageRoot }: {
+    packageRoot: string;
+}): Plugin;

package/dist/plugin/vite-plugin-set-root.js

@@ -0,0 +1,15 @@
+import path from 'path';
+export function setRootPlugin({ packageRoot }) {
+    return {
+        name: 'vendure:set-root-plugin',
+        config: (config) => {
+            config.root = packageRoot;
+            config.resolve = {
+                alias: {
+                    '@': path.resolve(packageRoot, './src/lib'),
+                },
+            };
+            return config;
+        },
+    };
+}

package/dist/plugin/vite-plugin-ui-config.d.ts

@@ -0,0 +1,15 @@
+import { AdminUiConfig } from '@vendure/core';
+import { Plugin } from 'vite';
+export type UiConfigPluginOptions = {
+    /**
+     * @description
+     * The admin UI config to be passed to the Vendure Dashboard.
+     */
+    adminUiConfig?: Partial<AdminUiConfig>;
+};
+/**
+ * This Vite plugin scans the configured plugins for any dashboard extensions and dynamically
+ * generates an import statement for each one, wrapped up in a `runDashboardExtensions()`
+ * function which can then be imported and executed in the Dashboard app.
+ */
+export declare function uiConfigPlugin({ adminUiConfig }: UiConfigPluginOptions): Plugin;

package/dist/plugin/vite-plugin-ui-config.js

@@ -0,0 +1,43 @@
+import path from 'path';
+import { getAdminUiConfig } from './ui-config.js';
+import { getConfigLoaderApi } from './vite-plugin-config-loader.js';
+const virtualModuleId = 'virtual:vendure-ui-config';
+const resolvedVirtualModuleId = `\0${virtualModuleId}`;
+/**
+ * This Vite plugin scans the configured plugins for any dashboard extensions and dynamically
+ * generates an import statement for each one, wrapped up in a `runDashboardExtensions()`
+ * function which can then be imported and executed in the Dashboard app.
+ */
+export function uiConfigPlugin({ adminUiConfig }) {
+    let configLoaderApi;
+    let vendureConfig;
+    return {
+        name: 'vendure:dashboard-ui-config',
+        configResolved({ plugins }) {
+            configLoaderApi = getConfigLoaderApi(plugins);
+        },
+        resolveId(id) {
+            if (id === virtualModuleId) {
+                return resolvedVirtualModuleId;
+            }
+        },
+        async load(id) {
+            if (id === resolvedVirtualModuleId) {
+                if (!vendureConfig) {
+                    vendureConfig = await configLoaderApi.getVendureConfig();
+                }
+                const config = getAdminUiConfig(vendureConfig, adminUiConfig);
+                return `
+                    export const uiConfig = ${JSON.stringify(config)}
+                `;
+            }
+        },
+    };
+}
+/**
+ * Converts an import path to a normalized path relative to the rootDir.
+ */
+function normalizeImportPath(rootDir, importPath) {
+    const relativePath = path.relative(rootDir, importPath).replace(/\\/g, '/');
+    return relativePath.replace(/\.tsx?$/, '.js');
+}

package/dist/plugin/vite-plugin-vendure-dashboard.d.ts

@@ -0,0 +1,35 @@
+import { PluginOption } from 'vite';
+import { UiConfigPluginOptions } from './vite-plugin-ui-config.js';
+/**
+ * @description
+ * Options for the {@link vendureDashboardPlugin} Vite plugin.
+ */
+export type VitePluginVendureDashboardOptions = {
+    /**
+     * @description
+     * The path to the Vendure server configuration file.
+     */
+    vendureConfigPath: string | URL;
+    /**
+     * @description
+     * The name of the exported variable from the Vendure server configuration file.
+     * This is only required if the plugin is unable to auto-detect the name of the exported variable.
+     */
+    vendureConfigExport?: string;
+    /**
+     * @description
+     * The path to the directory where the generated GraphQL Tada files will be output.
+     */
+    gqlTadaOutputPath?: string;
+    tempCompilationDir?: string;
+    disableTansStackRouterPlugin?: boolean;
+} & UiConfigPluginOptions;
+/**
+ * @description
+ * This is a Vite plugin which configures a set of plugins required to build the Vendure Dashboard.
+ */
+export declare function vendureDashboardPlugin(options: VitePluginVendureDashboardOptions): PluginOption[];
+/**
+ * Get the normalized path to the Vendure config file given either a string or URL.
+ */
+export declare function getNormalizedVendureConfigPath(vendureConfigPath: string | URL): string;

package/dist/plugin/vite-plugin-vendure-dashboard.js

@@ -0,0 +1,81 @@
+import tailwindcss from '@tailwindcss/vite';
+import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import { adminApiSchemaPlugin } from './vite-plugin-admin-api-schema.js';
+import { configLoaderPlugin } from './vite-plugin-config-loader.js';
+import { viteConfigPlugin } from './vite-plugin-config.js';
+import { dashboardMetadataPlugin } from './vite-plugin-dashboard-metadata.js';
+import { gqlTadaPlugin } from './vite-plugin-gql-tada.js';
+import { uiConfigPlugin } from './vite-plugin-ui-config.js';
+/**
+ * @description
+ * This is a Vite plugin which configures a set of plugins required to build the Vendure Dashboard.
+ */
+export function vendureDashboardPlugin(options) {
+    var _a;
+    const tempDir = (_a = options.tempCompilationDir) !== null && _a !== void 0 ? _a : path.join(import.meta.dirname, './.vendure-dashboard-temp');
+    const normalizedVendureConfigPath = getNormalizedVendureConfigPath(options.vendureConfigPath);
+    const packageRoot = getDashboardPackageRoot();
+    const linguiConfigPath = path.join(packageRoot, 'lingui.config.js');
+    if (process.env.IS_LOCAL_DEV !== 'true') {
+        process.env.LINGUI_CONFIG = linguiConfigPath;
+    }
+    return [
+        // TODO: solve https://github.com/kentcdodds/babel-plugin-macros/issues/87
+        // lingui(),
+        ...(options.disableTansStackRouterPlugin
+            ? []
+            : [
+                TanStackRouterVite({
+                    autoCodeSplitting: true,
+                    routeFileIgnorePattern: '.graphql.ts|components',
+                    routesDirectory: path.join(packageRoot, 'src/app/routes'),
+                    generatedRouteTree: path.join(packageRoot, 'src/app/routeTree.gen.ts'),
+                }),
+            ]),
+        react({
+        // babel: {
+        //     plugins: ['@lingui/babel-plugin-lingui-macro'],
+        // },
+        }),
+        tailwindcss(),
+        configLoaderPlugin({ vendureConfigPath: normalizedVendureConfigPath, tempDir }),
+        viteConfigPlugin({ packageRoot }),
+        adminApiSchemaPlugin(),
+        dashboardMetadataPlugin({ rootDir: tempDir }),
+        uiConfigPlugin({ adminUiConfig: options.adminUiConfig }),
+        ...(options.gqlTadaOutputPath
+            ? [gqlTadaPlugin({ gqlTadaOutputPath: options.gqlTadaOutputPath, tempDir, packageRoot })]
+            : []),
+    ];
+}
+/**
+ * @description
+ * Returns the path to the root of the `@vendure/dashboard` package.
+ */
+function getDashboardPackageRoot() {
+    const fileUrl = import.meta.resolve('@vendure/dashboard');
+    const packagePath = fileUrl.startsWith('file:') ? new URL(fileUrl).pathname : fileUrl;
+    return fixWindowsPath(path.join(packagePath, '../../../'));
+}
+/**
+ * Get the normalized path to the Vendure config file given either a string or URL.
+ */
+export function getNormalizedVendureConfigPath(vendureConfigPath) {
+    const stringPath = typeof vendureConfigPath === 'string' ? vendureConfigPath : vendureConfigPath.href;
+    if (stringPath.startsWith('file:')) {
+        return fixWindowsPath(new URL(stringPath).pathname);
+    }
+    return fixWindowsPath(stringPath);
+}
+function fixWindowsPath(filePath) {
+    // Fix Windows paths that might start with a leading slash
+    if (process.platform === 'win32') {
+        // Remove leading slash before drive letter on Windows
+        if (/^[/\\][A-Za-z]:/.test(filePath)) {
+            return filePath.substring(1);
+        }
+    }
+    return filePath;
+}

package/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="Vendure Admin Dashboard" />
+        <meta name="author" content="Vendure" />
+        <title>Vendure Admin Dashboard</title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/app/main.jsx"></script>
+    </body>
+</html>

package/lingui.config.js

@@ -0,0 +1,12 @@
+import { defineConfig } from '@lingui/cli';
+
+export default defineConfig({
+    sourceLocale: 'en',
+    locales: ['de', 'en'],
+    catalogs: [
+        {
+            path: '<rootDir>/src/i18n/locales/{locale}',
+            include: ['<rootDir>'],
+        },
+    ],
+});

package/package.json

@@ -0,0 +1,118 @@
+{
+    "name": "@vendure/dashboard",
+    "private": false,
+    "version": "3.2.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build:lib": "vite build --config vite.config.lib.mts",
+        "build:plugin": "tsc --project tsconfig.plugin.json",
+        "watch:plugin": "tsc --project tsconfig.plugin.json --watch",
+        "test": "vitest run",
+        "lint": "eslint .",
+        "preview": "vite preview",
+        "generate-index": "node ./generate-index.js"
+    },
+    "module": "./src/lib/index.ts",
+    "main": "./src/lib/index.ts",
+    "types": "./src/lib/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./src/lib/index.d.ts",
+            "import": "./src/lib/index.ts",
+            "require": "./src/lib/index.ts"
+        },
+        "./plugin": {
+            "types": "./dist/plugin/index.d.ts",
+            "import": "./dist/plugin/index.js",
+            "require": "./dist/plugin/index.js"
+        }
+    },
+    "files": [
+        "dist",
+        "src",
+        "vite",
+        "lingui.config.js",
+        "index.html"
+    ],
+    "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@hookform/resolvers": "^4.1.3",
+        "@lingui/babel-plugin-lingui-macro": "^5.2.0",
+        "@lingui/cli": "^5.2.0",
+        "@lingui/core": "^5.2.0",
+        "@lingui/react": "^5.2.0",
+        "@lingui/vite-plugin": "^5.2.0",
+        "@radix-ui/react-accordion": "^1.2.3",
+        "@radix-ui/react-alert-dialog": "^1.1.6",
+        "@radix-ui/react-avatar": "^1.1.3",
+        "@radix-ui/react-checkbox": "^1.1.4",
+        "@radix-ui/react-collapsible": "^1.1.3",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-dropdown-menu": "^2.1.6",
+        "@radix-ui/react-hover-card": "^1.1.6",
+        "@radix-ui/react-label": "^2.1.2",
+        "@radix-ui/react-popover": "^1.1.6",
+        "@radix-ui/react-scroll-area": "^1.2.3",
+        "@radix-ui/react-select": "^2.1.6",
+        "@radix-ui/react-separator": "^1.1.2",
+        "@radix-ui/react-slot": "^1.1.2",
+        "@radix-ui/react-switch": "^1.1.3",
+        "@radix-ui/react-tabs": "^1.1.3",
+        "@radix-ui/react-tooltip": "^1.1.8",
+        "@tailwindcss/vite": "^4.0.7",
+        "@tanstack/eslint-plugin-query": "^5.66.1",
+        "@tanstack/react-query": "^5.66.7",
+        "@tanstack/react-query-devtools": "^5.68.0",
+        "@tanstack/react-router": "^1.105.0",
+        "@tanstack/react-table": "^8.21.2",
+        "@tanstack/router-devtools": "^1.105.0",
+        "@tanstack/router-plugin": "^1.105.0",
+        "@tiptap/pm": "^2.11.5",
+        "@tiptap/react": "^2.11.5",
+        "@tiptap/starter-kit": "^2.11.5",
+        "@types/react": "^19.0.10",
+        "@types/react-dom": "^19.0.4",
+        "@types/react-grid-layout": "^1.3.5",
+        "@uidotdev/usehooks": "^2.4.1",
+        "@vitejs/plugin-react": "^4.3.4",
+        "awesome-graphql-client": "^2.1.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "cmdk": "^1.0.0",
+        "date-fns": "^3.6.0",
+        "gql.tada": "^1.8.10",
+        "graphql": "^16.10.0",
+        "json-edit-react": "^1.23.1",
+        "lucide-react": "^0.475.0",
+        "motion": "^12.6.2",
+        "next-themes": "^0.4.6",
+        "react": "^19.0.0",
+        "react-day-picker": "^8.10.1",
+        "react-dom": "^19.0.0",
+        "react-dropzone": "^14.3.8",
+        "react-grid-layout": "^1.5.1",
+        "react-hook-form": "^7.54.2",
+        "recharts": "^2.15.1",
+        "sonner": "^2.0.1",
+        "tailwind-merge": "^3.0.1",
+        "tailwindcss": "^4.0.6",
+        "tailwindcss-animate": "^1.0.7",
+        "tw-animate-css": "^1.2.4",
+        "unplugin-swc": "^1.5.1",
+        "vite": "^6.1.0",
+        "zod": "^3.24.2"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.19.0",
+        "@types/node": "^22.13.4",
+        "eslint": "^9.19.0",
+        "eslint-plugin-react": "^7.37.4",
+        "eslint-plugin-react-hooks": "^5.0.0",
+        "eslint-plugin-react-refresh": "^0.4.18",
+        "globals": "^15.14.0",
+        "vite-plugin-dts": "^4.5.3"
+    },
+    "gitHead": "58c173ac0c7854ff53809d69f34a496f3eff1910"
+}

package/src/app/app-providers.tsx

@@ -0,0 +1,30 @@
+import { AuthProvider } from '@/providers/auth.js';
+import { ChannelProvider } from '@/providers/channel-provider.js';
+import { I18nProvider } from '@/providers/i18n-provider.js';
+import { ServerConfigProvider } from '@/providers/server-config.js';
+import { ThemeProvider } from '@/providers/theme-provider.js';
+import { UserSettingsProvider } from '@/providers/user-settings.js';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import React from 'react';
+
+export const queryClient = new QueryClient();
+
+export function AppProviders({ children }: { children: React.ReactNode }) {
+    return (
+        <I18nProvider>
+            <QueryClientProvider client={queryClient}>
+                <ServerConfigProvider>
+                    <UserSettingsProvider>
+                        <ThemeProvider defaultTheme="system">
+                            <AuthProvider>
+                                <ChannelProvider>{children}</ChannelProvider>
+                            </AuthProvider>
+                        </ThemeProvider>
+                    </UserSettingsProvider>
+                </ServerConfigProvider>
+                <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
+            </QueryClientProvider>
+        </I18nProvider>
+    );
+}

package/src/app/main.tsx

@@ -0,0 +1,97 @@
+import { Toaster } from '@/components/ui/sonner.js';
+import { setCustomFieldsMap } from '@/framework/document-introspection/add-custom-fields.js';
+import { useDashboardExtensions } from '@/framework/extension-api/use-dashboard-extensions.js';
+import { useExtendedRouter } from '@/framework/page/use-extended-router.js';
+import { useAuth } from '@/hooks/use-auth.js';
+import { useServerConfig } from '@/hooks/use-server-config.js';
+import { defaultLocale, dynamicActivate } from '@/providers/i18n-provider.js';
+import { createRouter, RouterProvider } from '@tanstack/react-router';
+import React, { useEffect } from 'react';
+import ReactDOM from 'react-dom/client';
+import { registerDefaults } from '@/framework/defaults.js';
+import { executeDashboardExtensionCallbacks } from '@/framework/extension-api/define-dashboard-extension.js';
+
+import { AppProviders, queryClient } from './app-providers.js';
+import { routeTree } from './routeTree.gen.js';
+import './styles.css';
+
+// Register things for typesafety
+declare module '@tanstack/react-router' {
+    interface Register {
+        router: typeof router;
+    }
+}
+
+export const router = createRouter({
+    routeTree,
+    defaultPreload: 'intent',
+    scrollRestoration: true,
+    context: {
+        /* eslint-disable @typescript-eslint/no-non-null-assertion */
+        auth: undefined!, // This will be set after we wrap the app in an AuthProvider
+        queryClient,
+    },
+    defaultErrorComponent: ({ error }: { error: Error }) => <div>Uh Oh!!! {error.message}</div>,
+});
+
+function InnerApp() {
+    const auth = useAuth();
+    const extendedRouter = useExtendedRouter(router);
+    const serverConfig = useServerConfig();
+    const [hasSetCustomFieldsMap, setHasSetCustomFieldsMap] = React.useState(false);
+
+    useEffect(() => {
+        if (!serverConfig) {
+            return;
+        }
+        setCustomFieldsMap(serverConfig.entityCustomFields);
+        setHasSetCustomFieldsMap(true);
+    }, [serverConfig?.entityCustomFields]);
+
+    return (
+        <>
+            {hasSetCustomFieldsMap && (
+                <RouterProvider router={extendedRouter} context={{ auth, queryClient }} />
+            )}
+        </>
+    );
+}
+
+function App() {
+    const [i18nLoaded, setI18nLoaded] = React.useState(false);
+    const { extensionsLoaded } = useDashboardExtensions();
+    useEffect(() => {
+        // With this method we dynamically load the catalogs
+        dynamicActivate(defaultLocale, () => {
+            setI18nLoaded(true);
+        });
+        registerDefaults();
+    }, []);
+
+    useEffect(() => {
+        if (extensionsLoaded) {
+            executeDashboardExtensionCallbacks();
+        }
+    }, [extensionsLoaded]);
+
+    return (
+        i18nLoaded &&
+        extensionsLoaded && (
+            <AppProviders>
+                <InnerApp />
+                <Toaster />
+            </AppProviders>
+        )
+    );
+}
+
+const rootElement = document.getElementById('app')!;
+
+if (!rootElement.innerHTML) {
+    const root = ReactDOM.createRoot(rootElement);
+    root.render(
+        <React.StrictMode>
+            <App />
+        </React.StrictMode>,
+    );
+}