feat(nx-plugin): update to support NX 21 continuous pipelines

Author: seriouslag

packages/nx-plugin/package.json

@@ -48,9 +48,9 @@
   "executors": "./executors.json",
   "generators": "./generators.json",
   "dependencies": {
-    "@hey-api/json-schema-ref-parser": "1.0.5",
+    "@hey-api/json-schema-ref-parser": "1.0.6",
     "@hey-api/openapi-ts": "workspace:*",
-    "@nx/devkit": "20.8.1",
+    "@nx/devkit": "21.0.3",
     "api-smart-diff": "^1.0.6",
     "latest-version": "9.0.0",
     "swagger2openapi": "^7.0.8",

packages/nx-plugin/src/executors/update-api/schema.d.ts

@@ -15,4 +15,5 @@ export interface UpdateApiExecutorSchema {
    * Temporary folder used to store files, only change for testing
    */
   tempFolder?: string;
+  watch?: boolean;
 }

packages/nx-plugin/src/executors/update-api/updateApi.schema.json

@@ -55,6 +55,11 @@
       "type": "boolean",
       "description": "If true, the Client code will be regenerated even if the spec has not changed, also pass --skip-nx-cache to avoid caching issues",
       "default": false
+    },
+    "watch": {
+      "type": "boolean",
+      "description": "If true, the client will be watched for changes and regenerated when they occur",
+      "default": false
     }
   },
   "required": ["spec", "scope", "name"]

packages/nx-plugin/src/executors/update-api/updateApi.ts

@@ -1,5 +1,11 @@
 import { existsSync, writeFileSync } from 'node:fs';
-import { cp, readFile, rm } from 'node:fs/promises';
+import {
+  cp,
+  readFile,
+  rm,
+  watch as fileWatch,
+  writeFile,
+} from 'node:fs/promises';
 import { join } from 'node:path';
 
 import type { PromiseExecutor } from '@nx/devkit';
@@ -15,6 +21,7 @@ import {
   compareSpecs,
   formatFiles,
   generateClientCode,
+  isUrl,
   makeDir,
 } from '../../utils';
 import { CONSTANTS } from '../../vars';
@@ -130,12 +137,41 @@ async function setup({
   };
 }
 
