关于 AST 转 JSX 的疑问.

[w88975]

某段 React JSX 的代码, 通过 acorn 转为 JS 的 AST 树, 在通过 AST 树转回 JS 代码, 但是最后输出的代码里,JSX 部分被转为了 h 函数.

JSX 代码

export default function Home() {
  return (
    <View className={styles.homeContainer}>
      <Logo uri="//gw.alicdn.com/tfs/TB1MRC_cvb2gK0jSZK9XXaEgFXa-1701-1535.png" />
      <Text className={styles.homeTitle}>Welcome to Your Rax App</Text>
      <Text className={styles.homeInfo}>More information about Rax</Text>
      <Text className={styles.homeInfo}>Visit https://rax.js.orgx</Text>
    </View>
  );
}

output 代码

export default function Home() {
    return h("View", {
        className: styles.homeContainer
    }, [h("Logo", {
        uri: "//gw.alicdn.com/tfs/TB1MRC_cvb2gK0jSZK9XXaEgFXa-1701-1535.png"
    }), h("Text", {
        className: styles.homeTitle
    }, ["Welcome to Your Rax App"]), h("Text", {
        className: styles.homeInfo
    }, ["More information about Rax"]), h("Text", {
        className: styles.homeInfo
    }, ["Visit https://rax.js.orgx"])]);
}

问: 如何才能将 AST 转回 JS 代码的时候, JSX 部分保持原有的 JSX 语法, 而不是 JS 函数?

[triple7]

你是用什么把 ast 转为代码的。

[w88975]

@triple7 jsx-ast-transformer astring

[triple7]

建议你把细节说明下，关键代码。

按照我搜索到的库，你是这样使用的吗

let ast = transform(jsx_ast, { factory: "h" });

另外为啥不用 babel，这是比较成熟的全套方案，而且有丰富的文档。

[triple7]

按照 jsx-ast-transformer 项目介绍：
Transforms JSX AST into regular JS AST

大概率是只能转到 js ast 。