I have an object (nodeObjs) that is in my index.ts that I want to send to my renderer to do some visualization with D3. However, I'm completely lost on how to send this object to renderer.ts
I'm using Electron Forge with TypeScript and Webpack. Below is my index.ts and my renderer.ts
// index.ts
import { app, BrowserWindow } from 'electron';
const path = require('path');
import { spawn } from 'child_process';
// This allows TypeScript to pick up the magic constant that's auto-generated by Forge's Webpack
// plugin that tells the Electron app where to look for the Webpack-bundled app code (depending on
// whether you're running in development or production).
declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
var pyProcess = spawn("python", ["-u", "C:\\Users\\t-byadavalli\\Documents\\mfstats\\main.py", "-mf"]);
// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
app.quit();
}
const createWindow = (): void => {
// Create the browser window.
const mainWindow = new BrowserWindow({
height: 600,
width: 800,
webPreferences: {
nodeIntegration: true
}
});
// and load the index.html of the app.
mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
// Open the DevTools.
mainWindow.webContents.openDevTools();
};
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
var nodeObjs: any = []
pyProcess.stdout.setEncoding("utf8");
pyProcess.stdout.on("data", (data: any) => {
if (data.includes('TopoString')) {
var start = data.indexOf("Node:");
var end = data.indexOf("StreamString");
var topoString = data.substring(start, end).split(';');
topoString.pop();
for (let i = 0; i < topoString.length; i++) {
topoString[i] = topoString[i].trim();
}
for (let i = 0; i < topoString.length; i++) {
var splitTopo = topoString[i].split('|');
let node: Record<string, string> = {};
for (let j = 0; j < splitTopo.length; j++) {
let before: string = splitTopo[j].substring(0, splitTopo[j].indexOf(':'));
let after: string = splitTopo[j].substring(splitTopo[j].indexOf(':')+1);
node[before] = after;
}
console.log(node);
nodeObjs.push(node);
}
console.log(nodeObjs);
}
});
app.on('activate', () => {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and import them here.
// renderer.ts
/**
* This file will automatically be loaded by webpack and run in the "renderer" context.
* To learn more about the differences between the "main" and the "renderer" context in
* Electron, visit:
*
* https://electronjs.org/docs/tutorial/application-architecture#main-and-renderer-processes
*
* By default, Node.js integration in this file is disabled. When enabling Node.js integration
* in a renderer process, please be aware of potential security implications. You can read
* more about security risks here:
*
* https://electronjs.org/docs/tutorial/security
*
* To enable Node.js integration in this file, open up `main.js` and enable the `nodeIntegration`
* flag:
*
* ```
* // Create the browser window.
* mainWindow = new BrowserWindow({
* width: 800,
* height: 600,
* webPreferences: {
* nodeIntegration: true
* }
* });
* ```
*/
import './index.css';
import * as d3 from 'd3';
var svg = d3.select("#circle").append("svg").attr("width", 200).attr("height", 200);
// Add the path using this helper function
svg.append('circle')
.attr('cx', 100)
.attr('cy', 100)
.attr('r', 50)
.attr('stroke', 'black')
.attr('fill', '#69a3b2');
console.log(' This message is being logged by "renderer.js", included via webpack');
If anyone can help me send nodeObjs to renderer.ts that would be greatly appreciated as I need to create a visualization out of the data parsed from the spawned Python process.