#9430: tsconfig references refactor

.github/workflows/ci.yml

@@ -80,7 +80,7 @@ jobs:
           node-version-file: applications/browser-extension/package.json
           cache: npm
       - run: npm ci
-      - run: npm run build:webpack --workspace=applications/browser-extension
+      - run: npm run build
         env:
           MV: 3
           RELEASE_CHANNEL: stable
@@ -151,7 +151,7 @@ jobs:
           node-version-file: applications/browser-extension/package.json
           cache: npm
       - run: npm ci
-      - run: npm run build:typecheck --workspaces
+      - run: npm run build:typecheck
 
   lint:
     runs-on: ubuntu-latest

.github/workflows/end-to-end-tests.yml

@@ -68,7 +68,7 @@ jobs:
           attempt_delay: 15000
           attempt_limit: 40
       - name: Build the extension
-        run: npm run build:webpack --workspace=applications/browser-extension
+        run: npm run build
       - name: Run end to end tests
         # Xvfb is required to run the tests in headed mode. Headed mode is required to run tests for browser extensions
         # in Playwright, see https://playwright.dev/docs/ci#running-headed

.gitignore

@@ -42,6 +42,7 @@ browsers/dist
 dist
 .transpiled
 web-ext-artifacts
+*.tsbuildinfo
 
 # Other artifacts
 artifacts

applications/browser-extension/tsconfig.json

@@ -2,6 +2,9 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "baseUrl": ".",
+    "composite": false,
+    "declaration": false,
+    "noEmit": true,
     "paths": {
       "@/*": ["src/*"],
       "@img/*": ["img/*"],
@@ -10,5 +13,12 @@
     },
     "plugins": [{ "name": "typescript-plugin-css-modules" }]
   },
+  "references": [
+    // All project dependencies
+    // TODO: add @nx/js plugin which will automatically update these paths
+    {
+      "path": "../../libraries/utils"
+    }
+  ],
   "exclude": ["venv", "dist", "node_modules"]
 }

knip.mjs

@@ -35,6 +35,10 @@ const knipConfig = {
         "prettier",
       ],
     },
+    "libraries/*": {
+      entry: "src/*.ts!",
+      project: "**/*.ts",
+    },
     "applications/browser-extension": {
       entry: [
         // ! suffix files are included in production mode

libraries/utils/.eslintrc.js

@@ -1,10 +1,22 @@
 module.exports = {
   root: true,
-  extends: [
-    // Full config: https://github.com/pixiebrix/eslint-config-pixiebrix/blob/main/index.js
-    // XXX: use exact configuration for now because applications/browser-extension has a lot of local configuration.
-    // When we bring eslint-config-pixiebrix into the monorepo, we can iterate on code sharing across configs.
-    "pixiebrix",
+  overrides: [
+    {
+      files: ["**/*.ts", "**/*.tsx"],
+      extends: [
+        // Full config: https://github.com/pixiebrix/eslint-config-pixiebrix/blob/main/index.js
+        // XXX: use exact configuration for now because applications/browser-extension has a lot of local configuration.
+        // When we bring eslint-config-pixiebrix into the monorepo, we can iterate on code sharing across configs.
+        "pixiebrix",
+      ],
+
+      parserOptions: {
+        // Use the nearest tsconfig.json in its directory
+        // See https://typescript-eslint.io/blog/parser-options-project-true/#introducing-true
+        project: ["./tsconfig.*?.json"],
+        tsconfigRootDir: __dirname,
+      },
+    },
   ],
 };
 

libraries/utils/package.json

@@ -6,8 +6,8 @@
     "test": "TZ=UTC jest",
     "lint": "eslint src --ext js,jsx,ts,tsx --quiet --report-unused-disable-directives",
     "lint:fast": "ESLINT_NO_IMPORTS=1 eslint src --ext js,jsx,ts,tsx --quiet",
-    "build": "echo 'buildless package'",
-    "build:typecheck": "tsc --noEmit"
+    "build": "tsc --build",
+    "build:typecheck": "tsc --build"
   },
   "license": "AGPL-3.0",
   "repository": "https://github.com/pixiebrix/pixiebrix-extension",

libraries/utils/src/debugUtils.test.ts

@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { getInvalidPath } from "@/debugUtils";
+import { getInvalidPath } from "./debugUtils";
 
 describe("getInvalidPath", () => {
   it("returns invalid path", () => {

libraries/utils/tsconfig.json

@@ -1,9 +1,13 @@
 {
   "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.test.json"
     }
-  }
+  ]
 }

libraries/utils/tsconfig.lib.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "src",
+    "outDir": "dist",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
+    "emitDeclarationOnly": false,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts"],
+  "references": [],
+  "exclude": [
+    "jest.config.ts",
+    "jest.config.js",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts"
+  ]
+}

libraries/utils/tsconfig.test.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc/libraries/utils",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "jest.config.js",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

nx.json

@@ -3,16 +3,18 @@
   "targetDefaults": {
     "build": {
       "dependsOn": ["^build"],
-      "outputs": ["{projectRoot}/dist"],
+      "outputs": ["{workspaceRoot}/dist"],
       "cache": true
     },
     "test": {
       "cache": true
     },
     "lint": {
+      "dependsOn": ["^build:typecheck"],
       "cache": true
     },
     "build:typecheck": {
+      "dependsOn": ["^build:typecheck"],
       "cache": true
     }
   },

package.json

@@ -7,14 +7,16 @@
     "libraries/*"
   ],
   "scripts": {
-    "test": "nx test",
-    "lint": "nx lint",
+    "test": "nx run-many -t test",
+    "lint": "nx run-many -t lint",
     "build": "nx build",
-    "build:typecheck": "nx build:typecheck",
+    "build:typecheck": "nx run-many -t build:typecheck",
     "dead-code": "npm run dead-code:base -- --include files,duplicates,dependencies,classMembers,binaries,enumMembers,nsTypes,exports,nsExports",
     "dead-code:base": "knip --config knip.mjs --tags=-knip",
     "dead-code:prod": "npm run dead-code -- --production",
-    "watch": "npm run watch --workspaces"
+    "watch": "concurrently npm:watch:webpack npm:watch:typescript -r",
+    "watch:typescript": "tsc --build --watch --preserveWatchOutput",
+    "watch:webpack": "npm run watch:webpack --workspaces"
   },
   "author": "Todd Schiller",
   "license": "AGPL-3.0",
@@ -26,8 +28,10 @@
   },
   "devDependencies": {
     "@sindresorhus/tsconfig": "^6.0.0",
+    "concurrently": "^9.1.0",
     "knip": "^5.36.7",
     "nx": "20.1.0",
-    "prettier": "3.3.3"
+    "prettier": "3.3.3",
+    "typescript": "^5.6.3"
   }
 }

tsconfig.base.json

@@ -10,13 +10,13 @@
     "resolveJsonModule": true,
     "baseUrl": ".",
     "outDir": null,
-    "declaration": false,
+    "declaration": true,
+    "composite": true,
 
     // TODO: Drop these lines to make TS stricter https://github.com/pixiebrix/pixiebrix-extension/issues/775
     "strictFunctionTypes": false,
     "noPropertyAccessFromIndexSignature": false,
     "noImplicitReturns": false,
     "noUnusedParameters": false
-  },
-  "exclude": ["node_modules"]
+  }
 }

tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compileOnSave": false,
+  "files": [], // intentionally empty
+  "references": [
+    // All projects in the repository
+    // TODO: add @nx/js plugin which will automatically update these paths
+    {
+      "path": "./applications/browser-extension"
+    },
+    {
+      "path": "./libraries/utils"
+    }
+  ]
+}