Merge pull request #4096 from alphagov/build-types-fixes

Fix compiler issues suppressed by `skipLibCheck`

.github/workflows/tests.yml

@@ -61,9 +61,6 @@ jobs:
       - name: Build
         uses: ./.github/workflows/actions/build
 
-      - name: Type declarations
-        run: npm run build:types
-
   lint:
     name: ${{ matrix.task.description }} (${{ matrix.runner }})
     runs-on: ${{ matrix.runner }}
@@ -97,6 +94,10 @@ jobs:
             run: npm run lint:prettier
             cache: .cache/prettier
 
+          - description: TypeScript compiler
+            name: lint-types
+            run: npm run lint:types
+
     steps:
       - name: Checkout
         uses: actions/[email protected]

docs/contributing/tasks.md

@@ -55,7 +55,9 @@ npm scripts are defined in `package.json`. These trigger a number of Gulp tasks.
 
 **`npm run build:types` will do the following:**
 
-- run the [TypeScript compiler](https://www.typescriptlang.org/docs/handbook/compiler-options.html) to verify the types in our JavaScript files
+- run the [TypeScript compiler](https://www.typescriptlang.org/docs/handbook/compiler-options.html) to build type declarations for the GOV.UK Frontend package
+
+To verify the types in all our JavaScript files, run `npm run lint:types`
 
 ## Gulp tasks
 

package.json

@@ -26,14 +26,14 @@
     "build:app": "npm run build --workspace @govuk-frontend/review",
     "build:package": "npm run build:package --workspace govuk-frontend",
     "build:release": "npm run build:release --workspace govuk-frontend",
-    "build:types": "tsc --build tsconfig.json tsconfig.build.json",
+    "build:types": "npm run build:types --workspaces --if-present",
     "postbuild:package": "jest --color --selectProjects \"Build tasks\" --testMatch \"**/*package.test*\"",
     "postbuild:release": "jest --color --selectProjects \"Build tasks\" --testMatch \"**/*release.test*\"",
     "heroku-postbuild": "npm run build",
     "postheroku-postbuild": "NPM_CONFIG_PRODUCTION=true npm ci --ignore-scripts --omit=optional --workspace @govuk-frontend/review",
     "pretest": "npm run build",
     "test": "jest --color --ignoreProjects \"Build tasks\" --maxWorkers=50%",
-    "lint": "npm run lint:editorconfig && npm run lint:prettier && npm run lint:js && npm run lint:scss",
+    "lint": "npm run lint:editorconfig && npm run lint:prettier && npm run lint:js && npm run lint:types npm run lint:scss",
     "lint:editorconfig": "npm run lint:editorconfig:cli",
     "lint:editorconfig:cli": "editorconfig-checker",
     "lint:js": "npm run lint:js:cli -- \"**/*.{cjs,js,md,mjs}\"",
@@ -42,11 +42,16 @@
     "lint:prettier:cli": "prettier --cache --cache-location .cache/prettier --cache-strategy content --check",
     "lint:scss": "npm run lint:scss:cli -- \"**/*.{md,scss}\"",
     "lint:scss:cli": "stylelint --cache --cache-location .cache/stylelint --cache-strategy content --color --ignore-path .gitignore --max-warnings 0",
+    "lint:types": "tsc --build tsconfig.json",
     "prepare": "node -e \"try { require('husky').install() } catch (e) {if (e.code !== 'MODULE_NOT_FOUND') throw e}\""
   },
   "devDependencies": {
     "@babel/core": "^7.22.10",
     "@babel/preset-env": "^7.22.10",
+    "@govuk-frontend/config": "*",
+    "@govuk-frontend/helpers": "*",
+    "@govuk-frontend/lib": "*",
+    "@govuk-frontend/tasks": "*",
     "@typescript-eslint/eslint-plugin": "^6.3.0",
     "@typescript-eslint/parser": "^6.3.0",
     "concurrently": "^8.2.0",
@@ -60,10 +65,6 @@
     "eslint-plugin-markdown": "^3.0.1",
     "eslint-plugin-n": "^16.0.1",
     "eslint-plugin-promise": "^6.1.1",
-    "@govuk-frontend/config": "*",
-    "@govuk-frontend/helpers": "*",
-    "@govuk-frontend/lib": "*",
-    "@govuk-frontend/tasks": "*",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
     "husky": "^8.0.3",

packages/govuk-frontend-review/.eslintrc.js

@@ -7,7 +7,7 @@ module.exports = {
       excludedFiles: ['**/*.test.mjs'],
       parser: '@typescript-eslint/parser',
       parserOptions: {
-        project: [join(__dirname, 'tsconfig.json')]
+        project: [join(__dirname, 'tsconfig.dev.json')]
       },
       plugins: ['@typescript-eslint']
     }

packages/govuk-frontend-review/package.json

@@ -12,23 +12,25 @@
     "dev": "gulp dev --color",
     "build": "gulp build --color",
     "build:sassdoc": "sassdoc --config sassdoc.config.yaml ../govuk-frontend/src/govuk",
+    "build:types": "tsc --build tsconfig.build.json",
     "build:jsdoc": "typedoc",
+    "postbuild": "npm run build:types",
     "proxy": "browser-sync start --config browsersync.config.js",
     "serve": "nodemon",
     "start": "node src/start.mjs",
     "test:screenshots": "gulp screenshots --color"
   },
   "dependencies": {
+    "@govuk-frontend/config": "*",
+    "@govuk-frontend/lib": "*",
+    "@govuk-frontend/stats": "*",
     "@prettier/sync": "^0.3.0",
     "chokidar": "^3.5.3",
     "cookie-parser": "^1.4.6",
     "express": "^4.18.2",
     "express-validator": "^7.0.1",
     "front-matter": "^4.0.2",
     "govuk-frontend": "*",
-    "@govuk-frontend/config": "*",
-    "@govuk-frontend/lib": "*",
-    "@govuk-frontend/stats": "*",
     "highlight.js": "^11.8.0",
     "iframe-resizer": "^4.3.6",
     "js-beautify": "^1.14.9",
@@ -38,14 +40,14 @@
     "slug": "^8.2.3"
   },
   "devDependencies": {
+    "@govuk-frontend/helpers": "*",
+    "@govuk-frontend/tasks": "*",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@rollup/plugin-terser": "^0.4.3",
     "autoprefixer": "^10.4.15",
     "browser-sync": "^2.29.3",
     "cheerio": "^1.0.0-rc.12",
     "cssnano": "^6.0.1",
-    "@govuk-frontend/helpers": "*",
-    "@govuk-frontend/tasks": "*",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
     "nodemon": "^3.0.1",

packages/govuk-frontend-review/percy.config.js

@@ -3,7 +3,7 @@ const { executablePath } = require('puppeteer')
 /**
  * Percy config
  *
- * @type {import('@percy/config').PercyConfigObject}
+ * @type {import('@percy/core').PercyConfigOptions}
  */
 module.exports = {
   discovery: {

packages/govuk-frontend-review/tsconfig.dev.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["**/*.js", "**/*.mjs"],
+  "exclude": ["./dist", "./node_modules"],
+  "compilerOptions": {
+    "types": [
+      "browser-sync",
+      "express",
+      "gulp",
+      "jest",
+      "marked",
+      "node",
+      "nunjucks",
+      "slug"
+    ]
+  }
+}

packages/govuk-frontend-review/tsconfig.json

@@ -1,17 +1,12 @@
 {
   "extends": "../../tsconfig.base.json",
-  "include": ["**/*.js", "**/*.mjs"],
-  "exclude": ["./dist", "./node_modules"],
-  "compilerOptions": {
-    "types": [
-      "browser-sync",
-      "express",
-      "gulp",
-      "jest",
-      "marked",
-      "node",
-      "nunjucks",
-      "slug"
-    ]
-  }
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    },
+    {
+      "path": "./tsconfig.dev.json"
+    }
+  ]
 }

packages/govuk-frontend/.eslintrc.js

@@ -14,7 +14,7 @@ module.exports = {
       parserOptions: {
         // Note: Allow ES2015 for import/export syntax
         ecmaVersion: '2015',
-        project: [resolve(__dirname, 'tsconfig.json')]
+        project: [resolve(__dirname, 'tsconfig.dev.json')]
       },
       plugins: ['@typescript-eslint', 'es-x'],
       extends: [

packages/govuk-frontend/package.json

@@ -50,6 +50,8 @@
     "build:package": "gulp build:package --color",
     "build:release": "gulp build:release --color",
     "build:stats": "npm run stats --workspace @govuk-frontend/stats",
+    "build:types": "tsc --build tsconfig.build.json",
+    "postbuild:package": "npm run build:types",
     "dev": "gulp dev --color",
     "version": "echo $npm_package_version"
   },

packages/govuk-frontend/tasks/build/package.test.mjs

@@ -141,6 +141,7 @@ describe('packages/govuk-frontend/dist/', () => {
       'rollup.publish.config.mjs',
       'rollup.release.config.mjs',
       'tsconfig.build.json',
+      'tsconfig.dev.json',
       'tsconfig.json'
     ])
   })

