@vendure/dashboard 3.2.0

package/vite/vite-plugin-admin-api-schema.ts

@@ -0,0 +1,141 @@
+import { GraphQLTypesLoader } from '@nestjs/graphql';
+import {
+    getConfig,
+    getFinalVendureSchema,
+    resetConfig,
+    runPluginConfigurations,
+    setConfig,
+    VENDURE_ADMIN_API_TYPE_PATHS,
+} from '@vendure/core';
+import {
+    buildSchema,
+    GraphQLList,
+    GraphQLNonNull,
+    GraphQLObjectType,
+    GraphQLSchema,
+    GraphQLType,
+    isEnumType,
+    isInputObjectType,
+    isObjectType,
+    isScalarType,
+} from 'graphql';
+import { Plugin } from 'vite';
+
+import { generateSchema } from './schema-generator.js';
+import { ConfigLoaderApi, getConfigLoaderApi } from './vite-plugin-config-loader.js';
+
+export type FieldInfoTuple = readonly [
+    type: string,
+    nullable: boolean,
+    list: boolean,
+    isPaginatedList: boolean,
+];
+
+export interface SchemaInfo {
+    types: {
+        [typename: string]: {
+            [fieldname: string]: FieldInfoTuple;
+        };
+    };
+    inputs: {
+        [typename: string]: {
+            [fieldname: string]: FieldInfoTuple;
+        };
+    };
+    scalars: string[];
+    enums: {
+        [typename: string]: string[];
+    };
+}
+
+const virtualModuleId = 'virtual:admin-api-schema';
+const resolvedVirtualModuleId = `\0${virtualModuleId}`;
+
+export function adminApiSchemaPlugin(): Plugin {
+    let configLoaderApi: ConfigLoaderApi;
+    let schemaInfo: SchemaInfo;
+
+    return {
+        name: 'vendure:admin-api-schema',
+        configResolved({ plugins }) {
+            configLoaderApi = getConfigLoaderApi(plugins);
+        },
+        async buildStart() {
+            const vendureConfig = await configLoaderApi.getVendureConfig();
+            if (!schemaInfo) {
+                const safeSchema = await generateSchema({ vendureConfig });
+                schemaInfo = generateSchemaInfo(safeSchema);
+            }
+        },
+        resolveId(id) {
+            if (id === virtualModuleId) {
+                return resolvedVirtualModuleId;
+            }
+        },
+        load(id) {
+            if (id === resolvedVirtualModuleId) {
+                return `
+                    export const schemaInfo = ${JSON.stringify(schemaInfo)};
+                `;
+            }
+        },
+    };
+}
+
+function getTypeInfo(type: GraphQLType) {
+    let nullable = true;
+    let list = false;
+    let isPaginatedList = false;
+
+    // Unwrap NonNull
+    if (type instanceof GraphQLNonNull) {
+        nullable = false;
+        type = type.ofType;
+    }
+
+    // Unwrap List
+    if (type instanceof GraphQLList) {
+        list = true;
+        type = type.ofType;
+    }
+
+    if (type instanceof GraphQLObjectType) {
+        if (type.getInterfaces().some(i => i.name === 'PaginatedList')) {
+            isPaginatedList = true;
+        }
+    }
+
+    return [type.toString().replace(/!$/, ''), nullable, list, isPaginatedList] as const;
+}
+
+function generateSchemaInfo(schema: GraphQLSchema): SchemaInfo {
+    const types = schema.getTypeMap();
+    const result: SchemaInfo = { types: {}, inputs: {}, scalars: [], enums: {} };
+
+    Object.values(types).forEach(type => {
+        if (isObjectType(type)) {
+            const fields = type.getFields();
+            result.types[type.name] = {};
+
+            Object.entries(fields).forEach(([fieldName, field]) => {
+                result.types[type.name][fieldName] = getTypeInfo(field.type);
+            });
+        }
+        if (isInputObjectType(type)) {
+            const fields = type.getFields();
+            result.inputs[type.name] = {};
+
+            Object.entries(fields).forEach(([fieldName, field]) => {
+                result.inputs[type.name][fieldName] = getTypeInfo(field.type);
+            });
+        }
+        if (isScalarType(type)) {
+            result.scalars.push(type.name);
+        }
+        if (isEnumType(type)) {
+            result.enums[type.name] = type.getValues().map(v => v.value);
+        }
+    });
+
+    return result;
+}

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

