[Bug] Watch mode doesn't work with plugins

[hum-n]

Hey,

The new watch mode doesn't watch files transformed with plugins.
Here's a simplified example, a plugin that reads JS files and returns its contents.
With this plugin, the JS files are not being watched.

build.onLoad({ filter: /\.js$/ }, async (args) => {
    const contents = await fs.promises.readFile(args.path, 'utf8');
    return { contents };
});

If you delete the return line, the watch works again.

[kyotops]

@evanw this bug still exists, even after this fix.

I noticed it while implementing sass as plugin.
Watcher won't look for changes inside imports in main sass file.

Example:

esbuild.config.js

const esbuild = require('esbuild');

const sassPlugin = {
  name: 'sass',
  setup(build) {
    const path = require('path');
    const sass = require('node-sass');

    build.onLoad({ filter: /\.scss$/ }, async (args) => {
      const filePath = path.relative(process.cwd(), args.path);
      const result = sass.renderSync({
        file: filePath,
      });

      return {
        loader: 'css',
        contents: result.css.toString(),
      };
    });
  },
};

esbuild.build({
  entryPoints: ['src/main.js'],
  outdir: 'dist/',
  bundle: true,
  minify: true,
  watch: true,
  plugins: [sassPlugin],
}).catch((e) => console.error(e.message));

// main.js
import './main.scss';

Here, any change made in imported file won't watcher to rebuild.

// main.scss
@import 'reset';
@import 'base';
@import 'button';

Is there some workaround for this?

[evanw]

It appears to be working fine for me when I try this. If you change src/main.scss while that script is running, the changes are reflected in dist/main.css. This doesn't work for any of the imported files but that's expected since esbuild has no way of knowing about them.

If you would like for esbuild to watch additional files when your plugin is run, you will need to tell esbuild about them explicitly. Read about watchFiles and watchDirs to learn about how to do that: https://esbuild.github.io/plugins/#load-results.

[peteroid]

I was experiencing the issue with postcss plugin. Even my postcss plugin is doing nothing (w/ an empty plugin list), the watch mode failed at catching the changes on the source files.

My workaround is to add a simple loader plugin like this:

glob('src/{pages,components}/**/*.css', (err, files) => {
  if (err) console.error(err)
  console.log('[Build] detected css files', files)
  console.log('[Build] CSS init may require some time...')

  // workaround for https://github.com/evanw/esbuild/issues/752
  const cssPluginWatchFixPlugin = {
    name: 'fixWatchModeWithPlugin',
    setup(build) {
      build.onLoad({ filter: /\.css$/ }, async (args) => {
        const relatedFiles = files.filter(f => args.path.includes(f))
        console.log('load for', args.path, relatedFiles)
        return {
          watchFiles: relatedFiles
        }
      })
    },
  }

  esbuild
    .build({
      logLevel: 'info',
      platform: 'browser',
      entryPoints: files,
      plugins: [
        cssPluginWatchFixPlugin,
        postCssPlugin({
          plugins: []
        }),
      ],
// ......