Building Studio in Public: Maintaining High Performance in Our Local Development App for Enhanced UX

const { app, utilityProcess } = require( 'electron' );

// This path should be calculated dynamically as the file could be in
// different locations depending on the build configuration
const PROCESS_MODULE_PATH = './process-child.js';

const DEFAULT_RESPONSE_TIMEOUT = 120000;

class Process {
	lastMessageId = 0;
	process;
	ongoingMessages = {};

	async init() {
		return new Promise( ( resolve, reject ) => {
			const spawnListener = async () => {
				// Removing exit listener as we only need it upon starting
				this.process?.off( 'exit', exitListener );
				resolve();
			};
			const exitListener = ( code ) => {
				if ( code !== 0 ) {
					reject( new Error( `process exited with code ${ code } upon starting` ) );
				}
			};

			this.process = utilityProcess
				.fork( PROCESS_MODULE_PATH, [], {
					serviceName: 'dedicated-process',
					env: {
						...process.env,
						IN_CHILD_PROCESS: 'true',
						APP_NAME: app.name,
						// Note that Electron context won't be available in the dedicated process.
						// Add here other environment variables that might be needed.
					},
				} )
				.on( 'spawn', spawnListener )
				.on( 'exit', exitListener );
		} );
	}

	// This is an example function. Feel free to add more for other purposes.
	async exampleFunc( command, args ) {
		const message = 'exampleFunc';
		const messageId = this.sendMessage( message, { command, args } );
		return await this.waitForResponse( message, messageId );
	}

	// It's important to keep in mind that the process will be running
	// until it's explicitly stopped.
	async stop() {
		await this.killProcess();
	}

	sendMessage( message, data ) {
		const process = this.process;
		if ( ! process ) {
			throw Error( 'The process is not running' );
		}

		const messageId = this.lastMessageId++;
		process.postMessage( { message, messageId, data } );
		return messageId;
	}

	async waitForResponse( originalMessage, originalMessageId, timeout = DEFAULT_RESPONSE_TIMEOUT ) {
		const process = this.process;
		if ( ! process ) {
			throw Error( 'The process is not running' );
		}
		if ( this.ongoingMessages[ originalMessageId ] ) {
			throw Error(
				`The 'waitForResponse' function was already called for message ID ${ originalMessageId } from the message '${ originalMessage }'. 'waitForResponse' may only be called once per message ID.`
			);
		}

		return new Promise( ( resolve, reject ) => {
			const handler = ( { message, messageId, data, error } ) => {
				if ( message !== originalMessage || messageId !== originalMessageId ) {
					return;
				}
				process.removeListener( 'message', handler );
				clearTimeout( timeoutId );
				delete this.ongoingMessages[ originalMessageId ];
				if ( typeof error !== 'undefined' ) {
					console.error( error );
					reject( new Error( error ) );
					return;
				}
				resolve( data );
			};

			const timeoutHandler = () => {
				reject( new Error( `Request for message ${ originalMessage } timed out` ) );
				process.removeListener( 'message', handler );
			};
			const timeoutId = setTimeout( timeoutHandler, timeout );
			const cancelHandler = () => {
				clearTimeout( timeoutId );
				reject( {
					error: new Error( `Request for message ${ originalMessage } was canceled` ),
					canceled: true,
				} );
				process.removeListener( 'message', handler );
			};
			this.ongoingMessages[ originalMessageId ] = { cancelHandler };

			process.addListener( 'message', handler );
		} );
	}

	async killProcess() {
		const process = this.process;
		if ( ! process ) {
			throw Error( 'The process is not running' );
		}

		this.cancelOngoingMessages();

		return new Promise( ( resolve, reject ) => {
			process.once( 'exit', ( code ) => {
				if ( code !== 0 ) {
					reject( new Error( `Process exited with code ${ code } upon stopping` ) );
					return;
				}
				resolve();
			} );
			process.kill();
		} ).catch( ( error ) => {
			console.error( error );
		} );
	}

	cancelOngoingMessages() {
		Object.values( this.ongoingMessages ).forEach( ( { cancelHandler } ) => {
			cancelHandler();
		} );
	}
}

module.exports = Process;

// Replace with initial setup logic based on the environment variables if needed.
console.log( `Run initial setup for app: ${ process.env.APP_NAME }` );

const handlers = {
	exampleFunc: createHandler( exampleFunc ),
};

async function exampleFunc( data ) {
	const { command, args } = data;
	// Replace this with the desired logic.
	console.log( `Run heavy operation ${ command } with args: ${ args }` );
}

function createHandler( handler ) {
	return async ( message, messageId, data ) => {
		try {
			const response = await handler( data );
			process.parentPort.postMessage( {
				message,
				messageId,
				data: response,
			} );
		} catch ( error ) {
			process.parentPort.postMessage( {
				message,
				messageId,
				error: error?.message || 'Unknown Error',
			} );
		}
	};
}

process.parentPort.on( 'message', async ( { data: messagePayload } ) => {
	const { message, messageId, data } = messagePayload;
	const handler = handlers[ message ];
	if ( ! handler ) {
		process.parentPort.postMessage( {
			message,
			messageId,
			error: Error( `No handler defined for message '${ message }'` ),
		} );
		return;
	}
	await handler( message, messageId, data );
} );

async function runExample() {
	const process = new Process();
	await process.init();
	await process.exampleFunc( 'my-command', [ 'example', 100 ] );
}

…
app.whenReady().then( () => {
	runExample();
} );
…

import { type Configuration } from 'webpack';

export const mainConfig: Configuration = {
	// This is the main entry point for your application, it's the first file
	// that runs in the main process.
	entry: './src/index.ts',

...

import path from 'path';
import { type Configuration, DefinePlugin } from 'webpack';

// Extra entries are bundled separately from the main bundle. They are primarily used
// for worker threads and forked processes, which need to be loaded independently.
const extraEntries = [
	{
		name: 'siteServerProcess',
		path: './src/lib/site-server-process-child.ts',
		exportName: 'SITE_SERVER_PROCESS_MODULE_PATH',
	},
	// Here you can configure other dedicated processes
];

export default function mainConfig( _env: unknown, args: Record< string, unknown > ) {
	const isProduction = args.mode === 'production';

	// Generates the necessary plugins to expose the module path of extra entries.
	const definePlugins = extraEntries.map( ( entry ) => {
		// The path calculation is based on how the Forge's webpack plugin generates the path for Electron files.
		// Reference: https://github.com/electron/forge/blob/b298b2967bdc79bdc4e09681ea1ccc46a371635a/packages/plugin/webpack/src/WebpackConfig.ts#L113-L140
		const modulePath = isProduction
			? `require('path').resolve(__dirname, '..', 'main', '${ entry.name }.js')`
			: JSON.stringify( path.resolve( __dirname, `.webpack/main/${ entry.name }.js` ) );
		return new DefinePlugin( {
			[ entry.exportName ]: modulePath,
		} );
	} );

	return {
		...mainBaseConfig,
		plugins: [ ...( mainBaseConfig.plugins || [] ), ...definePlugins ],
	};
}

export const mainBaseConfig: Configuration = {
	entry: {
		// This is the main entry point for your application, it's the first file
		// that runs in the main process.
		index: './src/index.ts',
		// Inject extra entries into the Webpack configuration.
		// These entries are primarily used for worker threads and forked processes.
		...extraEntries.reduce( ( accum, entry ) => {
			return { ...accum, [ entry.name ]: entry.path };
		}, {} ),
	},

...