[JS Parser] dot property shorthand for JSX

This is a non-standard backwards-compatible feature that I suspect other tooling will soon adopt (and expect to help other tooling adopt it)

```jsx
var hello = {hi: 'yo'};
export const Foo = () => <Bar {hello.hi} />
```

Desugars into:
```jsx
var hello = {hi: 'yo'};
export const Foo = () => <Bar hi={hello.hi} />
```

This works with defines and macros too.

```jsx
export const Foo = () => <Bar {process.env.NODE_ENV} />
```

```jsx
export const Foo = () => <Bar NODE_ENV="development" />
```

1 files changed, 53 insertions, 0 deletions

diff --git a/integration/bunjs-only-snippets/transpiler.test.js b/integration/bunjs-only-snippets/transpiler.test.js
index 5553c1cc6..1162c65a7 100644
--- a/integration/bunjs-only-snippets/transpiler.test.js
+++ b/integration/bunjs-only-snippets/transpiler.test.js
@@ -50,6 +50,9 @@ describe("Bun.Transpiler", () => {
   it("JSX", () => {
     var bun = new Bun.Transpiler({
       loader: "jsx",
+      define: {
+        "process.env.NODE_ENV": JSON.stringify("development"),
+      },
     });
     expect(bun.transformSync("export var foo = <div foo />")).toBe(
       `export var foo = jsx("div", {
@@ -69,12 +72,62 @@ describe("Bun.Transpiler", () => {
 }, undefined, false, undefined, this);
 `
     );
+
     expect(bun.transformSync("export var hi = <div {foo} />")).toBe(
       `export var hi = jsx("div", {
   foo
 }, undefined, false, undefined, this);
 `
     );
+    expect(bun.transformSync("export var hi = <div {foo.bar.baz} />")).toBe(
+      `export var hi = jsx("div", {
+  baz: foo.bar.baz
+}, undefined, false, undefined, this);
+`
+    );
+    expect(bun.transformSync("export var hi = <div {foo?.bar?.baz} />")).toBe(
+      `export var hi = jsx("div", {
+  baz: foo?.bar?.baz
+}, undefined, false, undefined, this);
+`
+    );
+    expect(
+      bun.transformSync("export var hi = <div {foo['baz'].bar?.baz} />")
+    ).toBe(
+      `export var hi = jsx("div", {
+  baz: foo["baz"].bar?.baz
+}, undefined, false, undefined, this);
+`
+    );
+
+    // cursed
+    expect(
+      bun.transformSync(
+        "export var hi = <div {foo[{name: () => true}.name].hi} />"
+      )
+    ).toBe(
+      `export var hi = jsx("div", {
+  hi: foo[{ name: () => true }.name].hi
+}, undefined, false, undefined, this);
+`
+    );
+    expect(
+      bun.transformSync("export var hi = <Foo {process.env.NODE_ENV} />")
+    ).toBe(
+      `export var hi = jsx(Foo, {
+  NODE_ENV: "development"
+}, undefined, false, undefined, this);
+`
+    );
+
+    expect(
+      bun.transformSync("export var hi = <div {foo['baz'].bar?.baz} />")
+    ).toBe(
+      `export var hi = jsx("div", {
+  baz: foo["baz"].bar?.baz
+}, undefined, false, undefined, this);
+`
+    );
     try {
       bun.transformSync("export var hi = <div {foo}={foo}= />");
       throw new Error("Expected error");