Upgrade ink

.changeset/modern-ink-ui.md

@@ -0,0 +1,5 @@
+---
+"trello-cli": major
+---
+
+Upgrade the interactive terminal UI to Ink 8 and React 19.3. Node.js 22 or newer is now required.

.github/workflows/test.yml

@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x, 20.x, 22.x, 24.x]
+        node-version: [22.x, 24.x]
 
     env:
       CI: true

jest.config.js

@@ -2,6 +2,6 @@ const base = require("./jest.config.base.js");
 
 module.exports = {
   ...base,
-  projects: ["<rootDir>/packages/*/jest.config.js"],
+  projects: ["<rootDir>/packages/*/jest.config.js", "<rootDir>/packages/trello-cli/jest.tui.config.js"],
   coverageDirectory: "<rootDir>/coverage/",
 };

package.json

@@ -15,7 +15,7 @@
     "@changesets/cli": "^3.0.2",
     "@types/jest": "^30.0.0",
     "@types/node": "^26.4.1",
-    "ink-testing-library": "2.1.0",
+    "ink-testing-library": "4.0.0",
     "jest": "^30.5.1",
     "jest-when": "^4.0.3",
     "ts-jest": "^29.4.12",

packages/trello-cli/README.md

@@ -2,7 +2,7 @@
 
 ## Installation
 
-> Trello CLI requires node 18+
+> Trello CLI requires node 22+
 
 ```bash
 npm install -g trello-cli

packages/trello-cli/bin/dev

@@ -9,6 +9,9 @@ const project = path.join(__dirname, '..', 'tsconfig.json')
 process.env.NODE_ENV = 'development'
 
 require('ts-node').register({project})
+// The interactive UI uses ESM, including Ink's asynchronous module graph.
+process.env.TS_NODE_PROJECT = project
+require('node:module').register('ts-node/esm', require('node:url').pathToFileURL(__filename))
 
 // Start the CLI
 execute({ development: true, dir: __dirname })

packages/trello-cli/jest.config.js

@@ -3,6 +3,7 @@ const base = require("../../jest.config.base.js");
 module.exports = {
   ...base,
   roots: ["<rootDir>/test"],
+  testPathIgnorePatterns: ["/test/tui/"],
   displayName: "trello-cli",
   setupFilesAfterEnv: ["./test/setup.js"],
 };

packages/trello-cli/jest.tui.config.js

@@ -0,0 +1,22 @@
+const base = require("../../jest.config.base.js");
+
+module.exports = {
+  ...base,
+  roots: ["<rootDir>/test/tui"],
+  displayName: "trello-cli-tui",
+  extensionsToTreatAsEsm: [".ts", ".tsx"],
+  transform: {
+    "^.+\\.tsx?$": ["ts-jest", {
+      useESM: true,
+      tsconfig: {
+        module: "ESNext",
+        moduleResolution: "bundler",
+        isolatedModules: true,
+      },
+    }],
+  },
+  moduleNameMapper: {
+    "^(\\.{1,2}/.*)\\.js$": "$1",
+  },
+  setupFilesAfterEnv: ["./test/setup-tui.ts"],
+};

packages/trello-cli/package.json

@@ -28,12 +28,12 @@
     "@trello-cli/config": "workspace:*",
     "chai": "^6.2.2",
     "chrono-node": "^2.10.1",
-    "ink": "3.2.0",
-    "ink-select-input": "4.2.2",
-    "ink-spinner": "4.0.3",
-    "ink-text-input": "4.0.3",
+    "ink": "8.0.0",
+    "ink-select-input": "6.2.0",
+    "ink-spinner": "5.0.0",
+    "ink-text-input": "6.0.0",
     "json2csv": "6.0.0-alpha.2",
-    "react": "17.0.2",
+    "react": "19.3.1",
     "trello.js": "^1.2.8"
   },
   "devDependencies": {
@@ -42,9 +42,9 @@
     "@types/jest": "^30.0.0",
     "@types/json2csv": "^5.0.7",
     "@types/node": "^26.4.1",
-    "@types/react": "17.0.91",
+    "@types/react": "19.3.0",
     "eslint": "^9.39.5",
-    "ink-testing-library": "2.1.0",
+    "ink-testing-library": "4.0.0",
     "oclif": "^4.24.0",
     "shx": "^0.4.0",
     "ts-node": "^10.9.2",
@@ -65,16 +65,16 @@
     "topics": {}
   },
   "scripts": {
-    "build": "shx rm -rf dist && tsc -b",
-    "dev": "tsc -b --watch",
+    "build": "shx rm -rf dist && tsc -b && shx cp src/tui/package.json dist/tui/package.json",
+    "dev": "shx mkdir -p dist/tui && shx cp src/tui/package.json dist/tui/package.json && tsc -b --watch",
     "lint": "eslint src test",
     "posttest": "pnpm lint",
     "prepack": "pnpm build && oclif manifest && oclif readme",
-    "test": "jest --runInBand",
+    "test": "jest --runInBand --config jest.config.js && node --experimental-vm-modules ../../node_modules/jest/bin/jest.js --runInBand --config jest.tui.config.js",
     "version": "oclif readme && git add README.md"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=22.0.0"
   },
   "bugs": "https://github.com/mheap/trello-cli/issues",
   "keywords": [

packages/trello-cli/src/commands/interactive.tsx

@@ -4,10 +4,7 @@ import Cache from "@trello-cli/cache";
 import * as path from "path";
 import { TrelloClient } from "trello.js";
 import { sendParamsInBody } from "../paramsInBody";
-import { render } from "ink";
 import React from "react";
-import { App } from "../tui/App";
-import { loadTuiConfig } from "../tui/config";
 
 export default class Interactive extends Command {
   static description = "Launch interactive terminal UI for Trello";
@@ -76,6 +73,11 @@ export default class Interactive extends Command {
     await cache.bootstrap();
 
     // Load TUI config
+    const [{ render }, { App }, { loadTuiConfig }] = await Promise.all([
+      import("ink"),
+      import("../tui/App.js"),
+      import("../tui/config.js"),
+    ]);
     const tuiConfig = loadTuiConfig(configDir);
 
     // Apply mouse flag override