7b4f284020
* feat(toolbar): Add a `astro:toolbar` module * fix: use entrypoint * feat: add new shape for defining toolbar apps * fix: types * feat(toolbar): Add helpers features (#10667) * feat(toolbar): Add helpers features * fix: consistent payloads and naming * chore: changeset * nit: rename eventTarget to app * feat: add server-side helpers * test: update test to use new APIs * fix: types * nit: erikaaaaa * feat: add new event * Update .changeset/khaki-pianos-burn.md * test: use data to create text * Apply suggestions from code review Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev> * nit: use diff * nit: documentation effort * test: fix --------- Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev> * nit: small changes to helpers * nit: update changeset * fix: move to astro/toolbar for building purposes * feat(toolbar): Add a toolbar example (#10793) * feat: add a toolbar starter * test: skip examples that are not Astro projects * nit: small changes * feat: setup for build step * fix: add to devdep * docs: add commands to README * fix: reorder classes to make more sense * fix: add improvements from recipe * Apply suggestions from code review Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> --------- Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev> Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
2.2 KiB
| astro |
|---|
| minor |
Adds new utilities to ease the creation of toolbar apps including defineToolbarApp to make it easier to define your toolbar app and app and server helpers for easier communication between the toolbar and the server. These new utilities abstract away some of the boilerplate code that is common in toolbar apps, and lower the barrier of entry for app authors.
For example, instead of creating an event listener for the app-toggled event and manually typing the value in the callback, you can now use the onAppToggled method. Additionally, communicating with the server does not require knowing any of the Vite APIs anymore, as a new server object is passed to the init function that contains easy to use methods for communicating with the server.
import { defineToolbarApp } from "astro/toolbar";
export default defineToolbarApp({
init(canvas, app, server) {
- app.addEventListener("app-toggled", (e) => {
- console.log(`App is now ${state ? "enabled" : "disabled"}`);.
- });
+ app.onToggled(({ state }) => {
+ console.log(`App is now ${state ? "enabled" : "disabled"}`);
+ });
- if (import.meta.hot) {
- import.meta.hot.send("my-app:my-client-event", { message: "world" });
- }
+ server.send("my-app:my-client-event", { message: "world" })
- if (import.meta.hot) {
- import.meta.hot.on("my-server-event", (data: {message: string}) => {
- console.log(data.message);
- });
- }
+ server.on<{ message: string }>("my-server-event", (data) => {
+ console.log(data.message); // data is typed using the type parameter
+ });
},
})
Server helpers are also available on the server side, for use in your integrations, through the new toolbar object:
"astro:server:setup": ({ toolbar }) => {
toolbar.on<{ message: string }>("my-app:my-client-event", (data) => {
console.log(data.message);
toolbar.send("my-server-event", { message: "hello" });
});
}
This is a backwards compatible change and your your existing dev toolbar apps will continue to function. However, we encourage you to build your apps with the new helpers, following the updated Dev Toolbar API documentation.