Merge branch 'main' into ZheSun88-patch-6

packages/ts/file-router/src/vite-plugin.ts

@@ -86,12 +86,15 @@ export default function vitePluginFileSystemRouter({
 
       const changeListener = (file: string): void => {
         if (!file.startsWith(dir)) {
+          if (file === fileURLToPath(runtimeUrls.json)) {
+            server.hot.send({ type: 'full-reload' });
+          }
           return;
         }
 
-        generateRuntimeFiles(_viewsDir, runtimeUrls, extensions, _logger)
-          .then(() => server.hot.send({ type: 'full-reload' }))
-          .catch((e: unknown) => _logger.error(String(e)));
+        generateRuntimeFiles(_viewsDir, runtimeUrls, extensions, _logger).catch((e: unknown) =>
+          _logger.error(String(e)),
+        );
       };
 
       server.watcher.on('add', changeListener);

packages/ts/file-router/test/vite-plugin/vite-plugin.spec.ts

@@ -0,0 +1,59 @@
+import { EventEmitter } from 'node:events';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { expect, use } from '@esm-bundle/chai';
+import chaiAsPromised from 'chai-as-promised';
+import sinon from 'sinon';
+import sinonChai from 'sinon-chai';
+import vitePluginFileSystemRouter from '../../src/vite-plugin';
+
+use(chaiAsPromised);
+use(sinonChai);
+
+describe('@vaadin/hilla-file-router', () => {
+  describe('vite-plugin', () => {
+    const rootDir = pathToFileURL('/path/to/project/');
+    const outDir = new URL('dist/', rootDir);
+    const viewsDir = new URL('frontend/views/', rootDir);
+    const generatedDir = new URL('frontend/generated/', rootDir);
+    const watcher = new EventEmitter();
+    const mockServer = {
+      hot: {
+        send: sinon.spy(),
+      },
+      watcher,
+    };
+    const plugin = vitePluginFileSystemRouter({ isDevMode: true });
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error: the configResolved method could be either a function or an object.
+    plugin.configResolved({
+      logger: { info: sinon.spy() },
+      root: fileURLToPath(rootDir),
+      build: { outDir: fileURLToPath(outDir) },
+    });
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error: the configResolved method could be either a function or an object.
+    plugin.configureServer(mockServer);
+
+    beforeEach(() => {
+      sinon.resetHistory();
+    });
+
+    it('should send full-reload only when file-routes.json is added', () => {
+      expect(mockServer.hot.send).to.not.be.called;
+      mockServer.watcher.emit('add', fileURLToPath(new URL('file-routes.json', generatedDir)));
+      expect(mockServer.hot.send).to.be.calledWith({ type: 'full-reload' });
+    });
+
+    it('should send full-reload only when file-routes.json changes', () => {
+      expect(mockServer.hot.send).to.not.be.called;
+      mockServer.watcher.emit('change', fileURLToPath(new URL('file-routes.json', generatedDir)));
+      expect(mockServer.hot.send).to.be.calledWith({ type: 'full-reload' });
+    });
+
+    it('should not send full-reload when other files change', () => {
+      expect(mockServer.hot.send).to.not.be.called;
+      mockServer.watcher.emit('change', fileURLToPath(new URL('file.tsx', viewsDir)));
+      expect(mockServer.hot.send).to.not.be.called;
+    });
+  });
+});

packages/ts/react-crud/src/autogrid.tsx

@@ -85,6 +85,12 @@ interface AutoGridOwnProps<TItem> {
    * can be specified using dot notation, e.g. `address.street`.
    */
   visibleColumns?: string[];
+  /**
+   * Allows to customize which columns to hide. This must be an array of property
+   * names that are defined in the model. Nested properties can be specified using
+   * dot notation, e.g. `address.street`.
+   */
+  hiddenColumns?: string[];
   /**
    * Disables header filters, which are otherwise enabled by default.
    */
@@ -136,6 +142,7 @@ export type AutoGridProps<TItem> = GridProps<TItem> & Readonly<AutoGridOwnProps<
 
 interface ColumnConfigurationOptions {
   visibleColumns?: string[];
+  hiddenColumns?: string[];
   noHeaderFilters?: boolean;
   customColumns?: JSX.Element[];
   columnOptions?: Record<string, ColumnOptions>;
@@ -258,6 +265,11 @@ function useColumns(
 
   columns = addCustomColumns(columns, options, setColumnFilter);
 
+  // When using `hiddenColumns` option, remove columns to hide using their `key`
+  if (options.hiddenColumns) {
+    columns = columns.filter(({ key }) => !(key && options.hiddenColumns?.includes(key)));
+  }
+
   if (options.rowNumbers) {
     columns = [
       <GridColumn key="rownumbers" width="4em" flexGrow={0} renderer={AutoGridRowNumberRenderer}></GridColumn>,
@@ -292,6 +304,7 @@ function AutoGridInner<TItem>(
     itemIdProperty,
     experimentalFilter,
     visibleColumns,
+    hiddenColumns,
     noHeaderFilters,
     customColumns,
     columnOptions,
@@ -351,6 +364,7 @@ function AutoGridInner<TItem>(
   const properties = visibleColumns ? modelInfo.getProperties(visibleColumns) : getDefaultProperties(modelInfo);
   const children = useColumns(properties, setHeaderFilter, {
     visibleColumns,
+    hiddenColumns,
     noHeaderFilters,
     customColumns,
     columnOptions,

packages/ts/react-crud/test/autogrid.spec.tsx

@@ -1093,7 +1093,7 @@ describe('@vaadin/hilla-react-crud', () => {
         expect(grid.getBodyCellContent(0, 0)).to.have.rendered.text('IT');
       });
 
-      it('should ignore unknown columns', async () => {
+      it('should ignore unknown columns when using visibleColumns', async () => {
         const grid = await GridController.init(
           render(
             <TestAutoGrid visibleColumns={['foo', 'email', 'bar', 'firstName', 'address.foo', 'department.foo']} />,
@@ -1103,6 +1103,51 @@ describe('@vaadin/hilla-react-crud', () => {
         await assertColumns(grid, 'email', 'firstName');
       });
 
+      it('should hide columns and keep default order', async () => {
+        const grid = await GridController.init(
+          render(<TestAutoGrid hiddenColumns={['gender', 'birthDate', 'address.country']} />),
+          user,
+        );
+        await assertColumns(
+          grid,
+          'firstName',
+          'lastName',
+          'email',
+          'someInteger',
+          'someDecimal',
+          'vip',
+          'shiftStart',
+          'appointmentTime',
+          'address.street',
+          'address.city',
+          'department',
+        );
+      });
+
+      it('should ignore unknown columns when using hiddenColumns', async () => {
+        const grid = await GridController.init(
+          render(
+            <TestAutoGrid hiddenColumns={['foo', 'gender', 'bar', 'birthDate', 'address.foo', 'department.foo']} />,
+          ),
+          user,
+        );
+        await assertColumns(
+          grid,
+          'firstName',
+          'lastName',
+          'email',
+          'someInteger',
+          'someDecimal',
+          'vip',
+          'shiftStart',
+          'appointmentTime',
+          'address.street',
+          'address.city',
+          'address.country',
+          'department',
+        );
+      });
+
       it('uses custom column options on top of the type defaults', async () => {
         const NameRenderer = ({ item }: { item: Person }): JSX.Element => <span>{item.firstName.toUpperCase()}</span>;
         const StreetRenderer = ({ item }: { item: Person }): JSX.Element => (
@@ -1320,6 +1365,41 @@ describe('@vaadin/hilla-react-crud', () => {
         expect(grid.getBodyCellContent(0, 0)).to.have.rendered.text('Jane Love');
       });
 
+      it('should hide configured columns and render remaining columns including custom columns at the end', async () => {
+        const grid = await GridController.init(
+          render(
+            <TestAutoGrid
+              noHeaderFilters
+              hiddenColumns={[
+                'email',
+                'someInteger',
+                'someDecimal',
+                'vip',
+                'shiftStart',
+                'appointmentTime',
+                'address.street',
+                'address.city',
+                'address.country',
+                'department',
+                'secondFullName',
+              ]}
+              customColumns={[
+                <GridColumn key="fullName" header="Full name" autoWidth renderer={FullNameRenderer}></GridColumn>,
+                <GridColumn
+                  key="secondFullName"
+                  header="Second full name"
+                  autoWidth
+                  renderer={FullNameHyphenRenderer}
+                ></GridColumn>,
+              ]}
+            />,
+          ),
+          user,
+        );
+        await assertColumnsOrder(grid, 'firstName', 'lastName', 'gender', 'birthDate', 'fullName');
+        expect(grid.getBodyCellContent(0, 4)).to.have.rendered.text('Jane Love');
+      });
+
       describe('with header filters', () => {
         let clock: sinon.SinonFakeTimers;