lazy load comps

Author: raheeliftikhar5

client/packages/lowcoder/package.json

@@ -127,6 +127,7 @@
     "typescript": "^4.8.4",
     "vite": "^4.5.2",
     "vite-plugin-checker": "^0.5.1",
+    "vite-plugin-dynamic-import": "^1.5.0",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-svgr": "^2.2.2",
     "vite-tsconfig-paths": "^3.6.0"

client/packages/lowcoder/src/components/JSLibraryModal.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import React, { ReactNode, useEffect, useState } from "react";
+import React, { ReactNode, lazy, useEffect, useState } from "react";
 import { CustomModal } from "components/CustomModal";
 import { trans } from "i18n";
 import { DocLink } from "components/ExternalLink";

client/packages/lowcoder/src/comps/comps/allComp.test.tsx

@@ -63,9 +63,15 @@ const COMPS_MAP = {
   tableColumnRender: RenderComp,
 } as Record<string, CompConstructor>;
 
-Object.entries(uiCompRegistry).forEach(([key, value]) => {
-  COMPS_MAP["ui_" + key] = value.comp;
-});
+Object.entries(uiCompRegistry).forEach(async ([key, value]) => {
+  if(value.lazyLoad) {
+    const module = await import(`../${value.compPath}`!);
+    COMPS_MAP["ui_" + key] = module[value.compName!];
+  } else {
+    COMPS_MAP["ui_" + key] = value.comp!;
+  }
+})
+
 Object.keys(QueryMap).forEach((key) => {
   COMPS_MAP["query_" + key] = (QueryMap as Record<string, CompConstructor>)[key];
 });

client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx

@@ -195,7 +195,7 @@ const onFlyDrop = (layout: Layout, items: Layout, dispatch: DispatchType) => {
   }
 };
 
