astro 4.2.2 → 4.2.4

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/app/index.js

@@ -17,7 +17,7 @@ import {
   createStylesheetElementSet
 } from "../render/ssr-element.js";
 import { matchRoute } from "../routing/match.js";
-import { EndpointNotFoundError, SSRRoutePipeline } from "./ssrPipeline.js";
+import { SSRRoutePipeline } from "./ssrPipeline.js";
 import { deserializeManifest } from "./common.js";
 const localsSymbol = Symbol.for("astro.locals");
 const clientAddressSymbol = Symbol.for("astro.clientAddress");
@@ -187,20 +187,17 @@ class App {
       }
       response = await this.#pipeline.renderRoute(renderContext, pageModule);
     } catch (err) {
-      if (err instanceof EndpointNotFoundError) {
-        return this.#renderError(request, { status: 404, response: err.originalResponse });
-      } else {
-        this.#logger.error(null, err.stack || err.message || String(err));
-        return this.#renderError(request, { status: 500 });
-      }
+      this.#logger.error(null, err.stack || err.message || String(err));
+      return this.#renderError(request, { status: 500 });
     }
-    if (routeData.type === "page" || routeData.type === "redirect") {
-      if (REROUTABLE_STATUS_CODES.has(response.status)) {
-        return this.#renderError(request, {
-          response,
-          status: response.status
-        });
-      }
+    if (REROUTABLE_STATUS_CODES.has(response.status) && response.headers.get("X-Astro-Reroute") !== "no") {
+      return this.#renderError(request, {
+        response,
+        status: response.status
+      });
+    }
+    if (response.headers.has("X-Astro-Reroute")) {
+      response.headers.delete("X-Astro-Reroute");
     }
     if (addCookieHeader) {
       for (const setCookieHeaderValue of App.getSetCookieFromResponse(response)) {

package/dist/core/app/ssrPipeline.d.ts

@@ -1,13 +1,3 @@
 import { Pipeline } from '../pipeline.js';
-import type { Environment } from '../render/index.js';
-/**
- * Thrown when an endpoint contains a response with the header "X-Astro-Response" === 'Not-Found'
- */
-export declare class EndpointNotFoundError extends Error {
-    originalResponse: Response;
-    constructor(originalResponse: Response);
-}
 export declare class SSRRoutePipeline extends Pipeline {
-    #private;
-    constructor(env: Environment);
 }

package/dist/core/app/ssrPipeline.js

@@ -1,25 +1,6 @@
 import { Pipeline } from "../pipeline.js";
-class EndpointNotFoundError extends Error {
-  originalResponse;
-  constructor(originalResponse) {
-    super();
-    this.originalResponse = originalResponse;
-  }
-}
 class SSRRoutePipeline extends Pipeline {
-  constructor(env) {
-    super(env);
-    this.setEndpointHandler(this.#ssrEndpointHandler);
-  }
-  // This function is responsible for handling the result coming from an endpoint.
-  async #ssrEndpointHandler(request, response) {
-    if (response.headers.get("X-Astro-Response") === "Not-Found") {
-      throw new EndpointNotFoundError(response);
-    }
-    return response;
-  }
 }
 export {
-  EndpointNotFoundError,
   SSRRoutePipeline
 };

package/dist/core/build/buildPipeline.js

@@ -51,7 +51,6 @@ class BuildPipeline extends Pipeline {
     this.#internals = internals;
     this.#staticBuildOptions = staticBuildOptions;
     this.#manifest = manifest;
-    this.setEndpointHandler(this.#handleEndpointResult);
   }
   getInternals() {
     return this.#internals;
@@ -143,9 +142,6 @@ class BuildPipeline extends Pipeline {
     }
     return pages;
   }
-  async #handleEndpointResult(_, response) {
-    return response;
-  }
 }
 export {
   BuildPipeline

package/dist/core/build/generate.js

@@ -347,7 +347,8 @@ function getUrlForPath(pathname, base, origin, format, routeType) {
 async function generatePath(pathname, pipeline, gopts, route) {
   const { mod, scripts: hoistedScripts, styles: _styles } = gopts;
   const manifest = pipeline.getManifest();
-  pipeline.getEnvironment().logger.debug("build", `Generating: ${pathname}`);
+  const logger = pipeline.getLogger();
+  logger.debug("build", `Generating: ${pathname}`);
   const links = /* @__PURE__ */ new Set();
   const scripts = createModuleScriptsSet(
     hoistedScripts ? [hoistedScripts] : [],

package/dist/core/constants.js

@@ -1,4 +1,4 @@
-const ASTRO_VERSION = "4.2.2";
+const ASTRO_VERSION = "4.2.4";
 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.4";
   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.4";
   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.4"}`
       )} ${headline}`
     );
   }

package/dist/core/pipeline.d.ts

@@ -1,6 +1,5 @@
 import type { ComponentInstance, MiddlewareHandler } from '../@types/astro.js';
 import { type Environment, type RenderContext } from './render/index.js';
-type EndpointResultHandler = (originalRequest: Request, result: Response) => Promise<Response> | Response;
 export type PipelineHookFunction = (ctx: RenderContext, mod: ComponentInstance | undefined) => void;
 /**
  * This is the basic class of a pipeline.
@@ -16,12 +15,6 @@ export declare class Pipeline {
      */
     constructor(env: Environment);
     setEnvironment(): void;
-    /**
-     * When rendering a route, an "endpoint" will a type that needs to be handled and transformed into a `Response`.
-     *
-     * Each consumer might have different needs; use this function to set up the handler.
-     */
-    setEndpointHandler(handler: EndpointResultHandler): void;
     /**
      * A middleware function that will be called before each request.
      */
@@ -44,4 +37,3 @@ export declare class Pipeline {
      */
     onBeforeRenderRoute(fn: PipelineHookFunction): void;
 }
-export {};

package/dist/core/pipeline.js

@@ -8,11 +8,6 @@ class Pipeline {
   #hooks = {
     before: []
   };
-  /**
-   * The handler accepts the *original* `Request` and result returned by the endpoint.
-   * It must return a `Response`.
-   */
-  #endpointHandler;
   /**
    * When creating a pipeline, an environment is mandatory.
    * The environment won't change for the whole lifetime of the pipeline.
@@ -22,14 +17,6 @@ class Pipeline {
   }
   setEnvironment() {
   }
-  /**
-   * When rendering a route, an "endpoint" will a type that needs to be handled and transformed into a `Response`.
-   *
-   * Each consumer might have different needs; use this function to set up the handler.
-   */
-  setEndpointHandler(handler) {
-    this.#endpointHandler = handler;
-  }
   /**
    * A middleware function that will be called before each request.
    */
@@ -55,22 +42,7 @@ class Pipeline {
     for (const hook of this.#hooks.before) {
       hook(renderContext, componentInstance);
     }
-    const result = await this.#tryRenderRoute(
-      renderContext,
-      this.env,
-      componentInstance,
-      this.#onRequest
-    );
-    if (renderContext.route.type === "endpoint") {
-      if (!this.#endpointHandler) {
-        throw new Error(
-          "You created a pipeline that does not know how to handle the result coming from an endpoint."
-        );
-      }
-      return this.#endpointHandler(renderContext.request, result);
-    } else {
-      return result;
-    }
+    return await this.#tryRenderRoute(renderContext, this.env, componentInstance, this.#onRequest);
   }
   /**
    * It attempts to render a route. A route can be a:

package/dist/core/routing/manifest/create.js

@@ -99,28 +99,57 @@ function isSemanticallyEqualSegment(segmentA, segmentB) {
   return true;
 }
 function routeComparator(a, b) {
+  const commonLength = Math.min(a.segments.length, b.segments.length);
+  for (let index = 0; index < commonLength; index++) {
+    const aSegment = a.segments[index];
+    const bSegment = b.segments[index];
+    const aIsStatic = aSegment.every((part) => !part.dynamic && !part.spread);
+    const bIsStatic = bSegment.every((part) => !part.dynamic && !part.spread);
+    if (aIsStatic && bIsStatic) {
+      const aContent = aSegment.map((part) => part.content).join("");
+      const bContent = bSegment.map((part) => part.content).join("");
+      if (aContent !== bContent) {
+        return aContent.localeCompare(bContent);
+      }
+    }
+    if (aIsStatic !== bIsStatic) {
+      return aIsStatic ? -1 : 1;
+    }
+    const aHasSpread = aSegment.some((part) => part.spread);
+    const bHasSpread = bSegment.some((part) => part.spread);
+    if (aHasSpread !== bHasSpread) {
+      return aHasSpread ? 1 : -1;
+    }
+  }
+  if (Math.abs(a.segments.length - b.segments.length) === 1) {
+    const aEndsInRest = a.segments.at(-1)?.some((part) => part.spread);
+    const bEndsInRest = b.segments.at(-1)?.some((part) => part.spread);
+    if (a.segments.length > b.segments.length && !bEndsInRest) {
+      return 1;
+    }
+    if (b.segments.length > a.segments.length && !aEndsInRest) {
+      return -1;
+    }
+  }
+  if (a.isIndex !== b.isIndex) {
+    if (a.isIndex) {
+      const followingBSegment = b.segments.at(a.segments.length);
+      const followingBSegmentIsStatic = followingBSegment?.every(
+        (part) => !part.dynamic && !part.spread
+      );
+      return followingBSegmentIsStatic ? 1 : -1;
+    }
+    const followingASegment = a.segments.at(b.segments.length);
+    const followingASegmentIsStatic = followingASegment?.every(
+      (part) => !part.dynamic && !part.spread
+    );
+    return followingASegmentIsStatic ? -1 : 1;
+  }
   const aLength = a.isIndex ? a.segments.length + 1 : a.segments.length;
   const bLength = b.isIndex ? b.segments.length + 1 : b.segments.length;
   if (aLength !== bLength) {
     return aLength > bLength ? -1 : 1;
   }
-  const aIsStatic = a.segments.every(
-    (segment) => segment.every((part) => !part.dynamic && !part.spread)
-  );
-  const bIsStatic = b.segments.every(
-    (segment) => segment.every((part) => !part.dynamic && !part.spread)
-  );
-  if (aIsStatic !== bIsStatic) {
-    return aIsStatic ? -1 : 1;
-  }
-  const aHasSpread = a.segments.some((segment) => segment.some((part) => part.spread));
-  const bHasSpread = b.segments.some((segment) => segment.some((part) => part.spread));
-  if (aHasSpread !== bHasSpread) {
-    return aHasSpread ? 1 : -1;
-  }
-  if (a.prerender !== b.prerender) {
-    return a.prerender ? -1 : 1;
-  }
   if (a.type === "endpoint" !== (b.type === "endpoint")) {
     return a.type === "endpoint" ? -1 : 1;
   }

package/dist/prerender/utils.js

@@ -3,7 +3,7 @@ function isServerLikeOutput(config) {
   return config.output === "server" || config.output === "hybrid";
 }
 function getPrerenderDefault(config) {
-  return config.output === "hybrid";
+  return config.output !== "server";
 }
 function getOutputDirectory(config) {
   const ssr = isServerLikeOutput(config);

package/dist/runtime/client/dev-toolbar/apps/audit/a11y.js

@@ -193,7 +193,7 @@ const ariaAttributes = new Set(
   )
 );
 const ariaRoles = new Set(
-  "alert alertdialog application article banner button cell checkbox columnheader combobox complementary contentinfo definition dialog directory document feed figure form grid gridcell group heading img link list listbox listitem log main marquee math menu menubar menuitem menuitemcheckbox menuitemradio navigation none note option presentation progressbar radio radiogroup region row rowgroup rowheader scrollbar search searchbox separator slider spinbutton status tab tablist tabpanel textbox timer toolbar tooltip tree treegrid treeitem".split(
+  "alert alertdialog application article banner button cell checkbox columnheader combobox complementary contentinfo definition dialog directory document feed figure form grid gridcell group heading img link list listbox listitem log main marquee math menu menubar menuitem menuitemcheckbox menuitemradio navigation none note option presentation progressbar radio radiogroup region row rowgroup rowheader scrollbar search searchbox separator slider spinbutton status switch tab tablist tabpanel textbox timer toolbar tooltip tree treegrid treeitem".split(
     " "
   )
 );

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/runtime/server/endpoint.js

@@ -19,14 +19,11 @@ Found handlers: ${Object.keys(mod).map((exp) => JSON.stringify(exp)).join(", ")}
 ` + ("all" in mod ? `One of the exported handlers is "all" (lowercase), did you mean to export 'ALL'?
 ` : "")
     );
-    return new Response(null, {
-      status: 404,
-      headers: {
-        "X-Astro-Response": "Not-Found"
-      }
-    });
+    return new Response(null, { status: 404 });
   }
-  return handler.call(mod, context);
+  const response = await handler.call(mod, context);
+  response.headers.set("X-Astro-Reroute", "no");
+  return response;
 }
 export {
   renderEndpoint

package/dist/vite-plugin-astro-server/devPipeline.js

@@ -18,7 +18,6 @@ class DevPipeline extends Pipeline {
     this.#devLogger = logger;
     this.#settings = settings;
     this.#loader = loader;
-    this.setEndpointHandler(this.#handleEndpointResult);
   }
   clearRouteCache() {
     this.env.routeCache.clearAll();
@@ -58,9 +57,6 @@ class DevPipeline extends Pipeline {
       streaming: true
     });
   }
-  async #handleEndpointResult(_, response) {
-    return response;
-  }
   async handleFallback() {
   }
 }

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/dist/vite-plugin-html/transform/escape.js

