feat(qwik-nx): build executor

e2e/qwik-nx-e2e/tests/application-basic-behavior.suite.ts

@@ -9,6 +9,7 @@ import {
   runCommandUntil,
   promisifiedTreeKill,
   killPort,
+  stripConsoleColors,
 } from '@qwikifiers/e2e/utils';
 
 export function testApplicationBasicBehavior(generator: 'app' | 'preset') {
@@ -35,9 +36,18 @@ export function testApplicationBasicBehavior(generator: 'app' | 'preset') {
     });
 
     it('should create qwik-nx', async () => {
-      const result = await runNxCommandAsync(`build-ssr ${project}`);
+      const result = await runNxCommandAsync(`build ${project}`);
+      expect(stripConsoleColors(result.stdout.replace(/\n|\s/g, ''))).toContain(
+        [
+          'Targets to be executed:',
+          `${project}:build.client`,
+          `${project}:build.ssr`,
+        ]
+          .join('')
+          .replace(/\n|\s/g, '')
+      );
       expect(result.stdout).toContain(
-        `Successfully ran target build-ssr for project ${project}`
+        `Successfully ran target build for project ${project}`
       );
       expect(() =>
         checkFilesExist(`dist/apps/${project}/client/q-manifest.json`)
@@ -47,6 +57,25 @@ export function testApplicationBasicBehavior(generator: 'app' | 'preset') {
       ).not.toThrow();
     }, 200000);
 
+    it('should run build with a specified configuration', async () => {
+      // TODO: cloudflare pages or custom configurations should also be tested
+      const result = await runNxCommandAsync(
+        `build ${project} --configuration=preview`
+      );
+      expect(stripConsoleColors(result.stdout.replace(/\n|\s/g, ''))).toContain(
+        [
+          'Targets to be executed:',
+          `${project}:build.client:preview`,
+          `${project}:build.ssr:preview`,
+        ]
+          .join('')
+          .replace(/\n|\s/g, '')
+      );
+      expect(result.stdout).toContain(
+        `Successfully ran target build for project ${project}`
+      );
+    }, 200000);
+
     it('should serve application in dev mode with custom port', async () => {
       const port = 4212;
       const p = await runCommandUntil(

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

@@ -106,9 +106,9 @@ describe('qwikNxVite plugin e2e', () => {
     }, 200000);
 
     it('should be able to successfully build the application', async () => {
-      const result = await runNxCommandAsync(`build-ssr ${project}`);
+      const result = await runNxCommandAsync(`build ${project}`);
       expect(result.stdout).toContain(
-        `Successfully ran target build-ssr for project ${project}`
+        `Successfully ran target build for project ${project}`
       );
       expect(() =>
         checkFilesExist(`dist/apps/${project}/client/q-manifest.json`)

e2e/utils/index.ts

@@ -186,7 +186,7 @@ export function getEnvironmentVariables() {
  * @param log
  * @returns
  */
-function stripConsoleColors(log: string): string {
+export function stripConsoleColors(log: string): string {
   return log.replace(
     /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g,
     ''

packages/qwik-nx/.eslintrc.json

@@ -15,7 +15,12 @@
       "rules": {}
     },
     {
-      "files": ["./package.json", "./generators.json", "./executors.json"],
+      "files": [
+        "./package.json",
+        "./generators.json",
+        "./executors.json",
+        "./migrations.json"
+      ],
       "parser": "jsonc-eslint-parser",
       "rules": {
         "@nrwl/nx/nx-plugin-checks": "error"

packages/qwik-nx/executors.json

@@ -1,4 +1,10 @@
 {
   "$schema": "http://json-schema.org/schema",
-  "executors": {}
+  "executors": {
+    "build": {
+      "implementation": "./src/executors/build/executor",
+      "schema": "./src/executors/build/schema.json",
+      "description": "build executor"
+    }
+  }
 }

packages/qwik-nx/migrations.json

@@ -0,0 +1,10 @@
+{
+  "generators": {
+    "switch-to-qwik-nx:build-executor": {
+      "version": "0.11.0",
+      "description": "switch-to-qwik-nx:build-executor",
+      "cli": "nx",
+      "implementation": "./src/migrations/switch-to-qwik-nx:build-executor/switch-to-qwik-nx:build-executor"
+    }
+  }
+}

packages/qwik-nx/package.json

@@ -28,5 +28,8 @@
     "vitest": "^0.25.0",
     "@playwright/test": "^1.30.0",
     "undici": "^5.18.0"
+  },
+  "nx-migrations": {
+    "migrations": "./migrations.json"
   }
 }

packages/qwik-nx/project.json

@@ -37,6 +37,11 @@
             "input": "./packages/qwik-nx",
             "glob": "executors.json",
             "output": "."
+          },
+          {
+            "input": "./packages/qwik-nx",
+            "glob": "migrations.json",
+            "output": "."
           }
         ]
       }
@@ -49,7 +54,8 @@
           "packages/qwik-nx/**/*.ts",
           "packages/qwik-nx/generators.json",
           "packages/qwik-nx/executors.json",
-          "packages/qwik-nx/package.json"
+          "packages/qwik-nx/package.json",
+          "packages/qwik-nx/migrations.json"
         ]
       }
     },

packages/qwik-nx/src/executors/build/executor.spec.ts

@@ -0,0 +1,50 @@
+import { BuildExecutorSchema } from './schema';
+import executor from './executor';
+import { ExecutorContext, runExecutor, Target } from '@nrwl/devkit';
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const devkit: { runExecutor: typeof runExecutor } = require('@nrwl/devkit');
+
+describe('Build Executor', () => {
+  let runExecutorPayloads: Target[] = [];
+
+  jest.spyOn(devkit, 'runExecutor').mockImplementation((target: Target) =>
+    Promise.resolve(
+      (async function* () {
+        runExecutorPayloads.push(target);
+        yield { success: true, target }; // yielding target for debugging purposes
+      })()
+    )
+  );
+
+  afterEach(() => {
+    runExecutorPayloads = [];
+  });
+
+  it('should execute targets sequentially', async () => {
+    const context = {
+      root: '/root',
+      projectName: 'my-app',
+      targetName: 'build',
+      configurationName: 'production',
+    } as ExecutorContext;
+
+    const options: BuildExecutorSchema = {
+      runSequence: ['my-app:target1:development', 'my-app:target2'],
+    };
+    const iterable = executor(options, context);
+    await iterable.next();
+    expect(runExecutorPayloads.map((p) => p.target)).toEqual(['target1']);
+    await iterable.next();
+    expect(runExecutorPayloads.map((p) => p.target)).toEqual([
+      'target1',
+      'target2',
+    ]);
+    const result = await iterable.next();
+    expect(runExecutorPayloads).toEqual([
+      { project: 'my-app', target: 'target1', configuration: 'development' },
+      { project: 'my-app', target: 'target2', configuration: 'production' },
+    ]);
+    expect(result.done).toEqual(true);
+  });
+});

packages/qwik-nx/src/executors/build/executor.ts

@@ -0,0 +1,41 @@
+import {
+  ExecutorContext,
+  output,
+  parseTargetString,
+  runExecutor,
+  targetToTargetString,
+} from '@nrwl/devkit';
+import { BuildExecutorSchema } from './schema';
+import * as chalk from 'chalk';
+
+export default async function* runBuildExecutor(
+  options: BuildExecutorSchema,
+  context: ExecutorContext
+) {
+  const configs = options.runSequence.map((target) => {
+    const cfg = parseTargetString(target, context.projectGraph!);
+    cfg.configuration ??= context.configurationName;
+    return cfg;
+  });
+
+  output.log({
+    title: `Building the ${context.projectName} project`,
+    bodyLines: [
+      '\nTargets to be executed:',
+      ...configs.map((t) => chalk.dim(targetToTargetString(t))),
+    ],
+  });
+
+  for (const target of configs) {
+    const step = await runExecutor(target, {}, context);
+
+    for await (const result of step) {
+      if (!result.success) {
+        return result;
+      }
+      yield {
+        success: true,
+      };
+    }
+  }
+}

packages/qwik-nx/src/executors/build/schema.d.ts

@@ -0,0 +1,3 @@
+export interface BuildExecutorSchema {
+  runSequence: string[];
+}

packages/qwik-nx/src/executors/build/schema.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "version": 2,
+  "cli": "nx",
+  "title": "Build executor",
+  "description": "",
+  "type": "object",
+  "properties": {
+    "runSequence": {
+      "description": "An array of targets to be executed in a sequence",
+      "type": "array",
+      "items": {
+        "type": "string",
+        "x-completion-type": "projectTarget"
+      }
+    }
+  },
+  "required": ["runSequence"]
+}

packages/qwik-nx/src/generators/application/utils/get-qwik-application-project-params.ts

@@ -11,16 +11,35 @@ export function getQwikApplicationProjectTargets(
 ): Record<string, TargetConfiguration> {
   return {
     build: getBuildTarget(params),
-    'build-ssr': getBuildSsrTarget(params),
+    'build.client': getBuildClientTarget(params),
+    'build.ssr': getBuildSsrTarget(params),
     preview: getPreviewTarget(params),
     test: getTestTarget(params),
     serve: getServeTarget(params),
-    serveDebug: getServeDebugTarget(params),
+    'serve.debug': getServeDebugTarget(params),
   };
 }
 
 function getBuildTarget(
   params: UpdateQwikAppConfigurationParams
+): TargetConfiguration {
+  return {
+    executor: 'qwik-nx:build',
+    options: {
+      runSequence: [
+        `${params.projectName}:build.client`,
+        `${params.projectName}:build.ssr`,
+      ],
+      outputPath: `dist/${params.projectRoot}`,
+    },
+    configurations: {
+      preview: {},
+    },
+  };
+}
+
+function getBuildClientTarget(
+  params: UpdateQwikAppConfigurationParams
 ): TargetConfiguration {
   return {
     executor: '@nrwl/vite:build',
@@ -46,7 +65,6 @@ function getBuildSsrTarget(
         mode: 'production',
       },
     },
-    dependsOn: ['build'],
   };
 }
 
@@ -59,7 +77,7 @@ function getPreviewTarget(
       command: 'vite preview',
       cwd: `${params.projectRoot}`,
     },
-    dependsOn: ['build-ssr'],
+    dependsOn: ['build'],
   };
 }
 function getTestTarget(
@@ -80,21 +98,10 @@ function getServeTarget(
 ): TargetConfiguration {
   return {
     executor: '@nrwl/vite:dev-server',
-    defaultConfiguration: 'development',
     options: {
-      buildTarget: `${params.projectName}:build`,
+      buildTarget: `${params.projectName}:build.client`,
       mode: 'ssr',
     },
-    configurations: {
-      development: {
-        buildTarget: `${params.projectName}:build:development`,
-        hmr: true,
-      },
-      production: {
-        buildTarget: `${params.projectName}:build:production`,
-        hmr: false,
-      },
-    },
   };
 }
 
@@ -104,7 +111,7 @@ function getServeDebugTarget(
   return {
     executor: 'nx:run-commands',
     options: {
-      command: `node --inspect-brk ${params.offsetFromRoot}/node_modules/vite/bin/vite.js --mode ssr --force`,
+      command: `node --inspect-brk ${params.offsetFromRoot}node_modules/vite/bin/vite.js --mode ssr --force`,
       cwd: params.projectRoot,
     },
   };