Merge branch 'dev' into 'main'

Implement Inter-Process Communication (IPC)

See merge request contribute/prompt-dev-env!6

gui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prompt-dev-env",
-  "productName": "Prompt Development Environment",
+  "productName": "BetterPrompts",
   "version": "1.0.0",
   "description": "An integrated prompt development environment.",
   "main": ".webpack/main",

gui/src/main/EventSystem.js

@@ -0,0 +1,22 @@
+// src/main/EventSystem.js
+const { ipcMain } = require('electron');
+
+class EventSystem {
+    constructor() {
+        console.log("[EVENT-SYSTEM] created");
+        this.initializeIpcListeners();
+    }
+
+    initializeIpcListeners() {
+        ipcMain.on('renderer-event', (event, arg) => {
+            console.log('[EVENT-SYSTEM] Received message from renderer:', arg);
+            event.reply('main-event-response', 'Response from main process');
+        });
+    }
+
+    test() {
+        console.log('[EVENT-SYSTEM] test function executed');
+    }
+}
+
+module.exports = EventSystem;

gui/src/main/main.js

@@ -1,10 +1,14 @@
 const { app, BrowserWindow } = require('electron');
 const path = require('node:path');
+const EventSystem = require('./EventSystem');
 
 if (require('electron-squirrel-startup')) {
   app.quit();
 }
 
+const eventSystem = new EventSystem();
+eventSystem.test();
+
 const createWindow = () => {
   const mainWindow = new BrowserWindow({
     width: 800,
@@ -13,19 +17,19 @@ const createWindow = () => {
       preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
       contextIsolation: true,
       enableRemoteModule: false,
-      nodeIntegration: false
+      nodeIntegration: false,
     },
     show: false
   });
 
   mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
 
   mainWindow.once('ready-to-show', () => {
-    mainWindow.maximize();
+    //mainWindow.maximize();
     mainWindow.show();
   });
 
-  //mainWindow.webContents.openDevTools();
+  mainWindow.webContents.openDevTools();
 };
 
 app.whenReady().then(() => {

gui/src/main/preload.js

@@ -1,2 +1,19 @@
-// See the Electron documentation for details on how to use preload scripts:
-// https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts
+// src/main/preload.js
+const { contextBridge, ipcRenderer } = require('electron');
+
+contextBridge.exposeInMainWorld('api', {
+  send: (channel, data) => {
+    // whitelist channels to ensure security
+    let validChannels = ['renderer-event']; // Make sure to use the correct channel name
+    if (validChannels.includes(channel)) {
+      ipcRenderer.send(channel, data);
+    }
+  },
+  receive: (channel, func) => {
+    let validChannels = ['main-event-response']; // Make sure to use the correct channel name
+    if (validChannels.includes(channel)) {
+      // Deliberately strip event as it includes `sender`
+      ipcRenderer.on(channel, (event, ...args) => func(...args));
+    }
+  }
+});

gui/src/renderer/RendererEventSystem.js

@@ -0,0 +1,18 @@
+// src/renderer/RendererEventSystem.js
+export default class RendererEventSystem {
+  constructor() {
+    console.log("[R-EVENT-SYSTEM] created");
+    this.initializeIpcListeners();
+  }
+
+  initializeIpcListeners() {
+    window.api.receive('main-event-response', (data) => {
+      console.log('[R-EVENT-SYSTEM] Received response from main process:', data);
+    });
+  }
+
+  test() {
+    console.log('[R-EVENT-SYSTEM] test function executed');
+    window.api.send('renderer-event', 'Hello to Better Prompts');
+  }
+}

gui/src/renderer/renderer.js

@@ -1,3 +1,6 @@
+// renderer.js
 import './index.css';
+import RendererEventSystem from './RendererEventSystem';
 
-console.log('👋 This message is being logged by "renderer.js", included via webpack');
+let rEventSystem = new RendererEventSystem();
+rEventSystem.test();