@wilshop/dashboard 3.5.2

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

@@ -0,0 +1,150 @@
+import { LanguageCode } from '@vendure/core';
+import { Plugin } from 'vite';
+/**
+ * @description
+ * Options used by the {@link vendureDashboardPlugin} to configure how the Dashboard
+ * connects to the Vendure Admin API
+ *
+ * @docsCategory vite-plugin
+ * @docsPage vendureDashboardPlugin
+ * @since 3.4.0
+ */
+export interface ApiConfig {
+    /**
+     * @description
+     * The hostname of the Vendure server which the admin UI will be making API calls
+     * to. If set to "auto", the Admin UI app will determine the hostname from the
+     * current location (i.e. `window.location.hostname`).
+     *
+     * @default 'auto'
+     */
+    host?: string | 'auto';
+    /**
+     * @description
+     * The port of the Vendure server which the admin UI will be making API calls
+     * to. If set to "auto", the Admin UI app will determine the port from the
+     * current location (i.e. `window.location.port`).
+     *
+     * @default 'auto'
+     */
+    port?: number | 'auto';
+    /**
+     * @description
+     * The path to the GraphQL Admin API.
+     *
+     * @default 'admin-api'
+     */
+    adminApiPath?: string;
+    /**
+     * @description
+     * Whether to use cookies or bearer tokens to track sessions.
+     * Should match the setting of in the server's `tokenMethod` config
+     * option.
+     *
+     * @default 'cookie'
+     */
+    tokenMethod?: 'cookie' | 'bearer';
+    /**
+     * @description
+     * The header used when using the 'bearer' auth method. Should match the
+     * setting of the server's `authOptions.authTokenHeaderKey` config option.
+     *
+     * @default 'vendure-auth-token'
+     */
+    authTokenHeaderKey?: string;
+    /**
+     * @description
+     * The name of the header which contains the channel token. Should match the
+     * setting of the server's `apiOptions.channelTokenKey` config option.
+     *
+     * @default 'vendure-token'
+     */
+    channelTokenKey?: string;
+}
+/**
+ * @description
+ * Options used by the {@link vendureDashboardPlugin} to configure aspects of the
+ * Dashboard UI behaviour.
+ *
+ * @docsCategory vite-plugin
+ * @docsPage vendureDashboardPlugin
+ * @since 3.4.0
+ */
+export interface I18nConfig {
+    /**
+     * @description
+     * The default language for the Admin UI. Must be one of the
+     * items specified in the `availableLanguages` property.
+     *
+     * @default LanguageCode.en
+     */
+    defaultLanguage?: LanguageCode;
+    /**
+     * @description
+     * The default locale for the Admin UI. The locale affects the formatting of
+     * currencies & dates. Must be one of the items specified
+     * in the `availableLocales` property.
+     *
+     * If not set, the browser default locale will be used.
+     *
+     * @since 2.2.0
+     */
+    defaultLocale?: string;
+    /**
+     * @description
+     * An array of languages for which translations exist for the Admin UI.
+     */
+    availableLanguages?: LanguageCode[];
+    /**
+     * @description
+     * An array of locales to be used on Admin UI.
+     *
+     * @since 2.2.0
+     */
+    availableLocales?: string[];
+}
+/**
+ * @description
+ * Options used by the {@link vendureDashboardPlugin} to configure aspects of the
+ * Dashboard UI behaviour.
+ *
+ * @docsCategory vite-plugin
+ * @docsPage vendureDashboardPlugin
+ * @since 3.4.0
+ */
+export interface UiConfigPluginOptions {
+    /**
+     * @description
+     * Configuration for API connection settings
+     */
+    api?: ApiConfig;
+    /**
+     * @description
+     * Configuration for internationalization settings
+     */
+    i18n?: I18nConfig;
+}
+/**
+ * @description
+ * The resolved UI configuration with all defaults applied.
+ * This is the type of the configuration object available at runtime.
+ */
+export interface ResolvedUiConfig {
+    /**
+     * @description
+     * API connection settings with all defaults applied
+     */
+    api: Required<ApiConfig>;
+    /**
+     * @description
+     * Internationalization settings with all defaults applied.
+     * Note: defaultLocale remains optional as it can be undefined.
+     */
+    i18n: Required<Omit<I18nConfig, 'defaultLocale'>> & Pick<I18nConfig, 'defaultLocale'>;
+}
+/**
+ * This Vite plugin scans the configured plugins for any dashboard extensions and dynamically
+ * 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 uiConfigPlugin(options?: UiConfigPluginOptions): Plugin;

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

@@ -0,0 +1,36 @@
+import { getUiConfig } from './utils/ui-config.js';
+import { getConfigLoaderApi } from './vite-plugin-config-loader.js';
+const virtualModuleId = 'virtual:vendure-ui-config';
+const resolvedVirtualModuleId = `\0${virtualModuleId}`;
+/**
+ * This Vite plugin scans the configured plugins for any dashboard extensions and dynamically
+ * 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 uiConfigPlugin(options = {}) {
+    let configLoaderApi;
+    let vendureConfig;
+    return {
+        name: 'vendure:dashboard-ui-config',
+        configResolved({ plugins }) {
+            configLoaderApi = getConfigLoaderApi(plugins);
+        },
+        resolveId(id) {
+            if (id === virtualModuleId) {
+                return resolvedVirtualModuleId;
+            }
+        },
+        async load(id) {
+            if (id === resolvedVirtualModuleId) {
+                if (!vendureConfig) {
+                    const result = await configLoaderApi.getVendureConfig();
+                    vendureConfig = result.vendureConfig;
+                }
+                const config = getUiConfig(vendureConfig, options);
+                return `
+                    export const uiConfig = ${JSON.stringify(config)}
+                `;
+            }
+        },
+    };
+}

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

@@ -0,0 +1,142 @@
+import { PluginOption } from 'vite';
+import { PathAdapter } from './types.js';
+import { PackageScannerConfig } from './utils/compiler.js';
+import { ThemeVariablesPluginOptions } from './vite-plugin-theme.js';
+import { UiConfigPluginOptions } from './vite-plugin-ui-config.js';
+/**
+ * @description
+ * Options for the {@link vendureDashboardPlugin} Vite plugin.
+ *
+ * @docsCategory vite-plugin
+ * @docsPage vendureDashboardPlugin
+ * @since 3.4.0
+ * @docsWeight 1
+ */
+export type VitePluginVendureDashboardOptions = {
+    /**
+     * @description
+     * 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, e.g. `config`.
+     * This is only required if the plugin is unable to auto-detect the name of the exported variable.
+     */
+    vendureConfigExport?: string;
+    /**
+     * @description
+     * The path to the directory where the generated GraphQL Tada files will be output.
+     */
+    gqlOutputPath?: string;
+    tempCompilationDir?: string;
+    /**
+     * @description
+     * 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.
+     */
+    pluginPackageScanner?: PackageScannerConfig;
+    /**
+     * @description
+     * Allows you to specify the module system to use when compiling and loading your Vendure config.
+     * By default, the compiler will use CommonJS, but you can set it to `esm` if you are using
+     * ES Modules in your Vendure project.
+     *
+     * **Status** Developer preview. If you are using ESM please try this out and provide us with feedback!
+     *
+     * @since 3.5.1
+     * @default 'commonjs'
+     */
+    module?: 'commonjs' | 'esm';
+    /**
+     * @description
+     * Allows you to selectively disable individual plugins.
+     * @example
+     * ```ts
+     * vendureDashboardPlugin({
+     *   vendureConfigPath: './config.ts',
+     *   disablePlugins: {
+     *     react: true,
+     *     lingui: true,
+     *   }
+     * })
+     * ```
+     */
+    disablePlugins?: {
+        tanstackRouter?: boolean;
+        linguiBabel?: boolean;
+        react?: boolean;
+        lingui?: boolean;
+        themeVariables?: boolean;
+        tailwindSource?: boolean;
+        tailwindcss?: boolean;
+        configLoader?: boolean;
+        viteConfig?: boolean;
+        adminApiSchema?: boolean;
+        dashboardMetadata?: boolean;
+        uiConfig?: boolean;
+        gqlTada?: boolean;
+        transformIndexHtml?: boolean;
+        translations?: boolean;
+        hmr?: boolean;
+    };
+} & UiConfigPluginOptions & ThemeVariablesPluginOptions;
+/**
+ * @description
+ * This is the Vite plugin which powers the Vendure Dashboard, including:
+ *
+ * - Configuring routing, styling and React support
+ * - Analyzing your VendureConfig file and introspecting your schema
+ * - Loading your custom Dashboard extensions
+ *
+ * @docsCategory vite-plugin
+ * @docsPage vendureDashboardPlugin
+ * @since 3.4.0
+ * @docsWeight 0
+ */
+export declare function vendureDashboardPlugin(options: VitePluginVendureDashboardOptions): PluginOption[];
+/**
+ * Get the normalized path to the Vendure config file given either a string or URL.
+ */
+export declare function getNormalizedVendureConfigPath(vendureConfigPath: string | URL): string;

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

