Renderer, Components moved to lib and propTypes added

lib/components/App.js

@@ -0,0 +1,9 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const App = ({ children, port }) => <app port={port}>{children}</app>;
+
+App.propTypes = {
+  port: PropTypes.number,
+  children: PropTypes.node,
+};

lib/components/Router.js

@@ -0,0 +1,27 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const Router = ({
+  path,
+  caseSensitive,
+  mergeParams,
+  strict,
+  children,
+}) => (
+  <router
+    path={path}
+    caseSensitive={!!caseSensitive}
+    mergeParams={!!mergeParams}
+    strict={!!strict}
+  >
+    {children}
+  </router>
+);
+
+Router.propTypes = {
+  path: PropTypes.string.isRequired,
+  caseSensitive: PropTypes.bool,
+  mergeParams: PropTypes.bool,
+  strict: PropTypes.bool,
+  children: PropTypes.node,
+};

lib/components/Routes.js

@@ -0,0 +1,46 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { METHODS } from "../renderer/helpers";
+
+const BaseRoute = (method) => {
+  const RouteComponent = ({ path, content, children }) => (
+    <route method={method} path={path} content={content}>
+      {children}
+    </route>
+  );
+
+  RouteComponent.propTypes = {
+    path: PropTypes.string,
+    content: PropTypes.any,
+    handler: PropTypes.func,
+  };
+
+  return RouteComponent;
+};
+
+export const Get = BaseRoute("get");
+export const Post = BaseRoute("post");
+export const Put = BaseRoute("put");
+export const Head = BaseRoute("head");
+export const Delete = BaseRoute("delete");
+export const Options = BaseRoute("options");
+export const Trace = BaseRoute("trace");
+export const Copy = BaseRoute("copy");
+export const Lock = BaseRoute("lock");
+export const Mkcol = BaseRoute("mkcol");
+export const Move = BaseRoute("move");
+export const Purge = BaseRoute("purge");
+export const Propfind = BaseRoute("propfind");
+export const Proppatch = BaseRoute("proppatch");
+export const Unlock = BaseRoute("unlock");
+export const Report = BaseRoute("report");
+export const Mkactivity = BaseRoute("mkactivity");
+export const Checkout = BaseRoute("checkout");
+export const Merge = BaseRoute("merge");
+export const Msearch = BaseRoute("m-search");
+export const Notify = BaseRoute("notify");
+export const Subscribe = BaseRoute("subscribe");
+export const Unsubscribe = BaseRoute("unsubscribe");
+export const Patch = BaseRoute("patch");
+export const Search = BaseRoute("search");
+export const Connect = BaseRoute("connect");

lib/components/Static.js

@@ -0,0 +1,12 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const Static = ({ publicPath, path, options }) => (
+  <static publicPath={publicPath} path={path} options={options} />
+);
+
+Static.propTypes = {
+  publicPath: PropTypes.string.isRequired,
+  path: PropTypes.string,
+  options: PropTypes.object,
+};

lib/components/index.js

@@ -0,0 +1,4 @@
+export * from "./App";
+export * from "./Static";
+export * from "./Router";
+export * from "./Routes";

lib/context.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const ReqResContext = createContext({ req: null, res: null });

lib/index.js

@@ -0,0 +1,3 @@
+export * from "./renderer";
+export * from "./components";
+export * from "./context";

src/renderer/generateRoute.js → lib/renderer/generateRoute.js

@@ -2,16 +2,16 @@ import React from "react";
 import { renderToString } from "react-dom/server";
 import { ServerStyleSheet } from "styled-components";
 import { Helmet } from "react-helmet";
