fix(remix): Remove vendored types (#16218)

Removed the vendored types and started importing them from Remix v2
packages. Also added `@remix-run/server-runtime` as `devDependency` and
`peerDependency`

Author: onurtemizkan

packages/remix/package.json

@@ -78,12 +78,14 @@
   "devDependencies": {
     "@remix-run/node": "^2.15.2",
     "@remix-run/react": "^2.15.2",
+    "@remix-run/server-runtime": "2.15.2",
     "@types/express": "^4.17.14",
     "vite": "^5.4.11"
   },
   "peerDependencies": {
     "@remix-run/node": "2.x",
     "@remix-run/react": "2.x",
+    "@remix-run/server-runtime": "2.x",
     "react": "18.x"
   },
   "scripts": {

packages/remix/src/server/errors.ts

@@ -1,9 +1,12 @@
 import type {
+  ActionFunction,
   ActionFunctionArgs,
   EntryContext,
   HandleDocumentRequestFunction,
+  LoaderFunction,
   LoaderFunctionArgs,
 } from '@remix-run/node';
+import { isRouteErrorResponse } from '@remix-run/router';
 import type { RequestEventData, Span } from '@sentry/core';
 import {
   addExceptionMechanism,
@@ -17,8 +20,9 @@ import {
 import { DEBUG_BUILD } from '../utils/debug-build';
 import type { RemixOptions } from '../utils/remixOptions';
 import { storeFormDataKeys } from '../utils/utils';
-import { extractData, isResponse, isRouteErrorResponse } from '../utils/vendor/response';
-import type { DataFunction, RemixRequest } from '../utils/vendor/types';
+import { extractData, isResponse } from '../utils/vendor/response';
+
+type DataFunction = LoaderFunction | ActionFunction;
 
 /**
  * Captures an exception happened in the Remix server.
@@ -87,7 +91,7 @@ export function errorHandleDocumentRequestFunction(
   this: unknown,
   origDocumentRequestFunction: HandleDocumentRequestFunction,
   requestContext: {
-    request: RemixRequest;
+    request: Request;
     responseStatusCode: number;
     responseHeaders: Headers;
     context: EntryContext;

packages/remix/src/server/instrumentServer.ts

@@ -1,4 +1,18 @@
 /* eslint-disable max-lines */
+import type { AgnosticRouteObject } from '@remix-run/router';
+import { isDeferredData, isRouteErrorResponse } from '@remix-run/router';
+import type {
+  ActionFunction,
+  ActionFunctionArgs,
+  AppLoadContext,
+  CreateRequestHandlerFunction,
+  EntryContext,
+  HandleDocumentRequestFunction,
+  LoaderFunction,
+  LoaderFunctionArgs,
+  RequestHandler,
+  ServerBuild,
+} from '@remix-run/server-runtime';
 import type { RequestEventData, Span, TransactionSource, WrappedFunction } from '@sentry/core';
 import {
   continueTrace,
@@ -22,23 +36,15 @@ import {
 } from '@sentry/core';
 import { DEBUG_BUILD } from '../utils/debug-build';
 import { createRoutes, getTransactionName } from '../utils/utils';
-import { extractData, isDeferredData, isResponse, isRouteErrorResponse, json } from '../utils/vendor/response';
-import type {
-  AppData,
-  AppLoadContext,
-  CreateRequestHandlerFunction,
-  DataFunction,
-  DataFunctionArgs,
-  EntryContext,
-  HandleDocumentRequestFunction,
-  RemixRequest,
-  RequestHandler,
-  ServerBuild,
-  ServerRoute,
-  ServerRouteManifest,
-} from '../utils/vendor/types';
+import { extractData, isResponse, json } from '../utils/vendor/response';
 import { captureRemixServerException, errorHandleDataFunction, errorHandleDocumentRequestFunction } from './errors';
 
+type AppData = unknown;
+type RemixRequest = Parameters<RequestHandler>[0];
+type ServerRouteManifest = ServerBuild['routes'];
+type DataFunction = LoaderFunction | ActionFunction;
+type DataFunctionArgs = LoaderFunctionArgs | ActionFunctionArgs;
+
 const redirectStatusCodes = new Set([301, 302, 303, 307, 308]);
 function isRedirectResponse(response: Response): boolean {
   return redirectStatusCodes.has(response.status);
@@ -261,7 +267,7 @@ function wrapRequestHandler(
       return origRequestHandler.call(this, request, loadContext);
     }
 
-    let resolvedRoutes: ServerRoute[] | undefined;
+    let resolvedRoutes: AgnosticRouteObject[] | undefined;
 
     if (options?.instrumentTracing) {
       if (typeof build === 'function') {
@@ -428,7 +434,7 @@ export const makeWrappedCreateRequestHandler = (options?: { instrumentTracing?:
   function (origCreateRequestHandler: CreateRequestHandlerFunction): CreateRequestHandlerFunction {
     return function (
       this: unknown,
-      build: ServerBuild | (() => Promise<ServerBuild>),
+      build: ServerBuild | (() => ServerBuild | Promise<ServerBuild>),
       ...args: unknown[]
     ): RequestHandler {
       const newBuild = instrumentBuild(build, options);

packages/remix/src/utils/utils.ts

@@ -1,9 +1,11 @@
-import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node';
+import type { ActionFunctionArgs, LoaderFunctionArgs, ServerBuild } from '@remix-run/node';
+import type { AgnosticRouteObject } from '@remix-run/router';
 import type { Span, TransactionSource } from '@sentry/core';
 import { logger } from '@sentry/core';
 import { DEBUG_BUILD } from './debug-build';
 import { getRequestMatch, matchServerRoutes } from './vendor/response';
-import type { ServerRoute, ServerRouteManifest } from './vendor/types';
+
+type ServerRouteManifest = ServerBuild['routes'];
 
 /**
  *
@@ -29,7 +31,7 @@ export async function storeFormDataKeys(args: LoaderFunctionArgs | ActionFunctio
 /**
  * Get transaction name from routes and url
  */
-export function getTransactionName(routes: ServerRoute[], url: URL): [string, TransactionSource] {
+export function getTransactionName(routes: AgnosticRouteObject[], url: URL): [string, TransactionSource] {
   const matches = matchServerRoutes(routes, url.pathname);
   const match = matches && getRequestMatch(url, matches);
   return match === null ? [url.pathname, 'url'] : [match.route.id || 'no-route-id', 'route'];
@@ -41,11 +43,11 @@ export function getTransactionName(routes: ServerRoute[], url: URL): [string, Tr
  * @param manifest
  * @param parentId
  */
-export function createRoutes(manifest: ServerRouteManifest, parentId?: string): ServerRoute[] {
+export function createRoutes(manifest: ServerRouteManifest, parentId?: string): AgnosticRouteObject[] {
   return Object.entries(manifest)
     .filter(([, route]) => route.parentId === parentId)
     .map(([id, route]) => ({
       ...route,
       children: createRoutes(manifest, id),
-    }));
+    })) as AgnosticRouteObject[];
 }

packages/remix/src/utils/vendor/response.ts

@@ -8,8 +8,6 @@
 
 import type { AgnosticRouteMatch, AgnosticRouteObject } from '@remix-run/router';
 import { matchRoutes } from '@remix-run/router';
-import type { DeferredData, ErrorResponse, ServerRoute } from './types';
-
 /**
  * Based on Remix Implementation
  *
@@ -76,7 +74,7 @@ export const json: JsonFunction = (data, init = {}) => {
  * Changed so that `matchRoutes` function is passed in.
  */
 export function matchServerRoutes(
-  routes: ServerRoute[],
+  routes: AgnosticRouteObject[],
   pathname: string,
 ): AgnosticRouteMatch<string, AgnosticRouteObject>[] | null {
   const matches = matchRoutes(routes, pathname);
@@ -126,38 +124,3 @@ export function getRequestMatch(
 
   return match;
 }
-
-/**
- * https://github.com/remix-run/remix/blob/3e589152bc717d04e2054c31bea5a1056080d4b9/packages/remix-server-runtime/responses.ts#L75-L85
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function isDeferredData(value: any): value is DeferredData {
-  const deferred: DeferredData = value;
-  return (
-    deferred &&
-    typeof deferred === 'object' &&
-    typeof deferred.data === 'object' &&
-    typeof deferred.subscribe === 'function' &&
-    typeof deferred.cancel === 'function' &&
-    typeof deferred.resolveData === 'function'
-  );
-}
-
-/**
- * https://github.com/remix-run/react-router/blob/f9b3dbd9cbf513366c456b33d95227f42f36da63/packages/router/utils.ts#L1574
- *
- * Check if the given error is an ErrorResponse generated from a 4xx/5xx
- * Response thrown from an action/loader
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function isRouteErrorResponse(value: any): value is ErrorResponse {
-  const error: ErrorResponse = value;
-
-  return (
-    error != null &&
-    typeof error.status === 'number' &&
-    typeof error.statusText === 'string' &&
-    typeof error.internal === 'boolean' &&
-    'data' in error
-  );
-}