@@ -0,0 +1,170 @@
+import { lingui } from '@lingui/vite-plugin';
+import tailwindcss from '@tailwindcss/vite';
+import { tanstackRouter } from '@tanstack/router-plugin/vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+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 { hmrPlugin } from './vite-plugin-hmr.js';
+import { linguiBabelPlugin } from './vite-plugin-lingui-babel.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 { translationsPlugin } from './vite-plugin-translations.js';
+import { uiConfigPlugin } from './vite-plugin-ui-config.js';
+/**
+ * @description
+ * This is the Vite plugin which powers the Vendure Dashboard, including:
+ *
+ * - Configuring routing, styling and React support
+ * - Analyzing your VendureConfig file and introspecting your schema
+ * - Loading your custom Dashboard extensions
+ *
+ * @docsCategory vite-plugin
+ * @docsPage vendureDashboardPlugin
+ * @since 3.4.0
+ * @docsWeight 0
+ */
+export function vendureDashboardPlugin(options) {
+    var _a, _b;
+    const tempDir = (_a = options.tempCompilationDir) !== null && _a !== void 0 ? _a : path.join(import.meta.dirname, './.vendure-dashboard-temp');
+    const normalizedVendureConfigPath = getNormalizedVendureConfigPath(options.vendureConfigPath);
+    const packageRoot = getDashboardPackageRoot();
+    const linguiConfigPath = path.join(packageRoot, 'lingui.config.js');
+    const disabled = (_b = options.disablePlugins) !== null && _b !== void 0 ? _b : {};
+    if (process.env.IS_LOCAL_DEV !== 'true') {
+        process.env.LINGUI_CONFIG = linguiConfigPath;
+    }
+    const pluginMap = [
+        {
+            key: 'tanstackRouter',
+            plugin: () => tanstackRouter({
+                autoCodeSplitting: true,
+                routeFileIgnorePattern: '.graphql.ts|components|hooks|utils',
+                routesDirectory: path.join(packageRoot, 'src/app/routes'),
+                generatedRouteTree: path.join(packageRoot, 'src/app/routeTree.gen.ts'),
+            }),
+        },
+        {
+            // Custom plugin that transforms Lingui macros using Babel instead of SWC.
+            // This runs BEFORE the react plugin to ensure macros are transformed first.
+            // Using Babel eliminates the SWC binary compatibility issues that caused
+            // "failed to invoke plugin" errors in external projects.
+            // See: https://github.com/vendurehq/vendure/issues/3929
+            key: 'linguiBabel',
+            plugin: () => linguiBabelPlugin(),
+        },
+        {
+            key: 'react',
+            plugin: () => react(),
+        },
+        {
+            key: 'lingui',
+            plugin: () => lingui({}),
+        },
+        {
+            key: 'themeVariables',
+            plugin: () => themeVariablesPlugin({ theme: options.theme }),
+        },
+        {
+            key: 'tailwindSource',
+            plugin: () => dashboardTailwindSourcePlugin(),
+        },
+        {
+            key: 'tailwindcss',
+            plugin: () => tailwindcss(),
+        },
+        {
+            key: 'configLoader',
+            plugin: () => configLoaderPlugin({
+                vendureConfigPath: normalizedVendureConfigPath,
+                outputPath: tempDir,
+                pathAdapter: options.pathAdapter,
+                pluginPackageScanner: options.pluginPackageScanner,
+                module: options.module,
+            }),
+        },
+        {
+            key: 'viteConfig',
+            plugin: () => viteConfigPlugin({ packageRoot }),
+        },
+        {
+            key: 'adminApiSchema',
+            plugin: () => adminApiSchemaPlugin(),
+        },
+        {
+            key: 'dashboardMetadata',
+            plugin: () => dashboardMetadataPlugin(),
+        },
+        {
+            key: 'uiConfig',
+            plugin: () => uiConfigPlugin(options),
+        },
+        {
+            key: 'gqlTada',
+            plugin: () => options.gqlOutputPath &&
+                gqlTadaPlugin({ gqlTadaOutputPath: options.gqlOutputPath, tempDir, packageRoot }),
+        },
+        {
+            key: 'transformIndexHtml',
+            plugin: () => transformIndexHtmlPlugin(),
+        },
+        {
+            key: 'translations',
+            plugin: () => translationsPlugin({
+                packageRoot,
+            }),
+        },
+        {
+            key: 'hmr',
+            plugin: () => hmrPlugin(),
+        },
+    ];
+    const plugins = [];
+    for (const entry of pluginMap) {
+        if (!disabled[entry.key]) {
+            const plugin = entry.plugin();
+            if (plugin) {
+                if (Array.isArray(plugin)) {
+                    plugins.push(...plugin);
+                }
+                else {
+                    plugins.push(plugin);
+                }
+            }
+        }
+    }
+    return plugins;
+}
+/**
+ * @description
+ * Returns the path to the root of the `@wilshop/dashboard` package.
+ */
+function getDashboardPackageRoot() {
+    const fileUrl = import.meta.resolve('@wilshop/dashboard');
+    const packagePath = fileUrl.startsWith('file:') ? new URL(fileUrl).pathname : fileUrl;
+    return fixWindowsPath(path.join(packagePath, '../../../'));
+}
+/**
+ * Get the normalized path to the Vendure config file given either a string or URL.
+ */
+export function getNormalizedVendureConfigPath(vendureConfigPath) {
+    const stringPath = typeof vendureConfigPath === 'string' ? vendureConfigPath : vendureConfigPath.href;
+    if (stringPath.startsWith('file:')) {
+        return fixWindowsPath(new URL(stringPath).pathname);
+    }
+    return fixWindowsPath(stringPath);
+}
+function fixWindowsPath(filePath) {
+    // Fix Windows paths that might start with a leading slash
+    if (process.platform === 'win32') {
+        // Remove leading slash before drive letter on Windows
+        if (/^[/\\][A-Za-z]:/.test(filePath)) {
+            return filePath.substring(1);
+        }
+    }
+    return filePath;
+}

package/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Wilshop Admin Dashboard" />
+    <meta name="author" content="Wilshop" />
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/src/app/main.jsx"></script>
+</body>
+</html>

package/lingui.config.js

@@ -0,0 +1,37 @@
+import { defineConfig } from '@lingui/cli';
+
+export default defineConfig({
+    sourceLocale: 'en',
+    locales: [
+        'he',
+        'ar',
+        'de',
+        'en',
+        'es',
+        'pl',
+        'zh_Hans',
+        'zh_Hant',
+        'pt_BR',
+        'pt_PT',
+        'cs',
+        'fr',
+        'ru',
+        'uk',
+        'it',
+        'fa',
+        'ne',
+        'hr',
+        'nb',
+        'sv',
+        'tr',
+        'ja',
+        'bg'
+    ],
+    catalogs: [
+        {
+            path: '<rootDir>/src/i18n/locales/{locale}',
+            include: ['<rootDir>/src'],
+            exclude: ['<rootDir>/src/**/*.stories.tsx'],
+        },
+    ],
+});