CODEWITHSUNDEEP
node.jselectronglobal
Firlfire
Firlfire

Reputation: 443

split electron main process in multiple file : can't use same `global`

I need some explanation about main and renderer processes. I though that I understood, but I'm in doubt now (and I also need help to debug the main process...)

If I understood this : The main process is all js files that are required by the main js file and they can use app, BrowserWindow, [...] and some other. The renderer processes are all javascript that are included in an html file with the <script> tag ?

I splitted my main process in multiple files, is global common to all these files ? I define global.sharedThing = { ... } in my main.js but I have the error bellow when I try to override it in an other js file with global.sharedThing.label = 'other Str' :

enter image description here

My folder structre :

<root>
    └─ app
        ├─ [...]
        ├─ windows
        │    └─ tests
        │        ├─ index.js
        │        ├─ script.js
        │        └─ view.html
        └─ main.js

Where

./app/main.js

'use strict'

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

const test = require('./windows/tests');

console.log('test debug from main.js'); // don't appear anywhere

global.sharedThing = {
  label: 'Shared from main.js'
};

function Init() {
  test.Create();
}

app.on('ready', Init);

./app/windows/tests/index.js

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

let win = null;

// global.sharedThing.label = 'Shared updated from index.js'; // <== THROW ERROR IF UNCOMMENT

function Create() {
    if(win) return win;

    win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadFile(path.join(__dirname, '/view.html'));

  win.on('closed', () => {
    win = null;
  });
}

module.exports = {
    Create,
}

./app/windows/tests/script.js

const { ipcRenderer } = require('electron');

window.jQuery = window.$ = require('jquery');

const sharedThing = require('electron').remote.getGlobal('sharedThing');

$(document).ready(function() {
  $('#testBtn').on('click', onClick);
})

function onClick() {
  console.log('sharedThing', sharedThing); // works
}

./app/windows/tests/view.html

        <!-- hidden for brevity -->
    <script src="./script.js"></script>
  </head>
  <body>
    <button type="button" id="testBtn" value="Click me!">Yes!</button>
    <!-- hidden for brevity -->

Upvotes: 1

Views: 4116

Answers (1)

Klaycon
Klaycon

Reputation: 11080

Your main.js is executed line-by-line, so if you look at it, you have const test = require('./windows/tests'); appearing before the sharedThing global is set. This means all of the code in windows/tests/index.js is executed at that point, before global.sharedThing has been assigned a value, so when you try to access it it's still undefined.

To fix it, simply move your global.sharedThing = ... declaration before require statements for files that depend on it. Alternatively, move the code using global.sharedThing into the create function where you know it'll be valid.

Upvotes: 1

Related Questions