Add support for React Devtools

Author: mkapal

README.md

@@ -160,6 +160,7 @@ root.render(
   - [Connection scope](#connection-scope)
   - [Human player scope](#human-player-scope)
   - [Global scope](#global-scope)
+- [Using React Devtools](#using-react-devtools)
 - [Development](#development)
 
 ## Requirements
@@ -976,6 +977,22 @@ function App() {
 }
 ```
 
+## Using React Devtools
+
+React Node InSim supports [React Devtools](https://github.com/facebook/react/tree/master/packages/react-devtools) out of the box. To enable integration with React Devtools in your application, first ensure you have installed the optional `react-devtools-core` dependency, and then run your app with the `DEV=true` environment variable:
+
+```shell
+DEV=true npm start
+```
+
+Then, start React Devtools itself:
+
+```shell
+npx react-devtools
+```
+
+After it starts, you should see the component tree of your InSim app. You can even inspect and change the props of components, and see the results immediately in LFS, without restarting it.
+
 ## Development
 
 ### Requirements

examples/index.tsx

@@ -28,7 +28,7 @@ inSim.connect({
   Host: host,
   Port: process.env.PORT ? parseInt(process.env.PORT, 10) : 29999,
   Admin: process.env.ADMIN ?? '',
-  Flags: host === '127.0.0.1' ? InSimFlags.ISF_LOCAL : undefined,
+  Flags: InSimFlags.ISF_LOCAL,
 });
 
 const root = createRoot(inSim);
@@ -37,15 +37,15 @@ root.render(
   <StrictMode>
     <ConnectionsPlayersProvider>
       <PlayersAndConnectionsExample />
-      <ScopesExample />
-      <PacketHooksExample />
-      <FlexExample isEditorVisible={false} />
-      <ButtonExample />
-      <GridExample />
-      <StackExample />
-      <ToggleButtonExample />
-      <ToggleButtonGroupExample />
-      <TextBoxExample />
+      {/*<ScopesExample />*/}
+      {/*<PacketHooksExample />*/}
+      {/*<FlexExample isEditorVisible={false} />*/}
+      {/*<ButtonExample />*/}
+      {/*<GridExample />*/}
+      {/*<StackExample />*/}
+      {/*<ToggleButtonExample />*/}
+      {/*<ToggleButtonGroupExample />*/}
+      {/*<TextBoxExample />*/}
     </ConnectionsPlayersProvider>
   </StrictMode>,
 );

package.json

@@ -39,7 +39,13 @@
   },
   "peerDependencies": {
     "node-insim": "^0.9.1 || 1 || 2 || 3 || 4 || 5",
-    "react": ">=18"
+    "react": ">=18",
+    "react-devtools-core": "^6.1.5"
+  },
+  "peerDependenciesMeta": {
+    "react-devtools-core": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@types/react-reconciler": "^0.28.2",
@@ -57,6 +63,7 @@
     "@types/node": "^18.11.9",
     "@types/ramda": "^0.30.0",
     "@types/react": "^18.2.23",
+    "@types/ws": "^8.18.1",
     "@typescript-eslint/eslint-plugin": "^5.22.0",
     "@typescript-eslint/parser": "^5.22.0",
     "@vitest/coverage-v8": "3.2.1",
@@ -71,6 +78,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.6.2",
     "react": "^18.2.0",
+    "react-devtools-core": "^6.1.5",
     "rimraf": "^5.0.5",
     "tsx": "^3.12.6",
     "typescript": "^4.9.5",

src/lib/renderer/devtools/devtools-window-polyfill.ts

@@ -0,0 +1,9 @@
+import ws from 'ws';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const customGlobal = global as any;
+
+// These things must exist before importing `react-devtools-core`
+customGlobal.WebSocket ||= ws;
+customGlobal.window ||= global;
+customGlobal.self ||= global;

src/lib/renderer/devtools/devtools.ts

@@ -0,0 +1,8 @@
+import './devtools-window-polyfill.js';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+import * as devtools from 'react-devtools-core';
+
+devtools.initialize();
+devtools.connectToDevTools();

src/lib/renderer/inSim/createRoot.tsx

@@ -66,6 +66,14 @@ export function createRoot(
     null,
   );
 
+  if (process.env['DEV'] === 'true') {
+    InSimRenderer.injectIntoDevTools({
+      bundleType: 1,
+      version: '18.2.0',
+      rendererPackageName: 'react-node-insim',
+    });
+  }
+
   roots.set(rootID, fiberRoot);
 
   // When a connection leaves, remove their UCID from all buttons

src/lib/renderer/inSim/hostConfig.tsx

@@ -18,6 +18,28 @@ import type {
   UpdatePayload,
 } from './types';
 
+if (process.env['DEV'] === 'true') {
+  try {
+    require('../devtools/devtools.js');
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } catch (error: any) {
+    if (error?.code === 'ERR_MODULE_NOT_FOUND') {
+      console.warn(
+        `
+The environment variable DEV is set to true, so React Node InSim tried to import \`react-devtools-core\`,
+but this failed as it was not installed. Debugging with React Devtools requires it.
+
+To install use this command:
+
+$ npm install --save-dev react-devtools-core
+          `.trim() + '\n',
+      );
+    } else {
+      throw error;
+    }
+  }
+}
+
 const NO_CONTEXT = {};
 let instanceCounter = 0;
 

yarn.lock

@@ -631,6 +631,13 @@
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.3.tgz#9a726e116beb26c24f1ccd6850201e1246122e04"
   integrity sha512-OxepLK9EuNEIPxWNME+C6WwbRAOOI2o2BaQEGzz5Lu2e4Z5eDnEo+/aVEDMIXywoJitJ7xWd641wrGLZdtwRyw==
 
+"@types/ws@^8.18.1":
+  version "8.18.1"
+  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.18.1.tgz#48464e4bf2ddfd17db13d845467f6070ffea4aa9"
+  integrity sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==
+  dependencies:
+    "@types/node" "*"
+
 "@types/yoga-layout@1.9.2":
   version "1.9.2"
   resolved "https://registry.yarnpkg.com/@types/yoga-layout/-/yoga-layout-1.9.2.tgz#efaf9e991a7390dc081a0b679185979a83a9639a"
@@ -2519,6 +2526,14 @@ ramda@^0.30.1:
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.30.1.tgz#7108ac95673062b060025052cd5143ae8fc605bf"
   integrity sha512-tEF5I22zJnuclswcZMc8bDIrwRHRzf+NqVEmqg50ShAZMP7MWeR/RGDthfM/p+BlqvF2fXAzpn8i+SJcYD3alw==
 
+react-devtools-core@^6.1.5:
+  version "6.1.5"
+  resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-6.1.5.tgz#c5eca79209dab853a03b2158c034c5166975feee"
+  integrity sha512-ePrwPfxAnB+7hgnEr8vpKxL9cmnp7F322t8oqcPshbIQQhDKgFDW4tjhF2wjVbdXF9O/nyuy3sQWd9JGpiLPvA==
+  dependencies:
+    shell-quote "^1.6.1"
+    ws "^7"
+
 react-reconciler@0.29.0:
   version "0.29.0"
   resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.29.0.tgz#ee769bd362915076753f3845822f2d1046603de7"
@@ -3214,6 +3229,11 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
+ws@^7:
+  version "7.5.10"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.10.tgz#58b5c20dc281633f6c19113f39b349bd8bd558d9"
+  integrity sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==
+
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"