feat(remix): support remix v2

package.json

@@ -37,8 +37,8 @@
     "@nx/workspace": "17.0.1",
     "@nx/storybook": "17.0.1",
     "@phenomnomnominal/tsquery": "^5.0.1",
-    "@remix-run/dev": "1.15.0",
-    "@remix-run/node": "1.15.0",
+    "@remix-run/dev": "2.3.0",
+    "@remix-run/node": "2.3.0",
     "@rspack/core": "^0.1.12",
     "@rspack/dev-server": "^0.1.12",
     "@rspack/less-loader": "^0.0.22",

packages/remix/executors.json

@@ -10,17 +10,5 @@
       "schema": "./src/executors/build/schema.json",
       "description": "Build a Remix application."
     }
-  },
-  "builders": {
-    "serve": {
-      "implementation": "./src/executors/serve/compat",
-      "schema": "./src/executors/serve/schema.json",
-      "description": "Serve a Remix application."
-    },
-    "build": {
-      "implementation": "./src/executors/build/build.impl",
-      "schema": "./src/executors/build/schema.json",
-      "description": "Build a Remix application."
-    }
   }
 }

packages/remix/migrations.json

@@ -149,6 +149,55 @@
           "alwaysAddToPackageJson": true
         }
       }
+    },
+    "17.1.0": {
+      "version": "17.1.0",
+      "packages": {
+        "@remix-run/node": {
+          "version": "^2.3.0",
+          "alwaysAddToPackageJson": true
+        },
+        "@remix-run/react": {
+          "version": "^2.3.0",
+          "alwaysAddToPackageJson": true
+        },
+        "@remix-run/serve": {
+          "version": "^2.3.0",
+          "alwaysAddToPackageJson": true
+        },
+        "@remix-run/dev": {
+          "version": "^2.3.0",
+          "alwaysAddToPackageJson": true
+        },
+        "@remix-run/css-bundle": {
+          "version": "^2.3.0",
+          "alwaysAddToPackageJson": true
+        },
+        "@remix-run/eslint-config": {
+          "version": "^2.3.0",
+          "alwaysAddToPackageJson": true
+        },
+        "isbot": {
+          "version": "^3.6.8",
+          "alwaysAddToPackageJson": true
+        },
+        "eslint": {
+          "version": "^8.38.0",
+          "alwaysAddToPackageJson": true
+        },
+        "@testing-library/react": {
+          "version": "^14.1.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@testing-library/jest-dom": {
+          "version": "^6.1.4",
+          "alwaysAddToPackageJson": false
+        },
+        "@testing-library/user-event": {
+          "version": "^14.5.1",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

packages/remix/src/generators/action/action.impl.spec.ts

@@ -46,15 +46,15 @@ describe('action', () => {
         const content = tree.read('apps/demo/app/routes/example.tsx', 'utf-8');
         expect(content).toMatch(`import { json } from '@remix-run/node';`);
         expect(content).toMatch(
-          `import type { ActionArgs } from '@remix-run/node';`
+          `import type { ActionFunctionArgs } from '@remix-run/node';`
         );
         expect(content).toMatch(
           `import { useActionData } from '@remix-run/react';`
         );
       });
 
       it('should add action function', () => {
-        const actionFunction = `export const action = async ({ request }: ActionArgs)`;
+        const actionFunction = `export const action = async ({ request }: ActionFunctionArgs)`;
         const content = tree.read('apps/demo/app/routes/example.tsx', 'utf-8');
         expect(content).toMatch(actionFunction);
       });

packages/remix/src/generators/action/action.impl.ts

@@ -18,7 +18,7 @@ export default async function (tree: Tree, schema: LoaderSchema) {
     );
   }
 
-  insertImport(tree, routeFilePath, 'ActionArgs', '@remix-run/node', {
+  insertImport(tree, routeFilePath, 'ActionFunctionArgs', '@remix-run/node', {
     typeOnly: true,
   });
   insertImport(tree, routeFilePath, 'json', '@remix-run/node');
@@ -28,7 +28,7 @@ export default async function (tree: Tree, schema: LoaderSchema) {
     tree,
     routeFilePath,
     `
-    export const action = async ({ request }: ActionArgs) => {
+    export const action = async ({ request }: ActionFunctionArgs) => {
       let formData = await request.formData();
 
       return json({message: formData.toString()}, { status: 200 });

packages/remix/src/generators/application/__snapshots__/application.impl.spec.ts.snap

@@ -26,11 +26,13 @@ import {
   ScrollRestoration,
 } from '@remix-run/react';
 
-export const meta: MetaFunction = () => ({
-  charset: 'utf-8',
-  title: 'New Remix App',
-  viewport: 'width=device-width,initial-scale=1',
-});
+export const meta: MetaFunction = () => [
+  {
+    charset: 'utf-8',
+    title: 'New Remix App',
+    viewport: 'width=device-width,initial-scale=1',
+  },
+];
 
 export default function App() {
   return (
@@ -113,11 +115,13 @@ import {
   ScrollRestoration,
 } from '@remix-run/react';
 
-export const meta: MetaFunction = () => ({
-  charset: 'utf-8',
-  title: 'New Remix App',
-  viewport: 'width=device-width,initial-scale=1',
-});
+export const meta: MetaFunction = () => [
+  {
+    charset: 'utf-8',
+    title: 'New Remix App',
+    viewport: 'width=device-width,initial-scale=1',
+  },
+];
 
 export default function App() {
   return (
@@ -198,11 +202,13 @@ exports[`Remix Application Integrated Repo --js should create the application co
   Scripts,
   ScrollRestoration,
 } from '@remix-run/react';
-export const meta = () => ({
-  charset: 'utf-8',
-  title: 'New Remix App',
-  viewport: 'width=device-width,initial-scale=1',
-});
+export const meta = () => [
+  {
+    charset: 'utf-8',
+    title: 'New Remix App',
+    viewport: 'width=device-width,initial-scale=1',
+  },
+];
 export default function App() {
   return (
     <html lang=\\"en\\">
@@ -358,11 +364,13 @@ import {
   ScrollRestoration,
 } from '@remix-run/react';
 
-export const meta: MetaFunction = () => ({
-  charset: 'utf-8',
-  title: 'New Remix App',
-  viewport: 'width=device-width,initial-scale=1',
-});
+export const meta: MetaFunction = () => [
+  {
+    charset: 'utf-8',
+    title: 'New Remix App',
+    viewport: 'width=device-width,initial-scale=1',
+  },
+];
 
 export default function App() {
   return (
@@ -443,11 +451,13 @@ exports[`Remix Application Standalone Project Repo --js should create the applic
   Scripts,
   ScrollRestoration,
 } from '@remix-run/react';
-export const meta = () => ({
-  charset: 'utf-8',
-  title: 'New Remix App',
-  viewport: 'width=device-width,initial-scale=1',
-});
+export const meta = () => [
+  {
+    charset: 'utf-8',
+    title: 'New Remix App',
+    viewport: 'width=device-width,initial-scale=1',
+  },
+];
 export default function App() {
   return (
     <html lang=\\"en\\">
@@ -607,11 +617,13 @@ import {
   ScrollRestoration,
 } from '@remix-run/react';
 
-export const meta: MetaFunction = () => ({
-  charset: 'utf-8',
-  title: 'New Remix App',
-  viewport: 'width=device-width,initial-scale=1',
-});
+export const meta: MetaFunction = () => [
+  {
+    charset: 'utf-8',
+    title: 'New Remix App',
+    viewport: 'width=device-width,initial-scale=1',
+  },
+];
 
 export default function App() {
   return (

packages/remix/src/generators/application/application.impl.ts

@@ -49,12 +49,13 @@ export default async function (tree: Tree, _options: NxRemixGeneratorSchema) {
       serve: {
         executor: `@nx/remix:serve`,
         options: {
+          manual: true,
           port: 4200,
         },
       },
       start: {
         dependsOn: ['build'],
-        command: `remix-serve build`,
+        command: `remix-serve build/index.js`,
         options: {
           cwd: options.projectRoot,
         },

packages/remix/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>
   );
-}
+}

packages/remix/src/generators/application/files/common/remix.config.js__tmpl__

@@ -1,7 +1,13 @@
+import {fileURLToPath} from 'url';
+import {dirname} from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
 /**
  * @type {import('@remix-run/dev').AppConfig}
  */
-module.exports = {
+export default {
   ignoredRouteFiles: ["**/.*"],
   // appDirectory: "app",
   // assetsBuildDirectory: "public/build",

packages/remix/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 %>",

packages/remix/src/generators/application/lib/update-unit-test-config.ts

@@ -26,7 +26,7 @@ export function updateUnitTestConfig(
     pathToTestSetup,
     stripIndents`
   import { installGlobals } from '@remix-run/node';
-  import '@testing-library/jest-dom/extend-expect';
+  import '@testing-library/jest-dom/matchers';
   installGlobals();`
   );
 

packages/remix/src/generators/error-boundary/__snapshots__/error-boundary.impl.spec.ts.snap

@@ -1,19 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ErrorBoundary --apiVersion=1 should correctly add the ErrorBoundary to the route file 1`] = `
-"export function ErrorBoundary({ error }) {
-  console.error(error);
-  return (
-    <div>
-      <h1>Uh oh ...</h1>
-      <p>Something went wrong</p>
-      <pre>{error.message || 'Unknown error'}</pre>
-    </div>
-  );
-}
-"
-`;
-
 exports[`ErrorBoundary --apiVersion=2 should correctly add the ErrorBoundary to the route file 1`] = `
 "import { isRouteErrorResponse, useRouteError } from '@remix-run/react';
 export function ErrorBoundary() {
@@ -28,22 +14,18 @@ export function ErrorBoundary() {
         <p>{error.data.message}</p>
       </div>
     );
+  } else if (error instanceof Error) {
+    return (
+      <div>
+        <h1>Error</h1>
+        <p>{error.message}</p>
+        <p>The stack trace is:</p>
+        <pre>{error.stack}</pre>
+      </div>
+    );
+  } else {
+    return <h1>Unknown Error</h1>;
   }
-
-  // Don't forget to typecheck with your own logic.
-  // Any value can be thrown, not just errors!
-  let errorMessage = 'Unknown error';
-  // if (isDefinitelyAnError(error)) {
-  //    errorMessage = error.message;
-  // }
-
-  return (
-    <div>
-      <h1>Uh oh ...</h1>
-      <p>Something went wrong.</p>
-      <pre>{errorMessage}</pre>
-    </div>
-  );
 }
 "
 `;