Add option to watch all file changes in project tree

[davl3232]

Problem

When I import GLSL files as strings using https://github.com/pveyes/raw.macro as discussed in #3722, changes to the GLSL files don't trigger HMR. This is a bit cumbersome for WebGL development in React, since WebGL requires having the GLSL code available as a string in Javascript.

Describe the solution you'd like

An optional behavior for HMR, where changes to any file in the tree trigger reload, similar to that of https://github.com/napcs/node-livereload would help with this. This way a user that has special HMR needs

Describe alternatives you've considered

Template literals

Putting the GLSL code in a template literal like this:

const shaderSource = `
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);;
}
`

It works with HMR since you change Javascript code instead of a separate shader file, but this breaks currently available tooling for GLSL since they require having the code in a separate .glsl file.

Ejecting CRA

Ejecting and using https://github.com/webpack-contrib/raw-loader with custom webpack config. I don't know if this would trigger a reload on .glsl file change.

[heyimalex]

Yeesh, raw.macro is such a hack. I think that reloading on any file change isn't the right strategy; we should focus on making raw loading work in the style proposed in #3722 so that it actually ends up in the dependency graph.

[davl3232]

We should focus on making raw loading work in the style proposed in #3722 so that it actually ends up in the dependency graph.

Yes indeed. Though, the way the discussion is unfolding at #3722, this solution seems unlikely.