Merge branch 'dev' into pedro/tux

.changeset/chilly-shoes-scream.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": patch
+---
+
+Rename `Architect (AWS Lambda)` -> `Architect` in the `create-remix` CLI to avoid confusion for other methods of deploying to AWS (i.e., SST)

.changeset/fix-react-types.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/server-runtime": patch
+---
+
+Fix typing issues when using React 17 stemming from `@remix/server-runtime` including `@types/react` as a `devDependency` when it doesn't actually do anything React-specific and was just re-exporting `ComponentType` in values such as `CatchBoundaryComponent`/`ErrorBoundaryComponent`/`V2_ErrorBoundaryComponent`. These types are more correctly exported from `@remix-run/react` which is React-aware so that is the correct place to be importing those types from. In order to avoid breaking existing builds, the types in `@remix/server-runtime` have been loosened to `any` and `@deprecated` warnings have been added informing users to switch to the corresponding types in `@remix-run/react`.

.changeset/types-cookie.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/server-runtime": patch
+---
+
+Move `@types/cookie` to `dependencies` since we re-export types from there

contributors.yml

@@ -159,6 +159,7 @@
 - freeman
 - frontsideair
 - furkanakkurt1335
+- fwang
 - fx109138
 - gabimor
 - garand

integration/bug-report-test.ts

@@ -40,6 +40,13 @@ let appFixture: AppFixture;
 //    ```
 ////////////////////////////////////////////////////////////////////////////////
 
