fix #4292: support with { type: bytes }

evanw · evanw · commit 8f506d5ca688 · 2025-10-03T12:51:28.000-04:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,19 @@
 # Changelog
 
+## Unreleased
+
+* Add support for `with { type: 'bytes' }` imports ([#4292](https://github.com/evanw/esbuild/issues/4292))
+
+    The [import bytes](https://github.com/tc39/proposal-import-bytes) proposal has reached stage 2.7 in the TC39 process, which means that although it isn't quite recommended for implementation, it's generally approved and ready for validation. Furthermore it has already been implemented by [Deno](https://docs.deno.com/examples/importing_bytes/) and [Webpack](https://github.com/webpack/webpack/pull/19928). So with this release, esbuild will also add support for this. It behaves exactly the same as esbuild's existing [`binary` loader](https://esbuild.github.io/content-types/#binary). Here's an example:
+
+    ```js
+    import data from './image.png' with { type: 'bytes' }
+    const view = new DataView(data.buffer, 0, 24)
+    const width = view.getInt32(16)
+    const height = view.getInt32(20)
+    console.log('size:', width + '\xD7' + height)
+    ```
+
 ## 0.25.10
 
 * Fix a panic in a minification edge case ([#4287](https://github.com/evanw/esbuild/issues/4287))
diff --git a/internal/bundler/bundler.go b/internal/bundler/bundler.go
@@ -203,13 +203,16 @@ func parseFile(args parseArgs) {
 			var errorText string
 			var errorRange js_lexer.KeyOrValue
 
-			// We only currently handle "type: json"
+			// We only currently handle "type: json" and "type: bytes"
 			if attr.Key != "type" {
 				errorText = fmt.Sprintf("Importing with the %q attribute is not supported", attr.Key)
 				errorRange = js_lexer.KeyRange
 			} else if attr.Value == "json" {
 				loader = config.LoaderWithTypeJSON
 				continue
+			} else if attr.Value == "bytes" {
+				loader = config.LoaderBinary
+				continue
 			} else {
 				errorText = fmt.Sprintf("Importing with a type attribute of %q is not supported", attr.Value)
 				errorRange = js_lexer.ValueRange
diff --git a/internal/bundler_tests/bundler_loader_test.go b/internal/bundler_tests/bundler_loader_test.go
@@ -1321,6 +1321,39 @@ func TestWithTypeJSONOverrideLoaderGlob(t *testing.T) {
 	})
 }
 
+func TestWithTypeBytesOverrideLoader(t *testing.T) {
+	loader_suite.expectBundled(t, bundled{
+		files: map[string]string{
+			"/entry.js": `
+				import foo from './foo.js' with { type: 'bytes' }
+				console.log(foo)
+			`,
+			"/foo.js": `export default 'js'`,
+		},
+		entryPaths: []string{"/entry.js"},
+		options: config.Options{
+			Mode:          config.ModeBundle,
+			AbsOutputFile: "/out.js",
+		},
+	})
+}
+
+func TestWithTypeBytesOverrideLoaderGlob(t *testing.T) {
+	loader_suite.expectBundled(t, bundled{
+		files: map[string]string{
+			"/entry.js": `
+				import("./foo" + bar, { with: { type: 'bytes' } }).then(console.log)
+			`,
+			"/foo.js": `export default 'js'`,
+		},
+		entryPaths: []string{"/entry.js"},
+		options: config.Options{
+			Mode:          config.ModeBundle,
+			AbsOutputFile: "/out.js",
+		},
+	})
+}
+
 func TestWithBadType(t *testing.T) {
 	loader_suite.expectBundled(t, bundled{
 		files: map[string]string{
diff --git a/internal/bundler_tests/snapshots/snapshots_loader.txt b/internal/bundler_tests/snapshots/snapshots_loader.txt
@@ -1163,6 +1163,33 @@ var require_test = __commonJS({
 // entry.js
 console.log(require_test());
 
+================================================================================
+TestWithTypeBytesOverrideLoader
+---------- /out.js ----------
+// foo.js
+var foo_default = __toBinary("ZXhwb3J0IGRlZmF1bHQgJ2pzJw==");
+
+// entry.js
+console.log(foo_default);
+
+================================================================================
+TestWithTypeBytesOverrideLoaderGlob
+---------- /out.js ----------
+// foo.js
+var require_foo = __commonJS({
+  "foo.js"(exports, module) {
+    module.exports = __toBinary("ZXhwb3J0IGRlZmF1bHQgJ2pzJw==");
+  }
+});
+
+// import("./foo*") in entry.js
+var globImport_foo = __glob({
+  "./foo.js": () => Promise.resolve().then(() => __toESM(require_foo()))
+});
+
+// entry.js
+globImport_foo("./foo" + bar).then(console.log);
+
 ================================================================================
 TestWithTypeJSONOverrideLoader
 ---------- /out.js ----------
