@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

package/vite/vite-plugin-config-loader.ts

@@ -1,9 +1,10 @@
 import { Plugin } from 'vite';
 
-import { ConfigLoaderOptions, loadVendureConfig, LoadVendureConfigResult } from './utils/config-loader.js';
+import { compile, CompileResult, CompilerOptions } from './utils/compiler.js';
+import { debugLogger } from './utils/logger.js';
 
 export interface ConfigLoaderApi {
-    getVendureConfig(): Promise<LoadVendureConfigResult>;
+    getVendureConfig(): Promise<CompileResult>;
 }
 
 export const configLoaderName = 'vendure:config-loader';
@@ -12,8 +13,8 @@ export const configLoaderName = 'vendure:config-loader';
  * This Vite plugin loads the VendureConfig from the specified file path, and
  * makes it available to other plugins via the `ConfigLoaderApi`.
  */
-export function configLoaderPlugin(options: ConfigLoaderOptions): Plugin {
-    let result: LoadVendureConfigResult;
+export function configLoaderPlugin(options: CompilerOptions): Plugin {
+    let result: CompileResult;
     const onConfigLoaded: Array<() => void> = [];
     return {
         name: configLoaderName,
@@ -23,36 +24,43 @@ export function configLoaderPlugin(options: ConfigLoaderOptions): Plugin {
             );
             try {
                 const startTime = Date.now();
-                result = await loadVendureConfig({
-                    tempDir: options.tempDir,
-                    vendureConfigPath: options.vendureConfigPath,
-                    vendureConfigExport: options.vendureConfigExport,
-                    logger: {
-                        info: (message: string) => this.info(message),
-                        warn: (message: string) => this.warn(message),
-                        debug: (message: string) => this.debug(message),
-                    },
+                result = await compile({
+                    ...options,
+                    logger: process.env.LOG
+                        ? debugLogger
+                        : {
+                              info: (message: string) => this.info(message),
+                              warn: (message: string) => this.warn(message),
+                              debug: (message: string) => this.debug(message),
+                              error: (message: string) => this.error(message),
+                          },
                 });
                 const endTime = Date.now();
                 const duration = endTime - startTime;
-                const pluginNames = result.pluginInfo.map(p => p.name).join(', ');
+                const pluginNames = result.pluginInfo
+                    .map(p => `${p.name} ${p.sourcePluginPath ? '(local)' : '(npm)'}`)
+                    .join(', ');
                 this.info(`Found ${result.pluginInfo.length} plugins: ${pluginNames}`);
                 this.info(
                     `Vendure config loaded (using export "${result.exportedSymbolName}") in ${duration}ms`,
                 );
             } catch (e: unknown) {
                 if (e instanceof Error) {
-                    this.error(`Error loading Vendure config: ${e.message}`);
+                    const message = [
+                        e.message,
+                        `If you are using a monorepo, you may need to provide a custom pathAdapter to resolve the paths correctly.`,
+                    ].join('\n');
+                    this.error(`Error loading Vendure config: ${message}`);
                 }
             }
             onConfigLoaded.forEach(fn => fn());
         },
         api: {
-            getVendureConfig(): Promise<LoadVendureConfigResult> {
+            getVendureConfig(): Promise<CompileResult> {
                 if (result) {
                     return Promise.resolve(result);
                 } else {
-                    return new Promise<LoadVendureConfigResult>(resolve => {
+                    return new Promise<CompileResult>(resolve => {
                         onConfigLoaded.push(() => {
                             resolve(result);
                         });

package/vite/vite-plugin-config.ts

@@ -8,7 +8,7 @@ export function viteConfigPlugin({ packageRoot }: { packageRoot: string }): Plug
             // Only set the vite `root` to the dashboard package when running the dev server.
             // During a production build we still need to reference the dashboard source which
             // lives in `node_modules`, but we don't want the build output to be emitted in there.
-            // Therefore we set `root` only for `serve` and, for `build`, we instead make sure that
+            // Therefore, we set `root` only for `serve` and, for `build`, we instead make sure that
             // an `outDir` **outside** of `node_modules` is used (defaulting to the current working
             // directory if the user did not provide one already).
             config.root = packageRoot;
@@ -37,7 +37,9 @@ export function viteConfigPlugin({ packageRoot }: { packageRoot: string }): Plug
             config.resolve = {
                 alias: {
                     ...(config.resolve?.alias ?? {}),
-                    '@': path.resolve(packageRoot, './src/lib'),
+                    // See the readme for an explanation of this alias.
+                    '@/vdb': path.resolve(packageRoot, './src/lib'),
+                    '@/graphql': path.resolve(packageRoot, './src/lib/graphql'),
                 },
             };
             // This is required to prevent Vite from pre-bundling the
@@ -47,11 +49,7 @@ export function viteConfigPlugin({ packageRoot }: { packageRoot: string }): Plug
                 exclude: [
                     ...(config.optimizeDeps?.exclude || []),
                     '@vendure/dashboard',
-                    '@/providers',
-                    '@/framework',
-                    '@/lib',
-                    '@/components',
-                    '@/hooks',
+                    '@/vdb',
                     'virtual:vendure-ui-config',
                     'virtual:admin-api-schema',
                     'virtual:dashboard-extensions',
@@ -63,6 +61,7 @@ export function viteConfigPlugin({ packageRoot }: { packageRoot: string }): Plug
                     ...(config.optimizeDeps?.include || []),
                     '@/components > recharts',
                     '@/components > react-dropzone',
+                    '@vendure/common/lib/generated-types',
                 ],
             };
             return config;

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

@@ -1,7 +1,7 @@
 import path from 'path';
 import { Plugin } from 'vite';
 
-import { LoadVendureConfigResult } from './utils/config-loader.js';
+import { CompileResult } from './utils/compiler.js';
 import { ConfigLoaderApi, getConfigLoaderApi } from './vite-plugin-config-loader.js';
 
 const virtualModuleId = 'virtual:dashboard-extensions';
@@ -12,9 +12,9 @@ const resolvedVirtualModuleId = `\0${virtualModuleId}`;
  * 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: { rootDir: string }): Plugin {
+export function dashboardMetadataPlugin(): Plugin {
     let configLoaderApi: ConfigLoaderApi;
-    let loadVendureConfigResult: LoadVendureConfigResult;
+    let loadVendureConfigResult: CompileResult;
     return {
         name: 'vendure:dashboard-extensions-metadata',
         configResolved({ plugins }) {
@@ -27,19 +27,38 @@ export function dashboardMetadataPlugin(options: { rootDir: string }): Plugin {
         },
         async load(id) {
             if (id === resolvedVirtualModuleId) {
+                const startTime = Date.now();
+                this.debug('Loading dashboard extensions...');
+
                 if (!loadVendureConfigResult) {
+                    const configStart = Date.now();
                     loadVendureConfigResult = await configLoaderApi.getVendureConfig();
+                    this.debug(`Loaded Vendure config in ${Date.now() - configStart}ms`);
                 }
+
                 const { pluginInfo } = loadVendureConfigResult;
+                const resolveStart = Date.now();
                 const pluginsWithExtensions =
                     pluginInfo
-                        ?.map(
-                            ({ dashboardEntryPath, pluginPath }) =>
-                                dashboardEntryPath && path.join(pluginPath, dashboardEntryPath),
-                        )
+                        ?.map(({ dashboardEntryPath, pluginPath, sourcePluginPath }) => {
+                            if (!dashboardEntryPath) {
+                                return null;
+                            }
+                            // For local plugins, use the sourcePluginPath to resolve the dashboard extension
+                            const basePath = sourcePluginPath
+                                ? path.dirname(sourcePluginPath)
+                                : path.dirname(pluginPath);
+                            const resolved = path.resolve(basePath, dashboardEntryPath);
+                            this.debug(`Resolved extension path: ${resolved}`);
+                            return resolved;
+                        })
                         .filter(x => x != null) ?? [];
 
-                this.info(`Found ${pluginsWithExtensions.length} Dashboard extensions`);
+                this.info(
+                    `Found ${pluginsWithExtensions.length} Dashboard extensions in ${Date.now() - resolveStart}ms`,
+                );
+                this.debug(`Total dashboard extension loading completed in ${Date.now() - startTime}ms`);
+
                 return `
                     export async function runDashboardExtensions() {
                         ${pluginsWithExtensions
@@ -52,11 +71,3 @@ export function dashboardMetadataPlugin(options: { rootDir: string }): Plugin {
         },
     };
 }
-
-/**
- * Converts an import path to a normalized path relative to the rootDir.
- */
-function normalizeImportPath(rootDir: string, importPath: string): string {
-    const relativePath = path.relative(rootDir, importPath).replace(/\\/g, '/');
-    return relativePath.replace(/\.tsx?$/, '.js');
-}

package/vite/vite-plugin-tailwind-source.ts

@@ -0,0 +1,81 @@
+import path from 'path';
+import { Plugin } from 'vite';
+
+import { CompileResult } from './utils/compiler.js';
+import { ConfigLoaderApi, getConfigLoaderApi } from './vite-plugin-config-loader.js';
+
+/**
+ * This Vite plugin transforms the `app/styles.css` file to include a `@source` directive
+ * for each dashboard extension's source directory. This allows Tailwind CSS to
+ * include styles from these extensions when processing the CSS.
+ */
+export function dashboardTailwindSourcePlugin(): Plugin {
+    let configLoaderApi: ConfigLoaderApi;
+    let loadVendureConfigResult: CompileResult;
+    return {
+        name: 'vendure:dashboard-tailwind-source',
+        // Ensure this plugin runs before Tailwind CSS processing
+        enforce: 'pre',
+        configResolved({ plugins }) {
+            configLoaderApi = getConfigLoaderApi(plugins);
+        },
+        async transform(src, id) {
+            if (/app\/styles.css$/.test(id)) {
+                if (!loadVendureConfigResult) {
+                    loadVendureConfigResult = await configLoaderApi.getVendureConfig();
+                }
+                const { pluginInfo } = loadVendureConfigResult;
+                const dashboardExtensionDirs =
+                    pluginInfo
+                        ?.flatMap(({ dashboardEntryPath, sourcePluginPath, pluginPath }) => {
+                            if (!dashboardEntryPath) {
+                                return [];
+                            }
+                            const sourcePaths = [];
+                            if (sourcePluginPath) {
+                                sourcePaths.push(
+                                    path.join(
+                                        path.dirname(sourcePluginPath),
+                                        path.dirname(dashboardEntryPath),
+                                    ),
+                                );
+                            }
+                            if (pluginPath) {
+                                sourcePaths.push(
+                                    path.join(path.dirname(pluginPath), path.dirname(dashboardEntryPath)),
+                                );
+                            }
+                            return sourcePaths;
+                        })
+                        .filter(x => x != null) ?? [];
+                const sources = dashboardExtensionDirs
+                    .map(extension => {
+                        return `@source '${extension}';`;
+                    })
+                    .join('\n');
+
+                // Find the line with the specific comment and insert sources after it
+                const lines = src.split('\n');
+                const sourceCommentIndex = lines.findIndex(line =>
+                    line.includes(
+                        '/* @source rules from extensions will be added here by the dashboardTailwindSourcePlugin */',
+                    ),
+                );
+
+                if (sourceCommentIndex !== -1) {
+                    // Insert the sources after the comment line
+                    lines.splice(sourceCommentIndex + 1, 0, sources);
+                    const modifiedSrc = lines.join('\n');
+                    return {
+                        code: modifiedSrc,
+                    };
+                }
+
+                // If the comment is not found, append sources at the end
+                return {
+                    code: src + '\n' + sources,
+                };
+            }
+        },
+    };
+}

package/vite/vite-plugin-theme.ts

@@ -53,91 +53,91 @@ export interface ThemeVariables {
 
 const defaultVariables: ThemeVariables = {
     light: {
-        background: 'hsl(0 0% 100%)',
-        foreground: 'hsl(0 0% 3.9%)',
-        card: 'hsl(0 0% 100%)',
-        'card-foreground': 'hsl(0 0% 3.9%)',
-        popover: 'hsl(0 0% 100%)',
-        'popover-foreground': 'hsl(0 0% 3.9%)',
-        primary: 'hsl(0 0% 9%)',
-        'primary-foreground': 'hsl(0 0% 98%)',
-        secondary: 'hsl(0 0% 96.1%)',
-        'secondary-foreground': 'hsl(0 0% 9%)',
-        muted: 'hsl(0 0% 96.1%)',
-        'muted-foreground': 'hsl(0 0% 45.1%)',
-        accent: 'hsl(0 0% 96.1%)',
-        'accent-foreground': 'hsl(0 0% 9%)',
-        destructive: 'hsl(0 84.2% 60.2%)',
-        'destructive-foreground': 'hsl(0 0% 98%)',
+        background: 'oklch(1.0000 0 0)',
+        foreground: 'oklch(0.2103 0.0059 285.8852)',
+        card: 'oklch(1.0000 0 0)',
+        'card-foreground': 'oklch(0.2103 0.0059 285.8852)',
+        popover: 'oklch(1.0000 0 0)',
+        'popover-foreground': 'oklch(0.2103 0.0059 285.8852)',
+        primary: 'oklch(0.7613 0.1503 231.1314)',
+        'primary-foreground': 'oklch(0.1408 0.0044 285.8229)',
+        secondary: 'oklch(0.9674 0.0013 286.3752)',
+        'secondary-foreground': 'oklch(0.2103 0.0059 285.8852)',
+        muted: 'oklch(0.9674 0.0013 286.3752)',
+        'muted-foreground': 'oklch(0.5517 0.0138 285.9385)',
+        accent: 'oklch(0.9674 0.0013 286.3752)',
+        'accent-foreground': 'oklch(0.2103 0.0059 285.8852)',
+        destructive: 'oklch(0.5771 0.2152 27.3250)',
+        'destructive-foreground': 'oklch(0.9851 0 0)',
         success: 'hsl(100, 81%, 35%)',
         'success-foreground': 'hsl(0 0% 98%)',
         'dev-mode': 'hsl(204, 76%, 62%)',
         'dev-mode-foreground': 'hsl(0 0% 98%)',
-        border: 'hsl(0 0% 89.8%)',
-        input: 'hsl(0 0% 89.8%)',
-        ring: 'hsl(0 0% 3.9%)',
-        'chart-1': 'hsl(12 76% 61%)',
-        'chart-2': 'hsl(173 58% 39%)',
-        'chart-3': 'hsl(197 37% 24%)',
-        'chart-4': 'hsl(43 74% 66%)',
-        'chart-5': 'hsl(27 87% 67%)',
-        radius: '0.6rem',
-        sidebar: 'hsl(0 0% 98%)',
-        'sidebar-foreground': 'hsl(240 5.3% 26.1%)',
-        'sidebar-primary': 'hsl(240 5.9% 10%)',
-        'sidebar-primary-foreground': 'hsl(0 0% 98%)',
-        'sidebar-accent': 'hsl(0, 0%, 92%)',
-        'sidebar-accent-foreground': 'hsl(240 5.9% 10%)',
-        'sidebar-border': 'hsl(220 13% 91%)',
-        'sidebar-ring': 'hsl(217.2 91.2% 59.8%)',
+        border: 'oklch(0.9197 0.0040 286.3202)',
+        input: 'oklch(0.9197 0.0040 286.3202)',
+        ring: 'oklch(0.7613 0.1503 231.1314)',
+        'chart-1': 'oklch(0.7613 0.1503 231.1314)',
+        'chart-2': 'oklch(0.5575 0.2525 302.3212)',
+        'chart-3': 'oklch(0.5858 0.2220 17.5846)',
+        'chart-4': 'oklch(0.6658 0.1574 58.3183)',
+        'chart-5': 'oklch(0.6271 0.1699 149.2138)',
+        radius: '0.375rem',
+        sidebar: 'oklch(0.9674 0.0013 286.3752)',
+        'sidebar-foreground': 'oklch(0.2103 0.0059 285.8852)',
+        'sidebar-primary': 'oklch(0.7613 0.1503 231.1314)',
+        'sidebar-primary-foreground': 'oklch(0.1408 0.0044 285.8229)',
+        'sidebar-accent': 'oklch(1.0000 0 0)',
+        'sidebar-accent-foreground': 'oklch(0.2103 0.0059 285.8852)',
+        'sidebar-border': 'oklch(0.9197 0.0040 286.3202)',
+        'sidebar-ring': 'oklch(0.7613 0.1503 231.1314)',
         brand: '#17c1ff',
         'brand-lighter': '#e6f9ff',
         'brand-darker': '#0099ff',
-        'font-sans': "'Geist', sans-serif",
-        'font-mono': "'Geist Mono', monospace",
+        'font-sans': 'Inter, sans-serif',
+        'font-mono': 'Geist Mono, monospace',
     },
     dark: {
-        background: 'hsl(0 0% 3.9%)',
-        foreground: 'hsl(0 0% 98%)',
-        card: 'hsl(0 0% 3.9%)',
-        'card-foreground': 'hsl(0 0% 98%)',
-        popover: 'hsl(0 0% 3.9%)',
-        'popover-foreground': 'hsl(0 0% 98%)',
-        primary: 'hsl(0 0% 98%)',
-        'primary-foreground': 'hsl(0 0% 9%)',
-        secondary: 'hsl(0 0% 14.9%)',
-        'secondary-foreground': 'hsl(0 0% 98%)',
-        muted: 'hsl(0 0% 14.9%)',
-        'muted-foreground': 'hsl(0 0% 63.9%)',
-        accent: 'hsl(0 0% 14.9%)',
-        'accent-foreground': 'hsl(0 0% 98%)',
-        destructive: 'hsl(0 62.8% 30.6%)',
-        'destructive-foreground': 'hsl(0 0% 98%)',
+        background: 'oklch(0.1408 0.0044 285.8229)',
+        foreground: 'oklch(0.9851 0 0)',
+        card: 'oklch(0.2103 0.0059 285.8852)',
+        'card-foreground': 'oklch(0.9851 0 0)',
+        popover: 'oklch(0.2103 0.0059 285.8852)',
+        'popover-foreground': 'oklch(0.9851 0 0)',
+        primary: 'oklch(0.7613 0.1503 231.1314)',
+        'primary-foreground': 'oklch(0.1408 0.0044 285.8229)',
+        secondary: 'oklch(0.2739 0.0055 286.0326)',
+        'secondary-foreground': 'oklch(0.9851 0 0)',
+        muted: 'oklch(0.2739 0.0055 286.0326)',
+        'muted-foreground': 'oklch(0.7118 0.0129 286.0665)',
+        accent: 'oklch(0.2739 0.0055 286.0326)',
+        'accent-foreground': 'oklch(0.9851 0 0)',
+        destructive: 'oklch(0.6368 0.2078 25.3313)',
+        'destructive-foreground': 'oklch(0.9851 0 0)',
         success: 'hsl(100, 100%, 35%)',
         'success-foreground': 'hsl(0 0% 98%)',
         'dev-mode': 'hsl(204, 86%, 53%)',
         'dev-mode-foreground': 'hsl(0 0% 98%)',
-        border: 'hsl(0 0% 14.9%)',
-        input: 'hsl(0 0% 14.9%)',
-        ring: 'hsl(0 0% 83.1%)',
-        'chart-1': 'hsl(220 70% 50%)',
-        'chart-2': 'hsl(160 60% 45%)',
-        'chart-3': 'hsl(30 80% 55%)',
-        'chart-4': 'hsl(280 65% 60%)',
-        'chart-5': 'hsl(340 75% 55%)',
-        sidebar: 'hsl(240 5.9% 10%)',
-        'sidebar-foreground': 'hsl(240 4.8% 95.9%)',
-        'sidebar-primary': 'hsl(224.3 76.3% 48%)',
-        'sidebar-primary-foreground': 'hsl(0 0% 100%)',
-        'sidebar-accent': 'hsl(240 3.7% 15.9%)',
-        'sidebar-accent-foreground': 'hsl(240 4.8% 95.9%)',
-        'sidebar-border': 'hsl(240 3.7% 15.9%)',
-        'sidebar-ring': 'hsl(217.2 91.2% 59.8%)',
+        border: 'oklch(0.2739 0.0055 286.0326)',
+        input: 'oklch(0.2739 0.0055 286.0326)',
+        ring: 'oklch(0.7613 0.1503 231.1314)',
+        'chart-1': 'oklch(0.7613 0.1503 231.1314)',
+        'chart-2': 'oklch(0.6268 0.2325 303.9004)',
+        'chart-3': 'oklch(0.6450 0.2154 16.4393)',
+        'chart-4': 'oklch(0.7686 0.1647 70.0804)',
+        'chart-5': 'oklch(0.7227 0.1920 149.5793)',
+        sidebar: 'oklch(0.1408 0.0044 285.8229)',
+        'sidebar-foreground': 'oklch(0.9851 0 0)',
+        'sidebar-primary': 'oklch(0.7613 0.1503 231.1314)',
+        'sidebar-primary-foreground': 'oklch(0.1408 0.0044 285.8229)',
+        'sidebar-accent': 'oklch(0.2739 0.0055 286.0326)',
+        'sidebar-accent-foreground': 'oklch(0.9851 0 0)',
+        'sidebar-border': 'oklch(0.2739 0.0055 286.0326)',
+        'sidebar-ring': 'oklch(0.7613 0.1503 231.1314)',
         brand: '#17c1ff',
         'brand-lighter': '#e6f9ff',
         'brand-darker': '#0099ff',
-        'font-sans': "'Geist', sans-serif",
-        'font-mono': "'Geist Mono', monospace",
+        'font-sans': 'Inter, sans-serif',
+        'font-mono': 'Geist Mono, monospace',
     },
 };
 

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

@@ -1,27 +1,137 @@
-import { AdminUiConfig, VendureConfig } from '@vendure/core';
-import path from 'path';
+import { LanguageCode, VendureConfig } from '@vendure/core';
 import { Plugin } from 'vite';
 
-import { getAdminUiConfig } from './utils/ui-config.js';
+import { getUiConfig } from './utils/ui-config.js';
 import { ConfigLoaderApi, getConfigLoaderApi } from './vite-plugin-config-loader.js';
 
 const virtualModuleId = 'virtual:vendure-ui-config';
 const resolvedVirtualModuleId = `\0${virtualModuleId}`;
 
-export type UiConfigPluginOptions = {
+export interface ApiConfig {
     /**
      * @description
-     * The admin UI config to be passed to the Vendure Dashboard.
+     * The hostname of the Vendure server which the admin UI will be making API calls
+     * to. If set to "auto", the Admin UI app will determine the hostname from the
+     * current location (i.e. `window.location.hostname`).
+     *
+     * @default 'auto'
      */
-    adminUiConfig?: Partial<AdminUiConfig>;
-};
+    host?: string | 'auto';
+    /**
+     * @description
+     * The port of the Vendure server which the admin UI will be making API calls
+     * to. If set to "auto", the Admin UI app will determine the port from the
+     * current location (i.e. `window.location.port`).
+     *
+     * @default 'auto'
+     */
+    port?: number | 'auto';
+    /**
+     * @description
+     * The path to the GraphQL Admin API.
+     *
+     * @default 'admin-api'
+     */
+    adminApiPath?: string;
+    /**
+     * @description
+     * Whether to use cookies or bearer tokens to track sessions.
+     * Should match the setting of in the server's `tokenMethod` config
+     * option.
+     *
+     * @default 'cookie'
+     */
+    tokenMethod?: 'cookie' | 'bearer';
+    /**
+     * @description
+     * The header used when using the 'bearer' auth method. Should match the
+     * setting of the server's `authOptions.authTokenHeaderKey` config option.
+     *
+     * @default 'vendure-auth-token'
+     */
+    authTokenHeaderKey?: string;
+    /**
+     * @description
+     * The name of the header which contains the channel token. Should match the
+     * setting of the server's `apiOptions.channelTokenKey` config option.
+     *
+     * @default 'vendure-token'
+     */
+    channelTokenKey?: string;
+}
+
+export interface I18nConfig {
+    /**
+     * @description
+     * The default language for the Admin UI. Must be one of the
+     * items specified in the `availableLanguages` property.
+     *
+     * @default LanguageCode.en
+     */
+    defaultLanguage?: LanguageCode;
+    /**
+     * @description
+     * The default locale for the Admin UI. The locale affects the formatting of
+     * currencies & dates. Must be one of the items specified
+     * in the `availableLocales` property.
+     *
+     * If not set, the browser default locale will be used.
+     *
+     * @since 2.2.0
+     */
+    defaultLocale?: string;
+    /**
+     * @description
+     * An array of languages for which translations exist for the Admin UI.
+     */
+    availableLanguages?: LanguageCode[];
+    /**
+     * @description
+     * An array of locales to be used on Admin UI.
+     *
+     * @since 2.2.0
+     */
+    availableLocales?: string[];
+}
+
+export interface UiConfigPluginOptions {
+    /**
+     * @description
+     * Configuration for API connection settings
+     */
+    api?: ApiConfig;
+    /**
+     * @description
+     * Configuration for internationalization settings
+     */
+    i18n?: I18nConfig;
+}
+
+/**
+ * @description
+ * The resolved UI configuration with all defaults applied.
+ * This is the type of the configuration object available at runtime.
+ */
+export interface ResolvedUiConfig {
+    /**
+     * @description
+     * API connection settings with all defaults applied
+     */
+    api: Required<ApiConfig>;
+    /**
+     * @description
+     * Internationalization settings with all defaults applied.
+     * Note: defaultLocale remains optional as it can be undefined.
+     */
+    i18n: Required<Omit<I18nConfig, 'defaultLocale'>> & Pick<I18nConfig, 'defaultLocale'>;
+}
 
 /**
  * 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 }: UiConfigPluginOptions): Plugin {
+export function uiConfigPlugin(options: UiConfigPluginOptions = {}): Plugin {
     let configLoaderApi: ConfigLoaderApi;
     let vendureConfig: VendureConfig;
 
@@ -42,7 +152,7 @@ export function uiConfigPlugin({ adminUiConfig }: UiConfigPluginOptions): Plugin
                     vendureConfig = result.vendureConfig;
                 }
 
-                const config = getAdminUiConfig(vendureConfig, adminUiConfig);
+                const config = getUiConfig(vendureConfig, options);
 
                 return `
                     export const uiConfig = ${JSON.stringify(config)}
@@ -51,11 +161,3 @@ export function uiConfigPlugin({ adminUiConfig }: UiConfigPluginOptions): Plugin
         },
     };
 }
-
-/**
- * Converts an import path to a normalized path relative to the rootDir.
- */
-function normalizeImportPath(rootDir: string, importPath: string): string {
-    const relativePath = path.relative(rootDir, importPath).replace(/\\/g, '/');
-    return relativePath.replace(/\.tsx?$/, '.js');
-}