一种组件文档的集成方法及相关装置与流程

本发明涉及计算机组件，尤其涉及一种组件文档的集成方法及相关装置。

背景技术：

1、ui卡片又叫ui组件，通过将页面拆分成多个ui组件，可以提高ui组件的复用效率，提高代码重复利用率，降低开发成本；每个ui组件都用来展示页面中的一小部分，具体ui组件对应页面中哪个区域以及区域大小由开发ui组件的人员来负责设计，比较灵活。

2、现代前端领域开发页面基本都是通过开发ui组件然后通过ui组件组合拼装的方式构建出完整的页面提供给用户浏览使用。每个ui组件都需要1个使用文档(ui文档)来描述组件的详细使用信息。

3、现有技术可以基于ui组件通过代码编写生成一个在隔离环境下的ui文档，方便对外输出。但这种生成ui文档的方式，由于是在隔离环境下生成的，没有可以持续集成(也即持续输出)的工具链，故无法在ui组件更新时，实现ui文档的同步更新。

技术实现思路

1、本发明实施例提供了一种组件文档的集成方法及相关装置，用于在组件更新时，同步输出组件的使用文档，以实现组件使用文档和组件的同步更新。

2、本技术实施例第一方面提供了一种组件文档的集成方法，包括：

3、检查组件的更新，以确定更新后组件的代码；

4、将所述更新后组件的代码转换为脚本可以识别的语法树；

5、利用所述脚本从所述语法树中获取更新后组件的参数，其中，所述更新后组件的参数包括更新后组件的名称、引用路径、默认参数、更新后组件的依赖和更新后组件的依赖说明中的至少一项；

6、利用所述脚本将所述更新后组件的参数转换为符合组件使用文档输出标准的代码；

7、将所述符合组件使用文档输出标准的代码写入至组件的使用文档中。

8、在一些实施例中，所述检查组件的更新，以确定更新后组件的代码，包括：

9、利用代码提交工具自动拦截代码流，以通过差异确定工具确定更新前组件和更新后组件的差异；

10、根据所述更新前组件和更新后组件的差异，确定更新后组件的代码。

11、在一些实施例中，在将所述更新后组件的代码转换为脚本可以识别的语法树之前，所述方法还包括：

12、确定所述组件的开发框架，其中，所述开发框架包括react框架、vue框架或angular框架；

13、利用所述开发框架下的语言，将所述更新后组件的代码转换为脚本可以识别的语法树。

14、在一些实施例中，在利用所述脚本从所述语法树中获取更新后组件的参数之后，所述方法还包括：

15、根据预设的规范库，检查更新后组件的参数是否符合规范，其中，所述预设的规范库支持用户的自定义设置；

16、若是，则触发利用所述脚本将所述更新后组件的参数转换为符合组件使用文档输出标准的代码的步骤。

17、在一些实施例中，所述方法还包括：

18、若所述更新后组件的参数符合规范，则确定所述组件的使用文档中是否存在所述更新后组件的使用文档；

19、若所述组件的使用文档中不存在所述更新后组件的使用文档，则触发利用所述脚本将所述更新后组件的参数转换为符合组件使用文档输出标准的代码的步骤。

20、在一些实施例中，所述方法还包括：

21、若所述更新后组件的参数符合规范，则向用户发送提示指令，其中，所述提示指令用于指示所述用户补全更新后组件的使用文档；

22、若所述用户输入补全指令，则触发利用所述脚本将所述更新后组件的参数转换为符合组件使用文档输出标准的代码的步骤。

23、在一些实施例中，所述方法还包括：

24、根据符合组件使用文档输出标准的代码，生成更新后组件的注释文档。

25、在一些实施例中，所述代码提交工具包括git工具和husky工作流，所述差异确定工具包括gitdiff，所述符合组件使用文档输出标准的代码包括storybook能解析的代码和vitepress能解析的代码。

26、本技术实施例第二方面提供了一种组件文档的集成装置，包括：

27、检查单元，用于检查组件的更新，以确定更新后组件的代码；

28、转换单元，用于将所述更新后组件的代码转换为脚本可以识别的语法树；

