Replace webpack with esbuild for the previewer

src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/build.js

@@ -0,0 +1,28 @@
+import { build } from 'esbuild';
+import htmlPlugin from '@chialab/esbuild-plugin-html';
+import { compress } from 'esbuild-plugin-compress';
+
+build({
+    entryPoints: ['src/index.html'],
+    chunkNames: '[name]-[hash]',
+    logLevel: "warning",
+    outdir: "./build",
+    bundle: true,
+    treeShaking: true,
+    minify: true,
+    write: false,
+    format: "esm",
+    target: "es6",
+    platform: "browser",
+    sourcemap: "linked",
+    loader: {".ts": "tsx"},
+    plugins: [
+        htmlPlugin(),
+        compress({
+            brotli: false,
+            gzip: true
+        })
+    ]
+  })
+  .then(() => console.log("⚡ Done"))
+  .catch(() => process.exit(1));

src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/package.json

@@ -1,34 +1,16 @@
 {
-  "name": "simple",
+  "name": "previewer",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
   "scripts": {
-    "webpack-ver": "cross-env NODE_ENV=production webpack --version",
+    "predist": "tsc -noEmit",
-    "dist": "cross-env NODE_ENV=production webpack",
+    "dist": "node build.js"
-    "watch": "cross-env NODE_ENV=development webpack --watch"
   },
-  "author": "",
-  "license": "ISC",
   "devDependencies": {
-    "clean-webpack-plugin": "^4.0.0",
+    "@chialab/esbuild-plugin-html": "^0.17.0",
-    "compression-webpack-plugin": "^9.2.0",
+    "esbuild": "^0.14.54",
-    "cross-env": "^7.0.3",
+    "esbuild-plugin-compress": "^0.4.0",
-    "css-loader": "^6.5.1",
+    "typescript": "^4.7.4"
-    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.5.0",
-    "mini-css-extract-plugin": "^2.5.3",
-    "source-map-loader": "^3.0.1",
-    "style-loader": "^3.3.1",
-    "to-string-loader": "^1.2.0",
-    "ts-loader": "^9.2.6",
-    "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^4.5.5",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.68.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-livereload-plugin": "^3.0.2"
   },
+  "type": "module",
   "dependencies": {
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",

src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/src/index.html

@@ -1,14 +1,15 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <meta charset="UTF-8">
     <title>Avalonia XAML previewer web edition</title>
 </head>
-
 <body>
-<div id="app">
+    <script src="index.tsx"></script>
-    <center>Loading...</center>
+    <div id="app">
-</div>
+        <center>Loading...</center>
-<noscript>JavaScript is required</noscript>
+    </div>
+    <noscript>JavaScript is required</noscript>
 </body>
-</html>
+</html>

src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "outDir": "build/dist",
     "module": "esnext",
-    "target": "es5",
+    "target": "es6",
     "lib": ["es6", "dom"],
     "sourceMap": true,
     "allowJs": true,
@@ -25,11 +25,6 @@
   "include": ["./src/**/*"],
   "exclude": [
     "node_modules",
-    "build",
+    "build"
-    "scripts",
-    "acceptance-tests",
-    "webpack",
-    "jest",
-    "src/setupTests.ts"
   ]
 }

src/Avalonia.DesignerSupport/Remote/HtmlTransport/webapp/webpack.config.js

@@ -1,116 +0,0 @@
-const webpack = require('webpack');
-const path = require('path');
-const LiveReloadPlugin = require('webpack-livereload-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CompressionPlugin = require('compression-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-const prod = process.env.NODE_ENV == 'production';
-
-class Printer {
-    apply(compiler) {
-        compiler.hooks.afterEmit.tap("Printer", ()=> console.log("Build completed at " + new Date().toString()));
-        compiler.hooks.watchRun.tap("Printer", ()=> console.log("Watch triggered at " + new Date().toString()));
-    }
-}
-
-const config = {
-    stats: {
-        errorDetails: true
-    },
-    entry: {
-            bundle: './src/index.tsx'
-        },
-    output: {
-        path: path.resolve(__dirname, 'build'),
-        publicPath: '/',
-        filename: '[name].[chunkhash].js'
-    },
-    performance: { hints: false },
-    mode: prod ? "production" : "development",
-    module: {
-        rules: [
-            {
-                enforce: "pre",
-                test: /\.js$/,
-                loader: "source-map-loader",
-                exclude: [
-                    path.resolve(__dirname, 'node_modules/mobx-state-router')
-                ]
-            },
-            {
-                "oneOf": [
-                    {
-                        test: /\.(ts|tsx)$/,
-                        exclude: /node_modules/,
-                        use: 'ts-loader'
-                    },
-                    {
-                        test: /\.css$/,
-                        use: [
-                            MiniCssExtractPlugin.loader,
-                            'css-loader'
-                        ]
-                    },
-                    {
-                        test: /\.(jpg|png)$/,
-                        use: {
-                            loader: "url-loader",
-                            options: {
-                                limit: 25000,
-                            },
-                        },
-                    },
-                    {
-                        test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
-                        use: [{
-                            loader: 'file-loader',
-                            options: {
-                                name: '[name].[ext]',
-                                outputPath: 'fonts/',    // where the fonts will go
-                            }
-                        }]
-                    },
-                    {
-                        loader: require.resolve('file-loader'),
-                        exclude: [/\.(js|jsx|mjs|tsx|ts)$/, /\.html$/, /\.json$/],
-                        options: {
-                            name: 'assets/[name].[hash:8].[ext]',
-                        },
-                    }]
-            },
-
-        ]
-    },
-    devtool: "source-map",
-    resolve: {
-        modules: [path.resolve(__dirname, 'node_modules')],
-        plugins: [new TsconfigPathsPlugin({ configFile: "./tsconfig.json", logLevel: 'info' })],
-        extensions: ['.ts', '.tsx', '.js', '.json'],
-        alias: {
-            'src': path.resolve(__dirname, 'src')
-        }
-    },
-    plugins:
-        [
-        new Printer(),
-        new CleanWebpackPlugin({
-            cleanAfterEveryBuildPatterns: ['dist']
-        }),
-        new MiniCssExtractPlugin({
-            filename: "[name].[chunkhash]h" +
-            ".css",
-            chunkFilename: "[id].[chunkhash].css"
-        }),
-        new LiveReloadPlugin({appendScriptTag: !prod}),
-        new HtmlWebpackPlugin({
-            template: path.resolve(__dirname, './src/index.html'),
-            filename: 'index.html' //relative to root of the application
-        }),
-        new CompressionPlugin({
-            test: /(\?.*)?$/i
-        })
-    ]
-};
-module.exports = config;