@vendure/dashboard 3.2.2 → 3.2.4

package/vite/{ui-config.ts → utils/ui-config.ts}

@@ -6,8 +6,8 @@ import {
 import { AdminUiConfig } from '@vendure/common/lib/shared-types';
 import { VendureConfig } from '@vendure/core';
 
-import { defaultAvailableLocales } from './constants.js';
-import { defaultLocale, defaultLanguage, defaultAvailableLanguages } from './constants.js';
+import { defaultAvailableLocales } from '../constants.js';
+import { defaultLocale, defaultLanguage, defaultAvailableLanguages } from '../constants.js';
 
 export function getAdminUiConfig(
     config: VendureConfig,

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

@@ -21,7 +21,7 @@ import {
 } from 'graphql';
 import { Plugin } from 'vite';
 
-import { generateSchema } from './schema-generator.js';
+import { generateSchema } from './utils/schema-generator.js';
 import { ConfigLoaderApi, getConfigLoaderApi } from './vite-plugin-config-loader.js';
 
 export type FieldInfoTuple = readonly [
@@ -61,7 +61,7 @@ export function adminApiSchemaPlugin(): Plugin {
             configLoaderApi = getConfigLoaderApi(plugins);
         },
         async buildStart() {
-            const vendureConfig = await configLoaderApi.getVendureConfig();
+            const { vendureConfig } = await configLoaderApi.getVendureConfig();
             if (!schemaInfo) {
                 const safeSchema = await generateSchema({ vendureConfig });
                 schemaInfo = generateSchemaInfo(safeSchema);

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

@@ -1,10 +1,9 @@
-import { VendureConfig } from '@vendure/core';
 import { Plugin } from 'vite';
 
-import { ConfigLoaderOptions, loadVendureConfig } from './config-loader.js';
+import { ConfigLoaderOptions, loadVendureConfig, LoadVendureConfigResult } from './utils/config-loader.js';
 
 export interface ConfigLoaderApi {
-    getVendureConfig(): Promise<VendureConfig>;
+    getVendureConfig(): Promise<LoadVendureConfigResult>;
 }
 
 export const configLoaderName = 'vendure:config-loader';
@@ -14,20 +13,33 @@ export const configLoaderName = 'vendure:config-loader';
  * makes it available to other plugins via the `ConfigLoaderApi`.
  */
 export function configLoaderPlugin(options: ConfigLoaderOptions): Plugin {
-    let vendureConfig: VendureConfig;
+    let result: LoadVendureConfigResult;
     const onConfigLoaded: Array<() => void> = [];
     return {
         name: configLoaderName,
         async buildStart() {
-            this.info(`Loading Vendure config...`);
+            this.info(
+                `Loading Vendure config. This can take a short while depending on the size of your project...`,
+            );
             try {
-                const result = await loadVendureConfig({
+                const startTime = Date.now();
+                result = await loadVendureConfig({
                     tempDir: options.tempDir,
                     vendureConfigPath: options.vendureConfigPath,
                     vendureConfigExport: options.vendureConfigExport,
+                    logger: {
+                        info: (message: string) => this.info(message),
+                        warn: (message: string) => this.warn(message),
+                        debug: (message: string) => this.debug(message),
+                    },
                 });
-                vendureConfig = result.vendureConfig;
-                this.info(`Vendure config loaded (using export "${result.exportedSymbolName}")`);
+                const endTime = Date.now();
+                const duration = endTime - startTime;
+                const pluginNames = result.pluginInfo.map(p => p.name).join(', ');
+                this.info(`Found ${result.pluginInfo.length} plugins: ${pluginNames}`);
+                this.info(
+                    `Vendure config loaded (using export "${result.exportedSymbolName}") in ${duration}ms`,
+                );
             } catch (e: unknown) {
                 if (e instanceof Error) {
                     this.error(`Error loading Vendure config: ${e.message}`);
@@ -36,13 +48,13 @@ export function configLoaderPlugin(options: ConfigLoaderOptions): Plugin {
             onConfigLoaded.forEach(fn => fn());
         },
         api: {
-            getVendureConfig(): Promise<VendureConfig> {
-                if (vendureConfig) {
-                    return Promise.resolve(vendureConfig);
+            getVendureConfig(): Promise<LoadVendureConfigResult> {
+                if (result) {
+                    return Promise.resolve(result);
                 } else {
-                    return new Promise<VendureConfig>(resolve => {
+                    return new Promise<LoadVendureConfigResult>(resolve => {
                         onConfigLoaded.push(() => {
-                            resolve(vendureConfig);
+                            resolve(result);
                         });
                     });
                 }

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

@@ -1,8 +1,7 @@
-import { VendureConfig } from '@vendure/core';
-import { getPluginDashboardExtensions } from '@vendure/core';
 import path from 'path';
 import { Plugin } from 'vite';
 
+import { LoadVendureConfigResult } from './utils/config-loader.js';
 import { ConfigLoaderApi, getConfigLoaderApi } from './vite-plugin-config-loader.js';
 
 const virtualModuleId = 'virtual:dashboard-extensions';
@@ -15,7 +14,7 @@ const resolvedVirtualModuleId = `\0${virtualModuleId}`;
  */
 export function dashboardMetadataPlugin(options: { rootDir: string }): Plugin {
     let configLoaderApi: ConfigLoaderApi;
-    let vendureConfig: VendureConfig;
+    let loadVendureConfigResult: LoadVendureConfigResult;
     return {
         name: 'vendure:dashboard-extensions-metadata',
         configResolved({ plugins }) {
@@ -28,22 +27,27 @@ export function dashboardMetadataPlugin(options: { rootDir: string }): Plugin {
         },
         async load(id) {
             if (id === resolvedVirtualModuleId) {
-                if (!vendureConfig) {
-                    vendureConfig = await configLoaderApi.getVendureConfig();
+                if (!loadVendureConfigResult) {
+                    loadVendureConfigResult = 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}` };
-                });
+                const { pluginInfo } = loadVendureConfigResult;
+                const pluginsWithExtensions =
+                    pluginInfo
+                        ?.map(
+                            ({ dashboardEntryPath, pluginPath }) =>
+                                dashboardEntryPath && path.join(pluginPath, dashboardEntryPath),
+                        )
+                        .filter(x => x != null) ?? [];
 
-                this.info(`Found ${extensionData.length} Dashboard extensions`);
+                this.info(`Found ${pluginsWithExtensions.length} Dashboard extensions`);
                 return `
                     export async function runDashboardExtensions() {
-                        ${extensionData.map(extension => `await import('${extension.importPath}');`).join('\n')}
-                    }
-                `;
+                        ${pluginsWithExtensions
+                            .map(extension => {
+                                return `await import('${extension}');`;
+                            })
+                            .join('\n')}
+                }`;
             }
         },
     };

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

@@ -4,7 +4,7 @@ import { printSchema } from 'graphql';
 import * as path from 'path';
 import { Plugin } from 'vite';
 
-import { generateSchema } from './schema-generator.js';
+import { generateSchema } from './utils/schema-generator.js';
 import { ConfigLoaderApi, getConfigLoaderApi } from './vite-plugin-config-loader.js';
 
 export function gqlTadaPlugin(options: {
@@ -20,7 +20,7 @@ export function gqlTadaPlugin(options: {
             configLoaderApi = getConfigLoaderApi(plugins);
         },
         async buildStart() {
-            const vendureConfig = await configLoaderApi.getVendureConfig();
+            const { vendureConfig } = await configLoaderApi.getVendureConfig();
             const safeSchema = await generateSchema({ vendureConfig });
 
             const tsConfigContent = {

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

@@ -2,7 +2,7 @@ import { AdminUiConfig, VendureConfig } from '@vendure/core';
 import path from 'path';
 import { Plugin } from 'vite';
 
-import { getAdminUiConfig } from './ui-config.js';
+import { getAdminUiConfig } from './utils/ui-config.js';
 import { ConfigLoaderApi, getConfigLoaderApi } from './vite-plugin-config-loader.js';
 
 const virtualModuleId = 'virtual:vendure-ui-config';
@@ -38,7 +38,8 @@ export function uiConfigPlugin({ adminUiConfig }: UiConfigPluginOptions): Plugin
         async load(id) {
             if (id === resolvedVirtualModuleId) {
                 if (!vendureConfig) {
-                    vendureConfig = await configLoaderApi.getVendureConfig();
+                    const result = await configLoaderApi.getVendureConfig();
+                    vendureConfig = result.vendureConfig;
                 }
 
                 const config = getAdminUiConfig(vendureConfig, adminUiConfig);

package/dist/plugin/config-loader.js

@@ -1,141 +0,0 @@
-import { parse, transform } from '@swc/core';
-import fs from 'fs-extra';
-import path from 'path';
-import { pathToFileURL } from 'url';
-/**
- * @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 SWC, which does support
- * these experimental decorators. The compiled files are then loaded by Vite, which is able to handle the compiled
- * JavaScript output.
- */
-export async function loadVendureConfig(options) {
-    const { vendureConfigPath, vendureConfigExport, tempDir } = options;
-    const outputPath = tempDir;
-    const configFileName = path.basename(vendureConfigPath);
-    const inputRootDir = path.dirname(vendureConfigPath);
-    await fs.remove(outputPath);
-    await compileFile(inputRootDir, vendureConfigPath, outputPath);
-    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
-    // analyzing the AST and finding an export with the type "VendureConfig"
-    const ast = await parse(await fs.readFile(vendureConfigPath, 'utf-8'), {
-        syntax: 'typescript',
-        decorators: true,
-    });
-    const detectedExportedSymbolName = findConfigExport(ast.body);
-    const configExportedSymbolName = detectedExportedSymbolName || vendureConfigExport;
-    if (!configExportedSymbolName) {
-        throw new Error(`Could not find a variable exported as VendureConfig. Please specify the name of the exported variable using the "vendureConfigExport" option.`);
-    }
-    const config = await import(compiledConfigFilePath).then(m => m[configExportedSymbolName]);
-    if (!config) {
-        throw new Error(`Could not find a variable exported as VendureConfig with the name "${configExportedSymbolName}".`);
-    }
-    return { vendureConfig: config, exportedSymbolName: configExportedSymbolName };
-}
-/**
- * Given the AST of a TypeScript file, finds the name of the variable exported as VendureConfig.
- */
-function findConfigExport(statements) {
-    var _a;
-    for (const statement of statements) {
-        if (statement.type === 'ExportDeclaration') {
-            if (statement.declaration.type === 'VariableDeclaration') {
-                for (const declaration of statement.declaration.declarations) {
-                    if (isBindingIdentifier(declaration.id)) {
-                        const typeRef = (_a = declaration.id.typeAnnotation) === null || _a === void 0 ? void 0 : _a.typeAnnotation;
-                        if ((typeRef === null || typeRef === void 0 ? void 0 : typeRef.type) === 'TsTypeReference') {
-                            if (typeRef.typeName.type === 'Identifier' &&
-                                typeRef.typeName.value === 'VendureConfig') {
-                                return declaration.id.value;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-    return undefined;
-}
-function isBindingIdentifier(id) {
-    return id.type === 'Identifier' && !!id.typeAnnotation;
-}
-export async function compileFile(inputRootDir, inputPath, outputDir, compiledFiles = new Set()) {
-    if (compiledFiles.has(inputPath)) {
-        return;
-    }
-    compiledFiles.add(inputPath);
-    // Ensure output directory exists
-    await fs.ensureDir(outputDir);
-    // Read the source file
-    const source = await fs.readFile(inputPath, 'utf-8');
-    // Transform config
-    const config = {
-        filename: inputPath,
-        sourceMaps: true,
-        jsc: {
-            parser: {
-                syntax: 'typescript',
-                tsx: false,
-                decorators: true,
-            },
-            target: 'es2020',
-            loose: false,
-            transform: {
-                legacyDecorator: true,
-                decoratorMetadata: true,
-            },
-        },
-        module: {
-            type: 'commonjs',
-            strict: true,
-            strictMode: true,
-            lazy: false,
-            noInterop: false,
-        },
-    };
-    // Transform the code using SWC
-    const result = await transform(source, config);
-    // Generate output file path
-    const relativePath = path.relative(inputRootDir, inputPath);
-    const outputPath = path.join(outputDir, relativePath).replace(/\.ts$/, '.js');
-    // Ensure the subdirectory for the output file exists
-    await fs.ensureDir(path.dirname(outputPath));
-    // Write the transformed code
-    await fs.writeFile(outputPath, result.code);
-    // Write source map if available
-    if (result.map) {
-        await fs.writeFile(`${outputPath}.map`, JSON.stringify(result.map));
-    }
-    // Parse the source to find relative imports
-    const ast = await parse(source, { syntax: 'typescript', decorators: true });
-    const importPaths = new Set();
-    function collectImports(node) {
-        if (node.type === 'ImportDeclaration' && node.source.value.startsWith('.')) {
-            const importPath = path.resolve(path.dirname(inputPath), node.source.value);
-            importPaths.add(importPath + '.ts');
-        }
-        for (const key in node) {
-            if (node[key] && typeof node[key] === 'object') {
-                collectImports(node[key]);
-            }
-        }
-    }
-    collectImports(ast);
-    // Recursively compile all relative imports
-    for (const importPath of importPaths) {
-        await compileFile(inputRootDir, importPath, outputDir, compiledFiles);
-    }
-}