Optional use styled-components.

.eslintrc

@@ -26,7 +26,7 @@
     "key-spacing": ["error", {"beforeColon": false, "afterColon": true}],
     "keyword-spacing": ["error", {"before": true}],
     "linebreak-style": ["error", "unix"],
-    "max-len": [1, 100, 3],
+    "max-len": [1, 80, 3],
     "named": 0,
     "no-array-constructor": 2,
     "no-console": ["warn", {"allow": ["warn", "error", "info"]}],

.gitattributes

@@ -16,7 +16,6 @@ yarn.lock merge=ours
 
 # misc config
 .babelrc eol=lf
-.coveralls.yml eol=lf
 .editorconfig text eol=lf
 .eslintrc eol=lf
 .npmignore eol=lf
@@ -28,3 +27,10 @@ yarn.lock merge=ours
 *.md text eol=lf
 AUTHORS text
 LICENSE text
+
+# (binary is a macro for -text -diff)
+*.png binary
+*.jpg binary
+*.jpeg binary
+*.gif binary
+*.ico binary

.npmignore

@@ -5,6 +5,7 @@
 .gitignore
 .log
 .travis.yml
+assets
 coverage
 node_modules
 src

README.md

@@ -1,5 +1,9 @@
 <div align="center">
-  <img src="./logo.svg" width="180" height="180"/>
+  <img src="./assets/logo.svg" width="150" height="150"/>
+  <br/>
+  <br/>
+  <br/>
+  <img src="./assets/comics.png"/>
 </div>
 <br/>
 <br/>
@@ -12,15 +16,14 @@
 )](https://unpkg.com/react-on-lambda@0.0.7/dist/react-on-lambda.min.js)
 [![GitHub license](https://img.shields.io/github/license/sultan99/react-on-lambda.svg)](https://github.com/sultan99/react-on-lambda/blob/master/LICENSE)
 
-> A tiny JavaScript library which allows to use React without JSX.
+> A tiny library which makes easy to use [React](https://github.com/facebook/react) without JSX.
 
 <br/>
 
-
 JSX has simple, declarative and html-like syntax, nice extension to ECMAScript.
 Unfortunately, despite these cool features you deal with text.
 Most of time you find yourself doing js code inside html, and inside that html you make again another js code and so on.
-In order to reuse some jsx fragments of code you have to wrap them by functions. So then you come to the main question:
+In order to reuse some jsx fragments you have to wrap them by functions. Then you may come to the main question:
 
 #### Why not just use functions instead of jsx strings?
 
@@ -41,8 +44,9 @@ And get all benefits of functional programming:
 ## Examples
 You can find a whole application example [here](https://github.com/sultan99/rol-usage).
 
+Read more info about symbol `λ` in the section: [editor configuration](#editor-configuration).
 ```js
-import λ from 'react-on-lambda'
+import λ from 'react-on-lambda' // or import l from 'react-on-lambda'
 import {render} from 'react-dom'
 
 const postLink = λ.a({href: `/posts/123`})
@@ -70,24 +74,23 @@ render(
 <br/>
 
 ## Getting started
-The next version `styled-components` will be optional.
+The primary you will need to install the `react-on-lambda` with `react`":
 
 ```sh
-$ npm i react-on-lambda react styled-components -S
+$ npm i react-on-lambda react -S
 ```
 
-or install with yarn:
+optionally you can to install `styled-components` if you are going to use it:
 
 ```sh
-$ yarn add react-on-lambda react styled-components
+$ npm i styled-components -S
 ```
 <br/>
 
 ## API documentation
 Full documentation will be provided later, at this moment some snippets.
 
 **Styling**
-
 ```js
 import λ from 'react-on-lambda'
 
@@ -107,8 +110,18 @@ export default app
 ```
 <br/>
 
-**Helper function mapKey**
+**Function showIf**
+```js
+const app = props => λ.div(
+  λ.showIf(!props.isLoading,
+    λ.h1(`Welcome to React on λambda!`),
+    λ.span(`Please wait, page is loading...`)
+  )
+)
+```
+<br/>
 
+**Function mapKey**
 ```js
 const pages = [`Home page`, `Portfolio`, `About`]
 
@@ -128,7 +141,6 @@ const pages = [`Home page`, `Portfolio`, `About`]
 <br/>
 
 **Composition of pluck and mapKey**
-
 ```js
 const data = [
   {id: 123, name: `foo`},
@@ -157,16 +169,27 @@ userList(data)
 ```
 <br/>
 
-**showIf**
+## Editor configuration
+> Code highlighting in Atom
 
+<img src="./assets/snippet-atom.png" style="border-radius: 4px;"/>
+<br/>
+
+Personally I hate to use symbols `$` `_` it makes code look dirty and reminds me [Perl](https://regmedia.co.uk/2017/10/31/perl_code_example.png) or regular expression.
+I prefer to use Greek letter `λ` – short and meaningful.
+
+Of course you can use any identifier at your own choice:
 ```js
-const app = props => λ.div(
-  λ.showIf(!props.isLoading,
-    λ.h1(`Welcome to React on λambda!`),
-    λ.span(`Please wait, page is loading...`)
-  )
-)
+import l from 'react-on-lambda'
+// or 
+import {div, h1} from 'react-on-lambda'
+
 ```
+
+But if you liked `λ` you can setup hot key and CSS syntax highlighting following the instructions bellow:
+- [Github Atom](./assets/atom.md)
+- Microsoft VS Code (will be provided)
+
 <br/>
 <br/>
 

assets/atom.md

@@ -0,0 +1,35 @@
+
+# Atom configurations
+> A hackable [text editor](https://atom.io/) for the 21st Century
+
+<br/>
+
+## Hot key setup for `λ`
+1. Open init.coffe (File > Init Script...).
+2. Copy & paste the snippet:
+
+```
+atom.commands.add 'atom-text-editor',
+  'custom:lambda-insert': ->
+    atom.workspace.getActiveTextEditor()?.insertText('λ')
+```
+
+3. Open keymap.cson (File -> Keymap...) and append:
+
+```
+'alt-l': 'custom:lambda-insert'
+```
+
+Now you can press alt + l to type `λ`
+<br/>
+<br/>
+
+## CSS highlighting in template literal
+1. Open settings (File > Settings...)
+2. Click to `+Install`
+3. Find package `language-babel` and install it.
+4. In the settings of the package find `JavaScript Tagged Template Literal Grammar Extensions`
+5. Paste this regexp: `"(?:λ\.(?:[a-z|1-5])+|(?:λ\(\w+\)))":source.css.styled` to the input.
+
+<img src="./atom-settings.png" style="border-radius: 4px;"/>
+<br/>