Completely Redo GUI build code

gui/react/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env","@babel/preset-react", "@babel/preset-typescript"]
+}

gui/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anidl-gui",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.11.4",
@@ -11,23 +11,32 @@
     "notistack": "^2.0.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "typescript": "^4.9.5",
+    "typescript": "^5.4.4",
     "uuid": "^9.0.1",
     "ws": "^8.16.0"
   },
   "devDependencies": {
+    "@babel/cli": "^7.24.1",
+    "@babel/core": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
     "@types/node": "^18.14.0",
     "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.24",
-    "@types/uuid": "^9.0.8"
+    "@types/uuid": "^9.0.8",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^7.0.0",
+    "html-webpack-plugin": "^5.6.0",
+    "style-loader": "^3.3.4",
+    "ts-node": "^10.9.2",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
   },
   "proxy": "http://localhost:3000",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "build": "npx tsc && npx webpack"
   },
   "browserslist": {
     "production": [

gui/react/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "outDir": "./build",
     "target": "es5",
     "lib": [
       "dom",
@@ -13,15 +14,16 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
+    "module": "CommonJS",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noEmit": true,
+    //"noEmit": true,
     "jsx": "react-jsx",
     "downlevelIteration": true
   },
   "include": [
-    "./src"
+    "./src",
+    "./webpack.config.ts"
   ]
 }

gui/react/webpack.config.ts

@@ -0,0 +1,47 @@
+import webpack from 'webpack';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import path from 'path';
+
+const config: webpack.Configuration = {
+  entry: './src/index.tsx',
+  mode: 'production',
+  output: {
+    path: path.resolve(__dirname, './build'),
+    filename: 'index.js',
+  },
+  target: 'web',
+  resolve: {
+    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx)$/, 
+        exclude: /node_modules/, 
+        use: {
+          'loader': 'babel-loader',
+          options: {
+            presets: [
+              '@babel/typescript',
+              '@babel/preset-react',
+              ['@babel/preset-env', {
+                targets: 'defaults'
+              }]
+            ]
+          }
+        }, 
+      },
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, 'public', 'index.html')
+    })
+  ]
+};
+
+export default config;

modules/module.args.ts

@@ -29,7 +29,7 @@ const availableFilenameVars: AvailableFilenameVars[] = [
 export type AvailableMuxer = 'ffmpeg' | 'mkvmerge'
 export const muxer: AvailableMuxer[] = [ 'ffmpeg', 'mkvmerge' ];
 
-type TAppArg<T extends boolean|string|number|unknown[], K = any> = {
+export type TAppArg<T extends boolean|string|number|unknown[], K = any> = {
   name: string,
   group: keyof typeof groups,
   type: 'boolean'|'string'|'number'|'array',
@@ -881,7 +881,6 @@ const buildDefault = () => {
 };
 
 export {
-  TAppArg,
   getDefault,
   buildDefault,
   args,