@nx/remix 18.0.2 → 18.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/remix",
-  "version": "18.0.2",
+  "version": "18.0.4",
   "description": "The Remix plugin for Nx contains executors and generators for managing Remix applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Vitest, Jest, Cypress, and Storybook.\n\n- Generators for applications, libraries, routes, loaders, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
   "repository": {
     "type": "git",
@@ -28,12 +28,12 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@nx/devkit": "18.0.2",
-    "@nx/js": "18.0.2",
-    "@nx/react": "18.0.2",
+    "@nx/devkit": "18.0.4",
+    "@nx/js": "18.0.4",
+    "@nx/react": "18.0.4",
     "tslib": "^2.3.1",
     "@phenomnomnominal/tsquery": "~5.0.1",
-    "@nrwl/remix": "18.0.2"
+    "@nrwl/remix": "18.0.4"
   },
   "peerDependencies": {},
   "publishConfig": {

package/src/generators/application/__snapshots__/application.impl.spec.ts.snap

@@ -144,7 +144,7 @@ export default function Index() {
 "
 `;
 
-exports[`Remix Application Integrated Repo --projectNameAndRootFormat=as-provided --e2eTestRunner should generate an e2e application for the app 1`] = `
+exports[`Remix Application Integrated Repo --projectNameAndRootFormat=as-provided --e2eTestRunner should generate a cypress e2e application for the app 1`] = `
 "import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
 
 import { defineConfig } from 'cypress';
@@ -158,6 +158,79 @@ export default defineConfig({
 "
 `;
 
+exports[`Remix Application Integrated Repo --projectNameAndRootFormat=as-provided --e2eTestRunner should generate a playwright e2e application for the app 1`] = `
+"import { defineConfig, devices } from '@playwright/test';
+import { nxE2EPreset } from '@nx/playwright/preset';
+
+import { workspaceRoot } from '@nx/devkit';
+
+// For CI, you may want to set BASE_URL to the deployed application.
+const baseURL = process.env['BASE_URL'] || 'http://localhost:4200';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  ...nxE2EPreset(__filename, { testDir: './src' }),
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    baseURL,
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'pnpm exec nx serve test',
+    url: 'http://localhost:4200',
+    reuseExistingServer: !process.env.CI,
+    cwd: workspaceRoot,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    // Uncomment for mobile browsers support
+    /* {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+    }, */
+
+    // Uncomment for branded browsers
+    /* {
+      name: 'Microsoft Edge',
+      use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    },
+    {
+      name: 'Google Chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    } */
+  ],
+});
+"
+`;
+
 exports[`Remix Application Integrated Repo --projectNameAndRootFormat=as-provided --js should create the application correctly 1`] = `
 "import { createWatchPaths } from '@nx/remix';
 import { dirname } from 'path';
@@ -250,9 +323,8 @@ export default {
 exports[`Remix Application Integrated Repo --projectNameAndRootFormat=as-provided --unitTestRunner should generate the correct files for testing using jest 2`] = `
 "/* eslint-disable */
 export default {
-  setupFilesAfterEnv: ['<rootDir>/test-setup.ts'],
   displayName: 'test',
-  preset: '../jest.preset.cjs',
+  preset: '../jest.preset.js',
   transform: {
     '^.+\\\\.[tj]sx?$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
   },
@@ -549,7 +621,7 @@ export default function Index() {
 "
 `;
 
-exports[`Remix Application Integrated Repo --projectNameAndRootFormat=derived --e2eTestRunner should generate an e2e application for the app 1`] = `
+exports[`Remix Application Integrated Repo --projectNameAndRootFormat=derived --e2eTestRunner should generate a cypress e2e application for the app 1`] = `
 "import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
 
 import { defineConfig } from 'cypress';
@@ -563,6 +635,79 @@ export default defineConfig({
 "
 `;
 
+exports[`Remix Application Integrated Repo --projectNameAndRootFormat=derived --e2eTestRunner should generate a playwright e2e application for the app 1`] = `
+"import { defineConfig, devices } from '@playwright/test';
+import { nxE2EPreset } from '@nx/playwright/preset';
+
+import { workspaceRoot } from '@nx/devkit';
+
+// For CI, you may want to set BASE_URL to the deployed application.
+const baseURL = process.env['BASE_URL'] || 'http://localhost:4200';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  ...nxE2EPreset(__filename, { testDir: './src' }),
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    baseURL,
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'pnpm exec nx serve test',
+    url: 'http://localhost:4200',
+    reuseExistingServer: !process.env.CI,
+    cwd: workspaceRoot,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    // Uncomment for mobile browsers support
+    /* {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+    }, */
+
+    // Uncomment for branded browsers
+    /* {
+      name: 'Microsoft Edge',
+      use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    },
+    {
+      name: 'Google Chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    } */
+  ],
+});
+"
+`;
+
 exports[`Remix Application Integrated Repo --projectNameAndRootFormat=derived --js should create the application correctly 1`] = `
 "import { createWatchPaths } from '@nx/remix';
 import { dirname } from 'path';
@@ -655,9 +800,8 @@ export default {
 exports[`Remix Application Integrated Repo --projectNameAndRootFormat=derived --unitTestRunner should generate the correct files for testing using jest 2`] = `
 "/* eslint-disable */
 export default {
-  setupFilesAfterEnv: ['<rootDir>/test-setup.ts'],
   displayName: 'test',
-  preset: '../../jest.preset.cjs',
+  preset: '../../jest.preset.js',
   transform: {
     '^.+\\\\.[tj]sx?$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
   },
@@ -810,7 +954,7 @@ export default function Index() {
 "
 `;
 
-exports[`Remix Application Standalone Project Repo --e2eTestRunner should generate an e2e application for the app 1`] = `
+exports[`Remix Application Standalone Project Repo --e2eTestRunner should generate a cypress e2e application for the app 1`] = `
 "import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
 
 import { defineConfig } from 'cypress';
@@ -1157,3 +1301,76 @@ exports[`Remix Application Standalone Project Repo should create the application
 }
 "
 `;
+
+exports[`Remix Application Standalone Project Repo should generate a playwright e2e application for the app 1`] = `
+"import { defineConfig, devices } from '@playwright/test';
+import { nxE2EPreset } from '@nx/playwright/preset';
+
+import { workspaceRoot } from '@nx/devkit';
+
+// For CI, you may want to set BASE_URL to the deployed application.
+const baseURL = process.env['BASE_URL'] || 'http://localhost:4200';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  ...nxE2EPreset(__filename, { testDir: './src' }),
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    baseURL,
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'pnpm exec nx serve test',
+    url: 'http://localhost:4200',
+    reuseExistingServer: !process.env.CI,
+    cwd: workspaceRoot,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    // Uncomment for mobile browsers support
+    /* {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+    }, */
+
+    // Uncomment for branded browsers
+    /* {
+      name: 'Microsoft Edge',
+      use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    },
+    {
+      name: 'Google Chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    } */
+  ],
+});
+"
+`;

package/src/generators/application/application.impl.js

@@ -129,7 +129,7 @@ async function remixApplicationGeneratorInternal(tree, _options) {
             }
             tasks.push(jestTask);
         }
-        const pkgInstallTask = (0, lib_1.updateUnitTestConfig)(tree, options.projectRoot, options.unitTestRunner);
+        const pkgInstallTask = (0, lib_1.updateUnitTestConfig)(tree, options.projectRoot, options.unitTestRunner, options.rootProject);
         tasks.push(pkgInstallTask);
     }
     else {
@@ -185,27 +185,7 @@ async function remixApplicationGeneratorInternal(tree, _options) {
         // Otherwise, extract the tsconfig.base.json from tsconfig.json so we can share settings.
         (0, create_ts_config_1.extractTsConfigBase)(tree);
     }
-    // TODO(@columferry): add support for playwright?
-    if (options.e2eTestRunner === 'cypress') {
-        const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', (0, versions_1.getPackageVersion)(tree, 'nx'));
-        addFileServerTarget(tree, options, 'serve-static');
-        (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
-            projectType: 'application',
-            root: options.e2eProjectRoot,
-            sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
-            targets: {},
-            tags: [],
-            implicitDependencies: [options.projectName],
-        });
-        tasks.push(await configurationGenerator(tree, {
-            project: options.e2eProjectName,
-            directory: 'src',
-            skipFormat: true,
-            devServerTarget: `${options.projectName}:serve:development`,
-            baseUrl: 'http://localhost:4200',
-            addPlugin: options.addPlugin,
-        }));
-    }
+    tasks.push(await (0, lib_1.addE2E)(tree, options));
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }
@@ -215,15 +195,4 @@ async function remixApplicationGeneratorInternal(tree, _options) {
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 exports.remixApplicationGeneratorInternal = remixApplicationGeneratorInternal;
-function addFileServerTarget(tree, options, targetName) {
-    const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.projectName);
-    projectConfig.targets[targetName] = {
-        executor: '@nx/web:file-server',
-        options: {
-            buildTarget: `${options.projectName}:build`,
-            port: 4200,
-        },
-    };
-    (0, devkit_1.updateProjectConfiguration)(tree, options.projectName, projectConfig);
-}
 exports.default = remixApplicationGenerator;

package/src/generators/application/lib/add-e2e.d.ts

@@ -0,0 +1,3 @@
+import { type Tree } from '@nx/devkit';
+import { type NormalizedSchema } from './normalize-options';
+export declare function addE2E(tree: Tree, options: NormalizedSchema): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/application/lib/add-e2e.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addE2E = void 0;
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("../../../utils/versions");
+async function addE2E(tree, options) {
+    if (options.e2eTestRunner === 'cypress') {
+        const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', (0, versions_1.getPackageVersion)(tree, 'nx'));
+        addFileServerTarget(tree, options, 'serve-static');
+        (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
+            projectType: 'application',
+            root: options.e2eProjectRoot,
+            sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
+            targets: {},
+            tags: [],
+            implicitDependencies: [options.projectName],
+        });
+        return await configurationGenerator(tree, {
+            project: options.e2eProjectName,
+            directory: 'src',
+            skipFormat: true,
+            devServerTarget: `${options.projectName}:serve:development`,
+            baseUrl: 'http://localhost:4200',
+            addPlugin: options.addPlugin,
+        });
+    }
+    else if (options.e2eTestRunner === 'playwright') {
+        const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/playwright', (0, versions_1.getPackageVersion)(tree, 'nx'));
+        (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
+            projectType: 'application',
+            root: options.e2eProjectRoot,
+            sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
+            targets: {},
+            tags: [],
+            implicitDependencies: [options.projectName],
+        });
+        return configurationGenerator(tree, {
+            project: options.e2eProjectName,
+            skipFormat: true,
+            skipPackageJson: false,
+            directory: 'src',
+            js: false,
+            linter: options.linter,
+            setParserOptionsProject: false,
+            webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx serve ${options.name}`,
+            webServerAddress: 'http://localhost:4200',
+            rootProject: options.rootProject,
+            addPlugin: options.addPlugin,
+        });
+    }
+    else {
+        return () => { };
+    }
+}
+exports.addE2E = addE2E;
+function addFileServerTarget(tree, options, targetName) {
+    const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.projectName);
+    projectConfig.targets[targetName] = {
+        executor: '@nx/web:file-server',
+        options: {
+            buildTarget: `${options.projectName}:build`,
+            port: 4200,
+        },
+    };
+    (0, devkit_1.updateProjectConfiguration)(tree, options.projectName, projectConfig);
+}

