Use esm-import-transformer for “isomorphic-ish” ECMAScript Modules

This is a small Node utility that uses Acorn to change the location of import specifier locations.

// Before
import {html, css, LitElement} from "lit";

// After
import {html, css, LitElement} from "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";

• Source code on GitHub

This is useful when you want to use the same input source JavaScript code to run in both a server context and a client context, without making huge modifications to the code! It could also be used as a build-time workaround for import maps until browser support improves.

Practically speaking, I used this in a couple places to implement the SSR examples for <is-land>.

The transformations are mapped using standard import maps objects and the package can run as an ES module (via import) or in CommonJS (via require).

Usage

Pass in a source code string and an import maps object.

// Import the ES Module:
import { ImportTransformer } from "esm-import-transformer";

// or use with CommonJS:
// const { ImportTransformer } = require("esm-import-transformer");

let it = new ImportTransformer();

let sourceCode = `import {html, css, LitElement} from "lit";`;

let importMap = {
  imports: {
    lit: "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js"
  }
};

let outputCode = it.transform(sourceCode, importMap);

Installation

Available on npm and GitHub

npm install esm-import-transformer