-const runExecutor: PromiseExecutor<UpdateApiExecutorSchema> = async (
+const handleWatch: PromiseExecutor<UpdateApiExecutorSchema> = async (
   options,
-  // this is added to stop the CI from complaining about not using the context and to stop the linter from complaining
+  context,
+) => {
+  // Do not watch spec files if they are URLs
+  const isSpecFileUrl = isUrl(options.spec);
+  if (isSpecFileUrl) {
+    logger.error('Spec file is a url.');
+    throw new Error('Spec file is a url, not watching.');
+  }
+
+  const { watch, ...rest } = options;
+  if (!watch) {
+    return { success: false };
+  }
+  logger.info(`Watching spec file ${options.spec} for changes...`);
+  const watcher = fileWatch(rest.spec);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _context,
+  for await (const _ of watcher) {
+    logger.info(`Spec file ${options.spec} has changed, updating...`);
+    // do not pass the watch flag to the runExecutor as it will cause an infinite loop
+    await runExecutor(rest, context);
+    logger.info(`Spec file ${options.spec} updated successfully.`);
+  }
+  return { success: true };
+};
+
+const runExecutor: PromiseExecutor<UpdateApiExecutorSchema> = async (
+  options,
+  context,
 ) => {
+  if (options.watch) {
+    return handleWatch(options, context);
+  }
+
   const tempFolder =
     // use the provided temp folder or use the default temp folder and append the project name to it
     // we append the project name to the temp folder to avoid conflicts between different projects using the same temp folder
@@ -224,7 +260,7 @@ const runExecutor: PromiseExecutor<UpdateApiExecutorSchema> = async (
         filepath: absoluteTempSpecPath,
       });
 
-      writeFileSync(absoluteExistingSpecPath, formattedSpec);
+      await writeFile(absoluteExistingSpecPath, formattedSpec);
       logger.debug(`Spec file updated successfully`);
     } else {
       logger.error(

packages/nx-plugin/src/generators/openapi-client/README.md

@@ -50,19 +50,22 @@ The generator creates a new library project with the following structure:
 libs/<name>/
 ├── api/
 │   └── spec.yaml        # Bundled and dereferenced OpenAPI spec file
-├── src/
-│   ├── generated/       # Generated API client code (not committed to git)
-|   ├── client.spec.ts   # Unit test for the client code
-│   ├── index.ts         # Exports everything from generated/
-|   └── rq.ts            # Exports tanstack query client code (if @tanstack/react-query is in the plugins array)
 ├── package.json
 ├── vitest.config.ts     # Vitest configuration (if test is set to 'vitest')
 ├── README.md
 ├── project.json         # NX project configuration
 ├── tsconfig.json        # root config
 ├── tsconfig.lib.json    # library config
 ├── tsconfig.spec.json   # test config (if test is set to a value other than none)
-└── openapi-ts.config.ts # Configuration for @hey-api/openapi-ts
+├── openapi-ts.config.ts # Configuration for @hey-api/openapi-ts
+└── src/
+    ├── generated/       # Generated API client code (not committed to git)
+    ├── client.spec.ts   # Unit test for the client code
+    ├── index.ts         # Exports everything from generated/
+    │   # conditional
+    ├── rq.ts            # Exports tanstack query client code (if @tanstack/react-query is in the plugins array)
+    ├── schemas.ts       # Exports json schemas (if @hey-api/schemas is in the plugins array)
+    └── zod.ts           # Exports zod schemas (if zod is in the plugins array)
 ```
 
 ## Generating the API Client

packages/nx-plugin/src/generators/openapi-client/files/openapi-ts.config.ts.template

@@ -1,12 +1,12 @@
 import { defineConfig } from '@hey-api/openapi-ts';
 
 export default defineConfig({
-  input: '<%= SPEC_DIR_NAME %>/<%= SPEC_FILE_NAME %>',
+  input: '<%- SPEC_DIR_NAME %>/<%= SPEC_FILE_NAME %>',
   output: 'src/<%= GENERATED_DIR_NAME %>',
   plugins: [
-    '<%= clientType %>',
+    '<%- clientType %>',
     <% for(let x = 0; x < plugins.length; x++) { %>
-      '<%= plugins[x] %>',
+      <%- plugins[x] %>,
     <% } %>
   ],
 });

packages/nx-plugin/src/generators/openapi-client/files/package.json.template

@@ -1,8 +1,8 @@
 {
-  "name": "<%= projectScope %>/<%= projectName %>",
+  "name": "<%= projectScope %>/<%- projectName %>",
   "version": "0.1.0",
   "type": "commonjs",
   "scripts": {
-    "update": "nx run <%= projectScope %>/<%= projectName %>:updateApi"
+    "update": "nx run <%- projectScope %>/<%- projectName %>:updateApi"
   }
 }

packages/nx-plugin/src/generators/openapi-client/files/tsconfig.json.template

@@ -1,5 +1,5 @@
 {
-  "extends": "<%= pathToTsConfig %>/<%= tsConfigName %>",
+  "extends": "<%- pathToTsConfig %>/<%- tsConfigName %>",
   "compilerOptions": {
   },
   "files": [],

packages/nx-plugin/src/generators/openapi-client/openapiClient.schema.json

@@ -74,6 +74,10 @@
     "baseTsConfigPath": {
       "type": "string",
       "description": "The path to the base tsconfig file that contains the compiler paths used to resolve the imports, use this if the base tsconfig file is not in the workspace root. This can be a file or a directory. If it is a directory and the baseTsConfigName is provided then the baseTsConfigName will be added to the path. If it is a file and the baseTsConfigName is provided then there will be an error."
+    },
+    "serveCmdName": {
+      "type": "string",
+      "description": "The command name to use to serve the implicit dependencies, defaults to `serve`. This is used to watch the implicit dependencies for changes."
     }
   },
   "required": ["name", "spec", "scope"]

packages/nx-plugin/src/generators/openapi-client/openapiClient.spec.ts

@@ -81,10 +81,12 @@ describe('openapi-client generator', () => {
         clientType: '@hey-api/client-fetch',
         isPrivate: true,
         plugins: ['@hey-api/typescript', '@hey-api/sdk'],
+        preformInstall: false,
         projectDirectory: `${tempDirectory}/test-api-${uuid}`,
         projectName: 'test-api',
         projectRoot: `${tempDirectory}/test-api-${uuid}/test-api`,
         projectScope: '@test-api',
+        serveCmdName: 'serve',
         specFile: specPath,
         tagArray: ['api', 'openapi'],
         tempFolder: options.tempFolderDir,
@@ -112,10 +114,12 @@ describe('openapi-client generator', () => {
         clientType: '@hey-api/client-fetch',
         isPrivate: true,
         plugins: ['@hey-api/typescript', '@hey-api/sdk'],
+        preformInstall: false,
         projectDirectory: 'custom-dir',
         projectName: 'test-api',
         projectRoot: 'custom-dir/test-api',
         projectScope: '@test-api',
+        serveCmdName: 'serve',
         specFile: specPath,
         tagArray: ['custom', 'tags'],
         tempFolder: options.tempFolderDir,