一种组件文档的集成方法及相关装置制造方法及图纸

本发明专利技术实施例提供了一种组件文档的集成方法及相关装置，用于在组件更新时，同步输出组件的使用文档，以实现组件使用文档和组件的同步更新。本发明专利技术实施例方法包括：检查组件的更新，以确定更新后组件的代码；将所述更新后组件的代码转换为脚本可以识别的语法树；利用所述脚本从所述语法树中获取更新后组件的参数，其中，所述更新后组件的参数包括更新后组件的名称、引用路径、默认参数、更新后组件的依赖和更新后组件的依赖说明中的至少一项；利用所述脚本将所述更新后组件的参数转换为符合组件使用文档输出标准的代码；将所述符合组件使用文档输出标准的代码写入至组件的使用文档中。档中。档中。

【技术实现步骤摘要】
一种组件文档的集成方法及相关装置


[0001]本专利技术涉及计算机组件
，尤其涉及一种组件文档的集成方法及相关装置。

技术介绍

[0002]UI卡片又叫UI组件，通过将页面拆分成多个UI组件，可以提高UI组件的复用效率，提高代码重复利用率，降低开发成本；每个UI组件都用来展示页面中的一小部分，具体UI组件对应页面中哪个区域以及区域大小由开发UI组件的人员来负责设计，比较灵活。
[0003]现代前端领域开发页面基本都是通过开发UI组件然后通过UI组件组合拼装的方式构建出完整的页面提供给用户浏览使用。每个UI组件都需要1个使用文档(UI文档)来描述组件的详细使用信息。
[0004]现有技术可以基于UI组件通过代码编写生成一个在隔离环境下的UI文档，方便对外输出。但这种生成UI文档的方式，由于是在隔离环境下生成的，没有可以持续集成(也即持续输出)的工具链，故无法在UI组件更新时，实现UI文档的同步更新。

技术实现思路

