feat: stencil compiler should be configurable to watch arbitrary files for change and recompile

[petercmuc]

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 include this feature request, without success.

Describe the Feature Request

stencil compiler should be configurable to watch arbitrary files for change and recompile.

Describe the Use Case

When devolping a multi-npm-package stencil application it would be helpful if a change of a node module would trigger re-compilation of the app. In our case we develop an app and have a npm package that includes certain re-usable webcomponents, also built with stencil. These need to be integrated in the app to check their functionality. This is achieved using npm link which creates a symlink in the node_modules directory of the app that uses them. This setup requires the component package to be built (this can be simplified using the watch compiler option) and the app to be re-started with every change of the components.

Describe Preferred Solution

Make included default watch files completely configurable (default seems to be ".src/")

Describe Alternatives

Since there is already an option to exclude certain files from watch using "watchIgnoredRegex" it would be convenient to have a "watchAdditionalRegex" with contains an array of RegEx which matches additional files to be watched.

Related Code

No response

Additional Information

No response

[michaelplazek]

+1

[George-Payne]

If anyone would like a temporary workaround, it's possible to add watch files via a custom output target.

watchAdditionalRegex.ts

import {
    CompilerCtx,
    Config,
    OutputTargetCustom,
} from '@stencil/core/internal';
import { stream, Entry } from 'fast-glob';

export const watchAdditionalRegex = (
    globs: string | string[],
): OutputTargetCustom => ({
    type: 'custom',
    name: 'watchAdditionalRegex',
    async generator(stencilConfig: Config, compilerCtx: CompilerCtx) {
        if (!stencilConfig.watch) return;

        for await (const stats of stream(globs, {
            objectMode: true,
            unique: true,
            absolute: true,
        })) {
            const { path, dirent } = stats as unknown as Entry;
            if (dirent.isFile()) {
                compilerCtx.addWatchFile(path);
            } else if (dirent.isDirectory()) {
                compilerCtx.addWatchDir(path, false);
            }
        }
    },
});

stencil.config.ts

import { Config } from '@stencil/core';
import { watchAdditionalRegex } from './watchAdditionalRegex';

export const config: Config = {
   // ...
    outputTargets: [
        {
            type: 'www',
        },
        watchAdditionalRegex('../watchThis/**/*'),
    ],
  // ...
};

[venkatesh-nagineni]

@George-Payne does workaround still working, it's not watching even it is registered https://codesandbox.io/p/devbox/stencil-web-component-forked-dmnvcc?file=%2Fsrc%2Findex.html%3A16%2C1