@@ -1,16 +1,23 @@
 import { visit } from "unist-util-visit";
-import { escape, needsEscape, replaceAttribute } from "./utils.js";
+import { escapeTemplateLiteralCharacters, needsEscape, replaceAttribute } from "./utils.js";
 const rehypeEscape = ({ s }) => {
   return (tree) => {
     visit(tree, (node) => {
       if (node.type === "text" || node.type === "comment") {
         if (needsEscape(node.value)) {
-          s.overwrite(node.position.start.offset, node.position.end.offset, escape(node.value));
+          s.overwrite(
+            node.position.start.offset,
+            node.position.end.offset,
+            escapeTemplateLiteralCharacters(node.value)
+          );
         }
       } else if (node.type === "element") {
-        for (const [key, value] of Object.entries(node.properties ?? {})) {
-          const newKey = needsEscape(key) ? escape(key) : key;
-          const newValue = needsEscape(value) ? escape(value) : value;
+        if (!node.properties)
+          return;
+        for (let [key, value] of Object.entries(node.properties)) {
+          key = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+          const newKey = needsEscape(key) ? escapeTemplateLiteralCharacters(key) : key;
+          const newValue = needsEscape(value) ? escapeTemplateLiteralCharacters(value) : value;
           if (newKey === key && newValue === value)
             continue;
           replaceAttribute(s, node, key, value === "" ? newKey : `${newKey}="${newValue}"`);

package/dist/vite-plugin-html/transform/slots.js

@@ -1,5 +1,5 @@
 import { visit } from "unist-util-visit";
-import { escape } from "./utils.js";
+import { escapeTemplateLiteralCharacters } from "./utils.js";
 const rehypeSlots = ({ s }) => {
   return (tree, file) => {
     visit(tree, (node) => {
@@ -12,7 +12,11 @@ const rehypeSlots = ({ s }) => {
         const first = node.children.at(0) ?? node;
         const last = node.children.at(-1) ?? node;
         const text = file.value.slice(first.position?.start.offset ?? 0, last.position?.end.offset ?? 0).toString();
-        s.overwrite(start, end, `\${${SLOT_PREFIX}["${name}"] ?? \`${escape(text).trim()}\`}`);
+        s.overwrite(
+          start,
+          end,
+          `\${${SLOT_PREFIX}["${name}"] ?? \`${escapeTemplateLiteralCharacters(text).trim()}\`}`
+        );
       }
     });
   };

package/dist/vite-plugin-html/transform/utils.d.ts

@@ -1,5 +1,5 @@
 import type { Element } from 'hast';
 import type MagicString from 'magic-string';
-export declare function replaceAttribute(s: MagicString, node: Element, key: string, newValue: string): void;
+export declare function replaceAttribute(s: MagicString, node: Element, key: string, newValue: string): MagicString | undefined;
 export declare function needsEscape(value: any): value is string;
-export declare function escape(value: string): string;
+export declare function escapeTemplateLiteralCharacters(value: string): string;

package/dist/vite-plugin-html/transform/utils.js

@@ -10,20 +10,39 @@ function replaceAttribute(s, node, key, newValue) {
   const token = tokens[0].replace(/([^>])(\>[\s\S]*$)/gim, "$1");
   if (token.trim() === key) {
     const end = start + key.length;
-    s.overwrite(start, end, newValue);
+    return s.overwrite(start, end, newValue, { contentOnly: true });
   } else {
-    const end = start + `${key}=${tokens[2]}${tokens[3]}${tokens[2]}`.length;
-    s.overwrite(start, end, newValue);
+    const length = token.length;
+    const end = start + length;
+    return s.overwrite(start, end, newValue, { contentOnly: true });
   }
 }
+const NEEDS_ESCAPE_RE = /[`\\]|\$\{/g;
 function needsEscape(value) {
-  return typeof value === "string" && (value.includes("`") || value.includes("${"));
+  NEEDS_ESCAPE_RE.lastIndex = 0;
+  return typeof value === "string" && NEEDS_ESCAPE_RE.test(value);
 }
-function escape(value) {
-  return value.replace(/`/g, "\\`").replace(/\$\{/g, "\\${");
+function escapeTemplateLiteralCharacters(value) {
+  NEEDS_ESCAPE_RE.lastIndex = 0;
+  let char;
+  let startIndex = 0;
+  let segment = "";
+  let text = "";
+  while ([char] = NEEDS_ESCAPE_RE.exec(value) ?? []) {
+    if (!char) {
+      text += value.slice(startIndex);
+      break;
+    }
+    const endIndex = NEEDS_ESCAPE_RE.lastIndex - char.length;
+    const prefix = segment === "\\" ? "" : "\\";
+    segment = prefix + char;
+    text += value.slice(startIndex, endIndex) + segment;
+    startIndex = NEEDS_ESCAPE_RE.lastIndex;
+  }
+  return text;
 }
 export {
-  escape,
+  escapeTemplateLiteralCharacters,
   needsEscape,
   replaceAttribute
 };

package/dist/vite-plugin-markdown/images.js

@@ -8,7 +8,10 @@ function getMarkdownCodeForImages(imagePaths, html) {
 					${imagePaths.map((entry) => {
     const rawUrl = JSON.stringify(entry.raw);
     return `{
-											const regex = new RegExp('__ASTRO_IMAGE_="([^"]*' + ${rawUrl} + '[^"]*)"', 'g');
+											const regex = new RegExp('__ASTRO_IMAGE_="([^"]*' + ${rawUrl.replace(
+      /[.*+?^${}()|[\]\\]/g,
+      "\\\\$&"
+    )} + '[^"]*)"', 'g');
 											let match;
 											let occurrenceCounter = 0;
 											while ((match = regex.exec(html)) !== null) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro",
-  "version": "4.2.2",
+  "version": "4.2.4",
   "description": "Astro is a modern site builder with web best practices, performance, and DX front-of-mind.",
   "type": "module",
   "author": "withastro",
@@ -156,7 +156,7 @@
     "tsconfck": "^3.0.0",
     "unist-util-visit": "^5.0.0",
     "vfile": "^6.0.1",
-    "vite": "^5.0.10",
+    "vite": "^5.0.12",
     "vitefu": "^0.2.5",
     "which-pm": "^2.1.1",
     "yargs-parser": "^21.1.1",