Merge pull request #774 from raheeliftikhar5/lowcoder-sdk-webpack-bundle

[WIP] Reduce lowcoder-sdk initial bundle size

Author: FalkWolsky

client/package.json

@@ -51,7 +51,6 @@
     "mq-polyfill": "^1.1.8",
     "prettier": "^3.1.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.79.0",
     "shelljs": "^0.8.5",
     "svgo": "^3.0.0",
     "typescript": "^4.8.4",
@@ -75,11 +74,12 @@
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
     "@types/styled-components": "^5.1.34",
-    "antd-mobile": "^5.28.0",
+    "antd-mobile": "^5.34.0",
     "chalk": "4",
     "number-precision": "^1.6.0",
     "react-player": "^2.11.0",
     "resize-observer-polyfill": "^1.5.1",
+    "rollup": "^4.13.0",
     "simplebar": "^6.2.5",
     "tui-image-editor": "^3.15.3"
   }

client/packages/lowcoder-comps/.gitignore

@@ -1,3 +1,4 @@
 /lib
 /node_modules
+/package
 *.tgz

client/packages/lowcoder-comps/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ESNext",
     "experimentalDecorators": true,
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,

client/packages/lowcoder-design/src/components/GlobalInstances.tsx

@@ -1,7 +1,7 @@
-import { App } from 'antd';
-import type { MessageInstance } from 'antd/es/message/interface';
-import type { ModalStaticFunctions } from 'antd/es/modal/confirm';
-import type { NotificationInstance } from 'antd/es/notification/interface';
+import { default as App } from "antd/es/app";
+import type { MessageInstance } from "antd/es/message/interface";
+import type { ModalStaticFunctions } from "antd/es/modal/confirm";
+import type { NotificationInstance } from "antd/es/notification/interface";
 
 let messageInstance: MessageInstance;
 let notificationInstance: NotificationInstance;

client/packages/lowcoder-design/src/components/Trees.tsx

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import { ReactComponent as Folded } from "icons/icon-folded.svg";
-import { DataNode, TreeProps } from "antd/lib/tree";
-import DirectoryTree from "antd/lib/tree/DirectoryTree";
+import { DataNode, TreeProps } from "antd/es/tree";
+import DirectoryTree from "antd/es/tree/DirectoryTree";
 
 export const Treediv = styled.div<{ $height?: number }>`
   padding-left: 24px;

client/packages/lowcoder-design/src/components/audio.tsx

@@ -1,8 +1,10 @@
 import { CSSProperties } from "react";
-import { Ref } from "react";
-import ReactPlayer from "react-player";
+import { lazy, Ref } from "react";
+import type {default as ReactPlayerType} from "react-player";
 import styled from "styled-components";
 
+const ReactPlayer = lazy(() => import("react-player"));
+
 const Audio = styled(ReactPlayer)`
   height: 32px !important;
 `;
@@ -14,7 +16,7 @@ export function TacoAudio(props: {
   onEnded?: () => void;
   className?: string;
   style?: CSSProperties;
-  audioRef?: Ref<ReactPlayer>;
+  audioRef?: Ref<ReactPlayerType>;
   autoPlay?: boolean;
   loop?: boolean;
 }) {

client/packages/lowcoder-design/src/components/colorSelect/colorUtils.ts

@@ -1,6 +1,6 @@
 import { colord, extend } from "colord";
 import namesPlugin from "colord/plugins/names";
-import { generate } from "@ant-design/colors";
+import { generate } from "@ant-design/colors/es";
 
 extend([namesPlugin]);
 

client/packages/lowcoder-design/src/components/iconSelect/index.tsx

@@ -1,26 +1,26 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import type { IconDefinition } from "@fortawesome/free-regular-svg-icons";
 // import type { IconDefinition as IconDefinitionBrands } from "@fortawesome/free-brands-svg-icons";
-import { Popover } from "antd";
-import { ActionType } from "@rc-component/trigger/lib/interface";
+import { default as Popover } from "antd/lib/popover";
+import type { ActionType } from "@rc-component/trigger/lib/interface";
 import { TacoInput } from "components/tacoInput";
 import { Tooltip } from "components/toolTip";
 import { trans } from "i18n/design";
-import _ from "lodash";
+import { upperFirst, sortBy } from "lodash";
 import {
   ReactNode,
   useEffect,
   useCallback,
   useMemo,
   useRef,
   useState,
+  Suspense
 } from "react";
 import Draggable from "react-draggable";
-import { default as List, ListRowProps } from "react-virtualized/dist/es/List";
+import { default as List, type ListRowProps } from "react-virtualized/dist/es/List";
 import styled from "styled-components";
 import { CloseIcon, SearchIcon } from "icons";
 import { ANTDICON } from "icons/antIcon";
-import { Divider } from "antd-mobile";
 
 const PopupContainer = styled.div`
   width: 580px;
@@ -141,7 +141,7 @@ class Icon {
   readonly title: string;
   constructor(readonly def: IconDefinition | any, readonly names: string[]) {
     if (def?.iconName) {
-      this.title = def.iconName.split("-").map(_.upperFirst).join(" ");
+      this.title = def.iconName.split("-").map(upperFirst).join(" ");
     } else {
       this.title = names[0].slice(5);
       this.def = def;
@@ -231,7 +231,7 @@ function search(
     .toLowerCase()
     .split(/\s+/g)
     .filter((t) => t);
-  return _.sortBy(
+  return sortBy(
     Object.entries(allIcons).filter(([key, icon]) => {
       if (icon.names.length === 0) {
         return false;
@@ -297,7 +297,11 @@ const IconPopup = (props: {
                   onChangeIcon(key);
                 }}
               >
-                <IconWrapper>{icon.getView()}</IconWrapper>
+                <IconWrapper>
+                  <Suspense fallback={null}>
+                    {icon.getView()}
+                  </Suspense>
+                </IconWrapper>
                 <IconKeyDisplay>{key}</IconKeyDisplay>
               </IconItemContainer>
             </Tooltip>

client/packages/lowcoder-design/src/components/markdown.tsx

@@ -1,9 +1,12 @@
 import { css } from "styled-components";
-import ReactMarkdown from "react-markdown";
+import { lazy } from "react";
+// import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
 import remarkGfm from "remark-gfm";
-import { ReactMarkdownOptions } from "react-markdown/lib/react-markdown";
+import type { ReactMarkdownOptions } from "react-markdown/lib/react-markdown";
+
+const ReactMarkdown = lazy(() => import('react-markdown'));
 
 export const markdownCompCss = css`
   .markdown-body {

client/packages/lowcoder-design/src/components/query.tsx

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import { default as Alert } from "antd/es/alert";
 import { ReactNode } from "react";
-import { AlertProps } from "antd/lib/alert";
+import { AlertProps } from "antd/es/alert";
 import { ToolTipLabel } from "./toolTip";
 import { DocLink } from "components/ExternalLink";
 

client/packages/lowcoder-design/src/components/video.tsx

@@ -1,7 +1,10 @@
-import ReactPlayer from "react-player";
+// import ReactPlayer from "react-player";
+import { lazy } from 'react';
 import styled from "styled-components";
 import { videoPlayTriangle } from "icons";
 
+const ReactPlayer = lazy(() => import("react-player"));
+
 export const Video = styled(ReactPlayer)`
   height: 100% !important;
   width: 100% !important;