OXC for ArkTS/ArkUI

Ranger0929
9 阅读3分钟

OXC 是近期在前端社区中新起的基于Rust实现的全新工具，提供了全链路的高性能工具，如：代码解析、代码规范检查、代码格式化等。

而ArkTS/ArkUI可以看作是JS/TS设计下的一种”方言“，类似于JSX/TSX。因此，理论上可以基于OXC的原始设计来对ArkTS/ArkUI语法进行解析和拓展。从而实现OXC来解析ArkTS/ArkUI，并且能够用于进行代码格式规范检查、代码格式化等其他方向。

而本文就是基于此前提下的一些简单介绍。

背景

ArkTS/ArkUI 在JS/TS的基础上，新发展了一些特有的”方言“用于表达鸿蒙环境下的特殊能力。在日常开发中，我们经常会对源码在编译前或者编译阶段进行一些代码操作，从而满足我们动态化、自动化的一些诉求。

而系统目前并没有提供独立可用的AST解析工具，因此大部分社区开发者都较为粗暴的直接使用JS/TS的解析工具来进行，这已经能够满足90%以上的场景了。但是在部分场景下，如果出现了ArkTS/ArkUI拓展的语法，这个就会导致解析工具解析AST失败。

// JS/TS 无法解析
@Concurrent
function test(){}

因此，这时候就要求我们的代码必须在编写的时候尽量规避需要解析AST的文件使用拓展语法。

另外系统和IDE侧未提供完善的代码格式化工具，这对于大型项目开发来说是极为重要的功能，以确保整体的代码风格一致性。

因此笔者从两年前就一直在寻找一个更好的解决方案来解决以上问题。近年来随着AI技术的发展和Rust语言的发展，OXC逐渐成为了备选项。基于Rust良好的类型系统和编译器能力以及OXC优秀的设计，通过AI快速实现对OXC的拓展来支持ArkTS/ArkUI的AST解析变成了可能。

因此近段时间通过AI完成了初版实现，实现了最简版本的AST解析和代码格式化功能。

实现

目前所有的实现基本上都是通过AI实现，我们要做的事情仅仅是告诉AI我们的拓展语法需要支持哪些语法规范。经过一些简单的梳理，目前已知的拓展能力主要如下所示：

  1. 支持struct结构体语法，基本上等于class语法。

    struct Text {
    build() {
        View()
        View()
    }
}

  2. 支持函数链式调用，链式调用时前置函数可以不存在函数体本身。

    struct Text {
    build() {
        View(){
        }
        .width()
        .height()
    }
}

  3. 支持dot语法，dot语法本身也支持链式调用。

    @Extend(Text)
function Style(){
   .width()
   .height()
}

  4. 函数支持装饰器。

    @Concurrent
function test(){}

  5. export和export default对应的变量都支持装饰器。

    @Component
export struct Text {
    build() {
        View()
        View()
    }
}

  6. 支持import lazy语法。

    import lazy { a } from "a";

  7. export declare 支持装饰器

    @Component
struct declare Text {

}

这里列出的是目前在各种项目中执行的时候发现的一些情况，若有遗漏可做补充。目前基于OXC拓展实现的格式化工具，在格式化官方的示例仓库时，8000+文件在15个线程下可以做到一分钟左右完成格式化。

项目地址为：github.com/ohos-rs/oxc…

规划

目前仅实现了简单格式化能力，后续还需要继续优化的能力如下所示：

  1. 基本对齐oxfmt格式化能力，确保对于鸿蒙项目能够完成90%以上的文件格式的格式化能力。
  2. 提供parser能力，允许开发者开发自定义工具对ArkTS/ArkUI实现自定义处理。

感谢OXC团队优秀的开源作品，让我们能够基于此做更多的工作～希望本文对你有所帮助～

avatar
文章
阅读
粉丝