From 326e2812bc2267f389a8e5ecfda8db64e30dd384 Mon Sep 17 00:00:00 2001
From: Russell Dempsey <1173416+SgtPooki@users.noreply.github.com>
Date: Mon, 28 Oct 2024 13:31:13 -0500
Subject: [PATCH] fix!: dep-check tsx and jsx (#1661)

Adds configuration to dependency-check command to check for unused dependencies properly in jsx & tsx files.

BREAKING CHANGE: `.tsx` and `.jsx` files are now checked for missing/unused dependencies
---
 src/dependency-check.js                       |  2 ++
 test/dependency-check.js                      | 36 +++++++++++++++++++
 .../dependency-check/jsx-fail/package.json    | 13 +++++++
 .../dependency-check/jsx-fail/src/index.jsx   | 10 ++++++
 .../dependency-check/jsx-pass/package.json    | 12 +++++++
 .../dependency-check/jsx-pass/src/index.jsx   | 10 ++++++
 .../dependency-check/tsx-fail/package.json    | 13 +++++++
 .../dependency-check/tsx-fail/src/index.tsx   |  8 +++++
 .../dependency-check/tsx-pass/package.json    | 12 +++++++
 .../dependency-check/tsx-pass/src/index.tsx   |  8 +++++
 tsconfig.json                                 |  3 +-
 11 files changed, 126 insertions(+), 1 deletion(-)
 create mode 100644 test/fixtures/dependency-check/jsx-fail/package.json
 create mode 100644 test/fixtures/dependency-check/jsx-fail/src/index.jsx
 create mode 100644 test/fixtures/dependency-check/jsx-pass/package.json
 create mode 100644 test/fixtures/dependency-check/jsx-pass/src/index.jsx
 create mode 100644 test/fixtures/dependency-check/tsx-fail/package.json
 create mode 100644 test/fixtures/dependency-check/tsx-fail/src/index.tsx
 create mode 100644 test/fixtures/dependency-check/tsx-pass/package.json
 create mode 100644 test/fixtures/dependency-check/tsx-pass/src/index.tsx

diff --git a/src/dependency-check.js b/src/dependency-check.js
index b0316e09d..964fa7d82 100644
--- a/src/dependency-check.js
+++ b/src/dependency-check.js
@@ -41,7 +41,9 @@ const tasks = new Listr(
         const productionOnlyResult = await depcheck(cwd(), {
           parsers: {
             '**/*.js': depcheck.parser.es6,
+            '**/*.jsx': depcheck.parser.jsx,
             '**/*.ts': depcheck.parser.typescript,
+            '**/*.tsx': depcheck.parser.jsx,
             '**/*.cjs': depcheck.parser.es6,
             '**/*.mjs': depcheck.parser.es6
           },
diff --git a/test/dependency-check.js b/test/dependency-check.js
index 25df57485..b91735c63 100644
--- a/test/dependency-check.js
+++ b/test/dependency-check.js
@@ -137,4 +137,40 @@ describe('dependency check', () => {
       })
     ).to.eventually.be.fulfilled()
   })
+
+  it('should pass for jsx files', async () => {
+    await expect(
+      execa(bin, ['dependency-check'], {
+        cwd: path.join(__dirname, 'fixtures/dependency-check/jsx-pass')
+      })
+    ).to.eventually.be.fulfilled()
+  })
+
+  it('should fail for jsx files', async () => {
+    await expect(
+      execa(bin, ['dependency-check'], {
+        cwd: path.join(__dirname, 'fixtures/dependency-check/jsx-fail')
+      })
+    ).to.eventually.be.rejected()
+      .with.property('message')
+      .that.include('react-icons')
+  })
+
+  it('should pass for tsx files', async () => {
+    await expect(
+      execa(bin, ['dependency-check'], {
+        cwd: path.join(__dirname, 'fixtures/dependency-check/tsx-pass')
+      })
+    ).to.eventually.be.fulfilled()
+  })
+
+  it('should fail for tsx files', async () => {
+    await expect(
+      execa(bin, ['dependency-check'], {
+        cwd: path.join(__dirname, 'fixtures/dependency-check/tsx-fail')
+      })
+    ).to.eventually.be.rejected()
+      .with.property('message')
+      .that.include('react-icons')
+  })
 })
