tessl/npm-remix-run--react

React DOM bindings for Remix web framework providing components, hooks, and utilities for full-stack React applications

—

Pending

Overview

Eval results

Files

Application Entry Points

Name: tessl/npm-remix-run--react
Author: tessl

Core components for initializing Remix applications on both client and server sides, providing the foundation for React-based full-stack web applications.

Capabilities

RemixBrowser

The main entry point for Remix applications on the client side. This component handles client-side hydration and sets up the React Router for browser navigation.

/**
 * The main entry point for Remix applications on the client side
 * Handles client-side hydration and sets up React Router for browser navigation
 * @returns React element for client-side rendering
 */
function RemixBrowser(): ReactElement;

interface RemixBrowserProps {}

Usage Example:

import { RemixBrowser } from "@remix-run/react";
import { hydrateRoot } from "react-dom/client";

// Basic usage - configuration is handled via global __remixContext
hydrateRoot(document, <RemixBrowser />);

RemixServer

The main entry point for Remix applications on the server side. This component handles server-side rendering and provides the initial HTML for client hydration.

/**
 * The main entry point for Remix applications on the server side
 * Handles server-side rendering and provides initial HTML for client hydration
 * @param props - Server rendering configuration and context
 * @returns React element for server-side rendering
 */
function RemixServer(props: RemixServerProps): ReactElement;

interface RemixServerProps {
  /** Entry context containing route data, assets manifest, and server state */
  context: EntryContext;
  /** Request URL for the current page */
  url: string | URL;
  /** Timeout in milliseconds for aborting deferred data requests */
  abortDelay?: number;
  /** Nonce value for Content Security Policy */
  nonce?: string;
}

Usage Example:

import { RemixServer } from "@remix-run/react";
import { renderToString } from "react-dom/server";
import type { EntryContext } from "@remix-run/react";

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  const markup = renderToString(
    <RemixServer 
      context={remixContext} 
      url={request.url}
      abortDelay={5000}
      nonce="csp-nonce-value"
    />
  );

  responseHeaders.set("Content-Type", "text/html");

  return new Response(`<!DOCTYPE html>${markup}`, {
    status: responseStatusCode,
    headers: responseHeaders,
  });
}

Types

EntryContext

The context object passed to the server entry point containing all necessary data for server-side rendering.

interface EntryContext {
  /** Assets manifest containing information about static assets */
  manifest: AssetsManifest;
  /** Route modules for the current request */
  routeModules: RouteModules;
  /** Critical CSS for above-the-fold content */
  criticalCss?: string;
  /** Server handoff string for client hydration */
  serverHandoffString?: string;
  /** Static handler context from React Router */
  staticHandlerContext: StaticHandlerContext;
  /** Future flags configuration */
  future: FutureConfig;
  /** Whether the app is in SPA mode */
  isSpaMode: boolean;
}

Future Configuration

Configuration for enabling future Remix features and behaviors.

interface FutureConfig {
  /** Enable single fetch optimization */
  unstable_singleFetch?: boolean;
  /** Enable fog of war route loading */
  unstable_fogOfWar?: boolean;
  /** Enable optimized Link prefetching */
  unstable_optimizeDeps?: boolean;
}

Implementation Notes

Client Hydration: RemixBrowser automatically handles the hydration of server-rendered content
Error Boundaries: Both components include built-in error boundary handling for route-level errors
Asset Loading: Server component manages critical CSS and asset preloading for optimal performance
Context Passing: Entry components handle the passing of server context to client components during hydration
Development Mode: Components include development-specific features like live reload integration