webpack

package.json

@@ -1,12 +1,12 @@
 {
   "name": "meshtastic-web",
   "version": "2.3.3-0",
-  "type": "module",
   "description": "Meshtastic web client",
   "license": "GPL-3.0-only",
   "scripts": {
     "dev": "vite --host",
     "build": "tsc && vite build",
+    "build:webpack": "webpack build --config webpack.config.js",
     "check": "biome check .",
     "preview": "vite preview",
     "package": "gzipper c -i html,js,css,png,ico,svg,webmanifest,txt dist dist/output && tar -cvf dist/build.tar -C ./dist/output/ $(ls ./dist/output/)"
@@ -60,6 +60,8 @@
     "zustand": "4.5.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
     "@biomejs/biome": "^1.6.3",
     "@buf/meshtastic_protobufs.bufbuild_es": "1.8.0-20240325205556-b11811405eea.2",
     "@types/chrome": "^0.0.263",
@@ -70,14 +72,20 @@
     "@types/web-bluetooth": "^0.0.20",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.19",
+    "babel-loader": "^9.1.3",
     "gzipper": "^7.2.0",
+    "html-webpack-plugin": "^5.6.0",
     "postcss": "^8.4.38",
     "rollup-plugin-visualizer": "^5.12.0",
     "tailwindcss": "^3.4.3",
     "tar": "^6.2.1",
+    "ts-loader": "^9.5.1",
     "tslib": "^2.6.2",
-    "typescript": "^5.4.3",
+    "typescript": "^5.4.5",
     "vite": "^5.2.6",
-    "vite-plugin-environment": "^1.1.3"
+    "vite-plugin-environment": "^1.1.3",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
   }
 }

src/App.tsx

@@ -1,4 +1,4 @@
-import { DeviceWrapper } from "@app/DeviceWrapper.js";
+import { DeviceWrapper } from "@app/DeviceWrapper.js"
 import { PageRouter } from "@app/PageRouter.js";
 import { CommandPalette } from "@components/CommandPalette.js";
 import { DeviceSelector } from "@components/DeviceSelector.js";
@@ -50,3 +50,5 @@ export const App = (): JSX.Element => {
     </ThemeController>
   );
 };
+
+export default App;

src/components/PageComponents/Messages/Message.tsx

@@ -67,7 +67,7 @@ export const Message = ({
             message.state === "ack" ? "text-textPrimary" : "text-textSecondary"
           }`}
         >
-          {message.data}
+          {message.data}asdasdkjahkd!!!!!!!123!!!!!!!!
         </span>
       </div>
     </div>

src/index.tsx

@@ -16,3 +16,7 @@ root.render(
     <App />
   </StrictMode>,
 );
+
+export default () => (
+  <App />
+);

src/validation/config/position.ts

@@ -40,4 +40,8 @@ export class PositionValidation
 
   @IsArray()
   channelPrecision: number[];
+
+  gpsEnabled: boolean;
+
+  gpsAttemptTime: number;
 }

tsconfig.json

@@ -1,20 +1,17 @@
 {
   "include": ["src"],
   "compilerOptions": {
-    "target": "ESNext",
     "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
+    "lib": ["DOM", "DOM.Iterable", "ESNext", "es5", "es6"],
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
     "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noEmit": true,
+    "noEmit": false,
     "jsx": "react-jsx",
     "baseUrl": "./",
     "paths": {
@@ -34,6 +31,11 @@
       "@types/w3c-web-serial"
     ],
     "strictPropertyInitialization": false,
-    "experimentalDecorators": true
+    "experimentalDecorators": true,
+    "outDir": "./dist/",
+    "noImplicitAny": false,
+    "module": "es6",
+    "target": "es5",
+    "allowJs": true,
   }
 }

webpack.config.js

@@ -0,0 +1,91 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { ModuleFederationPlugin } = require('webpack').container;
+// const WebpackPwaManifest = require('webpack-pwa-manifest');
+const path = require('path');
+
+module.exports = {
+    mode: 'development',
+    entry: './src/App.tsx',
+    output: {
+        filename: 'main.js',
+        path: __dirname + '/dist',
+        publicPath: 'auto',
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js', '.jsx'],
+        alias: {
+          "@app": path.resolve("./src"),
+          "@pages": path.resolve(__dirname, "./src/pages"),
+          "@components": path.resolve(__dirname, "./src/components"),
+          "@core": path.resolve(__dirname, "./src/core"),
+          "@layouts": path.resolve(__dirname, "./src/layouts"),
+        },
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(ts|tsx|js|jsx)$/,
+                use: ["babel-loader", "ts-loader"],
+                exclude: /node_modules/,
+                // options: {
+                //     presets: ["@babel/preset-react"],
+                // },
+            },
+            // {
+            //     test: /\.(ts|tsx|js|jsx)$/,
+            //     use: 'ts-loader',
+            //     exclude: /node_modules/,
+            // },
+            // css and scss loader
+            {
+                // test: /\.css$/,
+                test: /\.(css|scss)$/,
+                use: ["style-loader", "css-loader"],
+            },
+
+            // image loader
+            {
+                test: /\.(png|svg|jpg|jpeg|gif)$/i,
+                type: "asset/resource",
+            },
+        ],
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: './index.html',
+        }),
+        // new WebpackPwaManifest({
+        //     filename: "manifest.json",
+        //     name: 'positive-intentions',
+        //     short_name: 'PI',
+        //     description: 'positive-intentions',
+        //     "icons": [
+        //         {
+        //             src: path.resolve('./public/favicon.ico'),
+        //             sizes: [96] // multiple sizes
+        //         },
+        //         {
+        //             src: path.resolve('./public/logo512.png'),
+        //             sizes: [96, 128, 192, 256, 384, 512], // multiple sizes
+        //             maskable: true,
+        //         }
+
+
+        //     ],
+        //     "start_url": ".",
+        //     "display": "standalone",
+        //     "theme_color": "#44b700",
+        //     "background_color": "#ffffff",
+        //     // crossorigin: 'use-credentials', // can be null, use-credentials or anonymous
+        //     inject: true,
+        // }),
+        new ModuleFederationPlugin({
+            name: 'meshtastic',
+            filename: 'remoteEntry.js',
+            exposes: {
+                './meshtastic': './src/App.tsx',
+            },
+            shared: { react: { singleton: true }, "react-dom": { singleton: true } }
+        }),
+    ],
+};