@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

package/vite/tests/path-alias.spec.ts

@@ -0,0 +1,61 @@
+import { rm } from 'node:fs/promises';
+import { join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+import { compile } from '../utils/compiler.js';
+import { debugLogger, noopLogger } from '../utils/logger.js';
+
+describe('detecting plugins using tsconfig path aliases', () => {
+    it(
+        'should detect plugins using tsconfig path aliases',
+        async () => {
+            const tempDir = join(__dirname, './__temp/path-alias');
+            await rm(tempDir, { recursive: true, force: true });
+
+            const result = await compile({
+                outputPath: tempDir,
+                vendureConfigPath: join(__dirname, 'fixtures-path-alias', 'vendure-config.ts'),
+                logger: process.env.LOG ? debugLogger : noopLogger,
+                pathAdapter: {
+                    transformTsConfigPathMappings: ({ phase, patterns }) => {
+                        if (phase === 'loading') {
+                            return patterns.map(pattern => {
+                                return pattern.replace(/\/fixtures-path-alias/, '').replace(/.ts$/, '.js');
+                            });
+                        } else {
+                            return patterns;
+                        }
+                    },
+                },
+            });
+
+            const plugins = result.pluginInfo.sort((a, b) => a.name.localeCompare(b.name));
+
+            expect(plugins).toHaveLength(3);
+
+            expect(plugins[0].name).toBe('JsAliasedPlugin');
+            expect(plugins[0].dashboardEntryPath).toBe('./dashboard/index.tsx');
+            expect(plugins[0].sourcePluginPath).toBe(
+                join(__dirname, 'fixtures-path-alias', 'js-aliased', 'src', 'js-aliased.plugin.ts'),
+            );
+            expect(plugins[0].pluginPath).toBe(join(tempDir, 'js-aliased', 'src', 'js-aliased.plugin.js'));
+
+            expect(plugins[1].name).toBe('StarAliasedPlugin');
+            expect(plugins[1].dashboardEntryPath).toBe('./dashboard/index.tsx');
+            expect(plugins[1].sourcePluginPath).toBe(
+                join(__dirname, 'fixtures-path-alias', 'star-aliased', 'src', 'star-aliased.plugin.ts'),
+            );
+            expect(plugins[1].pluginPath).toBe(
+                join(tempDir, 'star-aliased', 'src', 'star-aliased.plugin.js'),
+            );
+
+            expect(plugins[2].name).toBe('TsAliasedPlugin');
+            expect(plugins[2].dashboardEntryPath).toBe('./dashboard/index.tsx');
+            expect(plugins[2].sourcePluginPath).toBe(
+                join(__dirname, 'fixtures-path-alias', 'ts-aliased', 'src', 'ts-aliased.plugin.ts'),
+            );
+            expect(plugins[2].pluginPath).toBe(join(tempDir, 'ts-aliased', 'src', 'ts-aliased.plugin.js'));
+        },
+        { timeout: 10_000 },
+    );
+});

package/vite/tests/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "module": "NodeNext",
+    "sourceMap": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@plugins/*": [
+        "./fixtures-path-alias/*"
+      ],
+      "@other/ts-aliased": [
+        "./fixtures-path-alias/ts-aliased/index.ts"
+      ],
+      "@other/js-aliased": [
+        "./fixtures-path-alias/js-aliased/index.js"
+      ]
+    }
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}

package/vite/types.ts

@@ -0,0 +1,44 @@
+export type Logger = {
+    info: (message: string) => void;
+    warn: (message: string) => void;
+    debug: (message: string) => void;
+    error: (message: string) => void;
+};
+
+export type PluginInfo = {
+    name: string;
+    pluginPath: string;
+    dashboardEntryPath: string | undefined;
+    /** The original source path of the plugin, only set for local plugins that are compiled */
+    sourcePluginPath?: string;
+};
+
+export type GetCompiledConfigPathFn = (params: {
+    inputRootDir: string;
+    outputPath: string;
+    configFileName: string;
+}) => string;
+
+export type TransformTsConfigPathMappingsFn = (params: {
+    phase: 'compiling' | 'loading';
+    alias: string;
+    patterns: string[];
+}) => string[];
+
+/**
+ * @description
+ * The PathAdapter interface allows customization of how paths are handled
+ * when compiling the Vendure config and its imports.
+ */
+export interface PathAdapter {
+    /**
+     * @description
+     * A function to determine the path to the compiled Vendure config file.
+     */
+    getCompiledConfigPath?: GetCompiledConfigPathFn;
+    /**
+     * If your project makes use of the TypeScript `paths` configuration, the compiler will
+     * attempt to use these paths when compiling the Vendure config and its imports.
+     */
+    transformTsConfigPathMappings?: TransformTsConfigPathMappingsFn;
+}

