fix: make useRenderer hook synchronous (#180) (#183)

Co-authored-by: Tomi Virkki <[email protected]>

dev/pages/Grid.tsx

@@ -0,0 +1,39 @@
+import { Grid, type GridDataProvider } from '../../src/Grid.js';
+import { GridSelectionColumn } from '../../src/GridSelectionColumn.js';
+import { GridTreeColumn } from '../../src/GridTreeColumn.js';
+import { GridColumn } from '../../src/GridColumn.js';
+import { Tooltip } from '../../src/Tooltip.js';
+
+type Item = {
+  name: string;
+  children: boolean;
+};
+
+const dataProvider: GridDataProvider<Item> = ({ parentItem, page, pageSize }, cb) => {
+  const levelSize = parentItem ? 5 : 100;
+
+  const pageItems = [...Array(Math.min(levelSize, pageSize))].map((_, i) => {
+    const indexInLevel = page * pageSize + i;
+
+    return {
+      name: `${parentItem ? parentItem.name + '-' : ''}${indexInLevel}`,
+      children: true,
+    };
+  });
+
+  cb(pageItems, levelSize);
+};
+
+export default function () {
+  return (
+    <Grid itemIdPath="name" dataProvider={dataProvider}>
+      <GridSelectionColumn frozen autoSelect dragSelect />
+      <GridTreeColumn frozen path="name" width="200px" />
+      <GridColumn path="name" width="200px" />
+      <GridColumn path="name" width="200px" />
+      <GridColumn path="name" width="200px" />
+
+      <Tooltip slot="tooltip" hoverDelay={500} hideDelay={500} />
+    </Grid>
+  );
+}

src/renderers/useRenderer.ts

@@ -7,7 +7,7 @@ import {
   useCallback,
   useReducer,
 } from 'react';
-import { createPortal } from 'react-dom';
+import { createPortal, flushSync } from 'react-dom';
 import type { Slice, WebComponentRenderer } from './renderer.js';
 
 export type UseRendererResult<W extends WebComponentRenderer> = readonly [
@@ -34,7 +34,7 @@ export function useRenderer<P extends {}, W extends WebComponentRenderer>(
   convert?: (props: Slice<Parameters<W>, 1>) => PropsWithChildren<P>,
 ): UseRendererResult<W> {
   const [map, update] = useReducer<typeof rendererReducer<W>>(rendererReducer, initialState);
-  const renderer = useCallback(((...args: Parameters<W>) => update(args)) as W, []);
+  const renderer = useCallback(((...args: Parameters<W>) => flushSync(() => update(args))) as W, []);
 
   return reactRendererOrNode
     ? [

test/Grid.spec.tsx

@@ -10,6 +10,7 @@ import { GridSortColumn } from '../src/GridSortColumn.js';
 import type { GridBodyReactRendererProps } from '../src/renderers/grid.js';
 import catchRender from './utils/catchRender.js';
 import { GridColumnGroup } from '../src/GridColumnGroup.js';
+import { findByQuerySelector } from './utils/findByQuerySelector.js';
 
 useChaiPlugin(chaiDom);
 
@@ -120,6 +121,19 @@ describe('Grid', () => {
       expect(surnameBodyCell2).to.have.text('Starr');
       expect(roleBodyCell2).to.have.text('drums');
     });
+
+    it('should consider custom renderer content with column auto-width', async () => {
+      render(
+        <Grid<Item> items={items}>
+          <GridColumn<Item> header="name" autoWidth flexGrow={0}>
+            {({ item }) => <button style={{ width: '300px' }}>{item.name}</button>}
+          </GridColumn>
+        </Grid>,
+      );
+
+      const column = await findByQuerySelector('vaadin-grid-column');
+      expect(parseFloat(String(column.width))).to.be.greaterThan(300);
+    });
   });
 
   describe('GridFilterColumn', () => {