How to just transform a package without running the server?

[robert-westenberger]

Hi,

Incredible project. I'm wondering if it's possible to use the transformation part ( wrapping commonjs packages so they are usable in an import map) without having to use the containerized version or esm.sh itself?

For my employer it's out of the question to use esm.sh and it would take many many months to implement using the containerized version if we ever get permission at all. We also have some proprietary packages we don't want to publish (we have a private package registry, we just don't.. feel like publishing them Lol)

We want to use importMaps though, is there any way to just transform the packages locally so they can can be bundled into a static asset directory which can be referenced in the import map? I'm looking for something that can just be ran in a build pipeline.

[ije]

Use vite/esbuild?

[robert-westenberger]

I mean for how esm.sh shims for example, react, to be usable in an import map. My understanding is that's not possible with esbuild / vite alone, is that incorrect?

[robert-westenberger]

Let me look at esbuild + vite again, i probably missed something. Before I was having trouble getting the named exports working with react when converting it from cjs to esm

[robert-westenberger]

Ah yeah that works, but I can't figure out how to get the named exports to work without listing them individually. For example I have this build script

import * as esbuild from 'esbuild';

await esbuild.build({
  entryPoints: ['src/react-wrapper.js'],
  bundle: true,
  format: 'esm',
  outfile: 'dist/react.esm.mjs',
  platform: 'browser',
  minify: false,
  sourcemap: true,
});

This won't work, the named exports aren't preserved in the output

// src/react-wrapper.js
export * from 'react';
import {default as ReactNS} from 'react';
export default ReactNS;

I can get it to work like this however, but its a pain especially if we want to use more packages that we use named imports from and are also commonjs

// src/react-wrapper.js
import React from 'react';

export default React;

export const {
  Children,
  Component,
  Fragment,
  Profiler,
  PureComponent,
  StrictMode,
  Suspense,
  cloneElement,
  createContext,
  createElement,
  createFactory,
  createRef,
  forwardRef,
  isValidElement,
  lazy,
  memo,
  useCallback,
  useContext,
  useDebugValue,
  useEffect,
  useImperativeHandle,
  useLayoutEffect,
  useMemo,
  useReducer,
  useRef,
  useState,
  version,
} = React;

Am I missing something obvious? without those named exports there will be runtime errors if trying to access named imports.

[robert-westenberger]

And then if I try to bundle react-dom in a similar way, for example

await esbuild.build({
  entryPoints: ['src/react-dom-wrapper.js'],
  bundle: true,
  format: 'esm',
  outfile: 'dist/react-dom.esm.mjs',
  platform: 'browser',
  external: ['react'],
  minify: false,
  sourcemap: true,
});

// src/react-dom-wrapper.js
import ReactDOM from 'react-dom';

export default ReactDOM;

export const {
  createPortal,
  findDOMNode,
  flushSync,
  hydrate,
  render,
  unmountComponentAtNode,
  unstable_batchedUpdates,
  unstable_renderSubtreeIntoContainer,
  version,
  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
} = ReactDOM;

But then the outputted react-dom.mjs will have a require in it

var React = __require("react");

which will blow up at runtime in the import map.

Anyway, I don't mean to bother you with questions about esbuild + vite in this discussion. My point is, esm.sh must be handling all of these edge cases that esbuild or vite alone don't handle out of the box (again, unless they do and I am just configuring it wrong Lol). But if there is no intent to expose how esm.sh bundles packages without using the server, then that answers my question. Thanks for taking a look.

[ije]

FYI: esm.sh uses https://github.com/esm-dev/cjs-module-lexer to get the named exports.

[ije]

i have a plan to build a CLI to create import map scripts without the server but did get time on it, see #932

[robert-westenberger]

Sorry I did not see this issue. This is exactly what I'm asking for. Thank you.