From 093807391a9563ad36c2b04a286da23d09fad835 Mon Sep 17 00:00:00 2001
From: Jarred Sumner <jarred@jarredsumner.com>
Date: Sat, 5 Mar 2022 19:15:25 -0800
Subject: [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" />
```
---
 integration/bunjs-only-snippets/transpiler.test.js | 53 ++++++++++++++++++++++
 1 file changed, 53 insertions(+)

(limited to 'integration/bunjs-only-snippets')

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,10 +72,60 @@ 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 {
-- 
cgit v1.2.3