@@ -0,0 +1,64 @@
+import { VendureConfig } from '@vendure/core';
+import { Plugin } from 'vite';
+
+import { ConfigLoaderOptions, loadVendureConfig } from './config-loader.js';
+
+export interface ConfigLoaderApi {
+    getVendureConfig(): Promise<VendureConfig>;
+}
+
+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 vendureConfig: VendureConfig;
+    const onConfigLoaded: Array<() => void> = [];
+    return {
+        name: configLoaderName,
+        async buildStart() {
+            this.info(`Loading Vendure config...`);
+            try {
+                const result = await loadVendureConfig({
+                    tempDir: options.tempDir,
+                    vendureConfigPath: options.vendureConfigPath,
+                    vendureConfigExport: options.vendureConfigExport,
+                });
+                vendureConfig = result.vendureConfig;
+                this.info(`Vendure config loaded (using export "${result.exportedSymbolName}")`);
+            } catch (e: unknown) {
+                if (e instanceof Error) {
+                    this.error(`Error loading Vendure config: ${e.message}`);
+                }
+            }
+            onConfigLoaded.forEach(fn => fn());
+        },
+        api: {
+            getVendureConfig(): Promise<VendureConfig> {
+                if (vendureConfig) {
+                    return Promise.resolve(vendureConfig);
+                } else {
+                    return new Promise<VendureConfig>(resolve => {
+                        onConfigLoaded.push(() => {
+                            resolve(vendureConfig);
+                        });
+                    });
+                }
+            },
+        } satisfies ConfigLoaderApi,
+    };
+}
+
+/**
+ * Inter-plugin dependencies implemented following the pattern given here:
+ * https://rollupjs.org/plugin-development/#direct-plugin-communication
+ */
+export function getConfigLoaderApi(plugins: readonly Plugin[]): ConfigLoaderApi {
+    const parentPlugin = plugins.find(plugin => plugin.name === configLoaderName);
+    if (!parentPlugin) {
+        throw new Error(`This plugin depends on the "${configLoaderName}" plugin.`);
+    }
+    return parentPlugin.api as ConfigLoaderApi;
+}

package/vite/vite-plugin-config.ts

