From 4bfd664c51c7e1f4a8ca5fcf95118f34b1927e46 Mon Sep 17 00:00:00 2001
From: ambar <ambar.lee@gmail.com>
Date: Thu, 8 Feb 2024 13:03:11 +0800
Subject: [PATCH] feat: add loader option

---
 README.md                           | 32 +++++++++++++++++++++++++++++
 measure-bundle-size/README.md       |  1 +
 measure-bundle-size/src/measure.ts  | 26 +++++++++++++++++++++--
 vscode-bundle-size/package.json     | 27 ++++++++++++++++++++++++
 vscode-bundle-size/src/extension.ts |  1 +
 5 files changed, 85 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index ac8ab2b..b3f1702 100644
--- a/README.md
+++ b/README.md
@@ -59,6 +59,38 @@ Because this extension builds locally, you need to pre-install dependencies.
     "type": "string",
     "default": "#e33",
     "description": "Danger color for the size text"
+  },
+  "bundleSize.loader": {
+    "type": "object",
+    "patternProperties": {
+      ".*": {
+        "type": "string",
+        "enum": [
+          "base64",
+          "binary",
+          "copy",
+          "css",
+          "dataurl",
+          "default",
+          "empty",
+          "file",
+          "js",
+          "json",
+          "jsx",
+          "local-css",
+          "text",
+          "ts",
+          "tsx"
+        ]
+      }
+    },
+    "default": {},
+    "markdownDescription": "Override the loader in Bundle Size (eg: `.js: jsx` will force `.js` files to be treated as JSX), see [esbuild#loader](https://esbuild.github.io/api/#loader) for more details"
+  },
+  "bundleSize.flowPattern": {
+    "type": "string",
+    "default": "\\/node_modules\\/(@react-native|react-native|react-native-linear-gradient)\\/(.*)\\.js$",
+    "description": "The regexp pattern to match files containing the Flow type"
   }
 }
 ```
diff --git a/measure-bundle-size/README.md b/measure-bundle-size/README.md
index 127030c..0b78c0d 100644
--- a/measure-bundle-size/README.md
+++ b/measure-bundle-size/README.md
@@ -21,6 +21,7 @@ type MeasureOptions = {
   stats?: boolean | 'tree' | 'table'
   workspaceFolder?: string
   flowPattern?: RegExp
+  loader?: esbuild.BuildOptions['loader']
 }
 
 // Lazy async generator API
diff --git a/measure-bundle-size/src/measure.ts b/measure-bundle-size/src/measure.ts
index 6c7dd81..f8f31a2 100644
--- a/measure-bundle-size/src/measure.ts
+++ b/measure-bundle-size/src/measure.ts
@@ -161,6 +161,7 @@ const bundle = async (
     baseDir,
     projectPkgFile,
     flowPattern,
+    loader,
     stats: statsOpt = false,
     cache: cacheOpt = false,
   }: {
@@ -169,6 +170,7 @@ const bundle = async (
     stats?: StatsOpt
     cache?: boolean
     flowPattern?: RegExp
+    loader?: esbuild.BuildOptions['loader']
   }
 ): Promise<BundleResult> => {
   const bundleMark = timeMark<'bundle' | 'zip' | 'analyze'>()
@@ -251,6 +253,7 @@ const bundle = async (
       '.png': 'empty',
       '.webp': 'empty',
       '.gif': 'empty',
+      ...loader,
     },
     external,
     target: 'esnext',
@@ -356,6 +359,10 @@ type MeasureOptions = {
    * the files pattern to strip flow types
    */
   flowPattern?: RegExp
+  /**
+   * custom loader for esbuild
+   */
+  loader?: esbuild.BuildOptions['loader']
 }
 
 /**
@@ -364,7 +371,15 @@ type MeasureOptions = {
 export async function* measureIterable(
   input: string,
   fileName?: string | null,
-  {debug, log, stats, cache, workspaceFolder, flowPattern}: MeasureOptions = {}
+  {
+    debug,
+    log,
+    stats,
+    cache,
+    workspaceFolder,
+    flowPattern,
+    loader,
+  }: MeasureOptions = {}
 ): AsyncGenerator<MeasureResult> {
   if (debug) {
     logger.enabled = true
@@ -391,7 +406,14 @@ export async function* measureIterable(
   parseMark.end('parse')
   logger(parseMark.print())
 
-  const bundleOpts = {baseDir, projectPkgFile, stats, cache, flowPattern}
+  const bundleOpts = {
+    baseDir,
+    projectPkgFile,
+    stats,
+    cache,
+    flowPattern,
+    loader,
+  }
   for (const importInfo of result.imports) {
     const statement = input.substring(importInfo.start, importInfo.end)
     // await new Promise((resolve) => setTimeout(resolve, 500))
diff --git a/vscode-bundle-size/package.json b/vscode-bundle-size/package.json
index 587e90f..8d076a5 100644
--- a/vscode-bundle-size/package.json
+++ b/vscode-bundle-size/package.json
@@ -69,6 +69,33 @@
           "default": "#e33",
           "description": "Danger color for the size text"
         },
+        "bundleSize.loader": {
+          "type": "object",
+          "patternProperties": {
+            ".*": {
+              "type": "string",
+              "enum": [
+                "base64",
+                "binary",
+                "copy",
+                "css",
+                "dataurl",
+                "default",
+                "empty",
+                "file",
+                "js",
+                "json",
+                "jsx",
+                "local-css",
+                "text",
+                "ts",
+                "tsx"
+              ]
+            }
+          },
+          "default": {},
+          "markdownDescription": "Override the loader in Bundle Size (eg: `.js: jsx` will force `.js` files to be treated as JSX), see [esbuild#loader](https://esbuild.github.io/api/#loader) for more details"
+        },
         "bundleSize.flowPattern": {
           "type": "string",
           "default": "\\/node_modules\\/(@react-native|react-native|react-native-linear-gradient)\\/(.*)\\.js$",
diff --git a/vscode-bundle-size/src/extension.ts b/vscode-bundle-size/src/extension.ts
index 2cf5e96..b609767 100644
--- a/vscode-bundle-size/src/extension.ts
+++ b/vscode-bundle-size/src/extension.ts
@@ -172,6 +172,7 @@ async function processDocument(document?: vscode.TextDocument) {
     log: channelLog,
     workspaceFolder: workspaceFolder?.uri.fsPath,
     flowPattern: flowPattern ? new RegExp(flowPattern) : undefined,
+    loader: config.get('loader'),
   })) {
     if (editor !== vscode.window.activeTextEditor) {
       break