inline constant tag name in JSX transformation

[pionxzh]

Description

Constant tag name should be inlined into the JSX tag to reduce the noise.

source: https://github.com/pionxzh/wakaru/issues/113#issuecomment-1946779728

Input code

const Name = "div";
const attrs = {id: "x"};
const Comp = React.createElement(Name, attrs);

Expected behavior

const attrs = {id: "x"};
const Comp = <div {...attrs} />;

Actual behavior

const Name = "div";
const attrs = { id: "x" };
const Comp = <Name {...attrs} />;

[0xdevalias]

Not sure if it's a good idea; but you could also use inlined spread syntax like this:

const Comp = <div {...{ id: "x" }} />;

Though I wonder; would there be any reason to not expand it completely into something like this:

const Comp = <div id="x" />;

[pionxzh]

would there be any reason to not expand it completely into something like this:

const Comp = <div id="x" />;

If we want to implement props inlining, then the redundant {...{ ... } } will be removed.

[0xdevalias]

@pionxzh I believe this should be reopened as per:

115 still needs the props inlining to be considered "completed". But let's merge this first.

Originally posted by @pionxzh in https://github.com/pionxzh/wakaru/issues/129#issuecomment-2102362186

[pionxzh]

Thanks.