To render a component:
electron server.js --html "<x-app></x-app>" --scripts ./entry-pointWhere --html is the HTML that you want to render and --scripts is the entry point that will be loaded prior to rendering the HTML. The entry point should contain all your component definitions that you need for the HTML to be rendered.
| <!DOCTYPE html> | |
| <html> | |
| <body> | |
| <div id="fixture"></div> | |
| <script> | |
| const fixture = document.getElementById('fixture'); | |
| const { ipcRenderer } = require('electron'); | |
| ipcRenderer.on('render', (e, data) => { | |
| const { html, scripts } = data; | |
| scripts.forEach(require); | |
| fixture.innerHTML = html; | |
| ipcRenderer.send('render', fixture.innerHTML); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
| const { app, BrowserWindow, ipcMain } = require('electron'); | |
| const { html, scripts } = require('minimist')(process.argv); | |
| function ensureArray(arr) { | |
| return Array.isArray(arr) ? arr : [arr]; | |
| } | |
| app.on('ready', () => { | |
| const win = new BrowserWindow(); | |
| win.loadURL(`file://${__dirname}/server.html`); | |
| win.webContents.on('did-finish-load', () => { | |
| win.webContents.send('render', { html, scripts: ensureArray(scripts) }); | |
| }); | |
| ipcMain.on('render', function (e, html) { | |
| console.log(html); | |
| }); | |
| }); |
Is there no way to do this programatically like using phantomjs or an alternate? Coz spinning up a process would defeat the purpose of node's single event loop and would reduce performance overall.
@lastmjs Currently you'd have to spin it up in a child process. I didn't think about it much, just exploring. You could build a microservice around it.