webpack

.babelrc

@@ -1,6 +1,12 @@
 {
-    "presets": [],
+    "presets": [
+        ["@babel/typescript", { "jsxPragma": "h" }]
+    ],
     "plugins": [
+        ["@babel/transform-react-jsx", {
+            "runtime": "automatic",
+            "importSource": "preact"
+        }],
         ["@babel/plugin-proposal-class-properties", { "loose": true }],
         ["@babel/plugin-proposal-object-rest-spread", { "loose": true,
             "useBuiltIns": true

Gruntfile.js

@@ -1,7 +1,6 @@
 /* eslint-env node */
 
 const fs = require('fs-extra');
-const path = require('path');
 const { execSync } = require('child_process');
 const debug = require('debug');
 
@@ -92,11 +91,6 @@ module.exports = function (grunt) {
             desktop: ['tmp/desktop', 'dist/desktop']
         },
         copy: {
-            html: {
-                src: 'app/index.html',
-                dest: 'tmp/index.html',
-                nonull: true
-            },
             'content-dist': {
                 cwd: 'app/content/',
                 src: '**',
@@ -104,13 +98,6 @@ module.exports = function (grunt) {
                 expand: true,
                 nonull: true
             },
-            icons: {
-                cwd: 'app/icons/',
-                src: ['*.png', '*.svg'],
-                dest: 'tmp/icons/',
-                expand: true,
-                nonull: true
-            },
             'dist-icons': {
                 cwd: 'app/icons/',
                 src: ['*.png', '*.svg'],
@@ -118,13 +105,6 @@ module.exports = function (grunt) {
                 expand: true,
                 nonull: true
             },
-            manifest: {
-                cwd: 'app/manifest/',
-                src: ['*.json', '*.xml'],
-                dest: 'tmp/',
-                expand: true,
-                nonull: true
-            },
             'dist-manifest': {
                 cwd: 'app/manifest/',
                 src: ['*.json', '*.xml'],
@@ -340,25 +320,6 @@ module.exports = function (grunt) {
         webpack: {
             app: webpackConfig.config(webpackOptions)
         },
-        'webpack-dev-server': {
-            options: {
-                webpack: webpackConfig.config({
-                    ...webpackOptions,
-                    mode: 'development',
-                    sha: 'dev'
-                }),
-                publicPath: '/',
-                contentBase: [
-                    path.resolve(__dirname, 'tmp'),
-                    path.resolve(__dirname, 'app/content')
-                ],
-                progress: false
-            },
-            js: {
-                keepalive: true,
-                port: 8085
-            }
-        },
         electron: {
             options: {
                 name: 'KeeWeb',

app/scripts/bootstrap.ts

@@ -1,3 +1,7 @@
+/* eslint-disable import/first */
+if (process.env.NODE_ENV === 'development') {
+    require('preact/debug');
+}
 import { h, render } from 'preact';
 import { App } from 'ui/app';
 import { Events } from 'util/events';
@@ -21,6 +25,7 @@ import { Logger } from 'util/logger';
 import { FeatureTester } from 'util/browser/feature-tester';
 import { UsbListener } from 'comp/devices/usb-listener';
 import { noop } from 'util/fn';
+/* eslint-enable */
 
 declare global {
     interface Window {

app/scripts/ui/app.ts

@@ -1,4 +1,3 @@
-import 'preact/debug';
 import { h, FunctionComponent } from 'preact';
 import { AppView } from 'views/app-view';
 

build/webpack.config.dev.js

@@ -0,0 +1,7 @@
+const webpackConfig = require('./webpack.config');
+
+module.exports = webpackConfig.config({
+    date: new Date(),
+    mode: 'development',
+    sha: 'dev'
+});

build/webpack.config.js

@@ -6,6 +6,7 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 
 const rootDir = path.join(__dirname, '..');
 
@@ -37,8 +38,6 @@ function config(options) {
             modules: true,
             reasons: true
         },
-        progress: false,
-        failOnError: true,
         resolve: {
             modules: [
                 path.join(rootDir, 'app/scripts'),
@@ -125,16 +124,11 @@ function config(options) {
                     options: { type: 'module', exports: 'default babelHelpers' }
                 },
                 {
-                    test: /\.js$/,
+                    test: /\.(js|tsx|ts)$/,
                     exclude: /(node_modules|babel-helpers\.js)/,
                     loader: 'babel-loader',
                     options: { cacheDirectory: true }
                 },
-                {
-                    test: /\.tsx?$/,
-                    use: 'ts-loader',
-                    exclude: /node_modules/
-                },
                 { test: /argon2\.wasm/, type: 'javascript/auto', loader: 'base64-loader' },
                 { test: /argon2(\.min)?\.js/, loader: 'raw-loader' },
                 {
@@ -177,6 +171,14 @@ function config(options) {
             ]
         },
         plugins: [
+            new CopyPlugin({
+                patterns: [
+                    { from: 'app/index.html', to: 'index.html' },
+                    { from: 'app/icons', to: 'icons' },
+                    { from: 'app/manifest/manifest.json', to: 'manifest.json' },
+                    { from: 'app/manifest/browserconfig.xml', to: 'browserconfig.xml' }
+                ]
+            }),
             new webpack.BannerPlugin(
                 'keeweb v' +
                     pkg.version +

grunt.entrypoints.js

@@ -5,15 +5,6 @@ module.exports = function(grunt) {
         'build-web-app'
     ]);
 
-    grunt.registerTask('dev', 'Build project and start web server and watcher', [
-        'build-web-app',
-        'devsrv'
-    ]);
-
-    grunt.registerTask('devsrv', 'Start web server and watcher', [
-        'webpack-dev-server'
-    ]);
-
     grunt.registerTask('desktop', 'Build web and desktop apps for all platforms', [
         'default',
         'build-desktop'

grunt.tasks.js

@@ -4,9 +4,6 @@ module.exports = function (grunt) {
     grunt.registerTask('build-web-app', [
         'clean',
         'eslint',
-        'copy:html',
-        'copy:icons',
-        'copy:manifest',
         'webpack:app',
         'inline',
         'htmlmin',

package.json

@@ -14,7 +14,9 @@
     "@babel/plugin-external-helpers": "^7.12.13",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-proposal-optional-chaining": "^7.14.2",
+    "@babel/plugin-transform-react-jsx": "^7.14.3",
     "@babel/preset-env": "^7.14.2",
+    "@babel/preset-typescript": "^7.13.0",
     "@fortawesome/fontawesome-free": "^5.15.3",
     "@keeweb/keeweb-native-messaging-host": "https://github.com/keeweb/keeweb-connect/releases/download/0.3.5/keeweb-native-messaging-host.tgz",
     "@keeweb/keeweb-native-modules": "https://github.com/keeweb/keeweb-native-modules/releases/download/0.11.6/keeweb-native-modules.tgz",
@@ -37,6 +39,7 @@
     "base64-loader": "1.0.0",
     "bourbon": "^7.0.0",
     "chai": "^4.3.4",
+    "copy-webpack-plugin": "^9.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^5.2.4",
     "dompurify": "^2.2.8",
@@ -113,6 +116,7 @@
     "wawoff2": "^2.0.0",
     "webpack": "^5.37.0",
     "webpack-bundle-analyzer": "^4.4.1",
+    "webpack-cli": "^4.7.0",
     "webpack-dev-server": "^3.11.2"
   },
   "optionalDependencies": {
@@ -125,7 +129,7 @@
     "eslint": "grunt eslint",
     "build-beta": "grunt --beta && cp dist/index.html ../keeweb-beta/index.html && cd ../keeweb-beta && git add index.html && git commit -a -m 'beta' && git push origin master",
     "electron": "cross-env KEEWEB_IS_PORTABLE=0 ELECTRON_DISABLE_SECURITY_WARNINGS=1 KEEWEB_EMULATE_HARDWARE_ENCRYPTION=persistent KEEWEB_HTML_PATH=http://localhost:8085 electron desktop --no-sandbox",
-    "dev": "grunt dev",
+    "dev": "webpack serve --config build/webpack.config.dev.js --port 8085 --content-base tmp --content-base app/content",
     "dev-desktop-macos": "grunt dev-desktop-darwin --skip-sign",
     "dev-desktop-macos-signed": "grunt dev-desktop-darwin-signed",
     "dev-desktop-windows": "grunt dev-desktop-win32 --skip-sign",

tsconfig.json

@@ -5,8 +5,10 @@
     "preserveConstEnums": true,
     "sourceMap": true,
     "strict": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "jsxImportSource": "preact",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
     "baseUrl": "app/scripts",
     "noEmitOnError": true,
     "esModuleInterop": true