{"id":17659847,"url":"https://github.com/raphamorim/elekid","last_synced_at":"2025-05-07T15:04:11.215Z","repository":{"id":75481545,"uuid":"81033542","full_name":"raphamorim/elekid","owner":"raphamorim","description":"Resolver for React's Server Side Render on Module, ReactElement or Electron","archived":false,"fork":false,"pushed_at":"2017-05-12T01:08:27.000Z","size":116,"stargazers_count":18,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-07T15:03:53.317Z","etag":null,"topics":["electron","electron-app","electron-builder","electron-react","electron-vue","inferno-js","server","server-side-rendering","vuejs2"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/elekid","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/raphamorim.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-06T00:54:14.000Z","updated_at":"2024-04-01T00:04:55.000Z","dependencies_parsed_at":"2023-06-06T15:15:29.610Z","dependency_job_id":null,"html_url":"https://github.com/raphamorim/elekid","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Felekid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Felekid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Felekid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Felekid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/raphamorim","download_url":"https://codeload.github.com/raphamorim/elekid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252902615,"owners_count":21822261,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["electron","electron-app","electron-builder","electron-react","electron-vue","inferno-js","server","server-side-rendering","vuejs2"],"created_at":"2024-10-23T16:08:26.451Z","updated_at":"2025-05-07T15:04:11.192Z","avatar_url":"https://github.com/raphamorim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Coverage Status](https://coveralls.io/repos/github/raphamorim/elekid/badge.svg?branch=master)](https://coveralls.io/github/raphamorim/elekid?branch=master) [![Build Status](https://travis-ci.org/raphamorim/elekid.svg)](https://travis-ci.org/raphamorim/elekid) [![Standard - JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](http://standardjs.com/)\n\n# Elekid\n\n\u003e Electron Server Side Render\n\n**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 :)\n\n```js\nelekid({ path: 'path/to/Component.js' })\n```\n\n#### How it works?\n\n1. Read and transpile main component filepath, generating a node module\n2. Every require in this node module is replaced by smart require (which transpile the source in runtime before nodejs parse start)\n3. Parse'n deliver this module and repeat this it for every import/require missing.\n4. Create a dynamic HTML file based on render result\n5. When nodejs dispatch `exit`, `SIGINT` or `uncaughtException` event: delete `_.html`\n\n#### Configs\n\n- path: path to get root component (required)\n\n- template: Wrapper fn to render App. Default: `(app) =\u003e app`\n\n- resolve: By default elekid returns filepath, however you can get only the rendered app string using `app` as paramater\n\n## Electron Usage\n\n#### main.js\n\n```js\nconst elekid = require('elekid')\nconst template = require('./template')\n\nfunction createWindow() {\n  let mainWindow = new BrowserWindow(config)\n\n  mainWindow.loadURL(elekid({\n    path: 'src/App.js',\n    template: template\n  }))\n\n  mainWindow.on('closed', function() {\n    mainWindow = null\n  })\n\n  mainWindow.once('ready-to-show', () =\u003e {\n    mainWindow.show()\n  })\n}\n```\n\n#### template.js\n\n```js\nmodule.exports = (app) =\u003e {\n  return `\u003c!DOCTYPE html\u003e\n    \u003chtml\u003e\n    \u003chead\u003e\n      \u003cmeta charset=\"utf-8\"/\u003e\n      \u003ctitle\u003eMy Template\u003c/title\u003e\n      \u003clink rel=\"stylesheet\" href=\"style.css\"\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n      \u003cdiv id=\"root\"\u003e${app}\u003c/div\u003e\n      \u003cscript async src=\"bundle.js\"\u003e\u003c/script\u003e\n    \u003c/body\u003e\n  \u003c/html\u003e`\n```\n\n#### Can I use it for develop beyond Electron apps?\n\nI strongly recommend: **NO**.\n\nWhy? 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.\n\n## Render it only\n\n##### greeting.js\n\n```js\nimport React from 'react'\n\nclass Greeting extends React.Component {\n  render() {\n    return \u003ch1\u003eHello, {this.props.name}\u003c/h1\u003e\n  }\n}\n\nexport default Greeting\n```\n\n##### getting it\n\n```js\nconst elekid = require('elekid')\nconsole.log(elekid({path: './greeting.js', resolve: 'string'}))\n```\n\n##### output\n\n```\n\u003ch1 data-reactroot=\"\" data-reactid=\"1\" data-react-checksum=\"1601575969\"\u003e\u003c!-- react-text: 2 --\u003eHello, \u003c!-- /react-text --\u003e\u003c/h1\u003e\n```\n\n## Process and get reactElement\n\n```js\nconst elekid = require('elekid')\nconsole.log(elekid({path: './greeting.js', resolve: 'react'}))\n/*\n{ '$$typeof': Symbol(react.element),\n  type: [Function: Dialog],\n  key: null,\n  ref: null,\n  props: {},\n  _owner: null,\n  _store: {} }\n*/\n```\n\n\n## Roadmap\n\n- [ ] Vuejs Support\n- [ ] Inferno Support\n- [ ] Add option to set filename and filepath\n- [ ] Add option to return only rendered string\n\n#### Who's using:\n\n- [Retro Editor](https://github.com/raphamorim/retro)\n\nIf you're using, [let me know](https://github.com/raphamorim/elekid/issues/new) :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraphamorim%2Felekid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraphamorim%2Felekid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraphamorim%2Felekid/lists"}