diff --git a/test/fixtures/dependency-check/jsx-fail/package.json b/test/fixtures/dependency-check/jsx-fail/package.json
new file mode 100644
index 000000000..8071e1088
--- /dev/null
+++ b/test/fixtures/dependency-check/jsx-fail/package.json
@@ -0,0 +1,13 @@
+{
+    "name": "jsx-dep-check-fail",
+    "version": "1.0.0",
+    "main": "index.jsx",
+    "type": "module",
+    "dependencies": {
+        "react": "18.3.1",
+        "react-icons": "5.3.0"
+    },
+    "devDependencies": {
+        "@types/react": "^18.3.12"
+    }
+}
diff --git a/test/fixtures/dependency-check/jsx-fail/src/index.jsx b/test/fixtures/dependency-check/jsx-fail/src/index.jsx
new file mode 100644
index 000000000..8b6a61cae
--- /dev/null
+++ b/test/fixtures/dependency-check/jsx-fail/src/index.jsx
@@ -0,0 +1,10 @@
+// @ts-expect-error - not installed
+// eslint-disable-next-line no-unused-vars
+import React from 'react'
+
+// @ts-expect-error - not installed
+// eslint-disable-next-line no-unused-vars
+const Component = () => (<div>Hello, world!</div>)
+const App = () => (<Component />)
+
+export default App
diff --git a/test/fixtures/dependency-check/jsx-pass/package.json b/test/fixtures/dependency-check/jsx-pass/package.json
new file mode 100644
index 000000000..41a05c31d
--- /dev/null
+++ b/test/fixtures/dependency-check/jsx-pass/package.json
@@ -0,0 +1,12 @@
+{
+    "name": "jsx-dep-check-fail",
+    "version": "1.0.0",
+    "main": "index.jsx",
+    "type": "module",
+    "dependencies": {
+        "react": "18.3.1"
+    },
+    "devDependencies": {
+        "@types/react": "^18.3.12"
+    }
+}
diff --git a/test/fixtures/dependency-check/jsx-pass/src/index.jsx b/test/fixtures/dependency-check/jsx-pass/src/index.jsx
new file mode 100644
index 000000000..8b6a61cae
--- /dev/null
+++ b/test/fixtures/dependency-check/jsx-pass/src/index.jsx
@@ -0,0 +1,10 @@
+// @ts-expect-error - not installed
+// eslint-disable-next-line no-unused-vars
+import React from 'react'
+
+// @ts-expect-error - not installed
+// eslint-disable-next-line no-unused-vars
+const Component = () => (<div>Hello, world!</div>)
+const App = () => (<Component />)
+
+export default App
diff --git a/test/fixtures/dependency-check/tsx-fail/package.json b/test/fixtures/dependency-check/tsx-fail/package.json
new file mode 100644
index 000000000..20f26afc4
--- /dev/null
+++ b/test/fixtures/dependency-check/tsx-fail/package.json
@@ -0,0 +1,13 @@
+{
+    "name": "tsx-dep-check-fail",
+    "version": "1.0.0",
+    "main": "index.tsx",
+    "type": "module",
+    "dependencies": {
+        "react": "18.3.1",
+        "react-icons": "5.3.0"
+    },
+    "devDependencies": {
+        "@types/react": "^18.3.12"
+    }
+}
diff --git a/test/fixtures/dependency-check/tsx-fail/src/index.tsx b/test/fixtures/dependency-check/tsx-fail/src/index.tsx
new file mode 100644
index 000000000..5526f4682
--- /dev/null
+++ b/test/fixtures/dependency-check/tsx-fail/src/index.tsx
@@ -0,0 +1,8 @@
+// @ts-expect-error - not installed
+import React from 'react'
+
+// @ts-expect-error - not installed
+const Component: React.FC = () => (<div>Hello, world!</div>)
+const App: React.FC = () => (<Component />)
+
+export default App
diff --git a/test/fixtures/dependency-check/tsx-pass/package.json b/test/fixtures/dependency-check/tsx-pass/package.json
new file mode 100644
index 000000000..3cdf71a63
--- /dev/null
+++ b/test/fixtures/dependency-check/tsx-pass/package.json
@@ -0,0 +1,12 @@
+{
+    "name": "tsx-dep-check-pass",
+    "version": "1.0.0",
+    "main": "index.tsx",
+    "type": "module",
+    "dependencies": {
+        "react": "18.3.1"
+    },
+    "devDependencies": {
+        "@types/react": "^18.3.12"
+    }
+}
diff --git a/test/fixtures/dependency-check/tsx-pass/src/index.tsx b/test/fixtures/dependency-check/tsx-pass/src/index.tsx
new file mode 100644
index 000000000..5526f4682
--- /dev/null
+++ b/test/fixtures/dependency-check/tsx-pass/src/index.tsx
@@ -0,0 +1,8 @@
+// @ts-expect-error - not installed
+import React from 'react'
+
+// @ts-expect-error - not installed
+const Component: React.FC = () => (<div>Hello, world!</div>)
+const App: React.FC = () => (<Component />)
+
+export default App
diff --git a/tsconfig.json b/tsconfig.json
index ca16e19bc..81c6de2e1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,8 @@
     "extends": "./src/config/tsconfig.aegir.json",
     "compilerOptions": {
         "outDir": "dist",
-        "emitDeclarationOnly": true
+        "emitDeclarationOnly": true,
+        "jsx": "preserve"
     },
     "include": [
       "package.json",