Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/raphamorim/blonde
Paintfull setup no more
https://github.com/raphamorim/blonde
babel-preset component electron electron-app packer react react-component reactjs server server-side-rendering webpack
Last synced: 19 days ago
JSON representation
Paintfull setup no more
- Host: GitHub
- URL: https://github.com/raphamorim/blonde
- Owner: raphamorim
- Created: 2017-05-12T03:58:11.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-06-09T16:56:48.000Z (over 7 years ago)
- Last Synced: 2024-11-02T09:10:11.191Z (2 months ago)
- Topics: babel-preset, component, electron, electron-app, packer, react, react-component, reactjs, server, server-side-rendering, webpack
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/blonde
- Size: 255 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
[](https://coveralls.io/github/raphamorim/blonde?branch=master) [](https://travis-ci.org/raphamorim/blonde) [](http://standardjs.com/)
# Blonde
> painfull setup no more
## Summary
- [Why Blonde?](#why-blonde)
- [Getting](#getting)
- [Examples](#examples)
- [Pure React](#pure-react)
- [React with Flow and Apollo](#react-with-flow-and-apollo)
- [Usage](#usage)
- [Bundling](#bundling-usage)
- [Server Sider Render](#ssr-usage)
- [Parsing to ReactElement](#parsing-to-reactelement)
- [Resolving as Node Module](#resolving-as-node-module)
- [Electron](#electron-usage)
- [How it works?](#how-it-works)
- [Who is using?](#whos-using)
#### 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](https://flow.org), object-rest-spread, class-properties ...
#### Getting
```bash
npm install -D blonde
```
# Examples
#### [Pure React](https://github.com/raphamorim/blonde/blob/master/test/fixtures/react/README.md)
#### [React with Flow and Apollo](https://github.com/raphamorim/blonde/blob/master/test/fixtures/react-flow-apollo/README.md)
# Usage
## toBundle
Not available yet, working in progress.
## toReactString
##### greeting.js
```js
import React from 'react'
class Greeting extends React.Component {
render() {
return
Hello, {this.props.name}
}
}
export default Greeting
```
##### apply it
```js
const blonde = require('blonde')
blonde.toReactString('./greeting.js')
```
##### output
```html
Hello,
```
## toReactElement
```js
const blonde = require('blonde')
blonde.toReactElement('./greeting.js')
/*
{ '$$typeof': Symbol(react.element),
type: [Function: Dialog],
key: null,
ref: null,
props: {},
_owner: null,
_store: {} }
*/
```
## parse
```js
const blonde = require('blonde')
blonde.parse('./greeting.js')
/*
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
```js
const blonde = require('blonde')
const template = require('./template')
function createWindow() {
let mainWindow = new BrowserWindow(config)
let url = blonde.toElectron('src/App.js', template)
mainWindow.loadURL(url)
mainWindow.on('closed', function() {
mainWindow = null
})
mainWindow.once('ready-to-show', () => {
mainWindow.show()
})
}
```
#### template.js
```js
module.exports = (app) => {
return `
My Template
${app}
`
```
#### 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?
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`
If you're using, [let me know](https://github.com/raphamorim/blonde/issues/new) :)