@vendure/dashboard 3.3.5-master-202506250727 → 3.3.5-master-202506251305

package/src/lib/components/shared/paginated-list-data-table.tsx

@@ -7,15 +7,9 @@ import {
 } from '@/framework/document-introspection/get-document-structure.js';
 import { useListQueryFields } from '@/framework/document-introspection/hooks.js';
 import { api } from '@/graphql/api.js';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
 
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
 import {
     AlertDialog,
     AlertDialogAction,
@@ -27,11 +21,17 @@ import {
     AlertDialogTitle,
     AlertDialogTrigger,
 } from '@/components/ui/alert-dialog.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.js';
 import { DisplayComponent } from '@/framework/component-registry/dynamic-component.js';
+import { BulkAction } from '@/framework/data-table/data-table-types.js';
 import { ResultOf } from '@/graphql/graphql.js';
 import { Trans, useLingui } from '@/lib/trans.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
-import { useQuery } from '@tanstack/react-query';
 import {
     ColumnFiltersState,
     ColumnSort,
@@ -44,6 +44,7 @@ import { EllipsisIcon, TrashIcon } from 'lucide-react';
 import React, { useMemo } from 'react';
 import { toast } from 'sonner';
 import { Button } from '../ui/button.js';
+import { Checkbox } from '../ui/checkbox.js';
 
 // Type that identifies a paginated list structure (has items array and totalItems)
 type IsPaginatedList<T> = T extends { items: any[]; totalItems: number } ? true : false;
@@ -227,6 +228,7 @@ export interface PaginatedListDataTableProps<
     onColumnVisibilityChange?: (table: Table<any>, columnVisibility: VisibilityState) => void;
     facetedFilters?: FacetedFilterConfig<T>;
     rowActions?: RowAction<PaginatedListItemFields<T>>[];
+    bulkActions?: BulkAction[];
     disableViewOptions?: boolean;
     transformData?: (data: PaginatedListItemFields<T>[]) => PaginatedListItemFields<T>[];
     setTableOptions?: (table: TableOptions<any>) => TableOptions<any>;
@@ -265,6 +267,7 @@ export function PaginatedListDataTable<
     onColumnVisibilityChange,
     facetedFilters,
     rowActions,
+    bulkActions,
     disableViewOptions,
     setTableOptions,
     transformData,
@@ -309,6 +312,7 @@ export function PaginatedListDataTable<
     function refetchPaginatedList() {
         queryClient.invalidateQueries({ queryKey });
     }
+
     registerRefresher?.(refetchPaginatedList);
 
     const { data } = useQuery({
@@ -427,7 +431,10 @@ export function PaginatedListDataTable<
             // existing order
             const orderedColumns = finalColumns
                 .filter(column => column.id && defaultColumnOrder.includes(column.id as any))
-                .sort((a, b) => defaultColumnOrder.indexOf(a.id as any) - defaultColumnOrder.indexOf(b.id as any));
+                .sort(
+                    (a, b) =>
+                        defaultColumnOrder.indexOf(a.id as any) - defaultColumnOrder.indexOf(b.id as any),
+                );
             const remainingColumns = finalColumns.filter(
                 column => !column.id || !defaultColumnOrder.includes(column.id as any),
             );
@@ -441,6 +448,31 @@ export function PaginatedListDataTable<
             }
         }
 
+        // Add the row selection column
+        finalColumns.unshift({
+            id: 'selection',
+            accessorKey: 'selection',
+            header: ({ table }) => (
+                <Checkbox
+                    className="mx-1"
+                    checked={table.getIsAllRowsSelected()}
+                    onCheckedChange={checked =>
+                        table.toggleAllRowsSelected(checked === 'indeterminate' ? undefined : checked)
+                    }
+                />
+            ),
+            enableColumnFilter: false,
+            cell: ({ row }) => {
+                return (
+                    <Checkbox
+                        className="mx-1"
+                        checked={row.getIsSelected()}
+                        onCheckedChange={row.getToggleSelectedHandler()}
+                    />
+                );
+            },
+        });
+
         return { columns: finalColumns, customFieldColumnNames };
     }, [fields, customizeColumns, rowActions]);
 
@@ -465,6 +497,7 @@ export function PaginatedListDataTable<
                 defaultColumnVisibility={columnVisibility}
                 facetedFilters={facetedFilters}
                 disableViewOptions={disableViewOptions}
