tessl/npm-react-refresh

React Refresh runtime and Babel plugin for Fast Refresh functionality that enables live editing of React components without losing state

—

Pending

Overview

Eval results

Files

Component Registration & Signatures

Name: tessl/npm-react-refresh
Author: tessl

System for tracking components and their Hook usage patterns to enable intelligent refresh decisions. Hook signatures allow React Refresh to determine whether component state can be preserved during updates.

Capabilities

setSignature

Sets a Hook signature for a component, capturing its Hook usage pattern to determine refresh behavior.

/**
 * Sets Hook signature for component to track Hook usage changes
 * @param type - Component type to set signature for
 * @param key - Hook signature key representing Hook usage pattern
 * @param forceReset - Optional flag to force component reset on changes
 * @param getCustomHooks - Optional function returning array of custom Hooks used
 * @throws Error if called in production environment
 */
function setSignature(
  type: any,
  key: string,
  forceReset?: boolean,
  getCustomHooks?: () => Array<Function>
): void;

Usage Example:

function MyComponent() {
  const [count, setCount] = React.useState(0);
  const [name, setName] = React.useState('');
  const customValue = useCustomHook();
  
  return <div>{count} - {name}</div>;
}

// Set signature capturing Hook usage
ReactRefreshRuntime.setSignature(
  MyComponent,
  'useState{[count, setCount]}(0)\nuseState{[name, setName]}()',
  false,
  () => [useCustomHook]
);

collectCustomHooksForSignature

Collects the custom Hook list for a component's signature during first render. This is called lazily to capture Hook dependencies.

/**
 * Collects custom Hook list for component signature during first render
 * @param type - Component type to collect Hooks for
 * @throws Error if called in production environment
 */
function collectCustomHooksForSignature(type: any): void;

Usage Example:

function MyComponent() {
  const value = useCustomHook();
  
  // This is typically called automatically during first render
  ReactRefreshRuntime.collectCustomHooksForSignature(MyComponent);
  
  return <div>{value}</div>;
}

createSignatureFunctionForTransform

Creates a signature function specifically designed for Babel transform usage. This function handles the two-phase signature process used by the Babel plugin.

/**
 * Creates signature function for Babel transform usage
 * @returns Function that handles component signature registration
 * @throws Error if called in production environment
 */
function createSignatureFunctionForTransform(): Function;

The returned function has this signature:

/**
 * Transform signature function (returned by createSignatureFunctionForTransform)
 * @param type - Component type (on first call) or undefined (subsequent calls)
 * @param key - Hook signature key
 * @param forceReset - Whether to force component reset
 * @param getCustomHooks - Function returning custom Hooks array
 * @returns The original type parameter
 */
type TransformSignatureFunction = <T>(
  type: T,
  key: string,
  forceReset?: boolean,
  getCustomHooks?: () => Array<Function>
) => T;

Usage Example (Generated by Babel Plugin):

// This is typically generated by the Babel plugin
const _s = ReactRefreshRuntime.createSignatureFunctionForTransform();

function Hello() {
  const [foo, setFoo] = React.useState(0);
  const value = useCustomHook();
  
  // First call during render to collect custom Hooks
  _s();
  
  return <h1>Hi</h1>;
}

// Second call to register signature
_s(
  Hello,
  'useState{[foo, setFoo]}(0)',
  false,
  () => [useCustomHook]
);

Hook Signature Format

Hook signatures capture the Hook usage pattern of a component:

Built-in Hook Signatures

// useState with initial value
'useState{[count, setCount]}(0)'

// useEffect with dependencies
'useEffect{}([value])'

// Multiple Hooks
'useState{[count, setCount]}(0)\nuseState{[name, setName]}("")'

Custom Hook Signatures

Custom Hooks are tracked separately and can be nested:

function useCustomHook() {
  const [state, setState] = React.useState(0);
  return state;
}

// Custom Hook signature includes its own Hook usage
'useCustomHook{useState{[state, setState]}(0)}'

Signature Comparison

React Refresh compares signatures to determine refresh behavior:

Identical signatures: State is preserved (fast refresh)
Different signatures: Component is remounted (full refresh)
Force reset flag: Component is always remounted

Types

interface Signature {
  /** Component's own Hook signature key */
  ownKey: string;
  /** Whether to force component reset on any change */
  forceReset: boolean;
  /** Full signature including nested custom Hooks (computed lazily) */
  fullKey: string | null;
  /** Function returning array of custom Hooks used by component */
  getCustomHooks: () => Array<Function>;
}

Install with Tessl CLI