importLatest

importLatest resolves a module's latest version at runtime, and imports it dynamically to bypass the importer's lockfile cache. This greatly improves the experience of iterating on both a feature and its dependencies simultaneously.

Note: Remember back to static import statements for production, to reap benefits from lockfile caching, version pinning, and security.

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",
);

ValTown updates all lockfile dependencies within the same project, but not across projects. To illustrate:

Given a dependency,

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

and importing it from outside the project, 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");

But if the dependency changes,

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"