@vendure/dashboard 3.3.4-master-202506181256 → 3.3.4-master-202506181834

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

@@ -2,16 +2,36 @@ import path from 'path';
 export function viteConfigPlugin({ packageRoot }) {
     return {
         name: 'vendure:vite-config-plugin',
-        config: (config) => {
-            var _a, _b, _c, _d;
+        config: (config, env) => {
+            var _a, _b, _c, _d, _e;
+            // 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
+            // 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;
+            // If we are building and no explicit outDir has been provided (or it is a relative path),
+            // set it to an **absolute** path relative to the cwd so that the output never ends up in
+            // `node_modules`.
+            if (env.command === 'build') {
+                const buildConfig = (_a = config.build) !== null && _a !== void 0 ? _a : {};
+                const hasOutDir = typeof buildConfig.outDir === 'string' && buildConfig.outDir.length > 0;
+                const outDirIsAbsolute = hasOutDir && path.isAbsolute(buildConfig.outDir);
+                const normalizedOutDir = hasOutDir
+                    ? outDirIsAbsolute
+                        ? buildConfig.outDir
+                        : path.resolve(process.cwd(), buildConfig.outDir)
+                    : path.resolve(process.cwd(), 'dist/vendure-dashboard');
+                config.build = Object.assign(Object.assign({}, buildConfig), { outDir: normalizedOutDir });
+            }
             config.resolve = {
-                alias: Object.assign(Object.assign({}, ((_b = (_a = config.resolve) === null || _a === void 0 ? void 0 : _a.alias) !== null && _b !== void 0 ? _b : {})), { '@': path.resolve(packageRoot, './src/lib') }),
+                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: [
-                    ...(((_c = config.optimizeDeps) === null || _c === void 0 ? void 0 : _c.exclude) || []),
+                    ...(((_d = config.optimizeDeps) === null || _d === void 0 ? void 0 : _d.exclude) || []),
                     '@vendure/dashboard',
                     '@/providers',
                     '@/framework',
@@ -26,7 +46,7 @@ export function viteConfigPlugin({ packageRoot }) {
                 // on lodash which is a CJS packages and _does_ require
                 // pre-bundling.
                 include: [
-                    ...(((_d = config.optimizeDeps) === null || _d === void 0 ? void 0 : _d.include) || []),
+                    ...(((_e = config.optimizeDeps) === null || _e === void 0 ? void 0 : _e.include) || []),
                     '@/components > recharts',
                     '@/components > react-dropzone',
                 ] });

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.3.4-master-202506181256",
+    "version": "3.3.4-master-202506181834",
     "type": "module",
     "repository": {
         "type": "git",
@@ -86,8 +86,8 @@
         "@types/react-dom": "^19.0.4",
         "@types/react-grid-layout": "^1.3.5",
         "@uidotdev/usehooks": "^2.4.1",
-        "@vendure/common": "^3.3.4-master-202506181256",
-        "@vendure/core": "^3.3.4-master-202506181256",
+        "@vendure/common": "^3.3.4-master-202506181834",
+        "@vendure/core": "^3.3.4-master-202506181834",
         "@vitejs/plugin-react": "^4.3.4",
         "awesome-graphql-client": "^2.1.0",
         "class-variance-authority": "^0.7.1",
@@ -130,5 +130,5 @@
         "lightningcss-linux-arm64-musl": "^1.29.3",
         "lightningcss-linux-x64-musl": "^1.29.1"
     },
-    "gitHead": "2b51aa1b137d9ce0feea6ebb1ee2318d905672de"
+    "gitHead": "78db619a3a32108f73408c0e8ecc1846c78529a0"
 }

package/src/lib/framework/page/detail-page.tsx

@@ -1,18 +1,19 @@
+import { DateTimeInput } from '@/components/data-input/datetime-input.js';
 import { FormFieldWrapper } from '@/components/shared/form-field-wrapper.js';
+import { Button } from '@/components/ui/button.js';
+import { Checkbox } from '@/components/ui/checkbox.js';
 import { Input } from '@/components/ui/input.js';
+import { NEW_ENTITY_PATH } from '@/constants.js';
 import { useDetailPage } from '@/framework/page/use-detail-page.js';
 import { Trans } from '@/lib/trans.js';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { AnyRoute, useNavigate } from '@tanstack/react-router';
 import { ResultOf, VariablesOf } from 'gql.tada';
-import { DateTimeInput } from '@/components/data-input/datetime-input.js';
-import { Button } from '@/components/ui/button.js';
-import { Checkbox } from '@/components/ui/checkbox.js';
-import { NEW_ENTITY_PATH } from '@/constants.js';
 import { toast } from 'sonner';
 import { getOperationVariablesFields } from '../document-introspection/get-document-structure.js';
 
 import {
+    CustomFieldsPageBlock,
     DetailFormGrid,
     Page,
     PageActionBar,
@@ -37,6 +38,11 @@ export interface DetailPageProps<
     U extends TypedDocumentNode<any, any>,
     EntityField extends keyof ResultOf<T> = DetailEntityPath<T>,
 > {
+    /**
+     * @description
+     * The name of the entity.
+     */
+    entityName?: string;
     /**
      * @description
      * A unique identifier for the page.
@@ -94,6 +100,7 @@ export function DetailPage<
 >({
     pageId,
     route,
+    entityName,
     queryDocument,
     createDocument,
     updateDocument,
@@ -110,7 +117,7 @@ export function DetailPage<
         createDocument,
         params: { id: params.id },
         setValuesForUpdate,
-        onSuccess: async (data) => {
+        onSuccess: async data => {
             toast.success('Updated successfully');
             resetForm();
             const id = (data as any).id;
@@ -143,41 +150,53 @@ export function DetailPage<
             <PageLayout>
                 <PageBlock column="main" blockId="main-form">
                     <DetailFormGrid>
-                        {updateFields.map(fieldInfo => {
-                            if (fieldInfo.name === 'id' && fieldInfo.type === 'ID') {
-                                return null;
-                            }
-                            return (
-                                <FormFieldWrapper
-                                    key={fieldInfo.name}
-                                    control={form.control}
-                                    name={fieldInfo.name as never}
-                                    label={fieldInfo.name}
-                                    render={({ field }) => {
-                                        switch (fieldInfo.type) {
-                                            case 'Int':
-                                            case 'Float':
-                                                return (
-                                                    <Input
-                                                        type="number"
-                                                        value={field.value}
-                                                        onChange={e => field.onChange(e.target.valueAsNumber)}
-                                                    />
-                                                );
-                                            case 'DateTime':
-                                                return <DateTimeInput {...field} />;
-                                            case 'Boolean':
-                                                return <Checkbox value={field.value} onCheckedChange={field.onChange} />;
-                                            case 'String':
-                                            default:
-                                                return <Input {...field} />;
-                                        }
-                                    }}
-                                />
-                            );
-                        })}
+                        {updateFields
+                            .filter(fieldInfo => fieldInfo.name !== 'customFields')
+                            .map(fieldInfo => {
+                                if (fieldInfo.name === 'id' && fieldInfo.type === 'ID') {
+                                    return null;
+                                }
+                                return (
+                                    <FormFieldWrapper
+                                        key={fieldInfo.name}
+                                        control={form.control}
+                                        name={fieldInfo.name as never}
+                                        label={fieldInfo.name}
+                                        render={({ field }) => {
+                                            switch (fieldInfo.type) {
+                                                case 'Int':
+                                                case 'Float':
+                                                    return (
+                                                        <Input
+                                                            type="number"
+                                                            value={field.value}
+                                                            onChange={e =>
+                                                                field.onChange(e.target.valueAsNumber)
+                                                            }
+                                                        />
+                                                    );
+                                                case 'DateTime':
+                                                    return <DateTimeInput {...field} />;
+                                                case 'Boolean':
+                                                    return (
+                                                        <Checkbox
+                                                            value={field.value}
+                                                            onCheckedChange={field.onChange}
+                                                        />
+                                                    );
+                                                case 'String':
+                                                default:
+                                                    return <Input {...field} />;
+                                            }
+                                        }}
+                                    />
+                                );
+                            })}
                     </DetailFormGrid>
                 </PageBlock>
+                {entityName && (
+                    <CustomFieldsPageBlock column="main" entityType={entityName} control={form.control} />
+                )}
             </PageLayout>
         </Page>
     );

package/vite/vite-plugin-config.ts

@@ -1,11 +1,39 @@
 import path from 'path';
-import { Plugin, UserConfig } from 'vite';
+import { ConfigEnv, Plugin, UserConfig } from 'vite';
 
 export function viteConfigPlugin({ packageRoot }: { packageRoot: string }): Plugin {
     return {
         name: 'vendure:vite-config-plugin',
-        config: (config: UserConfig) => {
+        config: (config: UserConfig, env: ConfigEnv) => {
+            // 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
+            // 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;
+
+            // If we are building and no explicit outDir has been provided (or it is a relative path),
+            // set it to an **absolute** path relative to the cwd so that the output never ends up in
+            // `node_modules`.
+            if (env.command === 'build') {
+                const buildConfig = config.build ?? {};
+
+                const hasOutDir = typeof buildConfig.outDir === 'string' && buildConfig.outDir.length > 0;
+                const outDirIsAbsolute = hasOutDir && path.isAbsolute(buildConfig.outDir as string);
+
+                const normalizedOutDir = hasOutDir
+                    ? outDirIsAbsolute
+                        ? (buildConfig.outDir as string)
+                        : path.resolve(process.cwd(), buildConfig.outDir as string)
+                    : path.resolve(process.cwd(), 'dist/vendure-dashboard');
+
+                config.build = {
+                    ...buildConfig,
+                    outDir: normalizedOutDir,
+                };
+            }
+
             config.resolve = {
                 alias: {
                     ...(config.resolve?.alias ?? {}),