CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-pmmmwh--react-refresh-webpack-plugin

Webpack plugin to enable React Fast Refresh (Hot Reloading) for React components during development

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

plugin-utilities.mddocs/

Plugin Utilities

Core utility functions for advanced plugin integration and customization, providing low-level access to the plugin's internal mechanisms.

Capabilities

Get Additional Entries

Retrieves additional entry points required for React Refresh integration.

/**
 * Gets additional webpack entries for React Refresh integration
 * @param {NormalizedPluginOptions} options - Normalized plugin options
 * @returns {{ overlayEntries: string[], prependEntries: string[] }}
 */
function getAdditionalEntries(options: NormalizedPluginOptions): {
  overlayEntries: string[];
  prependEntries: string[];
};

Usage Example:

const { getAdditionalEntries } = require('@pmmmwh/react-refresh-webpack-plugin/lib/utils');

// Get entries for custom webpack configuration
const { overlayEntries, prependEntries } = getAdditionalEntries({
  overlay: {
    entry: '@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry',
    module: '@pmmmwh/react-refresh-webpack-plugin/overlay',
    sockIntegration: 'wds'
  }
});

console.log('Overlay entries:', overlayEntries);
console.log('Prepend entries:', prependEntries);

Get Integration Entry

Resolves the integration entry point path for a given socket integration type.

/**
 * Gets the integration entry path for socket communication
 * @param {string | false} sockIntegration - Socket integration identifier
 * @returns {string} - Path to integration entry module
 */
function getIntegrationEntry(sockIntegration: string | false): string;

Usage Example:

const { getIntegrationEntry } = require('@pmmmwh/react-refresh-webpack-plugin/lib/utils');

// Get webpack-dev-server integration entry
const wdsEntry = getIntegrationEntry('wds');
console.log('WDS integration entry:', wdsEntry);

// Get custom integration entry
const customEntry = getIntegrationEntry('./custom-integration.js');
console.log('Custom integration entry:', customEntry);

Get Socket Integration

Resolves the socket integration module path for client-server communication.

/**
 * Gets the socket integration module path
 * @param {string | false} sockIntegration - Socket integration identifier
 * @returns {string | false} - Path to socket integration module or false if disabled
 */
function getSocketIntegration(sockIntegration: string | false): string | false;

Usage Example:

const { getSocketIntegration } = require('@pmmmwh/react-refresh-webpack-plugin/lib/utils');

// Get built-in socket integrations
const wdsSocket = getSocketIntegration('wds');
const whmSocket = getSocketIntegration('whm');  
const wpsSocket = getSocketIntegration('wps');

console.log('Socket modules:', { wdsSocket, whmSocket, wpsSocket });

// Disabled integration returns false
const disabled = getSocketIntegration(false);
console.log('Disabled integration:', disabled); // false

Inject Refresh Loader

Injects the React Refresh loader into webpack module creation data.

/**
 * Injects React Refresh loader into webpack module data
 * @param {object} createData - Webpack module creation data
 * @param {object} config - Injection configuration
 * @param {Function} config.match - Function to match modules for processing
 * @param {object} config.options - Loader options
 */
function injectRefreshLoader(
  createData: any,
  config: {
    match: (filename: string) => boolean;
    options?: {
      const?: boolean;
      esModule?: boolean | ESModuleOptions;
    };
  }
): void;

Usage Example:

const { injectRefreshLoader } = require('@pmmmwh/react-refresh-webpack-plugin/lib/utils');
const { ModuleFilenameHelpers } = require('webpack');

// Create module matcher
const match = ModuleFilenameHelpers.matchObject.bind(undefined, {
  include: /\.[jt]sx?$/,
  exclude: /node_modules/
});

// Inject loader into module creation
injectRefreshLoader(resolveData.createData, {
  match,
  options: {
    const: true,
    esModule: false
  }
});

Make Refresh Runtime Module

Creates a webpack runtime module for React Refresh integration.

/**
 * Creates a React Refresh runtime module for webpack
 * @param {object} webpack - Webpack instance with required utilities
 * @returns {Function} - RuntimeModule constructor
 */
function makeRefreshRuntimeModule(webpack: any): typeof RuntimeModule;

Usage Example:

const { makeRefreshRuntimeModule } = require('@pmmmwh/react-refresh-webpack-plugin/lib/utils');

// Create runtime module class
const ReactRefreshRuntimeModule = makeRefreshRuntimeModule(webpack);

// Add to compilation
compilation.addRuntimeModule(chunk, new ReactRefreshRuntimeModule());

Normalize Options

Normalizes and validates plugin options, setting defaults and resolving configurations.

/**
 * Normalizes plugin options with defaults and validation
 * @param {ReactRefreshPluginOptions} options - Raw plugin options
 * @returns {NormalizedPluginOptions} - Normalized options with defaults
 */
function normalizeOptions(options: ReactRefreshPluginOptions): NormalizedPluginOptions;

Usage Example:

const { normalizeOptions } = require('@pmmmwh/react-refresh-webpack-plugin/lib/utils');

// Normalize plugin options
const normalized = normalizeOptions({
  overlay: {
    sockIntegration: 'wds'
  },
  exclude: /node_modules/
});

console.log('Normalized options:', normalized);
// Result includes defaults for all optional properties

Integration Patterns

Custom Plugin Extension

Use utilities to extend the plugin with custom functionality:

const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const { normalizeOptions, getAdditionalEntries } = require('@pmmmwh/react-refresh-webpack-plugin/lib/utils');

class CustomRefreshPlugin extends ReactRefreshPlugin {
  constructor(options) {
    super(options);
    
    // Access normalized options
    const normalized = normalizeOptions(options);
    console.log('Using normalized options:', normalized);
    
    // Get additional entries for custom processing
    const { overlayEntries, prependEntries } = getAdditionalEntries(normalized);
    this.customEntries = [...overlayEntries, ...prependEntries];
  }
  
  apply(compiler) {
    // Custom pre-processing
    console.log('Custom entries:', this.customEntries);
    
    // Apply original plugin logic
    super.apply(compiler);
  }
}

Advanced Entry Management

Manually control webpack entries using utility functions:

const { getIntegrationEntry, getAdditionalEntries } = require('@pmmmwh/react-refresh-webpack-plugin/lib/utils');

// Custom webpack configuration with manual entry control
module.exports = {
  entry: {
    main: './src/index.js',
    // Add React Refresh entries manually
    refreshSetup: getIntegrationEntry('wds'),
  },
  
  plugins: [
    {
      apply(compiler) {
        // Get additional entries
        const { overlayEntries, prependEntries } = getAdditionalEntries({
          overlay: {
            entry: '@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry',
            module: '@pmmmwh/react-refresh-webpack-plugin/overlay',
            sockIntegration: 'wds'
          }
        });
        
        // Process entries as needed
        overlayEntries.forEach(entry => {
          console.log('Processing overlay entry:', entry);
        });
      }
    }
  ]
};

Install with Tessl CLI

npx tessl i tessl/npm-pmmmwh--react-refresh-webpack-plugin

docs

client-utilities.md

error-overlay.md

index.md

loader-configuration.md

plugin-configuration.md

plugin-utilities.md

runtime-utilities.md

socket-integrations.md

tile.json