updates & renamed to react-end

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
+lib

README.md

@@ -1,10 +1,14 @@
-# ReactXpress
+# React-end
 
-**React renderer to build Node.js server**
+React http-server based on Express.js
 <br />
 
 ![Planet Express](public/logo.svg)
 
+## Install
+
+`npm i --save @react-end/express`
+
 ### Why?
 
 It's the only crazy idea to use React to structure Backend on Node.js.
@@ -19,8 +23,7 @@ It works with express.js framework to run Node.js server. Custom renderer we hav
 
 ```js
 import React from 'react';
-import { resolve } from 'path';
-import { ReactXpress, App, Static, Router, Get, Post, Res } from '../lib';
+import { registerApp, App, Static, Router, Get, Post, Res } from '@react-end/express';
 
 const HomePage = () => <h1>Home page</h1>;
 const AboutPage = () => <h1>About Page</h1>;
@@ -44,7 +47,14 @@ const ExpressApp = () => (
   </App>
 );
 
-// Updates! 🤩
+registerApp(ExpressApp);
+```
+
+<br />
+
+## You can use this way too
+
+```js
 const Updates = () => (
   <>
     <Get path="/redirect">
@@ -62,17 +72,8 @@ const Updates = () => (
     </Get>
   </>
 );
-
-ReactXpress.render(<ExpressApp />);
 ```
 
-### 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)
@@ -88,13 +89,6 @@ ReactXpress.render(<ExpressApp />);
 <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
 
 Email me if you have any idea and you would like to be contributor [[email protected]](mailto:[email protected])
-
-Resources: <br/>
-https://dev.to/orkhanjafarovr/express-in-react-react-backend-whut-4lkg

src/app.js app/app.jssrc/app.js renamed to app/app.js

@@ -1,15 +1,23 @@
 import React from 'react';
 import { resolve } from 'path';
-import { ReactXpress, App, Static, Router, Get, Post, Res } from '../lib';
+import cors from 'cors';
 
+import { registerApp, App, Static, Router, Get, Post, Res, Logger, Middleware } from '../src';
 import { HomePage } from './pages/HomePage';
 import { ComponentsPage } from './pages/ComponentsPage';
 
+const isProd = process.env.NODE_ENV === 'production';
+
 const ExpressApp = () => (
   <App port={process.env.PORT || 8080}>
-    <Static publicPath="/public" />
+    <Static publicPath="/../../public" />
+    <Logger mode="dev" disabled={isProd} />
+    <Middleware handler={cors()} />
     <Router path="/">
-      <Get render={HomePage} />
+      <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
@@ -42,4 +50,4 @@ const Updates = () => (
   </>
 );
 
-ReactXpress.render(<ExpressApp />);
+registerApp(ExpressApp);

src/components/layout/BaseLayout.js app/components/layout/BaseLayout.jssrc/components/layout/BaseLayout.js renamed to app/components/layout/BaseLayout.js

@@ -1,6 +1,6 @@
 import React, { useContext, useMemo } from 'react';
 import styled from 'styled-components';
-import { ReqResContext } from '../../../lib';
+import { ReqResContext } from '../../../src';
 
 const PAGES = [
   { path: '/', label: 'Home', title: '@orkhanjafarovr' },

src/components/layout/GlobalStyle.js app/components/layout/GlobalStyle.jssrc/components/layout/GlobalStyle.js renamed to app/components/layout/GlobalStyle.js

@@ -0,0 +1,15 @@
+require('@babel/register')({
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          esmodules: true,
+        },
+      },
+    ],
+  ],
+  plugins: ['@babel/plugin-transform-react-jsx'],
+});
+
+require('./app.js');