how do I create code transformer for parsing customized extension like JSX?

Question

i am developing new web framework library like react, to deploy as npm package. its name is actually 'fluid', so extension is .fluid. so i had to test with jest, but it can't compile .test.fluid file without transformer.

project characteristics

• most of source codes from project written as ts and ESM.
• must support cjs/es/umd
• support customized format 'fluid' like JSX
• ...

i have some questions for this.

1. Jest doesn't support ESM?

2. i created simple transformer for jest, but it requires commonjs type so i must convert source ESM to commonjs while transcode if needed. how can I convert this? external public library will be fine. (rolllup commonjs plugins couldn't applied to this.) i want this format. const converted = esmToCommonjs(source);

3. Even if I did this, how can I update virtual DOM if state changes? (actually i created several functions to detect difference between two state tree, but I can't find where it could be called) render(), diff(), mount() functions are already implemented.

4. .fluid has some special props like svelte, such as on:click, on:mousedown... . how can I transcode these to pure HTML properly? (inline event listeners or separated scripts?)

Tried: apply custom converting for .fluid transcode (this was not proper way to make it I think, like inline tag or comment things)

Expected: convert ESM code to commonjs properly

additional question is just option, will appreciate if you answer it.