-const onDrop = (
+const onDrop = async (
   layout: Layout,
   items: Layout,
   event: DragEvent<HTMLElement>,
@@ -222,7 +222,17 @@ const onDrop = (
     const nameGenerator = editorState.getNameGenerator();
     const compInfo = parseCompType(compType);
     const compName = nameGenerator.genItemName(compInfo.compName);
-    const defaultDataFn = uiCompRegistry[compType as UICompType]?.defaultDataFn;
+    const {
+      defaultDataFnName,
+      defaultDataFnPath,
+    } = uiCompRegistry[compType as UICompType];
+
+    let defaultDataFn = undefined;
+    if(defaultDataFnName && defaultDataFnPath) {
+      const module = await import(`../../${defaultDataFnPath}.tsx`);
+      defaultDataFn = module[defaultDataFnName];
+    }
+
     const widgetValue: GridItemDataType = {
       compType,
       name: compName,

client/packages/lowcoder/src/comps/comps/fileComp/fileComp.test.tsx

@@ -1,6 +1,7 @@
-import { readFile } from "fs/promises";
+// import { readFile } from "fs/promises";
 import { resolveParsedValue } from "./fileComp";
 import mime from "mime";
+const { readFile } = require("node:fs/promises");
 
 global.TextDecoder = require("util").TextDecoder;
 
@@ -90,7 +91,7 @@ function toArrayBuffer(buf: Buffer) {
 }
 
 function getFile(path: string) {
-  return readFile(path).then((b) => ({
+  return readFile(path).then((b: Buffer) => ({
     originFileObj: {
       arrayBuffer: () => new Promise((resolve) => resolve(toArrayBuffer(b))),
       type: mime.getType(path.substring(path.lastIndexOf("."))),

client/packages/lowcoder/src/comps/comps/gridItemComp.tsx

@@ -23,6 +23,7 @@ import { profilerCallback } from "util/cacheUtils";
 import { setFieldsNoTypeCheck, shallowEqual } from "util/objectUtils";
 import { remoteComp } from "./remoteComp/remoteComp";
 import { SimpleNameComp } from "./simpleNameComp";
+import { lazyLoadComp } from "./lazyLoadComp/lazyLoadComp";
 
 export function defaultLayout(compType: UICompType): UICompLayoutInfo {
   return uiCompRegistry[compType]?.layoutInfo ?? { w: 5, h: 5 };
@@ -38,6 +39,7 @@ const TmpComp = withTypeAndChildren<
 >(
   (type) => {
     const compInfo = parseCompType(type);
+
     if (compInfo.isRemote) {
       return remoteComp(compInfo);
     }
@@ -46,8 +48,15 @@ const TmpComp = withTypeAndChildren<
       if (name !== type) {
         continue;
       }
-      const comp = manifest.withoutLoading ? manifest.comp : withIsLoading(manifest.comp);
-      return withErrorBoundary(comp) as ExposingMultiCompConstructor;
+
+      if(manifest.lazyLoad) {
+        return lazyLoadComp(
+          manifest.compName,
+          manifest.compPath,
+        );
+      }
+      const comp = manifest.withoutLoading ? manifest.comp : withIsLoading(manifest.comp!);
+      return withErrorBoundary(comp!) as ExposingMultiCompConstructor;
     }
   },
   "button",

client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/dateWidget.tsx

@@ -1,4 +1,4 @@
-import { WidgetProps } from "@rjsf/utils";
+import type { WidgetProps } from "@rjsf/utils";
 import { default as DatePicker } from "antd/es/date-picker";
 import dayjs from "dayjs";
 

client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx

@@ -1,5 +1,5 @@
 import { withTheme } from '@rjsf/core';
-import { RJSFValidationError, ErrorListProps, UISchemaSubmitButtonOptions } from "@rjsf/utils";
+import type { RJSFValidationError, ErrorListProps, UISchemaSubmitButtonOptions } from "@rjsf/utils";
 import validator from "@rjsf/validator-ajv8";
 // import Ajv from "@rjsf/validator-ajv8";
 import { default as Button } from "antd/es/button";
@@ -10,9 +10,8 @@ import { JsonSchemaFormStyle, JsonSchemaFormStyleType } from "comps/controls/sty
 import { depsConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { withMethodExposing } from "comps/generators/withMethodExposing";
 import { ValueFromOption } from "lowcoder-design";
-import { i18n } from "lowcoder-core";
 import { i18nObjs, trans } from "i18n";
-import { JSONSchema7 } from "json-schema";
+import type { JSONSchema7 } from "json-schema";
 import styled from "styled-components";
 import { toBoolean, toNumber, toString } from "util/convertUtils";
 import { Section, sectionNames } from "lowcoder-design";

client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.test.tsx

@@ -0,0 +1,111 @@
+import { ExecuteAction } from "comps/controls/actionSelector/executeCompTypes";
+import { simpleMultiComp, valueComp } from "comps/generators";
+import { withSimpleExposing } from "comps/generators/withExposing";
+import { withMethodExposing } from "comps/generators/withMethodExposing";
+import { evalAndReduce } from "comps/utils";
+import { customAction } from "lowcoder-core";
+import { lazyLoadComp } from "./lazyLoadComp";
+
+const TestComp = valueComp<number>(123);
+export { TestComp };
+
+const compName = 'TestComp';
+const compPath = 'comps/lazyLoadComp/lazyLoadComp.test';
+
+const RComp = lazyLoadComp(compName, compPath);
+
+test("lazyload comp", async () => {
+  let c: any = null;
+  c = new RComp({
+    dispatch: (action) => {
+      if (c) {
+        c = c.reduce(action);
+      }
+    },
+  });
+
+  expect(c.toJsonValue()).toBe(undefined);
+  await c.load();
+  expect(c.toJsonValue()).toBe(123);
+
+  c.dispatchChangeValueAction(345);
+  expect(c.toJsonValue()).toBe(345);
+});
+
+test("lazyload comp keep values", async () => {
+  let c: any = null;
+  c = new RComp({
+    dispatch: (action) => {
+      if (c) {
+        c = c.reduce(action);
+      }
+    },
+    value: 456,
+  });
+  
+  expect(c.toJsonValue()).toBe(456);
+  await c.load();
+  expect(c.toJsonValue()).toBe(456);
+});
+
+test("lazyload comp exposing data", async () => {
+  const EComp = lazyLoadComp(compName, compPath, async () => {
+    return withSimpleExposing(simpleMultiComp({ hello: valueComp(123) }), (comp) => {
+      return {
+        hello: comp.children.hello.getView(),
+      };
+    });
+  });
+
+  let c: any = null;
+  c = new EComp({
+    dispatch: (action) => {
+      if (c) {
+        c = c.reduce(action);
+      }
+    },
+  });
+
+  await c.load();  
+  const c1 = evalAndReduce(c);
+  expect(c1.exposingValues.hello).toBe(123);
+});
+
+test("lazyload comp execute method", async () => {
+  const MComp = lazyLoadComp(compName, compPath, async () => {
+    return withMethodExposing(simpleMultiComp({ hello: valueComp<number>(123) }), [
+      {
+        method: {
+          name: "add",
+          params: [{ name: "value", type: "number" }],
+        },
+        execute: (comp, values) => {
+          const hello = comp.children.hello;
+          hello.dispatchChangeValueAction(hello.getView() + (values[0] as number));
+        },
+      },
+    ]);
+  });
+  let c: any = null;
+  c = new MComp({
+    dispatch: (action) => {
+      if (c) {
+        c = c.reduce(action);
+      }
+    },
+  });
+
+  await c.load();
+  c.reduce(
+    customAction<ExecuteAction>(
+      {
+        type: "execute",
+        methodName: "add",
+        params: [10],
+      },
+      false
+    )
+  );
+  await new Promise((r) => setTimeout(r, 20));
+  expect(c.children.hello.getView()).toEqual(133);
+});