123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367 |
- const { validate: validateOptions } = require('schema-utils');
- const { getRefreshGlobalScope, getWebpackVersion } = require('./globals');
- const {
- getAdditionalEntries,
- getIntegrationEntry,
- getRefreshGlobal,
- getSocketIntegration,
- injectRefreshEntry,
- injectRefreshLoader,
- makeRefreshRuntimeModule,
- normalizeOptions,
- } = require('./utils');
- const schema = require('./options.json');
- class ReactRefreshPlugin {
- /**
- * @param {import('./types').ReactRefreshPluginOptions} [options] Options for react-refresh-plugin.
- */
- constructor(options = {}) {
- validateOptions(schema, options, {
- name: 'React Refresh Plugin',
- baseDataPath: 'options',
- });
- /**
- * @readonly
- * @type {import('./types').NormalizedPluginOptions}
- */
- this.options = normalizeOptions(options);
- }
- /**
- * Applies the plugin.
- * @param {import('webpack').Compiler} compiler A webpack compiler object.
- * @returns {void}
- */
- apply(compiler) {
- // Skip processing in non-development mode, but allow manual force-enabling
- if (
- // Webpack do not set process.env.NODE_ENV, so we need to check for mode.
- // Ref: https://github.com/webpack/webpack/issues/7074
- (compiler.options.mode !== 'development' ||
- // We also check for production process.env.NODE_ENV,
- // in case it was set and mode is non-development (e.g. 'none')
- (process.env.NODE_ENV && process.env.NODE_ENV === 'production')) &&
- !this.options.forceEnable
- ) {
- return;
- }
- const webpackVersion = getWebpackVersion(compiler);
- const logger = compiler.getInfrastructureLogger(this.constructor.name);
- // Get Webpack imports from compiler instance (if available) -
- // this allow mono-repos to use different versions of Webpack without conflicts.
- const webpack = compiler.webpack || require('webpack');
- const {
- DefinePlugin,
- EntryDependency,
- EntryPlugin,
- ModuleFilenameHelpers,
- NormalModule,
- ProvidePlugin,
- RuntimeGlobals,
- Template,
- } = webpack;
- // Inject react-refresh context to all Webpack entry points.
- // This should create `EntryDependency` objects when available,
- // and fallback to patching the `entry` object for legacy workflows.
- const addEntries = getAdditionalEntries({
- devServer: compiler.options.devServer,
- options: this.options,
- });
- if (EntryPlugin) {
- // Prepended entries does not care about injection order,
- // so we can utilise EntryPlugin for simpler logic.
- addEntries.prependEntries.forEach((entry) => {
- new EntryPlugin(compiler.context, entry, { name: undefined }).apply(compiler);
- });
- const integrationEntry = getIntegrationEntry(this.options.overlay.sockIntegration);
- const socketEntryData = [];
- compiler.hooks.make.tap(
- { name: this.constructor.name, stage: Number.POSITIVE_INFINITY },
- (compilation) => {
- // Exhaustively search all entries for `integrationEntry`.
- // If found, mark those entries and the index of `integrationEntry`.
- for (const [name, entryData] of compilation.entries.entries()) {
- const index = entryData.dependencies.findIndex(
- (dep) => dep.request && dep.request.includes(integrationEntry)
- );
- if (index !== -1) {
- socketEntryData.push({ name, index });
- }
- }
- }
- );
- // Overlay entries need to be injected AFTER integration's entry,
- // so we will loop through everything in `finishMake` instead of `make`.
- // This ensures we can traverse all entry points and inject stuff with the correct order.
- addEntries.overlayEntries.forEach((entry, idx, arr) => {
- compiler.hooks.finishMake.tapPromise(
- { name: this.constructor.name, stage: Number.MIN_SAFE_INTEGER + (arr.length - idx - 1) },
- (compilation) => {
- // Only hook into the current compiler
- if (compilation.compiler !== compiler) {
- return Promise.resolve();
- }
- const injectData = socketEntryData.length ? socketEntryData : [{ name: undefined }];
- return Promise.all(
- injectData.map(({ name, index }) => {
- return new Promise((resolve, reject) => {
- const options = { name };
- const dep = EntryPlugin.createDependency(entry, options);
- compilation.addEntry(compiler.context, dep, options, (err) => {
- if (err) return reject(err);
- // If the entry is not a global one,
- // and we have registered the index for integration entry,
- // we will reorder all entry dependencies to our desired order.
- // That is, to have additional entries DIRECTLY behind integration entry.
- if (name && typeof index !== 'undefined') {
- const entryData = compilation.entries.get(name);
- entryData.dependencies.splice(
- index + 1,
- 0,
- entryData.dependencies.splice(entryData.dependencies.length - 1, 1)[0]
- );
- }
- resolve();
- });
- });
- })
- ).then(() => {});
- }
- );
- });
- } else {
- compiler.options.entry = injectRefreshEntry(compiler.options.entry, addEntries);
- }
- // Inject necessary modules and variables to bundle's global scope
- const refreshGlobal = getRefreshGlobalScope(RuntimeGlobals || {});
- /** @type {Record<string, string | boolean>}*/
- const definedModules = {
- // Mapping of react-refresh globals to Webpack runtime globals
- $RefreshReg$: `${refreshGlobal}.register`,
- $RefreshSig$: `${refreshGlobal}.signature`,
- 'typeof $RefreshReg$': 'function',
- 'typeof $RefreshSig$': 'function',
- // Library mode
- __react_refresh_library__: JSON.stringify(
- Template.toIdentifier(
- this.options.library ||
- compiler.options.output.uniqueName ||
- compiler.options.output.library
- )
- ),
- };
- /** @type {Record<string, string>} */
- const providedModules = {
- __react_refresh_utils__: require.resolve('./runtime/RefreshUtils'),
- };
- if (this.options.overlay === false) {
- // Stub errorOverlay module so their calls can be erased
- definedModules.__react_refresh_error_overlay__ = false;
- definedModules.__react_refresh_polyfill_url__ = false;
- definedModules.__react_refresh_socket__ = false;
- } else {
- definedModules.__react_refresh_polyfill_url__ = this.options.overlay.useURLPolyfill || false;
- if (this.options.overlay.module) {
- providedModules.__react_refresh_error_overlay__ = require.resolve(
- this.options.overlay.module
- );
- }
- if (this.options.overlay.sockIntegration) {
- providedModules.__react_refresh_socket__ = getSocketIntegration(
- this.options.overlay.sockIntegration
- );
- }
- }
- new DefinePlugin(definedModules).apply(compiler);
- new ProvidePlugin(providedModules).apply(compiler);
- const match = ModuleFilenameHelpers.matchObject.bind(undefined, this.options);
- let loggedHotWarning = false;
- compiler.hooks.compilation.tap(
- this.constructor.name,
- (compilation, { normalModuleFactory }) => {
- // Only hook into the current compiler
- if (compilation.compiler !== compiler) {
- return;
- }
- // Tap into version-specific compilation hooks
- switch (webpackVersion) {
- case 4: {
- const outputOptions = compilation.mainTemplate.outputOptions;
- compilation.mainTemplate.hooks.require.tap(
- this.constructor.name,
- // Constructs the module template for react-refresh
- (source, chunk, hash) => {
- // Check for the output filename
- // This is to ensure we are processing a JS-related chunk
- let filename = outputOptions.filename;
- if (typeof filename === 'function') {
- // Only usage of the `chunk` property is documented by Webpack.
- // However, some internal Webpack plugins uses other properties,
- // so we also pass them through to be on the safe side.
- filename = filename({
- contentHashType: 'javascript',
- chunk,
- hash,
- });
- }
- // Check whether the current compilation is outputting to JS,
- // since other plugins can trigger compilations for other file types too.
- // If we apply the transform to them, their compilation will break fatally.
- // One prominent example of this is the HTMLWebpackPlugin.
- // If filename is falsy, something is terribly wrong and there's nothing we can do.
- if (!filename || !filename.includes('.js')) {
- return source;
- }
- // Split template source code into lines for easier processing
- const lines = source.split('\n');
- // Webpack generates this line when the MainTemplate is called
- const moduleInitializationLineNumber = lines.findIndex((line) =>
- line.includes('modules[moduleId].call(')
- );
- // Unable to find call to module execution -
- // this happens if the current module does not call MainTemplate.
- // In this case, we will return the original source and won't mess with it.
- if (moduleInitializationLineNumber === -1) {
- return source;
- }
- const moduleInterceptor = Template.asString([
- `${refreshGlobal}.setup(moduleId);`,
- 'try {',
- Template.indent(lines[moduleInitializationLineNumber]),
- '} finally {',
- Template.indent(`${refreshGlobal}.cleanup(moduleId);`),
- '}',
- ]);
- return Template.asString([
- ...lines.slice(0, moduleInitializationLineNumber),
- '',
- outputOptions.strictModuleExceptionHandling
- ? Template.indent(moduleInterceptor)
- : moduleInterceptor,
- '',
- ...lines.slice(moduleInitializationLineNumber + 1, lines.length),
- ]);
- }
- );
- compilation.mainTemplate.hooks.requireExtensions.tap(
- this.constructor.name,
- // Setup react-refresh globals as extensions to Webpack's require function
- (source) => {
- return Template.asString([source, '', getRefreshGlobal(Template)]);
- }
- );
- normalModuleFactory.hooks.afterResolve.tap(
- this.constructor.name,
- // Add react-refresh loader to process files that matches specified criteria
- (data) => {
- return injectRefreshLoader(data, {
- match,
- options: { const: false, esModule: false },
- });
- }
- );
- compilation.hooks.normalModuleLoader.tap(
- // `Number.POSITIVE_INFINITY` ensures this check will run only after all other taps
- { name: this.constructor.name, stage: Number.POSITIVE_INFINITY },
- // Check for existence of the HMR runtime -
- // it is the foundation to this plugin working correctly
- (context) => {
- if (!context.hot && !loggedHotWarning) {
- logger.warn(
- [
- 'Hot Module Replacement (HMR) is not enabled!',
- 'React Refresh requires HMR to function properly.',
- ].join(' ')
- );
- loggedHotWarning = true;
- }
- }
- );
- break;
- }
- case 5: {
- // Set factory for EntryDependency which is used to initialise the module
- compilation.dependencyFactories.set(EntryDependency, normalModuleFactory);
- const ReactRefreshRuntimeModule = makeRefreshRuntimeModule(webpack);
- compilation.hooks.additionalTreeRuntimeRequirements.tap(
- this.constructor.name,
- // Setup react-refresh globals with a Webpack runtime module
- (chunk, runtimeRequirements) => {
- runtimeRequirements.add(RuntimeGlobals.interceptModuleExecution);
- runtimeRequirements.add(RuntimeGlobals.moduleCache);
- runtimeRequirements.add(refreshGlobal);
- compilation.addRuntimeModule(chunk, new ReactRefreshRuntimeModule());
- }
- );
- normalModuleFactory.hooks.afterResolve.tap(
- this.constructor.name,
- // Add react-refresh loader to process files that matches specified criteria
- (resolveData) => {
- injectRefreshLoader(resolveData.createData, {
- match,
- options: {
- const: compilation.runtimeTemplate.supportsConst(),
- esModule: this.options.esModule,
- },
- });
- }
- );
- NormalModule.getCompilationHooks(compilation).loader.tap(
- // `Infinity` ensures this check will run only after all other taps
- { name: this.constructor.name, stage: Infinity },
- // Check for existence of the HMR runtime -
- // it is the foundation to this plugin working correctly
- (context) => {
- if (!context.hot && !loggedHotWarning) {
- logger.warn(
- [
- 'Hot Module Replacement (HMR) is not enabled!',
- 'React Refresh requires HMR to function properly.',
- ].join(' ')
- );
- loggedHotWarning = true;
- }
- }
- );
- break;
- }
- default: {
- // Do nothing - this should be an impossible case
- }
- }
- }
- );
- }
- }
- module.exports.ReactRefreshPlugin = ReactRefreshPlugin;
- module.exports = ReactRefreshPlugin;
|