29、获取单元，用于利用所述脚本从所述语法树中获取更新后组件的参数，其中，所述更新后组件的参数包括更新后组件的名称、引用路径、默认参数、更新后组件的依赖和更新后组件的依赖说明中的至少一项；

30、所述转换单元，还用于利用所述脚本将所述更新后组件的参数转换为符合组件使用文档输出标准的代码；

31、写入单元，用于将所述符合组件使用文档输出标准的代码写入至组件的使用文档中。

32、在一些实施例中，所述检查单元具体用于：

33、利用代码提交工具自动拦截代码流，以通过差异确定工具确定更新前组件和更新后组件的差异；

34、根据所述更新前组件和更新后组件的差异，确定更新后组件的代码。

35、在一些实施例中，所述装置还包括：

36、确定单元，用于在将所述更新后组件的代码转换为脚本可以识别的语法树之前，确定所述组件的开发框架，其中，所述开发框架包括react框架、vue框架或angular框架；

37、在一些实施例中，所述转换单元，具体用于：

38、利用所述开发框架下的语言，将所述更新后组件的代码转换为脚本可以识别的语法树。

39、在一些实施例中，所述检查单元，还用于：

40、在利用所述脚本从所述语法树中获取更新后组件的参数之后，根据预设的规范库，检查更新后组件的参数是否符合规范，其中，所述预设的规范库支持用户的自定义设置；

41、在一些实施例中，所述装置还包括：

42、触发单元，用于若更新后组件的参数符合规范，则触发利用所述脚本将所述更新后组件的参数转换为符合组件使用文档输出标准的代码的步骤。

43、在一些实施例中，确定单元还用于：

44、若所述更新后组件的参数符合规范，则确定所述组件的使用文档中是否存在所述更新后组件的使用文档；

45、在一些实施例中，所述装置还包括：

46、触发单元，用于若所述组件的使用文档中不存在所述更新后组件的使用文档，则触发利用所述脚本将所述更新后组件的参数转换为符合组件使用文档输出标准的代码的步骤。

47、在一些实施例中，所述装置还包括：

48、发送单元，用于若所述更新后组件的参数符合规范，则向用户发送提示指令，其中，所述提示指令用于指示所述用户补全更新后组件的使用文档；

49、所述触发单元，还用于：

50、若所述用户输入补全指令，则触发利用所述脚本将所述更新后组件的参数转换为符合组件使用文档输出标准的代码的步骤。

51、在一些实施例中，所述装置还包括：

52、生成单元，用于根据符合组件使用文档输出标准的代码，生成更新后组件的注释文档。

53、在一些实施例中，所述代码提交工具包括git工具和husky工作流，所述差异确定工具包括gitdiff，所述符合组件使用文档输出标准的代码包括storybook能解析的代码和vitepress能解析的代码。

54、本技术实施例第三方面提供了一种计算机装置，包括处理器，该处理器在执行存储于存储器上的计算机程序时，用于实现本技术实施例第一方面提供的组件文档集成的方法。

55、本技术实施例第四方面提供了一种计算机可读存储介质，其上存储的计算机程序，该计算机程序被处理器执行时，用于实现本技术实施例第一方面提供的组件文档集成的方法。

56、本技术实施例第五方面提供了一种计算机程序产品，其上存储有计算机程序，该计算机程序被计算机设备执行时，用于实现本技术实施例第一方面提供的组件文档集成的方法。

57、从以上技术方案可以看出，本发明实施例具有以下优点：

58、本技术实施例中，检查组件的更新，以确定更新后组件的代码；将所述更新后组件的代码转换为脚本识别的语法树；利用所述脚本从所述语法树中获取更新后组件的参数，其中，所述更新后组件的参数包括更新后组件的名称、引用路径、默认参数、更新后组件的依赖和更新后组件的依赖说明中的至少一项；利用所述脚本将所述更新后组件的参数转换为符合组件使用文档输出标准的代码；将所述符合组件使用文档输出标准的代码写入至组件的使用文档中。

59、因为本技术实施例可以在组件更新后，利用脚本将更新后组件的代码转换为符合组件使用文档输出标准的代码，并将所述符合组件使用文档输出标准的代码写入至组件的使用文档中，也即实现了组件使用文档和组件的同步更新。