Electron Server Side Render
tl;dr: Promises to return all rendered components, regardless of whether it is ES2015 (es6), ES2016 or ES2017. Elekid works only with React (Soon: Inferno and Vuejs). Do you want add more support options? Send us a PR :)
elekid({ path: 'path/to/Component.js' })- Read and transpile main component filepath, generating a node module
- Every require in this node module is replaced by smart require (which transpile the source in runtime before nodejs parse start)
- Parse'n deliver this module and repeat this it for every import/require missing.
- Create a dynamic HTML file based on render result
- When nodejs dispatch
exit,SIGINToruncaughtExceptionevent: delete_.html
-
path: path to get root component (required)
-
template: Wrapper fn to render App. Default:
(app) => app -
resolve: By default elekid returns filepath, however you can get only the rendered app string using
appas paramater
const elekid = require('elekid')
const template = require('./template')
function createWindow() {
let mainWindow = new BrowserWindow(config)
mainWindow.loadURL(elekid({
path: 'src/App.js',
template: template
}))
mainWindow.on('closed', function() {
mainWindow = null
})
mainWindow.once('ready-to-show', () => {
mainWindow.show()
})
}module.exports = (app) => {
return `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>My Template</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root">${app}</div>
<script async src="bundle.js"></script>
</body>
</html>`I strongly recommend: NO.
Why? Elekid reads any code and parse/transpile it in runtime. It cost a lot, just imagine for every process, you will read/parse/transpile/tokenize/write.
import React from 'react'
class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>
}
}
export default Greetingconst elekid = require('elekid')
console.log(elekid({path: './greeting.js', resolve: 'string'}))<h1 data-reactroot="" data-reactid="1" data-react-checksum="1601575969"><!-- react-text: 2 -->Hello, <!-- /react-text --></h1>
const elekid = require('elekid')
console.log(elekid({path: './greeting.js', resolve: 'react'}))
/*
{ '$$typeof': Symbol(react.element),
type: [Function: Dialog],
key: null,
ref: null,
props: {},
_owner: null,
_store: {} }
*/- Vuejs Support
- Inferno Support
- Add option to set filename and filepath
- Add option to return only rendered string
If you're using, let me know :)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent