refactor(core): replace getAddress with placeholder-based address injection

packages/core/src/dev/constants.ts

@@ -0,0 +1 @@
+export const MIGHTY_DEV_PLACEHOLDER_ADDRESS = "http://mighty-placeholder.test";

packages/core/src/dev/resolve.ts

@@ -1,6 +1,7 @@
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import type { DevEnvironment } from "vite";
+import { MIGHTY_DEV_PLACEHOLDER_ADDRESS } from "./constants";
 
 /**
  * Creates the `resolve` callback passed to AstroContainer.
@@ -9,20 +10,18 @@ import type { DevEnvironment } from "vite";
  * fully-qualified Vite dev-server URLs the browser can fetch.
  */
 export function createResolve(
-  getAddress: () => string,
   ssrEnvironment: DevEnvironment,
   root: URL,
 ): (s: string) => Promise<string> {
   return async (s: string) => {
-    const address = getAddress();
     if (s.startsWith("astro:scripts")) {
-      return `${address}/@id/${s}`;
+      return `${MIGHTY_DEV_PLACEHOLDER_ADDRESS}/@id/${s}`;
     }
     if (s.startsWith("/@id")) {
-      return `${address}${s}`;
+      return `${MIGHTY_DEV_PLACEHOLDER_ADDRESS}${s}`;
     }
     const resolved = await resolveIdToUrl(ssrEnvironment, s, root);
-    return `${address}${resolved}`;
+    return `${MIGHTY_DEV_PLACEHOLDER_ADDRESS}${resolved}`;
   };
 }
 

packages/core/src/dev/setup.ts

@@ -13,11 +13,11 @@ import { getStylesForURL } from "@/dev/css";
 import type {
   MightyDevMiddleware,
   MightyDevOptions,
-  MightyRenderRequest,
+  MightyRenderDevRequest,
 } from "@/types";
 import { dotStringToPath } from "@/utils/dotStringToPath";
 import { injectTagsIntoHead } from "@/utils/injectTagsIntoHead";
