Watch mode not always working

[kevin-st]

Summary

Yesterday I was running skott with the --watch flag in the terminal until I noticed that it was not refreshing. I tested both display-mode="file-tree" and "webapp", but neither were working. To rule out it was a Windows only issue, I went to a colleague who works on mac; we tested it on another repository, but they had the same issue.

I then tested my skott example repository (https://github.com/kevin-st/skott-example) on the branch watch-mode (by just commenting some import statement), only to find out that it is working there.

Then I asked yet another colleague and tested it again on some other repository and on their repo it worked without problems.

All repositories vary in size and amount of circular dependencies, but I don't think it has anything to do with this.

Conclusion: We tested 4 different repositories, of which two work as expected.

Reproduction steps

• On the repository https://github.com/kevin-st/skott-example I've added the watch-mode branch;
  1. Run npm install;
  2. Run ./node_modules/.bin/skott ./packages/index.ts --watch and apply a change to the file (e.g. commenting out one of the import statements).

Result: The graph changes.

• I have found another repository on which the graph does not change. It's a private one, but I can add you as a collaborator to it. Let me know if that's okay with you.

Details

From what we've found out, we saw that skott's using @parcel/watcher to watch the changes? In that case it might be possible that issue is not related to skott, but we're not certain of that.

Standard questions

Please answer these questions to help us investigate your issue more quickly:

Question	Answer
skott installed version?	0.33.2
Operating system?	Windows / Mac
Would you consider contributing a PR?
Node.js version (node -v)?	v20.11.0

[antoine-coulon]

Hello @kevin-st,

Thanks for reporting the issue! I'll try to investigate with the repositories you provided me, so please yes add me to the private one 👍

Also, did you notice anything else not working as expected on the watcher or any improvements that would improve the DX? If that's the case I could probably tackle both the bug + the improvements if you have some :)

Thanks!

[kevin-st]

Hi @antoine-coulon

I added you to the repository. It's a pretty old one which is no longer being maintained, so you may encounter quite a lot of warnings when installing everything.

The application is setup with Frontity, a React framework which used WordPress as a headless CMS. It was pretty good, but the Frontity team no longer works on the framework itself; they have moved onto working on the core of Wordpress directly.

That reminds me though - I'm not sure how you'll test the repo, but the problem with Frontity no longer being maintained is that it only works up until React 17 and node v16 iirc, but this is normally only a requirement if you want to run the application, which is not really the situation here I think. Just let me know should this be a problem for you, because I can always check some other repositories if this is the case.

To install the project:

1. Run npm install in the root of the project (note that skott still needs to be added to the dependencies);
2. From the root of the project start up skott e.g. ./node_modules/.bin/skott.cmd ./packages/backup-theme/src/index.js --displayMode="file-tree" --watch;

That should be everything to get started.

Result: when saving the file, the graph doesn't refresh.

In terms of DX/other issues I don't really have anything useful to say atm, I'm okay with how everything is setup, apart from finding out what the cause of this issue is that is 😛

[antoine-coulon]

Hello @kevin-st,

Thanks for adding me to the repository, I just cloned the repository and booted my Windows machine to troubleshoot that. Good news is that I'm able to reproduce the problem both on Windows and MacOS. Also, it seems that switching from

skott ./packages/backup-theme/src/index.js 

to

skott --cwd=./packages/backup-theme/src

shows that latter works on both operating systems so it might not be a @parcel/watcher issue, at least not a cross-platform topic. But now that I'm able to reproduce I'll be able to fix that soon enough, I'll let you know how it goes!

[antoine-coulon]

Hello @kevin-st,

I tested a little bit and it does not seem to be linked to the way skott is attaching watch mode, but the way @parcel/watcher deals with the ignore list. skott is providing .gitignore-d entries to @parcel/watcher in order for it to discard ignored entries by Git.

In your project, you have a .gitignore like:

## ignore .vscode folder
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json

and when I remove the !. directives in that file, the watcher seems to work as expected:

## ignore .vscode folder
.vscode/*

So it seems that having

watcher.subscribe(() => {}, {
  ignoreList: [
    "!**/*.{js,jsx,mjs,cjs,ts,tsx}",
    ".vscode/*",
    "!.vscode/settings.json",
    "!.vscode/tasks.json",
    "!.vscode/launch.json",
    "!.vscode/extensions.json"
  ]
});

is making the watcher discarding everything from the watch mode. In that regard, I might take a closer look at @parcel/watcher way of working with ignoreList and see what is underlying the problem. I might create a @parcel/watcher issue regarding that topic.

Short-term, what you can do is to make skott avoid grabbing the .gitignore including these entries by moving the working directory where skott is executed that is instead of

skott --cwd=./packages --displayMode=file-tree --watch

doing

cd packages && skott --displayMode=file-tree --watch

Note: --cwd option is indeed misleading and I have been discussing that already here. --cwd is just the base directory and does not actually affects the real OS current working directory, hence doing skott --cwd=./packages keeps the current working directory where skott is being run from. If there is a .gitignore file there, skott will grab it.

[kevin-st]

Hi @antoine-coulon

I can confirm what you said. If I remove all negated directives from the .gitignore, then everything works without a problem.
So indeed, either temporarily removing these directives or passing --cwd allows us to bypass the issue.

I understand this is something out of your control, so hopefully they manage to provide a fix for this.
Thanks anyway for finding what's the cause of the issue!