Javascript – How are ES6 module imports with HTTP redirects supposed to work?

Context

How are ES6 module imports with HTTP redirects supposed to work?

Before getting to an answer… I interpret the question to be asking how:

• import specifiers which are also valid URLs
• that cause network requests to be made which result in responses that are categorized as URL redirection
• will resolve to specific module data, and whether multiple redirections to the same resource will result in multiple evaluations of the same module code

Answer

Before anything else: you were correct when you said:

…this is not part of the ECMAScript spec…

Module specifiers are indeed simply opaque strings — a given runtime can resolve specifiers however it is programmed to do so.

Some specifiers might resemble URLs, and a runtime might or might not resolve the specifier by making a network request. Or the runtime might implement its own internal specifier mappings… or it might implement a caching layer… or any other number of intermediate steps between parsing the specifier string and resolving module data. The spec doesn’t prescribe how this should happen, which allows for flexibility.

There are no committed alignments across runtimes in regard to the way that URL-like specifiers should be resolved to module data (or whether those modules should be evaluated more than once), and — as you observed — they aren’t implemented in the same way. The network layer itself in each runtime can also be implemented in an arbitrary way.

For these reasons, there are no guarantees of conformity beyond what each runtime provides for itself. You’ll have to discover and verify claims for yourself.

Toward helping you test various runtimes

Below, I will provide some code that you can use to test various runtimes/browsers. It was created and tested using Deno v1.45.3, but you should be able to adapt the code in the server module to other JS runtimes — I used only ECMA and WHATWG APIs (nothing Deno-specific):

.env:

HOSTNAME=localhost
PORT=8000

deno.json:

{
  "compilerOptions": {
    "exactOptionalPropertyTypes": true,
    "noImplicitOverride": true,
    "noImplicitReturns": true,
    "noUncheckedIndexedAccess": true,
    "useUnknownInCatchVariables": true,
    "lib": ["deno.window"]
  },
  "imports": {
    "@std/assert": "jsr:@std/assert@^1.0.0"
  },
  "tasks": {
    "serve": "deno run --no-prompt --env --allow-env=HOSTNAME,PORT --allow-net=localhost:8000 serve.ts",
    "test": "deno test --no-prompt --env --allow-env=HOSTNAME,PORT --allow-net=localhost:8000 server.test.ts"
  }
}

env.ts:

import { assert } from "@std/assert/assert";

export function getPartialEnv<const T extends string>(
  keys: Iterable<T>,
): Record<T, string> {
  const env = {} as Record<T, string>;
  for (const k of keys) {
    const v = Deno.env.get(k);
    assert(v, `Environment variable not found for "${k}"`);
    env[k] = v;
  }
  return env;
}

export default getPartialEnv(["HOSTNAME", "PORT"]);

serve.ts:

import env from "./env.ts";

import { handleRequest } from "./server.ts";

await using server = Deno.serve({
  handler: handleRequest,
  hostname: env.HOSTNAME,
  port: Number(env.PORT),
});

await server.finished;

server.test.ts:

import { assertEquals } from "@std/assert/equals";
import { assertStrictEquals } from "@std/assert/strict-equals";

import env from "./env.ts";

import { handleRequest, pathPrefix } from "./server.ts";

Deno.test("server", async (ctx) => {
  const {
    promise: serverStarted,
    resolve: resolveServerStarted,
  } = Promise.withResolvers<void>();

  await using server = Deno.serve({
    handler: handleRequest,
    hostname: env.HOSTNAME,
    onListen: () => resolveServerStarted(),
    port: Number(env.PORT),
  });

  await ctx.step("starts", () => serverStarted);

  await ctx.step("responds with side-effect modules", async () => {
    const specifier =
      new URL(`http://${env.HOSTNAME}:${env.PORT}${pathPrefix}/b.js`).href;
    await import(specifier);
  });

  await ctx.step("expected modules are evaluated only once", async (ctx) => {
    const countsActual = (globalThis as typeof globalThis & {
      _counts: Partial<Record<string, number>>;
    })._counts;

    const countsExpected: Partial<Record<string, number>> = {};

    const fileNames = ["a.js", "b.js"];

    for (const fileName of fileNames) {
      const key =
        new URL(`http://${env.HOSTNAME}:${env.PORT}${pathPrefix}/${fileName}`)
          .href;
      countsExpected[key] = 1;
      await ctx.step(
        `${JSON.stringify(fileName)}`,
        () => assertStrictEquals(countsActual[key], 1),
      );
    }

    await ctx.step(
      "no additional modules evaluated",
      () => assertEquals(countsActual, countsExpected),
    );
    // console.log(countsActual);
  });

  await ctx.step("stops", async () => {
    await Promise.all([server.shutdown(), server.finished]);
  });
});

server.ts:

// URL path prefix for module cache isolation
export const pathPrefix = "/so-78785224";

// increment a global count each time a module is evaluated
const incrementEvalCount = `const counts = (globalThis._counts ??= {});
counts[import.meta.url] = (counts[import.meta.url] ?? 0) + 1;`;

const indexHtml = `<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Module evalutaion test - Stack Overflow Question ID 78785224</title>
    <script type="module">
        import "${pathPrefix}/b.js";
        console.log("module evaluation counts:", globalThis._counts);
    </script>
</head>
<body>See dev tools</body>
</html>`;

function createTextResponse(text: string, contentType: string): Response {
  const bytes = new TextEncoder().encode(text);
  return new Response(bytes, {
    headers: new Headers([
      ["Content-Length", bytes.byteLength.toString()],
      ["Content-Type", contentType],
    ]),
  });
}

export function handleRequest(request: Request): Response {
  const url = new URL(request.url);

  if (url.pathname === "/") return createTextResponse(indexHtml, "text/html");

  if (url.pathname.startsWith(pathPrefix)) {
    switch (url.pathname.slice(pathPrefix.length)) {
      case "/a.js": {
        const moduleText = `${incrementEvalCount}nexport default "a"n`;
        return createTextResponse(moduleText, "text/javascript");
      }
      case "/a2.js": {
        // redirect
        return new Response(null, {
          headers: new Headers([
            ["Location", new URL("./a.js", url.href).href],
          ]),
          status: 301,
        });
      }
      case "/b.js": {
        const moduleText =
          `import "./a.js";nimport "./a2.js";n${incrementEvalCount}nexport default "b"n`;
        return createTextResponse(moduleText, "text/javascript");
      }
    }
  }
  return new Response("Not found", { status: 404 });
}

export default { fetch: handleRequest };

You can run the server with the following command in order to test various runtimes:

deno task serve

…or test with Deno directly using

deno task test