What is the current behavior?

GitHub Issue Number: #6190

The file watcher sometimes fails to trigger a rebuild:

This is caused by the "Back up files before saving" option in my editor.
When this option is disabled the file watcher works just fine.
However, the "Back up files before saving" option is enabled per default and Stencil should be able to handle this.

The above demo was recorded on a clean install of Stencil. It should be fairly simple to reproduce the issue as long you're using "Back up files before saving". (I don't know if it's just PHPStorm or other editors as well.)

What is the new behavior?

After applying these changes the watcher behaves beautifully with or without "Back up files before saving" option enabled.

Documentation

–

Does this introduce a breaking change?

• Yes
• No

Testing

I tested the code with a custom @stencil/core build in my application running stencil build --watch --verbose. I also made sure that the issue is not specific to my project. I installed a clean Stencil project and repeated my tests with and without the "Back up files before saving" option.

I ran the test suite via npm run test and made sure tests are still passing. I did not add any new tests.

Other information

Ignoring backup files via watchIgnoredRegex: [/\.\w+~$/] or using "**/*.*~" on the watchOptions.excludeFiles tsconfig.json option did not work.

These options generally don't work for me. (Or I'm misinterpreting the NODE_SYS_DEBUG and WATCH_BUILD logging.)

The existing implementation was running into the lastTsBuilder && !timeoutId condition with a timeoutId being present even though there was no running build or any other good reason not to rebuild.

The change simplifies the implementation by using a recursive setTimeout to wait for pending builds.

This allows to:

• remove the extra rebuildTimer which was arguably confusing
• remove the clearTimeout override

Since we immediately call clearTimeout(timeoutId) in the setTimeout override, we don't stack up rebuild requests.