@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

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

@@ -4,14 +4,17 @@ import react from '@vitejs/plugin-react';
 import path from 'path';
 import { PluginOption } from 'vite';
 
+import { PathAdapter } from './types.js';
+import { PackageScannerConfig } from './utils/compiler.js';
 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 { ThemeVariablesPluginOptions, themeVariablesPlugin } from './vite-plugin-theme.js';
+import { dashboardTailwindSourcePlugin } from './vite-plugin-tailwind-source.js';
+import { themeVariablesPlugin, ThemeVariablesPluginOptions } from './vite-plugin-theme.js';
 import { transformIndexHtmlPlugin } from './vite-plugin-transform-index.js';
-import { UiConfigPluginOptions, uiConfigPlugin } from './vite-plugin-ui-config.js';
+import { uiConfigPlugin, UiConfigPluginOptions } from './vite-plugin-ui-config.js';
 
 /**
  * @description
@@ -25,7 +28,47 @@ export type VitePluginVendureDashboardOptions = {
     vendureConfigPath: string | URL;
     /**
      * @description
-     * The name of the exported variable from the Vendure server configuration file.
+     * The {@link PathAdapter} allows you to customize the resolution of paths
+     * in the compiled Vendure source code which is used as part of the
+     * introspection step of building the dashboard.
+     *
+     * It enables support for more complex repository structures, such as
+     * monorepos, where the Vendure server configuration file may not
+     * be located in the root directory of the project.
+     *
+     * If you get compilation errors like "Error loading Vendure config: Cannot find module",
+     * you probably need to provide a custom `pathAdapter` to resolve the paths correctly.
+     *
+     * @example
+     * ```ts
+     * vendureDashboardPlugin({
+     *     tempCompilationDir: join(__dirname, './__vendure-dashboard-temp'),
+     *     pathAdapter: {
+     *         getCompiledConfigPath: ({ inputRootDir, outputPath, configFileName }) => {
+     *             const projectName = inputRootDir.split('/libs/')[1].split('/')[0];
+     *             const pathAfterProject = inputRootDir.split(`/libs/${projectName}`)[1];
+     *             const compiledConfigFilePath = `${outputPath}/${projectName}${pathAfterProject}`;
+     *             return path.join(compiledConfigFilePath, configFileName);
+     *         },
+     *         transformTsConfigPathMappings: ({ phase, patterns }) => {
+     *             // "loading" phase is when the compiled Vendure code is being loaded by
+     *             // the plugin, in order to introspect the configuration of your app.
+     *             if (phase === 'loading') {
+     *                 return patterns.map((p) =>
+     *                     p.replace('libs/', '').replace(/.ts$/, '.js'),
+     *                 );
+     *             }
+     *             return patterns;
+     *         },
+     *     },
+     *     // ...
+     * }),
+     * ```
+     */
+    pathAdapter?: PathAdapter;
+    /**
+     * @description
+     * The name of the exported variable from the Vendure server configuration file, e.g. `config`.
      * This is only required if the plugin is unable to auto-detect the name of the exported variable.
      */
     vendureConfigExport?: string;
@@ -33,17 +76,16 @@ export type VitePluginVendureDashboardOptions = {
      * @description
      * The path to the directory where the generated GraphQL Tada files will be output.
      */
-    gqlTadaOutputPath?: string;
+    gqlOutputPath?: string;
     tempCompilationDir?: string;
     disableTansStackRouterPlugin?: boolean;
     /**
      * @description
-     * If set to `true`, compilation errors during the build process will be reported and
-     * the build will fail.
-     *
-     * @default false
+     * Allows you to customize the location of node_modules & glob patterns used to scan for potential
+     * Vendure plugins installed as npm packages. If not provided, the compiler will attempt to guess
+     * the location based on the location of the `@vendure/core` package.
      */
-    reportCompilationErrors?: boolean;
+    pluginPackageScanner?: PackageScannerConfig;
 } & UiConfigPluginOptions &
     ThemeVariablesPluginOptions;
 
