feat(remix-dev): add extraPathsToWatch config option

[npirotte]

This adds the possibility to watch extra directories/files/globs in dev mode.

This should make integration with mono repos lix NX easier.

Will spend more time documenting and testing if necessary and if feature is approved.

Closes: #2983

• Docs
• Tests

[christophertrudel]

I found myself in the same boat with TurboRepo. Was going to submit a PR myself until I found yours. The only difference, the approach I took is to pass an async function to allow programmatic evaluation to supply the path(s).

/**
 * List of extra paths or globs to watch changes on in addition to the main app directory.
 * relative to `remix.config.js`. Defaults to `[]`.
 */
extraPathsToWatch.concat?: () => Promise<string | string[]>;

let extraPathsToWatch: string[] = [];
if (appConfig. extraPathsToWatch) {
    let paths = await appConfig.extraPathsToWatch();
    extraPathsToWatch  = extraPathsToWatch.concat(Array.isArray(paths) ? paths : [paths]);
}

christophertrudel@763b6ac

Thoughts?

[npirotte]

Yes, I don't mind both option will fulfil my needs :)

[philipjfulcher]

Chiming in from the Nx side, I think the function might work better for us as well. That way, we could use the project graph to determine what other directories need to be watched instead of having a static list of directories we'd need to update.

I'm curious how often this config is re-evaluated. If a dev imports from a new lib that's not yet added to the watch, are we able to supply new directories to watch over time? Or do you need to re-start the dev script entirely to get the updated config?

[philipjfulcher]

Thinking through this a little more, I have a specific, rather than a hypothetical, example of where the function would have advantages over the array.

We can look at how @nrwl/react-native does something similar working with metro-resolver in with-nx-metro.ts

let watchFolders = config.watchFolders || [];
  watchFolders = watchFolders.concat([
    join(workspaceRoot, 'node_modules'),
    join(workspaceRoot, workspaceLayout().libsDir),
    join(workspaceRoot, '.storybook'),
  ]);
  if (opts.watchFolders?.length) {
    watchFolders = watchFolders.concat(opts.watchFolders);
  }

  watchFolders = watchFolders.filter((folder) => existsSync(folder));

To provide all of the directories to watch, we use some utility functions from Nx to determine where the libs folder is actually located. We do this same sort of thing with a static array, it's just that we could introduce issues if the libs location ever changes or isn't set correctly to begin with. We also include changes in node_modules and .storybook directories to rebuild on those changes.

So we would definitely want a way to programmatically provide extra folders to watch, but since the remix config file is JS rather than JSON, we can probably already accomplish that. We'd just have the function in the JS file generate the static array.

[npirotte]

Make sense, to me, maybe @christophertrudel can you create a PR with your commit? Then I can close this one. Just make sure to link #2983 to it :)

Would be nice to have some remix developer feedback on that too :)

[laibulle]

This solution works for my project. Hope this one or this christophertrudel@763b6ac would be merged soon.

[christophertrudel]

Make sense, to me, maybe @christophertrudel can you create a PR with your commit? Then I can close this one. Just make sure to link #2983 to it :)

Would be nice to have some remix developer feedback on that too :)

#3188

[MichaelDeBoey]

Closed by #3188