feat: add shims for cjs & esm

Author: sxzz

assets/esm-shims.js

@@ -0,0 +1,9 @@
+// Shim globals in esm bundle
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const getFilename = () => fileURLToPath(import.meta.url)
+const getDirname = () => path.dirname(getFilename())
+
+export const __dirname = /* @__PURE__ */ getDirname()
+export const __filename = /* @__PURE__ */ getFilename()

src/cli.ts

@@ -25,6 +25,7 @@ export async function runCLI(): Promise<void> {
     .option('-d, --out-dir <dir>', 'Output directory', { default: 'dist' })
     .option('--treeshake', 'Tree-shake bundle', { default: true })
     .option('--sourcemap', 'Generate source map', { default: false })
+    .option('--shims', 'Enable cjs and esm shims ', { default: false })
     .option('--platform <platform>', 'Target platform', {
       default: 'node',
     })

src/features/output.ts

@@ -1,21 +1,16 @@
 import { getPackageType } from '../utils/package'
-import type { ModuleFormat } from 'rolldown'
+import type { NormalizedFormat } from '../options'
 
 export function resolveOutputExtension(
   pkg: any,
-  format: ModuleFormat,
+  format: NormalizedFormat,
 ): 'mjs' | 'cjs' | 'js' {
   const moduleType = getPackageType(pkg)
   switch (format) {
     case 'es':
-    case 'esm':
-    case 'module': {
       return moduleType === 'module' ? 'js' : 'mjs'
-    }
     case 'cjs':
-    case 'commonjs': {
       return moduleType === 'module' ? 'cjs' : 'js'
-    }
     default:
       return 'js'
   }

src/index.ts

@@ -1,4 +1,6 @@
+import path from 'node:path'
 import process from 'node:process'
+import { fileURLToPath } from 'node:url'
 import {
   build as rolldownBuild,
   type InputOptions,
@@ -20,6 +22,7 @@ import {
 } from './options'
 import { debug, logger } from './utils/logger'
 import { readPackageJson } from './utils/package'
+import { getShimsDefine, getShimsInject } from './utils/shims'
 
 /**
  * Build with tsdown.
@@ -53,6 +56,9 @@ export async function build(
   }
 }
 
+const dirname = path.dirname(fileURLToPath(import.meta.url))
+export const assetsDir: string = path.resolve(dirname, '../assets')
+
 /**
  * Build a single configuration, without watch and shortcuts features.
  *
@@ -78,6 +84,7 @@ export async function buildSingle(
     unused,
     target,
     define,
+    shims,
     onSuccess,
   } = resolved
 
@@ -112,9 +119,16 @@ export async function buildSingle(
           resolve: { alias },
           treeshake,
           platform,
-          define,
+          define: {
+            ...getShimsDefine(format),
+            ...define,
+          },
           plugins,
           ...resolved.inputOptions,
+          inject: {
+            ...(shims && getShimsInject(format, platform)),
+            ...resolved.inputOptions?.inject,
+          },
         }
 
         const extension = resolveOutputExtension(pkg, format)

src/options.ts

@@ -14,7 +14,12 @@ import type {
   Overwrite,
 } from './utils/types'
 import type { Stats } from 'node:fs'
-import type { InputOptions, ModuleFormat, OutputOptions } from 'rolldown'
+import type {
+  InputOptions,
+  InternalModuleFormat,
+  ModuleFormat,
+  OutputOptions,
+} from 'rolldown'
 import type { Options as IsolatedDeclOptions } from 'unplugin-isolated-decl'
 import type { Options as UnusedOptions } from 'unplugin-unused'
 
@@ -43,6 +48,7 @@ export interface Options {
   define?: Record<string, string>
   /** @default 'node' */
   platform?: 'node' | 'neutral' | 'browser'
+  shims?: boolean
   /**
    * Enable dts generation with `isolatedDeclarations` (experimental)
    */
@@ -73,6 +79,10 @@ export interface Options {
 export type Config = Arrayable<Omit<Options, 'config'>>
 export type ResolvedConfig = Extract<Config, any[]>
 
+export type NormalizedFormat =
+  | Exclude<InternalModuleFormat, 'app'>
+  | 'experimental-app'
+
 export type ResolvedOptions = Omit<
   Overwrite<
     MarkPartial<
@@ -87,7 +97,7 @@ export type ResolvedOptions = Omit<
       | 'external'
       | 'onSuccess'
     >,
-    { format: ModuleFormat[]; clean: string[] | false }
+    { format: NormalizedFormat[]; clean: string[] | false }
   >,
   'config'
 >
@@ -118,18 +128,18 @@ export async function resolveOptions(
           dts = false,
           unused = false,
           watch = false,
+          shims = false,
           skipNodeModulesBundle = false,
         } = subOptions
 
         entry = await resolveEntry(entry)
-        format = toArray(format, 'es')
         if (clean === true) clean = []
 
         return {
           ...subOptions,
           entry,
           plugins,
-          format,
+          format: normalizeFormat(format),
           outDir: path.resolve(outDir),
           clean,
           silent,
@@ -139,6 +149,7 @@ export async function resolveOptions(
           dts,
           unused,
           watch,
+          shims,
           skipNodeModulesBundle,
         }
       }),
@@ -147,6 +158,24 @@ export async function resolveOptions(
   ]
 }
 
+export function normalizeFormat(
+  format: ModuleFormat | ModuleFormat[],
+): NormalizedFormat[] {
+  return toArray<ModuleFormat>(format, 'es').map((format): NormalizedFormat => {
+    switch (format) {
+      case 'es':
+      case 'esm':
+      case 'module':
+        return 'es'
+      case 'cjs':
+      case 'commonjs':
+        return 'cjs'
+      default:
+        return format
+    }
+  })
+}
+
 async function loadConfigFile(
   options: Options,
 ): Promise<[config: ResolvedConfig, file?: string]> {

src/utils/shims.ts

@@ -0,0 +1,27 @@
+import path from 'node:path'
+import { assetsDir } from '../index'
+import type { NormalizedFormat, ResolvedOptions } from '../options'
+
+export function getShimsInject(
+  format: NormalizedFormat,
+  platform: ResolvedOptions['platform'],
+): Record<string, [string, string]> | undefined {
+  if (format === 'es' && platform === 'node') {
+    const shimFile = path.resolve(assetsDir, 'esm-shims.js')
+    return {
+      __dirname: [shimFile, '__dirname'],
+      __filename: [shimFile, '__filename'],
+    }
+  }
+}
+
+export function getShimsDefine(
+  format: NormalizedFormat,
+): Record<string, string> | undefined {
+  if (format === 'cjs') {
+    return {
+      'import.meta.filename': '__filename',
+      'import.meta.dirname': '__dirname',
+    }
+  }
+}

tests/__snapshots__/index.test.ts.snap

@@ -17,6 +17,20 @@ const foo = 1;
 exports.foo = foo"
 `;
 
+exports[`cjs shims 1`] = `
+""use strict";
+
+//#region index.ts
+var cjs_shims_default = [
+	require("url").pathToFileURL(__filename).href,
+	__filename,
+	__dirname
+];
+
+//#endregion
+module.exports = cjs_shims_default;"
+`;
+
 exports[`esm import 1`] = `
 "//#region foo.ts
 const foo = 1;
@@ -25,6 +39,24 @@ const foo = 1;
 export { foo };"
 `;
 
+exports[`esm shims 1`] = `
+"import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+//#region ../../../assets/esm-shims.js
+const getFilename = () => fileURLToPath(import.meta.url);
+const getDirname = () => path.dirname(getFilename());
+const __dirname = /* @__PURE__ */ getDirname();
+const __filename = /* @__PURE__ */ getFilename();
+
+//#endregion
+//#region index.ts
+var esm_shims_default = [__dirname, __filename];
+
+//#endregion
+export { esm_shims_default as default };"
+`;
+
 exports[`syntax lowering 1`] = `
 "//#region index.ts
 var _a, _a$b;

tests/index.test.ts

@@ -29,7 +29,9 @@ test('basic', async () => {
   })
 
   test('cjs import', async () => {
-    const { getContent } = await testBuild(files, { args: ['--format', 'cjs'] })
+    const { getContent } = await testBuild(files, {
+      args: ['--format', 'cjs'],
+    })
     const out = await getContent('index.js')
     expect(out).matchSnapshot()
   })
@@ -43,3 +45,24 @@ test('syntax lowering', async () => {
   const out = await outputContent()
   expect(out).matchSnapshot()
 })
+
+test('esm shims', async () => {
+  const { outputContent } = await testBuild(
+    { 'index.ts': 'export default [__dirname, __filename]' },
+    { args: ['--shims'] },
+  )
+  const out = await outputContent()
+  expect(out).matchSnapshot()
+})
+
+test('cjs shims', async () => {
+  const { getContent } = await testBuild(
+    {
+      'index.ts':
+        'export default [import.meta.url, import.meta.filename, import.meta.dirname]',
+    },
+    { args: ['--shims', '--format', 'cjs'] },
+  )
+  const out = await getContent('index.js')
+  expect(out).matchSnapshot()
+})