Watch assets for hot reloading

[elanalynn]

WHY are these changes introduced?

Related to https://app.graphite.com/github/pr/shop/world/666583
Issue https://github.com/shop/issues-admin-extensibility/issues/2461

WHAT is this pull request doing?

I opened https://app.graphite.com/github/pr/shop/world/666583 in web to react to updated timestamps on assets served from the dev server, but we were still not watching new files. This PR

How to test your changes?

Demo of testing two images with name changes:
https://share.descript.com/view/bV9Pt8wvK6F

• Check out this branch in CLI: 04-30-watch_assets_for_hot_reloading
• Check out 04-29-preserve_timestamp_on_asset_src_and_bust_cache_when_asset_changes in admin-web
• Create an app home project or clone ui-ext-hosted-jam (in ShopifyPlayground)
• Create an assets directory in the app-home extension and add a couple images

• Update the extension toml with the assets config

[[extensions.targeting]]
module = "./src/Home.jsx"
target = "admin.app.home.render"
assets = "./assets"

• Add a couple images to a page like this

<s-grid gridTemplateColumns="1fr 1fr" gap="base">
  <s-image src="assets/dog.jpg" alt="dog" />
  <s-image src="assets/squirrel.jpg" alt="squirrel" />
</s-grid>

• change the image names and confirm that the page reloads on every change (see video)

Post-release steps

Checklist

• I've considered possible cross-platform impacts (Mac, Linux, Windows)
• I've considered possible documentation changes
• I've considered analytics changes to measure impact
• The change is user-facing — I've identified the correct bump type (patch for bug fixes · minor for new features · major for breaking changes) and added a changeset with pnpm changeset add

[elanalynn]

• Watch assets for hot reloading #7437 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[vividviolet]

This won't work for extensions sharing assets. Maybe we could inspect the extension's config and see if the file path matches anything that was configured for the extension?

[Copilot]

Pull request overview

This PR improves the dev file-watcher so newly created files (especially assets) can be attributed to the correct extension even when they weren’t present in the initial “watched files” snapshot, enabling more reliable hot reloading behavior.

Changes:

• Add a fallback path-to-extension ownership resolution when an event arrives for a file not present in the initial extensionWatchedFiles snapshot.
• Attempt ownership resolution by checking configured extension_points[].assets directories first, then extension directory containment.
• Add tests covering the new “unknown file” directory-containment fallback behavior.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
packages/app/src/cli/services/dev/app-events/file-watcher.ts	Adds fallback extension ownership detection for newly created/unknown files (assets dirs + extension dir containment).
packages/app/src/cli/services/dev/app-events/file-watcher.test.ts	Adds tests validating the new fallback behavior for new files under an extension dir and ignored paths.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[melissaluu]

@vividviolet what do you think about this? It seems like we actually don't support watching external folders outside of the extension folder ATM so a shared asset folder won't actually be watched.