astro 4.2.2 → 4.2.3

package/dist/@types/astro.d.ts

@@ -2401,7 +2401,7 @@ export interface ClientDirectiveConfig {
 export interface DevToolbarApp {
     id: string;
     name: string;
-    icon: Icon;
+    icon?: Icon;
     init?(canvas: ShadowRoot, eventTarget: EventTarget): void | Promise<void>;
     beforeTogglingOff?(canvas: ShadowRoot): boolean | Promise<boolean>;
 }

package/dist/cli/db/index.js

@@ -1,5 +1,6 @@
-import { createLoggerFromFlags } from "../flags.js";
+import { createLoggerFromFlags, flagsToAstroInlineConfig } from "../flags.js";
 import { getPackage } from "../install-package.js";
+import { resolveConfig } from "../../core/config/config.js";
 async function db({ flags }) {
   const logger = createLoggerFromFlags(flags);
   const getPackageOpts = { skipAsk: flags.yes || flags.y, cwd: flags.root };
@@ -12,8 +13,9 @@ async function db({ flags }) {
     return;
   }
   const { cli } = dbPackage;
-  const [command, ...args] = flags._.slice(3).map((v) => v.toString());
-  await cli(command, args);
+  const inlineConfig = flagsToAstroInlineConfig(flags);
+  const { astroConfig } = await resolveConfig(inlineConfig, "build");
+  await cli({ flags, config: astroConfig });
 }
 export {
   db

package/dist/core/constants.js

@@ -1,4 +1,4 @@
-const ASTRO_VERSION = "4.2.2";
+const ASTRO_VERSION = "4.2.3";
 const SUPPORTED_MARKDOWN_FILE_EXTENSIONS = [
   ".markdown",
   ".mdown",

package/dist/core/dev/dev.js

@@ -23,7 +23,7 @@ async function dev(inlineConfig) {
       base: restart.container.settings.config.base
     })
   );
-  const currentVersion = "4.2.2";
+  const currentVersion = "4.2.3";
   if (currentVersion.includes("-")) {
     logger.warn("SKIP_FORMAT", msg.prerelease({ currentVersion }));
   }

package/dist/core/logger/core.d.ts

@@ -7,7 +7,7 @@ export type LoggerLevel = 'debug' | 'info' | 'warn' | 'error' | 'silent';
  * rather than specific to a single command, function, use, etc. The label will be
  * shown in the log message to the user, so it should be relevant.
  */
-export type LoggerLabel = 'add' | 'build' | 'check' | 'config' | 'content' | 'deprecated' | 'markdown' | 'router' | 'types' | 'vite' | 'watch' | 'middleware' | 'preferences' | 'redirects' | 'SKIP_FORMAT';
+export type LoggerLabel = 'add' | 'build' | 'check' | 'config' | 'content' | 'deprecated' | 'markdown' | 'router' | 'types' | 'vite' | 'watch' | 'middleware' | 'preferences' | 'redirects' | 'toolbar' | 'SKIP_FORMAT';
 export interface LogOptions {
     dest: LogWritable<LogMessage>;
     level: LoggerLevel;

package/dist/core/messages.js

@@ -36,7 +36,7 @@ function serverStart({
   host,
   base
 }) {
-  const version = "4.2.2";
+  const version = "4.2.3";
   const localPrefix = `${dim("\u2503")} Local    `;
   const networkPrefix = `${dim("\u2503")} Network  `;
   const emptyPrefix = " ".repeat(11);
@@ -258,7 +258,7 @@ function printHelp({
     message.push(
       linebreak(),
       `  ${bgGreen(black(` ${commandName} `))} ${green(
-        `v${"4.2.2"}`
+        `v${"4.2.3"}`
       )} ${headline}`
     );
   }

package/dist/runtime/client/dev-toolbar/apps/settings.js

@@ -14,7 +14,7 @@ const settingsRows = [
         }
         settings.updateSetting("disableAppNotification", evt.currentTarget.checked);
         const action = evt.currentTarget.checked ? "disabled" : "enabled";
-        settings.log(`App notification badges ${action}`);
+        settings.logger.verboseLog(`App notification badges ${action}`);
       }
     }
   },
@@ -27,7 +27,7 @@ const settingsRows = [
       if (evt.currentTarget instanceof HTMLInputElement) {
         settings.updateSetting("verbose", evt.currentTarget.checked);
         const action = evt.currentTarget.checked ? "enabled" : "disabled";
-        settings.log(`Verbose logging ${action}`);
+        settings.logger.verboseLog(`Verbose logging ${action}`);
       }
     }
   }