-import { context } from "../context";
+import { ReqResContext } from "../context";
 
 const sheet = new ServerStyleSheet();
 
 function renderPage(Component, req, res) {
   const app = renderToString(
     sheet.collectStyles(
-      <context.Provider value={{ req, res }}>
+      <ReqResContext.Provider value={{ req, res }}>
         <Component />
-      </context.Provider>
+      </ReqResContext.Provider>
     )
   );
   const styleTags = sheet.getStyleTags();
@@ -37,8 +37,8 @@ function renderPage(Component, req, res) {
   res.send(html);
 }
 
-export function generateRoute(parentInstance, method, props) {
-  parentInstance.routerInstance[method](
+export function generateRoute(parentInstance, props) {
+  parentInstance.routerInstance[props.method](
     props.path || "/",
     ...[
       ...(props.middlewares || []),

src/renderer/helpers.js → lib/renderer/helpers.js

@@ -34,13 +34,15 @@ export const colors = {
 export function log(type, msg) {
   switch (type) {
     case "success":
-      console.log(`${colors.fg.green}${colors.bright}${msg}${colors.reset}`);
+      console.log(
+        `${colors.fg.green}${colors.bright}[ReactXpress] ${msg}${colors.reset}`
+      );
       break;
     case "warn":
-      console.log(`${colors.fg.yellow}${msg}${colors.reset}`);
+      console.log(`${colors.fg.yellow}[ReactXpress] ${msg}${colors.reset}`);
       break;
     default:
-      console.log(msg);
+      console.log(`[ReactXpress] ${msg}`);
       break;
   }
 }

src/renderer/index.js → lib/renderer/index.js

@@ -42,9 +42,9 @@ let reconciler = ReactReconciler({
       return { routerInstance: router, path: props.path };
     }
 
-    if (METHODS.includes(type)) {
+    if (type === "route") {
       return {
-        method: type,
+        type,
         props,
       };
     }
@@ -73,8 +73,8 @@ let reconciler = ReactReconciler({
       return;
     }
 
-    if (child.method) {
-      generateRoute(parentInstance, child.method, child.props);
+    if (child.type === "route") {
+      generateRoute(parentInstance, child.props);
       return;
     }
 
@@ -158,12 +158,10 @@ let reconciler = ReactReconciler({
   clearContainer(container, child) {},
 });
 
-let ReactExpress = {
+export const ReactXpress = {
   render(app) {
     log("success", `starting...`);
     let container = reconciler.createContainer(null, false, false);
     reconciler.updateContainer(app, container, null, null);
   },
 };
-
-export default ReactExpress;

package.json

@@ -14,6 +14,7 @@
   "license": "ISC",
   "dependencies": {
     "express": "^4.17.1",
+    "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",

src/app.js

@@ -1,22 +1,22 @@
 import React from "react";
 import { HomePage } from "./pages/HomePage";
 import { ComponentsPage } from "./pages/ComponentsPage";
-import ReactExpress from "./renderer";
+import { ReactXpress, App, Static, Router, Get, Post } from "../lib";
 
 const ExpressApp = () => (
-  <app port={process.env.PORT || 8080}>
-    <static publicPath="/public" />
-    <router path="/">
-      <get content={HomePage} />
-      <router path="/components">
-        <get content={ComponentsPage} />
-      </router>
-      <router path="/api">
-        <post path="/status" content={{ msg: "It is okay, bro" }} />
-      </router>
-      <get path="*" content="Not Found" status={404} />
-    </router>
-  </app>
+  <App port={process.env.PORT || 8080}>
+    <Static publicPath="/public" />
+    <Router path="/">
+      <Get content={HomePage} />
+      <Router path="/components">
+        <Get content={ComponentsPage} />
+      </Router>
+      <Router path="/api">
+        <Post path="/status" content={{ msg: "It is okay, bro" }} />
+      </Router>
+      <Get path="*" content="Not Found" status={404} />
+    </Router>
+  </App>
 );
 
-ReactExpress.render(<ExpressApp />);
+ReactXpress.render(<ExpressApp />);

src/components/layout/TopNav.js

@@ -1,9 +1,9 @@
 import React, { useContext } from "react";
 import styled from "styled-components";
-import { context } from "../../context";
+import { ReqResContext } from "../../../lib";
 
 export const TopNav = () => {
-  const { req } = useContext(context);
+  const { req } = useContext(ReqResContext);
   return (
     <TopWrapper currentPath={req.originalUrl}>
       <Logo href="/"> </Logo>