[Themes] PoC Hot Reload for OSE

[frandiox]

wip

Goals: support hot reload for Online Store Editor and Theme Preview.

The changes in this repo are:

• Move the hot reload decisions from the server to the client. For example, instead of sending an event for "CSS update" from the server to the client, now the server sill simply say "here, this file has been changed". The client will check the extension of the file and decide to perform a CSS update, or something else.
• The server now emits 2 events per file: once when the file is updated locally, and another one when it's uploaded to the cloud. This means that the client can choose to refresh earlier or later, depending of what it needs. For example, when running on localhost, hot reload will happen as soon as a file is updated locally because we can access the content. However, in OSE, we will wait for the "cloud sync" event before triggering a refresh.
• Implement handling for events in the client for multiple situations: CLI, OSE, Theme Preview.

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🟡	Statements	74.53% (-0.71% 🔻)	8540/11459
🟡	Branches	70.31% (-0.29% 🔻)	4165/5924
🟡	Functions	74.06% (-0.77% 🔻)	2241/3026
🟡	Lines	75.07% (-0.73% 🔻)	8077/10759

Show new covered files 🐣

St.❔	File	Statements	Branches	Functions	Lines
🟢	... / bundler.ts	100%	100%	100%	100%

Show files with reduced coverage 🔻

St.❔	File	Statements	Branches	Functions	Lines
🟢	... / app.test-data.ts	91.44% (-1.07% 🔻)	93.4%	81.25% (-2.5% 🔻)	90.86% (-1.14% 🔻)
🟢	... / release.ts	93.33%	58.33% (-11.67% 🔻)	75%	92.86%
🟢	... / extension-to-toml.ts	77.78% (-10.46% 🔻)	75%	100%	100%
🟢	... / app-event-watcher.ts	90.67% (-4.07% 🔻)	80% (-10.91% 🔻)	90.48%	95.52% (-3.01% 🔻)
🟢	... / app-watcher-esbuild.ts	83.33% (-5.56% 🔻)	87.5%	80% (-6.67% 🔻)	87.88% (-6.06% 🔻)
🔴	... / dev-session.ts	4.21% (-81.75% 🔻)	0% (-68.33% 🔻)	4.35% (-87.32% 🔻)	4.76% (-88.17% 🔻)
🟢	... / binaries.ts	96.36% (+0.98% 🔼)	88% (+2.81% 🔼)	88.89% (-3.97% 🔻)	96.36% (+0.98% 🔼)
🟡	... / build.ts	74.49% (-0.26% 🔻)	61.36%	75.76%	72.22% (-0.31% 🔻)
🟢	... / Replay.tsx	91.67% (-0.33% 🔻)	69.23%	100%	91.3% (-0.36% 🔻)
🔴	... / json-schema.ts	25% (-3% 🔻)	22.22%	33.33%	25% (-3% 🔻)
🔴	... / app-management-client.ts	20.33% (-4.99% 🔻)	9.52% (-3.73% 🔻)	22.11% (-4.49% 🔻)	18.75% (-5.23% 🔻)
🔴	... / environment.ts	15.38% (-6.04% 🔻)	0% (-18.18% 🔻)	33.33% (-9.52% 🔻)	16.67% (-6.41% 🔻)
🟢	... / json-schema.ts	91.67% (-0.19% 🔻)	81.08% (-0.97% 🔻)	100%	91.57% (-0.2% 🔻)
🟡	... / notifications-system.ts	65.52% (-1.15% 🔻)	62.3% (-3.38% 🔻)	88.89% (-0.58% 🔻)	73.61% (-0.71% 🔻)
🟡	... / path.ts	76.67% (-2.64% 🔻)	72.22% (+7.22% 🔼)	75%	77.78% (-2.99% 🔻)

Test suite run success

1946 tests passing in 885 suites.

Report generated by 🧪jest coverage report action from 38bd7c1

[frandiox]

/snapit

[github-actions]

🫰✨ Thanks @frandiox! 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.