package/vite/utils/ast-utils.spec.ts

@@ -1,86 +1,7 @@
 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',
-        });
-    });
-});
+import { findConfigExport } from './ast-utils.js';
 
 describe('findConfigExport', () => {
     it('should return undefined when no VendureConfig export is found', () => {

package/vite/utils/ast-utils.ts

@@ -1,70 +1,5 @@
-import path from 'path';
 import ts from 'typescript';
 
-import { PluginInfo } from './config-loader.js';
-
-/**
- * Get the plugin info from the source file.
- */
-export function getPluginInfo(sourceFile: ts.SourceFile): PluginInfo | undefined {
-    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 = 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 =>
-                                        ts.isPropertyAssignment(prop) && prop.name?.getText() === 'dashboard',
-                                );
-
-                                if (
-                                    dashboardProperty &&
-                                    ts.isPropertyAssignment(dashboardProperty) &&
-                                    ts.isStringLiteral(dashboardProperty.initializer)
-                                ) {
-                                    const dashboardPath = dashboardProperty.initializer.text;
-                                    return dashboardPath;
-                                }
-                            }
-                        }
-                    }
-                }
-            })
-            .filter(Boolean)?.[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.
  */
@@ -96,24 +31,3 @@ export function findConfigExport(sourceFile: ts.SourceFile): string | undefined
     visit(sourceFile);
     return exportedSymbolName;
 }
