AST to JSX conversion (?)

[rrjanbiah]

Context: I'm trying to create a React to SolidJS converter using swc-playground as a base https://github.com/rrjanbiah/react2solid/tree/main/converter With the base swc-playground, I'm able to convert the React code to AST. I want to do some manipulations in the AST and convert back to the original/JSX code.

Is AST to JSX/React code possible? If possible, please share relevant links.

If not possible, please suggest the starting point for the development.

TIA

[rrjanbiah]

Replying my own question with what it is upto now:

Babel has generator that is providing AST to JSX:

import generate from "@babel/generator";
const { code } = generate(ast);

Though it looks promising, it doesn't seem to be working with SWC generated AST (Getting unknown node of type "Module" with constructor "Object" when tried to use)

[overlookmotel]

Babel's AST format and SWC's are different in quite a few ways. Also, some other tools use another format again called ESTree.

If you want to use @babel/generator for printing AST to code, you should do the whole thing in Babel - parse the input code in Babel so you get a Babel-format AST which then @babel/generator will understand.

On the other hand, if you want to use SWC, use SWC's print() or printSync() methods. They do exactly the same thing as @babel/generator, but with an SWC-format AST.

I think these methods are undocumented at present, but the code for them in SWC is here:

swc/node-swc/src/index.ts

Lines 92 to 110 in 9feabcd

	/**
	* Note: this method should be invoked on the compiler instance used
	* for `parse()` / `parseSync()`.
	*/
	async print(m: Program, options?: Options): Promise<Output> {
	options = options || {};
	return bindings.print(JSON.stringify(m), toBuffer(options))
	}
	/**
	* Note: this method should be invoked on the compiler instance used
	* for `parse()` / `parseSync()`.
	*/
	printSync(m: Program, options?: Options): Output {
	options = options || {};
	return bindings.printSync(JSON.stringify(m), toBuffer(options));
	}

Hope that helps.

[rrjanbiah]

Looks like this is exactly I wanted. But, when I checked the swc web version, I'm getting Cannot read properties of undefined (reading 'printSync'). For now, I'm making a progress with the babel, but will definitely come back to swc little later... after getting a working version of my program.

[RiESAEX]

I think swc has codegen code for jsx..

[rrjanbiah]

parseSync is for JSX to AST. transformSync is for JSX to JavaScript. If you know any codegen for AST to JSX, please share.

[ecoinomist]

Any update on this? I'm also in need of an swc web version to transform AST to JSX output.

[AlecksJohannes]

Calling swc.printSync works for me. It prints out the code

[rrjanbiah]

Is that really working on swc web version?

[kwonoj]

Closing as adqueadtely answered, use parse / print pair as needed.