Skip to content

Commit bc7349b

Browse files
radubreharradubrehar
authored
Enhance perf by adopting new react context strategy (#285) and release version major canary
1 parent 10521d1 commit bc7349b

File tree

104 files changed

+3332
-848
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

104 files changed

+3332
-848
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ on:
77
- 'source/src/**'
88
- 'examples/src/**/*.spec.ts'
99
- 'examples/src/**/*.page.tsx'
10+
- 'examples/src/**/*.ts'
1011

1112
concurrency:
1213
group: ${{ github.workflow }}

‎examples/perf-baselines.ci.json‎

Lines changed: 97 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,107 @@
11
{
2-
"tests/table/perf/default:horizontal-scrolling": {
3-
"scriptingTime": 111.42,
4-
"renderingTime": 26.61,
5-
"paintingTime": 8.89,
6-
"totalTime": 714.34,
2+
"tests/table/perf/default:horizontal-scrolling with tracing": {
3+
"scriptingTime": 135.73,
4+
"renderingTime": 23.92,
5+
"paintingTime": 8.11,
6+
"totalTime": 628.45,
7+
"threshold": 10
8+
},
9+
"tests/table/perf/flashing/default:perf should be fine when single click": {
10+
"scriptingTime": 22.01,
11+
"renderingTime": 0.48,
12+
"paintingTime": 0.07,
13+
"totalTime": 155.95,
14+
"threshold": 10
15+
},
16+
"tests/table/perf/flashing/default:should be able to collapse and expand nodes with no error": {
17+
"scriptingTime": 163.94,
18+
"renderingTime": 81.91,
19+
"paintingTime": 5.63,
20+
"totalTime": 451.16,
21+
"threshold": 10
22+
},
23+
"tests/table/perf/flashing/default:perf should remain stable for 50 clicks": {
24+
"scriptingTime": 847.02,
25+
"renderingTime": 35.58,
26+
"paintingTime": 28.71,
27+
"totalTime": 3126.17,
28+
"threshold": 10
29+
},
30+
"tests/table/props/column/column-change:works correctly": {
31+
"scriptingTime": 39.5,
32+
"renderingTime": 4.08,
33+
"paintingTime": 0.88,
34+
"totalTime": 251.63,
35+
"threshold": 10
36+
},
37+
"tests/table/props/column-pinning/virtualization:should work correctly": {
38+
"scriptingTime": 162.82,
39+
"renderingTime": 8.74,
40+
"paintingTime": 0.9,
41+
"totalTime": 230.74,
42+
"threshold": 10
43+
},
44+
"tests/table/props/data/basic-add-data:insert data": {
45+
"scriptingTime": 198.43,
46+
"renderingTime": 4.35,
47+
"paintingTime": 1.37,
48+
"totalTime": 301.11,
49+
"threshold": 10
50+
},
51+
"tests/table/props/data/basic-update:via API should not rerender header": {
52+
"scriptingTime": 23.61,
53+
"renderingTime": 2.46,
54+
"paintingTime": 0.97,
55+
"totalTime": 221.55,
56+
"threshold": 10
57+
},
58+
"tests/table/props/data/editing/column-editor:should use custom editor when configured": {
59+
"scriptingTime": 118.99,
60+
"renderingTime": 32.66,
61+
"paintingTime": 5.04,
62+
"totalTime": 628.58,
63+
"threshold": 10
64+
},
65+
"tests/table/props/data/editing/persistEdit:should not persist changes to the id column": {
66+
"scriptingTime": 56.02,
67+
"renderingTime": 11.96,
68+
"paintingTime": 1.26,
69+
"totalTime": 294.24,
70+
"threshold": 10
71+
},
72+
"tests/table/props/data/editing/persistEdit:should call and wait for async persistEdit correctly": {
73+
"scriptingTime": 81.64,
74+
"renderingTime": 20.67,
75+
"paintingTime": 2.25,
76+
"totalTime": 575.84,
77+
"threshold": 10
78+
},
79+
"tests/table/props/data/edit-with-delay:on string column": {
80+
"scriptingTime": 322.51,
81+
"renderingTime": 24.6,
82+
"paintingTime": 17.67,
83+
"totalTime": 4084.08,
84+
"threshold": 10
85+
},
86+
"tests/table/props/filtering/filter-value/client-side:Filters correctly": {
87+
"scriptingTime": 254.35,
88+
"renderingTime": 29.37,
89+
"paintingTime": 7.81,
90+
"totalTime": 455.72,
791
"threshold": 10
892
},
993
"tests/table/props/data/scrolling:scrolls the table with performance tracing": {
10-
"scriptingTime": 304.86,
11-
"renderingTime": 94.59,
12-
"paintingTime": 49.87,
13-
"totalTime": 652.31,
94+
"scriptingTime": 473.23,
95+
"renderingTime": 141,
96+
"paintingTime": 57.1,
97+
"totalTime": 906.55,
1498
"threshold": 10
1599
},
16100
"tests/table/props/data/update:clicks update button 30 times with performance tracing": {
17-
"scriptingTime": 579.33,
18-
"renderingTime": 36.93,
19-
"paintingTime": 51.26,
20-
"totalTime": 3089.28,
101+
"scriptingTime": 642.03,
102+
"renderingTime": 43.1,
103+
"paintingTime": 45.53,
104+
"totalTime": 3284.21,
21105
"threshold": 10
22106
}
23107
}

‎examples/perf-baselines.radubrehar.json‎

Lines changed: 109 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
11
{
2-
"tests/table/props/data/update:clicks update button 30 times with performance tracing": {
3-
"scriptingTime": 1464.83,
4-
"renderingTime": 23.22,
5-
"paintingTime": 13.42,
6-
"totalTime": 3736.29,
7-
"threshold": 10
8-
},
92
"tests/table/props/data/scrolling:clicks update button 30 times with performance tracing": {
103
"scriptingTime": 1919.15,
114
"renderingTime": 24.01,
@@ -14,10 +7,115 @@
147
"threshold": 10
158
},
169
"tests/table/props/data/scrolling:scrolls the table with performance tracing": {
17-
"scriptingTime": 546.06,
18-
"renderingTime": 33.65,
19-
"paintingTime": 17.5,
20-
"totalTime": 679.69,
10+
"scriptingTime": 256.07,
11+
"renderingTime": 33.59,
12+
"paintingTime": 7.53,
13+
"totalTime": 407.22,
14+
"threshold": 10
15+
},
16+
"tests/table/perf/default:horizontal-scrolling": {
17+
"scriptingTime": 133.1,
18+
"renderingTime": 11.79,
19+
"paintingTime": 3.78,
20+
"totalTime": 638.69,
21+
"threshold": 10
22+
},
23+
"tests/table/props/data/basic-update:via API should not rerender header": {
24+
"scriptingTime": 64.32,
25+
"renderingTime": 1.21,
26+
"paintingTime": 0.2,
27+
"totalTime": 114.46,
28+
"threshold": 10
29+
},
30+
"tests/table/props/column/column-change:works correctly": {
31+
"scriptingTime": 81.79,
32+
"renderingTime": 2.38,
33+
"paintingTime": 0.52,
34+
"totalTime": 195.19,
35+
"threshold": 10
36+
},
37+
"tests/table/props/data/editing/column-editor:should use custom editor when configured": {
38+
"scriptingTime": 126.92,
39+
"renderingTime": 11.75,
40+
"paintingTime": 1.58,
41+
"totalTime": 515.07,
42+
"threshold": 10
43+
},
44+
"tests/table/props/data/editing/persistEdit:should call and wait for async persistEdit correctly": {
45+
"scriptingTime": 124.13,
46+
"renderingTime": 7.72,
47+
"paintingTime": 0.84,
48+
"totalTime": 433.35,
49+
"threshold": 10
50+
},
51+
"tests/table/props/data/editing/persistEdit:should not persist changes to the id column": {
52+
"scriptingTime": 111.24,
53+
"renderingTime": 6.03,
54+
"paintingTime": 0.96,
55+
"totalTime": 221.65,
56+
"threshold": 10
57+
},
58+
"tests/table/props/data/basic-add-data:insert data": {
59+
"scriptingTime": 85.44,
60+
"renderingTime": 1.87,
61+
"paintingTime": 0.71,
62+
"totalTime": 136.82,
63+
"threshold": 10
64+
},
65+
"tests/table/props/data/edit-with-delay:on string column": {
66+
"scriptingTime": 117.09,
67+
"renderingTime": 9.03,
68+
"paintingTime": 1.78,
69+
"totalTime": 3834.25,
70+
"threshold": 10
71+
},
72+
"tests/table/props/filtering/filter-value/client-side:Filters correctly": {
73+
"scriptingTime": 109.36,
74+
"renderingTime": 8.93,
75+
"paintingTime": 2.03,
76+
"totalTime": 265.19,
77+
"threshold": 10
78+
},
79+
"tests/table/perf/flashing/default:perf should be fine when single click": {
80+
"scriptingTime": 71.41,
81+
"renderingTime": 0.39,
82+
"paintingTime": 0.06,
83+
"totalTime": 89.04,
84+
"threshold": 10
85+
},
86+
"tests/table/perf/flashing/default:should be able to collapse and expand nodes with no error": {
87+
"scriptingTime": 152.55,
88+
"renderingTime": 25.5,
89+
"paintingTime": 2.65,
90+
"totalTime": 257.12,
91+
"threshold": 10
92+
},
93+
"tests/table/perf/flashing/default:perf should remain stable for 50 clicks": {
94+
"scriptingTime": 638.96,
95+
"renderingTime": 23.08,
96+
"paintingTime": 11,
97+
"totalTime": 2647.44,
98+
"threshold": 10
99+
},
100+
"tests/table/props/data/update:clicks update button 30 times with performance tracing": {
101+
"scriptingTime": 382.65,
102+
"renderingTime": 22.89,
103+
"paintingTime": 12.41,
104+
"totalTime": 2626.64,
105+
"threshold": 10
106+
},
107+
"tests/table/perf/default:horizontal-scrolling.": {
108+
"scriptingTime": 293.15,
109+
"renderingTime": 10.42,
110+
"paintingTime": 2.43,
111+
"totalTime": 734.17,
112+
"threshold": 10
113+
},
114+
"tests/table/perf/default:horizontal-scrolling with tracing": {
115+
"scriptingTime": 121.15,
116+
"renderingTime": 11.14,
117+
"paintingTime": 3,
118+
"totalTime": 645.6,
21119
"threshold": 10
22120
}
23121
}

‎examples/src/pages/components/datasource/index.page.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import * as React from 'react';
22

3-
import { DataSource, useDataSourceState } from '@infinite-table/infinite-react';
3+
import {
4+
DataSource,
5+
useDataSourceSelector,
6+
} from '@infinite-table/infinite-react';
47

58
interface Person {
69
name: string;
@@ -13,9 +16,13 @@ const persons: Person[] = [
1316
];
1417

1518
const Cmp = () => {
16-
const ds = useDataSourceState<Person>();
19+
const { dataArray, loading } = useDataSourceSelector((ctx) => {
20+
return {
21+
dataArray: ctx.dataSourceState.dataArray,
22+
loading: ctx.dataSourceState.loading,
23+
};
24+
});
1725

18-
const { dataArray, loading } = ds;
1926
return (
2027
<div>
2128
{loading ? 'loading' : null}

‎examples/src/pages/tests/datasource/default.page.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import * as React from 'react';
22

3-
import { DataSource, useDataSourceState } from '@infinite-table/infinite-react';
3+
import {
4+
DataSource,
5+
useDataSourceSelector,
6+
} from '@infinite-table/infinite-react';
47

58
interface Person {
69
name: string;
@@ -14,9 +17,12 @@ const persons: Person[] = [
1417
];
1518

1619
const Cmp = () => {
17-
const ds = useDataSourceState<Person>();
18-
19-
const { dataArray, loading } = ds;
20+
const { dataArray, loading } = useDataSourceSelector((ctx) => {
21+
return {
22+
dataArray: ctx.dataSourceState.dataArray,
23+
loading: ctx.dataSourceState.loading,
24+
};
25+
});
2026

2127
return (
2228
<div aria-label="container" style={{ color: 'tomato' }}>

‎examples/src/pages/tests/datasource/grouped-ssr.page.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,16 @@ import * as React from 'react';
33
import {
44
DataSource,
55
DataSourceData,
6-
useDataSourceState,
6+
useDataSourceSelector,
77
} from '@infinite-table/infinite-react';
88

99
const Cmp = () => {
10-
const ds = useDataSourceState<Developer>();
11-
12-
const { dataArray, loading } = ds;
10+
const { dataArray, loading } = useDataSourceSelector((ctx) => {
11+
return {
12+
dataArray: ctx.dataSourceState.dataArray,
13+
loading: ctx.dataSourceState.loading,
14+
};
15+
});
1316

1417
return (
1518
<div>

‎examples/src/pages/tests/datasource/sortinfo-controlled.page.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
import {
22
DataSource,
33
DataSourceSortInfo,
4-
useDataSourceState,
4+
useDataSourceSelector,
55
} from '@infinite-table/infinite-react';
66
import * as React from 'react';
77

88
import { Person, persons } from './sortPersons';
99
const Cmp = () => {
10-
const ds = useDataSourceState<Person>();
11-
12-
const { dataArray, loading } = ds;
10+
const { dataArray, loading } = useDataSourceSelector((ctx) => {
11+
return {
12+
dataArray: ctx.dataSourceState.dataArray,
13+
loading: ctx.dataSourceState.loading,
14+
};
15+
});
1316

1417
return (
1518
<div>

‎examples/src/pages/tests/table/custom-structure.page.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
InfiniteTableColumn,
55
DataSourceGroupBy,
66
components,
7-
useDataSourceState,
7+
useDataSourceSelector,
88
} from '@infinite-table/infinite-react';
99
import * as React from 'react';
1010

@@ -98,7 +98,11 @@ export default function App() {
9898
}
9999

100100
function AppGrid() {
101-
const { dataArray } = useDataSourceState();
101+
const { dataArray } = useDataSourceSelector((ctx) => {
102+
return {
103+
dataArray: ctx.dataSourceState.dataArray,
104+
};
105+
});
102106
return (
103107
<div
104108
style={{

0 commit comments

Comments
 (0)