All Projects → raphamorim → elekid

raphamorim / elekid

Licence: other
Resolver for React's Server Side Render on Module, ReactElement or Electron

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to elekid

Vue Objccn
🔥 Use Vue.js to develop a cross-platform full stack application / 用 Vue.js 开发的跨三端应用
Stars: ✭ 1,993 (+9390.48%)
Mutual labels:  vuejs2, electron-app, electron-builder, electron-vue
Dockeron
🤖🤖🤖 Electron + Vue.js for Docker
Stars: ✭ 757 (+3504.76%)
Mutual labels:  vuejs2, electron-app, electron-vue
My Bnb Memories
Remember your past travels from Airbnb, your data : your memories...
Stars: ✭ 52 (+147.62%)
Mutual labels:  vuejs2, electron-app
Vuejs Aspnetcore Ssr
🆙 VueJS 2.5 Server Side Rendering on ASP.NET Core 2 and more
Stars: ✭ 57 (+171.43%)
Mutual labels:  vuejs2, server-side-rendering
Vuejsssrsample
ASP.NET Core Vue.js server-side rendering sample:
Stars: ✭ 146 (+595.24%)
Mutual labels:  vuejs2, server-side-rendering
Quasar
Quasar Framework - Build high-performance VueJS user interfaces in record time
Stars: ✭ 20,090 (+95566.67%)
Mutual labels:  vuejs2, server-side-rendering
Lulumi Browser
Lulumi-browser is a lightweight browser coded with Vue.js 2 and Electron.
Stars: ✭ 367 (+1647.62%)
Mutual labels:  vuejs2, electron-vue
Lx Music Desktop
一个基于 electron 的音乐软件
Stars: ✭ 14,964 (+71157.14%)
Mutual labels:  vuejs2, electron-app
Fable Elmish Electron Material Ui Demo
Complete boilerplate for Electron apps using Fable and Elmish with hot module reloading, time-travel debugging, etc.
Stars: ✭ 101 (+380.95%)
Mutual labels:  electron-app, electron-builder
dooring-electron-lowcode
基于electron的lowcode编辑器桌面端
Stars: ✭ 146 (+595.24%)
Mutual labels:  electron-app, electron-react
xpanel
XAMPP control panel alternative
Stars: ✭ 28 (+33.33%)
Mutual labels:  electron-app, electron-vue
electron-admin-element-vue
Electron Vue3.x Element-UI Admin
Stars: ✭ 37 (+76.19%)
Mutual labels:  electron-app, electron-vue
Picgo
🚀A simple & beautiful tool for pictures uploading built by vue-cli-electron-builder
Stars: ✭ 15,358 (+73033.33%)
Mutual labels:  electron-app, electron-vue
Poi
Scalable KanColle browser and tool.
Stars: ✭ 1,537 (+7219.05%)
Mutual labels:  electron-app, electron-react
Qlens
QLens is an electron app which dynamically generates GraphQL Schemas and Mongo Schema visualization. QLens significantly cuts development time by automating the formation of their GraphQL schemas based on information fetched from their non-relational database.
Stars: ✭ 110 (+423.81%)
Mutual labels:  electron-app, electron-builder
Bookmark
[NOT MAINTAINED] Desktop app to manage bookmarked links using Atom Electron and Vue.js.
Stars: ✭ 97 (+361.9%)
Mutual labels:  vuejs2, electron-app
Cocomusic
a simple music player built by electron and vue
Stars: ✭ 937 (+4361.9%)
Mutual labels:  electron-app, electron-vue
Lepton
💻 Democratizing Snippet Management (macOS/Win/Linux)
Stars: ✭ 9,067 (+43076.19%)
Mutual labels:  electron-app, electron-builder
electron-react-parcel-boilerplate
Boilerplate code to create basic, production ready Electron app using React, Parcel application bundler.
Stars: ✭ 48 (+128.57%)
Mutual labels:  electron-app, electron-react
medict
medict a cross platform dictionary application,support mdict (*.mdx/*.mdd) dictionary format
Stars: ✭ 154 (+633.33%)
Mutual labels:  electron-app, electron-vue

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 :)

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].