How to watch component TypeScript file changes in dev mode?

[codyburleson]

I created a new element, but I can't seem to get my changes to be watched. As described in the Develop/Setup page, under the section, Development Workflow, I run the command, npm start. Once started, I navigate to my new element's demo page at: http://localhost:8000/demo/pfe-wizard/. It renders as expected. If I change the file demo/pfe-wizard.html, the change registers with the listener and then change is rendered in my web browser. If I change the component code in elements/pfe-wizard/pfe-wizard.ts, however, the change is not registered. All I can do to see the change is stop the dev server and restart it. Does anyone have an idea why I'm unable to work on my actual component code in the watch mode? What am I missing?

Note that it's the same story if I use npm run dev instead of npm run start. I'm working directly in a fork of the patternfly-elements repo.

[bennypowers]

try npm run clean before starting the dev server

[bennypowers]

also note this is all getting some p. big changes in #2059

[codyburleson]

try npm run clean before starting the dev server

Thanks for the suggestion, but it did not work for me. Changes to my element's ts file (or any of the Patternfly elements in the whole repo for that matter) are not being watched. Only the HTML files in the /demo directory for each element seem to be watched for changes.

[codyburleson]

Attached is the precise procedure I have used, starting from forking the repo to my attempt to change an element using both npm run dev and npm start...

2022-07-22 Patternfly Watch Problem.pdf

This same general procedure actually works for you? I wonder if there ids some way that you may be working differently.

To be clear: I SHOULD expect to have changes to the .ts element files watched and reflected in the UI without stopping and restarting the dev server, right? Are you rebuilding or restarting when you make component changes?

[bennypowers]

Thanks I've reproduced this locally. It seems to be a recent regression. I'll investigate

[codyburleson]

I checked out the Lit Element TypeScript starter and found that you can effectively "watch" typescript file changes in their setup by running npm run build:watch and then also npm serve at the same time. In most of the projects I have experience with, you could always do both by running only one thing, but even if we had to run two, as in Lit's TypeScript starter, that would be OK (though it took me a while to figure it out, so better README documentation would have helped). I could not find a build:serve in the Patternfly Elements project, however, so I couldn't figure out a similar approach of running to things at once to get it to work. Note that I reinstalled everything on Windows just to be sure it was not an issue that was only within my Linux Mint VM and I had no better results on Windows.