Skip to content

Upgrade node packages + Optimisations to improve memory consumption #1697

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 23 commits into from
May 22, 2025
Merged

Upgrade node packages + Optimisations to improve memory consumption #1697

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
80a2d08
upgrade react-resize-detector, replace ReactResizeDetector comp with …
raheeliftikhar5 Apr 29, 2025
e2a39ef
upgrade react-draggable, added missing nodeRef
raheeliftikhar5 Apr 29, 2025
2130263
replaced react-quill with react-quill-new
raheeliftikhar5 Apr 29, 2025
9ae9a9c
removed react-sortabled-hoc, used dnd-kit for sorting
raheeliftikhar5 Apr 29, 2025
8266951
fix icon comp, icon button when no icon is selected
raheeliftikhar5 Apr 29, 2025
61d5a45
added memoization on table comp
raheeliftikhar5 Apr 29, 2025
41f6276
upgrade comps
raheeliftikhar5 Apr 29, 2025
73c613b
build lowcoder-core after upgrading react version
raheeliftikhar5 Apr 29, 2025
e7c960b
upgraded react, react-dom in lowcoderc-comps + replaced ReactResizeDe…
raheeliftikhar5 Apr 29, 2025
2e1fd49
upgrade packages
raheeliftikhar5 Apr 29, 2025
eae5b3d
optimise drawer comp
raheeliftikhar5 May 21, 2025
9cac3cf
optimise lowcoder-design components
raheeliftikhar5 May 21, 2025
c2c88ec
optimise shared components
raheeliftikhar5 May 21, 2025
707e3e0
optimise table comp, toolbar, filters, summary rows and different col…
raheeliftikhar5 May 21, 2025
405822b
optimise button component
raheeliftikhar5 May 21, 2025
da075f5
optimise editor view
raheeliftikhar5 May 21, 2025
0543b12
optimise canvas view/inner grid, root comp, gridLayout, gridItem and …
raheeliftikhar5 May 21, 2025
05ee98b
optimise form components
raheeliftikhar5 May 21, 2025
c2680f3
optimise modal comp
raheeliftikhar5 May 21, 2025
371a9bc
optimise event handler control
raheeliftikhar5 May 21, 2025
6ef3c5e
remove antd's react 19 patch
raheeliftikhar5 May 21, 2025
6ab43b4
fixed query variable value when used with event handler control
raheeliftikhar5 May 21, 2025
0bdc38c
Merge branch 'dev' into feature/support-react-19
FalkWolsky May 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions client/packages/lowcoder-comps/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
"@fullcalendar/resource-timeline": "^6.1.11",
"@fullcalendar/timegrid": "^6.1.6",
"@fullcalendar/timeline": "^6.1.6",
"@types/react": "^18.2.45",
"@types/react-dom": "^18.2.18",
"@types/react": "^19.1.2",
"@types/react-dom": "^19.1.2",
"agora-rtc-sdk-ng": "^4.20.2",
"agora-rtm-sdk": "^1.5.1",
"big.js": "^6.2.1",
Expand All @@ -28,8 +28,8 @@
"lowcoder-cli": "workspace:^",
"lowcoder-sdk": "workspace:^",
"mermaid": "^10.6.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"typescript": "4.8.4"
},
"lowcoder": {
Expand Down
91 changes: 46 additions & 45 deletions client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoMeetingStreamComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { trans } from "../../i18n/comps";
import { client } from "./meetingControllerComp";
import type { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
import { useEffect, useRef, useState } from "react";
import ReactResizeDetector from "react-resize-detector";
import { useResizeDetector } from "react-resize-detector";

const VideoContainer = styled.video`
height: 100%;
Expand Down Expand Up @@ -132,62 +132,63 @@ let VideoCompBuilder = (function () {
}, [props.userId.value]);
// console.log("userId", userId);

useResizeDetector({
targetRef: conRef,
});

return (
<EditorContext.Consumer>
{(editorState: any) => (
<ReactResizeDetector>
<div
ref={conRef}
style={{
display: "flex",
alignItems: "center",
height: "100%",
overflow: "hidden",
borderRadius: props.style.radius,
aspectRatio: props.videoAspectRatio,
backgroundColor: props.style.background,
padding: props.style.padding,
margin: props.style.margin,
}}
>
{userId ? (
<VideoContainer
onClick={() => props.onEvent("videoClicked")}
ref={videoRef}
style={{
display: `${showVideo ? "flex" : "none"}`,
aspectRatio: props.videoAspectRatio,
borderRadius: props.style.radius,
width: "auto",
}}
id={userId}
></VideoContainer>
) : (
<></>
)}
<div
ref={conRef}
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
height: "100%",
overflow: "hidden",
borderRadius: props.style.radius,
aspectRatio: props.videoAspectRatio,
backgroundColor: props.style.background,
padding: props.style.padding,
margin: props.style.margin,
display: `${!showVideo || userId ? "flex" : "none"}`,
margin: "0 auto",
padding: props.profilePadding,
}}
>
{userId ? (
<VideoContainer
onClick={() => props.onEvent("videoClicked")}
ref={videoRef}
style={{
display: `${showVideo ? "flex" : "none"}`,
aspectRatio: props.videoAspectRatio,
borderRadius: props.style.radius,
width: "auto",
}}
id={userId}
></VideoContainer>
) : (
<></>
)}
<div
<img
alt=""
style={{
flexDirection: "column",
alignItems: "center",
display: `${!showVideo || userId ? "flex" : "none"}`,
margin: "0 auto",
padding: props.profilePadding,
borderRadius: props.profileBorderRadius,
width: "100%",
overflow: "hidden",
}}
>
<img
alt=""
style={{
borderRadius: props.profileBorderRadius,
width: "100%",
overflow: "hidden",
}}
src={props.profileImageUrl.value}
/>
<p style={{ margin: "0" }}>{userName ?? ""}</p>
</div>
src={props.profileImageUrl.value}
/>
<p style={{ margin: "0" }}>{userName ?? ""}</p>
</div>
</ReactResizeDetector>
</div>
)}
</EditorContext.Consumer>
);
Expand Down
92 changes: 47 additions & 45 deletions client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoSharingStreamComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { useEffect, useRef, useState } from "react";
import { client } from "./meetingControllerComp";
import type { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
import { trans } from "../../i18n/comps";
import ReactResizeDetector from "react-resize-detector";
import { useResizeDetector } from "react-resize-detector";
import { ButtonStyleControl } from "./videobuttonCompConstants";

const VideoContainer = styled.video`
Expand Down Expand Up @@ -123,61 +123,63 @@ let SharingCompBuilder = (function () {
}
}, [props.userId.value]);

useResizeDetector({
targetRef: conRef,
});

return (
<EditorContext.Consumer>
{(editorState: any) => (
<ReactResizeDetector>
<div
ref={conRef}
style={{
display: "flex",
alignItems: "center",
height: "100%",
overflow: "hidden",
borderRadius: props?.style?.radius,
aspectRatio: props?.videoAspectRatio,
backgroundColor: props.style?.background,
padding: props.style?.padding,
margin: props.style?.margin,
}}
>
{userId ? (
<VideoContainer
onClick={() => props.onEvent("videoClicked")}
ref={videoRef}
style={{
display: `${showVideoSharing ? "flex" : "none"}`,
aspectRatio: props.videoAspectRatio,
borderRadius: props.style.radius,
width: "auto",
}}
id="share-screen"
></VideoContainer>
) : (
<></>
)}
<div
ref={conRef}
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
height: "100%",
overflow: "hidden",
borderRadius: props?.style?.radius,
aspectRatio: props?.videoAspectRatio,
backgroundColor: props.style?.background,
padding: props.style?.padding,
margin: props.style?.margin,
display: `${!showVideoSharing || userId ? "flex" : "none"}`,
margin: "0 auto",
padding: props.profilePadding,
}}
>
{userId ? (
<VideoContainer
onClick={() => props.onEvent("videoClicked")}
ref={videoRef}
style={{
display: `${showVideoSharing ? "flex" : "none"}`,
aspectRatio: props.videoAspectRatio,
borderRadius: props.style.radius,
width: "auto",
}}
id="share-screen"
></VideoContainer>
) : (
<></>
)}
<div
<img
alt=""
style={{
flexDirection: "column",
alignItems: "center",
display: `${!showVideoSharing || userId ? "flex" : "none"}`,
margin: "0 auto",
padding: props.profilePadding,
borderRadius: props.profileBorderRadius,
width: "100%",
overflow: "hidden",
}}
>
<img
alt=""
style={{
borderRadius: props.profileBorderRadius,
width: "100%",
overflow: "hidden",
}}
src={props.profileImageUrl?.value}
/>
<p style={{ margin: "0" }}>{userName ?? ""}</p>
</div>
src={props.profileImageUrl?.value}
/>
<p style={{ margin: "0" }}>{userName ?? ""}</p>
</div>
</ReactResizeDetector>
</div>
)}
</EditorContext.Consumer>
);
Expand Down
53 changes: 29 additions & 24 deletions client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { barChartChildrenMap, ChartSize, getDataKeys } from "./barChartConstants
import { barChartPropertyView } from "./barChartPropertyView";
import _ from "lodash";
import { useContext, useEffect, useMemo, useRef, useState } from "react";
import ReactResizeDetector from "react-resize-detector";
import { useResizeDetector } from "react-resize-detector";
import ReactECharts from "../basicChartComp/reactEcharts";
import {
childrenToProps,
Expand Down Expand Up @@ -56,7 +56,8 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => {
const mode = comp.children.mode.getView();
const onUIEvent = comp.children.onUIEvent.getView();
const onEvent = comp.children.onEvent.getView();
const echartsCompRef = useRef<ReactECharts | null>();
const echartsCompRef = useRef<ReactECharts | null>(null);
const containerRef = useRef<HTMLDivElement>(null);
const [chartSize, setChartSize] = useState<ChartSize>();
const firstResize = useRef(true);
const theme = useContext(ThemeContext);
Expand Down Expand Up @@ -156,30 +157,34 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => {
if(comp.children.mapInstance.value) return;
}, [option])

useResizeDetector({
targetRef: containerRef,
onResize: ({width, height}) => {
console.log('barChart - resize');
if (width && height) {
setChartSize({ w: width, h: height });
}
if (!firstResize.current) {
// ignore the first resize, which will impact the loading animation
echartsCompRef.current?.getEchartsInstance().resize();
} else {
firstResize.current = false;
}
}
})

return (
<ReactResizeDetector
onResize={(w, h) => {
if (w && h) {
setChartSize({ w: w, h: h });
}
if (!firstResize.current) {
// ignore the first resize, which will impact the loading animation
echartsCompRef.current?.getEchartsInstance().resize();
} else {
firstResize.current = false;
}
}}
>
<div ref={containerRef} style={{height: '100%'}}>
<ReactECharts
ref={(e) => (echartsCompRef.current = e)}
style={{ height: "100%" }}
notMerge
lazyUpdate
opts={{ locale: getEchartsLocale() }}
option={option}
mode={mode}
/>
</ReactResizeDetector>
ref={(e) => (echartsCompRef.current = e)}
style={{ height: "100%" }}
notMerge
lazyUpdate
opts={{ locale: getEchartsLocale() }}
option={option}
mode={mode}
/>
</div>
);
});

Expand Down
Loading
Loading