+                bulkActions={bulkActions}
                 setTableOptions={setTableOptions}
                 onRefresh={refetchPaginatedList}
             />
@@ -536,7 +569,7 @@ function DeleteMutationRowAction({
     return (
         <AlertDialog>
             <AlertDialogTrigger asChild>
-                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                <DropdownMenuItem onSelect={e => e.preventDefault()}>
                     <div className="flex items-center gap-2 text-destructive">
                         <TrashIcon className="w-4 h-4 text-destructive" />
                         <Trans>Delete</Trans>
@@ -549,7 +582,9 @@ function DeleteMutationRowAction({
                         <Trans>Confirm deletion</Trans>
                     </AlertDialogTitle>
                     <AlertDialogDescription>
-                        <Trans>Are you sure you want to delete this item? This action cannot be undone.</Trans>
+                        <Trans>
+                            Are you sure you want to delete this item? This action cannot be undone.
+                        </Trans>
                     </AlertDialogDescription>
                 </AlertDialogHeader>
                 <AlertDialogFooter>
@@ -567,6 +602,7 @@ function DeleteMutationRowAction({
         </AlertDialog>
     );
 }
+
 /**
  * Returns the default column visibility configuration.
  */

package/src/lib/framework/data-table/data-table-extensions.ts

@@ -0,0 +1,21 @@
+import { BulkAction } from '@/framework/data-table/data-table-types.js';
+
+import { globalRegistry } from '../registry/global-registry.js';
+
+globalRegistry.register('bulkActionsRegistry', new Map<string, BulkAction[]>());
+
+export function getBulkActions(pageId: string, blockId = 'list-table'): BulkAction[] {
+    const key = createKey(pageId, blockId);
+    return globalRegistry.get('bulkActionsRegistry').get(key) || [];
+}
+
+export function addBulkAction(pageId: string, blockId: string | undefined, action: BulkAction) {
+    const bulkActionsRegistry = globalRegistry.get('bulkActionsRegistry');
+    const key = createKey(pageId, blockId);
+    const existingActions = bulkActionsRegistry.get(key) || [];
+    bulkActionsRegistry.set(key, [...existingActions, action]);
+}
+
+function createKey(pageId: string, blockId: string | undefined): string {
+    return `${pageId}__${blockId ?? 'list-table'}`;
+}

package/src/lib/framework/data-table/data-table-types.ts

@@ -0,0 +1,25 @@
+import { Table } from '@tanstack/react-table';
+
+export type BulkActionContext<Item extends { id: string } & Record<string, any>> = {
+    selection: Item[];
+    table: Table<Item>;
+};
+
+export type BulkActionComponent<Item extends { id: string } & Record<string, any>> = React.FunctionComponent<
+    BulkActionContext<Item>
+>;
+
+/**
+ * @description
+ * **Status: Developer Preview**
+ *
+ * A bulk action is a component that will be rendered in the bulk actions dropdown.
+ *
+ * @docsCategory components
+ * @docsPage DataTableBulkActions
+ * @since 3.4.0
+ */
+export type BulkAction = {
+    order?: number;
+    component: BulkActionComponent<any>;
+};

package/src/lib/framework/extension-api/define-dashboard-extension.ts

@@ -1,3 +1,5 @@
+import { addBulkAction } from '@/framework/data-table/data-table-extensions.js';
+
 import { registerDashboardWidget } from '../dashboard-widget/widget-extensions.js';
 import { addCustomFormComponent } from '../form-engine/custom-form-component-extensions.js';
 import {
@@ -82,6 +84,15 @@ export function defineDashboardExtension(extension: DashboardExtension) {
                 addCustomFormComponent(component);
             }
         }
+        if (extension.dataTables) {
+            for (const dataTable of extension.dataTables) {
+                if (dataTable.bulkActions?.length) {
+                    for (const action of dataTable.bulkActions) {
+                        addBulkAction(dataTable.pageId, dataTable.blockId, action);
+                    }
+                }
+            }
+        }
         const callbacks = globalRegistry.get('extensionSourceChangeCallbacks');
         if (callbacks.size) {
             for (const callback of callbacks) {

package/src/lib/framework/extension-api/extension-api-types.ts

@@ -5,6 +5,7 @@ import type React from 'react';
 
 import { DashboardAlertDefinition } from '../alert/types.js';
 import { DashboardWidgetDefinition } from '../dashboard-widget/types.js';
+import { BulkAction } from '../data-table/data-table-types.js';
 import { CustomFormComponentInputProps } from '../form-engine/custom-form-component.js';
 import { NavMenuItem } from '../nav-menu/nav-menu-extensions.js';
 
@@ -109,6 +110,35 @@ export interface DashboardPageBlockDefinition {
     requiresPermission?: string | string[];
 }
 
+/**
+ * @description
+ * **Status: Developer Preview**
+ *
+ * This allows you to customize aspects of existing data tables in the dashboard.
+ *
+ * @docsCategory extensions
+ * @since 3.4.0
+ */
+export interface DashboardDataTableDefinition {
+    /**
+     * @description
+     * The ID of the page where the data table is located, e.g. `'product-list'`, `'order-list'`.
+     */
+    pageId: string;
+    /**
+     * @description
+     * The ID of the data table block. Defaults to `'list-table'`, which is the default blockId
+     * for the standard list pages. However, some other pages may use a different blockId,
+     * such as `'product-variants-table'` on the `'product-detail'` page.
+     */
+    blockId?: string;
+    /**
+     * @description
+     * An array of additional bulk actions that will be available on the data table.
+     */
+    bulkActions?: BulkAction[];
+}
+
 /**
  * @description
  * **Status: Developer Preview**
@@ -155,4 +185,9 @@ export interface DashboardExtension {
      * Allows you to define custom form components for custom fields in the dashboard.
      */
     customFormComponents?: DashboardCustomFormComponent[];
+    /**
+     * @description
+     * Allows you to customize aspects of existing data tables in the dashboard.
+     */
+    dataTables?: DashboardDataTableDefinition[];
 }

package/src/lib/framework/form-engine/use-generated-form.tsx

@@ -1,8 +1,5 @@
 import { getOperationVariablesFields } from '@/framework/document-introspection/get-document-structure.js';
-import {
-    createFormSchemaFromFields,
-    getDefaultValuesFromFields,
-} from '@/framework/form-engine/form-schema-tools.js';
+import { createFormSchemaFromFields, getDefaultValuesFromFields } from '@/framework/form-engine/form-schema-tools.js';
 import { useChannel } from '@/hooks/use-channel.js';
 import { useServerConfig } from '@/hooks/use-server-config.js';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
@@ -57,7 +54,7 @@ export function useGeneratedForm<
         },
         mode: 'onChange',
         defaultValues,
-        values: processedEntity ? processedEntity : defaultValues,
+        values: processedEntity ? setValues(processedEntity) : defaultValues,
     });
     let submitHandler = (event: FormEvent) => {
         event.preventDefault();

package/src/lib/framework/layout-engine/page-block-provider.tsx

@@ -0,0 +1,6 @@
+import { PageBlockProps } from '@/framework/layout-engine/page-layout.js';
+import { createContext } from 'react';
+
+export type PageBlockContextValue = Pick<PageBlockProps, 'blockId' | 'column' | 'title' | 'description'>;
+
+export const PageBlockContext = createContext<PageBlockContextValue | undefined>(undefined);

package/src/lib/framework/layout-engine/page-layout.tsx

@@ -1,20 +1,21 @@
 import { CustomFieldsForm } from '@/components/shared/custom-fields-form.js';
+import { NavigationConfirmation } from '@/components/shared/navigation-confirmation.js';
 import { PermissionGuard } from '@/components/shared/permission-guard.js';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card.js';
 import { Form } from '@/components/ui/form.js';
 import { useCustomFieldConfig } from '@/hooks/use-custom-field-config.js';
 import { usePage } from '@/hooks/use-page.js';
 import { cn } from '@/lib/utils.js';
-import { NavigationConfirmation } from '@/components/shared/navigation-confirmation.js';
 import { useMediaQuery } from '@uidotdev/usehooks';
 import React, { ComponentProps } from 'react';
 import { Control, UseFormReturn } from 'react-hook-form';
 
 import { DashboardActionBarItem } from '../extension-api/extension-api-types.js';
 
+import { PageBlockContext } from '@/framework/layout-engine/page-block-provider.js';
+import { PageContext, PageContextValue } from '@/framework/layout-engine/page-provider.js';
 import { getDashboardActionBarItems, getDashboardPageBlocks } from './layout-extensions.js';
 import { LocationWrapper } from './location-wrapper.js';
-import { PageContext, PageContextValue } from '@/framework/layout-engine/page-provider.js';
 
 export interface PageProps extends ComponentProps<'div'> {
     pageId?: string;
@@ -45,9 +46,7 @@ export function Page({ children, pageId, entity, form, submitHandler, ...props }
     const childArray = React.Children.toArray(children);
 
     const pageTitle = childArray.find(child => React.isValidElement(child) && child.type === PageTitle);
-    const pageActionBar = childArray.find(
-        child => isOfType(child, PageActionBar),
-    );
+    const pageActionBar = childArray.find(child => isOfType(child, PageActionBar));
 
     const pageContent = childArray.filter(
         child => !isOfType(child, PageTitle) && !isOfType(child, PageActionBar),
@@ -73,7 +72,13 @@ export function Page({ children, pageId, entity, form, submitHandler, ...props }
     );
 }
 
-function PageContent({ pageHeader, pageContent, form, submitHandler, ...props }: {
+function PageContent({
+    pageHeader,
+    pageContent,
+    form,
+    submitHandler,
+    ...props
+}: {
     pageHeader: React.ReactNode;
     pageContent: React.ReactNode;
     form?: UseFormReturn<any>;
@@ -94,9 +99,14 @@ function PageContent({ pageHeader, pageContent, form, submitHandler, ...props }:
     );
 }
 
-export function PageContentWithOptionalForm({ form, pageHeader, pageContent, submitHandler }: {
+export function PageContentWithOptionalForm({
+    form,
+    pageHeader,
+    pageContent,
+    submitHandler,
+}: {
     form?: UseFormReturn<any>;
-    pageHeader: React.ReactNode
+    pageHeader: React.ReactNode;
     pageContent: React.ReactNode;
     submitHandler?: any;
 }) {
@@ -261,12 +271,8 @@ export function PageTitle({ children }: { children: React.ReactNode }) {
 export function PageActionBar({ children }: { children: React.ReactNode }) {
     let childArray = React.Children.toArray(children);
 
-    const leftContent = childArray.filter(
-        child => isOfType(child, PageActionBarLeft),
-    );
-    const rightContent = childArray.filter(
-        child => isOfType(child, PageActionBarRight),
-    );
+    const leftContent = childArray.filter(child => isOfType(child, PageActionBarLeft));
+    const rightContent = childArray.filter(child => isOfType(child, PageActionBarRight));
 
     return (
         <div className={cn('flex gap-2', leftContent.length > 0 ? 'justify-between' : 'justify-end')}>
@@ -348,18 +354,20 @@ export type PageBlockProps = {
  * @docsWeight 0
  * @since 3.3.0
  */
-export function PageBlock({ children, title, description, className, blockId }: PageBlockProps) {
+export function PageBlock({ children, title, description, className, blockId, column }: PageBlockProps) {
     return (
         <LocationWrapper blockId={blockId}>
-            <Card className={cn('w-full', className)}>
-                {title || description ? (
-                    <CardHeader>
-                        {title && <CardTitle>{title}</CardTitle>}
-                        {description && <CardDescription>{description}</CardDescription>}
-                    </CardHeader>
-                ) : null}
-                <CardContent className={cn(!title ? 'pt-6' : '')}>{children}</CardContent>
-            </Card>
+            <PageBlockContext.Provider value={{ blockId, title, description, column }}>
+                <Card className={cn('w-full', className)}>
+                    {title || description ? (
+                        <CardHeader>
+                            {title && <CardTitle>{title}</CardTitle>}
+                            {description && <CardDescription>{description}</CardDescription>}
+                        </CardHeader>
+                    ) : null}
+                    <CardContent className={cn(!title ? 'pt-6' : '')}>{children}</CardContent>
+                </Card>
+            </PageBlockContext.Provider>
         </LocationWrapper>
     );
 }
@@ -376,13 +384,15 @@ export function PageBlock({ children, title, description, className, blockId }:
  * @since 3.3.0
  */
 export function FullWidthPageBlock({
-                                       children,
-                                       className,
-                                       blockId,
-                                   }: Pick<PageBlockProps, 'children' | 'className' | 'blockId'>) {
+    children,
+    className,
+    blockId,
+}: Pick<PageBlockProps, 'children' | 'className' | 'blockId'>) {
     return (
         <LocationWrapper blockId={blockId}>
-            <div className={cn('w-full', className)}>{children}</div>
+            <PageBlockContext.Provider value={{ blockId, column: 'main' }}>
+                <div className={cn('w-full', className)}>{children}</div>
+            </PageBlockContext.Provider>
         </LocationWrapper>
     );
 }
@@ -398,10 +408,10 @@ export function FullWidthPageBlock({
  * @since 3.3.0
  */
 export function CustomFieldsPageBlock({
-                                          column,
-                                          entityType,
-                                          control,
-                                      }: {
+    column,
+    entityType,
+    control,
+}: {
     column: 'main' | 'side';
     entityType: string;
     control: Control<any, any>;

package/src/lib/framework/page/list-page.tsx

@@ -3,12 +3,13 @@ import {
     CustomFieldKeysOfItem,
     CustomizeColumnConfig,
     FacetedFilterConfig,
+    ListQueryFields,
     ListQueryOptionsShape,
     ListQueryShape,
-    ListQueryFields,
     PaginatedListDataTable,
     RowAction,
 } from '@/components/shared/paginated-list-data-table.js';
+import { BulkAction } from '@/framework/data-table/data-table-types.js';
 import { useUserSettings } from '@/hooks/use-user-settings.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { AnyRoute, AnyRouter, useNavigate } from '@tanstack/react-router';
@@ -16,13 +17,7 @@ import { ColumnFiltersState, SortingState, Table } from '@tanstack/react-table';
 import { TableOptions } from '@tanstack/table-core';
 
 import { addCustomFields } from '../document-introspection/add-custom-fields.js';
-import {
-    FullWidthPageBlock,
-    Page,
-    PageActionBar,
-    PageLayout,
-    PageTitle,
-} from '../layout-engine/page-layout.js';
+import { FullWidthPageBlock, Page, PageActionBar, PageLayout, PageTitle } from '../layout-engine/page-layout.js';
 
 /**
  * @description
@@ -57,6 +52,7 @@ export interface ListPageProps<
     rowActions?: RowAction<ListQueryFields<T>>[];
     transformData?: (data: any[]) => any[];
     setTableOptions?: (table: TableOptions<any>) => TableOptions<any>;
+    bulkActions?: BulkAction[];
 }
 
 /**
@@ -93,6 +89,7 @@ export function ListPage<
     rowActions,
     transformData,
     setTableOptions,
+    bulkActions,
 }: ListPageProps<T, U, V, AC>) {
     const route = typeof routeOrFn === 'function' ? routeOrFn() : routeOrFn;
     const routeSearch = route.useSearch();
@@ -191,6 +188,7 @@ export function ListPage<
                         }}
                         facetedFilters={facetedFilters}
                         rowActions={rowActions}
+                        bulkActions={bulkActions}
                         setTableOptions={setTableOptions}
                         transformData={transformData}
                     />

package/src/lib/framework/registry/registry-types.ts

@@ -1,5 +1,8 @@
+import React from 'react';
+
 import { DashboardAlertDefinition } from '../alert/types.js';
 import { DashboardWidgetDefinition } from '../dashboard-widget/types.js';
+import { BulkAction } from '../data-table/data-table-types.js';
 import {
     DashboardActionBarItem,
     DashboardPageBlockDefinition,
@@ -16,6 +19,5 @@ export interface GlobalRegistryContents {
     dashboardWidgetRegistry: Map<string, DashboardWidgetDefinition>;
     dashboardAlertRegistry: Map<string, DashboardAlertDefinition>;
     customFormComponents: Map<string, React.FunctionComponent<CustomFormComponentInputProps>>;
+    bulkActionsRegistry: Map<string, BulkAction[]>;
 }
-
-export type GlobalRegistryKey = keyof GlobalRegistryContents;

package/src/lib/hooks/use-page-block.tsx

@@ -0,0 +1,10 @@
+import { PageBlockContext } from '@/framework/layout-engine/page-block-provider.js';
+import { useContext } from 'react';
+
+export function usePageBlock() {
+    const pageBlock = useContext(PageBlockContext);
+    if (!pageBlock) {
+        throw new Error('PageBlockProvider not found');
+    }
+    return pageBlock;
+}

package/src/lib/index.ts

@@ -11,12 +11,13 @@ export * from './components/data-input/facet-value-input.js';
 export * from './components/data-input/money-input.js';
 export * from './components/data-input/richt-text-input.js';
 export * from './components/data-table/add-filter-menu.js';
+export * from './components/data-table/data-table-bulk-action-item.js';
+export * from './components/data-table/data-table-bulk-actions.js';
 export * from './components/data-table/data-table-column-header.js';
 export * from './components/data-table/data-table-faceted-filter.js';
 export * from './components/data-table/data-table-filter-badge.js';
 export * from './components/data-table/data-table-filter-dialog.js';
 export * from './components/data-table/data-table-pagination.js';
-export * from './components/data-table/data-table-types.js';
 export * from './components/data-table/data-table-view-options.js';
 export * from './components/data-table/data-table.js';
 export * from './components/data-table/filters/data-table-boolean-filter.js';
@@ -26,6 +27,7 @@ export * from './components/data-table/filters/data-table-number-filter.js';
 export * from './components/data-table/filters/data-table-string-filter.js';
 export * from './components/data-table/human-readable-operator.js';
 export * from './components/data-table/refresh-button.js';
+export * from './components/data-table/types.js';
 export * from './components/layout/app-layout.js';
 export * from './components/layout/app-sidebar.js';
 export * from './components/layout/channel-switcher.js';
@@ -137,6 +139,8 @@ export * from './framework/dashboard-widget/orders-summary/index.js';
 export * from './framework/dashboard-widget/orders-summary/order-summary-widget.graphql.js';
 export * from './framework/dashboard-widget/types.js';
 export * from './framework/dashboard-widget/widget-extensions.js';
+export * from './framework/data-table/data-table-extensions.js';
+export * from './framework/data-table/data-table-types.js';
 export * from './framework/defaults.js';
 export * from './framework/document-introspection/add-custom-fields.js';
 export * from './framework/document-introspection/get-document-structure.js';
@@ -150,6 +154,7 @@ export * from './framework/form-engine/form-schema-tools.js';
 export * from './framework/form-engine/use-generated-form.js';
 export * from './framework/layout-engine/layout-extensions.js';
 export * from './framework/layout-engine/location-wrapper.js';
+export * from './framework/layout-engine/page-block-provider.js';
 export * from './framework/layout-engine/page-layout.js';
 export * from './framework/layout-engine/page-provider.js';
 export * from './framework/nav-menu/nav-menu-extensions.js';
@@ -164,12 +169,14 @@ export * from './framework/registry/global-registry.js';
 export * from './framework/registry/registry-types.js';
 export * from './graphql/api.js';
 export * from './graphql/fragments.js';
+export * from './graphql/graphql.js';
 export * from './hooks/use-auth.js';
 export * from './hooks/use-channel.js';
 export * from './hooks/use-custom-field-config.js';
 export * from './hooks/use-grouped-permissions.js';
 export * from './hooks/use-local-format.js';
 export * from './hooks/use-mobile.js';
+export * from './hooks/use-page-block.js';
 export * from './hooks/use-page.js';
 export * from './hooks/use-permissions.js';
 export * from './hooks/use-server-config.js';

package/vite/tests/barrel-exports.spec.ts

@@ -4,14 +4,18 @@ import { describe, expect, it } from 'vitest';
 import { loadVendureConfig } from '../utils/config-loader.js';
 
 describe('detecting plugins in barrel exports', () => {
-    it('should detect plugins in barrel exports', async () => {
-        const result = await loadVendureConfig({
-            tempDir: join(__dirname, './__temp'),
-            vendureConfigPath: join(__dirname, 'barrel-exports', 'vendure-config.ts'),
-        });
+    it(
+        'should detect plugins in barrel exports',
+        async () => {
+            const result = await loadVendureConfig({
+                tempDir: join(__dirname, './__temp'),
+                vendureConfigPath: join(__dirname, 'barrel-exports', 'vendure-config.ts'),
+            });
 
-        expect(result.pluginInfo).toHaveLength(1);
-        expect(result.pluginInfo[0].name).toBe('MyPlugin');
-        expect(result.pluginInfo[0].dashboardEntryPath).toBe('./dashboard/index.tsx');
-    });
+            expect(result.pluginInfo).toHaveLength(1);
+            expect(result.pluginInfo[0].name).toBe('MyPlugin');
+            expect(result.pluginInfo[0].dashboardEntryPath).toBe('./dashboard/index.tsx');
+        },
+        { timeout: 10_000 },
+    );
 });

package/vite/vite-plugin-config.ts

@@ -63,6 +63,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

@@ -12,7 +12,7 @@ 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;
     return {
@@ -52,11 +52,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');
-}