Add --standard-events-inspector flag to theme preview.#7822
Conversation
Add the --standard-events flow to theme dev and wire the option through the dev server context. Prepare assets/standard-events.d.ts in the background, refresh it when possible, create assets/global.d.ts when missing, and create or update assets/jsconfig.json so the new type files are wired in without clobbering unrelated config. Rewrite standard-events runtime URLs to use the dev bundle in HTML and JS content, inject the events inspector at the start of the head element with defer, and cover proxy, local asset, startup, and error-page paths with tests. Also make jsconfig wiring robust when existing configs exclude *.d.ts files by forcing the new definitions through the files list. Co-authored-by: Codex <codex@openai.com>
Use the standard events dev bundle by default in theme dev, while making inspector injection and local type setup explicit opt-in features. Keep the type setup asynchronous so server startup is not blocked. Co-authored-by: OpenAI Codex <codex@openai.com>
Only treat the inspector as already injected when an actual inspector script tag is present, and add a regression test for plain URL strings in inline scripts. Co-authored-by: OpenAI Codex <codex@openai.com>
Remove the --standard-events-types flag and all associated logic (d.ts download, global.d.ts creation, jsconfig.json wiring) from theme dev. This feature was too intrusive for the dev command. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
# Conflicts: # packages/theme/src/cli/commands/theme/dev.ts # packages/theme/src/cli/services/dev.test.ts # packages/theme/src/cli/utilities/theme-environment/proxy.test.ts # packages/theme/src/cli/utilities/theme-environment/theme-environment.test.ts
Remove merge-era mock setup from the theme dev service test now that the Standard Events assertions use the existing dev command test harness. This keeps the test focused on the new option plumbing without duplicating unrelated setup. Co-authored-by: OpenAI Codex <codex@openai.com>
| if (proxyResponse.status < 400) { | ||
| outputDebug(`Proxy status: ${proxyResponse.status}. Returning proxy response.`) | ||
|
|
||
| if ((proxyResponse.headers.get('content-type') ?? '').includes('text/html')) { |
There was a problem hiding this comment.
Yeah, this seems too broad. Every text/html content type response would be affected here?
|
just checking that you're aware: it looks like this PR also adds |
|
:Tophat: with flag shows inspector 
Without flag doesn't |
bashu-shopify
left a comment
bashu-shopify
left a comment
There was a problem hiding this comment.
apart from the if-condition in tryProxyRequest, this looks good.
Regenerate the oclif manifest and README to include the new --standard-events-inspector flag, and remove the unused export on standardEventsBaseUrl flagged by knip. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Gate the proxy-fallback patching on ctx.options.standardEventsInspector so the normal theme dev proxy path returns raw HTML as before, avoiding an unintended behavior change for responses unrelated to the inspector. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
isaacroldan
left a comment
isaacroldan
left a comment
There was a problem hiding this comment.
Ok from the dev-experience side
| port, | ||
| open: options.open, | ||
| liveReload: options['live-reload'], | ||
| standardEventsDevBundle: options['standard-events-inspector'], |
There was a problem hiding this comment.
Non blocking but if DevBundle always follow flag behaviour, does it need to be an option here?
There was a problem hiding this comment.
i think we can leave it bc in the future I would want to turn it on independently
| renderDevSetupProgress() | ||
| .then(serverStart) | ||
| .then(() => { | ||
| .then(async () => { |
There was a problem hiding this comment.
I think it's leftover from a refactor, removing
e479f7f to
c9a689f
Compare
There was a problem hiding this comment.
Looks good, @frandiox one change I made was made standardEventsDevBundle true only when standardEventsInspector flag is passed. In the original PR standardEventsDevBundle was always true
Nvm intention decision from https://shopify.slack.com/archives/C099734SGN7/p1776188523891689?thread_ts=1776186844.346429&cid=C099734SGN7
- Wrap the proxy-fallback condition to satisfy prettier/max-len - Regenerate shopify.dev docs so --standard-events-inspector is documented Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
c9a689f to
babb7f4
Compare
4 participants
WHY are these changes introduced?
We are releasing standard storefront events and actions.
WHAT is this pull request doing?
Add a new flag to inject UI during development that helps debug events and actions.
How to test your changes?
Run
shopify theme dev --standard-events-inspectorin Horizon v4. You should see a floating window like the following:Post-release steps
Checklist
patchfor bug fixes ·minorfor new features ·majorfor breaking changes) and added a changeset withpnpm changeset add