-import { rewriteFsUrls } from "@/utils/rewriteFsUrls";
+import { MIGHTY_DEV_PLACEHOLDER_ADDRESS } from "./constants";
 import type {
   MightyRenderFunction,
   MightyStartContainerFunction,
@@ -108,11 +108,7 @@ export async function setupDev(
       createContainer: MightyStartContainerFunction;
     };
 
-  const resolve = createResolve(
-    options.getAddress,
-    viteServer.environments.ssr,
-    finalConfig.root,
-  );
+  const resolve = createResolve(viteServer.environments.ssr, finalConfig.root);
 
   await createContainer(loadedRenderers, resolve);
 
@@ -138,19 +134,19 @@ export async function setupDev(
           tagName: "script",
           properties: {
             type: "module",
-            src: `${options.getAddress()}/@id/astro:scripts/page.js`,
+            src: `${MIGHTY_DEV_PLACEHOLDER_ADDRESS}/@id/astro:scripts/page.js`,
           },
           children: [],
         },
       ]
     : () => [];
 
   const renderComponentByPath = async (
-    data: Omit<MightyRenderRequest, "component"> & {
+    data: Omit<MightyRenderDevRequest, "component"> & {
       componentPath: `${string}.astro`;
     },
   ) => {
-    const { componentPath, props, context, partial = true } = data;
+    const { componentPath, props, context, partial = true, address } = data;
 
     const [rawRenderedComponent, styleTags] = await Promise.all([
       renderComponent({
@@ -172,17 +168,18 @@ export async function setupDev(
       ),
     ]);
 
-    const renderedComponent = rewriteFsUrls(
-      rawRenderedComponent,
-      options.getAddress(),
+    // Rewrite image URLs to include the dev address
+    const renderedComponent = rawRenderedComponent.replace(
+      /(["'(])\/@fs\//g,
+      `$1${MIGHTY_DEV_PLACEHOLDER_ADDRESS}/@fs/`,
     );
 
     const viteClientScript: Element = {
       type: "element",
       tagName: "script",
       properties: {
         type: "module",
-        src: `${options.getAddress()}/@vite/client`,
+        src: `${MIGHTY_DEV_PLACEHOLDER_ADDRESS}/@vite/client`,
       },
       children: [],
     };
@@ -196,15 +193,15 @@ export async function setupDev(
         ...headInlineScriptTags,
       ],
       partial,
-    );
+    ).replaceAll(MIGHTY_DEV_PLACEHOLDER_ADDRESS, address);
   };
 
   return {
     viteMiddleware: viteServer.middlewares,
     stop: () => viteServer.close(),
-    render: async (request: MightyRenderRequest) => {
+    render: async (request: MightyRenderDevRequest) => {
       try {
-        const { component, props, context, partial } = request;
+        const { component, props, context, partial, address } = request;
 
         const componentPath: `${string}.astro` = `${path.join(
           finalConfig.srcDir.pathname,
@@ -226,6 +223,7 @@ export async function setupDev(
             props,
             context,
             partial,
+            address,
           }),
         };
       } catch (error) {
@@ -249,6 +247,7 @@ export async function setupDev(
             },
             context: {},
             partial: false,
+            address: request.address,
           }),
         };
       }

packages/core/src/types.ts

@@ -13,12 +13,6 @@ export type MightyServerOptions = {
 };
 
 export type MightyDevOptions = MightyServerOptions & {
-  /**
-   * Specifies the address the Mighty development server will be available at.
-   *
-   * This is used to get correct paths for client-side assets.
-   */
-  getAddress: () => string;
   /**
    * Whether to show the Mighty error page when an error occurs.
    * @default true
@@ -49,10 +43,17 @@ export type MightyRenderRequest = {
   partial?: boolean;
 };
 
+export type MightyRenderDevRequest = MightyRenderRequest & {
+  /**
+   * The address the Mighty development server is available at.
+   */
+  address: string;
+};
+
 export type MightyDevMiddleware = {
   /** Renders an Astro component. */
   render: (
-    req: MightyRenderRequest,
+    req: MightyRenderDevRequest,
   ) => Promise<{ status: number; content: string }>;
   /**
    * The Connect middleware provider by the Vite/Astro development server.

packages/core/tests/fixture.ts

@@ -6,10 +6,16 @@ import { toFetchResponse, toReqRes } from "fetch-to-node";
 import { build } from "@/build";
 import { setupDev } from "@/dev/setup";
 import { setupStart } from "@/start/setup";
-import type { MightyDevOptions, MightyServerOptions } from "@/types";
+import type {
+  MightyDevOptions,
+  MightyRenderRequest,
+  MightyServerOptions,
+} from "@/types";
 import { dotStringToPath } from "@/utils/dotStringToPath";
 
-export type DevRenderFunction = Awaited<ReturnType<typeof setupDev>>["render"];
+export type DevRenderFunction = (
+  req: MightyRenderRequest,
+) => Promise<{ status: number; content: string }>;
 export type StartRenderFunction = Awaited<
   ReturnType<typeof setupStart>
 >["render"];
@@ -21,7 +27,7 @@ export type GetFromViteMiddlewareFunction = (
 export function getFixture(fixtureName: string): {
   fixtureRoot: string;
   outDir: string;
-  startDevServer: (params?: Omit<MightyDevOptions, "getAddress">) => Promise<{
+  startDevServer: (params?: MightyDevOptions) => Promise<{
     render: DevRenderFunction;
     getFromViteMiddleware: GetFromViteMiddlewareFunction;
     stop: () => Promise<void>;
@@ -60,12 +66,14 @@ export function getFixture(fixtureName: string): {
     });
   };
 
+  const DEV_TEST_ADDRESS = "http://host-placeholder.test";
+
   return {
     fixtureRoot,
     outDir,
     startDevServer: async (params) => {
       const {
-        render,
+        render: rawRender,
         stop: stopDevServer,
         viteMiddleware,
       } = await setupDev({
@@ -77,11 +85,10 @@ export function getFixture(fixtureName: string): {
           },
           params?.config ?? {},
         ),
-        getAddress: () => "http://host-placeholder.test",
       });
 
       return {
-        render,
+        render: (req) => rawRender({ ...req, address: DEV_TEST_ADDRESS }),
         getFromViteMiddleware: async (path: string) => {
           const { req, res } = toReqRes(
             new Request(

packages/hono/src/dev.ts

@@ -8,35 +8,33 @@ import { runConnectMiddleware } from "./utils/runConnectMiddleware.ts";
 const MIGHTY_DEV_ROOT = "/__MIGHTY_DEV_ADDRESS__";
 
 export function devMiddleware(
-  options?: Omit<MightyDevOptions, "getAddress">,
+  options?: MightyDevOptions,
 ): StartMightyServerMiddlewareHandler {
-  let rootAddress: string = "";
   const mightyConfig: MightyDevOptions = {
     ...options,
     config: mergeConfig(
       { root: "./astro", vite: { base: MIGHTY_DEV_ROOT } },
       options?.config ?? {},
     ),
-    getAddress: () => new URL(MIGHTY_DEV_ROOT, rootAddress).toString(),
   };
 
   const setupDevPromise = dev(mightyConfig);
 
   return createMiddleware(async (c, next) => {
     const { render, viteMiddleware } = await setupDevPromise;
 
-    if (!rootAddress) {
-      rootAddress = new URL(c.req.url).origin;
-    }
-
     if (c.req.method === "GET" && c.req.path.includes(MIGHTY_DEV_ROOT)) {
       return runConnectMiddleware(viteMiddleware, c);
     }
 
+    const address = new URL(
+      MIGHTY_DEV_ROOT,
+      new URL(c.req.url).origin,
+    ).toString();
     const sharedData: Record<string, unknown> = {};
 
     c.setRenderer(async (req) => {
-      const response = await render({ ...req, context: sharedData });
+      const response = await render({ ...req, context: sharedData, address });
       return c.html(response.content, response.status as UnofficialStatusCode);
     });