@vendure/dashboard 3.2.0

package/src/lib/providers/user-settings.tsx

@@ -0,0 +1,89 @@
+import React, { createContext, useState, useEffect } from 'react';
+import { Theme } from './theme-provider.js';
+
+export interface UserSettings {
+    displayLanguage: string;
+    displayLocale?: string;
+    contentLanguage: string;
+    theme: Theme;
+    displayUiExtensionPoints: boolean;
+    mainNavExpanded: boolean;
+    activeChannelId: string;
+    devMode: boolean;
+    hasSeenOnboarding: boolean;
+}
+
+const defaultSettings: UserSettings = {
+    displayLanguage: 'en',
+    displayLocale: undefined,
+    contentLanguage: 'en',
+    theme: 'system',
+    displayUiExtensionPoints: false,
+    mainNavExpanded: true,
+    activeChannelId: '',
+    devMode: false,
+    hasSeenOnboarding: false,
+};
+
+export interface UserSettingsContextType {
+    settings: UserSettings;
+    setDisplayLanguage: (language: string) => void;
+    setDisplayLocale: (locale: string | undefined) => void;
+    setContentLanguage: (language: string) => void;
+    setTheme: (theme: Theme) => void;
+    setDisplayUiExtensionPoints: (display: boolean) => void;
+    setMainNavExpanded: (expanded: boolean) => void;
+    setActiveChannelId: (channelId: string) => void;
+    setDevMode: (devMode: boolean) => void;
+    setHasSeenOnboarding: (hasSeen: boolean) => void;
+}
+
+export const UserSettingsContext = createContext<UserSettingsContextType | undefined>(undefined);
+
+const STORAGE_KEY = 'vendure-user-settings';
+
+export const UserSettingsProvider: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
+    // Load settings from localStorage or use defaults
+    const loadSettings = (): UserSettings => {
+        try {
+            const storedSettings = localStorage.getItem(STORAGE_KEY);
+            if (storedSettings) {
+                return { ...defaultSettings, ...JSON.parse(storedSettings) };
+            }
+        } catch (e) {
+            console.error('Failed to load user settings from localStorage', e);
+        }
+        return { ...defaultSettings };
+    };
+
+    const [settings, setSettings] = useState<UserSettings>(loadSettings);
+
+    // Save settings to localStorage whenever they change
+    useEffect(() => {
+        try {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+        } catch (e) {
+            console.error('Failed to save user settings to localStorage', e);
+        }
+    }, [settings]);
+
+    // Settings updaters
+    const updateSetting = <K extends keyof UserSettings>(key: K, value: UserSettings[K]) => {
+        setSettings(prev => ({ ...prev, [key]: value }));
+    };
+
+    const contextValue: UserSettingsContextType = {
+        settings,
+        setDisplayLanguage: language => updateSetting('displayLanguage', language),
+        setDisplayLocale: locale => updateSetting('displayLocale', locale),
+        setContentLanguage: language => updateSetting('contentLanguage', language),
+        setTheme: theme => updateSetting('theme', theme),
+        setDisplayUiExtensionPoints: display => updateSetting('displayUiExtensionPoints', display),
+        setMainNavExpanded: expanded => updateSetting('mainNavExpanded', expanded),
+        setActiveChannelId: channelId => updateSetting('activeChannelId', channelId),
+        setDevMode: devMode => updateSetting('devMode', devMode),
+        setHasSeenOnboarding: hasSeen => updateSetting('hasSeenOnboarding', hasSeen),
+    };
+
+    return <UserSettingsContext.Provider value={contextValue}>{children}</UserSettingsContext.Provider>;
+};

package/src/lib/virtual.d.ts

@@ -0,0 +1,12 @@
+declare module 'virtual:admin-api-schema' {
+    import { SchemaInfo } from '../../vite/vite-plugin-admin-api-schema.js';
+    export const schemaInfo: SchemaInfo;
+}
+declare module 'virtual:dashboard-extensions' {
+    export const runDashboardExtensions: () => Promise<void>;
+}
+
+declare module 'virtual:vendure-ui-config' {
+    import { AdminUiConfig } from '@vendure/core';
+    export const uiConfig: AdminUiConfig;
+}

