Published 📅: ....
Last modified 📝: ....
Share this post on BlueskySee discussion on Bluesky
I know Import Maps aren't all that new, however I've recently been messing around with them in a demo app that is natively using ESModules and it's such a nice developer experience!
For those that aren't aware, import maps allow you to configure/tell the browser how it should resolve bare specifiers when it encounters them. Here's an example in practice:
<!-- Import Map -->
<script type="importmap">
{
"imports": {
"<bare-specifier>": "<where-to-resolve-that-import-from>",
"react": "https://esm.sh/react@19.0.0"
}
}
</script>This import map will "remap" any "react" bare specifier to "https://esm.sh/react@19.0.0", which is using esm.sh to transform any npm package to a compatible ESModule on the fly!
Now we can ship code that looks like this to the browser and it will work like it would in Node.js, Deno, Bun, or your favorite JS runtime!
import {createElement} from 'react';
let el = createElement('marquee');Import Maps are cool and all - but I also wanted to highlight a really cool feature of using them along with package.json#imports within an isomorphic application.
package.json#imports (the "imports" key within a package.json file) is similar to the import map concept but for Node.js projects. It allows code being run within Node to similarly resolve import specifiers to different locations, here's an example mapping #framework/* imports to a specific directory:
{
"imports": {
"#framework/*": "./framework/*.mjs"
}
}// will be effectively the same as:
// import {foo} from './framework/foo.mjs'
import {foo} from '#framework/foo';We can combine these two features to build an isomorphic application, and importantly we can also resolve imports differently based on the environment (e.g. resolve a package that uses Node.js features on the server, and then a stub or alternative on the client)!
I'll leave a bit of this as an exercise to the reader, but I do have an example codebase here that you can look at to see how it works in practice if you don't want to derive the solution yourself 😅.
Matt Hamlin
@matthamlin.me
A brief look at Import Maps and package.json#imports to support isomorphic JavaScript applications!
Loading...
Published: ....
Are we reinventing the wheel when it comes to onboarding new AI agents to a codebase, when we already have primitives available for onboarding humans?
Published: ....
Have you ever found the need to change the image you render on a web page based on the current preferred color scheme of your theme?
Published: ....
Have you ever wanted to create a class in JavaScript or TypeScript but also have the initialization be async? Here's a quick tip on a pattern that I've used in the past!
Loading comments...
Published: ....
I recently launched a rewrite and redesign of this personal website, I figured I'd talk a bit about the changes and new features that I added along the way!
Published: ....
A few thoughts on what to do after you launch a new project
Published: ....
Are we reinventing the wheel when it comes to onboarding new AI agents to a codebase, when we already have primitives available for onboarding humans?
Published: ....
Published: ....
Published: ....
A quick tip for creating roundup or summary notes based on other notes in Obsidian using the Dataview plugin!