EDIT-938: Update to Node 18, Typescript 5.4, @nrwl to @nx 19.2, Eslin…

…t 8.57 (#103)

* Updated root project dependencies to match all other wanews packages, including Typescript 5.4.5, Updating from NRWL to NX, Updating to EsLint 8.57.0

* Began package conversion from @nrwl/* to @nx/*

* Updated all remaining packages to accept new @nx workflow

* Updated tsup to match the remaining versions

* Ran nx fix-configuration

* nx format

* Fixed packages from not building

* Removed old unnecessary workspace-lint as the workspace.json has been removed

* Updated to utilise node 18

* Fixed issues with e2e test due to new nx commands

* Updated to include jest as a dev dependency

* Updated the nx-vite test to successfully pass e2e

* Cleaned up pulumi to pass the E2E test

* Fixed up the nx-esbuild e2e test

* Updated to utilise foldered (apps/libs) within the e2e tests

* Updated to utilise pnpm@9 and to make the set verify-store-integrity command it's own command in main.yml and pr.yml

* Changeset

* Final package version updates

* Updated pnpm lock file

* Updated version for main.yml checkout action

* Updated tsup to a peer dependency

.changeset/shiny-boats-think.md

@@ -0,0 +1,24 @@
+---
+'typescript-project-references-e2e': major
+'@wanews/nx-typescript-project-references': major
+'nx-esbuild-e2e': major
+'nx-vite-e2e': major
+'@wanews/nx-esbuild': major
+'@wanews/nx-vite': major
+'@wanews/nx-pulumi': major
+---
+
+Updated plugins to utilise NX 19.2.x, Typescript 5.4.x & Node 18.
+This update has only been tested on Node 18 but may work on node versions higher.
+
+NOTE: In order to run these changes you must bring your project up to date with:
+@nx ^ 19.2.x
+@typescript-eslint/eslint-plugin ^ 7.12.x
+@typescript-eslint/parser ^ 7.12.x
+esbuild ^ 0.16.x
+eslint ^ 8.57.x
+jest ^ 29.7.x
+nx ^ 19.2.x
+tslib ^ 2.6.x
+typescript ^ 5.4.x
+typescript-json-schema ^ 0.63.x

.eslintrc.json

@@ -1,12 +1,12 @@
 {
     "root": true,
     "ignorePatterns": ["**/*"],
-    "plugins": ["@nrwl/nx"],
+    "plugins": ["@nx"],
     "overrides": [
         {
             "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
             "rules": {
-                "@nrwl/nx/enforce-module-boundaries": [
+                "@nx/enforce-module-boundaries": [
                     "error",
                     {
                         "enforceBuildableLibDependency": true,
@@ -23,12 +23,12 @@
         },
         {
             "files": ["*.ts", "*.tsx"],
-            "extends": ["plugin:@nrwl/nx/typescript"],
+            "extends": ["plugin:@nx/typescript"],
             "rules": {}
         },
         {
             "files": ["*.js", "*.jsx"],
-            "extends": ["plugin:@nrwl/nx/javascript"],
+            "extends": ["plugin:@nx/javascript"],
             "rules": {}
         }
     ]

.github/workflows/main.yml

@@ -13,16 +13,16 @@ jobs:
       changes: ${{ steps.version.outputs.changes }} # map step output to job output
     steps:
       - name: Checkout
-        uses: actions/checkout@main
+        uses: actions/checkout@v4
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
           token: ${{ secrets.SERVICE_ACCOUNT_PAT }}
 
       - name: Enable node
-        uses: actions/setup-node@master
+        uses: actions/setup-node@v4
         with:
-          node-version: 14.x
+          node-version: 18
           registry-url: 'https://registry.npmjs.org'
           scope: '@wanews'
         env:
@@ -36,7 +36,9 @@ jobs:
 
       - name: Install pnpm
         run: |
-          npm i -g pnpm@6
+          npm i -g pnpm@9
+      - name: Set verify-store-integrity
+        run: |
           pnpm set verify-store-integrity false
 
       - name: pnpm install

.github/workflows/pr.yml

@@ -10,12 +10,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@master
+        uses: actions/checkout@v4
 
       - name: Enable node
-        uses: actions/setup-node@master
+        uses: actions/setup-node@v4
         with:
-          node-version: 14.x
+          node-version: 18
 
       - name: Cache .pnpm-store
         uses: actions/cache@v1
@@ -25,7 +25,9 @@ jobs:
 
       - name: Install pnpm
         run: |
-          npm i -g pnpm@6
+          npm i -g pnpm@9
+      - name: Set verify-store-integrity
+        run: |
           pnpm set verify-store-integrity false
       - name: pnpm install
         run: |

.gitignore

@@ -44,3 +44,6 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+.nx/cache
+.nx/workspace-data

.pnpmfile.cjs

@@ -8,14 +8,14 @@ module.exports = {
 // this is a hack to get around that and insure they are not installed
 // transitively
 function readPackage(pkg) {
-  if (pkg.name === '@nrwl/workspace') {
-    delete pkg.dependencies['@nrwl/jest']
+  if (pkg.name === '@nx/workspace') {
+    delete pkg.dependencies['@nx/jest']
   }
-  if (pkg.name === '@nrwl/linter') {
-    delete pkg.dependencies['@nrwl/jest']
+  if (pkg.name === '@nx/eslint') {
+    delete pkg.dependencies['@nx/jest']
   }
-  if (pkg.name === '@nrwl/nx-plugin') {
-    delete pkg.dependencies['@nrwl/jest']
+  if (pkg.name === '@nx/plugin') {
+    delete pkg.dependencies['@nx/jest']
   }
   return pkg
 }

.prettierignore

@@ -2,3 +2,6 @@
 
 /dist
 /coverage
+
+/.nx/cache
+/.nx/workspace-data

.vscode/settings.json

@@ -2,7 +2,7 @@
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.codeActionsOnSave": {
-        "source.organizeImports": true
+        "source.organizeImports": "explicit"
     },
     "cSpell.enabled": false
 }

apps/nx-esbuild-e2e/package.json

@@ -4,6 +4,6 @@
     "main": "dist/index.js",
     "private": true,
     "peerDependencies": {
-        "tslib": "^2.1.0"
+        "tslib": "^2.6.3"
     }
 }

apps/nx-esbuild-e2e/project.json

@@ -1,4 +1,5 @@
 {
+    "name": "nx-esbuild-e2e",
     "$schema": "../../node_modules/nx/schemas/project-schema.json",
     "projectType": "application",
     "sourceRoot": "apps/nx-esbuild-e2e/src",

apps/nx-esbuild-e2e/tests/nx-esbuild.spec.ts

@@ -4,19 +4,35 @@ import {
     runCommandAsync,
     runNxCommandAsync,
     uniq,
-} from '@nrwl/nx-plugin/testing'
+} from '@nx/plugin/testing'
 import { describe, it } from 'vitest'
 
 describe('nx-esbuild e2e', () => {
     it('should create nx-esbuild', async () => {
+        console.debug(`1) Beginning to build test variables...`)
+
         const plugin = uniq('nx-esbuild')
+
+        console.debug(`2) Test variables built, let's ensure nx project...`)
+
         ensureNxProject('@wanews/nx-esbuild', 'libs/nx-esbuild')
         await runCommandAsyncHandlingError('npm install')
+
+        console.debug(
+            `3) Now let's npm install and add esbuild, nodemon & dotenv as dev dependencies...`,
+        )
+
         await runCommandAsyncHandlingError(
             'npm add esbuild nodemon dotenv --dev',
         )
 
-        await runNxCommandAsync(`generate @wanews/nx-esbuild:node ${plugin}`)
+        console.debug(
+            `4) Now let's generate a new nx-esbuild:node project with the id of: '${plugin}'...`,
+        )
+
+        await runNxCommandAsync(
+            `generate @wanews/nx-esbuild:node ${plugin} --directory=apps`,
+        )
 
         await runNxCommandAsync(`build ${plugin}`)
         // Ensure bundle exists on disk

apps/nx-vite-e2e/package.json

@@ -4,6 +4,6 @@
     "main": "dist/index.js",
     "private": true,
     "peerDependencies": {
-        "tslib": "^2.1.0"
+        "tslib": "^2.6.3"
     }
 }

apps/nx-vite-e2e/project.json

@@ -1,4 +1,5 @@
 {
+    "name": "nx-vite-e2e",
     "$schema": "../../node_modules/nx/schemas/project-schema.json",
     "projectType": "application",
     "sourceRoot": "apps/nx-vite-e2e/src",

apps/nx-vite-e2e/tests/nx-vite.spec.ts

@@ -1,23 +1,42 @@
 import {
     checkFilesExist,
     ensureNxProject,
+    readJson,
     runCommandAsync,
     runNxCommandAsync,
     uniq,
     updateFile,
-} from '@nrwl/nx-plugin/testing'
+} from '@nx/plugin/testing'
 import { describe, expect, it } from 'vitest'
 
 describe('nx-vite e2e', () => {
     it('should create nx-vite', async () => {
+        console.debug(`1) Beginning to build test variables...`)
+
         const plugin = uniq('nx-vite')
+
+        console.debug(`2) Test variables built, let's ensure nx project...`)
+
         ensureNxProject('@wanews/nx-vite', 'libs/nx-vite')
+
+        console.debug(
+            `3) Now let's npm install and add react, react-dom, vite, vitejs, vitest, vite-tsconfig-paths as dev dependencies...`,
+        )
+
         await runCommandAsyncHandlingError('npm install')
         await runCommandAsyncHandlingError(
             'npm add react react-dom vite @vitejs/plugin-react-refresh vite-tsconfig-paths vitest --dev',
         )
 
-        await runNxCommandAsync(`generate @wanews/nx-vite:react ${plugin}`)
+        console.debug(
+            `4) Now let's generate a new nx-vite:react project with the id of: '${plugin}'...`,
+        )
+
+        await runNxCommandAsync(
+            `generate @wanews/nx-vite:react ${plugin} --directory=apps`,
+        )
+
+        console.debug(`5) Create an example.spec.ts test file...`)
 
         updateFile(
             `apps/${plugin}/src/example.spec.ts`,
@@ -29,8 +48,24 @@ it('passes', () => {
 `,
         )
 
+        console.debug(
+            `6) Copy over the tsconfig.base.json from the CWD to the E2E file...`,
+        )
+
+        copyBaseTsConfigToE2E()
+
+        console.debug(`7) Lets now build the project...`)
+
         const result = await runNxCommandAsync(`build ${plugin}`)
+
+        console.debug(`8) Build successful! Now let's test the project...`)
+
         const testResult = await runNxCommandAsync(`test ${plugin}`)
+
+        console.debug(
+            `9) Test successful! Now let's ensure the bundle is on the disk...`,
+        )
+
         // Ensure bundle exists on disk
         await new Promise((resolve) => setTimeout(resolve, 100))
 
@@ -52,3 +87,14 @@ async function runCommandAsyncHandlingError(command: string) {
         throw err
     }
 }
+
+export function copyBaseTsConfigToE2E() {
+    updateFile(
+        `tsconfig.base.json`,
+        JSON.stringify(
+            readJson(process.cwd() + `/tsconfig.base.json`),
+            null,
+            2,
+        ),
+    )
+}

apps/pulumi-e2e/project.json

@@ -1,4 +1,5 @@
 {
+    "name": "pulumi-e2e",
     "$schema": "../../node_modules/nx/schemas/project-schema.json",
     "projectType": "application",
     "sourceRoot": "apps/pulumi-e2e/src",

apps/pulumi-e2e/tests/pulumi.spec.ts

@@ -4,27 +4,51 @@ import {
     readJson,
     runCommandAsync,
     uniq,
-} from '@nrwl/nx-plugin/testing'
+} from '@nx/plugin/testing'
 import { describe, expect, it } from 'vitest'
 
 describe('init e2e', () => {
     it('should create infrastructure project', async () => {
+        console.debug(`1) Beginning to build test variables...`)
+
         const app = uniq('app')
+
+        console.debug(`2) Test variables built, let's ensure nx project...`)
+
         ensureNxProject('@wanews/nx-esbuild', 'libs/nx-esbuild')
+
+        console.debug(
+            `3) Now let's npm install and generate nx-esbuild:node ${app}...`,
+        )
+
         await runCommandAsyncHandlingError('npm install')
         await runCommandAsyncHandlingError(
-            `npx nx generate @wanews/nx-esbuild:node ${app}`,
+            `npx nx generate @wanews/nx-esbuild:node ${app} --directory=apps`,
         )
 
+        console.debug(`4) Patch the json for plugin...`)
+
         patchPackageJsonForPlugin('@wanews/nx-pulumi', 'libs/pulumi')
+
+        console.debug(`5) Re-run npm install, and nx-pulumi:init a ${app}...`)
+
         await runCommandAsyncHandlingError('npm install')
         await runCommandAsyncHandlingError(
-            `npx nx generate @wanews/nx-pulumi:init --projectName ${app} --tags infrastructure`,
+            `npx nx generate @wanews/nx-pulumi:init --projectName ${app} --directory=apps --tags infrastructure`,
         )
+
+        console.debug(
+            `6) Now let's add esbuild, nodemon, dotenv to dev dependencies...`,
+        )
+
         await runCommandAsyncHandlingError(
             'npm add esbuild nodemon dotenv --dev',
         )
 
+        console.debug(
+            `7) Now let's do a few tests to compare the '${app}/project.json'...`,
+        )
+
         const appProjectJson = readJson(`apps/${app}/project.json`)
         expect(appProjectJson.targets).toMatchObject({
             deploy: {
@@ -34,6 +58,11 @@ describe('init e2e', () => {
                 },
             },
         })
+
+        console.debug(
+            `8) Now let's do a test to compare the '${app}-infrastructure/project.json'...`,
+        )
+
         const appInfrastructureProjectJson = readJson(
             `apps/${app}-infrastructure/project.json`,
         )
@@ -42,7 +71,7 @@ describe('init e2e', () => {
             sourceRoot: `apps/${app}-infrastructure/src`,
             targets: {
                 lint: {
-                    executor: '@nrwl/linter:eslint',
+                    executor: '@nx/eslint:lint',
                     options: {
                         lintFilePatterns: [
                             `apps/${app}-infrastructure/**/*.ts`,

apps/typescript-project-references-e2e/package.json

@@ -4,6 +4,6 @@
     "main": "dist/index.js",
     "private": true,
     "peerDependencies": {
-        "tslib": "^2.1.0"
+        "tslib": "^2.6.3"
     }
 }