App watcher - Build extensions

[isaacroldan]

WHY are these changes introduced?

App watcher now has the responsibility of building extensions when they change.

For extensions that use ESBuild, it handles that using using contexts.

Having a unified place for watching and building extensions during dev is very convenient, as the events from here can be used by the different processes running during dev:

• Legacy partners draft update
• New management api updates
• Previewable extensions using the dev console
• ...

WHAT is this pull request doing?

• The App Watcher will now build extensions:
  • At start, build all extensions
  • On every change, rebuild the affected extensions.
• Remove the UpdatedSource event type for the watcher.
• For extensions using ESBuild: use esbuild contexts to handle incremental builds (which means: faster builds)
• All build artifacts are generated in the local .shopify directory by default.
• Update the new dev flow to use this new feature.

How to test your changes?

Having an app with different extensions (specially ui-extensions and functions):

• Run pnpm shopify demo watcher --path <path_to_app>
• Open the .shopify/bundle directory, you should see all the built extensions.
• Make a change in an extension with source code, it should update the built artifact.

Alternative: Having an org in app-management, run dev with the new API.

Post-release steps

Measuring impact

How do we know this change was effective? Please choose one:

• [ ] n/a - this doesn't need measurement, e.g. a linting rule or a bug-fix
• [ ] Existing analytics will cater for this addition
• [ ] PR includes analytics changes to measure impact

Checklist

• [ ] I've considered possible cross-platform impacts (Mac, Linux, Windows)
• [ ] I've considered possible documentation changes

[github-actions[bot]]

We detected some changes at either packages/*/src or packages/cli-kit/assets/cli-ruby/** and there are no updates in the .changeset. If the changes are user-facing, run "pnpm changeset add" to track your changes and include them in the next release CHANGELOG.

[github-actions[bot]]

Coverage report

St.:grey_question:	Category	Percentage	Covered / Total
🟡	Statements	72.5% (+0.22% 🔼)	8461/11671
🟡	Branches	68.86% (+0.15% 🔼)	4108/5966
🟡	Functions	71.9% (+0.14% 🔼)	2224/3093
🟡	Lines	72.83% (+0.25% 🔼)	8000/10984

Show new covered files 🐣

St.:grey_question:	File	Statements	Branches	Functions	Lines
🟢	... / app-event-watcher-handler.ts	88.37%	75%	86.67%	88.24%
🟢	... / app-watcher-esbuild.ts	90.32%	100%	84.62%	93.1%

Show files with reduced coverage 🔻

St.:grey_question:	File	Statements	Branches	Functions	Lines
🟢	... / app-diffing.ts	100%	85.71% (-14.29% 🔻)	100%	100%
🟡	... / app-event-watcher.ts	72.73% (-11.89% 🔻)	50% (-20% 🔻)	77.78% (-7.22% 🔻)	77.55% (-5.43% 🔻)
🟢	... / file-watcher.ts	82.19% (+2.19% 🔼)	71.43% (-2.76% 🔻)	76.47% (-0.45% 🔻)	84.85% (+2.71% 🔼)

Test suite run success

1922 tests passing in 874 suites.

Report generated by 🧪jest coverage report action from 7273affdbe857b8604bdd34ea4df4d2b35760e7d

[github-actions[bot]]

This PR seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action. → If there's no activity within a week, then a bot will automatically close this. Thanks for helping to improve Shopify's dev tooling and experience.

[github-actions[bot]]

We detected some changes at packages/*/src and there are no updates in the .changeset. If the changes are user-facing, run "pnpm changeset add" to track your changes and include them in the next release CHANGELOG.

[isaacroldan]

/snapit

[github-actions[bot]]

🫰✨ Thanks @isaacroldan! Your snapshot has been published to npm.

Test the snapshot by intalling your package globally:

pnpm i -g @shopify/[email protected]

After installing, validate the version by running just shopify in your terminal If the versions don't match, you might have multiple global instances installed. Use which shopify to find out which one you are running and uninstall it.