Feat: add jsx spread children support

[rhyzx]

What does this PR do?

Example

const a = <h1>{...[123]}</h1>

Output

Before:

error: Unexpected ...

After:

var a = jsx_dev_runtime.jsxDEV("h1", {
  children: [...[123]]
}, undefined, true, undefined, this);

This feature is already supported by most transpilers, eg:
Typescript
Esbuild
SWC

• Documentation or TypeScript types (it's okay to leave the rest blank in this case)
• Code changes

How did you verify your code works?

I am willing to add test code for this feature, but I need some help.
As I understand it, the test code should be placed in test/snippets, test/snapshots.
However, the scripts/browser.js that tests them does not seem to be able to execute properly.

[paperdave]

can you add a test to transpiler.test.ts?

[paperdave]

also, i wonder if we can detect an array literal spread, to emit [1, 2, 3] instead of [...[1, 2, 3]]

[rhyzx]

can you add a test to transpiler.test.ts?

DONE

[rhyzx]

also, i wonder if we can detect an array literal spread, to emit [1, 2, 3] instead of [...[1, 2, 3]]

Yes, the optimizer should do this, and actually Bun has already implemented this.

// in.js
console.log([...[1, 2, 3]]);
console.log(
  jsxDEV(
    "div",
    {
      children: [...[1, 2, 3]],
    },
    undefined,
    true,
    undefined,
    this,
  ),
);
console.log(<div>{...[1, 2, 3]}</div>);

// bun-debug build test.js --minify
// ...
console.log([1,2,3]);
console.log(jsxDEV("div",{children:[1,2,3]},void 0,!0,void 0,OJ));
console.log(VJ.jsxDEV("div",{children:[...[1,2,3]]},void 0,!0,void 0,this))})
// ...

However, strangely, the code transformed through JSX does not execute this optimization.🤔

If I have time, I will attempt to fix this issue next.

[paperdave]

looks good, i would like to get the unreachable removed.

[paperdave]

these test cases would be nice to have but dont pass right now. i dont really know how hard adding this optimization in would be.

expect(bun.transformSync("export var foo = <div>{...[1,2,3]}</div>")).toBe(
  `export var foo = jsxDEV("div", {
  children: [1, 2, 3]
}, undefined, true, undefined, this);
`,
);
expect(bun.transformSync("export var foo = <div>a{...[1,2,3]}b</div>")).toBe(
  `export var foo = jsxDEV("div", {
  children: [
    "a",
    1,
    2,
    3,
    "b"
  ]
}, undefined, true, undefined, this);
`,
);

[rhyzx]

these test cases would be nice to have but dont pass right now. i dont really know how hard adding this optimization in would be.

expect(bun.transformSync("export var foo = <div>{...[1,2,3]}</div>")).toBe(
  `export var foo = jsxDEV("div", {
  children: [1, 2, 3]
}, undefined, true, undefined, this);
`,
);
expect(bun.transformSync("export var foo = <div>a{...[1,2,3]}b</div>")).toBe(
  `export var foo = jsxDEV("div", {
  children: [
    "a",
    1,
    2,
    3,
    "b"
  ]
}, undefined, true, undefined, this);
`,
);

I've observed that esbuild also doesn't optimize spread children in jsx, see

Implementing this optimization may not be as easy as it seems. I think we should open a new issue to discuss it.

[paperdave]

alright. looks good otherwise. will merge after tests run.

[paperdave]

thank you