❤
npm
Sign UpSign In

elekid

0.2.4-rc • Public • Published

Coverage Status Build Status Standard - JavaScript Style Guide

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?

  1. Read and transpile main component filepath, generating a node module
  2. Every require in this node module is replaced by smart require (which transpile the source in runtime before nodejs parse start)
  3. Parse'n deliver this module and repeat this it for every import/require missing.
  4. Create a dynamic HTML file based on render result
  5. 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:

If you're using, let me know :)

Readme

Keywords

Package Sidebar

Install

npm i elekid

Weekly Downloads

2

Version

0.2.4-rc

License

MIT

Last publish

Collaborators

  • raphamorim
Try on RunKit
Report malware