+test.beforeEach(async ({ context }) => {
+  await context.route(/_data/, async (route) => {
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    route.continue();
+  });
+});
+
 test.beforeAll(async () => {
   fixture = await createFixture({
     config: {

integration/catch-boundary-data-test.ts

@@ -24,6 +24,13 @@ let HAS_BOUNDARY_NESTED_LOADER = "/yes/loader-self-boundary" as const;
 let ROOT_DATA = "root data";
 let LAYOUT_DATA = "root data";
 
+test.beforeEach(async ({ context }) => {
+  await context.route(/_data/, async (route) => {
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    route.continue();
+  });
+});
+
 test.beforeAll(async () => {
   fixture = await createFixture({
     config: {

integration/catch-boundary-test.ts

@@ -22,6 +22,13 @@ test.describe("CatchBoundary", () => {
 
   let NOT_FOUND_HREF = "/not/found";
 
+  test.beforeEach(async ({ context }) => {
+    await context.route(/_data/, async (route) => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+      route.continue();
+    });
+  });
+
   test.beforeAll(async () => {
     fixture = await createFixture({
       config: {

integration/defer-test.ts

@@ -27,6 +27,13 @@ declare global {
   };
 }
 
+test.beforeEach(async ({ context }) => {
+  await context.route(/_data/, async (route) => {
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    route.continue();
+  });
+});
+
 test.describe("non-aborted", () => {
   let fixture: Fixture;
   let appFixture: AppFixture;

integration/error-boundary-test.ts

@@ -37,6 +37,13 @@ test.describe("ErrorBoundary", () => {
   // packages/remix-react/errorBoundaries.tsx
   let INTERNAL_ERROR_BOUNDARY_HEADING = "Application Error";
 
+  test.beforeEach(async ({ context }) => {
+    await context.route(/_data/, async (route) => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+      route.continue();
+    });
+  });
+
   test.beforeAll(async () => {
     _consoleError = console.error;
     console.error = () => {};

integration/fetcher-state-test.ts

@@ -17,6 +17,13 @@ test.describe("fetcher states", () => {
   let fixture: Fixture;
   let appFixture: AppFixture;
 
+  test.beforeEach(async ({ context }) => {
+    await context.route(/_data/, async (route) => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+      route.continue();
+    });
+  });
+
   test.beforeAll(async () => {
     fixture = await createFixture({
       config: {

integration/form-test.ts

@@ -47,6 +47,13 @@ test.describe("Forms", () => {
   let SPLAT_ROUTE_PARENT_ACTION = "splat-route-parent";
   let SPLAT_ROUTE_TOO_MANY_DOTS_ACTION = "splat-route-too-many-dots";
 
+  test.beforeEach(async ({ context }) => {
+    await context.route(/_data/, async (route) => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+      route.continue();
+    });
+  });
+
   test.beforeAll(async () => {
     fixture = await createFixture({
       config: {

integration/hmr-log-test.ts

@@ -274,7 +274,7 @@ test("HMR", async ({ page, browserName }) => {
         if (dev.exitCode) throw Error("Dev server exited early");
         return /✅ app ready: /.test(devStdout());
       },
-      { timeoutMs: 10_000 }
+      { timeoutMs: HMR_TIMEOUT_MS }
     );
 
     await page.goto(`http://localhost:${appPort}`, {
@@ -369,7 +369,7 @@ test("HMR", async ({ page, browserName }) => {
       }
     `;
     fs.writeFileSync(indexPath, withLoader1);
-    await expect.poll(() => dataRequests).toBe(1);
+    await expect.poll(() => dataRequests, { timeout: HMR_TIMEOUT_MS }).toBe(1);
     await page.waitForLoadState("networkidle");
 
     await page.getByText("Hello, world").waitFor({ timeout: HMR_TIMEOUT_MS });
@@ -399,7 +399,7 @@ test("HMR", async ({ page, browserName }) => {
       }
     `;
     fs.writeFileSync(indexPath, withLoader2);
-    await expect.poll(() => dataRequests).toBe(2);
+    await expect.poll(() => dataRequests, { timeout: HMR_TIMEOUT_MS }).toBe(2);
     await page.waitForLoadState("networkidle");
 
     await page.getByText("Hello, planet").waitFor({ timeout: HMR_TIMEOUT_MS });
@@ -465,11 +465,11 @@ whatsup
 <Component/>
 `;
     fs.writeFileSync(mdxPath, mdx);
-    await expect.poll(() => dataRequests).toBe(4);
+    await expect.poll(() => dataRequests, { timeout: HMR_TIMEOUT_MS }).toBe(4);
     await page.waitForSelector(`#hot`);
 
     fs.writeFileSync(mdxPath, originalMdx);
-    await expect.poll(() => dataRequests).toBe(5);
+    await expect.poll(() => dataRequests, { timeout: HMR_TIMEOUT_MS }).toBe(5);
     await page.waitForSelector(`#crazy`);
 
     // dev server doesn't crash when rebuild fails

integration/hmr-test.ts

@@ -294,7 +294,7 @@ test("HMR", async ({ page, browserName }) => {
         if (dev.exitCode) throw Error("Dev server exited early");
         return /✅ app ready: /.test(devStdout());
       },
-      { timeoutMs: 10_000 }
+      { timeoutMs: HMR_TIMEOUT_MS }
     );
 
     await page.goto(`http://localhost:${appPort}`, {
@@ -403,7 +403,7 @@ test("HMR", async ({ page, browserName }) => {
       }
     `;
     fs.writeFileSync(indexPath, withLoader1);
-    await expect.poll(() => dataRequests).toBe(1);
+    await expect.poll(() => dataRequests, { timeout: HMR_TIMEOUT_MS }).toBe(1);
     await page.waitForLoadState("networkidle");
 
     await page.getByText("Hello, world").waitFor({ timeout: HMR_TIMEOUT_MS });
@@ -432,7 +432,7 @@ test("HMR", async ({ page, browserName }) => {
     `;
     fs.writeFileSync(indexPath, withLoader2);
 
-    await expect.poll(() => dataRequests).toBe(2);
+    await expect.poll(() => dataRequests, { timeout: HMR_TIMEOUT_MS }).toBe(2);
 
     await page.waitForLoadState("networkidle");
 
@@ -499,11 +499,11 @@ whatsup
 <Component/>
 `;
     fs.writeFileSync(mdxPath, mdx);
-    await expect.poll(() => dataRequests).toBe(4);
+    await expect.poll(() => dataRequests, { timeout: HMR_TIMEOUT_MS }).toBe(4);
     await page.waitForSelector(`#hot`);
 
     fs.writeFileSync(mdxPath, originalMdx);
-    await expect.poll(() => dataRequests).toBe(5);
+    await expect.poll(() => dataRequests, { timeout: HMR_TIMEOUT_MS }).toBe(5);
     await page.waitForSelector(`#crazy`);
 
     // dev server doesn't crash when rebuild fails

integration/navigation-state-v2-test.ts

@@ -25,6 +25,13 @@ test.describe("navigation states", () => {
   let fixture: Fixture;
   let appFixture: AppFixture;
 
+  test.beforeEach(async ({ context }) => {
+    await context.route(/_data/, async (route) => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+      route.continue();
+    });
+  });
+
   test.beforeAll(async () => {
     fixture = await createFixture({
       config: {

integration/transition-state-test.ts

@@ -23,6 +23,13 @@ test.describe("rendering", () => {
   let fixture: Fixture;
   let appFixture: AppFixture;
 
+  test.beforeEach(async ({ context }) => {
+    await context.route(/_data/, async (route) => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+      route.continue();
+    });
+  });
+
   test.beforeAll(async () => {
     fixture = await createFixture({
       config: {

packages/remix-dev/cli/run.ts

@@ -130,7 +130,7 @@ ${colors.logoBlue("R")} ${colors.logoGreen("E")} ${colors.logoYellow(
 const templateChoices = [
   { name: "Remix App Server", value: "remix" },
   { name: "Express Server", value: "express" },
-  { name: "Architect (AWS Lambda)", value: "arc" },
+  { name: "Architect", value: "arc" },
   { name: "Fly.io", value: "fly" },
   { name: "Netlify", value: "netlify" },
   { name: "Vercel", value: "vercel" },

packages/remix-react/package.json

@@ -23,6 +23,7 @@
     "@remix-run/server-runtime": "1.17.0",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^13.3.0",
+    "@types/react": "^18.0.15",
     "abort-controller": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

packages/remix-server-runtime/package.json

@@ -17,15 +17,14 @@
   "module": "dist/esm/index.js",
   "dependencies": {
     "@remix-run/router": "1.6.3",
+    "@types/cookie": "^0.4.1",
     "@web3-storage/multipart-parser": "^1.0.0",
     "cookie": "^0.4.1",
     "set-cookie-parser": "^2.4.8",
     "source-map": "^0.7.3"
   },
   "devDependencies": {
     "@remix-run/web-file": "^3.0.2",
-    "@types/cookie": "^0.4.0",
-    "@types/react": "^18.0.15",
     "@types/set-cookie-parser": "^2.4.1"
   },
   "engines": {

packages/remix-server-runtime/routeModules.ts

@@ -4,7 +4,6 @@ import type {
   Params,
   RouterState,
 } from "@remix-run/router";
-import type { ComponentType } from "react";
 
 import type { AppLoadContext, AppData } from "./data";
 import type { LinkDescriptor } from "./links";
@@ -48,23 +47,31 @@ export interface ActionFunction {
 /**
  * A React component that is rendered when the server throws a Response.
  *
- * @deprecated Please enable the v2_errorBoundary flag
+ * @deprecated Please enable the v2_errorBoundary flag to eliminate the need
+ * for this type.  If you are still using this, please use `@remix-run/react`'s
+ * `CatchBoundaryComponent` type
  */
-export type CatchBoundaryComponent = ComponentType;
+export type CatchBoundaryComponent = any;
 
 /**
  * A React component that is rendered when there is an error on a route.
  *
- * @deprecated Please enable the v2_errorBoundary flag
+ * @deprecated Please enable the v2_errorBoundary flag to eliminate the need
+ * for this type.  If you are still using this, please use `@remix-run/react`'s
+ * `ErrorBoundaryComponent` type
  */
-export type ErrorBoundaryComponent = ComponentType<{ error: Error }>;
+export type ErrorBoundaryComponent = any;
 
 /**
  * V2 version of the ErrorBoundary that eliminates the distinction between
  * Error and Catch Boundaries and behaves like RR 6.4 errorElement and captures
  * errors with useRouteError()
+ *
+ * @deprecated Please enable the v2_errorBoundary flag to eliminate the need
+ * for this type.  If you are still using this, please use `@remix-run/react`'s
+ * `V2_ErrorBoundaryComponent` type
  */
-export type V2_ErrorBoundaryComponent = ComponentType;
+export type V2_ErrorBoundaryComponent = any;
 
 export type HeadersArgs = {
   loaderHeaders: Headers;
@@ -262,8 +269,10 @@ type LdJsonValue = LdJsonPrimitive | LdJsonObject | LdJsonArray;
 
 /**
  * A React component that is rendered for a route.
+ *
+ * @deprecated Please use `@remix-run/react`'s `RouteComponent` type instead
  */
-export type RouteComponent = ComponentType<{}>;
+export type RouteComponent = any;
 
 /**
  * An arbitrary object that is associated with a route.

packages/remix-vercel/index.ts

@@ -1,4 +1,22 @@
 import "./globals";
 
+const alreadyWarned: Record<string, boolean> = {};
+const warnOnce = (message: string, key = message) => {
+  if (!alreadyWarned[key]) {
+    alreadyWarned[key] = true;
+    console.warn(message);
+  }
+};
+
+warnOnce(
+  "⚠️ REMIX FUTURE CHANGE: The `@remix-run/vercel` runtime adapter " +
+    "has been deprecated in favor of out of the box Vercel functionality and " +
+    "will be removed in Remix v2. Please update your code by removing " +
+    "`@remix-run/vercel` & `@vercel/node` from your `package.json`, removing " +
+    "your `server.js`/`server.ts` file, and removing the `server` & " +
+    "`serverBuildPath` options from your `remix.config.js`.",
+  "built-in-vercel-functionality"
+);
+
 export type { GetLoadContextFunction, RequestHandler } from "./server";
 export { createRequestHandler } from "./server";

templates/vercel/README.md

@@ -1,3 +1,9 @@
+> **Warning**  
+> The `@remix-run/vercel` runtime adapter has been deprecated in favor of out of
+> the box Vercel functionality and will be removed in Remix v2.  
+> This means you don't have to use the Vercel template & can just use the Remix
+> template instead.
+
 # Welcome to Remix!
 
 - [Remix Docs](https://remix.run/docs)

yarn.lock

@@ -2943,7 +2943,7 @@
   resolved "https://registry.npmjs.org/@types/cookie-signature/-/cookie-signature-1.0.3.tgz"
   integrity sha512-0jpd4oizLaBybWBCew/lx4iAjjNWmCfzbspvnjoppyGEquN51BjShmPCksiH2IXLwtxQ2F/e2PkFy0LL7jpLsw==
 
-"@types/cookie@^0.4.0", "@types/cookie@^0.4.1":
+"@types/cookie@^0.4.1":
   version "0.4.1"
   resolved "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz"
   integrity sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==