Merge remote-tracking branch 'origin/master' into ios-ime-responder

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">
+    <div id="app">
-    <center>Loading...</center>
+        <center>Loading...</center>
-</div>
+    </div>
-<noscript>JavaScript is required</noscript>
+    <noscript>JavaScript is required</noscript>
+    <script src="index.tsx"></script>
 </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;

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",
+    "prebuild": "tsc -noEmit",
-    "build": "cross-env NODE_ENV=development webpack"
+    "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",
+    "esbuild": "^0.15.7"
-    "webpack-cli": "^4.10.0"
   }
 }

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,
-    }
-};