[0005]本专利技术实施例提供了一种组件文档的集成方法及相关装置，用于在组件更新时，同步输出组件的使用文档，以实现组件使用文档和组件的同步更新。
[0006]本申请实施例第一方面提供了一种组件文档的集成方法，包括：
[0007]检查组件的更新，以确定更新后组件的代码；
[0008]将所述更新后组件的代码转换为脚本可以识别的语法树；
[0009]利用所述脚本从所述语法树中获取更新后组件的参数，其中，所述更新后组件的参数包括更新后组件的名称、引用路径、默认参数、更新后组件的依赖和更新后组件的依赖说明中的至少一项；
[0010]利用所述脚本将所述更新后组件的参数转换为符合组件使用文档输出标准的代码；
[0011]将所述符合组件使用文档输出标准的代码写入至组件的使用文档中。
[0012]在一些实施例中，所述检查组件的更新，以确定更新后组件的代码，包括：
[0013]利用代码提交工具自动拦截代码流，以通过差异确定工具确定更新前组件和更新后组件的差异；
[0014]根据所述更新前组件和更新后组件的差异，确定更新后组件的代码。
[0015]在一些实施例中，在将所述更新后组件的代码转换为脚本可以识别的语法树之前，所述方法还包括：
[0016]确定所述组件的开发框架，其中，所述开发框架包括react框架、vue框架或Angular框架；
[0017]利用所述开发框架下的语言，将所述更新后组件的代码转换为脚本可以识别的语
法树。
[0018]在一些实施例中，在利用所述脚本从所述语法树中获取更新后组件的参数之后，所述方法还包括：
[0019]根据预设的规范库，检查更新后组件的参数是否符合规范，其中，所述预设的规范库支持用户的自定义设置；
[0020]若是，则触发利用所述脚本将所述更新后组件的参数转换为符合组件使用文档输出标准的代码的步骤。
[0021]在一些实施例中，所述方法还包括：
[0022]若所述更新后组件的参数符合规范，则确定所述组件的使用文档中是否存在所述更新后组件的使用文档；
[0023]若所述组件的使用文档中不存在所述更新后组件的使用文档，则触发利用所述脚本将所述更新后组件的参数转换为符合组件使用文档输出标准的代码的步骤。
[0024]在一些实施例中，所述方法还包括：
[0025]若所述更新后组件的参数符合规范，则向用户发送提示指令，其中，所述提示指令用于指示所述用户补全更新后组件的使用文档；
[0026]若所述用户输入补全指令，则触发利用所述脚本将所述更新后组件的参数转换为符合组件使用文档输出标准的代码的步骤。
[0027]在一些实施例中，所述方法还包括：
[0028]根据符合组件使用文档输出标准的代码，生成更新后组件的注释文档。
[0029]在一些实施例中，所述代码提交工具包括Git工具和Husky工作流，所述差异确定工具包括Gitdiff，所述符合组件使用文档输出标准的代码包括storybook能解析的代码和Vitepress能解析的代码。
[0030]本申请实施例第二方面提供了一种组件文档的集成装置，包括：
[0031]检查单元，用于检查组件的更新，以确定更新后组件的代码；
[0032]转换单元，用于将所述更新后组件的代码转换为脚本可以识别的语法树；
[0033]获取单元，用于利用所述脚本从所述语法树中获取更新后组件的参数，其中，所述更新后组件的参数包括更新后组件的名称、引用路径、默认参数、更新后组件的依赖和更新后组件的依赖说明中的至少一项；
[0034]所述转换单元，还用于利用所述脚本将所述更新后组件的参数转换为符合组件使用文档输出标准的代码；
[0035]写入单元，用于将所述符合组件使用文档输出标准的代码写入至组件的使用文档中。
[0036]在一些实施例中，所述检查单元具体用于：
[0037]利用代码提交工具自动拦截代码流，以通过差异确定工具确定更新前组件和更新后组件的差异；
[0038]根据所述更新前组件和更新后组件的差异，确定更新后组件的代码。
[0039]在一些实施例中，所述装置还包括：
[0040]确定单元，用于在将所述更新后组件的代码转换为脚本可以识别的语法树之前，确定所述组件的开发框架，其中，所述开发框架包括react框架、vue框架或Angular框架；
[0041]在一些实施例中，所述转换单元，具体用于：
[0042]利用所述开发框架下的语言，将所述更新后组件的代码转换为脚本可以识别的语法树。
[0043]在一些实施例中，所述检查单元，还用于：
[0044]在利用所述脚本从所述语法树中获取更新后组件的参数之后，根据预设的规范库，检查更新后组件的参数是否符合规范，其中，所述预设的规范库支持用户的自定义设置；
[0045]在一些实施例中，所述装置还包括：
[0046]触发单元，用于若更新后组件的参数符合规范，则触发利用所述脚本将所述更新后组件的参数转换为符合组件使用文档输出标准的代码的步骤。
[0047]在一些实施例中，确定单元还用于：
[0048]若所述更新后组件的参数符合规范，则确定所述组件的使用文档中是否存在所述更新后组件的使用文档；
[0049]在一些实施例中，所述装置还包括：
[0050]触发单元，用于若所述组件的使用文档中不存在所述更新后组件的使用文档，则触发利用所述脚本将所述更新后组件的参数转换为符合组件使用文档输出标准的代码的步骤。
[0051]在一些实施例中，所述装置还包括：
[0052]发送单元，用于若所述更新后组件的参数符合规范，则向用户发送提示指令，其中，所述提示指令用于指示所述用户补全更新后组件的使用文档；
[0053]所述触发单元，还用于：
[0054]若所述用户输入补全指本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种组件文档的集成方法，其特征在于，所述方法包括：检查组件的更新，以确定更新后组件的代码；将所述更新后组件的代码转换为脚本可以识别的语法树；利用所述脚本从所述语法树中获取更新后组件的参数，其中，所述更新后组件的参数包括更新后组件的名称、引用路径、默认参数、更新后组件的依赖和更新后组件的依赖说明中的至少一项；利用所述脚本将所述更新后组件的参数转换为符合组件使用文档输出标准的代码；将所述符合组件使用文档输出标准的代码写入至组件的使用文档中。2.根据权利要求1所述的方法，其特征在于，所述检查组件的更新，以确定更新后组件的代码，包括：利用代码提交工具自动拦截代码流，以通过差异确定工具确定更新前组件和更新后组件的差异；根据所述更新前组件和更新后组件的差异，确定更新后组件的代码。3.根据权利要求1所述的方法，其特征在于，在将所述更新后组件的代码转换为脚本可以识别的语法树之前，所述方法还包括：确定所述组件的开发框架，其中，所述开发框架包括react框架、vue框架或Angular框架；利用所述开发框架下的语言，将所述更新后组件的代码转换为脚本可以识别的语法树。4.根据权利要求1所述的方法，其特征在于，在利用所述脚本从所述语法树中获取更新后组件的参数之后，所述方法还包括：根据预设的规范库，检查更新后组件的参数是否符合规范，其中，所述预设的规范库支持用户的自定义设置；若是，则触发利用所述脚本将所述更新后组件的参数转换为符合组件使用...

【专利技术属性】
技术研发人员：程兴业，郭强，文易翀，冯泽宙，王依旋，
申请(专利权)人：腾讯音乐娱乐科技深圳有限公司，
类型：发明
国别省市：