-
-function findFirstDescendantOfKind(node: ts.Node, kind: ts.SyntaxKind): ts.Node | undefined {
-    let foundNode: ts.Node | undefined;
-
-    function visit(_node: ts.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/vite/utils/compiler.ts

@@ -0,0 +1,244 @@
+import { VendureConfig } from '@vendure/core';
+import fs from 'fs-extra';
+import path from 'path';
+import tsConfigPaths from 'tsconfig-paths';
+import { RegisterParams } from 'tsconfig-paths/lib/register.js';
+import * as ts from 'typescript';
+import { pathToFileURL } from 'url';
+
+import { Logger, PathAdapter, PluginInfo } from '../types.js';
+
+import { findConfigExport } from './ast-utils.js';
+import { noopLogger } from './logger.js';
+import { discoverPlugins } from './plugin-discovery.js';
+import { findTsConfigPaths } from './tsconfig-utils.js';
+
+const defaultPathAdapter: Required<PathAdapter> = {
+    getCompiledConfigPath: ({ outputPath, configFileName }) => path.join(outputPath, configFileName),
+    transformTsConfigPathMappings: ({ patterns }) => patterns,
+};
+
+export interface PackageScannerConfig {
+    nodeModulesRoot?: string;
+}
+
+export interface CompilerOptions {
+    vendureConfigPath: string;
+    outputPath: string;
+    pathAdapter?: PathAdapter;
+    logger?: Logger;
+    pluginPackageScanner?: PackageScannerConfig;
+}
+
+export interface CompileResult {
+    vendureConfig: VendureConfig;
+    exportedSymbolName: string;
+    pluginInfo: PluginInfo[];
+}
+
+/**
+ * Compiles TypeScript files and discovers Vendure plugins in both the compiled output
+ * and in node_modules.
+ */
+export async function compile(options: CompilerOptions): Promise<CompileResult> {
+    const { vendureConfigPath, outputPath, pathAdapter, logger = noopLogger, pluginPackageScanner } = options;
+    const getCompiledConfigPath =
+        pathAdapter?.getCompiledConfigPath ?? defaultPathAdapter.getCompiledConfigPath;
+    const transformTsConfigPathMappings =
+        pathAdapter?.transformTsConfigPathMappings ?? defaultPathAdapter.transformTsConfigPathMappings;
+
+    // 1. Compile TypeScript files
+    const compileStart = Date.now();
+    await compileTypeScript({
+        inputPath: vendureConfigPath,
+        outputPath,
+        logger,
+        transformTsConfigPathMappings,
+    });
+    logger.info(`TypeScript compilation completed in ${Date.now() - compileStart}ms`);
+
+    // 2. Discover plugins
+    const analyzePluginsStart = Date.now();
+    const plugins = await discoverPlugins({
+        vendureConfigPath,
+        transformTsConfigPathMappings,
+        logger,
+        outputPath,
+        pluginPackageScanner,
+    });
+    logger.info(
+        `Analyzed plugins and found ${plugins.length} dashboard extensions in ${Date.now() - analyzePluginsStart}ms`,
+    );
+
+    // 3. Load the compiled config
+    const configFileName = path.basename(vendureConfigPath);
+    const compiledConfigFilePath = pathToFileURL(
+        getCompiledConfigPath({
+            inputRootDir: path.dirname(vendureConfigPath),
+            outputPath,
+            configFileName,
+        }),
+    ).href.replace(/.ts$/, '.js');
+
+    // Create package.json with type commonjs
+    await fs.writeFile(
+        path.join(outputPath, 'package.json'),
+        JSON.stringify({ type: 'commonjs', private: true }, null, 2),
+    );
+
+    // Find the exported config symbol
+    const sourceFile = ts.createSourceFile(
+        vendureConfigPath,
+        await fs.readFile(vendureConfigPath, 'utf-8'),
+        ts.ScriptTarget.Latest,
+        true,
+    );
+    const exportedSymbolName = findConfigExport(sourceFile);
+    if (!exportedSymbolName) {
+        throw new Error(
+            `Could not find a variable exported as VendureConfig. Please specify the name of the exported variable.`,
+        );
+    }
+
+    const loadConfigStart = Date.now();
+
+    await registerTsConfigPaths({
+        outputPath,
+        configPath: vendureConfigPath,
+        logger,
+        phase: 'loading',
+        transformTsConfigPathMappings,
+    });
+
+    let config: any;
+    try {
+        config = await import(compiledConfigFilePath).then(m => m[exportedSymbolName]);
+    } catch (e) {
+        logger.error(`Error loading config: ${e instanceof Error ? e.message : String(e)}`);
+    }
+    if (!config) {
+        throw new Error(
+            `Could not find a variable exported as VendureConfig with the name "${exportedSymbolName}".`,
+        );
+    }
+    logger.debug(`Loaded config in ${Date.now() - loadConfigStart}ms`);
+
+    return { vendureConfig: config, exportedSymbolName, pluginInfo: plugins };
+}
+
+/**
+ * Compiles TypeScript files to JavaScript
+ */
+async function compileTypeScript({
+    inputPath,
+    outputPath,
+    logger,
+    transformTsConfigPathMappings,
+}: {
+    inputPath: string;
+    outputPath: string;
+    logger: Logger;
+    transformTsConfigPathMappings: Required<PathAdapter>['transformTsConfigPathMappings'];
+}): Promise<void> {
+    await fs.ensureDir(outputPath);
+
+    // Find tsconfig paths first
+    const tsConfigInfo = await findTsConfigPaths(
+        inputPath,
+        logger,
+        'compiling',
+        transformTsConfigPathMappings,
+    );
+
+    const compilerOptions: ts.CompilerOptions = {
+        target: ts.ScriptTarget.ES2020,
+        module: ts.ModuleKind.CommonJS,
+        moduleResolution: ts.ModuleResolutionKind.Node10, // More explicit CJS resolution
+        experimentalDecorators: true,
+        emitDecoratorMetadata: true,
+        esModuleInterop: true,
+        skipLibCheck: true,
+        noEmit: false,
+        // Speed optimizations
+        noEmitOnError: false, // Emit output even if there are errors
+        noImplicitAny: false, // Don't require implicit any
+        noUnusedLocals: false, // Don't check for unused locals
+        noUnusedParameters: false, // Don't check for unused parameters
+        allowJs: true,
+        checkJs: false, // Don't type check JS files
+        skipDefaultLibCheck: true, // Skip checking .d.ts files
+        isolatedModules: false, // Need to check cross-file references to compile dependencies
+        incremental: false, // Don't use incremental compilation (faster for one-off builds)
+        resolveJsonModule: true,
+        preserveSymlinks: false,
+        outDir: outputPath,
+    };
+
+    logger.debug(`Compiling ${inputPath} to ${outputPath} using TypeScript...`);
+
+    // Add path mappings if found
+    if (tsConfigInfo) {
+        // We need to set baseUrl and paths for TypeScript to resolve the imports
+        compilerOptions.baseUrl = tsConfigInfo.baseUrl;
+        compilerOptions.paths = tsConfigInfo.paths;
+        // This is critical - it tells TypeScript to preserve the paths in the output
+        // compilerOptions.rootDir = tsConfigInfo.baseUrl;
+    }
+
+    logger.debug(`tsConfig paths: ${JSON.stringify(tsConfigInfo?.paths, null, 2)}`);
+    logger.debug(`tsConfig baseUrl: ${tsConfigInfo?.baseUrl ?? 'UNKNOWN'}`);
+
+    // Create a custom transformer to rewrite the output paths
+    const customTransformers: ts.CustomTransformers = {
+        after: [
+            context => {
+                return sourceFile => {
+                    // Only transform files that are not the entry point
+                    if (sourceFile.fileName === inputPath) {
+                        return sourceFile;
+                    }
+                    sourceFile.fileName = path.join(outputPath, path.basename(sourceFile.fileName));
+                    return sourceFile;
+                };
+            },
+        ],
+    };
+
+    const program = ts.createProgram([inputPath], compilerOptions);
+    const emitResult = program.emit(undefined, undefined, undefined, undefined, customTransformers);
+
+    // Only log actual emit errors, not type errors
+    if (emitResult.emitSkipped) {
+        for (const diagnostic of emitResult.diagnostics) {
+            if (diagnostic.file && diagnostic.start !== undefined) {
+                const { line, character } = ts.getLineAndCharacterOfPosition(
+                    diagnostic.file,
+                    diagnostic.start,
+                );
+                const message = ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n');
+                logger.warn(`${diagnostic.file.fileName} (${line + 1},${character + 1}): ${message}`);
+            } else {
+                logger.warn(ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n'));
+            }
+        }
+    }
+}
+
+async function registerTsConfigPaths(options: {
+    outputPath: string;
+    configPath: string;
+    logger: Logger;
+    phase: 'compiling' | 'loading';
+    transformTsConfigPathMappings: Required<PathAdapter>['transformTsConfigPathMappings'];
+}) {
+    const { outputPath, configPath, logger, phase, transformTsConfigPathMappings } = options;
+    const tsConfigInfo = await findTsConfigPaths(configPath, logger, phase, transformTsConfigPathMappings);
+    if (tsConfigInfo) {
+        const params: RegisterParams = {
+            baseUrl: outputPath,
+            paths: tsConfigInfo.paths,
+        };
+        logger.debug(`Registering tsconfig paths: ${JSON.stringify(params, null, 2)}`);
+        tsConfigPaths.register(params);
+    }
+}