fix(dev-toolbar): keep app canvas content across client-side navigation by SudoDevStudio · Pull Request #17905 · withastro/astro

SudoDevStudio · 2026-09-04T01:22:23Z

Changes

A dev toolbar app's UI is destroyed on the first client-side navigation and never restored — silently, with no error and app.status still ready.
DevToolbarCanvas.connectedCallback() assigns this.shadowRoot.innerHTML, which replaces rather than appends, discarding whatever the app rendered into its canvas.
The canvas reconnects on every navigation.
Nothing rebuilds it — initApp() sits behind the hasBeenInitialized guard, so app.init() never runs a second time.
Fix: write the style once in the constructor and drop connectedCallback, which had no other job.
Only DevToolbarCanvas is affected. DevToolbarWindow projects through a <slot> and DevToolbarTooltip rebuilds from its attributes.
Changeset included (patch).

Before	After

Testing

Added third-party app content survives a client-side navigation to packages/astro/e2e/dev-toolbar.test.ts. No new fixture needed — the existing dev-toolbar fixture already has a third-party app, a <ClientRouter /> layout, and linked view-transition-a/b pages.
Confirmed the test catches the bug: passes with the fix, fails without it (toHaveCount: Expected 1, Received 0), passes again once restored.

Docs

changeset-bot · 2026-09-04T01:22:31Z

🦋 Changeset detected

Latest commit: eda7dab

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

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

codspeed · 2026-09-04T01:30:24Z

Merging this PR will not alter performance

✅ 21 untouched benchmarks

_{Comparing SudoDevStudio:fix/toolbar-reinit (eda7dab) with main (3277927)¹}

No successful run was found on main (453c050) during the generation of this report, so 3277927 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

ematipico · 2026-09-10T14:47:36Z

Can you please file a bug report first?

SudoDevStudio · 2026-09-11T03:14:09Z

@ematipico created an issue #17972

ematipico · 2026-09-11T11:01:09Z

+		// Written once per element rather than on every connection. A client-side
+		// navigation re-appends the toolbar into the swapped body, which reconnects
+		// this canvas; rebuilding the shadow root here would discard whatever the
+		// app rendered into it, and `initApp` never runs again to restore it.


You should guard yourself against re-initialisation, since the client router appends it again

ematipico · 2026-09-11T11:01:27Z

+Fixes dev toolbar app canvases discarding their content on every client-side navigation.
+
+`DevToolbarCanvas` rebuilt its shadow root in `connectedCallback`, and a client-side navigation re-appends the toolbar into the swapped body, which reconnects every canvas. Because `initApp()` is guarded by `hasBeenInitialized`, `app.init()` never ran again, so a dev toolbar app's UI was destroyed on the first navigation and stayed gone until a full reload. The style is now written once in the constructor.


That's not the kind of wording we're looking for https://contribute.docs.astro.build/docs-for-code-changes/changesets/#tips-and-examples

