Unlisted
Like1
importLatest
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Viewing readonly version of main branch: v30View latest version
Avoid stale dependencies in cache by following the esm.town/v/ redirect to the
versioned URL, and importing that dynamically. Handy when enhancing/hotfixing a
dependency, in parallel with feature development.
Be sure to switch back to static import * from * in production, to take
advantage of performance/security/version pinning of lockfile caching.
A dependency,
// in user/dependency/main.tsx
export foo = "old value"
Val in another project. All three below evaluate foo properly 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");
Then if the dependency changes
export foo = "new value"
Static and dynamic imports are stuck on the old, cached value, while
importLatest fetches the new
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"
Be sure to invoke after all static imports, as those must come first.
import {staticImport} from ...
import importLatest from "https://esm.town/v/peterqliu/importLatest"
const {gimmeLatest} = await importLatest("https://esm.town/v/me/thisDependencyJustChanged");