-
-
Notifications
You must be signed in to change notification settings - Fork 2.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
refactor: dev overlay to make it easier to work with VT #8966
Conversation
🦋 Changeset detectedLatest commit: 89c96f8 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 |
declare global { | ||
interface HTMLElementTagNameMap { | ||
'astro-dev-overlay': AstroDevOverlay; | ||
'astro-dev-overlay-window': DevOverlayWindow; | ||
'astro-dev-overlay-plugin-canvas': DevOverlayCanvas; | ||
'astro-dev-overlay-tooltip': DevOverlayTooltip; | ||
'astro-dev-overlay-highlight': DevOverlayHighlight; | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I had forgotten about this thing, it's quite neat.
⚖️ Bundle Size CheckLatest commit: 89c96f8
|
const [ | ||
{ loadDevOverlayPlugins }, | ||
{ default: astroDevToolPlugin }, | ||
{ default: astroAuditPlugin }, | ||
{ default: astroXrayPlugin }, | ||
{ AstroDevOverlay, DevOverlayCanvas }, | ||
{ DevOverlayCard }, | ||
{ DevOverlayHighlight }, | ||
{ DevOverlayTooltip }, | ||
{ DevOverlayWindow }, | ||
] = await Promise.all([ | ||
// @ts-expect-error | ||
import('astro:dev-overlay'), | ||
import('./plugins/astro.js'), | ||
import('./plugins/audit.js'), | ||
import('./plugins/xray.js'), | ||
import('./overlay.js'), | ||
import('./ui-library/card.js'), | ||
import('./ui-library/highlight.js'), | ||
import('./ui-library/tooltip.js'), | ||
import('./ui-library/window.js'), | ||
]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Moved the imports into the DOMContentLoaded
, that way we really do the big things outside of the page load
view-transition-name: astro-dev-overlay; | ||
display: contents; | ||
} | ||
|
||
::view-transition-old(astro-dev-overlay), | ||
::view-transition-new(astro-dev-overlay) { | ||
animation: none; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All of this is required to ensure animations don't affect the dev overlay, otherwise it might move, get faded away etc
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice refactors!
Changes
The diff looks really messy, but to summarize the changes here:
Testing
Tests should pass!
Docs
N/A, just a bug fix. We could have a section on making your plugin work with VT, though...