hmr script

[TalDerei]

references #59

watch-and-repack.sh script simulates hot module replacement (HMR) by using fswatch to detect changes in the penumbra-zone/web repository. I think the script can be configured to optionally use the watch capabilities of tsc. When changes are detected, the script performs the following actions in sequence:

1. triggers pack-public.sh and repacks the packages.
2. installs the tarballs as dependencies in prax.
3. reloads webpack.

this process was tricky to set up because fswatch was initially continuously triggering the repack process because the repack itself was causing changes that fswatch picked up, leading to an infinite loop.

---

to use the prax dev script

(0) enable script permissions in penumbra-zone/web with chmod +x pack-public.sh and in prax-wallet/web withchmod +x watch-and-repack.sh.

(1) set the environment variables PENUMBRA_ZONE_WEB_PATH and PRAX_REPO_PATH with relative paths.

(2) remove npm dependencies from prax-wallet/apps/extension/package.json and any other local packages, e.g.

    "@penumbra-zone/bech32m": "^6.1.0",
    "@penumbra-zone/client": "^8.0.0",
    "@penumbra-zone/crypto-web": "^5.0.0",
    "@penumbra-zone/getters": "^8.0.0",
    "@penumbra-zone/keys": "^4.1.0",
    "@penumbra-zone/perspective": "^6.0.0",
    "@penumbra-zone/protobuf": "^5.1.0",
    "@penumbra-zone/query": "^6.0.0",
    "@penumbra-zone/services": "^6.0.0",
    "@penumbra-zone/storage": "^6.0.0",
    "@penumbra-zone/transport-chrome": "^4.0.0",
    "@penumbra-zone/transport-dom": "^7.1.0",
    "@penumbra-zone/types": "^9.0.0",
    "@penumbra-zone/wasm": "^9.0.0",

(3) execute pnpm install.

(4) execute pnpm run watch-and-repack, and it will wait for changes in penumbra-zone/web before starting the execution process.

---

demo

hmr.mov

[changeset-bot]

⚠️ No Changeset found

Latest commit: fa7f0d3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[turbocrime]

some negative things here. we should pair on this

[turbocrime]

pkill is not directory constrained. in scripts you should only kill by known pid or job control.

it should be possible to signal webpack to reload without killing it

[TalDerei]

I originally was trying to reload webpack, but changes only seemed to propagate when webpack was killed and then reloaded with pnpm dev

[TalDerei]

pkill uses pattern matching under the hood, so not being directory constrained isn't really relevant here. It's true that it will terminate any process matching the pattern regardless of the current directory, so if there are multiple webpack dev server instances running, pkill -f "pnpm run dev" will terminate all of them.

I used a unique pattern,webpack-prax-dev-server which only terminates webpack in prax.

[TalDerei]

will work on the webpack because it currently seems to spawn a new instance for every refresh, consuming my system memory?

[turbocrime]

webpack should have a way to output a pid, or a way to instruct it to reload modules. and if that isn't feasible it should be wrapped in something that can. pkill is the wrong approach

[TalDerei]

webpack has a built-in hot module replacement dev feature (https://webpack.js.org/guides/hot-module-replacement/), and we may be able to configure webpack.config.ts to use HMR, but it seems tricky.

I instead modified the relevant function to use kill over pkill for a specific pid running on a specified port, which prevents spawning the extraneous webpack processes above.

reload_webpack() {
  # Find the PID of the actively running webpack process 
  WEBPACK_PID=$(lsof -t -i:5175) 

  if [ -n "$WEBPACK_PID" ]; then
    kill -9 $WEBPACK_PID
  fi
  
  (cd "$PRAX_REPO_PATH" && pnpm run dev &)
}

Actually, sorry see this is still in progress, my bad

[turbocrime]

still think there is a better way to acquire webpack pid but approving