Webpack plugin to enable React Fast Refresh (Hot Reloading) for React components during development
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Core utility functions for advanced plugin integration and customization, providing low-level access to the plugin's internal mechanisms.
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);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);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); // falseInjects 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
}
});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());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 propertiesUse 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);
}
}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