From 18a46d5d85be77f9c0c9dc787cfda14c84ff3459 Mon Sep 17 00:00:00 2001
From: haikdc <haikdecie@gmail.com>
Date: Sat, 18 Apr 2026 07:58:38 -0700
Subject: [PATCH] [hAIk]: Replace babel-loader with swc-loader and reduce shiki
 language bundles from 235 to 56 for faster builds. Swapped babel-loader for
 swc-loader (Rust-based transpiler), removed @babel/core, @babel/preset-env,
 @babel/preset-react, @babel/preset-typescript, and babel-loader (-106
 packages). Changed code-block.tsx imports from bare shiki to shiki/bundle/web
 + shiki/engine/javascript. Added webpack resolve aliases to redirect
 @pierre/diffs nested shiki bundle-full.mjs to bundle-web.mjs and replaced its
 langs.mjs with a no-op shim. Switched devtool from source-map to
 eval-cheap-module-source-map. Results: build time ~31s to ~20s, cacheable
 modules 30.3 MiB to 22.6 MiB, vendor chunks 379+ to ~199.

---
 frontend/package.json                         | 17 +++-------
 .../tool-ui/code-block/code-block.tsx         |  7 ++--
 frontend/src/shims/shiki-langs-noop.mjs       |  4 +++
 frontend/webpack.config.js                    | 33 +++++++++++++------
 4 files changed, 34 insertions(+), 27 deletions(-)
 create mode 100644 frontend/src/shims/shiki-langs-noop.mjs

diff --git a/frontend/package.json b/frontend/package.json
index ee1b531b..dad81384 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -50,14 +50,10 @@
     "zustand": "^5.0.12"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.0",
-    "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1",
+    "@swc/core": "^1.15.26",
     "@tailwindcss/postcss": "^4.2.2",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "babel-loader": "^9.2.1",
     "copy-webpack-plugin": "^14.0.0",
     "css-loader": "^6.8.0",
     "css-modules-types-loader": "^0.6.10",
@@ -70,17 +66,14 @@
     "sass": "^1.89.2",
     "sass-loader": "^16.0.5",
     "style-loader": "^3.3.0",
+    "swc-loader": "^0.2.7",
     "typescript": "^5.0.0",
     "typescript-eslint": "^8.58.0",
     "webpack": "^5.88.0",
     "webpack-cli": "^5.1.0",
     "webpack-dev-server": "^4.15.0"
   },
-  "babel": {
-    "presets": [
-      "@babel/preset-env",
-      "@babel/preset-react",
-      "@babel/preset-typescript"
-    ]
-  }
+  "browserslist": [
+    "last 2 Chrome versions"
+  ]
 }
diff --git a/frontend/src/components/tool-ui/code-block/code-block.tsx b/frontend/src/components/tool-ui/code-block/code-block.tsx
index 9cd24a86..83d3e1d0 100644
--- a/frontend/src/components/tool-ui/code-block/code-block.tsx
+++ b/frontend/src/components/tool-ui/code-block/code-block.tsx
@@ -8,11 +8,8 @@ import {
   use,
   type ReactNode,
 } from "react";
-import {
-  createHighlighter,
-  createJavaScriptRegexEngine,
-  type Highlighter,
-} from "shiki";
+import { createHighlighter, type Highlighter } from "shiki/bundle/web";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
 import { Copy, Check, ChevronDown, ChevronUp } from "lucide-react";
 import pierreDarkTheme from "../shared/pierre-dark-theme.js";
 import pierreLightTheme from "../shared/pierre-light-theme.js";
diff --git a/frontend/src/shims/shiki-langs-noop.mjs b/frontend/src/shims/shiki-langs-noop.mjs
new file mode 100644
index 00000000..ef243669
--- /dev/null
+++ b/frontend/src/shims/shiki-langs-noop.mjs
@@ -0,0 +1,4 @@
+export const bundledLanguagesInfo = [];
+export const bundledLanguagesAlias = {};
+export const bundledLanguagesBase = {};
+export const bundledLanguages = {};
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
index f690105d..5c51cae7 100644
--- a/frontend/webpack.config.js
+++ b/frontend/webpack.config.js
@@ -1,4 +1,5 @@
 const path = require('path');
+const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
@@ -23,15 +24,23 @@ module.exports = (env, argv) => {
           test: /\.(js|jsx|ts|tsx)$/,
           exclude: /node_modules/,
           use: {
-            loader: 'babel-loader',
+            loader: 'swc-loader',
             options: {
-              presets: [
-                ['@babel/preset-env', { targets: 'defaults' }],
-                ['@babel/preset-react', { runtime: 'automatic' }],
-                '@babel/preset-typescript'
-              ]
-            }
-          }
+              jsc: {
+                parser: {
+                  syntax: 'typescript',
+                  tsx: true,
+                  dynamicImport: true,
+                },
+                transform: {
+                  react: {
+                    runtime: 'automatic',
+                  },
+                },
+                target: 'es2017',
+              },
+            },
+          },
         },
         {
           test: /\.css$/,
@@ -59,7 +68,11 @@ module.exports = (env, argv) => {
     resolve: {
       extensions: ['.js', '.jsx', '.ts', '.tsx'],
       alias: {
-        '@': path.resolve(__dirname, 'src')
+        '@': path.resolve(__dirname, 'src'),
+        [path.resolve(__dirname, 'node_modules/@pierre/diffs/node_modules/shiki/dist/bundle-full.mjs')]:
+          path.resolve(__dirname, 'node_modules/@pierre/diffs/node_modules/shiki/dist/bundle-web.mjs'),
+        [path.resolve(__dirname, 'node_modules/@pierre/diffs/node_modules/shiki/dist/langs.mjs')]:
+          path.resolve(__dirname, 'src/shims/shiki-langs-noop.mjs'),
       }
     },
 
@@ -80,7 +93,7 @@ module.exports = (env, argv) => {
       }),
     ],
 
-    devtool: isDevelopment ? 'source-map' : false,
+    devtool: isDevelopment ? 'eval-cheap-module-source-map' : false,
 
     devServer: {
       static: { directory: path.join(__dirname, 'public') },