@@ -0,0 +1,42 @@
+import path from 'path';
+import { Plugin, UserConfig } from 'vite';
+
+export function viteConfigPlugin({ packageRoot }: { packageRoot: string }): Plugin {
+    return {
+        name: 'vendure:vite-config-plugin',
+        config: (config: UserConfig) => {
+            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 = {
+                ...config.optimizeDeps,
+                exclude: [
+                    ...(config.optimizeDeps?.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: [
+                    ...(config.optimizeDeps?.include || []),
+                    '@/components > recharts',
+                    '@/components > react-dropzone',
+                ],
+            };
+            return config;
+        },
+    };
+}

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

@@ -0,0 +1,58 @@
+import { VendureConfig } from '@vendure/core';
+import { getPluginDashboardExtensions } from '@vendure/core';
+import path from 'path';
+import { Plugin } from 'vite';
+
+import { ConfigLoaderApi, 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: { rootDir: string }): Plugin {
+    let configLoaderApi: ConfigLoaderApi;
+    let vendureConfig: VendureConfig;
+    return {
+        name: 'vendure:dashboard-extensions-metadata',
+        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 extensions = getPluginDashboardExtensions(vendureConfig.plugins ?? []);
+                const extensionData: Array<{ importPath: string }> = 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: string, importPath: string): string {
+    const relativePath = path.relative(rootDir, importPath).replace(/\\/g, '/');
+    return relativePath.replace(/\.tsx?$/, '.js');
+}

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

@@ -0,0 +1,62 @@
+import { generateOutput } from '@gql.tada/cli-utils';
+import * as fs from 'fs/promises';
+import { printSchema } from 'graphql';
+import * as path from 'path';
+import { Plugin } from 'vite';
+
+import { generateSchema } from './schema-generator.js';
+import { ConfigLoaderApi, getConfigLoaderApi } from './vite-plugin-config-loader.js';
+
+export function gqlTadaPlugin(options: {
+    gqlTadaOutputPath: string;
+    tempDir: string;
+    packageRoot: string;
+}): Plugin {
+    let configLoaderApi: 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/vite/vite-plugin-theme.ts

@@ -0,0 +1,195 @@
+import { Plugin } from 'vite';
+
+type ThemeColors = {
+    background?: string;
+    foreground?: string;
+    card?: string;
+    'card-foreground'?: string;
+    popover?: string;
+    'popover-foreground'?: string;
+    primary?: string;
+    'primary-foreground'?: string;
+    secondary?: string;
+    'secondary-foreground'?: string;
+    muted?: string;
+    'muted-foreground'?: string;
+    accent?: string;
+    'accent-foreground'?: string;
+    destructive?: string;
+    'destructive-foreground'?: string;
+    success?: string;
+    'success-foreground'?: string;
+    'dev-mode'?: string;
+    'dev-mode-foreground'?: string;
+    border?: string;
+    input?: string;
+    ring?: string;
+    'chart-1'?: string;
+    'chart-2'?: string;
+    'chart-3'?: string;
+    'chart-4'?: string;
+    'chart-5'?: string;
+    radius?: string;
+    sidebar?: string;
+    'sidebar-foreground'?: string;
+    'sidebar-primary'?: string;
+    'sidebar-primary-foreground'?: string;
+    'sidebar-accent'?: string;
+    'sidebar-accent-foreground'?: string;
+    'sidebar-border'?: string;
+    'sidebar-ring'?: string;
+    brand?: string;
+    'brand-lighter'?: string;
+    'brand-darker'?: string;
+    'font-sans'?: string;
+    'font-mono'?: string;
+    [key: string]: string | undefined;
+};
+
+export interface ThemeVariables {
+    light?: ThemeColors;
+    dark?: ThemeColors;
+}
+
+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%)',
+        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%)',
+        brand: '#17c1ff',
+        'brand-lighter': '#e6f9ff',
+        'brand-darker': '#0099ff',
+        'font-sans': "'Geist', 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%)',
+        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%)',
+        brand: '#17c1ff',
+        'brand-lighter': '#e6f9ff',
+        'brand-darker': '#0099ff',
+        'font-sans': "'Geist', sans-serif",
+        'font-mono': "'Geist Mono', monospace",
+    },
+};
+
+export type ThemeVariablesPluginOptions = {
+    theme?: ThemeVariables;
+};
+
+export function themeVariablesPlugin(options: ThemeVariablesPluginOptions): Plugin {
+    const virtualModuleId = 'virtual:admin-theme';
+    const resolvedVirtualModuleId = `\0${virtualModuleId}`;
+
+    return {
+        name: 'vendure:admin-theme',
+        enforce: 'pre', // This ensures our plugin runs before other CSS processors
+        transform(code, id) {
+            // Only transform CSS files
+            if (!id.endsWith('styles.css')) {
+                return null;
+            }
+
+            // Replace the @import 'virtual:admin-theme'; with our theme variables
+            if (
+                code.includes('@import "virtual:admin-theme";') ||
+                code.includes("@import 'virtual:admin-theme';")
+            ) {
+                const lightTheme = options.theme?.light || {};
+                const darkTheme = options.theme?.dark || {};
+
+                // Merge default themes with custom themes
+                const mergedLightTheme = { ...defaultVariables.light, ...lightTheme };
+                const mergedDarkTheme = { ...defaultVariables.dark, ...darkTheme };
+
+                const themeCSS = `
+                    :root {
+                        ${Object.entries(mergedLightTheme)
+                            .filter(([key, value]) => value !== undefined)
+                            .map(([key, value]) => `--${key}: ${value as string};`)
+                            .join('\n')}
+                    }
+
+                    .dark {
+                        ${Object.entries(mergedDarkTheme)
+                            .filter(([key, value]) => value !== undefined)
+                            .map(([key, value]) => `--${key}: ${value as string};`)
+                            .join('\n')}
+                    }
+                `;
+
+                return code.replace(/@import ['"]virtual:admin-theme['"];?/, themeCSS);
+            }
+
+            return null;
+        },
+    };
+}

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

@@ -0,0 +1,60 @@
+import { AdminUiConfig, VendureConfig } from '@vendure/core';
+import path from 'path';
+import { Plugin } from 'vite';
+
+import { getAdminUiConfig } from './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 = {
+    /**
+     * @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 function uiConfigPlugin({ adminUiConfig }: UiConfigPluginOptions): Plugin {
+    let configLoaderApi: ConfigLoaderApi;
+    let vendureConfig: 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: string, importPath: string): string {
+    const relativePath = path.relative(rootDir, importPath).replace(/\\/g, '/');
+    return relativePath.replace(/\.tsx?$/, '.js');
+}