elekid

v0.2.4-rc

Published

2 years ago

Electron Server Side Render

Downloads

0High
0Medium
0Low

raphamorim

react electron flow server render ssr vue inferno

Elekid

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' })

How it works?

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, SIGINT or uncaughtException event: delete _.html

Configs

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 app as paramater

Electron Usage

main.js

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()
  })
}

template.js

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>`

Can I use it for develop beyond Electron apps?

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.

Render it only

greeting.js

import React from 'react'

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>
  }
}

export default Greeting

getting it

const elekid = require('elekid')
console.log(elekid({path: './greeting.js', resolve: 'string'}))

output

<h1 data-reactroot="" data-reactid="1" data-react-checksum="1601575969"><!-- react-text: 2 -->Hello, <!-- /react-text --></h1>

Process and get reactElement

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: {} }
*/

Roadmap

[ ] Vuejs Support
[ ] Inferno Support
[ ] Add option to set filename and filepath
[ ] Add option to return only rendered string

Who's using:

Retro Editor

If you're using, let me know :)