{"id":17659892,"url":"https://github.com/raphamorim/blonde","last_synced_at":"2026-01-19T06:32:43.714Z","repository":{"id":75481397,"uuid":"91049536","full_name":"raphamorim/blonde","owner":"raphamorim","description":"Paintfull setup no more","archived":false,"fork":false,"pushed_at":"2017-06-09T16:56:48.000Z","size":261,"stargazers_count":4,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-07T04:46:24.340Z","etag":null,"topics":["babel-preset","component","electron","electron-app","packer","react","react-component","reactjs","server","server-side-rendering","webpack"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/blonde","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-05-12T03:58:11.000Z","updated_at":"2023-08-29T14:14:44.000Z","dependencies_parsed_at":"2023-06-06T15:15:22.714Z","dependency_job_id":null,"html_url":"https://github.com/raphamorim/blonde","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/raphamorim/blonde","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Fblonde","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Fblonde/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Fblonde/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Fblonde/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/raphamorim","download_url":"https://codeload.github.com/raphamorim/blonde/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Fblonde/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28562405,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-19T03:31:16.861Z","status":"ssl_error","status_checked_at":"2026-01-19T03:31:15.069Z","response_time":67,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["babel-preset","component","electron","electron-app","packer","react","react-component","reactjs","server","server-side-rendering","webpack"],"created_at":"2024-10-23T16:08:36.791Z","updated_at":"2026-01-19T06:32:43.699Z","avatar_url":"https://github.com/raphamorim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Coverage Status](https://coveralls.io/repos/github/raphamorim/blonde/badge.svg?branch=master)](https://coveralls.io/github/raphamorim/blonde?branch=master) [![Build Status](https://travis-ci.org/raphamorim/blonde.svg)](https://travis-ci.org/raphamorim/blonde) [![Standard - JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](http://standardjs.com/)\n\n# Blonde\n\n\u003e painfull setup no more\n\n## Summary\n\n- [Why Blonde?](#why-blonde)\n- [Getting](#getting)\n- [Examples](#examples)\n  - [Pure React](#pure-react)\n  - [React with Flow and Apollo](#react-with-flow-and-apollo)\n- [Usage](#usage)\n  - [Bundling](#bundling-usage)\n  - [Server Sider Render](#ssr-usage)\n  - [Parsing to ReactElement](#parsing-to-reactelement)\n  - [Resolving as Node Module](#resolving-as-node-module)\n  - [Electron](#electron-usage)\n- [How it works?](#how-it-works)\n- [Who is using?](#whos-using)\n\n#### Why Blonde?\n\nYou've probably already lost hours configuring Webpack by adding / removing babel plugins for each feature you want to control in a simple project. Blonde promises to meet all the basic needs of a React application by simply installing.\n\nBlonde commits to deliver from the project bundle to the SSR layer. In addition to bringing SSR support for Electron. Everything is ready, with the promise of working from ES5 to the present.\n\nAlready behind ecosystem support for [flow](https://flow.org), object-rest-spread, class-properties ...\n\n#### Getting\n\n```bash\nnpm install -D blonde\n```\n\n# Examples\n\n#### [Pure React](https://github.com/raphamorim/blonde/blob/master/test/fixtures/react/README.md)\n#### [React with Flow and Apollo](https://github.com/raphamorim/blonde/blob/master/test/fixtures/react-flow-apollo/README.md)\n\n# Usage\n\n## toBundle\n\nNot available yet, working in progress.\n\n## toReactString\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##### apply it\n\n```js\nconst blonde = require('blonde')\nblonde.toReactString('./greeting.js')\n```\n\n##### output\n\n```html\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## toReactElement\n\n```js\nconst blonde = require('blonde')\nblonde.toReactElement('./greeting.js')\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## parse\n\n```js\nconst blonde = require('blonde')\nblonde.parse('./greeting.js')\n/*\nfunction Dialog(props) {\n  (0, _helpers.log)('sample');\n\n  return _react2.default.createElement(\n    'section',\n    { role: 'dialog', className: 'modal' },\n    _react2.default.createElement('input', { type: 'text', className: 'modal-search', id: 'modal-search', placeholder: 'Search for packages....' }),\n    _react2.default.createElement('div', { className: 'modal-items' }),\n    _react2.default.createElement(_Tab2.default, null)\n  );\n}\n*/\n```\n\n## toElectron\n\n#### main.js\n\n```js\nconst blonde = require('blonde')\nconst template = require('./template')\n\nfunction createWindow() {\n  let mainWindow = new BrowserWindow(config)\n  let url = blonde.toElectron('src/App.js', template)\n\n  mainWindow.loadURL(url)\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? Blonde 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## 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\nIf you're using, [let me know](https://github.com/raphamorim/blonde/issues/new) :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraphamorim%2Fblonde","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraphamorim%2Fblonde","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraphamorim%2Fblonde/lists"}