Skip to content

Commit

Permalink
Encode sources as "file://" protocol
Browse files Browse the repository at this point in the history
This way Chrome knows where this is on disk and that it's not a relative
path to the page's domain.
  • Loading branch information
sebmarkbage committed Jun 6, 2024
1 parent 86135cf commit c910cb1
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 4 deletions.
3 changes: 2 additions & 1 deletion fixtures/flight/config/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const ReactFlightWebpackPlugin = require('react-server-dom-webpack/plugin');
const fs = require('fs');
const {createHash} = require('crypto');
const path = require('path');
const {pathToFileURL} = require('url');
const webpack = require('webpack');
const resolve = require('resolve');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
Expand Down Expand Up @@ -235,7 +236,7 @@ module.exports = function (webpackEnv) {
.relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/')
: isEnvDevelopment &&
(info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
(info => pathToFileURL(path.resolve(info.absoluteResourcePath))),
},
cache: {
type: 'filesystem',
Expand Down
11 changes: 8 additions & 3 deletions fixtures/flight/server/region.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
// This is a server to host data-local resources like databases and RSC

const path = require('path');
const url = require('url');

const register = require('react-server-dom-webpack/node-register');
register();
Expand Down Expand Up @@ -192,7 +193,7 @@ if (process.env.NODE_ENV === 'development') {
// We assume that if it was prefixed with file:// it's referring to the compiled output
// and if it's a direct file path we assume it's source mapped back to original format.
isCompiledOutput = true;
requestedFilePath = requestedFilePath.slice(7);
requestedFilePath = url.fileURLToPath(requestedFilePath);
}

const relativePath = path.relative(rootDir, requestedFilePath);
Expand All @@ -211,7 +212,9 @@ if (process.env.NODE_ENV === 'development') {
// generate a source map for it so that we can add it to an ignoreList automatically.
map = {
version: 3,
sources: [requestedFilePath],
// We use the node:// protocol convention to teach Chrome DevTools that this is
// on a different protocol and not part of the current page.
sources: ['node:///' + requestedFilePath.slice(5)],
sourcesContent: ['// Node Internals'],
mappings: 'AAAA',
ignoreList: [0],
Expand All @@ -224,9 +227,11 @@ if (process.env.NODE_ENV === 'development') {
// was already applied we also use this path.
const sourceContent = await readFile(requestedFilePath, 'utf8');
const lines = sourceContent.split('\n').length;
// We ensure to absolute
const sourceURL = url.pathToFileURL(requestedFilePath);
map = {
version: 3,
sources: [requestedFilePath],
sources: [sourceURL],
sourcesContent: [sourceContent],
// Note: This approach to mapping each line only lets you jump to each line
// not jump to a column within a line. To do that, you need a proper source map
Expand Down

0 comments on commit c910cb1

Please sign in to comment.