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

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

React Refresh

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

React Refresh provides the runtime and Babel plugin necessary to integrate Fast Refresh functionality into bundlers. Fast Refresh enables developers to edit React components in a running application without losing component state, offering a superior alternative to traditional hot reloading with official React team support.

Package Information

Package Name: react-refresh
Package Type: npm
Language: JavaScript (with Flow types)
Installation: npm install react-refresh

Core Imports

Runtime API:

import * as ReactRefreshRuntime from 'react-refresh/runtime';

For CommonJS:

const ReactRefreshRuntime = require('react-refresh/runtime');

Babel Plugin:

// babel.config.js
{
  plugins: [
    ['react-refresh/babel', options]
  ]
}

Basic Usage

Runtime Setup

import * as ReactRefreshRuntime from 'react-refresh/runtime';

// Initialize React Refresh
ReactRefreshRuntime.injectIntoGlobalHook(window);

// Register a component
function MyComponent() {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

// Register the component for refresh tracking
ReactRefreshRuntime.register(MyComponent, 'MyComponent');

// Perform refresh after code changes
ReactRefreshRuntime.performReactRefresh();

Babel Plugin Setup

// babel.config.js
module.exports = {
  plugins: [
    ['react-refresh/babel', {
      skipEnvCheck: true, // Skip environment check if needed
      refreshReg: '$RefreshReg$', // Custom registration function name
      refreshSig: '$RefreshSig$'  // Custom signature function name
    }]
  ]
};

Architecture

React Refresh is built around several key components:

Runtime System: Core refresh logic managing component families, signatures, and state preservation
Component Registration: Tracking system that assigns unique IDs to components for refresh decisions
Hook Signatures: System for detecting Hook usage changes to determine if state can be preserved
Babel Transform: Code instrumentation that automatically adds refresh support during compilation
DevTools Integration: Hooks into React DevTools infrastructure for renderer communication

Capabilities

Runtime API

Core runtime functionality for managing Fast Refresh state and performing component updates. Essential for bundler integrations and development servers.

function performReactRefresh(): RefreshUpdate | null;
function register(type: any, id: string): void;
function injectIntoGlobalHook(globalObject: any): void;

Runtime API

Component Registration & Signatures

System for tracking components and their Hook usage patterns to enable intelligent refresh decisions.

function setSignature(
  type: any, 
  key: string, 
  forceReset?: boolean, 
  getCustomHooks?: () => Array<Function>
): void;

function collectCustomHooksForSignature(type: any): void;
function createSignatureFunctionForTransform(): Function;

Registration & Signatures

Family & Instance Management

Advanced APIs for querying component families and finding affected DOM instances during refresh operations.

function getFamilyByID(id: string): Family | void;
function getFamilyByType(type: any): Family | void;
function findAffectedHostInstances(families: Array<Family>): Set<Instance>;

Family Management

Babel Plugin

Babel transformation plugin that automatically instruments React components for Fast Refresh support.

function BabelPlugin(babel: any, opts?: BabelPluginOptions): BabelPluginConfig;

interface BabelPluginOptions {
  refreshReg?: string;
  refreshSig?: string;
  skipEnvCheck?: boolean;
  emitFullSignatures?: boolean;
}

Babel Plugin

Types

interface RefreshUpdate {
  updatedFamilies: Set<Family>;
  staleFamilies: Set<Family>;
}

interface Family {
  current: any;
}

interface Signature {
  ownKey: string;
  forceReset: boolean;
  fullKey: string | null;
  getCustomHooks: () => Array<Function>;
}

Workspace: tessl
Visibility: Public
Created: 7 months ago
Last updated: 3 months ago
Describes: pkg:npm/react-refresh@0.9.x
Publish Source: CLI
Badge