update electron in studio

packages/app/.env

@@ -1,2 +1,2 @@
 REACT_APP_ENV=local
-ELECTRON_START_URL='http://localhost:3000'
+ELECTRON_START_URL='http://localhost:8080'

packages/app/.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

packages/app/electron/electron.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow } from "electron";
+import { app, BrowserWindow, ipcMain } from "electron";
 import path from "path";
 import url from "url";
 
@@ -26,7 +26,22 @@ function createWindow() {
   //   );
   // }
 
-  mainWindow.loadURL(process.env.ELECTRON_START_URL || "http://localhost:3000");
+  mainWindow.loadURL(process.env.ELECTRON_START_URL || "http://localhost:8080");
+  // mainWindow.loadFile(path.join(__dirname, "public", "index.html"));
+
+  // ipcMain.handle("globalNodeRegistry", async (event, arg) => {
+  //   const encre = await import("@encrejs/core");
+
+  //   return encre.globalNodeRegistry;
+  // });
+
+  mainWindow.webContents.on("before-input-event", (_, input) => {
+    if (input.type === "keyDown" && input.key === "F12") {
+      mainWindow?.webContents.isDevToolsOpened()
+        ? mainWindow?.webContents.closeDevTools()
+        : mainWindow?.webContents.openDevTools({ mode: "left" });
+    }
+  });
 
   mainWindow.on("closed", () => {
     mainWindow = null;

packages/app/electron/tsconfig.json

@@ -2,12 +2,12 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "noEmit": false,
-    "outDir": "../build/electron",
+    "outDir": "../dist/main",
     "rootDir": ".",
-    "module": "commonjs"
-    // "module": "ESNext",
-    // "moduleResolution": "node",
-    // "target": "ESNext"
+    "target": "ESNEXT",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "esModuleInterop": true
   },
-  "include": ["./**/*.ts"]
+  "include": ["electron.ts"]
 }

packages/app/package.json

@@ -5,9 +5,9 @@
   "author": "Encre",
   "license": "MIT",
   "private": true,
-  "type": "commonjs",
-  "packageManager": "[email protected].21",
-  "main": "build/electron/electron.js",
+  "type": "module",
+  "packageManager": "[email protected].19",
+  "main": "./main/electron.js",
   "devDependencies": {
     "@atlaskit/eslint-plugin-design-system": "^4.11.2",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
@@ -25,7 +25,8 @@
     "@typescript-eslint/eslint-plugin": "^6.7.0",
     "@typescript-eslint/parser": "^6.7.0",
     "concurrently": "^8.2.1",
-    "electron": "^26.3.0",
+    "css-loader": "^7.1.2",
+    "electron": "^28.0.0",
     "eslint": "^8.49.0",
     "eslint-cjs-to-esm": "^2.2.0",
     "eslint-config-prettier": "^9.0.0",
@@ -35,12 +36,16 @@
     "eslint-plugin-n": "^16.1.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-promise": "^6.1.1",
+    "esm": "^3.2.25",
     "node-polyfill-webpack-plugin": "^4.0.0",
     "prettier": "^3.0.3",
     "react-app-rewired": "^2.2.1",
     "react-scripts": "5.0.1",
     "recoil-persist": "^5.1.0",
-    "wait-on": "^7.0.1"
+    "style-loader": "^4.0.0",
+    "ts-loader": "^9.5.1",
+    "wait-on": "^7.0.1",
+    "webpack-cli": "^5.1.4"
   },
   "dependencies": {
     "@atlaskit/css-reset": "^6.5.4",
@@ -79,13 +84,21 @@
     "ws": "^8.14.1",
     "yaml": "^2.3.2"
   },
+  "imports": {
+    "@encrejs/core": "./node_modules/@encrejs/core/*.js"
+  },
   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint": "eslint src/**/*.{ts,tsx} --quiet --fix",
     "lint-fix": "eslint --fix src/**/*.{ts,tsx} src/**/**/*.{ts,tsx}",
+    "build:react": "webpack --config webpack.config.cjs",
+    "build:electron": "tsc -p electron/tsconfig.json",
+    "start:dev": "concurrently \"yarn start:react\" \"wait-on http://localhost:8000 && yarn start:electron\"",
+    "start:react": "webpack serve --config webpack.config.cjs --mode development",
+    "start:electron": "electron .",
     "electron-build": "tsc -p electron/tsconfig.json",
     "electron-start": "yarn electron-build && electron .",
     "electron-dev": "concurrently \"yarn start\" \"wait-on http://localhost:3000 && yarn electron-start\""
@@ -108,4 +121,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

packages/app/public/index.html

@@ -2,19 +2,19 @@
 <html lang="en" data-theme="dark:dark light:light" data-color-mode="dark">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="./favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="./logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="./manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -39,5 +39,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="bundle.js"></script>
   </body>
 </html>

packages/app/src/components/NodeContentBody.tsx

@@ -7,7 +7,7 @@ import { useRecoilValue } from 'recoil';
 
 import { useStableCallback } from '../hooks/useStableCallback';
 import { useUIContextDescriptors } from '../hooks/useUIContextDescriptors';
-import { nodeInstanceMapState } from '../state/node';
+import { nodeInstanceState } from '../state/node';
 import {
   KnownNodeContentBodyProps,
   NodeContentBodyProps,
@@ -35,7 +35,7 @@ const NodeContentBodyWrapper = styled.div<{
 
 export const NodeContentBody: FC<NodeContentBodyProps> = memo(
   ({ node }: NodeContentBodyProps) => {
-    const nodeInstanceMap = useRecoilValue(nodeInstanceMapState);
+    const nodeInstance = useRecoilValue(nodeInstanceState(node.id));
 
     const {
       isPending,
@@ -44,7 +44,7 @@ export const NodeContentBody: FC<NodeContentBodyProps> = memo(
       isFetching,
     } = useQuery({
       queryKey: ['nodeBody', node.id],
-      queryFn: () => nodeInstanceMap[node.id]?.getBody(),
+      queryFn: () => nodeInstance?.getBody(),
     });
 
     if (isPending) return <></>;

packages/app/src/hooks/useContextMenuNodeGraphHandler.ts

@@ -20,6 +20,7 @@ import { showContextMenuState } from '../state/contextmenu';
 import {
   collapsingNodeIdsState,
   nodeMapState,
+  nodeRegistryState,
   nodesState,
   pinningNodeIdsState,
   selectingNodeIdsState,
@@ -28,7 +29,7 @@ import { connectionsState } from '../state/nodeconnection';
 import { removeWireDataState, selectingWireIdsState } from '../state/wire';
 import { ContextMenuConfigContextData } from '../types/contextmenu.type';
 import {
-  globalNodeRegistry,
+  // globalNodeRegistry,
   GraphComment,
   Node,
   NodeBody,
@@ -52,6 +53,7 @@ export function useContextMenuNodeGraphHandler() {
   const [selectingCommentIds, setSelectingCommentIds] = useRecoilState(
     selectingCommentIdsState,
   );
+  const nodeRegistry = useRecoilValue(nodeRegistryState);
   const nodeMap = useRecoilValue(nodeMapState);
   const [selectingWireIds, setSelectingWireIds] = useRecoilState(
     selectingWireIdsState,
@@ -168,22 +170,22 @@ export function useContextMenuNodeGraphHandler() {
       position: { x: number; y: number },
       registerArgs?: Record<string, unknown>,
     ) => {
-      const newNode: Node = globalNodeRegistry.createDynamic(
-        nodeType,
-        nodeSubType,
-        registerArgs,
-      );
-      newNode.visualInfo = {
-        ...newNode.visualInfo,
-        position: {
-          ...newNode.visualInfo.position,
-          ...position,
-        },
-      };
-
-      changeNodes?.([...nodes, newNode]);
+      if (nodeRegistry) {
+        const newNode: Node = nodeRegistry.createDynamic(
+          nodeType,
+          nodeSubType,
+          registerArgs,
+        );
+        newNode.visualInfo = {
+          ...newNode.visualInfo,
+          position: {
+            ...newNode.visualInfo.position,
+            ...position,
+          },
+        };
 
-      // changeNodes?.([...nodes]);
+        changeNodes?.([...nodes, newNode]);
+      }
     },
   );
 

packages/app/src/state/graph.ts

@@ -10,7 +10,7 @@ import myMp3 from '../assets/sunflower.mp3';
 import myPng from '../assets/timetable.png';
 import { NodeGraph } from '../types/graph.type';
 import {
-  globalNodeRegistry,
+  // globalNodeRegistry,
   Node,
   NodeInputPortDef,
   NodeOutputPortDef,
@@ -660,7 +660,7 @@ export const graphState = atom<NodeGraph>({
       //           throw new Error("Function not implemented.");
       //         },
       //       },
-      globalNodeRegistry.createDynamic('prompt', 'string'),
+      // globalNodeRegistry.createDynamic('prompt', 'string'),
     ],
     connections: [],
     comments: [