This PR contains the following updates: | Package | Change | [Age](https://docs.renovatebot.com/merge-confidence/) | [Confidence](https://docs.renovatebot.com/merge-confidence/) | |---|---|---|---| | [astro](https://astro.build) ([source](https://github.com/withastro/astro/tree/HEAD/packages/astro)) | [`7.3.2` → `7.3.3`](https://renovatebot.com/diffs/npm/astro/7.3.2/7.3.3) | ![age](https://developer.mend.io/api/mc/badges/age/npm/astro/7.3.3?slim=true) | ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/astro/7.3.2/7.3.3?slim=true) | --- ### Release Notes <details> <summary>withastro/astro (astro)</summary> ### [`v7.3.3`](https://github.com/withastro/astro/blob/HEAD/packages/astro/CHANGELOG.md#733) [Compare Source](https://github.com/withastro/astro/compare/astro@7.3.2...astro@7.3.3) ##### Patch Changes - [#17651](withastro/astro#17651) [`504333c`](withastro/astro@504333c) Thanks [@sxzz](https://github.com/sxzz)! - Refactors internal version handling to use a smaller, ESM-native dependency - [#17942](withastro/astro#17942) [`0bc5715`](withastro/astro@0bc5715) Thanks [@matthewp](https://github.com/matthewp)! - Returns appropriate 400 and 404 responses from the image endpoint for invalid and missing local image paths - [#17700](withastro/astro#17700) [`b2222fc`](withastro/astro@b2222fc) Thanks [@winklemad](https://github.com/winklemad)! - Fixes `Astro.preferredLocaleList` returning an empty list when a locale is configured with the object form (`{ path, codes }`) and the browser sends the code with different casing or an underscore, such as `en-US` matching a configured `en-us` - [#17941](withastro/astro#17941) [`394ff79`](withastro/astro@394ff79) Thanks [@matthewp](https://github.com/matthewp)! - Fixes `astro preview --ignore-lock` (and `astro dev --ignore-lock`) being refused when run from an AI agent environment. The flag now starts the server in the foreground instead of erroring, since agent detection only inferred background mode and was never explicitly requested. An explicit `--background` combined with `--ignore-lock` still errors. - [#17928](withastro/astro#17928) [`3277927`](withastro/astro@3277927) Thanks [@ArmandPhilippot](https://github.com/ArmandPhilippot)! - Fixes TypeScript autocompletion for `getImage()` to suggest all available predefined options. - [#17928](withastro/astro#17928) [`3277927`](withastro/astro@3277927) Thanks [@ArmandPhilippot](https://github.com/ArmandPhilippot)! - Fixes a type error in `getImage()` options that allowed passing both `widths` and `densities` at the same time. - [#17857](withastro/astro#17857) [`2637ed1`](withastro/astro@2637ed1) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Improves rendering performance - [#17943](withastro/astro#17943) [`2fc7ce9`](withastro/astro@2fc7ce9) Thanks [@matthewp](https://github.com/matthewp)! - Fixes a WebAssembly error when importing `astro:actions` in tests that run under `@cloudflare/vitest-pool-workers` - [#18018](withastro/astro#18018) [`1b5a234`](withastro/astro@1b5a234) Thanks [@astro-factory](https://github.com/apps/astro-factory)! - Fixes trailing-slash redirect response body pointing to the incoming URL instead of the redirect target. The `location` header was correct, but the HTML body (`<meta http-equiv="refresh">`, `<title>`, and `<a>` tag) contained the original request path without the trailing-slash correction or query string. - [#17905](withastro/astro#17905) [`eaf70fa`](withastro/astro@eaf70fa) Thanks [@SudoDevStudio](https://github.com/SudoDevStudio)! - Fixes custom dev toolbar apps losing their UI after client-side navigation with `<ClientRouter />`. - [#18011](withastro/astro#18011) [`558b301`](withastro/astro@558b301) Thanks [@astro-factory](https://github.com/apps/astro-factory)! - Fixes prerendered Cloudflare pages rendering as `[object Object]` when `nodejs_compat` is enabled in `wrangler.toml` - [#17944](withastro/astro#17944) [`ba08e35`](withastro/astro@ba08e35) Thanks [@matthewp](https://github.com/matthewp)! - Fixes a regression in `astro dev` where writes outside the module graph (for example, `@astrojs/cloudflare`'s `.wrangler/state` files) invalidated the middleware on every request, causing repeated SSR reloads. Such writes no longer invalidate the middleware. - [#17531](withastro/astro#17531) [`ae837db`](withastro/astro@ae837db) Thanks [@danilloestrela](https://github.com/danilloestrela)! - Updates `svgo` to `4.0.2` to resolve a security advisory - [#17953](withastro/astro#17953) [`dbbf10e`](withastro/astro@dbbf10e) Thanks [@astro-factory](https://github.com/apps/astro-factory)! - Fixes a one-time page reload shortly after the first load on cold dev-server starts when a project has framework components imported from MDX content entries. MDX files are now included in the dev dependency pre-bundling scan, so their framework dependencies are bundled up front instead of being discovered (and reloaded for) at runtime. - [#17955](withastro/astro#17955) [`4e8ad9a`](withastro/astro@4e8ad9a) Thanks [@matthewp](https://github.com/matthewp)! - Improves dev server startup time. The content config and dev server app module graphs now begin compiling during server creation without blocking the server from listening. Request handling waits for the shared setup result when needed, cutting `astro dev` ready time by roughly a third on projects with a content config. - [#17960](withastro/astro#17960) [`9838049`](withastro/astro@9838049) Thanks [@Chy-Zaber-Bin-Zahid](https://github.com/Chy-Zaber-Bin-Zahid)! - Improves the diagnostics of some Astro errors. - [#17998](withastro/astro#17998) [`0e5478d`](withastro/astro@0e5478d) Thanks [@astro-factory](https://github.com/apps/astro-factory)! - Fixes SVG `<style>` elements nested inside `<defs>` or other container elements not being hashed for CSP - [#17994](withastro/astro#17994) [`80f9f1d`](withastro/astro@80f9f1d) Thanks [@astro-factory](https://github.com/apps/astro-factory)! - Fixes `experimental.incrementalBuild` restoring pages with stale CSS after a preprocessor partial changes or missing original images referenced by restored pages - [#17889](withastro/astro#17889) [`8ae6b46`](withastro/astro@8ae6b46) Thanks [@ajfAfg](https://github.com/ajfAfg)! - Fixes a bug where the dev server stripped the configured `base` from URLs that only share a prefix with it. With `base: '/s'`, requests to `/src/...` were rewritten to `/rc/...` and failed, breaking those pages during development. - [#17980](withastro/astro#17980) [`cfccafa`](withastro/astro@cfccafa) Thanks [@gameroman](https://github.com/gameroman)! - Improves JSDoc for fonts api - [#17953](withastro/astro#17953) [`dbbf10e`](withastro/astro@dbbf10e) Thanks [@astro-factory](https://github.com/apps/astro-factory)! - Fixes CSS HMR for framework components rendered through content entries after `ClientRouter` navigation - [#17970](withastro/astro#17970) [`0b4dc3a`](withastro/astro@0b4dc3a) Thanks [@matthewp](https://github.com/matthewp)! - Improves serialization of transition animation values in generated CSS - [#17999](withastro/astro#17999) [`30ef3cb`](withastro/astro@30ef3cb) Thanks [@astro-factory](https://github.com/apps/astro-factory)! - Fixes content collection HMR not updating prerendered pages when an adapter enables a separate prerender environment (e.g. `@astrojs/cloudflare` with `prerenderEnvironment: 'node'`) - [#18002](withastro/astro#18002) [`312ab49`](withastro/astro@312ab49) Thanks [@shoutoutuoadi325](https://github.com/shoutoutuoadi325)! - Fixes redirect targets being corrupted when a dynamic route parameter value contains `$` replacement patterns like `$&` - [#17937](withastro/astro#17937) [`e294953`](withastro/astro@e294953) Thanks [@matthewp](https://github.com/matthewp)! - Fixes a bug where the `glob()` content loader kept stale entries in the data store after the last file in a collection was deleted. Empty collections are now pruned correctly, and the file watcher is registered in dev so the first file added to an empty collection is picked up without a restart. - [#17945](withastro/astro#17945) [`750b4db`](withastro/astro@750b4db) Thanks [@matthewp](https://github.com/matthewp)! - Pre-bundles renderer server entrypoints and the default console logger during dev so they are included in the initial optimization pass, preventing a mid-request re-optimization that could crash the dev server on Cloudflare (workerd). </details> --- ### Configuration 📅 **Schedule**: (UTC) - Branch creation - At any time (no schedule defined) - Automerge - At any time (no schedule defined) 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate CLI](https://github.com/renovatebot/renovate).

SudoDevStudio added 2 commits September 3, 2026 00:22

fix(dev-toolbar): keep app canvas content across client-side navigation

51e397c

fix(dev-toolbar): keep app canvas content across client-side navigation

a41b08d

github-actions Bot added the pkg: astro Related to the core `astro` package (scope) label Sep 4, 2026

SudoDevStudio and others added 4 commits September 3, 2026 21:45

Merge branch 'main' into fix/toolbar-reinit

484ec0a

Merge branch 'main' into fix/toolbar-reinit

3b3fbcb

fix(dev-toolbar): updates

812bd6d

Merge branch 'main' into fix/toolbar-reinit

0ba4458

ematipico requested changes Sep 11, 2026

View reviewed changes

SudoDevStudio and others added 2 commits September 11, 2026 09:05

fix(dev-toolbar): changes

1036c30

Merge branch 'main' into fix/toolbar-reinit

eda7dab

ematipico approved these changes Sep 11, 2026

View reviewed changes

ematipico merged commit eaf70fa into withastro:main Sep 11, 2026
29 checks passed

astrobot-houston mentioned this pull request Sep 11, 2026

[ci] release #17939

Merged

Navigation Menu

Repository navigation

fix(dev-toolbar): keep app canvas content across client-side navigation - #17905

fix(dev-toolbar): keep app canvas content across client-side navigation#17905
ematipico merged 8 commits into
withastro:mainfrom
SudoDevStudio:fix/toolbar-reinit

SudoDevStudio commented Sep 4, 2026 •

edited by ematipico

Loading

Uh oh!

changeset-bot Bot commented Sep 4, 2026 •

edited

Loading

Uh oh!

codspeed Bot commented Sep 4, 2026 •

edited

Loading

Uh oh!

ematipico commented Sep 10, 2026

Uh oh!

SudoDevStudio commented Sep 11, 2026

Uh oh!

ematipico Sep 11, 2026

Uh oh!

ematipico Sep 11, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		Fixes dev toolbar app canvases discarding their content on every client-side navigation.

		`DevToolbarCanvas` rebuilt its shadow root in `connectedCallback`, and a client-side navigation re-appends the toolbar into the swapped body, which reconnects every canvas. Because `initApp()` is guarded by `hasBeenInitialized`, `app.init()` never ran again, so a dev toolbar app's UI was destroyed on the first navigation and stayed gone until a full reload. The style is now written once in the constructor.

Conversation

SudoDevStudio commented Sep 4, 2026 • edited by ematipico Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Testing

Docs

Uh oh!

changeset-bot Bot commented Sep 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

codspeed Bot commented Sep 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging this PR will not alter performance

Footnotes

Uh oh!

ematipico commented Sep 10, 2026

Uh oh!

SudoDevStudio commented Sep 11, 2026

Uh oh!

ematipico Sep 11, 2026

Choose a reason for hiding this comment

Uh oh!

ematipico Sep 11, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

SudoDevStudio commented Sep 4, 2026 •

edited by ematipico

Loading

changeset-bot Bot commented Sep 4, 2026 •

edited

Loading

codspeed Bot commented Sep 4, 2026 •

edited

Loading