| 1 | // This is a patch for mozilla/source-map#349 -
|
|---|
| 2 | // internally, it uses the existence of the `fetch` global to toggle browser behaviours.
|
|---|
| 3 | // That check, however, will break when `fetch` polyfills are used for SSR setups.
|
|---|
| 4 | // We "reset" the polyfill here to ensure it won't interfere with source-map generation.
|
|---|
| 5 | const originalFetch = global.fetch;
|
|---|
| 6 | delete global.fetch;
|
|---|
| 7 |
|
|---|
| 8 | const { getOptions } = require('loader-utils');
|
|---|
| 9 | const { validate: validateOptions } = require('schema-utils');
|
|---|
| 10 | const { SourceMapConsumer, SourceNode } = require('source-map');
|
|---|
| 11 | const {
|
|---|
| 12 | getIdentitySourceMap,
|
|---|
| 13 | getModuleSystem,
|
|---|
| 14 | getRefreshModuleRuntime,
|
|---|
| 15 | normalizeOptions,
|
|---|
| 16 | } = require('./utils');
|
|---|
| 17 | const schema = require('./options.json');
|
|---|
| 18 |
|
|---|
| 19 | const RefreshRuntimePath = require
|
|---|
| 20 | .resolve('react-refresh')
|
|---|
| 21 | .replace(/\\/g, '/')
|
|---|
| 22 | .replace(/'/g, "\\'");
|
|---|
| 23 |
|
|---|
| 24 | /**
|
|---|
| 25 | * A simple Webpack loader to inject react-refresh HMR code into modules.
|
|---|
| 26 | *
|
|---|
| 27 | * [Reference for Loader API](https://webpack.js.org/api/loaders/)
|
|---|
| 28 | * @this {import('webpack').LoaderContext<import('./types').ReactRefreshLoaderOptions>}
|
|---|
| 29 | * @param {string} source The original module source code.
|
|---|
| 30 | * @param {import('source-map').RawSourceMap} [inputSourceMap] The source map of the module.
|
|---|
| 31 | * @param {*} [meta] The loader metadata passed in.
|
|---|
| 32 | * @returns {void}
|
|---|
| 33 | */
|
|---|
| 34 | function ReactRefreshLoader(source, inputSourceMap, meta) {
|
|---|
| 35 | let options = getOptions(this);
|
|---|
| 36 | validateOptions(schema, options, {
|
|---|
| 37 | baseDataPath: 'options',
|
|---|
| 38 | name: 'React Refresh Loader',
|
|---|
| 39 | });
|
|---|
| 40 |
|
|---|
| 41 | options = normalizeOptions(options);
|
|---|
| 42 |
|
|---|
| 43 | const callback = this.async();
|
|---|
| 44 |
|
|---|
| 45 | const { ModuleFilenameHelpers, Template } = this._compiler.webpack || require('webpack');
|
|---|
| 46 |
|
|---|
| 47 | const RefreshSetupRuntimes = {
|
|---|
| 48 | cjs: Template.asString(
|
|---|
| 49 | `__webpack_require__.$Refresh$.runtime = require('${RefreshRuntimePath}');`
|
|---|
| 50 | ),
|
|---|
| 51 | esm: Template.asString([
|
|---|
| 52 | `import * as __react_refresh_runtime__ from '${RefreshRuntimePath}';`,
|
|---|
| 53 | `__webpack_require__.$Refresh$.runtime = __react_refresh_runtime__;`,
|
|---|
| 54 | ]),
|
|---|
| 55 | };
|
|---|
| 56 |
|
|---|
| 57 | /**
|
|---|
| 58 | * @this {import('webpack').LoaderContext<import('./types').ReactRefreshLoaderOptions>}
|
|---|
| 59 | * @param {string} source
|
|---|
| 60 | * @param {import('source-map').RawSourceMap} [inputSourceMap]
|
|---|
| 61 | * @returns {Promise<[string, import('source-map').RawSourceMap]>}
|
|---|
| 62 | */
|
|---|
| 63 | async function _loader(source, inputSourceMap) {
|
|---|
| 64 | /** @type {'esm' | 'cjs'} */
|
|---|
| 65 | const moduleSystem = await getModuleSystem.call(this, ModuleFilenameHelpers, options);
|
|---|
| 66 |
|
|---|
| 67 | const RefreshSetupRuntime = RefreshSetupRuntimes[moduleSystem];
|
|---|
| 68 | const RefreshModuleRuntime = getRefreshModuleRuntime(Template, {
|
|---|
| 69 | const: options.const,
|
|---|
| 70 | moduleSystem,
|
|---|
| 71 | });
|
|---|
| 72 |
|
|---|
| 73 | if (this.sourceMap) {
|
|---|
| 74 | let originalSourceMap = inputSourceMap;
|
|---|
| 75 | if (!originalSourceMap) {
|
|---|
| 76 | originalSourceMap = getIdentitySourceMap(source, this.resourcePath);
|
|---|
| 77 | }
|
|---|
| 78 |
|
|---|
| 79 | return SourceMapConsumer.with(originalSourceMap, undefined, (consumer) => {
|
|---|
| 80 | const node = SourceNode.fromStringWithSourceMap(source, consumer);
|
|---|
| 81 |
|
|---|
| 82 | node.prepend([RefreshSetupRuntime, '\n\n']);
|
|---|
| 83 | node.add(['\n\n', RefreshModuleRuntime]);
|
|---|
| 84 |
|
|---|
| 85 | const { code, map } = node.toStringWithSourceMap();
|
|---|
| 86 | return [code, map.toJSON()];
|
|---|
| 87 | });
|
|---|
| 88 | } else {
|
|---|
| 89 | return [[RefreshSetupRuntime, source, RefreshModuleRuntime].join('\n\n'), inputSourceMap];
|
|---|
| 90 | }
|
|---|
| 91 | }
|
|---|
| 92 |
|
|---|
| 93 | _loader.call(this, source, inputSourceMap).then(
|
|---|
| 94 | ([code, map]) => {
|
|---|
| 95 | callback(null, code, map, meta);
|
|---|
| 96 | },
|
|---|
| 97 | (error) => {
|
|---|
| 98 | callback(error);
|
|---|
| 99 | }
|
|---|
| 100 | );
|
|---|
| 101 | }
|
|---|
| 102 |
|
|---|
| 103 | module.exports = ReactRefreshLoader;
|
|---|
| 104 |
|
|---|
| 105 | // Restore the original value of the `fetch` global, if it exists
|
|---|
| 106 | if (originalFetch) {
|
|---|
| 107 | global.fetch = originalFetch;
|
|---|
| 108 | }
|
|---|