@vendure/dashboard 3.3.6-master-202507041203 → 3.4.0-minor-202506250934

package/README.md

@@ -1,50 +1,13 @@
 # Vendure Dashboard
 
-This is a React-based admin dashboard for Vendure. It is a standalone application that can be extended to suit the
-needs of any Vendure project.
+This is an admin dashboard for managing Vendure applications. It is designed to supersede the existing Admin UI.
+
+Current status: early work in progress
 
 ## Development
 
 Run `npx vite` to start Vite in dev mode.
 
-### Note on internal `@/vdb` imports
-
-You will notice that the dashboard uses internal Vendure Dashboard imports prefixed with `@/vdb`. This is adapted from the
-convention of Shadcn which uses a `@/*` path alias for internal imports.
-
-**Why not just use relative imports?**
-
-The problem with using relative imports is that they are handled differently by Vite when compiling the dashboard. This
-manifests as things like React Context not working correctly. The underlying reason is that Vite will selectively
-pre-compile source code and mixing the imports between alias and relative can result in 2 "versions" of the same code
-being loaded, which causes issues with React Context and other things that rely on a single instance of a module.
-
-For this reason, try to use the `@/vdb` alias for all internal Vendure Dashboard imports to the "src/lib" directory.
-
-This is especially import for hooks (since many of them use React Context) and there is even a pre-commit hook
-that will run [a script](./scripts/check-internal-imports.js) to ensure that you are not using relative imports for
-internal Vendure Dashboard code.
-
-**Type Safety for Consumers**
-
-Because we ship source code in the npm package, consumers need to tell TypeScript how to resolve these internal
-imports by adding the path alias to _their_ `tsconfig.json` file.
-
-```json
-{
-    "compilerOptions": {
-        "paths": {
-            "@/vdb/*": [
-                "./node_modules/@vendure/dashboard/src/lib/*"
-            ]
-        }
-    }
-}
-```
-
-Note: even without that path alias, the vite compilation will still work, but TypeScript types will not resolve correctly
-when developing dashboard extensions.
-
 ## Testing
 
-Run `npm run test` to run tests once, or `npx vitest` to run tests in watch mode
+Run `npm run test` to run tests once, or `npx vitest` to run tests in watch mode

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

@@ -9,77 +9,9 @@ export type PluginInfo = {
     pluginPath: string;
     dashboardEntryPath: string | undefined;
 };
-/**
- * @description
- * The PathAdapter interface allows customization of how paths are handled
- * when compiling the Vendure config and its imports.
- *
- * This is particularly useful in complex project structures, such as monorepos,
- * where the Vendure config file may not be in the root directory,
- * or when you need to transform TypeScript path mappings.
- */
-export interface PathAdapter {
-    /**
-     * @description
-     * A function to determine the path to the compiled Vendure config file. The default implementation
-     * simple joins the output directory with the config file name:
-     *
-     * ```ts
-     * return path.join(outputPath, configFileName)
-     * ```
-     *
-     * However, in some cases with more complex project structures, you may need to
-     * provide a custom implementation to ensure the compiled config file is
-     * correctly located.
-     *
-     * @example
-     * ```ts
-     * 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);
-     * },
-     * ```
-     */
-    getCompiledConfigPath?: (params: {
-        inputRootDir: string;
-        outputPath: string;
-        configFileName: string;
-    }) => string;
-    /**
-     * 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.
-     *
-     * In certain cases, you may need to transform these paths before they are used. For instance,
-     * if your project is a monorepo and the paths are defined relative to the root of the monorepo,
-     * you may need to adjust them to be relative to the output directory where the compiled files are located.
-     *
-     * @example
-     * ```ts
-     * 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;
-     * },
-     * ```
-     * @param params
-     */
-    transformTsConfigPathMappings?: (params: {
-        phase: 'compiling' | 'loading';
-        alias: string;
-        patterns: string[];
-    }) => string[];
-}
 export interface ConfigLoaderOptions {
     vendureConfigPath: string;
     tempDir: string;
-    pathAdapter?: PathAdapter;
     vendureConfigExport?: string;
     logger?: Logger;
     reportCompilationErrors?: boolean;
@@ -110,12 +42,11 @@ type CompileFileOptions = {
     inputRootDir: string;
     inputPath: string;
     outputDir: string;
-    transformTsConfigPathMappings: Required<PathAdapter>['transformTsConfigPathMappings'];
     logger?: Logger;
     compiledFiles?: Set<string>;
     isRoot?: boolean;
     pluginInfo?: PluginInfo[];
     reportCompilationErrors?: boolean;
 };
-export declare function compileFile({ inputRootDir, inputPath, outputDir, transformTsConfigPathMappings, logger, compiledFiles, isRoot, pluginInfo, reportCompilationErrors, }: CompileFileOptions): Promise<PluginInfo[]>;
+export declare function compileFile({ inputRootDir, inputPath, outputDir, logger, compiledFiles, isRoot, pluginInfo, reportCompilationErrors, }: CompileFileOptions): Promise<PluginInfo[]>;
 export {};

package/dist/plugin/utils/config-loader.js

@@ -15,10 +15,6 @@ const defaultLogger = {
         /* noop */
     },
 };
