bug: watchIgnoredRegex is not respected during `stencil build --watch`

[rwaskiewicz]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

4.17.1

Current Behavior

Stencil has an undocumented config flag called watchIgnoredRegex (source). The JSDoc implies that we should be able to run the build task with --watch and "ignore" files that are matched by this regex. However, that doesn't seem to be the case in some of my testing.

When adding watchIgnoredRegex to my Stencil config (from a Component Starter):

diff --git a/stencil.config.ts b/stencil.config.ts
index 0137899..0994269 100644
--- a/stencil.config.ts
+++ b/stencil.config.ts
@@ -2,6 +2,7 @@ import { Config } from '@stencil/core';

 export const config: Config = {
   namespace: 'watch-ignore-test',
+  watchIgnoredRegex: [/.*\.stories\.ts$/],
   outputTargets: [
     {
       type: 'dist',

I would expect any files matching that regex to be ignored for something like /private/tmp/watch-ignore-test/src/components/my-component/my-component.stories.ts. The screenshot below is just a quick check on the regex itself, and shows the file name getting matched by the regex we use in the stencil config diff above:

However, if I create a file, src/components/my-component/my-component.stories.ts with any valid TypeScript in it, then start the build task with watchers enabled, changing that file results in a re-render

Expected Behavior

I would expect that file to be ignored, and a compilation to stop if that was the only file being changed/updated

System Info

$ npx stencil info

      System: node 20.10.0
    Platform: darwin (23.2.0)
   CPU Model: Apple M3 Max (14 cpus)
    Compiler: /private/tmp/watch-ignore-test/node_modules/@stencil/core/compiler/stencil.js
       Build: 1713902307
     Stencil: 4.17.1 🚒
  TypeScript: 5.4.5
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.30.3

Steps to Reproduce

1. Create a new component starter with npm init stencil@latest component watch-test
2. Enter that directory cd watch-test
3. Install deps npm i

4. Add the ignoreWatchedRegex to your Stencil config file (root level stencil.config.ts)

   diff --git a/stencil.config.ts b/stencil.config.ts
   index 0137899..0994269 100644
   --- a/stencil.config.ts
   +++ b/stencil.config.ts
   @@ -2,6 +2,7 @@ import { Config } from '@stencil/core';
   
   export const config: Config = {
   namespace: 'watch-ignore-test',
   +  watchIgnoredRegex: [/.*\.stories\.ts$/],
   outputTargets: [
    {
      type: 'dist',

5. Create src/components/my-component/my-component.stories.ts with:

   console.log('hello world')

6. Run npm start, which runs the build task with --watch and --serve
7. Change src/components/my-component/my-component.stories.ts in some way to be still valid TS. E.g.

   - console.log('hello world')
   + console.log('hello world');

8. See the recompilation occur

Code Reproduction URL

https://github.com/rwaskiewicz/stencil-5709-repro

Additional Information

I also tested this on v4.0.0, presumably it broke before then (although I didn't try every version between that and v4.17.1)

Discord thread that started this https://discord.com/channels/520266681499779082/1230541824750387271/1230541824750387271

[pfteter]

Our stencil build in watch mode during debugging I saw that stencil is watching node_modules for changes - he shouldn't.

So I wanted to ignore node_modules. Unfortunetly the watch ignore doesnt work.

Is it by default that stencil is wathing node_modules ?

This eats memory like crazy.

[32:39.4] NODE_SYS_DEBUG::watchFile /dev/workspace/develop2/packages/core/node_modules/@stencil/core/compiler/lib.esnext.decorators.d.ts MEM: 452.4MB [32:39.4] NODE_SYS_DEBUG::watchFile /dev/workspace/develop2/packages/core/node_modules/@stencil/core/compiler/lib.esnext.disposable.d.ts

[pfteter]

I need to check our config if there is something that makes the builder include node_modules they should be ignored per code:

https://github.com/ionic-team/stencil/blob/0ec136ff43f4058a5b5c80174d4bec22a6b32aec/src/compiler/build/watch-build.ts#L262

It's possible that it only watches the imported ones