Blonde
painfull setup no more
Summary
Why Blonde?
You'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.
Blonde 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.
Already behind ecosystem support for flow, object-rest-spread, class-properties ...
Getting
npm install -D blonde
Examples
Pure React
React with Flow and Apollo
Usage
toBundle
Not available yet, working in progress.
toReactString
greeting.js
Component { return <h1>Hello thispropsname</h1> }
apply it
const blonde = blonde
output
<!-- react-text: 2 -->Hello, <!-- /react-text -->
toReactElement
const blonde = blonde/*{ '$$typeof': Symbol(react.element), type: [Function: Dialog], key: null, ref: null, props: {}, _owner: null, _store: {} }*/
parse
const blonde = blonde/*function Dialog(props) { (0, _helpers.log)('sample'); return _react2.default.createElement( 'section', { role: 'dialog', className: 'modal' }, _react2.default.createElement('input', { type: 'text', className: 'modal-search', id: 'modal-search', placeholder: 'Search for packages....' }), _react2.default.createElement('div', { className: 'modal-items' }), _react2.default.createElement(_Tab2.default, null) );}*/
toElectron
main.js
const blonde = const template = { let mainWindow = config let url = blonde mainWindow mainWindow mainWindow}
template.js
module { return `<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>My Template</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="root"></div> <script async src="bundle.js"></script> </body> </html>`
Can I use it for develop beyond Electron apps?
I strongly recommend: NO.
Why? 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.
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
oruncaughtException
event: delete_.html
If you're using, let me know :)