astro 4.6.4 → 4.7.0

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

@@ -14,7 +14,9 @@ import type { AstroTimer } from '../core/config/timer.js';
 import type { TSConfig } from '../core/config/tsconfig.js';
 import type { AstroCookies } from '../core/cookies/index.js';
 import type { AstroIntegrationLogger, Logger, LoggerLevel } from '../core/logger/core.js';
+import type { getToolbarServerCommunicationHelpers } from '../integrations/index.js';
 import type { AstroPreferences } from '../preferences/index.js';
+import type { ToolbarAppEventTarget, ToolbarServerHelpers } from '../runtime/client/dev-toolbar/helpers.js';
 import type { AstroDevToolbar, DevToolbarCanvas } from '../runtime/client/dev-toolbar/toolbar.js';
 import type { Icon } from '../runtime/client/dev-toolbar/ui-library/icons.js';
 import type { DevToolbarBadge, DevToolbarButton, DevToolbarCard, DevToolbarHighlight, DevToolbarIcon, DevToolbarSelect, DevToolbarToggle, DevToolbarTooltip, DevToolbarWindow } from '../runtime/client/dev-toolbar/ui-library/index.js';
@@ -22,7 +24,7 @@ import type { AstroComponentFactory, AstroComponentInstance } from '../runtime/s
 import type { TransitionBeforePreparationEvent, TransitionBeforeSwapEvent } from '../transitions/events.js';
 import type { DeepPartial, OmitIndexSignature, Simplify } from '../type-utils.js';
 import type { SUPPORTED_MARKDOWN_FILE_EXTENSIONS } from './../core/constants.js';
-export { type AstroIntegrationLogger };
+export type { AstroIntegrationLogger, ToolbarServerHelpers };
 export type { MarkdownHeading, RehypePlugins, RemarkPlugins, ShikiConfig, } from '@astrojs/markdown-remark';
 export type { ExternalImageService, ImageService, LocalImageService, } from '../assets/services/service.js';
 export type { GetImageResult, ImageInputFormat, ImageMetadata, ImageOutputFormat, ImageQuality, ImageQualityPreset, ImageTransform, UnresolvedImageTransform, } from '../assets/types.js';