package/src/generators/application/lib/index.d.ts

@@ -1,2 +1,3 @@
 export * from './normalize-options';
 export * from './update-unit-test-config';
+export * from './add-e2e';

package/src/generators/application/lib/index.js

@@ -3,3 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./normalize-options"), exports);
 tslib_1.__exportStar(require("./update-unit-test-config"), exports);
+tslib_1.__exportStar(require("./add-e2e"), exports);

package/src/generators/application/lib/update-unit-test-config.d.ts

@@ -1,2 +1,2 @@
 import { type Tree } from '@nx/devkit';
-export declare function updateUnitTestConfig(tree: Tree, pathToRoot: string, unitTestRunner: 'vitest' | 'jest'): import("@nx/devkit").GeneratorCallback;
+export declare function updateUnitTestConfig(tree: Tree, pathToRoot: string, unitTestRunner: 'vitest' | 'jest', rootProject: boolean): import("@nx/devkit").GeneratorCallback;

package/src/generators/application/lib/update-unit-test-config.js

@@ -4,7 +4,7 @@ exports.updateUnitTestConfig = void 0;
 const devkit_1 = require("@nx/devkit");
 const testing_config_utils_1 = require("../../../utils/testing-config-utils");
 const versions_1 = require("../../../utils/versions");
-function updateUnitTestConfig(tree, pathToRoot, unitTestRunner) {
+function updateUnitTestConfig(tree, pathToRoot, unitTestRunner, rootProject) {
     const pathToTestSetup = (0, devkit_1.joinPathFragments)(pathToRoot, `test-setup.ts`);
     tree.write(pathToTestSetup, (0, devkit_1.stripIndents) `
   import { installGlobals } from '@remix-run/node';
@@ -16,9 +16,9 @@ function updateUnitTestConfig(tree, pathToRoot, unitTestRunner) {
         (0, testing_config_utils_1.updateVitestTestIncludes)(tree, pathToViteConfig, './tests/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}');
         (0, testing_config_utils_1.updateVitestTestSetup)(tree, pathToViteConfig, 'test-setup.ts');
     }
-    else if (unitTestRunner === 'jest') {
+    else if (unitTestRunner === 'jest' && rootProject) {
         const pathToJestConfig = (0, devkit_1.joinPathFragments)(pathToRoot, 'jest.config.ts');
-        tree.rename('jest.preset.js', 'jest.preset.cjs');
+        tree.write('jest.preset.cjs', tree.read('jest.preset.js', 'utf-8'));
         (0, testing_config_utils_1.updateJestTestSetup)(tree, pathToJestConfig, `<rootDir>/test-setup.ts`);
         tree.write(pathToJestConfig, tree
             .read(pathToJestConfig, 'utf-8')

package/src/generators/application/schema.d.ts

@@ -9,7 +9,7 @@ export interface NxRemixGeneratorSchema {
   projectNameAndRootFormat?: ProjectNameAndRootFormat;
   linter?: Linter;
   unitTestRunner?: 'vitest' | 'jest' | 'none';
-  e2eTestRunner?: 'cypress' | 'none';
+  e2eTestRunner?: 'cypress' | 'playwright' | 'none';
   skipFormat?: boolean;
   rootProject?: boolean;
   addPlugin?: boolean;

package/src/generators/application/schema.json

@@ -45,7 +45,7 @@
     },
     "e2eTestRunner": {
       "type": "string",
-      "enum": ["cypress", "none"],
+      "enum": ["cypress", "playwright", "none"],
       "default": "cypress",
       "description": "Test runner to use for e2e tests"
     },