Replace webpack with esbuild

src/Web/Avalonia.Web.Blazor/Avalonia.Web.Blazor.csproj

@@ -31,7 +31,6 @@
 
   <ItemGroup>
     <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="6.0.8" />
-    <PackageReference Include="Microsoft.TypeScript.MSBuild" Version="4.7.4" PrivateAssets="all" />
   </ItemGroup>
 
   <ItemGroup>

src/Web/Avalonia.Web.Blazor/Interop/AvaloniaModule.cs

@@ -4,7 +4,7 @@ namespace Avalonia.Web.Blazor.Interop
 {
     internal class AvaloniaModule : JSModuleInterop
     {
-        private AvaloniaModule(IJSRuntime js) : base(js, "./_content/Avalonia.Web.Blazor/avalonia.js")
+        private AvaloniaModule(IJSRuntime js) : base(js, "./_content/Avalonia.Web.Blazor/Avalonia.js")
         {
         }
 

src/Web/Avalonia.Web.Blazor/Interop/Storage/StorageProviderInterop.cs

@@ -12,7 +12,7 @@ namespace Avalonia.Web.Blazor.Interop.Storage
 
     internal class StorageProviderInterop : JSModuleInterop, IStorageProvider
     {
-        private const string JsFilename = "./_content/Avalonia.Web.Blazor/avaloniaStorage.js";
+        private const string JsFilename = "./_content/Avalonia.Web.Blazor/Storage.js";
         private const string PickerCancelMessage = "The user aborted a request";
 
         public static async Task<StorageProviderInterop> ImportAsync(IJSRuntime js)

src/Web/Avalonia.Web.Blazor/webapp/build.js

@@ -0,0 +1,16 @@
+require("esbuild").build({
+    entryPoints: [
+        "./modules/Avalonia.ts",
+        "./modules/Storage.ts"
+    ],
+    outdir: "../wwwroot",
+    bundle: true,
+    minify: true,
+    format: "esm",
+    target: "es2016",
+    platform: "browser",
+    sourcemap: "linked",
+    loader: {".ts": "ts"}
+  })
+  .then(() => console.log("⚡ Done"))
+  .catch(() => process.exit(1));

src/Web/Avalonia.Web.Blazor/webapp/modules/Avalonia.ts

@@ -0,0 +1,5 @@
+export { DpiWatcher } from "./Avalonia/DpiWatcher"
+export { InputHelper } from "./Avalonia/InputHelper"
+export { NativeControlHost } from "./Avalonia/NativeControlHost"
+export { SizeWatcher } from "./Avalonia/SizeWatcher"
+export { SKHtmlCanvas } from "./Avalonia/SKHtmlCanvas"

src/Web/Avalonia.Web.Blazor/webapp/modules/Avalonia/Avalonia.ts

@@ -1,5 +0,0 @@
-export { DpiWatcher } from "./DpiWatcher"
-export { InputHelper } from "./InputHelper"
-export { NativeControlHost } from "./NativeControlHost"
-export { SizeWatcher } from "./SizeWatcher"
-export { SKHtmlCanvas } from "./SKHtmlCanvas"

src/Web/Avalonia.Web.Blazor/webapp/modules/Storage.ts

@@ -0,0 +1 @@
+export { StorageProvider } from "./Storage/StorageProvider"

src/Web/Avalonia.Web.Blazor/webapp/package.json

@@ -1,16 +1,13 @@
 {
   "name": "avalonia.web",
   "scripts": {
-    "dist": "cross-env NODE_ENV=production webpack",
-    "build": "cross-env NODE_ENV=development webpack"
+    "prebuild": "tsc -noEmit",
+    "build": "node build.js"
   },
   "devDependencies": {
     "@types/emscripten": "^1.39.6",
     "@types/wicg-file-system-access": "^2020.9.5",
-    "cross-env": "^7.0.3",
-    "ts-loader": "^9.3.1",
     "typescript": "^4.7.4",
-    "webpack": "^5.73.0",
-    "webpack-cli": "^4.10.0"
+    "esbuild": "^0.15.7"
   }
 }

src/Web/Avalonia.Web.Blazor/webapp/tsconfig.json

@@ -1,14 +1,14 @@
 {
   "compilerOptions": {
-    "target": "ES6",
+    "target": "es2016",
     "strict": true,
     "sourceMap": true,
     "outDir": "../wwwroot",
-    "removeComments": true,
     "noEmitOnError": true,
+    "isolatedModules": true, // we need it for esbuild
     "lib": [
       "dom",
-      "ES6",
+      "es2016",
       "esnext.asynciterable"
     ]
   },

src/Web/Avalonia.Web.Blazor/webapp/webpack.config.js

@@ -1,40 +0,0 @@
-const path = require('path');
-const prod = process.env.NODE_ENV == 'production';
-
-module.exports = {
-    mode: prod ? "production" : "development",
-    devtool: 'source-map',
-    target: ["web", "es2020"],
-    entry: {
-        avalonia: './modules/Avalonia/Avalonia.ts',
-        avaloniaStorage: {
-            import: './modules/Storage/StorageProvider.ts',
-            dependOn: 'avalonia',
-        }
-    },
-    output: {
-        filename: '[name].js',
-        path: path.resolve(__dirname, '../wwwroot'),
-        library: {
-            type: 'module',
-        },
-    },
-    module: {
-        rules: [
-            {
-                test: /\.tsx?$/,
-                use: 'ts-loader',
-                exclude: /node_modules/,
-            },
-        ],
-    },
-    resolve: {
-        extensions: ['.ts', '.js'],
-    },
-    optimization: {
-        minimize: false
-    },
-    experiments: {
-        outputModule: true,
-    }
-};