alibaba / lowcode-engine

An enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系
https://lowcode-engine.cn
MIT License
14.58k stars 2.53k forks source link

[@alilc/lowcode-material-parser] 生成 @mantine/core 中组件,sx 属性生成类型错误 #1895

Open StringKe opened 1 year ago

StringKe commented 1 year ago

Describe the bug (required) / 详细描述 bug(必填)

import {Box} from "@mantine/core";

export const MantineBox = Box

MantineBox.displayName = 'MantineBox';

对这样的组件进行生成定义,https://mantine.dev/styles/sx/

mantine 中所有组件默认拥有这个 sx 属性类型为React.CSSProperties 或者 (theme) => React.CSSProperties

通过工具生成出来的 sx 定义拥有三个类型定义,并且变成了数组。

生成后的类型会在 lowcode-engine 中遇到 Cannot read properties of undefined (reading 'map') 错误

错误产生代码行为

https://github.com/alibaba/lowcode-engine/blob/779edf783bac1ef71668fb74eaba44527c99a0f5/packages/editor-skeleton/src/transducers/parse-props.ts#L154


To Reproduce (required) / 如何复现 bug?(必填,非常重要)

  1. 创建 Test.tsx
    
    import {Box} from "@mantine/core";

export const MantineBox = Box

MantineBox.displayName = 'MantineBox';


2. 创建 gen.js

const parse = require('@alilc/lowcode-material-parser').default; const fs = require("fs")

(async () => { const options = { entry: "./Test.tsx", };

const actual = await parse(options);
fs.writeFileSync("./data.json", JSON.stringify(actual, null, 2))

})();


## **Expected behavior (required)** / **预期行为(必填,非常重要)**

生成正确的类型

## **Screenshots (optional)** / **bug 截图(可选)**

![CleanShot 2023-04-17 at 19 04 59@2x](https://user-images.githubusercontent.com/31089228/232466598-223e269e-2b8c-4b70-8e8e-07be5e7fef37.png)

![CleanShot 2023-04-17 at 19 05 08@2x](https://user-images.githubusercontent.com/31089228/232466643-784cdd9e-7279-41fa-9103-ec3cf0c910de.png)

## **Environments (please complete the following information) (required):** / **请提供如下信息(必填)**
 - @alilc/lowcode-material-parser@1.0.4-beta.0

> (this information can be collected via [the manual plugin](https://img.alicdn.com/imgextra/i1/O1CN0115zonY1IsgbkZ2ir7_!!6000000000949-2-tps-3066-1650.png) / 版本信息可[通过低代码用户手册插件收集](https://img.alicdn.com/imgextra/i1/O1CN0115zonY1IsgbkZ2ir7_!!6000000000949-2-tps-3066-1650.png))

## **Additional context (optional)** / **更多额外信息(可选)**
Any other context of the problem here. / 可以追加更多的额外信息,帮助定位问题

生成后的类型包含 
```json
{
    "type": "objectOf",
    "value": "oneOfType"
}

这样的定义似乎是有问题的,无法被 lowcode 加载

akirakai commented 1 year ago

看了下文档,https://mantine.dev/styles/sx/

看起来sx就是会有对象、函数、数组三种类型,入料模块并不会识别你的意图(也许就是想要使用函数),目前的结果是正确的,问题在于搭建态不识别,可以在自动生成之后进行人工微调,或者自定义interface,对sx的类型进行覆盖。