Hot reload

.gitignore

@@ -261,4 +261,7 @@ fabric.properties
 # https://plugins.jetbrains.com/plugin/12206-codestream
 .idea/codestream.xml
 
-# End of https://www.toptal.com/developers/gitignore/api/macos,node,webstorm
+# End of https://www.toptal.com/developers/gitignore/api/macos,node,webstorm
+
+.vscode
+server/hotReload/altv-dev-tools-hr-*/*.js

client/WebView.ts

@@ -1,7 +1,7 @@
 import alt from "alt-client";
 import GenericRPC from "../shared/RPC/RPC";
 
-const webview = new alt.WebView(process.env.NODE_ENV === 'production' ? 'http://resource/dist/frontend/index.html' : 'http://192.168.192.1:3000');
+const webview = new alt.WebView(process.env.NODE_ENV === 'production' ? 'http://resource/dist/frontend/index.html' : 'localhost:3000');
 
 const webviewRPC = new GenericRPC(webview, {
     name: 'client-webview'
@@ -20,4 +20,4 @@ webview.on('load', () => {
     webview.emit('ready');
 })
 
-export { webview, webviewRPC };
+export { webview, webviewRPC };

client/build.js

@@ -0,0 +1,15 @@
+import { altvEsbuild } from "altv-esbuild";
+import esbuild from "esbuild";
+import { SHARED_BUILD_OPTIONS } from "../shared/build";
+
+esbuild.build({
+    ...SHARED_BUILD_OPTIONS.esbuild,
+    entryPoints: ["./index.ts"],
+    outfile: "../dist/client.js",
+    plugins: [
+        altvEsbuild({
+            mode: "client",
+            ...SHARED_BUILD_OPTIONS.altvEsbuild,
+        }),
+    ],
+});

client/controllers/CodeEditorController.ts

@@ -8,6 +8,7 @@ import ControlsController from "./ControlsController";
 import Utils from "../utils/Utils";
 import AsyncFunction = Utils.AsyncFunction;
 import {codeHelpers} from "../../shared/codeHelpers";
+import { KeyCode } from "altv-enums";
 
 export default class CodeEditorController {
     static readonly instance = new CodeEditorController();
@@ -26,10 +27,19 @@ export default class CodeEditorController {
         })
 
         alt.on('keydown', this.onKeydown);
+
+        // TEST
+        new alt.Utils.ConsoleCommand("hotreload", () => {
+            this.hotReloadEnabled = !this.hotReloadEnabled;
+            alt.log("hotReloadEnabled:", this.hotReloadEnabled);
+
+            alt.emitServer("codeEditor:toggleHotReload", this.hotReloadEnabled);
+        });
     }
 
     private _state = false;
     private _opacity = false;
+    private hotReloadEnabled = false;
 
     private static readonly inspectSettings = {
         colors: true,
@@ -108,6 +118,14 @@ export default class CodeEditorController {
     // endregion
 
     private static async evalClientCode(id: number, code: string) {
+        if (CodeEditorController.instance.hotReloadEnabled) {
+            console.log("evalClientCode with hotreload");
+            return await serverRPC.request('codeEditor:evalClient', code);
+        }
+
+        // TEST
+        console.log("evalClientCode without hotreload");
+
         try {
             const res = await new AsyncFunction('alt', 'console', 'native', 'natives', 'game', ...Object.keys(codeHelpers), code)
             (
@@ -129,8 +147,8 @@ export default class CodeEditorController {
         return await serverRPC.request('codeEditor:eval', code, id);
     }
 
-    private onKeydown = (key: number) => {
-        if (key === 117) {
+    private onKeydown = (key: KeyCode) => {
+        if (key === KeyCode.F6) {
             this._state = !this._state;
             if (this._state) {
                 ControlsController.instance.block('codeEditor');
@@ -141,8 +159,8 @@ export default class CodeEditorController {
             }
             webview.emit('toggle', 'codeEditor', this._state);
         }
-        if (key === 116) {
+        if (key === KeyCode.F5) {
             webview.emit('codeEditor:halfTransparent', (this._opacity = !this._opacity));
         }
     };
-}
+}

client/controllers/FlyController.ts

@@ -29,7 +29,7 @@ export default class FlyController {
 
     onGameEntityCreate = (entity: alt.Entity) => {
         if (!(entity instanceof alt.Player)) return;
-        natives.freezeEntityPosition(entity.id, entity.getStreamSyncedMeta('fly'));
+        natives.freezeEntityPosition(entity.id, !!entity.getStreamSyncedMeta('fly'));
     }
 
     onStreamSyncedMetaChange = (entity: alt.Entity, key: string, value: any) => {
@@ -195,4 +195,4 @@ export default class FlyController {
         natives.setCamCoord(this._cam, newPos.x, newPos.y, newPos.z);
         natives.setCamRot(this._cam, rot.x, rot.y, rot.z, 2);
     }
-}
+}

client/package.json

@@ -4,20 +4,20 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "esbuild ./index.ts --format=esm --bundle --watch --external:alt-* --external:natives --outfile=../dist/client.js --define:process.env.NODE_ENV=\\\"development\\\" --define:process=\"{\\\"env\\\":{}}\"",
-    "build": "esbuild ./index.ts --format=esm --bundle --external:alt-* --external:natives --outfile=../dist/client.js --define:process.env.NODE_ENV=\\\"production\\\" --define:process=\"{\\\"env\\\":{}}\""
+    "dev": "node --es-module-specifier-resolution=node build.js --dev",
+    "build": "node --es-module-specifier-resolution=node build.js"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@altv/types-client": "^1.9.0",
-    "@altv/types-natives": "^1.4.3",
-    "@altv/types-shared": "^1.0.8",
-    "esbuild": "^0.13.10"
+    "@altv/types-client": "^2.3.8",
+    "@altv/types-natives": "^1.4.5",
+    "@altv/types-shared": "^1.3.2",
+    "esbuild": "^0.15.14"
   },
   "dependencies": {
     "util": "^0.12.4"
-  }
+  },
+  "type": "module"
 }

frontend/package.json

@@ -40,18 +40,18 @@
     ]
   },
   "devDependencies": {
+    "@altv/types-client": "^2.3.8",
+    "@altv/types-natives": "^1.4.5",
+    "@altv/types-server": "^2.5.1",
+    "@altv/types-shared": "^1.3.2",
+    "@altv/types-webview": "^1.0.5",
+    "@craco/craco": "^6.4.0",
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "monaco-editor-webpack-plugin": "^5.0.0",
-    "@altv/types-client": "^1.9.0",
-    "@altv/types-natives": "^1.4.3",
-    "@altv/types-server": "^2.0.7",
-    "@altv/types-shared": "^1.0.8",
-    "@altv/types-webview": "^1.0.2",
-    "@craco/craco": "^6.4.0",
     "raw-loader": "^4.0.2",
     "react-app-rewired": "^2.1.8",
-    "typescript": "^4.4.4"
+    "typescript": "^4.9.3"
   }
 }

frontend/src/windows/codeEditor/CodeEditor.tsx

@@ -72,6 +72,7 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
     private _ref = React.createRef<Editor>();
     private files: File[] = [];
     private actionId = 0;
+    private interv = -1;
 
     componentDidMount() {
         document.addEventListener('keydown', this.onKeyPress);
@@ -85,13 +86,24 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
                 highlightSeparators: true
             }
         }))
+
+        let prevCode = '';
+        this.interv = window.setInterval(() => {
+            const currentCode = this.getCurrentCode();
+            if (prevCode === currentCode) return;
+
+            prevCode = currentCode;
+            this.execute();
+        }, 300);
     }
 
     componentWillUnmount() {
         document.removeEventListener('keydown', this.onKeyPress);
         document.addEventListener('keydown', this.onKeyPress);
         window.alt.off('log', this.log);
         window.alt.off('codeEditor:halfTransparent', this.changeOpacity);
+
+        if(this.interv > -1) window.clearInterval(this.interv);
     }
 
     private converter = new Convert({

package.json

@@ -16,6 +16,7 @@
     "build": "concurrently npm:build-*"
   },
   "devDependencies": {
+    "altv-esbuild": "^0.3.3",
     "concurrently": "^6.3.0"
   }
 }

server/build.js

@@ -0,0 +1,16 @@
+import { altvEsbuild } from "altv-esbuild";
+import esbuild from "esbuild";
+import { SHARED_BUILD_OPTIONS } from "../shared/build";
+
+esbuild.build({
+    ...SHARED_BUILD_OPTIONS.esbuild,
+    platform: "node",
+    entryPoints: ["./index.ts"],
+    outfile: "../dist/server.js",
+    plugins: [
+        altvEsbuild({
+            ...SHARED_BUILD_OPTIONS.altvEsbuild,
+            mode: "server",
+        }),
+    ],
+});