add "format" to inputs in metafile

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## Unreleased
+
+* Add `format` to input files in the JSON metafile data
+
+    When `--metafile` is enabled, input files may now have an additional `format` field that indicates the export format used by this file. When present, the value will either be `cjs` for CommonJS-style exports or `esm` for ESM-style exports. This can be useful in bundle analysis.
+
+    For example, esbuild's new [Bundle Size Analyzer](https://esbuild.github.io/analyze/) now uses this information to visualize whether ESM or CommonJS was used for each directory and file of source code (click on the CJS/ESM bar at the top).
+
+    This information is helpful when trying to reduce the size of your bundle. Using the ESM variant of a dependency instead of the CommonJS variant always results in a faster and smaller bundle because it omits CommonJS wrappers, and also may result in better tree-shaking as it allows esbuild to perform tree-shaking at the statement level instead of the module level.
+
 ## 0.16.14
 
 * Preserve some comments in expressions ([#2721](https://github.com/evanw/esbuild/issues/2721))

internal/bundler/bundler.go

@@ -2067,7 +2067,16 @@ func (s *scanner) processScannedFiles(entryPointMeta []graph.EntryPoint) []scann
 			if !isFirstImport {
 				sb.WriteString("\n      ")
 			}
-			sb.WriteString("]\n    }")
+			if repr, ok := result.file.inputFile.Repr.(*graph.JSRepr); ok &&
+				(repr.AST.ExportsKind == js_ast.ExportsCommonJS || repr.AST.ExportsKind == js_ast.ExportsESM) {
+				format := "cjs"
+				if repr.AST.ExportsKind == js_ast.ExportsESM {
+					format = "esm"
+				}
+				sb.WriteString(fmt.Sprintf("],\n      \"format\": %q\n    }", format))
+			} else {
+				sb.WriteString("]\n    }")
+			}
 		}
 
 		result.file.jsonMetadataChunk = sb.String()

internal/bundler_tests/snapshots/snapshots_css.txt

@@ -428,7 +428,8 @@ console.log("bar");
           "kind": "import-statement",
           "original": "../common.css"
         }
-      ]
+      ],
+      "format": "esm"
     },
     "bar/entry.js": {
       "bytes": 54,
@@ -438,7 +439,8 @@ console.log("bar");
           "kind": "import-statement",
           "original": "../common.css"
         }
-      ]
+      ],
+      "format": "esm"
     }
   },
   "outputs": {

internal/bundler_tests/snapshots/snapshots_default.txt

@@ -3496,7 +3496,8 @@ a {
   "inputs": {
     "project/entry.js": {
       "bytes": 191,
-      "imports": []
+      "imports": [],
+      "format": "esm"
     },
     "project/entry.css": {
       "bytes": 112,
@@ -3661,7 +3662,8 @@ d {
   "inputs": {
     "project/esm.js": {
       "bytes": 16,
-      "imports": []
+      "imports": [],
+      "format": "esm"
     },
     "<data:application/json,2>": {
       "bytes": 1,
@@ -3677,11 +3679,13 @@ d {
     },
     "project/cjs.js": {
       "bytes": 18,
-      "imports": []
+      "imports": [],
+      "format": "cjs"
     },
     "project/dynamic.js": {
       "bytes": 16,
-      "imports": []
+      "imports": [],
+      "format": "esm"
     },
     "project/entry.js": {
       "bytes": 333,
@@ -3726,7 +3730,8 @@ d {
           "kind": "dynamic-import",
           "original": "./dynamic"
         }
-      ]
+      ],
+      "format": "esm"
     },
     "project/inline.svg": {
       "bytes": 6,
@@ -3945,7 +3950,8 @@ a {
           "kind": "import-statement",
           "original": "./111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111.file"
         }
-      ]
+      ],
+      "format": "esm"
     },
     "project/222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222.copy": {
       "bytes": 0,
@@ -3959,7 +3965,8 @@ a {
           "kind": "import-statement",
           "original": "./222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222.copy"
         }
-      ]
+      ],
+      "format": "esm"
     },
     "project/333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333.js": {
       "bytes": 0,

internal/bundler_tests/snapshots/snapshots_loader.txt

@@ -149,7 +149,8 @@ console.log(ns, import_c.default, void 0);
           "kind": "import-statement",
           "original": "./d.empty"
         }
-      ]
+      ],
+      "format": "esm"
     }
   },
   "outputs": {

lib/shared/types.ts

@@ -444,6 +444,7 @@ export interface Metafile {
         external?: boolean
         original?: string
       }[]
+      format?: 'cjs' | 'esm'
     }
   }
   outputs: {

scripts/js-api-tests.js

@@ -1127,12 +1127,18 @@ body {
     assert.deepStrictEqual(json.inputs[inEntry1], {
       bytes: 94,
       imports: [{ path: inImported, kind: 'import-statement', original: './' + path.basename(imported) }],
+      format: 'esm',
     })
     assert.deepStrictEqual(json.inputs[inEntry2], {
       bytes: 107,
       imports: [{ path: inImported, kind: 'import-statement', original: './' + path.basename(imported) }],
+      format: 'esm',
+    })
+    assert.deepStrictEqual(json.inputs[inImported], {
+      bytes: 118,
+      imports: [],
+      format: 'esm',
     })
-    assert.deepStrictEqual(json.inputs[inImported], { bytes: 118, imports: [] })
 
     assert.deepStrictEqual(json.outputs[outEntry1].imports, [{ path: makeOutPath(chunk), kind: 'import-statement' }])
     assert.deepStrictEqual(json.outputs[outEntry2].imports, [{ path: makeOutPath(chunk), kind: 'import-statement' }])
@@ -1197,12 +1203,18 @@ body {
     assert.deepStrictEqual(json.inputs[inEntry1], {
       bytes: 94,
       imports: [{ path: inImported, kind: 'import-statement', original: './' + path.basename(imported) }],
+      format: 'esm',
     })
     assert.deepStrictEqual(json.inputs[inEntry2], {
       bytes: 107,
       imports: [{ path: inImported, kind: 'import-statement', original: './' + path.basename(imported) }],
+      format: 'esm',
+    })
+    assert.deepStrictEqual(json.inputs[inImported], {
+      bytes: 118,
+      imports: [],
+      format: 'esm',
     })
-    assert.deepStrictEqual(json.inputs[inImported], { bytes: 118, imports: [] })
 
     assert.deepStrictEqual(json.outputs[outEntry1].imports, [{ path: makeOutPath(chunk), kind: 'import-statement' }])
     assert.deepStrictEqual(json.outputs[outEntry2].imports, [{ path: makeOutPath(chunk), kind: 'import-statement' }])
@@ -1273,19 +1285,22 @@ body {
         { path: inShared, kind: 'import-statement', original: makeImportPath(entry, shared) },
         { path: inImport1, kind: 'dynamic-import', original: makeImportPath(entry, import1) },
         { path: inImport2, kind: 'dynamic-import', original: makeImportPath(entry, import2) },
-      ]
+      ],
+      format: 'esm',
     })
     assert.deepStrictEqual(json.inputs[inImport1], {
       bytes: 35,
       imports: [
         { path: inShared, kind: 'import-statement', original: makeImportPath(import1, shared) },
-      ]
+      ],
+      format: 'esm',
     })
     assert.deepStrictEqual(json.inputs[inImport2], {
       bytes: 35,
       imports: [
         { path: inShared, kind: 'import-statement', original: makeImportPath(import2, shared) },
-      ]
+      ],
+      format: 'esm',
     })
     assert.deepStrictEqual(json.inputs[inShared], { bytes: 38, imports: [] })