Merge branch feat/jsSlotRender into develop

Title: fix: 修复低代码组件Slot下表达式未解析完全 

Link: https://code.aone.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/codereview/8203101

packages/renderer-core/test/renderer/__snapshots__/renderer.test.tsx.snap

@@ -1008,6 +1008,68 @@ exports[`JSExpression JSFunction props with loop 1`] = `
 </div>
 `;
 
+exports[`JSExpression JSSlot has loop 1`] = `
+<div
+  className="lce-page"
+  style={Object {}}
+>
+  <div
+    __id="node_ocl1ao1o7w3"
+    __style__=":root {
+ padding: 12px;
+ background: #f2f2f2;
+ border: 1px solid #ddd;
+}"
+    behavior="NORMAL"
+    className="div_l1ao7pfc"
+    customClassName=""
+    fieldId="div_l1ao7lvq"
+    forwardRef={[Function]}
+    useFieldIdAsDomId={false}
+  >
+    <div>
+      这是一个低代码业务组件~
+    </div>
+  </div>
+  <div
+    __id="node_ocl1ao1o7w3"
+    __style__=":root {
+ padding: 12px;
+ background: #f2f2f2;
+ border: 1px solid #ddd;
+}"
+    behavior="NORMAL"
+    className="div_l1ao7pfc"
+    customClassName=""
+    fieldId="div_l1ao7lvq"
+    forwardRef={[Function]}
+    useFieldIdAsDomId={false}
+  >
+    <div>
+      这是一个低代码业务组件~
+    </div>
+  </div>
+  <div
+    __id="node_ocl1ao1o7w3"
+    __style__=":root {
+ padding: 12px;
+ background: #f2f2f2;
+ border: 1px solid #ddd;
+}"
+    behavior="NORMAL"
+    className="div_l1ao7pfc"
+    customClassName=""
+    fieldId="div_l1ao7lvq"
+    forwardRef={[Function]}
+    useFieldIdAsDomId={false}
+  >
+    <div>
+      这是一个低代码业务组件~
+    </div>
+  </div>
+</div>
+`;
+
 exports[`JSExpression base props 1`] = `
 <div
   className="lce-page"

packages/renderer-core/test/renderer/renderer.test.tsx

@@ -236,6 +236,89 @@ describe('JSExpression', () => {
 
       componentSnapshot = component;
       done();
-    });;
+    });
   });
+
+  it('JSSlot has loop', (done) => {
+    const schema = {
+      componentName: "Page",
+      props: {},
+      children: [
+        {
+          componentName: "SlotComponent",
+          id: "node_k8bnubvz",
+          props: {
+            mobileSlot: {
+              type: "JSSlot",
+              title: "mobile容器",
+              name: "mobileSlot",
+              value: [
+                {
+                  condition: true,
+                  hidden: false,
+                  children: [
+                    {
+                      condition: true,
+                      hidden: false,
+                      loopArgs: [
+                        "item",
+                        "index"
+                        ],
+                        isLocked: false,
+                        conditionGroup: "",
+                        componentName: "Text",
+                        id: "node_ocl1ao1o7w4",
+                        title: "",
+                        props: {
+                          maxLine: 0,
+                          showTitle: false,
+                          className: "text_l1ao7pfb",
+                          behavior: "NORMAL",
+                          content: "这是一个低代码业务组件~",
+                          __style__: ":root {\n font-size: 14px;\n color: #666;\n}",
+                          fieldId: "text_l1ao7lvp"
+                        }
+                    }
+                  ],
+                  loop: {
+                    type: "JSExpression",
+                    value: "state.content"
+                  },
+                  loopArgs: [
+                      "item",
+                      "index"
+                  ],
+                  isLocked: false,
+                  conditionGroup: "",
+                  componentName: "Div",
+                  id: "node_ocl1ao1o7w3",
+                  title: "",
+                  props: {
+                    useFieldIdAsDomId: false,
+                    customClassName: "",
+                    className: "div_l1ao7pfc",
+                    behavior: "NORMAL",
+                    __style__: ":root {\n padding: 12px;\n background: #f2f2f2;\n border: 1px solid #ddd;\n}",
+                    fieldId: "div_l1ao7lvq"
+                  }
+                }
+              ]
+            },
+          },
+        }
+      ],
+      state: {
+        content: {
+          type: "JSExpression",
+          value: "[{}, {}, {}]",
+        },
+      },
+    };
+
+    getComp(schema, components.Div).then(({ component, inst }) => {
+      expect(inst.length).toBe(3);
+      componentSnapshot = component;
+      done();
+    });
+  })
 })

packages/renderer-core/test/utils/components.tsx

@@ -1,6 +1,10 @@
 import { Box, Breadcrumb, Form, Select, Input, Button, Table, Pagination, Dialog } from '@alifd/next';
 
-const Div = (props) => (<div {...props}>{props.children}</div>);
+const Div = (props: any) => (<div {...props}>{props.children}</div>);
+
+const Text = (props: any) => (<div>{props.content}</div>);
+
+const SlotComponent = (props: any) => props.mobileSlot;
 
 const components = {
   Box,
@@ -17,6 +21,8 @@ const components = {
   Dialog,
   ErrorComponent: Select,
   Div,
+  SlotComponent,
+  Text,
 };
 
 export default components;

packages/utils/build.test.json

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    "build-plugin-component",
+    "@ali/lowcode-test-mate/plugin/index.ts"
+  ]
+}

packages/utils/jest.config.js

@@ -0,0 +1,14 @@
+const esModules = ['@recore/obx-react'].join('|');
+
+module.exports = {
+  transformIgnorePatterns: [
+    `/node_modules/(?!${esModules})/`,
+  ],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
+  collectCoverage: true,
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!**/node_modules/**',
+    '!**/vendor/**',
+  ],
+};

packages/utils/package.json

@@ -9,6 +9,7 @@
   "main": "lib/index.js",
   "module": "es/index.js",
   "scripts": {
+    "test": "build-scripts test --config build.test.json",
     "build": "build-scripts build --skip-demo"
   },
   "dependencies": {

packages/utils/src/schema.ts

@@ -26,7 +26,7 @@ export function compatibleLegaoSchema(props: any): any {
         type: 'JSSlot',
         title: (props.value.props as any)?.slotTitle,
         name: (props.value.props as any)?.slotName,
-        value: props.value.children,
+        value: compatibleLegaoSchema(props.value.children),
         params: (props.value.props as any)?.slotParams,
       };
     } else {

packages/utils/test/src/__snapshots__/schema.test.ts.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Schema Ut props 1`] = `
+Object {
+  "props": Object {
+    "mobileSlot": Object {
+      "name": undefined,
+      "params": undefined,
+      "title": undefined,
+      "type": "JSSlot",
+      "value": Array [
+        Object {
+          "loop": Object {
+            "mock": undefined,
+            "type": "JSExpression",
+            "value": "props.content",
+          },
+        },
+      ],
+    },
+  },
+}
+`;

packages/utils/test/src/schema.test.ts

@@ -0,0 +1,27 @@
+import { compatibleLegaoSchema } from '../../src/schema';
+describe('Schema Ut', () => {
+  it('props', () => {
+    const schema = {
+      props: {
+        mobileSlot: {
+          type: "JSBlock",
+          value: {
+            componentName: "Slot",
+            children: [
+              {
+                loop: {
+                  variable: "props.content",
+                  type: "variable"
+                },
+              }
+            ],
+          }
+        },
+      },
+  };
+
+    const result = compatibleLegaoSchema(schema);
+    expect(result).toMatchSnapshot();
+    expect(result.props.mobileSlot.value[0].loop.type).toBe('JSExpression');
+  });
+})