-const defaultPathAdapter = {
-    getCompiledConfigPath: ({ outputPath, configFileName }) => path.join(outputPath, configFileName),
-    transformTsConfigPathMappings: ({ patterns }) => patterns,
-};
 /**
  * @description
  * This function compiles the given Vendure config file and any imported relative files (i.e.
@@ -36,10 +32,7 @@ const defaultPathAdapter = {
  * to handle the compiled JavaScript output.
  */
 export async function loadVendureConfig(options) {
-    var _a, _b;
-    const { vendureConfigPath, vendureConfigExport, tempDir, pathAdapter } = options;
-    const getCompiledConfigPath = (_a = pathAdapter === null || pathAdapter === void 0 ? void 0 : pathAdapter.getCompiledConfigPath) !== null && _a !== void 0 ? _a : defaultPathAdapter.getCompiledConfigPath;
-    const transformTsConfigPathMappings = (_b = pathAdapter === null || pathAdapter === void 0 ? void 0 : pathAdapter.transformTsConfigPathMappings) !== null && _b !== void 0 ? _b : defaultPathAdapter.transformTsConfigPathMappings;
+    const { vendureConfigPath, vendureConfigExport, tempDir } = options;
     const logger = options.logger || defaultLogger;
     const outputPath = tempDir;
     const configFileName = path.basename(vendureConfigPath);
@@ -50,13 +43,8 @@ export async function loadVendureConfig(options) {
         inputPath: vendureConfigPath,
         outputDir: outputPath,
         logger,
-        transformTsConfigPathMappings,
     });
-    const compiledConfigFilePath = pathToFileURL(getCompiledConfigPath({
-        inputRootDir,
-        outputPath,
-        configFileName,
-    })).href.replace(/.ts$/, '.js');
+    const compiledConfigFilePath = pathToFileURL(path.join(outputPath, configFileName)).href.replace(/.ts$/, '.js');
     // create package.json with type commonjs and save it to the output dir
     await fs.writeFile(path.join(outputPath, 'package.json'), JSON.stringify({ type: 'commonjs' }, null, 2));
     // We need to figure out the symbol exported by the config file by
@@ -68,7 +56,7 @@ export async function loadVendureConfig(options) {
         throw new Error(`Could not find a variable exported as VendureConfig. Please specify the name of the exported variable using the "vendureConfigExport" option.`);
     }
     // Register path aliases from tsconfig before importing