package/dist/runtime/client/dev-toolbar/entrypoint.js

@@ -173,7 +173,7 @@ document.addEventListener("DOMContentLoaded", async () => {
           button.setAttribute("data-app-id", app.id);
           const iconContainer = document.createElement("div");
           const iconElement = document.createElement("template");
-          iconElement.innerHTML = getAppIcon(app.icon);
+          iconElement.innerHTML = app.icon ? getAppIcon(app.icon) : "?";
           iconContainer.append(iconElement.content.cloneNode(true));
           const notification = document.createElement("div");
           notification.classList.add("notification");

package/dist/runtime/client/dev-toolbar/settings.d.ts

@@ -9,5 +9,8 @@ export declare const defaultSettings: {
 export declare const settings: {
     readonly config: Settings;
     updateSetting: (key: keyof Settings, value: boolean) => void;
-    log: (message: string) => void;
+    logger: {
+        log: (message: string) => void;
+        verboseLog: (message: string) => void;
+    };
 };

package/dist/runtime/client/dev-toolbar/settings.js

@@ -30,7 +30,14 @@ function getSettings() {
       return _settings;
     },
     updateSetting,
-    log
+    logger: {
+      log,
+      verboseLog: (message) => {
+        if (_settings.verbose) {
+          log(message);
+        }
+      }
+    }
   };
 }
 export {

package/dist/runtime/client/dev-toolbar/toolbar.d.ts

@@ -28,6 +28,7 @@ export declare class AstroDevToolbar extends HTMLElement {
     getAppTemplate(app: DevToolbarApp): string;
     getAppById(id: string): DevToolbarApp | undefined;
     getAppCanvasById(id: string): HTMLElement | null;
+    getAppButtonById(id: string): HTMLElement | null;
     toggleAppStatus(app: DevToolbarApp): Promise<void>;
     setAppStatus(app: DevToolbarApp, newStatus: boolean): Promise<boolean>;
     isHidden(): boolean;

package/dist/runtime/client/dev-toolbar/toolbar.js

@@ -109,6 +109,11 @@ class AstroDevToolbar extends HTMLElement {
 				outline-offset: -3px;
 			}
 
+			#dev-bar #bar-container .item[data-app-error]:hover, #dev-bar #bar-container .item[data-app-error]:focus-visible {
+				cursor: not-allowed;
+				background: #ff252520;
+			}
+
 			#dev-bar .item:first-of-type {
 				border-top-left-radius: 9999px;
 				border-bottom-left-radius: 9999px;
@@ -149,6 +154,10 @@ class AstroDevToolbar extends HTMLElement {
 				border-top: 5px solid #343841;
 			}
 
+			#dev-bar .item[data-app-error] .icon {
+				opacity: 0.35;
+			}
+
 			#dev-bar .item:hover .item-tooltip, #dev-bar .item:not(.active):focus-visible .item-tooltip {
 				transition: opacity 0.2s ease-in-out 200ms;
 				opacity: 1;
@@ -229,8 +238,7 @@ class AstroDevToolbar extends HTMLElement {
     this.devToolbarContainer = this.shadowRoot.querySelector("#dev-toolbar-root");
     this.attachEvents();
     this.apps.forEach(async (app) => {
-      if (settings.config.verbose)
-        console.log(`Creating app canvas for ${app.id}`);
+      settings.logger.verboseLog(`Creating app canvas for ${app.id}`);
       const appCanvas = document.createElement("astro-dev-toolbar-app-canvas");
       appCanvas.dataset.appId = app.id;
       this.shadowRoot?.append(appCanvas);
@@ -311,8 +319,7 @@ class AstroDevToolbar extends HTMLElement {
     const shadowRoot = this.getAppCanvasById(app.id).shadowRoot;
     app.status = "loading";
     try {
-      if (settings.config.verbose)
-        console.info(`Initializing app ${app.id}`);
+      settings.logger.verboseLog(`Initializing app ${app.id}`);
       await app.init?.(shadowRoot, app.eventTarget);
       app.status = "ready";
       if (import.meta.hot) {
@@ -322,11 +329,23 @@ class AstroDevToolbar extends HTMLElement {
     } catch (e) {
       console.error(`Failed to init app ${app.id}, error: ${e}`);
       app.status = "error";
+      if (import.meta.hot) {
+        import.meta.hot.send("astro:devtoolbar:error:init", {
+          app,
+          error: e instanceof Error ? e.stack : e
+        });
+      }
+      const appButton = this.getAppButtonById(app.id);
+      const appTooltip = appButton?.querySelector(".item-tooltip");
+      if (appButton && appTooltip) {
+        appButton.toggleAttribute("data-app-error", true);
+        appTooltip.innerText = `Error initializing ${app.name}`;
+      }
     }
   }
   getAppTemplate(app) {
     return `<button class="item" data-app-id="${app.id}">
-				<div class="icon">${getAppIcon(app.icon)}<div class="notification"></div></div>
+				<div class="icon">${app.icon ? getAppIcon(app.icon) : "?"}<div class="notification"></div></div>
 				<span class="item-tooltip">${app.name}</span>
 			</button>`;
   }
@@ -338,6 +357,9 @@ class AstroDevToolbar extends HTMLElement {
       `astro-dev-toolbar-app-canvas[data-app-id="${id}"]`
     );
   }
+  getAppButtonById(id) {
+    return this.shadowRoot.querySelector(`[data-app-id="${id}"]`);
+  }
   async toggleAppStatus(app) {
     const activeApp = this.getActiveApp();
     if (activeApp) {
@@ -361,7 +383,7 @@ class AstroDevToolbar extends HTMLElement {
         return false;
     }
     app.active = newStatus ?? !app.active;
-    const mainBarButton = this.shadowRoot.querySelector(`[data-app-id="${app.id}"]`);
+    const mainBarButton = this.getAppButtonById(app.id);
     const moreBarButton = this.getAppCanvasById("astro:more")?.shadowRoot?.querySelector(
       `[data-app-id="${app.id}"]`
     );

package/dist/vite-plugin-dev-toolbar/vite-plugin-dev-toolbar.d.ts

@@ -1,3 +1,3 @@
 import type * as vite from 'vite';
 import type { AstroPluginOptions } from '../@types/astro.js';
-export default function astroDevToolbar({ settings }: AstroPluginOptions): vite.Plugin;
+export default function astroDevToolbar({ settings, logger }: AstroPluginOptions): vite.Plugin;

package/dist/vite-plugin-dev-toolbar/vite-plugin-dev-toolbar.js

@@ -1,6 +1,6 @@
 const VIRTUAL_MODULE_ID = "astro:dev-toolbar";
 const resolvedVirtualModuleId = "\0" + VIRTUAL_MODULE_ID;
-function astroDevToolbar({ settings }) {
+function astroDevToolbar({ settings, logger }) {
   return {
     name: "astro:dev-toolbar",
     config() {
@@ -16,12 +16,49 @@ function astroDevToolbar({ settings }) {
         return resolvedVirtualModuleId;
       }
     },
+    configureServer(server) {
+      server.ws.on("astro:devtoolbar:error:load", (args) => {
+        logger.error(
+          "toolbar",
+          `Failed to load dev toolbar app from ${args.entrypoint}: ${args.error}`
+        );
+      });
+      server.ws.on("astro:devtoolbar:error:init", (args) => {
+        logger.error(
+          "toolbar",
+          `Failed to initialize dev toolbar app ${args.app.name} (${args.app.id}):
+${args.error}`
+        );
+      });
+    },
     async load(id) {
       if (id === resolvedVirtualModuleId) {
         return `
 					export const loadDevToolbarApps = async () => {
-						return [${settings.devToolbarApps.map((plugin) => `(await import(${JSON.stringify(plugin)})).default`).join(",")}];
+						return (await Promise.all([${settings.devToolbarApps.map((plugin) => `safeLoadPlugin(${JSON.stringify(plugin)})`).join(",")}])).filter(app => app);
 					};
+
+					async function safeLoadPlugin(entrypoint) {
+						try {
+							const app = (await import(/* @vite-ignore */ entrypoint)).default;
+
+							if (typeof app !== 'object' || !app.id || !app.name) {
+								throw new Error("Apps must default export an object with an id, and a name.");
+							}
+
+							return app;
+						} catch (err) {
+							console.error(\`Failed to load dev toolbar app from \${entrypoint}: \${err.message}\`);
+
+							if (import.meta.hot) {
+  							import.meta.hot.send('astro:devtoolbar:error:load', { entrypoint: entrypoint, error: err.message })
+							}
+
+							return undefined;
+						}
+
+						return undefined;
+					}
 				`;
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "description": "Astro is a modern site builder with web best practices, performance, and DX front-of-mind.",
   "type": "module",
   "author": "withastro",