js version of the ast code generator

[AnChunLi]

Is there any js tool that can successfully generate code for the AST parsed by oxc-parser? Neither escodegen nor recast tests work. rust I see oxc_codegen, js is not yet

Is there no plan to support the js version of the generator？

[overlookmotel]

Unfortunately no, not at present. We do plan to support this, but it will be some time coming.

At present, Oxc's AST is not compatible with ESTree, so other codegens which work on ESTree-standard ASTs won't work with Oxc's AST. Our intent is to make the JS-side AST 100% compatible with ESTree (#2463, #2854), and it is an area of current work (#6347), but we do not have an estimated timescale for completion - it's a fairly hard task.

Further down the line, we also plan to provide an NPM package which links into Oxc's oxc_codegen crate to provide a codegen which runs at native speed.

Our current area of focus is features on Rust side - building out the transformer and minifier - so unfortunately the JS-side APIs are somewhat behind. But we do feel that JS-side APIs are also important, and will tackle this in future.

[AnChunLi]

ok，thanks，If I want to try contributing this feature, is that okay? I can use my free time to try！

[overlookmotel]

Thank you for your enthusiasm for getting involved. Right now we have someone working on #6347, which is the groundwork for ESTree-compatibility - basically creating a framework that then we can use to fix the AST type by type.

Those are pretty major changes, and quite complicated. So I suggest best we wait until that work is complete, and then yes we would very much welcome contributions towards making the JS AST conform to ESTree.

When we're in a position to receive contributions on this, we'll create a "good first issue" for it. Please keep a look-out for that.

[AnChunLi]

Thanks，I will keep a look-out this issue

[LilaRest]

@overlookmotel Any update on supporting codegen JS binding?

[overlookmotel]

No, nothing yet. I'm afraid it will likely be a while coming. But... Oxc's AST on JS side is now 100% compatible with the ESTree standard, so we suggest using any ESTree-compatible AST printer (there are several available on NPM).

[LilaRest]

Very useful, thanks @overlookmotel !
Any printer you'd recommend to keep high performances? I did some tests with recast and 75% of the editing time was spent at printing.

[leaysgur]

This is not a direct answer, but FYI #11495

[LilaRest]

esrap v2 looks like a promising option. Will give it a try

[zhangyuang]

I hope oxc can provide oxc_codegen in javascript like @babel/generator which is a very useful feature.
With the latest esrap version, it can't parse oxc ast result.

$ node ./index.js
{
  type: 'Program',
  body: [
    {
      type: 'ImportDeclaration',
      specifiers: [Array],
      source: [Object],
      phase: null,
      attributes: [],
      start: 0,
      end: 26
    },
    {
      type: 'FunctionDeclaration',
      id: [Object],
      generator: false,
      async: false,
      params: [Array],
      body: [Object],
      expression: false,
      start: 28,
      end: 302
    },
    {
      type: 'ExportDefaultDeclaration',
      declaration: [Object],
      start: 304,
      end: 330
    }
  ],
  sourceType: 'module',
  hashbang: null,
  start: 0,
  end: 330
}
file:///Users/user/Desktop/js_test/oxc/node_modules/esrap/src/context.js:104
			throw new Error(message);

Error: Not implemented: Program
    at Context.visit (file:///Users/user/Desktop/js_test/oxc/node_modules/esrap/src/context.js:104:10)
    at print (file:///Users/user/Desktop/js_test/oxc/node_modules/esrap/src/index.js:61:10)

[camc314]

can you share your index.js file? I believe this should work

[zhangyuang]

can you share your index.js file? I believe this should work

Thanks for your reply, this is the content of index.js

const { parseSync } = require('oxc-parser');
const { print } = require('esrap');
const ts = require('esrap/languages/tsx');
const fs = require('fs');
const path = require('path');

// Read the React component file
const componentPath = path.join(__dirname, 'component.jsx');
const sourceCode = fs.readFileSync(componentPath, 'utf8');


const result = parseSync('component.jsx', sourceCode);
console.log(result.program);

const generatedCode = print(result.program, ts);
console.log(generatedCode);

// component.jsx
import React from 'react';

function HelloWorld({ name = 'World' }) {
  const handleClick = () => {
    console.log(`Hello, ${name}!`);
  };

  return (
    <div className="container">
      <h1>Hello, {name}!</h1>
      <button onClick={handleClick}>
        Click me
      </button>
    </div>
  );
}

export default HelloWorld;

[camc314]

https://oxc.rs/docs/guide/usage/parser.html#print for an example

[zhangyuang]

https://oxc.rs/docs/guide/usage/parser.html#print for an example

Oh, I find the problem is I should call ts in the form of a function!