packages/govuk-frontend/tsconfig.dev.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["**/*.js", "**/*.mjs"],
+  "exclude": ["./dist", "./node_modules"],
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM"],
+    "target": "ES2015",
+    "types": ["gulp", "jest", "jest-axe", "jest-puppeteer", "node"]
+  }
+}

packages/govuk-frontend/tsconfig.json

@@ -1,10 +1,12 @@
 {
   "extends": "../../tsconfig.base.json",
-  "include": ["**/*.js", "**/*.mjs"],
-  "exclude": ["./dist", "./node_modules"],
-  "compilerOptions": {
-    "lib": ["ESNext", "DOM"],
-    "target": "ES2015",
-    "types": ["gulp", "jest", "jest-axe", "jest-puppeteer", "node"]
-  }
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    },
+    {
+      "path": "./tsconfig.dev.json"
+    }
+  ]
 }

shared/helpers/package.json

@@ -15,10 +15,10 @@
   "license": "MIT",
   "devDependencies": {
     "@axe-core/puppeteer": "^4.7.3",
-    "cheerio": "^1.0.0-rc.12",
-    "govuk-frontend": "*",
     "@govuk-frontend/config": "*",
     "@govuk-frontend/lib": "*",
+    "cheerio": "^1.0.0-rc.12",
+    "govuk-frontend": "*",
     "jest-axe": "^8.0.0",
     "jest-dev-server": "^9.0.0",
     "jest-environment-jsdom": "^29.6.2",

shared/lib/components.js

@@ -174,7 +174,7 @@ function renderMacro(macroName, macroPath, params = {}, options) {
  * @param {MacroRenderOptions} [options] - Nunjucks macro render options
  * @returns {string} HTML rendered from the Nunjucks string
  */
-function renderString(string, context, options) {
+function renderString(string, context = {}, options) {
   const nunjucksEnv = options?.env ?? env
   return nunjucksEnv.renderString(string, context)
 }

shared/lib/package.json

@@ -13,8 +13,8 @@
   },
   "license": "MIT",
   "dependencies": {
-    "glob": "^10.3.3",
     "@govuk-frontend/config": "*",
+    "glob": "^10.3.3",
     "js-yaml": "^4.1.0",
     "minimatch": "^9.0.3",
     "nunjucks": "^3.2.4",

shared/stats/src/index.mjs

@@ -16,7 +16,7 @@ const componentNamesWithJavaScript = await getComponentNamesFiltered(
 /**
  * Package options
  *
- * @type {import('@govuk-frontend/lib/names').PackageOptions}
+ * @satisfies {import('@govuk-frontend/lib/names').PackageOptions}
  */
 export const packageOptions = {
   type: 'module',

shared/tasks/package.json

@@ -9,15 +9,15 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@govuk-frontend/config": "*",
+    "@govuk-frontend/helpers": "*",
+    "@govuk-frontend/lib": "*",
     "@npmcli/run-script": "^6.0.2",
     "@percy/cli": "^1.26.3",
     "@percy/puppeteer": "^2.0.2",
     "chalk": "^5.3.0",
     "cpy": "^10.1.0",
     "del": "^7.0.0",
-    "@govuk-frontend/config": "*",
-    "@govuk-frontend/helpers": "*",
-    "@govuk-frontend/lib": "*",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
     "nunjucks": "^3.2.4",

tsconfig.base.json

@@ -8,7 +8,6 @@
     "noEmit": true,
     "noImplicitThis": true,
     "resolveJsonModule": true,
-    "skipLibCheck": true,
     "strict": false,
     "strictBindCallApply": true,
     "strictFunctionTypes": true,