importLatest resolves the latest version of a Val Town module at runtime, bypassing cached redirects. This is useful during active development when you need to pick up changes to a dependency immediately, especially when iterating on a shared utility alongside a feature that consumes it.

It works by first issuing a HEAD request to the esm.town/v/ URL to follow its redirect to the versioned URL, then dynamically importing from that resolved URL.

Note: Switch back to static import statements before shipping to production. Static imports benefit from lockfile caching, version pinning, and faster cold starts.

Given a dependency:

// user/dependency/main.tsx
export const foo = "old value";

All three of these initially evaluate foo as "old value":

import { foo } from "user/dependency/main.tsx";
const { foo } = await import("user/dependency/main.tsx");
const { foo } = await importLatest("user/dependency/main.tsx");

After the dependency is updated:

export const foo = "new value";

Static and dynamic imports remain stuck on the cached value, while importLatest fetches the latest:

import { foo } from "user/dependency/main.tsx"; // foo === "old value"
const { foo } = await import("user/dependency/main.tsx"); // foo === "old value"
const { foo } = await importLatest("user/dependency/main.tsx"); // foo === "new value"

Returns: A promise that resolves to the module's exports.

Throws: If the HEAD request fails, returns a non-OK status, or the resolved URL cannot be imported.

note that importLatest must be called after all static import statements, as static imports are hoisted and must be resolved first.

import { staticImport } from "...";
import importLatest from "https://esm.town/v/peterqliu/importLatest";

const { gimmeLatest } = await importLatest(
  "https://esm.town/v/me/thisDependencyJustChanged",
);