First optimizations

.babelrc

@@ -0,0 +1,11 @@
+{
+    "presets": [
+        "@babel/preset-env",
+        [
+            "@babel/preset-react",
+            {
+                "runtime": "automatic"
+            }
+        ]
+    ]
+}

client/src/api/config.demo.ts

@@ -12,7 +12,7 @@ function get() {
   });
 }
 
-function set(values) {
+function set(values: any) {
   return new Promise((resolve, reject) => {
     resolve({
       "status": "ok",

client/src/api/config.ts

@@ -14,7 +14,7 @@ function get() {
   }))
 }
 
-function set(values) {
+function set(values: any) {
   return wrap(fetch('/cosmos/api/config', {
     method: 'PUT',
     headers: {

client/src/api/constellation.demo.tsx

@@ -46,7 +46,7 @@ function list() {
   });
 }
 
-function addDevice(device) {
+function addDevice(device: any) {
   return new Promise((resolve, reject) => {
     resolve({
       "data": {
@@ -103,7 +103,7 @@ function getLogs() {
   });
 }
 
-function connect(file) {
+function connect(file: any) {
   return new Promise((resolve, reject) => {
     resolve({
       "status": "ok",
@@ -111,7 +111,7 @@ function connect(file) {
   });
 }
 
-function block(nickname, devicename, block) {
+function block(nickname: any, devicename: any, block: any) {
   return new Promise((resolve, reject) => {
     resolve({
       "status": "ok",

client/src/api/constellation.tsx

@@ -9,7 +9,7 @@ function list() {
   }))
 }
 
-function addDevice(device) {
+function addDevice(device: any) {
   return wrap(fetch('/cosmos/api/constellation/devices', {
     method: 'POST',
     headers: {
@@ -56,7 +56,7 @@ function getLogs() {
   }))
 }
 
-function connect(file) {
+function connect(file: Blob) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
     
@@ -86,7 +86,7 @@ function connect(file) {
   });
 }
 
-function block(nickname, devicename, block) {
+function block(nickname: any, devicename: any, block: any) {
   return wrap(fetch(`/cosmos/api/constellation/block`, {
     method: 'POST',
     headers: {

client/src/react-app-env.d.jsx

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

client/src/utils/SyntaxHighlight.jsx

@@ -1,14 +1,17 @@
 import PropTypes from 'prop-types';
 
 // third-party
-import SyntaxHighlighter from 'react-syntax-highlighter';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
 
 // ==============================|| CODE HIGHLIGHTER ||============================== //
 
+SyntaxHighlighter.registerLanguage('javascript', js);
+
 export default function SyntaxHighlight({ children, ...others }) {
     return (
-        <SyntaxHighlighter language="javacript" showLineNumbers style={a11yDark} {...others}>
+        <SyntaxHighlighter language="javascript" showLineNumbers style={a11yDark} {...others}>
             {children}
         </SyntaxHighlighter>
     );

package.json

@@ -60,7 +60,6 @@
     "simplebar": "^5.3.8",
     "simplebar-react": "^2.4.1",
     "timeago.js": "^4.0.2",
-    "typescript": "4.8.3",
     "vite": "^4.2.0",
     "web-vitals": "^3.0.2",
     "whiskers": "^0.4.0",
@@ -73,6 +72,14 @@
       "react-dom": "^18.2.0"
     }
   },
+  "resolutions": {
+    "terser": "npm:@swc/core"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss",
+    "**/*.sass"
+  ],
   "scripts": {
     "client": "vite",
     "client-build": "vite build --base=/cosmos-ui/",
@@ -91,11 +98,6 @@
       "react-app/jest"
     ]
   },
-  "babel": {
-    "presets": [
-      "@babel/preset-react"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -109,8 +111,16 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.19.1",
+    "@babel/core": "^7.23.5",
     "@babel/eslint-parser": "^7.19.1",
+    "@babel/preset-env": "^7.23.5",
+    "@swc/core": "^1.3.100",
+    "babel-loader": "^9.1.3",
+    "browserify-fs": "^1.0.0",
+    "buffer": "^6.0.3",
+    "crypto-browserify": "^3.12.0",
+    "css-loader": "^6.8.1",
+    "css-minimizer-webpack-plugin": "^5.0.1",
     "eslint": "^8.23.1",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.5.0",
@@ -122,6 +132,21 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.8",
     "eslint-plugin-react-hooks": "4.6.0",
-    "prettier": "2.7.1"
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.3",
+    "mini-css-extract-plugin": "^2.7.6",
+    "path-browserify": "^1.0.1",
+    "prettier": "2.7.1",
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2",
+    "stream-browserify": "^3.0.0",
+    "style-loader": "^3.3.3",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.3.2",
+    "util": "^0.12.5",
+    "webpack": "^5.89.0",
+    "webpack-bundle-analyzer": "^4.10.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-merge": "^5.10.0"
   }
 }

tsconfig.json

@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+        "outDir": "client/dist",
+        "noImplicitAny": true,
+        "module": "es6",
+        "target": "es6",
+        "jsx": "react",
+        "allowJs": true,
+        "moduleResolution": "node",
+        "rootDir": "client/src",
+        "resolveJsonModule": true,
+        "allowSyntheticDefaultImports": true
+    },
+    "include": ["client/src/**/*"],
+    "exclude": ["client/**/*.demo*"]
+}

vite.config.js

@@ -1,20 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-  root: 'client',
-  build: {
-    outDir: '../static',
-  },
-  server: {
-    proxy: {
-      '/cosmos/api': {
-        target: 'https://localhost:8443',
-        secure: false,
-        ws: true,
-      }
-    }
-  }
-})

webpack.config.js

@@ -0,0 +1,84 @@
+const { IgnorePlugin } = require("webpack")
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
+const TerserPlugin = require("terser-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const path = require('path');
+
+module.exports = {
+    entry: './client/src/index',
+    module: {
+        rules: [
+            {
+                test: /\.(ts|tsx)$/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.(js|jsx)$/,
+                use: "babel-loader",
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.s[ac]ss$/i,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    { loader: "css-loader", options: { modules: true } },
+                    "sass-loader",
+                ],
+            },
+            {
+                test: /\.css$/i,
+                use: ["style-loader", { loader: "css-loader", options: { modules: true } },],
+            },
+            {
+                test: /\.(jpe?g|png|gif|svg)$/i,
+                loader: 'file-loader',
+            }
+        ],
+    },
+    resolve: {
+        extensions: ['.*', '.tsx', '.ts', '.jsx', '.js'],
+        fallback: {
+            "stream": require.resolve("stream-browserify"),
+            "crypto": require.resolve("crypto-browserify"),
+            "path": require.resolve("path-browserify"),
+            "fs": require.resolve("browserify-fs"),
+            "buffer": require.resolve("buffer/"),
+            "util": require.resolve("util/"),
+        }
+    },
+    plugins: [
+        new IgnorePlugin({
+            resourceRegExp: /[\d\D]*.demo[\d\D]*/
+        }),
+        new HtmlWebpackPlugin({
+            template: path.join(__dirname, "client", "index.html"),
+        }),
+        new BundleAnalyzerPlugin(),
+    ],
+    output: {
+        path: path.resolve(__dirname, 'client/dist'),
+    },
+    optimization: {
+        chunkIds: "total-size",
+        moduleIds: "size",
+        mergeDuplicateChunks: true,
+        portableRecords: true,
+        sideEffects: true,
+        minimizer: [
+            new CssMinimizerPlugin(),
+            new TerserPlugin({
+                minify: TerserPlugin.swcMinify,
+                parallel: true,
+                extractComments: "all",
+                terserOptions: {
+                    mangle: true,
+                    compress: true,
+                    sourceMap: false,
+                }
+            })
+        ]
+    }
+};