@nx/remix 16.8.2 → 17.2.5

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

@@ -1,150 +1,200 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const create_ts_config_1 = require("@nx/js/src/utils/typescript/create-ts-config");
 const versions_1 = require("../../utils/versions");
-const cypress_impl_1 = require("../cypress/cypress.impl");
 const lib_1 = require("./lib");
-function default_1(tree, _options) {
-    return tslib_1.__awaiter(this, void 0, void 0, function* () {
-        const options = (0, lib_1.normalizeOptions)(tree, _options);
-        const tasks = [];
-        (0, devkit_1.addProjectConfiguration)(tree, options.projectName, {
-            root: options.projectRoot,
-            sourceRoot: `${options.projectRoot}`,
-            projectType: 'application',
-            tags: options.parsedTags,
-            targets: {
-                build: {
-                    executor: '@nx/remix:build',
-                    outputs: ['{options.outputPath}'],
-                    options: {
-                        outputPath: (0, devkit_1.joinPathFragments)('dist', options.projectRoot),
-                    },
+async function default_1(tree, _options) {
+    const options = await (0, lib_1.normalizeOptions)(tree, _options);
+    const tasks = [];
+    (0, devkit_1.addProjectConfiguration)(tree, options.projectName, {
+        root: options.projectRoot,
+        sourceRoot: `${options.projectRoot}`,
+        projectType: 'application',
+        tags: options.parsedTags,
+        targets: {
+            build: {
+                executor: '@nx/remix:build',
+                outputs: ['{options.outputPath}'],
+                options: {
+                    outputPath: (0, devkit_1.joinPathFragments)('dist', options.projectRoot),
                 },
-                serve: {
-                    executor: `@nx/remix:serve`,
-                    options: {
-                        port: 4200,
-                    },
+            },
+            serve: {
+                executor: `@nx/remix:serve`,
+                options: {
+                    command: `${(0, devkit_1.getPackageManagerCommand)().exec} remix-serve build/index.js`,
+                    manual: true,
+                    port: 4200,
                 },
-                start: {
-                    dependsOn: ['build'],
-                    command: `remix-serve build`,
-                    options: {
-                        cwd: options.projectRoot,
-                    },
+            },
+            start: {
+                dependsOn: ['build'],
+                command: `remix-serve build/index.js`,
+                options: {
+                    cwd: options.projectRoot,
                 },
-                typecheck: {
-                    command: `tsc`,
-                    options: {
-                        cwd: options.projectRoot,
-                    },
+            },
+            typecheck: {
+                command: `tsc`,
+                options: {
+                    cwd: options.projectRoot,
                 },
             },
-        });
-        const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {
-            '@remix-run/node': versions_1.remixVersion,
-            '@remix-run/react': versions_1.remixVersion,
-            '@remix-run/serve': versions_1.remixVersion,
-            isbot: versions_1.isbotVersion,
-            react: versions_1.reactVersion,
-            'react-dom': versions_1.reactDomVersion,
-        }, {
-            '@remix-run/dev': versions_1.remixVersion,
-            '@remix-run/eslint-config': versions_1.remixVersion,
-            '@types/react': versions_1.typesReactVersion,
-            '@types/react-dom': versions_1.typesReactDomVersion,
-            eslint: versions_1.eslintVersion,
-            typescript: versions_1.typescriptVersion,
-        });
-        tasks.push(installTask);
-        const vars = Object.assign(Object.assign({}, options), { tmpl: '', offsetFromRoot: (0, devkit_1.offsetFromRoot)(options.projectRoot), remixVersion: versions_1.remixVersion,
-            isbotVersion: versions_1.isbotVersion,
-            reactVersion: versions_1.reactVersion,
-            reactDomVersion: versions_1.reactDomVersion,
-            typesReactVersion: versions_1.typesReactVersion,
-            typesReactDomVersion: versions_1.typesReactDomVersion,
-            eslintVersion: versions_1.eslintVersion,
-            typescriptVersion: versions_1.typescriptVersion });
-        (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, 'files/common'), options.projectRoot, vars);
-        if (options.rootProject) {
-            const gitignore = tree.read('.gitignore', 'utf-8');
-            tree.write('.gitignore', `${gitignore}\n.cache\nbuild\npublic/build\n.env\n`);
-        }
-        else {
-            (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, 'files/integrated'), options.projectRoot, vars);
-        }
-        if (options.unitTestRunner !== 'none') {
-            if (options.unitTestRunner === 'vitest') {
-                const { vitestGenerator } = (0, devkit_1.ensurePackage)('@nx/vite', (0, versions_1.getPackageVersion)(tree, 'nx'));
-                const vitestTask = yield vitestGenerator(tree, {
-                    uiFramework: 'react',
-                    project: options.projectName,
-                    coverageProvider: 'c8',
-                    inSourceTests: false,
-                    skipFormat: true,
-                    testEnvironment: 'jsdom',
-                });
-                tasks.push(vitestTask);
-            }
-            else {
-                const { jestProjectGenerator } = (0, devkit_1.ensurePackage)('@nx/jest', (0, versions_1.getPackageVersion)(tree, 'nx'));
-                const jestTask = yield jestProjectGenerator(tree, {
-                    project: options.projectName,
-                    skipFormat: true,
-                    setupFile: 'none',
-                    supportTsx: true,
-                });
-                tasks.push(jestTask);
-            }
-            const pkgInstallTask = (0, lib_1.updateUnitTestConfig)(tree, options.projectRoot, options.unitTestRunner);
-            tasks.push(pkgInstallTask);
-        }
-        if (options.js) {
-            (0, devkit_1.toJS)(tree);
-        }
-        if (options.rootProject && tree.exists('tsconfig.base.json')) {
-            // If this is a standalone project, merge tsconfig.json and tsconfig.base.json.
-            const tsConfigBaseJson = (0, devkit_1.readJson)(tree, 'tsconfig.base.json');
-            (0, devkit_1.updateJson)(tree, 'tsconfig.json', (json) => {
-                var _a, _b, _c, _d;
-                delete json.extends;
-                json.compilerOptions = Object.assign(Object.assign(Object.assign({}, tsConfigBaseJson.compilerOptions), json.compilerOptions), { 
-                    // Taken from remix default setup
-                    // https://github.com/remix-run/remix/blob/68c8982/templates/remix/tsconfig.json#L15-L17
-                    paths: {
-                        '~/*': ['./app/*'],
-                    } });
-                json.include = [
-                    ...((_a = tsConfigBaseJson.include) !== null && _a !== void 0 ? _a : []),
-                    ...((_b = json.include) !== null && _b !== void 0 ? _b : []),
-                ];
-                json.exclude = [
-                    ...((_c = tsConfigBaseJson.exclude) !== null && _c !== void 0 ? _c : []),
-                    ...((_d = json.exclude) !== null && _d !== void 0 ? _d : []),
-                ];
-                return json;
+        },
+    });
+    const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {
+        '@remix-run/node': versions_1.remixVersion,
+        '@remix-run/react': versions_1.remixVersion,
+        '@remix-run/serve': versions_1.remixVersion,
+        isbot: versions_1.isbotVersion,
+        react: versions_1.reactVersion,
+        'react-dom': versions_1.reactDomVersion,
+    }, {
+        '@remix-run/dev': versions_1.remixVersion,
+        '@remix-run/eslint-config': versions_1.remixVersion,
+        '@types/react': versions_1.typesReactVersion,
+        '@types/react-dom': versions_1.typesReactDomVersion,
+        eslint: versions_1.eslintVersion,
+        typescript: versions_1.typescriptVersion,
+    });
+    tasks.push(installTask);
+    const vars = {
+        ...options,
+        tmpl: '',
+        offsetFromRoot: (0, devkit_1.offsetFromRoot)(options.projectRoot),
+        remixVersion: versions_1.remixVersion,
+        isbotVersion: versions_1.isbotVersion,
+        reactVersion: versions_1.reactVersion,
+        reactDomVersion: versions_1.reactDomVersion,
+        typesReactVersion: versions_1.typesReactVersion,
+        typesReactDomVersion: versions_1.typesReactDomVersion,
+        eslintVersion: versions_1.eslintVersion,
+        typescriptVersion: versions_1.typescriptVersion,
+    };
+    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, 'files/common'), options.projectRoot, vars);
+    if (options.rootProject) {
+        const gitignore = tree.read('.gitignore', 'utf-8');
+        tree.write('.gitignore', `${gitignore}\n.cache\nbuild\npublic/build\n.env\n`);
+    }
+    else {
+        (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, 'files/integrated'), options.projectRoot, vars);
+    }
+    if (options.unitTestRunner !== 'none') {
+        if (options.unitTestRunner === 'vitest') {
+            const { vitestGenerator } = (0, devkit_1.ensurePackage)('@nx/vite', (0, versions_1.getPackageVersion)(tree, 'nx'));
+            const vitestTask = await vitestGenerator(tree, {
+                uiFramework: 'react',
+                project: options.projectName,
+                coverageProvider: 'v8',
+                inSourceTests: false,
+                skipFormat: true,
+                testEnvironment: 'jsdom',
             });
-            tree.delete('tsconfig.base.json');
+            tasks.push(vitestTask);
         }
         else {
-            // Otherwise, extract the tsconfig.base.json from tsconfig.json so we can share settings.
-            (0, create_ts_config_1.extractTsConfigBase)(tree);
-        }
-        if (options.e2eTestRunner === 'cypress') {
-            const cypressTasks = yield (0, cypress_impl_1.default)(tree, {
+            const { configurationGenerator: jestConfigurationGenerator } = (0, devkit_1.ensurePackage)('@nx/jest', (0, versions_1.getPackageVersion)(tree, 'nx'));
+            const jestTask = await jestConfigurationGenerator(tree, {
                 project: options.projectName,
-                name: options.rootProject ? `e2e` : `${options.projectName}-e2e`,
+                setupFile: 'none',
+                supportTsx: true,
+                skipSerializers: false,
+                skipPackageJson: false,
+                skipFormat: true,
             });
-            tasks.push(cypressTasks);
+            const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.projectName);
+            projectConfig.targets['test'].options.passWithNoTests = true;
+            (0, devkit_1.updateProjectConfiguration)(tree, options.projectName, projectConfig);
+            tasks.push(jestTask);
         }
-        if (!options.skipFormat) {
-            yield (0, devkit_1.formatFiles)(tree);
-        }
-        return (0, devkit_1.runTasksInSerial)(...tasks);
-    });
+        const pkgInstallTask = (0, lib_1.updateUnitTestConfig)(tree, options.projectRoot, options.unitTestRunner);
+        tasks.push(pkgInstallTask);
+    }
+    else {
+        tree.delete((0, devkit_1.joinPathFragments)(options.projectRoot, `tests/routes/_index.spec.tsx`));
+    }
+    if (options.linter !== 'none') {
+        const { lintProjectGenerator } = (0, devkit_1.ensurePackage)('@nx/eslint', (0, versions_1.getPackageVersion)(tree, 'nx'));
+        const eslintTask = await lintProjectGenerator(tree, {
+            linter: options.linter,
+            project: options.projectName,
+            tsConfigPaths: [
+                (0, devkit_1.joinPathFragments)(options.projectRoot, 'tsconfig.app.json'),
+            ],
+            unitTestRunner: options.unitTestRunner,
+            skipFormat: true,
+            rootProject: options.rootProject,
+        });
+        tasks.push(eslintTask);
+    }
+    if (options.js) {
+        (0, devkit_1.toJS)(tree);
+    }
+    if (options.rootProject && tree.exists('tsconfig.base.json')) {
+        // If this is a standalone project, merge tsconfig.json and tsconfig.base.json.
+        const tsConfigBaseJson = (0, devkit_1.readJson)(tree, 'tsconfig.base.json');
+        (0, devkit_1.updateJson)(tree, 'tsconfig.json', (json) => {
+            delete json.extends;
+            json.compilerOptions = {
+                ...tsConfigBaseJson.compilerOptions,
+                ...json.compilerOptions,
+                // Taken from remix default setup
+                // https://github.com/remix-run/remix/blob/68c8982/templates/remix/tsconfig.json#L15-L17
+                paths: {
+                    '~/*': ['./app/*'],
+                },
+            };
+            json.include = [
+                ...(tsConfigBaseJson.include ?? []),
+                ...(json.include ?? []),
+            ];
+            json.exclude = [
+                ...(tsConfigBaseJson.exclude ?? []),
+                ...(json.exclude ?? []),
+            ];
+            return json;
+        });
+        tree.delete('tsconfig.base.json');
+    }
+    else {
+        // Otherwise, extract the tsconfig.base.json from tsconfig.json so we can share settings.
+        (0, create_ts_config_1.extractTsConfigBase)(tree);
+    }
+    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',
+        }));
+    }
+    if (!options.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
+    return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 exports.default = default_1;
-//# sourceMappingURL=application.impl.js.map
+function addFileServerTarget(tree, options, targetName) {
+    (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { '@nx/web': (0, versions_1.getPackageVersion)(tree, 'nx') });
+    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/files/common/app/root.tsx__tmpl__

@@ -8,11 +8,11 @@ import {
   ScrollRestoration,
 } from "@remix-run/react";
 
-export const meta: MetaFunction = () => ({
+export const meta: MetaFunction = () => ([{
   charset: "utf-8",
   title: "New Remix App",
   viewport: "width=device-width,initial-scale=1",
-});
+}]);
 
 export default function App() {
   return (
@@ -29,4 +29,4 @@ export default function App() {
       </body>
     </html>
   );
-}
+}

package/src/generators/application/files/common/tests/routes/_index.spec.tsx__tmpl__

@@ -0,0 +1,16 @@
+import { createRemixStub } from '@remix-run/testing';
+import { render, screen, waitFor } from '@testing-library/react';
+import Index from '../../app/routes/_index';
+
+test('renders loader data', async () => {
+  const RemixStub = createRemixStub([
+    {
+      path: '/',
+      Component: Index,
+    },
+  ]);
+
+  render(<RemixStub />);
+
+  await waitFor(() => screen.findByText('Welcome to Remix'));
+});

package/src/generators/application/files/integrated/package.json__tmpl__

@@ -4,6 +4,7 @@
   "description": "",
   "license": "",
   "scripts": {},
+  "type": "module",
   "dependencies": {
     "@remix-run/node": "<%= remixVersion %>",
     "@remix-run/react": "<%= remixVersion %>",

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

@@ -3,4 +3,3 @@ 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);
-//# sourceMappingURL=index.js.map

package/src/generators/application/lib/normalize-options.d.ts

@@ -1,8 +1,10 @@
-import { Tree } from '@nx/devkit';
-import { NxRemixGeneratorSchema } from '../schema';
+import { type Tree } from '@nx/devkit';
+import { type NxRemixGeneratorSchema } from '../schema';
 export interface NormalizedSchema extends NxRemixGeneratorSchema {
     projectName: string;
     projectRoot: string;
+    e2eProjectName: string;
+    e2eProjectRoot: string;
     parsedTags: string[];
 }
-export declare function normalizeOptions(tree: Tree, options: NxRemixGeneratorSchema): NormalizedSchema;
+export declare function normalizeOptions(tree: Tree, options: NxRemixGeneratorSchema): Promise<NormalizedSchema>;

package/src/generators/application/lib/normalize-options.js

@@ -1,24 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeOptions = void 0;
-const devkit_1 = require("@nx/devkit");
-const project_1 = require("../../../utils/project");
-function normalizeOptions(tree, options) {
-    const { layoutDirectory, projectDirectory } = (0, devkit_1.extractLayoutDirectory)(options.directory);
-    const appDirectory = (0, project_1.normalizeDirectory)(options.name, projectDirectory);
-    const appName = (0, project_1.normalizeProjectName)(options.name, projectDirectory);
-    const { appsDir: defaultAppsDir } = (0, devkit_1.getWorkspaceLayout)(tree);
-    const appsDir = layoutDirectory !== null && layoutDirectory !== void 0 ? layoutDirectory : defaultAppsDir;
-    const projectName = appName;
-    const projectRoot = options.rootProject
-        ? '.'
-        : (0, devkit_1.joinPathFragments)(appsDir, appDirectory);
+const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
+const eslint_1 = require("@nx/eslint");
+async function normalizeOptions(tree, options) {
+    const { projectName, projectRoot, projectNameAndRootFormat } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(tree, {
+        name: options.name,
+        projectType: 'application',
+        directory: options.directory,
+        projectNameAndRootFormat: options.projectNameAndRootFormat,
+        rootProject: options.rootProject,
+        callingGenerator: '@nx/remix:application',
+    });
+    options.rootProject = projectRoot === '.';
+    options.projectNameAndRootFormat = projectNameAndRootFormat;
+    const e2eProjectName = options.rootProject ? 'e2e' : `${projectName}-e2e`;
+    const e2eProjectRoot = options.rootProject ? 'e2e' : `${projectRoot}-e2e`;
     const parsedTags = options.tags
         ? options.tags.split(',').map((s) => s.trim())
         : [];
-    return Object.assign(Object.assign({}, options), { projectName,
+    return {
+        ...options,
+        linter: options.linter ?? eslint_1.Linter.EsLint,
+        projectName,
         projectRoot,
-        parsedTags });
+        e2eProjectName,
+        e2eProjectRoot,
+        parsedTags,
+    };
 }
 exports.normalizeOptions = normalizeOptions;
-//# sourceMappingURL=normalize-options.js.map

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

@@ -8,23 +8,28 @@ function updateUnitTestConfig(tree, pathToRoot, unitTestRunner) {
     const pathToTestSetup = (0, devkit_1.joinPathFragments)(pathToRoot, `test-setup.ts`);
     tree.write(pathToTestSetup, (0, devkit_1.stripIndents) `
   import { installGlobals } from '@remix-run/node';
-  import '@testing-library/jest-dom/extend-expect';
+  import '@testing-library/jest-dom/matchers';
   installGlobals();`);
     if (unitTestRunner === 'vitest') {
         const pathToViteConfig = (0, devkit_1.joinPathFragments)(pathToRoot, 'vite.config.ts');
         (0, testing_config_utils_1.updateViteTestIncludes)(tree, pathToViteConfig, './app/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}');
-        (0, testing_config_utils_1.updateViteTestSetup)(tree, pathToViteConfig, './test-setup.ts');
+        (0, testing_config_utils_1.updateViteTestIncludes)(tree, pathToViteConfig, './tests/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}');
+        (0, testing_config_utils_1.updateViteTestSetup)(tree, pathToViteConfig, 'test-setup.ts');
     }
     else if (unitTestRunner === 'jest') {
         const pathToJestConfig = (0, devkit_1.joinPathFragments)(pathToRoot, 'jest.config.ts');
+        tree.rename('jest.preset.js', 'jest.preset.cjs');
         (0, testing_config_utils_1.updateJestTestSetup)(tree, pathToJestConfig, `<rootDir>/test-setup.ts`);
+        tree.write(pathToJestConfig, tree
+            .read(pathToJestConfig, 'utf-8')
+            .replace('jest.preset.js', 'jest.preset.cjs'));
     }
     return (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
         '@testing-library/jest-dom': versions_1.testingLibraryJestDomVersion,
         '@testing-library/react': versions_1.testingLibraryReactVersion,
         '@testing-library/user-event': versions_1.testingLibraryUserEventsVersion,
         '@remix-run/node': (0, versions_1.getRemixVersion)(tree),
+        '@remix-run/testing': (0, versions_1.getRemixVersion)(tree),
     });
 }
 exports.updateUnitTestConfig = updateUnitTestConfig;
-//# sourceMappingURL=update-unit-test-config.js.map

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

@@ -1,8 +1,13 @@
+import { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
+import type { Linter } from '@nx/eslint';
+
 export interface NxRemixGeneratorSchema {
   name: string;
   tags?: string;
   js?: boolean;
   directory?: string;
+  projectNameAndRootFormat?: ProjectNameAndRootFormat;
+  linter?: Linter;
   unitTestRunner?: 'vitest' | 'jest' | 'none';
   e2eTestRunner?: 'cypress' | 'none';
   skipFormat?: boolean;

package/src/generators/application/schema.json

@@ -2,6 +2,7 @@
   "$schema": "http://json-schema.org/schema",
   "$id": "NxRemixApplication",
   "title": "Create an Application",
+  "description": "Generate a new Remix application.",
   "type": "object",
   "properties": {
     "name": {
@@ -24,23 +25,27 @@
       "alias": "dir",
       "x-priority": "important"
     },
+    "projectNameAndRootFormat": {
+      "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
+      "type": "string",
+      "enum": ["as-provided", "derived"]
+    },
+    "linter": {
+      "description": "The tool to use for running lint checks.",
+      "type": "string",
+      "enum": ["eslint", "none"],
+      "default": "eslint"
+    },
     "unitTestRunner": {
       "type": "string",
-      "enum": [
-        "vitest",
-        "jest",
-        "none"
-      ],
+      "enum": ["vitest", "jest", "none"],
       "default": "vitest",
       "description": "Test runner to use for unit tests.",
       "x-prompt": "What unit test runner should be used?"
     },
     "e2eTestRunner": {
       "type": "string",
-      "enum": [
-        "cypress",
-        "none"
-      ],
+      "enum": ["cypress", "none"],
       "default": "cypress",
       "description": "Test runner to use for e2e tests"
     },