package/vite/config-loader.ts

@@ -0,0 +1,181 @@
+import { Options, parse, transform } from '@swc/core';
+import { BindingIdentifier, ModuleItem, Pattern, Statement } from '@swc/types';
+import { VendureConfig } from '@vendure/core';
+import fs from 'fs-extra';
+import path from 'path';
+import { pathToFileURL } from 'url';
+
+export interface ConfigLoaderOptions {
+    vendureConfigPath: string;
+    tempDir: string;
+    vendureConfigExport?: string;
+}
+
+/**
+ * @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: ConfigLoaderOptions,
+): Promise<{ vendureConfig: VendureConfig; exportedSymbolName: string }> {
+    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: ModuleItem[]): string | undefined {
+    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 = declaration.id.typeAnnotation?.typeAnnotation;
+                        if (typeRef?.type === 'TsTypeReference') {
+                            if (
+                                typeRef.typeName.type === 'Identifier' &&
+                                typeRef.typeName.value === 'VendureConfig'
+                            ) {
+                                return declaration.id.value;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return undefined;
+}
+
+function isBindingIdentifier(id: Pattern): id is BindingIdentifier {
+    return id.type === 'Identifier' && !!(id as BindingIdentifier).typeAnnotation;
+}
+
+export async function compileFile(
+    inputRootDir: string,
+    inputPath: string,
+    outputDir: string,
+    compiledFiles = new Set<string>(),
+): Promise<void> {
+    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: Options = {
+        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<string>();
+
+    function collectImports(node: any) {
+        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);
+    }
+}

package/vite/constants.ts

@@ -0,0 +1,280 @@
+import { LanguageCode } from '@vendure/core';
+
+export const defaultLanguage = LanguageCode.en;
+export const defaultLocale = undefined;
+
+export const defaultAvailableLanguages = [
+    LanguageCode.he,
+    LanguageCode.ar,
+    LanguageCode.de,
+    LanguageCode.en,
+    LanguageCode.es,
+    LanguageCode.pl,
+    LanguageCode.zh_Hans,
+    LanguageCode.zh_Hant,
+    LanguageCode.pt_BR,
+    LanguageCode.pt_PT,
+    LanguageCode.cs,
+    LanguageCode.fr,
+    LanguageCode.ru,
+    LanguageCode.uk,
+    LanguageCode.it,
+    LanguageCode.fa,
+    LanguageCode.ne,
+    LanguageCode.hr,
+    LanguageCode.sv,
+    LanguageCode.nb,
+    LanguageCode.tr,
+];
+
+export const defaultAvailableLocales = [
+    'AF',
+    'AL',
+    'DZ',
+    'AS',
+    'AD',
+    'AO',
+    'AI',
+    'AQ',
+    'AG',
+    'AR',
+    'AM',
+    'AW',
+    'AU',
+    'AT',
+    'AZ',
+    'BS',
+    'BH',
+    'BD',
+    'BB',
+    'BY',
+    'BE',
+    'BZ',
+    'BJ',
+    'BM',
+    'BT',
+    'BO',
+    'BQ',
+    'BA',
+    'BW',
+    'BV',
+    'BR',
+    'IO',
+    'BN',
+    'BG',
+    'BF',
+    'BI',
+    'CV',
+    'KH',
+    'CM',
+    'CA',
+    'KY',
+    'CF',
+    'TD',
+    'CL',
+    'CN',
+    'CX',
+    'CC',
+    'CO',
+    'KM',
+    'CD',
+    'CG',
+    'CK',
+    'CR',
+    'HR',
+    'CU',
+    'CW',
+    'CY',
+    'CZ',
+    'CI',
+    'DK',
+    'DJ',
+    'DM',
+    'DO',
+    'EC',
+    'EG',
+    'SV',
+    'GQ',
+    'ER',
+    'EE',
+    'SZ',
+    'ET',
+    'FK',
+    'FO',
+    'FJ',
+    'FI',
+    'FR',
+    'GF',
+    'PF',
+    'TF',
+    'GA',
+    'GM',
+    'GE',
+    'DE',
+    'GH',
+    'GI',
+    'GR',
+    'GL',
+    'GD',
+    'GP',
+    'GU',
+    'GT',
+    'GG',
+    'GN',
+    'GW',
+    'GY',
+    'HT',
+    'HM',
+    'VA',
+    'HN',
+    'HK',
+    'HU',
+    'IS',
+    'IN',
+    'ID',
+    'IR',
+    'IQ',
+    'IE',
+    'IM',
+    'IL',
+    'IT',
+    'JM',
+    'JP',
+    'JE',
+    'JO',
+    'KZ',
+    'KE',
+    'KI',
+    'KP',
+    'KR',
+    'KW',
+    'KG',
+    'LA',
+    'LV',
+    'LB',
+    'LS',
+    'LR',
+    'LY',
+    'LI',
+    'LT',
+    'LU',
+    'MO',
+    'MG',
+    'MW',
+    'MY',
+    'MV',
+    'ML',
+    'MT',
+    'MH',
+    'MQ',
+    'MR',
+    'MU',
+    'YT',
+    'MX',
+    'FM',
+    'MD',
+    'MC',
+    'MN',
+    'ME',
+    'MS',
+    'MA',
+    'MZ',
+    'MM',
+    'NA',
+    'NR',
+    'NP',
+    'NL',
+    'NC',
+    'NZ',
+    'NI',
+    'NE',
+    'NG',
+    'NU',
+    'NF',
+    'MK',
+    'MP',
+    'NO',
+    'OM',
+    'PK',
+    'PW',
+    'PS',
+    'PA',
+    'PG',
+    'PY',
+    'PE',
+    'PH',
+    'PN',
+    'PL',
+    'PT',
+    'PR',
+    'QA',
+    'RO',
+    'RU',
+    'RW',
+    'RE',
+    'BL',
+    'SH',
+    'KN',
+    'LC',
+    'MF',
+    'PM',
+    'VC',
+    'WS',
+    'SM',
+    'ST',
+    'SA',
+    'SN',
+    'RS',
+    'SC',
+    'SL',
+    'SG',
+    'SX',
+    'SK',
+    'SI',
+    'SB',
+    'SO',
+    'ZA',
+    'GS',
+    'SS',
+    'ES',
+    'LK',
+    'SD',
+    'SR',
+    'SJ',
+    'SE',
+    'CH',
+    'SY',
+    'TW',
+    'TJ',
+    'TZ',
+    'TH',
+    'TL',
+    'TG',
+    'TK',
+    'TO',
+    'TT',
+    'TN',
+    'TR',
+    'TM',
+    'TC',
+    'TV',
+    'UG',
+    'UA',
+    'AE',
+    'GB',
+    'UM',
+    'US',
+    'UY',
+    'UZ',
+    'VU',
+    'VE',
+    'VN',
+    'VG',
+    'VI',
+    'WF',
+    'EH',
+    'YE',
+    'ZM',
+    'ZW',
+    'AX',
+];

package/vite/index.ts

@@ -0,0 +1 @@
+export { vendureDashboardPlugin } from './vite-plugin-vendure-dashboard.js';

package/vite/schema-generator.ts

@@ -0,0 +1,40 @@
+import { GraphQLTypesLoader } from '@nestjs/graphql';
+import {
+    resetConfig,
+    setConfig,
+    getConfig,
+    runPluginConfigurations,
+    getFinalVendureSchema,
+    VENDURE_ADMIN_API_TYPE_PATHS,
+    VendureConfig,
+} from '@vendure/core';
+import { buildSchema } from 'graphql';
+import { GraphQLSchema } from 'graphql';
+
+let schemaPromise: Promise<GraphQLSchema>;
+
+export async function generateSchema({
+    vendureConfig,
+}: {
+    vendureConfig: VendureConfig;
+}): Promise<GraphQLSchema> {
+    if (!schemaPromise) {
+        schemaPromise = new Promise(async (resolve, reject) => {
+            resetConfig();
+            await setConfig(vendureConfig ?? {});
+
+            const runtimeConfig = await runPluginConfigurations(getConfig() as any);
+            const typesLoader = new GraphQLTypesLoader();
+            const finalSchema = await getFinalVendureSchema({
+                config: runtimeConfig,
+                typePaths: VENDURE_ADMIN_API_TYPE_PATHS,
+                typesLoader,
+                apiType: 'admin',
+                output: 'sdl',
+            });
+            const safeSchema = buildSchema(finalSchema);
+            resolve(safeSchema);
+        });
+    }
+    return schemaPromise;
+}

package/vite/ui-config.ts

@@ -0,0 +1,60 @@
+import {
+    DEFAULT_AUTH_TOKEN_HEADER_KEY,
+    DEFAULT_CHANNEL_TOKEN_KEY,
+    ADMIN_API_PATH,
+} from '@vendure/common/lib/shared-constants';
+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';
+
+export function getAdminUiConfig(
+    config: VendureConfig,
+    adminUiConfig?: Partial<AdminUiConfig>,
+): AdminUiConfig {
+    const { authOptions, apiOptions } = config;
+
+    const propOrDefault = <Prop extends keyof AdminUiConfig>(
+        prop: Prop,
+        defaultVal: AdminUiConfig[Prop],
+        isArray: boolean = false,
+    ): AdminUiConfig[Prop] => {
+        if (isArray) {
+            const isValidArray = !!adminUiConfig
+                ? !!((adminUiConfig as AdminUiConfig)[prop] as any[])?.length
+                : false;
+
+            return !!adminUiConfig && isValidArray ? (adminUiConfig as AdminUiConfig)[prop] : defaultVal;
+        } else {
+            return adminUiConfig ? (adminUiConfig as AdminUiConfig)[prop] || defaultVal : defaultVal;
+        }
+    };
+
+    return {
+        adminApiPath: propOrDefault('adminApiPath', apiOptions.adminApiPath || ADMIN_API_PATH),
+        apiHost: propOrDefault('apiHost', 'auto'),
+        apiPort: propOrDefault('apiPort', 'auto'),
+        tokenMethod: propOrDefault('tokenMethod', authOptions.tokenMethod === 'bearer' ? 'bearer' : 'cookie'),
+        authTokenHeaderKey: propOrDefault(
+            'authTokenHeaderKey',
+            authOptions.authTokenHeaderKey || DEFAULT_AUTH_TOKEN_HEADER_KEY,
+        ),
+        channelTokenKey: propOrDefault(
+            'channelTokenKey',
+            apiOptions.channelTokenKey || DEFAULT_CHANNEL_TOKEN_KEY,
+        ),
+        defaultLanguage: propOrDefault('defaultLanguage', defaultLanguage),
+        defaultLocale: propOrDefault('defaultLocale', defaultLocale),
+        availableLanguages: propOrDefault('availableLanguages', defaultAvailableLanguages, true),
+        availableLocales: propOrDefault('availableLocales', defaultAvailableLocales, true),
+        brand: adminUiConfig?.brand,
+        hideVendureBranding: propOrDefault(
+            'hideVendureBranding',
+            adminUiConfig?.hideVendureBranding || false,
+        ),
+        hideVersion: propOrDefault('hideVersion', adminUiConfig?.hideVersion || false),
+        loginImageUrl: adminUiConfig?.loginImageUrl,
+        cancellationReasons: propOrDefault('cancellationReasons', undefined),
+    };
+}