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); | |
| }); | |
| }); |
@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.
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.
Nice! How is this expected to be used in a server-side app? It looks like if I had a Node.js app that I'd have to spin up a child process and execute this on the command line.