@@ -69,7 +111,7 @@ export function vendureDashboardPlugin(options: VitePluginVendureDashboardOption
             : [
                   TanStackRouterVite({
                       autoCodeSplitting: true,
-                      routeFileIgnorePattern: '.graphql.ts|components',
+                      routeFileIgnorePattern: '.graphql.ts|components|hooks|utils',
                       routesDirectory: path.join(packageRoot, 'src/app/routes'),
                       generatedRouteTree: path.join(packageRoot, 'src/app/routeTree.gen.ts'),
                   }),
@@ -80,18 +122,20 @@ export function vendureDashboardPlugin(options: VitePluginVendureDashboardOption
             // },
         }),
         themeVariablesPlugin({ theme: options.theme }),
+        dashboardTailwindSourcePlugin(),
         tailwindcss(),
         configLoaderPlugin({
             vendureConfigPath: normalizedVendureConfigPath,
-            tempDir,
-            reportCompilationErrors: options.reportCompilationErrors,
+            outputPath: tempDir,
+            pathAdapter: options.pathAdapter,
+            pluginPackageScanner: options.pluginPackageScanner,
         }),
         viteConfigPlugin({ packageRoot }),
         adminApiSchemaPlugin(),
-        dashboardMetadataPlugin({ rootDir: tempDir }),
-        uiConfigPlugin({ adminUiConfig: options.adminUiConfig }),
-        ...(options.gqlTadaOutputPath
-            ? [gqlTadaPlugin({ gqlTadaOutputPath: options.gqlTadaOutputPath, tempDir, packageRoot })]
+        dashboardMetadataPlugin(),
+        uiConfigPlugin(options),
+        ...(options.gqlOutputPath
+            ? [gqlTadaPlugin({ gqlTadaOutputPath: options.gqlOutputPath, tempDir, packageRoot })]
             : []),
         transformIndexHtmlPlugin(),
     ];

package/dist/plugin/utils/ast-utils.js

@@ -1,96 +0,0 @@
-import path from 'path';
-import ts from 'typescript';
-/**
- * Get the plugin info from the source file.
- */
-export function getPluginInfo(sourceFile) {
-    var _a;
-    const classDeclaration = sourceFile.statements.find(statement => {
-        return (statement.kind === ts.SyntaxKind.ClassDeclaration &&
-            statement.getText().includes('@VendurePlugin('));
-    });
-    if (classDeclaration) {
-        const identifier = classDeclaration.getChildren().find(child => {
-            return child.kind === ts.SyntaxKind.Identifier;
-        });
-        const dashboardEntryPath = (_a = classDeclaration
-            .getChildren()
-            .map(child => {
-            if (child.kind === ts.SyntaxKind.SyntaxList) {
-                const pluginDecorator = child.getChildren().find(_child => {
-                    return _child.kind === ts.SyntaxKind.Decorator;
-                });
-                if (pluginDecorator) {
-                    const callExpression = findFirstDescendantOfKind(pluginDecorator, ts.SyntaxKind.CallExpression);
-                    if (callExpression) {
-                        const objectLiteral = findFirstDescendantOfKind(callExpression, ts.SyntaxKind.ObjectLiteralExpression);
-                        if (objectLiteral && ts.isObjectLiteralExpression(objectLiteral)) {
-                            // Now find the specific 'dashboard' property
-                            const dashboardProperty = objectLiteral.properties.find(prop => { var _a; return ts.isPropertyAssignment(prop) && ((_a = prop.name) === null || _a === void 0 ? void 0 : _a.getText()) === 'dashboard'; });
-                            if (dashboardProperty &&
-                                ts.isPropertyAssignment(dashboardProperty) &&
-                                ts.isStringLiteral(dashboardProperty.initializer)) {
-                                const dashboardPath = dashboardProperty.initializer.text;
-                                return dashboardPath;
-                            }
-                        }
-                    }
-                }
-            }
-        })
-            .filter(Boolean)) === null || _a === void 0 ? void 0 : _a[0];
-        if (identifier) {
-            return {
-                name: identifier.getText(),
-                pluginPath: path.dirname(sourceFile.fileName),
-                dashboardEntryPath,
-            };
-        }
-    }
-}
-/**
- * Given the AST of a TypeScript file, finds the name of the variable exported as VendureConfig.
- */
-export function findConfigExport(sourceFile) {
-    let exportedSymbolName;
-    function visit(node) {
-        var _a;
-        if (ts.isVariableStatement(node) &&
-            ((_a = node.modifiers) === null || _a === void 0 ? void 0 : _a.some(m => m.kind === ts.SyntaxKind.ExportKeyword))) {
-            node.declarationList.declarations.forEach(declaration => {
-                if (ts.isVariableDeclaration(declaration)) {
-                    const typeNode = declaration.type;
-                    if (typeNode && ts.isTypeReferenceNode(typeNode)) {
-                        const typeName = typeNode.typeName;
-                        if (ts.isIdentifier(typeName) && typeName.text === 'VendureConfig') {
-                            if (ts.isIdentifier(declaration.name)) {
-                                exportedSymbolName = declaration.name.text;
-                            }
-                        }
-                    }
-                }
-            });
-        }
-        ts.forEachChild(node, visit);
-    }
-    visit(sourceFile);
-    return exportedSymbolName;
-}
-function findFirstDescendantOfKind(node, kind) {
-    let foundNode;
-    function visit(_node) {
-        if (foundNode) {
-            // Stop searching if we already found it
-            return;
-        }
-        if (_node.kind === kind) {
-            foundNode = _node;
-            return;
-        }
-        // Recursively visit children
-        ts.forEachChild(_node, visit);
-    }
-    // Start the traversal from the initial node's children
-    ts.forEachChild(node, visit);
-    return foundNode;
-}

package/dist/plugin/utils/ast-utils.spec.js

@@ -1,120 +0,0 @@
-import ts from 'typescript';
-import { describe, expect, it } from 'vitest';
-import { findConfigExport, getPluginInfo } from './ast-utils.js';
-describe('getPluginInfo', () => {
-    it('should return undefined when no plugin class is found', () => {
-        const sourceText = `
-            class NotAPlugin {
-                constructor() {}
-            }
-        `;
-        const sourceFile = ts.createSourceFile('path/to/test.ts', sourceText, ts.ScriptTarget.Latest, true);
-        const result = getPluginInfo(sourceFile);
-        expect(result).toBeUndefined();
-    });
-    it('should return plugin info when a valid plugin class is found', () => {
-        const sourceText = `
-            @VendurePlugin({
-                imports: [],
-                providers: []
-            })
-            class TestPlugin {
-                constructor() {}
-            }
-        `;
-        const sourceFile = ts.createSourceFile('path/to/test.ts', sourceText, ts.ScriptTarget.Latest, true);
-        const result = getPluginInfo(sourceFile);
-        expect(result).toEqual({
-            name: 'TestPlugin',
-            pluginPath: 'path/to',
-            dashboardEntryPath: undefined,
-        });
-    });
-    it('should handle multiple classes but only return the plugin one', () => {
-        const sourceText = `
-            class NotAPlugin {
-                constructor() {}
-            }
-
-            @VendurePlugin({
-                imports: [],
-                providers: []
-            })
-            class TestPlugin {
-                constructor() {}
-            }
-
-            class AnotherClass {
-                constructor() {}
-            }
-        `;
-        const sourceFile = ts.createSourceFile('path/to/test.ts', sourceText, ts.ScriptTarget.Latest, true);
-        const result = getPluginInfo(sourceFile);
-        expect(result).toEqual({
-            name: 'TestPlugin',
-            pluginPath: 'path/to',
-            dashboardEntryPath: undefined,
-        });
-    });
-    it('should determine the dashboard entry path when it is provided', () => {
-        const sourceText = `
-            @VendurePlugin({
-                imports: [],
-                providers: [],
-                dashboard: './dashboard/index.tsx',
-            })
-            class TestPlugin {
-                constructor() {}
-            }
-        `;
-        const sourceFile = ts.createSourceFile('path/to/test.ts', sourceText, ts.ScriptTarget.Latest, true);
-        const result = getPluginInfo(sourceFile);
-        expect(result).toEqual({
-            name: 'TestPlugin',
-            pluginPath: 'path/to',
-            dashboardEntryPath: './dashboard/index.tsx',
-        });
-    });
-});
-describe('findConfigExport', () => {
-    it('should return undefined when no VendureConfig export is found', () => {
-        const sourceText = `
-            export const notConfig = {
-                some: 'value'
-            };
-        `;
-        const sourceFile = ts.createSourceFile('path/to/test.ts', sourceText, ts.ScriptTarget.Latest, true);
-        const result = findConfigExport(sourceFile);
-        expect(result).toBeUndefined();
-    });
-    it('should find exported variable with VendureConfig type', () => {
-        const sourceText = `
-            import { VendureConfig } from '@vendure/core';
-
-            export const config: VendureConfig = {
-                authOptions: {
-                    tokenMethod: 'bearer'
-                }
-            };
-        `;
-        const sourceFile = ts.createSourceFile('path/to/test.ts', sourceText, ts.ScriptTarget.Latest, true);
-        const result = findConfigExport(sourceFile);
-        expect(result).toBe('config');
-    });
-    it('should find exported variable with VendureConfig type among other exports', () => {
-        const sourceText = `
-            import { VendureConfig } from '@vendure/core';
-
-            export const otherExport = 'value';
-            export const config: VendureConfig = {
-                authOptions: {
-                    tokenMethod: 'bearer'
-                }
-            };
-            export const anotherExport = 123;
-        `;
-        const sourceFile = ts.createSourceFile('path/to/test.ts', sourceText, ts.ScriptTarget.Latest, true);
-        const result = findConfigExport(sourceFile);
-        expect(result).toBe('config');
-    });
-});

package/dist/plugin/utils/config-loader.d.ts

@@ -1,52 +0,0 @@
-import { VendureConfig } from '@vendure/core';
-type Logger = {
-    info: (message: string) => void;
-    warn: (message: string) => void;
-    debug: (message: string) => void;
-};
-export type PluginInfo = {
-    name: string;
-    pluginPath: string;
-    dashboardEntryPath: string | undefined;
-};
-export interface ConfigLoaderOptions {
-    vendureConfigPath: string;
-    tempDir: string;
-    vendureConfigExport?: string;
-    logger?: Logger;
-    reportCompilationErrors?: boolean;
-}
-export interface LoadVendureConfigResult {
-    vendureConfig: VendureConfig;
-    exportedSymbolName: string;
-    pluginInfo: PluginInfo[];
-}
-/**
- * @description
- * This function compiles the given Vendure config file and any imported relative files (i.e.
- * project files, not npm packages) into a temporary directory, and returns the compiled config.
- *
- * The reason we need to do this is that Vendure code makes use of TypeScript experimental decorators
- * (e.g. for NestJS decorators and TypeORM column decorators) which are not supported by esbuild.
- *
- * In Vite, when we load some TypeScript into the top-level Vite config file (in the end-user project), Vite
- * internally uses esbuild to temporarily compile that TypeScript code. Unfortunately, esbuild does not support
- * these experimental decorators, errors will be thrown as soon as e.g. a TypeORM column decorator is encountered.
- *
- * To work around this, we compile the Vendure config file and all its imports using the TypeScript compiler,
- * which fully supports these experimental decorators. The compiled files are then loaded by Vite, which is able
- * to handle the compiled JavaScript output.
- */
-export declare function loadVendureConfig(options: ConfigLoaderOptions): Promise<LoadVendureConfigResult>;
-type CompileFileOptions = {
-    inputRootDir: string;
-    inputPath: string;
-    outputDir: string;
-    logger?: Logger;
-    compiledFiles?: Set<string>;
-    isRoot?: boolean;
-    pluginInfo?: PluginInfo[];
-    reportCompilationErrors?: boolean;
-};
-export declare function compileFile({ inputRootDir, inputPath, outputDir, logger, compiledFiles, isRoot, pluginInfo, reportCompilationErrors, }: CompileFileOptions): Promise<PluginInfo[]>;
-export {};