Merge pull request #7 from gigantz/ojr/prepare-package

Packaging and renaming

Author: gigantz

.babelrc

@@ -1,4 +1,13 @@
 {
-  "presets": ["@babel/preset-env"],
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "esmodules": true
+        }
+      }
+    ]
+  ],
   "plugins": ["@babel/plugin-transform-react-jsx"]
-}
+}

.eslintrc

@@ -12,5 +12,6 @@
     "jsx-a11y/alt-text": 0,
     "import/prefer-default-export": 0,
     "import/no-extraneous-dependencies": 0
-  }
+  },
+  "ignorePatterns": "/lib"
 }

.gitignore

@@ -1,2 +1,4 @@
 node_modules
-.vscode
+.vscode
+.npmrc
+dist

README.md

@@ -1,100 +1,117 @@
-# ReactXpress
+# Reactend / Express
 
-**React renderer to build Node.js server**
+React-like http-server on Nodejs
 <br />
 
-![Planet Express](public/logo.svg)
+![Planet Express](./logo.svg)
+<br/>
 
-### Why?
+## Why?
 
 It's the only crazy idea to use React to structure Backend on Node.js.
-<br />
+<br /><br />
 
-### How it works?
+## How it works?
 
 It works with express.js framework to run Node.js server. Custom renderer we have is building express structure app from React Components.
-<br />
+<br /><br />
+
+## Install
+
+### Install the package
+
+`npm i --save @reactend/express`</br>
+or</br>
+`yarn add @reactend/express`</br>
+<br/>
 
-### Code Example
+### Install peer dependecies
+
+`npm i --save react react-dom react-helmet styled-components`</br>
+or</br>
+`yarn add react react-dom react-helmet styled-components`</br>
+
+</br>
+
+## Code Example
 
 ```js
 import React from 'react';
 import { resolve } from 'path';
-import { ReactXpress, App, Static, Router, Get, Post, Res } from '../lib';
 
-const HomePage = () => <h1>Home page</h1>;
-const AboutPage = () => <h1>About Page</h1>;
+import { registerApp, App, Static, Router, Get, Post, Res, Logger } from '@reactend/express';
 
 const ExpressApp = () => (
   <App port={process.env.PORT || 8080}>
     <Static publicPath="/public" />
+    <Logger mode="dev" />
     <Router path="/">
-      <Get render={HomePage} />
-      <Get path="/about" render={AboutPage} />
+      <Get>
+        <Res.Header name="Cache-Control" value="public, max-age=31557600" />
+        <Res.Render component={HomePage} />
+      </Get>
+      <Get path="/components" render={ComponentsPage} />
       <Router path="/api">
         <Post
           path="/status"
           json={{ msg: 'It is okay, bro' }}
           handler={(req) => console.log(req.originalUrl)}
         />
       </Router>
-      <Updates />
       <Get path="*" text="Not Found" status={404} />
     </Router>
   </App>
 );
+```
 
-// Updates! 🤩
-const Updates = () => (
-  <>
-    <Get path="/redirect">
-      <Res.Redirect statusCode={301} path="https://ru.reactjs.org" />
-    </Get>
-    <Post path="/json">
-      <Res.Status statusCode={401} />
-      <Res.Content json={{ msg: 'No Access' }} contentType="application/json" />
-    </Post>
-    <Get path="/send-file">
-      <Res.SendFile path={resolve('public/code-example.png')} onError={console.log} />
-    </Get>
-    <Get path="/render">
-      <Res.Render component={() => <h1>Shut Up And Take My Money!</h1>} />
-    </Get>
-  </>
-);
+<br />
+
+## You can use this way too
 
-ReactXpress.render(<ExpressApp />);
+```js
+import cors from 'cors';
+<Middleware handler={cors()} />;
 ```
 
-### How to use
-
-1. Clone the repo
-2. `npm install`
-3. Run dev mode - `npm run dev`
-4. Do all changes in `./src` folder as it's not library yet.
-
-### Components
-
-`<App />` - App Instance (props: port)
-`<Static />` - Static route (props: publicPath, path, options)
-`<Router />` - Router-Provider (props: path)
-`<Get />, <Post /> and ...` - Route component (props: path, content, handler, status)
-`<Res />` - Response components
-`<Res.Render />` - Render (props: component)
-`<Res.Content />` - Response send (props: json, text, contentType)
-`<Res.Status />` - Response Status (props: statusCode)
-`<Res.SendFile />` - Response Send File (props: path, options, onError)
-`<Res.Redirect />` - Redirect (props: path, statusCode)
+```js
+<Get path="/redirect">
+  <Res.Redirect statusCode={301} path="https://ru.reactjs.org" />
+</Get>
+
+<Post path="/json">
+  <Res.Status statusCode={401} />
+  <Res.Content json={{ msg: 'No Access' }} contentType="application/json" />
+</Post>
+
+<Get path="/send-file">
+  <Res.SendFile path={resolve('public/code-example.png')} onError={console.log} />
+</Get>
+
+<Get path="/render">
+  <Res.Render component={() => <h1>Shut Up And Take My Money!</h1>} />
+</Get>
+```
+
+<br/>
+
+## Components
+
+_This minor description for now (Docs is on the way)_<br/><br/>
+`<App />` - App Instance (props: port) <br />
+`<Static />` - Static route (props: publicPath, path, options) <br />
+`<Router />` - Router-Provider (props: path) <br />
+`<Get />, <Post /> and ...` - Route component (props: path, content, <br />handler, status) <br />
+`<Middleware />` - Middleware (props: handler) <br />
+`<Logger />` - morgan logger (props: mode, disabled) <br />
+`<Res />` - Response components <br />
+`<Res.Render />` - Render (props: component) <br />
+`<Res.Content />` - Response send (props: json, text, contentType) <br />
+`<Res.Status />` - Response Status (props: statusCode) <br />
+`<Res.SendFile />` - Response Send File (props: path, options, <br />onError) <br />
+`<Res.Redirect />` - Redirect (props: path, statusCode) <br />
 <br />
 <br />
 
-### What is planning?
-
-I work on it and I'm trying to improve it, even it's not a good idea to use this kinda renderer for real-world app. But It would be awesome to have contributors to make its DX much better.
-
-### Contact me
+## Contact me
 
 Email me if you have any idea and you would like to be contributor [orkhanjafarovr@gmail.com](mailto:orkhanjafarovr@gmail.com)
-
-Resources: <br/>
-https://dev.to/orkhanjafarovr/express-in-react-react-backend-whut-4lkg