Rewrite `__dirname`/`__filename` to be relative from `asset.filePath`

[LekoArts]

🙋 feature request

This is a more detailed report of #5090 and one that I put up after following some private conversions with the Parcel Core Team to discuss the specifics in the open.

This feature (request) addressed one bulletpoint here: #2493

Rewrite __dirname and __filename. Currently we don't do this for Node targets, but we probably should so that they refer to the source file rather than the dist.

🤔 Expected Behavior

file.ts:

console.log(`${__dirname}/foo/bar`)

Gets compiled with Parcel to JS into the directory .cache/compiled.

.cache/compiled/file.js:

console.log(`${__dirname + "/../.."}/foo/bar`)

😯 Current Behavior

file.ts:

console.log(`${__dirname}/foo/bar`)

.cache/compiled/file.js:

console.log(`${__dirname}/foo/bar`)
// Which will result in `.cache/compiled/foo/bar`

💁 Possible Solution

First step would be to set a default for node target. That could/would be:
Treat it as relative from options.projectRoot (what is shown in the expected behavior example).

So for example: If outputDir is .cache/compiled and current cwd()/projectRoot is / the relative path to it would be ../../

In a next step options similar to https://webpack.js.org/configuration/node/#node__dirname could be added.

🔦 Context

This might also impact #6925 maybe?

Example Use Case

/usr/project/file.ts:

console.log(`${__dirname}/foo/bar`)

/usr/project/.cache/compiled/file.js:

console.log(`../../foo/bar`)

/usr/project is then the projectRoot because the rest of the scripts runs from this root directory and then the file.js is accessed.

[mischnic]

Expected Behavior

But __dirname is still needed in the Parcel output? Otherwise it would break with

process.chdir("/something/else");
fs.readFile(`${__dirname}/foo/bar`)

->

process.chdir("/something/else");
fs.readFile(`${"../.."}/foo/bar`) // now reads `/foo/bar`

Whereas I would have expected

process.chdir("/something/else");
fs.readFile(`${__dirname + "/../.."}/foo/bar`)

[LekoArts]

Thanks for the note, I've added an example use case why I added the initial expected behavior as the projectRoot is the cwd there. But I guess this would also work with what you have in mind.

[karlhorky]

I guess this is breaking the new TypeScript configs in Gatsby 4.9.0: gatsbyjs/gatsby#34613 (reply in thread)

[rihok]

Is there an option to revert this to the old behavior? Now my electron-main references to __dirname have the wrong file path in them (appends .../.../src/ to the __dirname).

[tujoworker]

@rihok Could you make a small pre-production of that? 🙏

[rihok]

Sure. I compile preload.js separately, so in the main process I do something like this:

// main.ts

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 800,
        webPreferences: {
            preload: path.join(__dirname, "preload.js"),
        },
    });
}

but that gets compiled into resolve(__dirname,"../../src") and then joined with the preload.js

So how are we supposed to get the path to the current file after compilation now?
In node.js apps, we heavily use read/write operations that are based on compiled JS scripts.

[devongovett]

In the above case, you could possibly do something like this:

import {fileURLToPath} from 'url';

fileURLToPath(new URL('preload.js', import.meta.url));

This will also have the effect of creating a dependency on preload.js, and ensure it is compiled.

Are there other use cases where that wouldn't work?