-    const tsConfigInfo = await findTsConfigPaths(vendureConfigPath, logger, 'loading', transformTsConfigPathMappings);
+    const tsConfigInfo = await findTsConfigPaths(vendureConfigPath, logger);
     if (tsConfigInfo) {
         tsConfigPaths.register({
             baseUrl: outputPath,
@@ -85,7 +73,7 @@ export async function loadVendureConfig(options) {
  * Finds and parses tsconfig files in the given directory and its parent directories.
  * Returns the paths configuration if found.
  */
-async function findTsConfigPaths(configPath, logger, phase, transformTsConfigPathMappings) {
+async function findTsConfigPaths(configPath, logger) {
     const configDir = path.dirname(configPath);
     let currentDir = configDir;
     while (currentDir !== path.parse(currentDir).root) {
@@ -106,14 +94,9 @@ async function findTsConfigPaths(configPath, logger, phase, transformTsConfigPat
                         const paths = {};
                         for (const [alias, patterns] of Object.entries(compilerOptions.paths)) {
                             // Store paths as defined in tsconfig, they will be relative to baseUrl
-                            const normalizedPatterns = patterns.map(pattern => 
+                            paths[alias] = patterns.map(pattern => 
                             // Normalize slashes for consistency, keep relative
                             pattern.replace(/\\/g, '/'));
-                            paths[alias] = transformTsConfigPathMappings({
-                                phase,
-                                alias,
-                                patterns: normalizedPatterns,
-                            });
                         }
                         logger.debug(`Found tsconfig paths in ${tsConfigPath}: ${JSON.stringify({
                             baseUrl: tsConfigBaseUrl,
@@ -136,7 +119,7 @@ async function findTsConfigPaths(configPath, logger, phase, transformTsConfigPat
     logger.debug(`No tsconfig paths found traversing up from ${configDir}`);
     return undefined;
 }
-export async function compileFile({ inputRootDir, inputPath, outputDir, transformTsConfigPathMappings, logger = defaultLogger, compiledFiles = new Set(), isRoot = true, pluginInfo = [], reportCompilationErrors = false, }) {
+export async function compileFile({ inputRootDir, inputPath, outputDir, logger = defaultLogger, compiledFiles = new Set(), isRoot = true, pluginInfo = [], reportCompilationErrors = false, }) {
     const absoluteInputPath = path.resolve(inputPath);
     if (compiledFiles.has(absoluteInputPath)) {
         return pluginInfo;
@@ -151,20 +134,17 @@ export async function compileFile({ inputRootDir, inputPath, outputDir, transfor
     const importPaths = new Set();
     let tsConfigInfo;
     if (isRoot) {
-        tsConfigInfo = await findTsConfigPaths(absoluteInputPath, logger, 'compiling', transformTsConfigPathMappings);
+        tsConfigInfo = await findTsConfigPaths(absoluteInputPath, logger);
         if (tsConfigInfo) {
             logger === null || logger === void 0 ? void 0 : logger.debug(`Using TypeScript configuration: ${JSON.stringify(tsConfigInfo, null, 2)}`);
         }
     }
     async function collectImports(node) {
-        if ((ts.isExportDeclaration(node) || ts.isImportDeclaration(node)) &&
-            node.moduleSpecifier &&
-            ts.isStringLiteral(node.moduleSpecifier)) {
+        if (ts.isImportDeclaration(node) && ts.isStringLiteral(node.moduleSpecifier)) {
             const importPath = node.moduleSpecifier.text;
             // Handle relative imports
             if (importPath.startsWith('.')) {
                 const resolvedPath = path.resolve(path.dirname(absoluteInputPath), importPath);
-                // TODO: does this handle index files correctly?
                 let resolvedTsPath = resolvedPath + '.ts';
                 // Also check for .tsx if .ts doesn't exist
                 if (!(await fs.pathExists(resolvedTsPath))) {
@@ -212,9 +192,7 @@ export async function compileFile({ inputRootDir, inputPath, outputDir, transfor
                                 continue;
                             const potentialPathBase = path.resolve(tsConfigInfo.baseUrl, patternPrefix);
                             const resolvedPath = path.join(potentialPathBase, remainingImportPath);
-                            let resolvedTsPath = resolvedPath.endsWith('.ts')
-                                ? resolvedPath
-                                : resolvedPath + '.ts';
+                            let resolvedTsPath = resolvedPath + '.ts';
                             // Similar existence checks as relative paths
                             if (!(await fs.pathExists(resolvedTsPath))) {
                                 const resolvedTsxPath = resolvedPath + '.tsx';
@@ -263,7 +241,6 @@ export async function compileFile({ inputRootDir, inputPath, outputDir, transfor
                     ts.isModuleBlock(child) ||
                     ts.isModuleDeclaration(child) ||
                     ts.isImportDeclaration(child) ||
-                    ts.isExportDeclaration(child) ||
                     child.kind === ts.SyntaxKind.SyntaxList) {
                     await collectImports(child);
                 }
@@ -286,7 +263,6 @@ export async function compileFile({ inputRootDir, inputPath, outputDir, transfor
             inputPath: importPath,
             outputDir,
             logger,
-            transformTsConfigPathMappings,
             compiledFiles,
             isRoot: false,
             pluginInfo,

package/dist/plugin/vite-plugin-config-loader.js

@@ -14,7 +14,6 @@ export function configLoaderPlugin(options) {
             try {
                 const startTime = Date.now();
                 result = await loadVendureConfig({
-                    pathAdapter: options.pathAdapter,
                     tempDir: options.tempDir,
                     vendureConfigPath: options.vendureConfigPath,
                     vendureConfigExport: options.vendureConfigExport,
@@ -32,11 +31,7 @@ export function configLoaderPlugin(options) {
             }
             catch (e) {
                 if (e instanceof Error) {
-                    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}`);
+                    this.error(`Error loading Vendure config: ${e.message}`);
                 }
             }
             onConfigLoaded.forEach(fn => fn());

package/dist/plugin/vite-plugin-config.js

@@ -7,7 +7,7 @@ export function viteConfigPlugin({ packageRoot }) {
             // 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;
@@ -26,16 +26,18 @@ export function viteConfigPlugin({ packageRoot }) {
                 config.build = Object.assign(Object.assign({}, buildConfig), { outDir: normalizedOutDir });
             }
             config.resolve = {
-                alias: Object.assign(Object.assign({}, ((_c = (_b = config.resolve) === null || _b === void 0 ? void 0 : _b.alias) !== null && _c !== void 0 ? _c : {})), { 
-                    // See the readme for an explanation of this alias.
-                    '@/vdb': path.resolve(packageRoot, './src/lib'), '@/graphql': path.resolve(packageRoot, './src/lib/graphql') }),
+                alias: Object.assign(Object.assign({}, ((_c = (_b = config.resolve) === null || _b === void 0 ? void 0 : _b.alias) !== null && _c !== void 0 ? _c : {})), { '@': 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 = Object.assign(Object.assign({}, config.optimizeDeps), { exclude: [
                     ...(((_d = config.optimizeDeps) === null || _d === void 0 ? void 0 : _d.exclude) || []),
                     '@vendure/dashboard',
-                    '@/vdb',
+                    '@/providers',
+                    '@/framework',
+                    '@/lib',
+                    '@/components',
+                    '@/hooks',
                     'virtual:vendure-ui-config',
                     'virtual:admin-api-schema',
                     'virtual:dashboard-extensions',
@@ -47,7 +49,6 @@ export function viteConfigPlugin({ packageRoot }) {
                     ...(((_e = config.optimizeDeps) === null || _e === void 0 ? void 0 : _e.include) || []),
                     '@/components > recharts',
                     '@/components > react-dropzone',
-                    '@vendure/common/lib/generated-types',
                 ] });
             return config;
         },

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

@@ -4,4 +4,6 @@ import { Plugin } from 'vite';
  * 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 declare function dashboardMetadataPlugin(): Plugin;
+export declare function dashboardMetadataPlugin(options: {
+    rootDir: string;
+}): Plugin;

package/dist/plugin/vite-plugin-dashboard-metadata.js

@@ -7,7 +7,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() {
+export function dashboardMetadataPlugin(options) {
     let configLoaderApi;
     let loadVendureConfigResult;
     return {
@@ -41,3 +41,10 @@ export function dashboardMetadataPlugin() {
         },
     };
 }
+/**
+ * Converts an import path to a normalized path relative to the rootDir.
+ */
+function normalizeImportPath(rootDir, importPath) {
+    const relativePath = path.relative(rootDir, importPath).replace(/\\/g, '/');
+    return relativePath.replace(/\.tsx?$/, '.js');
+}

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

@@ -1,5 +1,4 @@
 import { PluginOption } from 'vite';
-import { PathAdapter } from './utils/config-loader.js';
 import { ThemeVariablesPluginOptions } from './vite-plugin-theme.js';
 import { UiConfigPluginOptions } from './vite-plugin-ui-config.js';
 /**
@@ -12,46 +11,6 @@ export type VitePluginVendureDashboardOptions = {
      * The path to the Vendure server configuration file.
      */
     vendureConfigPath: string | URL;
-    /**
-     * @description
-     * 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.

package/dist/plugin/vite-plugin-vendure-dashboard.js

@@ -7,7 +7,6 @@ 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 { dashboardTailwindSourcePlugin } from './vite-plugin-tailwind-source.js';
 import { themeVariablesPlugin } from './vite-plugin-theme.js';
 import { transformIndexHtmlPlugin } from './vite-plugin-transform-index.js';
 import { uiConfigPlugin } from './vite-plugin-ui-config.js';
@@ -32,7 +31,7 @@ export function vendureDashboardPlugin(options) {
             : [
                 TanStackRouterVite({
                     autoCodeSplitting: true,
-                    routeFileIgnorePattern: '.graphql.ts|components|hooks|utils',
+                    routeFileIgnorePattern: '.graphql.ts|components',
                     routesDirectory: path.join(packageRoot, 'src/app/routes'),
                     generatedRouteTree: path.join(packageRoot, 'src/app/routeTree.gen.ts'),
                 }),
@@ -43,17 +42,15 @@ export function vendureDashboardPlugin(options) {
         // },
         }),
         themeVariablesPlugin({ theme: options.theme }),
-        dashboardTailwindSourcePlugin(),
         tailwindcss(),
         configLoaderPlugin({
             vendureConfigPath: normalizedVendureConfigPath,
             tempDir,
             reportCompilationErrors: options.reportCompilationErrors,
-            pathAdapter: options.pathAdapter,
         }),
         viteConfigPlugin({ packageRoot }),
         adminApiSchemaPlugin(),
-        dashboardMetadataPlugin(),
+        dashboardMetadataPlugin({ rootDir: tempDir }),
         uiConfigPlugin({ adminUiConfig: options.adminUiConfig }),
         ...(options.gqlTadaOutputPath
             ? [gqlTadaPlugin({ gqlTadaOutputPath: options.gqlTadaOutputPath, tempDir, packageRoot })]