@@ -1939,7 +1941,7 @@ export interface AstroSettings {
      * Map of directive name (e.g. `load`) to the directive script code
      */
     clientDirectives: Map<string, string>;
-    devToolbarApps: string[];
+    devToolbarApps: (DevToolbarAppEntry | string)[];
     middlewares: {
         pre: string[];
         post: string[];
@@ -1948,6 +1950,14 @@ export interface AstroSettings {
     tsConfigPath: string | undefined;
     watchFiles: string[];
     timer: AstroTimer;
+    /**
+     * Latest version of Astro, will be undefined if:
+     * - unable to check
+     * - the user has disabled the check
+     * - the check has not completed yet
+     * - the user is on the latest version already
+     */
+    latestAstroVersion: string | undefined;
 }
 export type AsyncRendererComponentFn<U> = (Component: any, props: any, slots: Record<string, string>, metadata?: AstroComponentMetadata) => Promise<U>;
 /** Generic interface for a component (Astro, Svelte, React, etc.) */
@@ -2470,7 +2480,7 @@ export interface AstroIntegration {
              * TODO: Fully remove in Astro 5.0
              */
             addDevOverlayPlugin: (entrypoint: string) => void;
-            addDevToolbarApp: (entrypoint: string) => void;
+            addDevToolbarApp: (entrypoint: DevToolbarAppEntry | string) => void;
             addMiddleware: (mid: AstroIntegrationMiddleware) => void;
             logger: AstroIntegrationLogger;
         }) => void | Promise<void>;
@@ -2482,6 +2492,7 @@ export interface AstroIntegration {
         'astro:server:setup'?: (options: {
             server: vite.ViteDevServer;
             logger: AstroIntegrationLogger;
+            toolbar: ReturnType<typeof getToolbarServerCommunicationHelpers>;
         }) => void | Promise<void>;
         'astro:server:start'?: (options: {
             address: AddressInfo;
@@ -2694,18 +2705,49 @@ export interface ClientDirectiveConfig {
     name: string;
     entrypoint: string;
 }
-export interface DevToolbarApp {
+type DevToolbarAppMeta = {
     id: string;
     name: string;
     icon?: Icon;
-    init?(canvas: ShadowRoot, eventTarget: EventTarget): void | Promise<void>;
+};
+export type DevToolbarAppEntry = DevToolbarAppMeta & {
+    entrypoint: string;
+};
+export type DevToolbarApp = {
+    /**
+     * @deprecated The `id`, `name`, and `icon` properties should now be defined when using `addDevToolbarApp`.
+     *
+     * Ex: `addDevToolbarApp({ id: 'my-app', name: 'My App', icon: '🚀', entrypoint: '/path/to/app' })`
+     *
+     * In the future, putting these properties directly on the app object will be removed.
+     */
+    id?: string;
+    /**
+     * @deprecated The `id`, `name`, and `icon` properties should now be defined when using `addDevToolbarApp`.
+     *
+     * Ex: `addDevToolbarApp({ id: 'my-app', name: 'My App', icon: '🚀', entrypoint: '/path/to/app' })`
+     *
+     * In the future, putting these properties directly on the app object will be removed.
+     */
+    name?: string;
+    /**
+     * @deprecated The `id`, `name`, and `icon` properties should now be defined when using `addDevToolbarApp`.
+     *
+     * Ex: `addDevToolbarApp({ id: 'my-app', name: 'My App', icon: '🚀', entrypoint: '/path/to/app' })`
+     *
+     * In the future, putting these properties directly on the app object will be removed.
+     */
+    icon?: Icon;
+    init?(canvas: ShadowRoot, app: ToolbarAppEventTarget, server: ToolbarServerHelpers): void | Promise<void>;
     beforeTogglingOff?(canvas: ShadowRoot): boolean | Promise<boolean>;
-}
+};
+export type ResolvedDevToolbarApp = DevToolbarAppMeta & Omit<DevToolbarApp, 'id' | 'name' | 'icon'>;
 export type DevOverlayPlugin = DevToolbarApp;
 export type DevToolbarMetadata = Window & typeof globalThis & {
     __astro_dev_toolbar__: {
         root: string;
         version: string;
+        latestAstroVersion: AstroSettings['latestAstroVersion'];
         debugInfo: string;
     };
 };

package/dist/cli/add/index.js

@@ -27,6 +27,7 @@ import { apply as applyPolyfill } from "../../core/polyfill.js";
 import { ensureProcessNodeEnv, parseNpmName } from "../../core/util.js";
 import { eventCliSession, telemetry } from "../../events/index.js";
 import { createLoggerFromFlags, flagsToAstroInlineConfig } from "../flags.js";
+import { fetchPackageJson, fetchPackageVersions } from "../install-package.js";
 import { generate, parse, t, visit } from "./babel.js";
 import { ensureImport } from "./imports.js";
 import { wrapDefaultExport } from "./wrapper.js";
@@ -77,22 +78,6 @@ const OFFICIAL_ADAPTER_TO_IMPORT_MAP = {
   cloudflare: "@astrojs/cloudflare",
   node: "@astrojs/node"
 };
-let _registry;
-async function getRegistry() {
-  if (_registry)
-    return _registry;
-  const fallback = "https://registry.npmjs.org";
-  const packageManager = (await preferredPM(process.cwd()))?.name || "npm";
-  try {
-    const { stdout } = await execa(packageManager, ["config", "get", "registry"]);
-    _registry = stdout?.trim()?.replace(/\/$/, "") || fallback;
-    if (!new URL(_registry).host)
-      _registry = fallback;
-  } catch (e) {
-    _registry = fallback;
-  }
-  return _registry;
-}
 async function add(names, { flags }) {
   ensureProcessNodeEnv("production");
   applyPolyfill();
@@ -683,31 +668,6 @@ ${message}`
     }
   }
 }
-async function fetchPackageJson(scope, name, tag) {
-  const packageName = `${scope ? `${scope}/` : ""}${name}`;
-  const registry = await getRegistry();
-  const res = await fetch(`${registry}/${packageName}/${tag}`);
-  if (res.status >= 200 && res.status < 300) {
-    return await res.json();
-  } else if (res.status === 404) {
-    return new Error();
-  } else {
-    return new Error(`Failed to fetch ${registry}/${packageName}/${tag} - GET ${res.status}`);
-  }
-}
-async function fetchPackageVersions(packageName) {
-  const registry = await getRegistry();
-  const res = await fetch(`${registry}/${packageName}`, {
-    headers: { accept: "application/vnd.npm.install-v1+json" }
-  });
-  if (res.status >= 200 && res.status < 300) {
-    return await res.json().then((data) => Object.keys(data.versions));
-  } else if (res.status === 404) {
-    return new Error();
-  } else {
-    return new Error(`Failed to fetch ${registry}/${packageName} - GET ${res.status}`);
-  }
-}
 async function validateIntegrations(integrations) {
   const spinner = ora("Resolving packages...").start();
   try {

package/dist/cli/install-package.d.ts

@@ -5,4 +5,13 @@ type GetPackageOptions = {
     cwd?: string;
 };
 export declare function getPackage<T>(packageName: string, logger: Logger, options: GetPackageOptions, otherDeps?: string[]): Promise<T | undefined>;
+/**
+ * Get the command to execute and download a package (e.g. `npx`, `yarn dlx`, `pnpx`, etc.)
+ * @param packageManager - Optional package manager to use. If not provided, Astro will attempt to detect the preferred package manager.
+ * @returns The command to execute and download a package
+ */
+export declare function getExecCommand(packageManager?: string): Promise<string>;
+export declare function fetchPackageJson(scope: string | undefined, name: string, tag: string): Promise<Record<string, any> | Error>;
+export declare function fetchPackageVersions(packageName: string): Promise<string[] | Error>;
+export declare function getRegistry(): Promise<string>;
 export {};

package/dist/cli/install-package.js

@@ -5,6 +5,7 @@ import ci from "ci-info";
 import { execa } from "execa";
 import { bold, cyan, dim, magenta } from "kleur/colors";
 import ora from "ora";
+import preferredPM from "preferred-pm";
 import prompts from "prompts";
 import resolvePackage from "resolve";
 import whichPm from "which-pm";
@@ -76,6 +77,23 @@ function getInstallCommand(packages, packageManager) {
       return null;
   }
 }
+async function getExecCommand(packageManager) {
+  if (!packageManager) {
+    packageManager = (await preferredPM(process.cwd()))?.name ?? "npm";
+  }
+  switch (packageManager) {
+    case "npm":
+      return "npx";
+    case "yarn":
+      return "yarn dlx";
+    case "pnpm":
+      return "pnpx";
+    case "bun":
+      return "bunx";
+    default:
+      return "npx";
+  }
+}
 async function installPackage(packageNames, options, logger) {
   const cwd = options.cwd ?? process.cwd();
   const packageManager = (await whichPm(cwd))?.name ?? "npm";
@@ -133,6 +151,51 @@ ${message}`
     return false;
   }
 }
+async function fetchPackageJson(scope, name, tag) {
+  const packageName = `${scope ? `${scope}/` : ""}${name}`;
+  const registry = await getRegistry();
+  const res = await fetch(`${registry}/${packageName}/${tag}`);
+  if (res.status >= 200 && res.status < 300) {
+    return await res.json();
+  } else if (res.status === 404) {
+    return new Error();
+  } else {
+    return new Error(`Failed to fetch ${registry}/${packageName}/${tag} - GET ${res.status}`);
+  }
+}
+async function fetchPackageVersions(packageName) {
+  const registry = await getRegistry();
+  const res = await fetch(`${registry}/${packageName}`, {
+    headers: { accept: "application/vnd.npm.install-v1+json" }
+  });
+  if (res.status >= 200 && res.status < 300) {
+    return await res.json().then((data) => Object.keys(data.versions));
+  } else if (res.status === 404) {
+    return new Error();
+  } else {
+    return new Error(`Failed to fetch ${registry}/${packageName} - GET ${res.status}`);
+  }
+}
+let _registry;
+async function getRegistry() {
+  if (_registry)
+    return _registry;
+  const fallback = "https://registry.npmjs.org";
+  const packageManager = (await preferredPM(process.cwd()))?.name || "npm";
+  try {
+    const { stdout } = await execa(packageManager, ["config", "get", "registry"]);
+    _registry = stdout?.trim()?.replace(/\/$/, "") || fallback;
+    if (!new URL(_registry).host)
+      _registry = fallback;
+  } catch (e) {
+    _registry = fallback;
+  }
+  return _registry;
+}
 export {
-  getPackage
+  fetchPackageJson,
+  fetchPackageVersions,
+  getExecCommand,
+  getPackage,
+  getRegistry
 };

package/dist/core/build/static-build.js

@@ -334,6 +334,10 @@ async function cleanServerOutput(opts, ssrOutputChunkNames, internals) {
     removeEmptyDirs(out);
   }
   if (out.toString() !== opts.settings.config.outDir.toString()) {
+    const fileNames = await fs.promises.readdir(out);
+    await Promise.all(
+      fileNames.filter((fileName) => fileName.endsWith(".d.ts")).map((fileName) => fs.promises.rm(new URL(fileName, out)))
+    );
     await copyFiles(out, opts.settings.config.outDir, true);
     await fs.promises.rm(out, { recursive: true });
     return;

package/dist/core/config/settings.js

@@ -92,7 +92,9 @@ function createBaseSettings(config) {
     middlewares: { pre: [], post: [] },
     watchFiles: [],
     devToolbarApps: [],
-    timer: new AstroTimer()
+    timer: new AstroTimer(),
+    latestAstroVersion: void 0
+    // Will be set later if applicable when the dev server starts
   };
 }
 async function createSettings(config, cwd) {

package/dist/core/constants.js

@@ -1,4 +1,4 @@
-const ASTRO_VERSION = "4.6.4";
+const ASTRO_VERSION = "4.7.0";
 const REROUTE_DIRECTIVE_HEADER = "X-Astro-Reroute";
 const ROUTE_TYPE_HEADER = "X-Astro-Route-Type";
 const DEFAULT_404_COMPONENT = "astro-default-404";

package/dist/core/create-vite.js

@@ -12,12 +12,12 @@ import {
 } from "../content/index.js";
 import astroInternationalization from "../i18n/vite-plugin-i18n.js";
 import astroPrefetch from "../prefetch/vite-plugin-prefetch.js";
+import astroDevToolbar from "../toolbar/vite-plugin-dev-toolbar.js";
 import astroTransitions from "../transitions/vite-plugin-transitions.js";
 import astroPostprocessVitePlugin from "../vite-plugin-astro-postprocess/index.js";
 import { vitePluginAstroServer } from "../vite-plugin-astro-server/index.js";
 import astroVitePlugin from "../vite-plugin-astro/index.js";
 import configAliasVitePlugin from "../vite-plugin-config-alias/index.js";
-import astroDevToolbar from "../vite-plugin-dev-toolbar/vite-plugin-dev-toolbar.js";
 import envVitePlugin from "../vite-plugin-env/index.js";
 import vitePluginFileURL from "../vite-plugin-fileurl/index.js";
 import astroHeadPlugin from "../vite-plugin-head/index.js";

package/dist/core/dev/dev.js

@@ -1,18 +1,51 @@
 import fs from "node:fs";
 import { green } from "kleur/colors";
 import { performance } from "perf_hooks";
+import { gt, major, minor, patch } from "semver";
 import { attachContentServerListeners } from "../../content/index.js";
 import { telemetry } from "../../events/index.js";
 import * as msg from "../messages.js";
 import { ensureProcessNodeEnv } from "../util.js";
 import { startContainer } from "./container.js";
 import { createContainerWithAutomaticRestart } from "./restart.js";
+import {
+  MAX_PATCH_DISTANCE,
+  fetchLatestAstroVersion,
+  shouldCheckForUpdates
+} from "./update-check.js";
 async function dev(inlineConfig) {
   ensureProcessNodeEnv("development");
   const devStart = performance.now();
   await telemetry.record([]);
   const restart = await createContainerWithAutomaticRestart({ inlineConfig, fs });
   const logger = restart.container.logger;
+  const currentVersion = "4.7.0";
+  const isPrerelease = currentVersion.includes("-");
+  if (!isPrerelease) {
+    try {
+      shouldCheckForUpdates(restart.container.settings.preferences).then(async (shouldCheck) => {
+        if (shouldCheck) {
+          const version = await fetchLatestAstroVersion(restart.container.settings.preferences);
+          if (gt(version, currentVersion)) {
+            restart.container.settings.latestAstroVersion = version;
+            const sameMajor = major(version) === major(currentVersion);
+            const sameMinor = minor(version) === minor(currentVersion);
+            const patchDistance = patch(version) - patch(currentVersion);
+            if (sameMajor && sameMinor && patchDistance < MAX_PATCH_DISTANCE) {
+              return;
+            }
+            logger.warn(
+              "SKIP_FORMAT",
+              msg.newVersionAvailable({
+                latestVersion: version
+              })
+            );
+          }
+        }
+      });
+    } catch (e) {
+    }
+  }
   const devServerAddressInfo = await startContainer(restart.container);
   logger.info(
     "SKIP_FORMAT",
@@ -23,8 +56,7 @@ async function dev(inlineConfig) {
       base: restart.container.settings.config.base
     })
   );
-  const currentVersion = "4.6.4";
-  if (currentVersion.includes("-")) {
+  if (isPrerelease) {
     logger.warn("SKIP_FORMAT", msg.prerelease({ currentVersion }));
   }
   if (restart.container.viteServer.config.server?.fs?.strict === false) {

package/dist/core/dev/restart.js

@@ -29,7 +29,11 @@ function shouldRestartContainer({ settings, inlineConfig, restartInFlight }, cha
     shouldRestart = vite.normalizePath(inlineConfig.configFile) === vite.normalizePath(changedFile);
   } else {
     const normalizedChangedFile = vite.normalizePath(changedFile);
-    shouldRestart = configRE.test(normalizedChangedFile) || preferencesRE.test(normalizedChangedFile);
+    shouldRestart = configRE.test(normalizedChangedFile);
+    if (preferencesRE.test(normalizedChangedFile)) {
+      shouldRestart = settings.preferences.ignoreNextPreferenceReload ? false : true;
+      settings.preferences.ignoreNextPreferenceReload = false;
+    }
   }
   if (!shouldRestart && settings.watchFiles.length > 0) {
     shouldRestart = settings.watchFiles.some(

package/dist/core/dev/update-check.d.ts

@@ -0,0 +1,4 @@
+import type { AstroPreferences } from '../../preferences/index.js';
+export declare const MAX_PATCH_DISTANCE = 5;
+export declare function fetchLatestAstroVersion(preferences: AstroPreferences | undefined): Promise<string>;
+export declare function shouldCheckForUpdates(preferences: AstroPreferences): Promise<boolean>;

package/dist/core/dev/update-check.js

@@ -0,0 +1,36 @@
+import ci from "ci-info";
+import { fetchPackageJson } from "../../cli/install-package.js";
+const MAX_PATCH_DISTANCE = 5;
+const CHECK_MS_INTERVAL = 10368e5;
+let _latestVersion = void 0;
+async function fetchLatestAstroVersion(preferences) {
+  if (_latestVersion) {
+    return _latestVersion;
+  }
+  const packageJson = await fetchPackageJson(void 0, "astro", "latest");
+  if (packageJson instanceof Error) {
+    throw packageJson;
+  }
+  const version = packageJson?.version;
+  if (!version) {
+    throw new Error("Failed to fetch latest Astro version");
+  }
+  if (preferences) {
+    await preferences.set("_variables.lastUpdateCheck", Date.now(), { reloadServer: false });
+  }
+  _latestVersion = version;
+  return version;
+}
+async function shouldCheckForUpdates(preferences) {
+  if (ci.isCI) {
+    return false;
+  }
+  const timeSinceLastCheck = Date.now() - await preferences.get("_variables.lastUpdateCheck");
+  const hasCheckUpdatesEnabled = await preferences.get("checkUpdates.enabled");
+  return timeSinceLastCheck > CHECK_MS_INTERVAL && process.env.ASTRO_DISABLE_UPDATE_CHECK !== "true" && hasCheckUpdatesEnabled;
+}
+export {
+  MAX_PATCH_DISTANCE,
+  fetchLatestAstroVersion,
+  shouldCheckForUpdates
+};

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' | 'toolbar' | 'assets' | 'SKIP_FORMAT';
+export type LoggerLabel = 'add' | 'build' | 'check' | 'config' | 'content' | 'deprecated' | 'markdown' | 'router' | 'types' | 'vite' | 'watch' | 'middleware' | 'preferences' | 'redirects' | 'toolbar' | 'assets' | 'update' | 'SKIP_FORMAT';
 export interface LogOptions {
     dest: LogWritable<LogMessage>;
     level: LoggerLevel;

package/dist/core/messages.d.ts

@@ -23,6 +23,9 @@ export declare function serverShortcuts({ key, label }: {
     key: string;
     label: string;
 }): string;
+export declare function newVersionAvailable({ latestVersion }: {
+    latestVersion: string;
+}): string;
 export declare function telemetryNotice(): string;
 export declare function telemetryEnabled(): string;
 export declare function preferenceEnabled(name: string): string;

package/dist/core/messages.js

@@ -14,6 +14,7 @@ import {
   underline,
   yellow
 } from "kleur/colors";
+import { getExecCommand } from "../cli/install-package.js";
 import { getDocsForError, renderErrorMarkdown } from "./errors/dev/utils.js";
 import {
   AstroError,
@@ -36,7 +37,7 @@ function serverStart({
   host,
   base
 }) {
-  const version = "4.6.4";
+  const version = "4.7.0";
   const localPrefix = `${dim("\u2503")} Local    `;
   const networkPrefix = `${dim("\u2503")} Network  `;
   const emptyPrefix = " ".repeat(11);
@@ -69,6 +70,13 @@ function serverStart({
 function serverShortcuts({ key, label }) {
   return [dim("  Press"), key, dim("to"), label].join(" ");
 }
+function newVersionAvailable({ latestVersion }) {
+  const badge = bgYellow(black(` update `));
+  const headline = yellow(`\u25B6 New version of Astro available: ${latestVersion}`);
+  const execCommand = getExecCommand();
+  const details = `  Run ${cyan(`${execCommand} @astrojs/upgrade`)} to update`;
+  return ["", `${badge} ${headline}`, details, ""].join("\n");
+}
 function telemetryNotice() {
   const headline = blue(`\u25B6 Astro collects anonymous usage data.`);
   const why = "  This information helps us improve Astro.";
@@ -261,7 +269,7 @@ function printHelp({
     message.push(
       linebreak(),
       `  ${bgGreen(black(` ${commandName} `))} ${green(
-        `v${"4.6.4"}`
+        `v${"4.7.0"}`
       )} ${headline}`
     );
   }
@@ -291,6 +299,7 @@ export {
   formatErrorMessage,
   fsStrictWarning,
   getNetworkLogging,
+  newVersionAvailable,
   preferenceDefault,
   preferenceDefaultIntro,
   preferenceDisabled,

package/dist/integrations/index.d.ts

@@ -5,6 +5,34 @@ import type { AstroAdapter, AstroConfig, AstroSettings, RouteData } from '../@ty
 import type { SerializedSSRManifest } from '../core/app/types.js';
 import type { PageBuildData } from '../core/build/types.js';
 import type { Logger } from '../core/logger/core.js';
+export declare function getToolbarServerCommunicationHelpers(server: ViteDevServer): {
+    /**
+     * Send a message to the dev toolbar that an app can listen for. The payload can be any serializable data.
+     * @param event - The event name
+     * @param payload - The payload to send
+     */
+    send: <T>(event: string, payload: T) => void;
+    /**
+     * Receive a message from a dev toolbar app.
+     * @param event
+     * @param callback
+     */
+    on: <T_1>(event: string, callback: (data: T_1) => void) => void;
+    /**
+     * Fired when an app is initialized.
+     * @param appId - The id of the app that was initialized
+     * @param callback - The callback to run when the app is initialized
+     */
+    onAppInitialized: (appId: string, callback: (data: Record<string, never>) => void) => void;
+    /**
+     * Fired when an app is toggled on or off.
+     * @param appId - The id of the app that was toggled
+     * @param callback - The callback to run when the app is toggled
+     */
+    onAppToggled: (appId: string, callback: (data: {
+        state: boolean;
+    }) => void) => void;
+};
 export declare function runHookConfigSetup({ settings, command, logger, isRestart, }: {
     settings: AstroSettings;
     command: 'dev' | 'build' | 'preview';

package/dist/integrations/index.js

@@ -33,6 +33,43 @@ function getLogger(integration, logger) {
   Loggers.set(integration, integrationLogger);
   return integrationLogger;
 }
+const serverEventPrefix = "astro-dev-toolbar";
+function getToolbarServerCommunicationHelpers(server) {
+  return {
+    /**
+     * Send a message to the dev toolbar that an app can listen for. The payload can be any serializable data.
+     * @param event - The event name
+     * @param payload - The payload to send
+     */
+    send: (event, payload) => {
+      server.hot.send(event, payload);
+    },
+    /**
+     * Receive a message from a dev toolbar app.
+     * @param event
+     * @param callback
+     */
+    on: (event, callback) => {
+      server.hot.on(event, callback);
+    },
+    /**
+     * Fired when an app is initialized.
+     * @param appId - The id of the app that was initialized
+     * @param callback - The callback to run when the app is initialized
+     */
+    onAppInitialized: (appId, callback) => {
+      server.hot.on(`${serverEventPrefix}:${appId}:initialized`, callback);
+    },
+    /**
+     * Fired when an app is toggled on or off.
+     * @param appId - The id of the app that was toggled
+     * @param callback - The callback to run when the app is toggled
+     */
+    onAppToggled: (appId, callback) => {
+      server.hot.on(`${serverEventPrefix}:${appId}:toggled`, callback);
+    }
+  };
+}
 async function runHookConfigSetup({
   settings,
   command,
@@ -219,7 +256,8 @@ async function runHookServerSetup({
         hookName: "astro:server:setup",
         hookResult: integration.hooks["astro:server:setup"]({
           server,
-          logger: getLogger(integration, logger)
+          logger: getLogger(integration, logger),
+          toolbar: getToolbarServerCommunicationHelpers(server)
         }),
         logger
       });
@@ -384,6 +422,7 @@ function isFunctionPerRouteEnabled(adapter) {
   }
 }
 export {
+  getToolbarServerCommunicationHelpers,
   isFunctionPerRouteEnabled,
   runHookBuildDone,
   runHookBuildGenerated,

package/dist/preferences/defaults.d.ts

@@ -3,5 +3,14 @@ export declare const DEFAULT_PREFERENCES: {
         /** Specifies whether the user has the Dev Overlay enabled */
         enabled: boolean;
     };
+    checkUpdates: {
+        /** Specifies whether the user has the update check enabled */
+        enabled: boolean;
+    };
+    _variables: {
+        /** Time since last update check */
+        lastUpdateCheck: number;
+    };
 };
 export type Preferences = typeof DEFAULT_PREFERENCES;
+export type PublicPreferences = Omit<Preferences, '_variables'>;

package/dist/preferences/defaults.js

@@ -2,6 +2,15 @@ const DEFAULT_PREFERENCES = {
   devToolbar: {
     /** Specifies whether the user has the Dev Overlay enabled */
     enabled: true
+  },
+  checkUpdates: {
+    /** Specifies whether the user has the update check enabled */
+    enabled: true
+  },
+  // Temporary variables that shouldn't be exposed to the users in the CLI, but are still useful to store in preferences
+  _variables: {
+    /** Time since last update check */
+    lastUpdateCheck: 0
   }
 };
 export {

package/dist/preferences/index.d.ts

@@ -1,5 +1,5 @@
 import type { AstroConfig } from '../@types/astro.js';
-import { type Preferences } from './defaults.js';
+import { type Preferences, type PublicPreferences } from './defaults.js';
 type DotKeys<T> = T extends object ? {
     [K in keyof T]: `${Exclude<K, symbol>}${DotKeys<T[K]> extends never ? '' : `.${DotKeys<T[K]>}`}`;
 }[keyof T] : never;
@@ -7,20 +7,28 @@ export type GetDotKey<T extends Record<string | number, any>, K extends string>
 export type PreferenceLocation = 'global' | 'project';
 export interface PreferenceOptions {
     location?: PreferenceLocation;
+    /**
+     * If `true`, the server will be reloaded after setting the preference.
+     * If `false`, the server will not be reloaded after setting the preference.
+     *
+     * Defaults to `true`.
+     */
+    reloadServer?: boolean;
 }
 type DeepPartial<T> = T extends object ? {
     [P in keyof T]?: DeepPartial<T[P]>;
 } : T;
 export type PreferenceKey = DotKeys<Preferences>;
-export interface PreferenceList extends Record<PreferenceLocation, DeepPartial<Preferences>> {
+export interface PreferenceList extends Record<PreferenceLocation, DeepPartial<PublicPreferences>> {
     fromAstroConfig: DeepPartial<Preferences>;
-    defaults: Preferences;
+    defaults: PublicPreferences;
 }
 export interface AstroPreferences {
     get<Key extends PreferenceKey>(key: Key, opts?: PreferenceOptions): Promise<GetDotKey<Preferences, Key>>;
     set<Key extends PreferenceKey>(key: Key, value: GetDotKey<Preferences, Key>, opts?: PreferenceOptions): Promise<void>;
-    getAll(): Promise<Preferences>;
+    getAll(): Promise<PublicPreferences>;
     list(opts?: PreferenceOptions): Promise<PreferenceList>;
+    ignoreNextPreferenceReload: boolean;
 }
 export declare function isValidKey(key: string): key is PreferenceKey;
 export declare function coerce(key: string, value: unknown): any;

package/dist/preferences/index.js

@@ -37,30 +37,37 @@ function createPreferences(config) {
         return project.get(key) ?? global.get(key) ?? dget(DEFAULT_PREFERENCES, key);
       return stores[location].get(key);
     },
-    async set(key, value, { location = "project" } = {}) {
+    async set(key, value, { location = "project", reloadServer = true } = {}) {
       stores[location].set(key, value);
+      if (!reloadServer) {
+        this.ignoreNextPreferenceReload = true;
+      }
     },
     async getAll() {
-      return Object.assign(
+      const allPrefs = Object.assign(
         {},
         DEFAULT_PREFERENCES,
         stores["global"].getAll(),
         stores["project"].getAll()
       );
+      const { _variables, ...prefs } = allPrefs;
+      return prefs;
     },
     async list() {
+      const { _variables, ...defaultPrefs } = DEFAULT_PREFERENCES;
       return {
         global: stores["global"].getAll(),
         project: stores["project"].getAll(),
         fromAstroConfig: mapFrom(DEFAULT_PREFERENCES, config),
-        defaults: DEFAULT_PREFERENCES
+        defaults: defaultPrefs
       };
       function mapFrom(defaults, astroConfig) {
         return Object.fromEntries(
           Object.entries(defaults).map(([key, _]) => [key, astroConfig[key]])
         );
       }
-    }
+    },
+    ignoreNextPreferenceReload: false
   };
 }
 function getGlobalPreferenceDir() {

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

@@ -15,6 +15,6 @@ declare const _default: {
     id: string;
     name: string;
     icon: "astro:logo";
-    init(canvas: ShadowRoot, eventTarget: EventTarget): Promise<void>;
+    init(canvas: ShadowRoot, eventTarget: import("../helpers.js").ToolbarAppEventTarget): Promise<void>;
 };
 export default _default;

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

@@ -59,6 +59,7 @@ var astro_default = {
           link: "https://astro.build/chat"
         }
       ];
+      const hasNewerVersion = window.__astro_dev_toolbar__.latestAstroVersion;
       const windowComponent = createWindowElement(
         `<style>
 				#buttons-container {
@@ -301,6 +302,8 @@ var astro_default = {
 				<section>
 				${astroLogo}
 				<astro-dev-toolbar-badge badge-style="gray" size="large">${window.__astro_dev_toolbar__.version}</astro-dev-toolbar-badge>
+				${hasNewerVersion ? `<astro-dev-toolbar-badge badge-style="green" size="large">${window.__astro_dev_toolbar__.latestAstroVersion} available!</astro-dev-toolbar-badge>
+						` : ""}
 				</section>
 				<astro-dev-toolbar-button id="copy-debug-button">Copy debug info <astro-dev-toolbar-icon icon="copy" /></astro-dev-toolbar-button>
 			</header>

package/dist/runtime/client/dev-toolbar/apps/audit/index.d.ts

@@ -10,6 +10,6 @@ declare const _default: {
     id: string;
     name: string;
     icon: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 1 20 16\"><path fill=\"#fff\" d=\"M.6 2A1.1 1.1 0 0 1 1.7.9h16.6a1.1 1.1 0 1 1 0 2.2H1.6A1.1 1.1 0 0 1 .8 2Zm1.1 7.1h6a1.1 1.1 0 0 0 0-2.2h-6a1.1 1.1 0 0 0 0 2.2ZM9.3 13H1.8a1.1 1.1 0 1 0 0 2.2h7.5a1.1 1.1 0 1 0 0-2.2Zm11.3 1.9a1.1 1.1 0 0 1-1.5 0l-1.7-1.7a4.1 4.1 0 1 1 1.6-1.6l1.6 1.7a1.1 1.1 0 0 1 0 1.6Zm-5.3-3.4a1.9 1.9 0 1 0 0-3.8 1.9 1.9 0 0 0 0 3.8Z\"/></svg>";
-    init(canvas: ShadowRoot, eventTarget: EventTarget): Promise<void>;
+    init(canvas: ShadowRoot, eventTarget: import("../../helpers.js").ToolbarAppEventTarget): Promise<void>;
 };
 export default _default;

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

@@ -2,6 +2,6 @@ declare const _default: {
     id: string;
     name: string;
     icon: "gear";
-    init(canvas: ShadowRoot, eventTarget: EventTarget): void;
+    init(canvas: ShadowRoot, eventTarget: import("../helpers.js").ToolbarAppEventTarget): void;
 };
 export default _default;

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

@@ -2,6 +2,6 @@ declare const _default: {
     id: string;
     name: string;
     icon: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#fff\" d=\"M7.9 1.5v-.4a1.1 1.1 0 0 1 2.2 0v.4a1.1 1.1 0 1 1-2.2 0Zm-6.4 8.6a1.1 1.1 0 1 0 0-2.2h-.4a1.1 1.1 0 0 0 0 2.2h.4ZM12 3.7a1.1 1.1 0 0 0 1.4-.7l.4-1.1a1.1 1.1 0 0 0-2.1-.8l-.4 1.2a1.1 1.1 0 0 0 .7 1.4Zm-9.7 7.6-1.2.4a1.1 1.1 0 1 0 .8 2.1l1-.4a1.1 1.1 0 1 0-.6-2ZM20.8 17a1.9 1.9 0 0 1 0 2.6l-1.2 1.2a1.9 1.9 0 0 1-2.6 0l-4.3-4.2-1.6 3.6a1.9 1.9 0 0 1-1.7 1.2A1.9 1.9 0 0 1 7.5 20L2.7 5a1.9 1.9 0 0 1 2.4-2.4l15 5a1.9 1.9 0 0 1 .2 3.4l-3.7 1.6 4.2 4.3ZM19 18.3 14.6 14a1.9 1.9 0 0 1 .6-3l3.2-1.5L5.1 5.1l4.3 13.3 1.5-3.2a1.9 1.9 0 0 1 3-.6l4.4 4.4.7-.7Z\"/></svg>";
-    init(canvas: ShadowRoot, eventTarget: EventTarget): void;
+    init(canvas: ShadowRoot, eventTarget: import("../helpers.js").ToolbarAppEventTarget): void;
 };
 export default _default;

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

@@ -1,4 +1,5 @@
-import { loadDevToolbarApps } from "astro:dev-toolbar";
+import { loadDevToolbarApps } from "astro:toolbar:internal";
+import { ToolbarAppEventTarget } from "./helpers.js";
 import { settings } from "./settings.js";
 let overlay;
 document.addEventListener("DOMContentLoaded", async () => {
@@ -60,7 +61,7 @@ document.addEventListener("DOMContentLoaded", async () => {
     info: '<svg viewBox="0 0 10 10" style="--fill:var(--fill-default);--fill-default:#3645D9;--fill-hover:#BDC3FF;"><rect width="9" height="9" x=".5" y=".5" fill="var(--fill)" stroke="#13151A" stroke-width="2" rx="1.5"/></svg>'
   };
   const prepareApp = (appDefinition, builtIn) => {
-    const eventTarget = new EventTarget();
+    const eventTarget = new ToolbarAppEventTarget();
     const app = {
       ...appDefinition,
       builtIn,

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

@@ -0,0 +1,61 @@
+type NotificationPayload = {
+    state: true;
+    level?: 'error' | 'warn' | 'info';
+} | {
+    state: false;
+};
+type AppStatePayload = {
+    state: boolean;
+};
+type AppToggledEvent = (opts: {
+    state: boolean;
+}) => void;
+type ToolbarPlacementUpdatedEvent = (opts: {
+    placement: 'bottom-left' | 'bottom-center' | 'bottom-right';
+}) => void;
+export declare class ToolbarAppEventTarget extends EventTarget {
+    constructor();
+    /**
+     * Toggle the notification state of the toolbar
+     * @param options - The notification options
+     * @param options.state - The state of the notification
+     * @param options.level - The level of the notification, optional when state is false
+     */
+    toggleNotification(options: NotificationPayload): void;
+    /**
+     * Toggle the app state on or off
+     * @param options - The app state options
+     * @param options.state - The new state of the app
+     */
+    toggleState(options: AppStatePayload): void;
+    /**
+     * Fired when the app is toggled on or off
+     * @param callback - The callback to run when the event is fired, takes an object with the new state
+     */
+    onToggled(callback: AppToggledEvent): void;
+    /**
+     * Fired when the toolbar placement is updated by the user
+     * @param callback - The callback to run when the event is fired, takes an object with the new placement
+     */
+    onToolbarPlacementUpdated(callback: ToolbarPlacementUpdatedEvent): void;
+}
+export declare const serverHelpers: {
+    /**
+     * Send a message to the server, the payload can be any serializable data.
+     *
+     * The server can listen for this message in the `astro:server:config` hook of an Astro integration, using the `toolbar.on` method.
+     *
+     * @param event - The event name
+     * @param payload - The payload to send
+     */
+    send: <T>(event: string, payload: T) => void;
+    /**
+     * Receive a message from the server.
+     * @param event - The event name
+     * @param callback - The callback to run when the event is received.
+     * The payload's content will be passed to the callback as an argument
+     */
+    on: <T_1>(event: string, callback: (data: T_1) => void) => void;
+};
+export type ToolbarServerHelpers = typeof serverHelpers;
+export {};

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

@@ -0,0 +1,87 @@
+class ToolbarAppEventTarget extends EventTarget {
+  constructor() {
+    super();
+  }
+  /**
+   * Toggle the notification state of the toolbar
+   * @param options - The notification options
+   * @param options.state - The state of the notification
+   * @param options.level - The level of the notification, optional when state is false
+   */
+  toggleNotification(options) {
+    this.dispatchEvent(
+      new CustomEvent("toggle-notification", {
+        detail: {
+          state: options.state,
+          level: options.state === true ? options.level : void 0
+        }
+      })
+    );
+  }
+  /**
+   * Toggle the app state on or off
+   * @param options - The app state options
+   * @param options.state - The new state of the app
+   */
+  toggleState(options) {
+    this.dispatchEvent(
+      new CustomEvent("app-toggled", {
+        detail: {
+          state: options.state
+        }
+      })
+    );
+  }
+  /**
+   * Fired when the app is toggled on or off
+   * @param callback - The callback to run when the event is fired, takes an object with the new state
+   */
+  onToggled(callback) {
+    this.addEventListener("app-toggled", (evt) => {
+      if (!(evt instanceof CustomEvent))
+        return;
+      callback(evt.detail);
+    });
+  }
+  /**
+   * Fired when the toolbar placement is updated by the user
+   * @param callback - The callback to run when the event is fired, takes an object with the new placement
+   */
+  onToolbarPlacementUpdated(callback) {
+    this.addEventListener("placement-updated", (evt) => {
+      if (!(evt instanceof CustomEvent))
+        return;
+      callback(evt.detail);
+    });
+  }
+}
+const serverHelpers = {
+  /**
+   * Send a message to the server, the payload can be any serializable data.
+   *
+   * The server can listen for this message in the `astro:server:config` hook of an Astro integration, using the `toolbar.on` method.
+   *
+   * @param event - The event name
+   * @param payload - The payload to send
+   */
+  send: (event, payload) => {
+    if (import.meta.hot) {
+      import.meta.hot.send(event, payload);
+    }
+  },
+  /**
+   * Receive a message from the server.
+   * @param event - The event name
+   * @param callback - The callback to run when the event is received.
+   * The payload's content will be passed to the callback as an argument
+   */
+  on: (event, callback) => {
+    if (import.meta.hot) {
+      import.meta.hot.on(event, callback);
+    }
+  }
+};
+export {
+  ToolbarAppEventTarget,
+  serverHelpers
+};

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

@@ -1,4 +1,5 @@
-import type { DevToolbarApp as DevToolbarAppDefinition } from '../../../@types/astro.js';
+import type { ResolvedDevToolbarApp as DevToolbarAppDefinition } from '../../../@types/astro.js';
+import { type ToolbarAppEventTarget } from './helpers.js';
 import { type Icon } from './ui-library/icons.js';
 import { type Placement } from './ui-library/window.js';
 export type DevToolbarApp = DevToolbarAppDefinition & {
@@ -9,7 +10,7 @@ export type DevToolbarApp = DevToolbarAppDefinition & {
         state: boolean;
         level?: 'error' | 'warning' | 'info';
     };
-    eventTarget: EventTarget;
+    eventTarget: ToolbarAppEventTarget;
 };
 export declare class AstroDevToolbar extends HTMLElement {
     shadowRoot: ShadowRoot;

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

@@ -1,3 +1,4 @@
+import { serverHelpers } from "./helpers.js";
 import { settings } from "./settings.js";
 import { getIconElement, isDefinedIcon } from "./ui-library/icons.js";
 import {} from "./ui-library/window.js";
@@ -340,7 +341,7 @@ class AstroDevToolbar extends HTMLElement {
     app.status = "loading";
     try {
       settings.logger.verboseLog(`Initializing app ${app.id}`);
-      await app.init?.(shadowRoot, app.eventTarget);
+      await app.init?.(shadowRoot, app.eventTarget, serverHelpers);
       app.status = "ready";
       if (import.meta.hot) {
         import.meta.hot.send(`${WS_EVENT_NAME}:${app.id}:initialized`);

package/dist/toolbar/index.d.ts

@@ -0,0 +1,2 @@
+import type { DevToolbarApp } from '../@types/astro.js';
+export declare function defineToolbarApp(app: DevToolbarApp): DevToolbarApp;

package/dist/toolbar/index.js

@@ -0,0 +1,6 @@
+function defineToolbarApp(app) {
+  return app;
+}
+export {
+  defineToolbarApp
+};

package/dist/{vite-plugin-dev-toolbar → toolbar}/vite-plugin-dev-toolbar.js

@@ -1,7 +1,7 @@
 import { telemetry } from "../events/index.js";
 import { eventAppToggled } from "../events/toolbar.js";
-const VIRTUAL_MODULE_ID = "astro:dev-toolbar";
-const resolvedVirtualModuleId = "\0" + VIRTUAL_MODULE_ID;
+const PRIVATE_VIRTUAL_MODULE_ID = "astro:toolbar:internal";
+const resolvedPrivateVirtualModuleId = "\0" + PRIVATE_VIRTUAL_MODULE_ID;
 function astroDevToolbar({ settings, logger }) {
   let telemetryTimeout;
   return {
@@ -15,8 +15,8 @@ function astroDevToolbar({ settings, logger }) {
       };
     },
     resolveId(id) {
-      if (id === VIRTUAL_MODULE_ID) {
-        return resolvedVirtualModuleId;
+      if (id === PRIVATE_VIRTUAL_MODULE_ID) {
+        return resolvedPrivateVirtualModuleId;
       }
     },
     configureServer(server) {
@@ -49,22 +49,43 @@ ${args.error}`
       });
     },
     async load(id) {
-      if (id === resolvedVirtualModuleId) {
+      if (id === resolvedPrivateVirtualModuleId) {
         return `
 					export const loadDevToolbarApps = async () => {
 						return (await Promise.all([${settings.devToolbarApps.map(
-          (plugin) => `safeLoadPlugin(async () => (await import(${JSON.stringify(
+          (plugin) => `safeLoadPlugin(${JSON.stringify(
             plugin
-          )})).default, ${JSON.stringify(plugin)})`
-        ).join(",")}])).filter(app => app);
+          )}, async () => (await import(${JSON.stringify(
+            typeof plugin === "string" ? plugin : plugin.entrypoint
+          )})).default, ${JSON.stringify(
+            typeof plugin === "string" ? plugin : plugin.entrypoint
+          )})`
+        ).join(",")}]));
 					};
 
-					async function safeLoadPlugin(importEntrypoint, entrypoint) {
+					async function safeLoadPlugin(appDefinition, importEntrypoint, entrypoint) {
 						try {
-							const app = await importEntrypoint();
+							let app;
+							if (typeof appDefinition === 'string') {
+								app = await importEntrypoint();
 
-							if (typeof app !== 'object' || !app.id || !app.name) {
-								throw new Error("Apps must default export an object with an id, and a name.");
+								if (typeof app !== 'object' || !app.id || !app.name) {
+									throw new Error("Apps must default export an object with an id, and a name.");
+								}
+							} else {
+								app = appDefinition;
+
+								if (typeof app !== 'object' || !app.id || !app.name || !app.entrypoint) {
+									throw new Error("Apps must be an object with an id, a name and an entrypoint.");
+								}
+
+								const loadedApp = await importEntrypoint();
+
+								if (typeof loadedApp !== 'object') {
+									throw new Error("App entrypoint must default export an object.");
+								}
+
+								app = { ...app, ...loadedApp };
 							}
 
 							return app;

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

@@ -56,6 +56,7 @@ class DevPipeline extends Pipeline {
         const additionalMetadata = {
           root: url.fileURLToPath(settings.config.root),
           version: ASTRO_VERSION,
+          latestAstroVersion: settings.latestAstroVersion,
           debugInfo: await getInfoOutput({ userConfig: settings.config, print: false })
         };
         const children = `window.__astro_dev_toolbar__ = ${JSON.stringify(additionalMetadata)}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro",
-  "version": "4.6.4",
+  "version": "4.7.0",
   "description": "Astro is a modern site builder with web best practices, performance, and DX front-of-mind.",
   "type": "module",
   "author": "withastro",
@@ -53,6 +53,7 @@
     "./client/*": "./dist/runtime/client/*",
     "./components": "./components/index.ts",
     "./components/*": "./components/*",
+    "./toolbar": "./dist/toolbar/index.js",
     "./assets": "./dist/assets/index.js",
     "./assets/utils": "./dist/assets/utils/index.js",
     "./assets/endpoint/*": "./dist/assets/endpoint/*.js",
@@ -167,7 +168,7 @@
     "@astrojs/telemetry": "3.1.0"
   },
   "optionalDependencies": {
-    "sharp": "^0.32.6"
+    "sharp": "^0.33.3"
   },
   "devDependencies": {
     "@astrojs/check": "^0.5.10",

package/tsconfigs/strictest.json

@@ -19,8 +19,6 @@
     // Report an error for unreachable code instead of just a warning.
     "allowUnreachableCode": false,
     // Report an error for unused labels instead of just a warning.
-    "allowUnusedLabels": false,
-    // Disallow JavaScript files from being imported
-    "allowJs": false
+    "allowUnusedLabels": false
   }
 }