Migrate webpack config to TypeScript and update related build scripts

Author: robertpiosik

apps/editor/package.json

@@ -2,12 +2,12 @@
   "name": "gemini-coder",
   "displayName": "Code Web Chat",
   "description": "Free AI coding in chatbots (CWC)",
-  "version": "1.825.0",
+  "version": "1.826.0",
   "scripts": {
     "build": "npx vsce package --no-dependencies",
     "vscode:prepublish": "rimraf out && npm run compile",
-    "compile": "webpack --config ./webpack.config.js --mode production",
-    "watch": "webpack --config ./webpack.config.js --watch --mode development",
+    "compile": "webpack --config ./webpack.config.ts --mode production",
+    "watch": "webpack --config ./webpack.config.ts --watch --mode development",
     "lint": "eslint src --ext ts,tsx",
     "lint:fix": "eslint src --ext ts,tsx --fix",
     "test": "jest",
@@ -1983,6 +1983,7 @@
     "sass-embedded": "^1.89.2",
     "sass-loader": "^12.6.0",
     "style-loader": "^3.3.4",
+    "ts-node": "^10.9.2",
     "ts-loader": "^9.5.2",
     "typed-css-modules": "^0.9.1",
     "webpack": "^5.99.9",

apps/editor/src/commands/apply-chat-response-command/response-processor.ts

@@ -24,12 +24,10 @@ import { FileInPreview } from '@shared/types/file-in-preview'
 import { update_undo_button_state } from './utils/state-manager'
 import { check_for_conflict_markers } from './utils/file-checks'
 import { handle_conflict_markers } from './handlers/conflict-markers-handler'
-import {
-  handle_truncated_edit,
-  is_truncation_line
-} from './handlers/truncated-handler'
+import { handle_truncated_edit } from './handlers/truncated-handler'
 import { WorkspaceProvider } from '@/context/providers/workspace/workspace-provider'
 import { natural_sort } from '@/utils/natural-sort'
+import { is_truncation_line } from './utils/edit-formats/truncations'
 
 export type PreviewData = {
   original_states: OriginalFileState[]

apps/editor/webpack.config.js apps/editor/webpack.config.tsapps/editor/webpack.config.js renamed to apps/editor/webpack.config.ts

@@ -1,16 +1,14 @@
-const path = require('path')
-const crypto = require('crypto')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
-const { CleanWebpackPlugin } = require('clean-webpack-plugin')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+import * as path from 'path'
+import * as crypto from 'crypto'
+import * as webpack from 'webpack'
+import CopyWebpackPlugin from 'copy-webpack-plugin'
+import { CleanWebpackPlugin } from 'clean-webpack-plugin'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 
-/**
- * @type {import('webpack').Configuration[]}
- */
-const config = [
+const config: ((env: any, argv: any) => webpack.Configuration)[] = [
   // Extension Configuration (Node.js environment)
-  (env, argv) => {
-    const is_production = argv.mode == 'production'
+  (env: any, argv: any): webpack.Configuration => {
+    const is_production = argv.mode === 'production'
     return {
       name: 'extension',
       mode: is_production ? 'production' : 'development',
@@ -25,7 +23,7 @@ const config = [
         libraryTarget: 'commonjs2',
         devtoolModuleFilenameTemplate: '../[resource-path]'
       },
-      devtool: is_production ? false : 'eval-source-map', // Use 'eval-source-map' for faster dev builds and good debugging
+      devtool: is_production ? false : 'eval-source-map',
       cache: {
         type: 'filesystem',
         buildDependencies: {
@@ -74,7 +72,12 @@ const config = [
                   .toString()
                   .split('\n')
                   .slice(12)
-                  .filter((line) => !['> [!TIP]', '> [!IMPORTANT]', '> [!NOTE]'].includes(line.trim()))
+                  .filter(
+                    (line) =>
+                      !['> [!TIP]', '> [!IMPORTANT]', '> [!NOTE]'].includes(
+                        line.trim()
+                      )
+                  )
                   .join('\n')
               }
             }
@@ -85,8 +88,8 @@ const config = [
     }
   },
   // View Configuration (Web environment)
-  (env, argv) => {
-    const isProduction = argv.mode == 'production'
+  (env: any, argv: any): webpack.Configuration => {
+    const isProduction = argv.mode === 'production'
     return {
       name: 'view',
       mode: isProduction ? 'production' : 'development',
@@ -103,7 +106,7 @@ const config = [
       performance: {
         hints: false
       },
-      devtool: isProduction ? false : 'eval-source-map', // Use 'eval-source-map' for dev
+      devtool: isProduction ? false : 'eval-source-map',
       cache: {
         type: 'filesystem',
         buildDependencies: {
@@ -132,12 +135,16 @@ const config = [
                 loader: 'css-loader',
                 options: {
                   modules: {
-                    getLocalIdent: (context, _, localName) => {
+                    getLocalIdent: (
+                      context: webpack.LoaderContext<any>,
+                      _: any,
+                      localName: string
+                    ) => {
                       const filename = context.resourcePath
                       const isModule = /\.module\.(scss|css)$/i.test(filename)
                       if (isModule) {
                         const moduleName = path
-                          .basename(filename)
+                          .basename(filename as string)
                           .replace(/\.module\.(scss|css)$/i, '')
                         const hash = crypto
                           .createHash('md5')
@@ -157,7 +164,10 @@ const config = [
                 loader: 'sass-loader',
                 options: {
                   additionalData: `@use "${path
-                    .resolve(__dirname, '../../packages/ui/src/styles/foundation')
+                    .resolve(
+                      __dirname,
+                      '../../packages/ui/src/styles/foundation'
+                    )
                     .replace(/\\/g, '/')}" as *;`
                 }
               }
@@ -193,11 +203,11 @@ const config = [
       plugins: [
         new MiniCssExtractPlugin({
           filename: '[name].css'
-        })
-      ],
+        }) as unknown as webpack.WebpackPluginInstance
+      ] as webpack.WebpackPluginInstance[],
       stats: 'errors-only'
     }
   }
 ]
 
-module.exports = config
+export default config