Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
astro-vtbot
Advanced tools
astro-vtbot - npm Package Compare versions
Comparing version 1.8.8 to 1.9.0
@@ -89,2 +89,9 @@ const PERSIST_ATTR = "data-astro-transition-persist"; | ||
| }; | ||
| const swapFunctions = { | ||
| deselectScripts, | ||
| swapRootAttributes, | ||
| swapHeadElements, | ||
| swapBodyElement, | ||
| saveFocus | ||
| }; | ||
| const swap = (doc) => { | ||
@@ -104,4 +111,5 @@ deselectScripts(doc); | ||
| swapBodyElement, | ||
| swapFunctions, | ||
| swapHeadElements, | ||
| swapRootAttributes | ||
| }; |
@@ -27,10 +27,11 @@ import { defineToolbarApp } from 'astro/toolbar'; | ||
| <h1>The Bag of Tricks for Astro's View Transitions</h1> | ||
| <p>The Bag of Tricks offers components to simplify view transitions for you. Plus: Detailed info about Astro's view transitions and the View Transition API in general.</p> | ||
| <p>The Bag offers reusable components, tips & tricks plus detailed info about Astro's view transitions and the View Transition API in general.</p> | ||
| <p>Visit <a href="https://events-3bg.pages.dev">The Bag's Website</a> and <a href="https://github.com/martrapp/astro-vtbot">star the Github project</a> to support this work.</p> | ||
| <h2>!!! New !!! The Inspection Chamber</h2> | ||
| <h2>The Inspection Chamber</h2> | ||
| <img style="float:right; border-radius: 50%; border: 8px dashed #8888; | ||
| mask-image: radial-gradient(ellipse at center, white 35%, transparent 71%);" | ||
| src=${imgSrc.src} alt="Reopen the Inspection Chamber" /> | ||
| <p>Examine every detail of your view transitions! Put them through their paces! Step through frames and discover how the elements morph.</p><hr> | ||
| <p><span id="inspection-chamber-status">The Bag is cool</span><astro-dev-toolbar-button id="inspection-chamber-button">I love the Bag of Tricks!</astro-dev-toolbar-button></p> | ||
| <p>Put your view transitions through their paces!</p><hr> | ||
| <p><span id="inspection-chamber-status">If you see this text, bad things happened. If you got here in a web-container, like e.g. Stackblitz, try to open the preview of your project in a new tab. If this does not help, <a href="https://github.com/martrapp/astro-vtbot/issues/new/choose">please file a bug report</a> with the related errors from the browser's console.</span></p><p>You notice a little sign near the power button of The Chamber: | ||
| <astro-dev-toolbar-button id="inspection-chamber-button">Out of Order</astro-dev-toolbar-button></p> | ||
| <style> | ||
@@ -71,3 +72,3 @@ a { | ||
| if (options.state) { | ||
| return; | ||
| const me = document.querySelector('astro-dev-toolbar')! | ||
@@ -79,2 +80,3 @@ .shadowRoot!.querySelector('astro-dev-toolbar-app-canvas[data-app-id="vtbot"]')! | ||
| return; | ||
| if (!document.startViewTransition) { | ||
@@ -81,0 +83,0 @@ status.textContent = 'Your browser does not support view transitions. You notice a little sign near the power button of The Chamber:'; |
@@ -6,3 +6,3 @@ { | ||
| }, | ||
| "version": "1.8.8", | ||
| "version": "1.9.0", | ||
| "description": "The 👜 Bag of Tricks ✨ for Astro's View Transitions", | ||
@@ -79,2 +79,3 @@ "homepage": "https://events-3bg.pages.dev/", | ||
| "dependencies": { | ||
| "@vtbag/element-crossing": "^1.0.0", | ||
| "@vtbag/inspection-chamber": "^1.0.10" | ||
@@ -84,9 +85,9 @@ }, | ||
| "@astrojs/check": "^0.9.3", | ||
| "@astrojs/starlight": "^0.26.1", | ||
| "@astrojs/starlight": "^0.26.3", | ||
| "@changesets/changelog-github": "0.5.0", | ||
| "@changesets/cli": "^2.27.7", | ||
| "@changesets/cli": "^2.27.8", | ||
| "@playwright/test": "^1.46.1", | ||
| "@types/dom-view-transitions": "^1.0.5", | ||
| "@types/node": "^22.5.0", | ||
| "astro": "^4.14.5", | ||
| "@types/node": "^22.5.4", | ||
| "astro": "^4.15.3", | ||
| "prettier": "^3.3.3", | ||
@@ -93,0 +94,0 @@ "prettier-plugin-astro": "^0.14.1", |
@@ -18,18 +18,11 @@ No, its **_NOT_** a roBOT 🤖, its a 👜 <b>B</b>ag <b>o</b>f <b>T</b>ricks!✨ | ||
| New, improved version of the inspection chamber. | ||
| This release integrates `@vtbag/element-crossing` as `<ElementCrossing/>` This is a component for those of you who experiment with CSS-only cross-document view transitions and miss a way to preserve state of HTML elements across navigation: Transfer selected element state to the other side! | ||
| For details, see the [CHANGELOG](https://github.com/martrapp/astro-vtbot/blob/main/CHANGELOG.md) | ||
| ## Recently Learned Tricks ## | ||
| V1.8.7 brought a small fix for the `<LoadingIndicator>`. | ||
| > Inspection Chamber: See your view transitions like never before: examine every detail, reveal, debug, and optimize! Now, drill down into the effects of each pseudo-element introduced by the view transition API and even selectively toggle individual animations to better understand what’s happening! Summon the Inspection Chamber as a component ([<InspectionChamber />](https://events-3bg.pages.dev/library/InspectionChamber/)) or [install The Bag as an integration!](hhttps://events-3bg.pages.dev/library/Installation/#installing-as-an-astro-integration) and access the Chamber from the **devToolbar**! | ||
| V1.8.5 throws a colorful mix of things into the bag. Most notable is support for Starlight's persisted sidebar state, but also various improvements to the chamber and view transition name encoding. See the changelog for details! | ||
| > V1.8.4 introduced an updated version of the Inspection Chamber, now packed with new, shiny displays and knobs. The Chamber is steadily maturing, evolving from a cool prototype into a cool, reliable tool. | ||
| > See your view transitions like never before: examine every detail, reveal, debug, and optimize! Now, drill down into the effects of each pseudo-element introduced by the view transition API and even selectively toggle individual animations to better understand what’s happening! | ||
| > Summon the Inspection Chamber as a component ([<InspectionChamber />](https://events-3bg.pages.dev/library/InspectionChamber/)) or [install The Bag as an integration!](hhttps://events-3bg.pages.dev/library/Installation/#installing-as-an-astro-integration) and access the Chamber from the devToolbar! | ||
| > Starlight Support: Ever wanted to see what your Starlight site looks like with view transitions enabled? Follow [these steps](https://events-3bg.pages.dev/jotter/starlight/guide/) to get rid of full page loads and make your Starlight site look like a SPA! | ||
@@ -36,0 +29,0 @@ |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.72%
130825
- Number of package files
- increased by2.78%
74
- Lines of code
- increased by0.88%
1488
Worsened metrics
- Dependency count
- increased by100%
2
- Number of lines in readme file
- decreased by-6.67%
98
Dependency changes
+ Added@vtbag/element-crossing@1.0.4(transitive)