@nx/remix 20.0.10 → 20.1.0-beta.1

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.remixApplicationGenerator = remixApplicationGenerator;
 exports.remixApplicationGeneratorInternal = remixApplicationGeneratorInternal;
 const devkit_1 = require("@nx/devkit");
-const target_defaults_utils_1 = require("@nx/devkit/src/generators/target-defaults-utils");
 const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
 const js_1 = require("@nx/js");
 const create_ts_config_1 = require("@nx/js/src/utils/typescript/create-ts-config");
@@ -17,65 +16,29 @@ const update_dependencies_1 = require("../utils/update-dependencies");
 const lib_1 = require("./lib");
 function remixApplicationGenerator(tree, options) {
     return remixApplicationGeneratorInternal(tree, {
-        addPlugin: false,
+        addPlugin: true,
         ...options,
     });
 }
 async function remixApplicationGeneratorInternal(tree, _options) {
     (0, ts_solution_setup_1.assertNotUsingTsSolutionSetup)(tree, 'remix', 'application');
     const options = await (0, lib_1.normalizeOptions)(tree, _options);
+    if (!options.addPlugin) {
+        throw new Error(`To generate a new Remix Vite application, you must use Inference Plugins. Check you do not have NX_ADD_PLUGINS=false or useInferencePlugins: false in your nx.json.`);
+    }
     const tasks = [
         await (0, init_1.default)(tree, {
             skipFormat: true,
-            addPlugin: options.addPlugin,
+            addPlugin: true,
         }),
         await (0, js_1.initGenerator)(tree, { skipFormat: true }),
     ];
-    (0, target_defaults_utils_1.addBuildTargetDefaults)(tree, '@nx/remix:build');
     (0, devkit_1.addProjectConfiguration)(tree, options.projectName, {
         root: options.projectRoot,
         sourceRoot: `${options.projectRoot}`,
         projectType: 'application',
         tags: options.parsedTags,
-        targets: !options.addPlugin
-            ? {
-                build: {
-                    executor: '@nx/remix:build',
-                    outputs: ['{options.outputPath}'],
-                    options: {
-                        outputPath: (0, devkit_1.joinPathFragments)('dist', options.projectRoot),
-                    },
-                },
-                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/index.js`,
-                    options: {
-                        cwd: options.projectRoot,
-                    },
-                },
-                ['serve-static']: {
-                    dependsOn: ['build'],
-                    command: `remix-serve build/index.js`,
-                    options: {
-                        cwd: options.projectRoot,
-                    },
-                },
-                typecheck: {
-                    command: `tsc --project tsconfig.app.json`,
-                    options: {
-                        cwd: options.projectRoot,
-                    },
-                },
-            }
-            : {},
+        targets: {},
     });
     const installTask = (0, update_dependencies_1.updateDependencies)(tree);
     tasks.push(installTask);
@@ -94,6 +57,7 @@ async function remixApplicationGeneratorInternal(tree, _options) {
         typesReactDomVersion: versions_1.typesReactDomVersion,
         eslintVersion: versions_1.eslintVersion,
         typescriptVersion: versions_1.typescriptVersion,
+        viteVersion: versions_1.viteVersion,
     };
     (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, 'files/common'), options.projectRoot, vars);
     (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, './files/nx-welcome', onBoardingStatus), options.projectRoot, { ...vars, connectCloudUrl });
@@ -115,7 +79,7 @@ async function remixApplicationGeneratorInternal(tree, _options) {
                 skipFormat: true,
                 testEnvironment: 'jsdom',
                 skipViteConfig: true,
-                addPlugin: options.addPlugin,
+                addPlugin: true,
             });
             createOrEditViteConfig(tree, {
                 project: options.projectName,
@@ -136,7 +100,7 @@ async function remixApplicationGeneratorInternal(tree, _options) {
                 skipSerializers: false,
                 skipPackageJson: false,
                 skipFormat: true,
-                addPlugin: options.addPlugin,
+                addPlugin: true,
             });
             const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.projectName);
             if (projectConfig.targets['test']?.options) {
@@ -171,9 +135,6 @@ async function remixApplicationGeneratorInternal(tree, _options) {
             'public/build',
         ]);
     }
-    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');
@@ -247,6 +208,7 @@ export default {...nxPreset};
             });
         }
     }
+    (0, lib_1.addViteTempFilesToGitIgnore)(tree);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }

package/src/generators/application/files/common/app/entry.client.tsx__tmpl__

@@ -0,0 +1,18 @@
+/**
+ * By default, Remix will handle hydrating your app on the client for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
+ * For more information, see https://remix.run/file-conventions/entry.client
+ */
+
+import { RemixBrowser } from "@remix-run/react";
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <RemixBrowser />
+    </StrictMode>
+  );
+});

package/src/generators/application/files/common/app/entry.server.tsx__tmpl__

@@ -0,0 +1,140 @@
+/**
+ * By default, Remix will handle generating the HTTP Response for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
+ * For more information, see https://remix.run/file-conventions/entry.server
+ */
+
+import { PassThrough } from "node:stream";
+
+import type { AppLoadContext, EntryContext } from "@remix-run/node";
+import { createReadableStreamFromReadable } from "@remix-run/node";
+import { RemixServer } from "@remix-run/react";
+import { isbot } from "isbot";
+import { renderToPipeableStream } from "react-dom/server";
+
+const ABORT_DELAY = 5_000;
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+  // This is ignored so we can keep it in the template for visibility.  Feel
+  // free to delete this parameter in your app if you're not using it!
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  loadContext: AppLoadContext
+) {
+  return isbot(request.headers.get("user-agent") || "")
+    ? handleBotRequest(
+        request,
+        responseStatusCode,
+        responseHeaders,
+        remixContext
+      )
+    : handleBrowserRequest(
+        request,
+        responseStatusCode,
+        responseHeaders,
+        remixContext
+      );
+}
+
+function handleBotRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  return new Promise((resolve, reject) => {
+    let shellRendered = false;
+    const { pipe, abort } = renderToPipeableStream(
+      <RemixServer
+        context={remixContext}
+        url={request.url}
+        abortDelay={ABORT_DELAY}
+      />,
+      {
+        onAllReady() {
+          shellRendered = true;
+          const body = new PassThrough();
+          const stream = createReadableStreamFromReadable(body);
+
+          responseHeaders.set("Content-Type", "text/html");
+
+          resolve(
+            new Response(stream, {
+              headers: responseHeaders,
+              status: responseStatusCode,
+            })
+          );
+
+          pipe(body);
+        },
+        onShellError(error: unknown) {
+          reject(error);
+        },
+        onError(error: unknown) {
+          responseStatusCode = 500;
+          // Log streaming rendering errors from inside the shell.  Don't log
+          // errors encountered during initial shell rendering since they'll
+          // reject and get logged in handleDocumentRequest.
+          if (shellRendered) {
+            console.error(error);
+          }
+        },
+      }
+    );
+
+    setTimeout(abort, ABORT_DELAY);
+  });
+}
+
+function handleBrowserRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  return new Promise((resolve, reject) => {
+    let shellRendered = false;
+    const { pipe, abort } = renderToPipeableStream(
+      <RemixServer
+        context={remixContext}
+        url={request.url}
+        abortDelay={ABORT_DELAY}
+      />,
+      {
+        onShellReady() {
+          shellRendered = true;
+          const body = new PassThrough();
+          const stream = createReadableStreamFromReadable(body);
+
+          responseHeaders.set("Content-Type", "text/html");
+
+          resolve(
+            new Response(stream, {
+              headers: responseHeaders,
+              status: responseStatusCode,
+            })
+          );
+
+          pipe(body);
+        },
+        onShellError(error: unknown) {
+          reject(error);
+        },
+        onError(error: unknown) {
+          responseStatusCode = 500;
+          // Log streaming rendering errors from inside the shell.  Don't log
+          // errors encountered during initial shell rendering since they'll
+          // reject and get logged in handleDocumentRequest.
+          if (shellRendered) {
+            console.error(error);
+          }
+        },
+      }
+    );
+
+    setTimeout(abort, ABORT_DELAY);
+  });
+}

package/src/generators/application/files/common/app/root.tsx__tmpl__

@@ -1,18 +1,30 @@
-import type { MetaFunction } from "@remix-run/node";
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
 } from "@remix-run/react";
+import type { MetaFunction, LinksFunction } from "@remix-run/node";
 
 export const meta: MetaFunction = () => ([{
   title: "New Remix App",
 }]);
 
-export default function App() {
+export const links: LinksFunction = () => [
+  { rel: "preconnect", href: "https://fonts.googleapis.com" },
+  {
+    rel: "preconnect",
+    href: "https://fonts.gstatic.com",
+    crossOrigin: "anonymous",
+  },
+  {
+    rel: "stylesheet",
+    href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+  },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <head>
@@ -22,11 +34,14 @@ export default function App() {
         <Links />
       </head>
       <body>
-        <Outlet />
+        {children}
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );
 }
+
+export default function App() {
+    return <Outlet />;
+}

package/src/generators/application/files/common/tsconfig.app.json__tmpl__

@@ -1,11 +1,14 @@
 {
   "extends": "./tsconfig.json",
   "include": [
-    "remix.env.d.ts",
     "app/**/*.ts",
     "app/**/*.tsx",
     "app/**/*.js",
-    "app/**/*.jsx"
+    "app/**/*.jsx",
+    "**/.server/**/*.ts",
+    "**/.server/**/*.tsx",
+    "**/.client/**/*.ts",
+    "**/.client/**/*.tsx"
   ],
   "exclude": [
     "tests/**/*.spec.ts",

package/src/generators/application/files/common/tsconfig.json__tmpl__

@@ -2,16 +2,19 @@
   "extends": "<%= offsetFromRoot %>tsconfig.base.json",
   "compilerOptions": {
       "lib": ["DOM", "DOM.Iterable", "ES2019"],
+      "types": ["@remix-run/node", "vite/client"],
       "isolatedModules": true,
       "esModuleInterop": true,
       "jsx": "react-jsx",
-      "moduleResolution": "node",
+      "module": "ESNext",
+      "moduleResolution": "Bundler",
       "resolveJsonModule": true,
-      "target": "ES2019",
+      "target": "ES2022",
       "strict": true,
       "allowJs": true,
+      "skipLibCheck": true,
       "forceConsistentCasingInFileNames": true,
-      // Remix takes care of building everything in `remix build`.
+      // Vite takes care of building everything.
       "noEmit": true
     },
     "include": [],

package/src/generators/application/files/common/vite.config.ts__tmpl__

@@ -0,0 +1,25 @@
+import { vitePlugin as remix } from '@remix-run/dev';
+import { defineConfig } from 'vite';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+
+declare module '@remix-run/node' {
+  interface Future {
+    v3_singleFetch: true;
+  }
+}
+
+export default defineConfig({
+  root: __dirname,
+  plugins: [
+    remix({
+      future: {
+        v3_fetcherPersist: true,
+        v3_relativeSplatPath: true,
+        v3_throwAbortReason: true,
+        v3_singleFetch: true,
+        v3_lazyRouteDiscovery: true,
+      },
+    }),
+    nxViteTsPaths(),
+  ],
+});

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

@@ -1,8 +1,6 @@
 {
   "private": true,
   "name": "<%= projectName %>",
-  "description": "",
-  "license": "",
   "scripts": {},
   "type": "module",
   "dependencies": {
@@ -18,10 +16,11 @@
     "@types/react": "<%= typesReactVersion %>",
     "@types/react-dom": "<%= typesReactDomVersion %>",
     "eslint": "<%= eslintVersion %>",
-    "typescript": "<%= typescriptVersion %>"
+    "typescript": "<%= typescriptVersion %>",
+    "vite": "<%= viteVersion %>",
   },
   "engines": {
-    "node": ">=14"
+    "node": ">=20"
   },
   "sideEffects": false
 }

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

@@ -50,7 +50,7 @@ async function addE2E(tree, options) {
                     buildTarget = `^${matchingPlugin.options?.buildTargetName ?? 'build'}`;
                 }
             }
-            await (0, target_defaults_utils_1.addE2eCiTargetDefaults)(tree, '@nx/cypress/plugin', buildTarget, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, `cypress.config.${options.js ? 'js' : 'ts'}`));
+            await (0, target_defaults_utils_1.addE2eCiTargetDefaults)(tree, '@nx/cypress/plugin', buildTarget, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, `cypress.config.ts`));
         }
         return e2eTask;
     }

package/src/generators/application/lib/add-vite-temp-files-to-gitignore.d.ts

@@ -0,0 +1,2 @@
+import { Tree } from '@nx/devkit';
+export declare function addViteTempFilesToGitIgnore(tree: Tree): void;

package/src/generators/application/lib/add-vite-temp-files-to-gitignore.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addViteTempFilesToGitIgnore = addViteTempFilesToGitIgnore;
+const devkit_1 = require("@nx/devkit");
+function addViteTempFilesToGitIgnore(tree) {
+    let newGitIgnoreContents = `vite.config.*.timestamp*`;
+    if (tree.exists('.gitignore')) {
+        const gitIgnoreContents = tree.read('.gitignore', 'utf-8');
+        if (!gitIgnoreContents.includes(newGitIgnoreContents)) {
+            newGitIgnoreContents = (0, devkit_1.stripIndents) `${gitIgnoreContents}
+        ${newGitIgnoreContents}`;
+            tree.write('.gitignore', newGitIgnoreContents);
+        }
+    }
+    else {
+        tree.write('.gitignore', newGitIgnoreContents);
+    }
+}

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

@@ -1,3 +1,4 @@
 export * from './normalize-options';
 export * from './update-unit-test-config';
 export * from './add-e2e';
+export * from './add-vite-temp-files-to-gitignore';

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

@@ -4,3 +4,4 @@ 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);
+tslib_1.__exportStar(require("./add-vite-temp-files-to-gitignore"), exports);

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

@@ -4,7 +4,6 @@ export interface NxRemixGeneratorSchema {
   directory: string;
   name?: string;
   tags?: string;
-  js?: boolean;
   linter?: Linter | LinterType;
   unitTestRunner?: 'vitest' | 'jest' | 'none';
   e2eTestRunner?: 'cypress' | 'playwright' | 'none';

package/src/generators/application/schema.json

@@ -20,11 +20,6 @@
       "description": "The name of the application.",
       "x-priority": "important"
     },
-    "js": {
-      "type": "boolean",
-      "description": "Generate JavaScript files rather than TypeScript files.",
-      "default": false
-    },
     "linter": {
       "description": "The tool to use for running lint checks.",
       "type": "string",

package/src/generators/convert-to-inferred/convert-to-inferred.js

@@ -14,7 +14,7 @@ async function convertToInferred(tree, options) {
         buildTargetName: 'build',
         devTargetName: 'dev',
         startTargetName: 'start',
-        staticServeTargetName: 'static-serve',
+        serveStaticTargetName: 'serve-static',
         typecheckTargetName: 'typecheck',
     }, [
         {

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

@@ -6,6 +6,5 @@ export interface NormalizedSchema extends RemixGeneratorSchema {
     parsedTags: string[];
     unitTestRunner?: 'jest' | 'none' | 'vitest';
     e2eTestRunner?: 'cypress' | 'none';
-    js?: boolean;
 }
 export declare function normalizeOptions(tree: Tree, options: RemixGeneratorSchema): NormalizedSchema;

package/src/generators/preset/preset.impl.js

@@ -22,7 +22,6 @@ async function default_1(tree, _options) {
         rootProject: true,
         unitTestRunner: options.unitTestRunner ?? 'vitest',
         e2eTestRunner: options.e2eTestRunner ?? 'cypress',
-        js: options.js ?? false,
         addPlugin: addPluginDefault,
     });
     tasks.push(appGenTask);