deps-dev: Update to TypeScript 5

This updates to TypeScript 5. It includes removing some workarounds for a bug in TypeScript 4.9 relating to dynamic imports.

We may want to look at using the [new `bundler` option for `moduleResolution`](https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/#moduleresolution-bundler) at some point but haven't done anything related to that here.

package.json

@@ -61,8 +61,8 @@
     "@types/lodash": "^4.14.191",
     "@types/node": "^18.15.1",
     "@types/nunjucks": "^3.2.2",
-    "@typescript-eslint/eslint-plugin": "^5.54.1",
-    "@typescript-eslint/parser": "^5.54.1",
+    "@typescript-eslint/eslint-plugin": "^5.55.0",
+    "@typescript-eslint/parser": "^5.55.0",
     "autoprefixer": "^10.4.13",
     "babel-loader": "^9.1.2",
     "dprint": "^0.34.5",
@@ -93,7 +93,7 @@
     "stylelint": "^15.2.0",
     "stylelint-config-standard-scss": "^7.0.1",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.5",
+    "typescript": "^5.0.2",
     "vitest": "^0.29.2",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1"

src/lib/getMacroOptions.ts

@@ -92,16 +92,14 @@ export async function addInternalComponents(transformedOptions: TransformedOptio
     (param) => param.name,
   )
 
-  const uniqueComponentsToEmbed = new Set(componentsToEmbed)
   const updatedOptions = transformedOptions
-
-  // eslint-disable-next-line no-restricted-syntax
-  for (const componentName of uniqueComponentsToEmbed) {
-    // eslint-disable-next-line no-await-in-loop
+  const uniqueComponentsToEmbed = new Set(componentsToEmbed)
+  const embeddedOptionsPromises = [...uniqueComponentsToEmbed].map(async (componentName) => {
     const rawOptions = await getRawMacroOptions(componentName)
-    // Further unnesting is not handled for these, as there are no current cases of this
-    updatedOptions.nested.push({ name: componentName, path: componentName, params: rawOptions })
-  }
+    return { name: componentName, path: componentName, params: rawOptions }
+  })
+  updatedOptions.nested.push(...await Promise.all(embeddedOptionsPromises))
+
   return updatedOptions
 }
 

src/site/_data/macroOptions.js

@@ -3,14 +3,8 @@ const { getAllComponentNames, getMacroOptions } = require('../../lib')
 
 module.exports = async function getAllMacroOptions() {
   const componentNames = getAllComponentNames()
-  const componentOptions = []
-  // Note that parallelising these causes all components to have the same macro options
-  // Probably caused by https://github.com/microsoft/TypeScript/issues/51554
-  // (fixed in TypeScript 5)
-  // eslint-disable-next-line no-restricted-syntax
-  for (const componentName of componentNames) {
-    // eslint-disable-next-line no-await-in-loop
-    componentOptions.push([componentName, await getMacroOptions(componentName)])
-  }
+  const componentOptions = await Promise.all(
+    componentNames.map(async (componentName) => [componentName, await getMacroOptions(componentName)]),
+  )
   return Object.fromEntries(componentOptions)
 }