├── .babelrc
├── .eslintrc
├── .github
    └── workflows
    │   └── integration.yml
├── .gitignore
├── .npmignore
├── .prettierrc
├── README.md
├── logo.svg
├── package-lock.json
├── package.json
├── rollup.config.js
└── src
    ├── components
        ├── App.js
        ├── Error.js
        ├── Faker.js
        ├── Head.js
        ├── Logger.js
        ├── Middleware.js
        ├── Res.js
        ├── Router.js
        ├── Routes.js
        ├── Static.js
        ├── constants.js
        └── index.js
    ├── context.js
    ├── index.js
    ├── renderer
        ├── generateRoute.js
        ├── helpers.js
        ├── index.js
        ├── renderHTML.js
        └── renderPage.js
    └── utils
        ├── common.js
        ├── fakerUtil.js
        └── propsUtil.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     [
 4 |       "@babel/preset-env",
 5 |       {
 6 |         "targets": {
 7 |           "esmodules": true
 8 |         }
 9 |       }
10 |     ]
11 |   ],
12 |   "plugins": ["@babel/plugin-transform-react-jsx"]
13 | }


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": ["airbnb", "prettier"],
 3 |   "plugins": ["prettier"],
 4 |   "rules": {
 5 |     "prettier/prettier": ["error"],
 6 |     "react/prop-types": "warn",
 7 |     "react/jsx-filename-extension": 0,
 8 |     "react/jsx-one-expression-per-line": 0,
 9 |     "react/jsx-props-no-spreading": 0,
10 |     "react/require-default-props": 0,
11 |     "react/forbid-prop-types": 0,
12 |     "jsx-a11y/alt-text": 0,
13 |     "import/prefer-default-export": 0,
14 |     "import/no-extraneous-dependencies": 0,
15 |     "no-param-reassign": 0,
16 |     "no-restricted-syntax": 0,
17 |     "guard-for-in": 0,
18 |     "no-plusplus": 0
19 |   },
20 |   "ignorePatterns": "/dist"
21 | }
22 | 


--------------------------------------------------------------------------------
/.github/workflows/integration.yml:
--------------------------------------------------------------------------------
 1 | name: Run linter and build
 2 | 
 3 | on:
 4 |   pull_request:
 5 |     branches: [master]
 6 | 
 7 | jobs:
 8 |   lint_and_test:
 9 |     runs-on: ubuntu-latest
10 | 
11 |     steps:
12 |       - uses: actions/checkout@v2
13 |       - name: Install dependencies
14 |         run: npm ci
15 |       - name: Validate
16 |         run: npm run validate
17 |       - name: Build
18 |         run: npm run build
19 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .vscode
3 | .npmrc
4 | dist
5 | app


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | app


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "printWidth": 100,
3 |   "singleQuote": true
4 | }
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Reactend / Express
  2 | 
  3 | React-like http-server on Nodejs<br/>
  4 | 
  5 | ### 🕹 [Playground on repl.it](https://repl.it/@orkhanjafarov/reactend-playground?v=1)
  6 | 
  7 | ### 📄 [Reactend Template](https://github.com/gigantz/reactend-template)
  8 | 
  9 | <br />
 10 | 
 11 | ![Planet Express](./logo.svg)
 12 | <br/>
 13 | 
 14 | ## What's that?
 15 | 
 16 | - Node.js http-server based on React-Components
 17 | - Express.js inside
 18 | - Get, Post, Delete and etc. components to use router method
 19 | - `Get(render)` and `Res.Render` to render your regular React DOM Components
 20 | - useContext(ReqResContext) hook to access `req, res`
 21 | - Support `styled-components`
 22 | - Built-in logger (morgan)
 23 | - Middleware component in Router and its Routes
 24 | - `handler` prop in Route components to use as regular controller
 25 | 
 26 | _and many many features that should be documented..._
 27 | <br /><br />
 28 | 
 29 | ## Get started
 30 | 
 31 | Run this to create reactend project on your local machine
 32 | 
 33 | ```
 34 | npx create-reactend my-app
 35 | ```
 36 | 
 37 | <br />
 38 | 
 39 | You choose template (default: basic)
 40 | 
 41 | ```
 42 | npx create-reactend my-app --template faker
 43 | ```
 44 | 
 45 | <br />
 46 | 
 47 | ## Code Example
 48 | 
 49 | ```js
 50 | import React from 'react';
 51 | import { resolve } from 'path';
 52 | 
 53 | import { registerApp, App, Static, Router, Get, Post, Res, Logger } from '@reactend/express';
 54 | 
 55 | const ExpressApp = () => (
 56 |   <App port={process.env.PORT || 8080}>
 57 |     <Static publicPath={resolve(__dirname, '/public')} />
 58 |     <Logger mode="dev" />
 59 |     <Router path="/">
 60 |       <Get>
 61 |         <Res.Header name="Cache-Control" value="public, max-age=31557600" />
 62 |         <Res.Render component={HomePage} />
 63 |       </Get>
 64 |       <Get path="/components" render={ComponentsPage} />
 65 |       <Router path="/api">
 66 |         <Post
 67 |           path="/status"
 68 |           json={{ msg: 'It is okay, bro' }}
 69 |           handler={(req) => console.log(req.originalUrl)}
 70 |         />
 71 |       </Router>
 72 |       <Get path="*" text="Not Found" status={404} />
 73 |     </Router>
 74 |   </App>
 75 | );
 76 | 
 77 | registerApp(ExpressApp);
 78 | ```
 79 | 
 80 | <br />
 81 | 
 82 | ## You can use this way too
 83 | 
 84 | ```js
 85 | import cors from 'cors';
 86 | <Middleware handler={cors()} />;
 87 | ```
 88 | 
 89 | ```js
 90 | <Get path="/redirect">
 91 |   <Res.Redirect statusCode={301} path="https://ru.reactjs.org" />
 92 | </Get>
 93 | 
 94 | <Post path="/json">
 95 |   <Res.Status statusCode={401} />
 96 |   <Res.Content json={{ msg: 'No Access' }} contentType="application/json" />
 97 | </Post>
 98 | 
 99 | <Get path="/send-file">
100 |   <Res.SendFile path={resolve('public/code-example.png')} onError={console.log} />
101 | </Get>
102 | 
103 | <Get path="/render">
104 |   <Res.Render component={() => <h1>Shut Up And Take My Money!</h1>} />
105 | </Get>
106 | 
107 | <Get path="/faker">
108 |   <Res.Faker
109 |     length={10}
110 |     locale="az"
111 |     map={{
112 |       fullName: "name.findName",
113 |       avatar: "image.people",
114 |       registeredAt: "date.past",
115 |     }}
116 |   />
117 | </Get>
118 | ```
119 | 
120 | <br/>
121 | 
122 | ## Components
123 | 
124 | _This minor description for now (Docs is on the way)_<br/><br/>
125 | `<App />` - App Instance (props: port) <br />
126 | `<Static />` - Static route (props: publicPath, path, options) <br />
127 | `<Router />` - Router-Provider (props: path) <br />
128 | `<Get />, <Post /> and ...` - Route component (props: path, content, <br />handler, status) <br />
129 | `<Middleware />` - Middleware (props: handler) <br />
130 | `<Logger />` - morgan logger (props: mode, disabled) <br />
131 | `<Res />` - Response components <br />
132 | `<Res.Render />` - Render (props: component) <br />
133 | `<Res.Content />` - Response send (props: json, text, contentType) <br />
134 | `<Res.Status />` - Response Status (props: statusCode) <br />
135 | `<Res.SendFile />` - Response Send File (props: path, options, <br />onError) <br />
136 | `<Res.Redirect />` - Redirect (props: path, statusCode) <br />
137 | `<Res.Faker />` - Redirect (props: length, locale, map) <br />
138 | <br />
139 | <br />
140 | 
141 | ---
142 | 
143 | ## Contact me
144 | 
145 | Email me if you have any idea and you would like to be contributor [orkhanjafarovr@gmail.com](mailto:orkhanjafarovr@gmail.com)
146 | 
147 | Cheers ✨
148 | 


--------------------------------------------------------------------------------
/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="218" height="201" viewBox="0 0 218 201" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path d="M195.227 89.5001C198.799 95.6881 198.799 103.312 195.227 109.5L161.024 168.741C157.451 174.929 150.849 178.741 143.703 178.741L75.2973 178.741C68.152 178.741 61.5494 174.929 57.9768 168.741L23.7738 109.5C20.2011 103.312 20.2011 95.6881 23.7738 89.5001L57.9768 30.2588C61.5494 24.0708 68.152 20.2588 75.2973 20.2588L143.703 20.2588C150.849 20.2588 157.451 24.0708 161.024 30.2588L195.227 89.5001Z" fill="#83CD29"/>
 3 | <path d="M182.227 89.5001C185.799 95.6881 185.799 103.312 182.227 109.5L154.524 157.483C150.951 163.671 144.349 167.483 137.203 167.483L81.7973 167.483C74.6519 167.483 68.0494 163.671 64.4767 157.483L36.7738 109.5C33.2011 103.312 33.2011 95.6881 36.7738 89.5001L64.4768 41.5171C68.0494 35.3291 74.652 31.5171 81.7973 31.5171L137.203 31.5171C144.349 31.5171 150.951 35.3291 154.524 41.5171L182.227 89.5001Z" fill="black"/>
 4 | <path d="M165.284 99.8957C165.284 92.4741 156.046 85.4408 141.882 81.0792C145.151 66.5558 143.698 55.001 137.298 51.3016C135.822 50.4339 134.097 50.0228 132.213 50.0228V55.1152C133.257 55.1152 134.097 55.3207 134.801 55.7089C137.888 57.4901 139.227 64.2722 138.183 72.9954C137.933 75.1419 137.525 77.4027 137.025 79.709C132.576 78.6129 127.719 77.768 122.612 77.22C119.548 72.9954 116.37 69.159 113.17 65.8022C120.569 58.883 127.515 55.0923 132.236 55.0923V50C125.994 50 117.823 54.4758 109.561 62.2399C101.299 54.5214 93.128 50.0913 86.8862 50.0913V55.1837C91.5846 55.1837 98.5527 58.9515 105.952 65.825C102.774 69.1819 99.5968 72.9954 96.578 77.22C91.4484 77.768 86.5911 78.6129 82.1423 79.7319C81.6203 77.4483 81.2344 75.2333 80.9621 73.1096C79.8953 64.3864 81.2117 57.6042 84.2759 55.8002C84.9569 55.3892 85.8421 55.2065 86.8862 55.2065V50.1142C84.9796 50.1142 83.2545 50.5252 81.7565 51.393C75.3785 55.0923 73.9485 66.6243 77.2397 81.102C63.1217 85.4864 53.9292 92.497 53.9292 99.8957C53.9292 107.317 63.1671 114.351 77.3304 118.712C74.062 133.236 75.5146 144.79 81.9154 148.49C83.3907 149.357 85.1157 149.769 87.0223 149.769C93.2642 149.769 101.435 145.293 109.697 137.529C117.959 145.247 126.13 149.677 132.372 149.677C134.279 149.677 136.004 149.266 137.502 148.398C143.88 144.699 145.31 133.167 142.019 118.689C156.091 114.328 165.284 107.294 165.284 99.8957ZM135.731 84.6644C134.892 87.6101 133.848 90.6473 132.667 93.6844C131.737 91.8576 130.761 90.0307 129.694 88.2039C128.65 86.377 127.538 84.5959 126.425 82.8604C129.648 83.3399 132.758 83.9336 135.731 84.6644ZM125.336 108.984C123.566 112.067 121.75 114.99 119.866 117.707C116.484 118.004 113.057 118.164 109.606 118.164C106.179 118.164 102.752 118.004 99.3925 117.73C97.5086 115.013 95.6701 112.113 93.8997 109.053C92.1747 106.061 90.6086 103.024 89.1786 99.9642C90.5859 96.9042 92.1747 93.8443 93.877 90.8528C95.6474 87.77 97.4632 84.847 99.3471 82.1296C102.729 81.8328 106.156 81.6729 109.606 81.6729C113.034 81.6729 116.461 81.8328 119.82 82.1068C121.704 84.8242 123.543 87.7243 125.313 90.7843C127.038 93.7757 128.604 96.8129 130.034 99.8728C128.604 102.933 127.038 105.993 125.336 108.984ZM132.667 106.016C133.893 109.076 134.937 112.136 135.8 115.104C132.826 115.835 129.694 116.451 126.448 116.931C127.56 115.173 128.672 113.369 129.717 111.519C130.761 109.692 131.737 107.842 132.667 106.016ZM109.652 130.381C107.541 128.189 105.43 125.746 103.342 123.074C105.385 123.165 107.473 123.234 109.584 123.234C111.717 123.234 113.828 123.188 115.894 123.074C113.851 125.746 111.74 128.189 109.652 130.381ZM92.7648 116.931C89.5418 116.451 86.4322 115.858 83.4588 115.127C84.2986 112.181 85.3427 109.144 86.523 106.107C87.4536 107.934 88.4296 109.761 89.4964 111.587C90.5632 113.414 91.6526 115.195 92.7648 116.931ZM109.538 69.4102C111.649 71.6024 113.76 74.0458 115.848 76.7176C113.806 76.6263 111.717 76.5577 109.606 76.5577C107.473 76.5577 105.362 76.6034 103.297 76.7176C105.339 74.0458 107.45 71.6024 109.538 69.4102ZM92.7421 82.8604C91.63 84.6187 90.5178 86.4227 89.4737 88.2724C88.4296 90.0992 87.4536 91.9261 86.523 93.7529C85.2973 90.6929 84.2532 87.633 83.3907 84.6644C86.3641 83.9565 89.4964 83.3399 92.7421 82.8604ZM72.2008 111.45C64.1658 108.002 58.9681 103.481 58.9681 99.8957C58.9681 96.3105 64.1658 91.7662 72.2008 88.3409C74.1528 87.496 76.2864 86.7424 78.488 86.0345C79.7818 90.5103 81.4841 95.1687 83.595 99.9413C81.5068 104.691 79.8272 109.327 78.5561 113.78C76.3091 113.072 74.1755 112.295 72.2008 111.45ZM84.4121 144.082C81.3252 142.301 79.9861 135.519 81.0302 126.796C81.2798 124.649 81.6884 122.389 82.1877 120.082C86.6365 121.178 91.4938 122.023 96.6007 122.571C99.6649 126.796 102.843 130.632 106.043 133.989C98.6435 140.908 91.698 144.699 86.9769 144.699C85.9555 144.676 85.093 144.471 84.4121 144.082ZM138.251 126.682C139.318 135.405 138.001 142.187 134.937 143.991C134.256 144.402 133.371 144.585 132.327 144.585C127.628 144.585 120.66 140.817 113.261 133.943C116.438 130.587 119.616 126.773 122.635 122.549C127.765 122 132.622 121.156 137.071 120.037C137.593 122.343 138.001 124.558 138.251 126.682ZM146.989 111.45C145.037 112.295 142.904 113.049 140.702 113.757C139.408 109.281 137.706 104.623 135.595 99.85C137.683 95.1002 139.363 90.4646 140.634 86.0117C142.881 86.7196 145.015 87.496 147.012 88.3409C155.047 91.7891 160.245 96.3105 160.245 99.8957C160.222 103.481 155.024 108.025 146.989 111.45Z" fill="#83CD29"/>
 5 | <path d="M110.25 106.643C113.983 106.643 117.009 103.617 117.009 99.8842C117.009 96.1516 113.983 93.1257 110.25 93.1257C106.518 93.1257 103.492 96.1516 103.492 99.8842C103.492 103.617 106.518 106.643 110.25 106.643Z" fill="#83CD29"/>
 6 | <g filter="url(#filter0_f)">
 7 | <path d="M87 37C87 44.732 80.732 51 73 51C65.268 51 59 44.732 59 37C59 29.268 65.268 23 73 23C80.732 23 87 29.268 87 37Z" fill="#83CD29" fill-opacity="0.5"/>
 8 | </g>
 9 | <g filter="url(#filter1_f)">
10 | <path d="M157 37C157 44.732 150.732 51 143 51C135.268 51 129 44.732 129 37C129 29.268 135.268 23 143 23C150.732 23 157 29.268 157 37Z" fill="#83CD29" fill-opacity="0.5"/>
11 | </g>
12 | <g filter="url(#filter2_f)">
13 | <path d="M195 99C195 106.732 188.732 113 181 113C173.268 113 167 106.732 167 99C167 91.268 173.268 85 181 85C188.732 85 195 91.268 195 99Z" fill="#83CD29" fill-opacity="0.5"/>
14 | </g>
15 | <g filter="url(#filter3_f)">
16 | <path d="M51 99C51 106.732 44.732 113 37 113C29.268 113 23 106.732 23 99C23 91.268 29.268 85 37 85C44.732 85 51 91.268 51 99Z" fill="#83CD29" fill-opacity="0.5"/>
17 | </g>
18 | <g filter="url(#filter4_f)">
19 | <path d="M87 164C87 171.732 80.732 178 73 178C65.268 178 59 171.732 59 164C59 156.268 65.268 150 73 150C80.732 150 87 156.268 87 164Z" fill="#83CD29" fill-opacity="0.5"/>
20 | </g>
21 | <g filter="url(#filter5_f)">
22 | <path d="M159 159C159 166.732 152.732 173 145 173C137.268 173 131 166.732 131 159C131 151.268 137.268 145 145 145C152.732 145 159 151.268 159 159Z" fill="#83CD29" fill-opacity="0.5"/>
23 | </g>
24 | <defs>
25 | <filter id="filter0_f" x="36" y="0" width="74" height="74" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
26 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
27 | <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
28 | <feGaussianBlur stdDeviation="11.5" result="effect1_foregroundBlur"/>
29 | </filter>
30 | <filter id="filter1_f" x="106" y="0" width="74" height="74" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
31 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
32 | <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
33 | <feGaussianBlur stdDeviation="11.5" result="effect1_foregroundBlur"/>
34 | </filter>
35 | <filter id="filter2_f" x="144" y="62" width="74" height="74" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
36 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
37 | <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
38 | <feGaussianBlur stdDeviation="11.5" result="effect1_foregroundBlur"/>
39 | </filter>
40 | <filter id="filter3_f" x="0" y="62" width="74" height="74" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
41 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
42 | <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
43 | <feGaussianBlur stdDeviation="11.5" result="effect1_foregroundBlur"/>
44 | </filter>
45 | <filter id="filter4_f" x="36" y="127" width="74" height="74" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
46 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
47 | <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
48 | <feGaussianBlur stdDeviation="11.5" result="effect1_foregroundBlur"/>
49 | </filter>
50 | <filter id="filter5_f" x="108" y="122" width="74" height="74" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
51 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
52 | <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
53 | <feGaussianBlur stdDeviation="11.5" result="effect1_foregroundBlur"/>
54 | </filter>
55 | </defs>
56 | </svg>
57 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@reactend/express",
 3 |   "version": "1.0.17",
 4 |   "description": "React-like http-server on Nodejs",
 5 |   "main": "dist/index.js",
 6 |   "repository": {
 7 |     "url": "git@github.com:reactend/reactend-express.git"
 8 |   },
 9 |   "scripts": {
10 |     "dev": "nodemon ./app/index.js",
11 |     "build": "NODE_ENV=production rollup -c rollup.config.js",
12 |     "prepublishOnly": "npm run build",
13 |     "validate": "eslint '*.js' && prettier '*.js' --write"
14 |   },
15 |   "keywords": [
16 |     "reactend",
17 |     "express",
18 |     "react",
19 |     "http-server"
20 |   ],
21 |   "author": "Orkhan Jafarov",
22 |   "license": "ISC",
23 |   "husky": {
24 |     "hooks": {
25 |       "pre-commit": [
26 |         "lint-staged"
27 |       ]
28 |     }
29 |   },
30 |   "lint-staged": {
31 |     "*.js": [
32 |       "eslint",
33 |       "prettier --write"
34 |     ]
35 |   },
36 |   "dependencies": {
37 |     "compression": "^1.7.4",
38 |     "cookie-parser": "^1.4.5",
39 |     "express": "^4.17.1",
40 |     "faker": "^5.4.0",
41 |     "morgan": "^1.10.0",
42 |     "prop-types": "^15.7.2",
43 |     "react-reconciler": "^0.26.1"
44 |   },
45 |   "peerDependencies": {
46 |     "react": "^17.0.1",
47 |     "react-dom": "^17.0.1",
48 |     "react-helmet": "^6.1.0",
49 |     "styled-components": "^5.2.1"
50 |   },
51 |   "devDependencies": {
52 |     "@babel/core": "^7.12.13",
53 |     "@babel/plugin-transform-react-jsx": "^7.12.13",
54 |     "@babel/preset-env": "^7.12.13",
55 |     "@rollup/plugin-babel": "^5.2.3",
56 |     "@rollup/plugin-commonjs": "^17.1.0",
57 |     "eslint": "^7.19.0",
58 |     "eslint-config-airbnb": "^18.2.1",
59 |     "eslint-config-prettier": "^7.2.0",
60 |     "eslint-plugin-import": "^2.22.1",
61 |     "eslint-plugin-jsx-a11y": "^6.4.1",
62 |     "eslint-plugin-prettier": "^3.3.1",
63 |     "eslint-plugin-react": "^7.22.0",
64 |     "eslint-plugin-react-hooks": "^4.2.0",
65 |     "husky": "^4.3.8",
66 |     "lint-staged": "^10.5.4",
67 |     "nodemon": "^2.0.7",
68 |     "npm-run-all": "^4.1.5",
69 |     "prettier": "^2.2.1",
70 |     "rollup": "^2.38.5"
71 |   }
72 | }
73 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import babel from '@rollup/plugin-babel';
 2 | import commonjs from '@rollup/plugin-commonjs';
 3 | 
 4 | export default {
 5 |   input: 'src/index.js',
 6 |   output: {
 7 |     file: 'dist/index.js',
 8 |     format: 'cjs',
 9 |   },
10 |   external: ['react', 'react-dom', 'prop-types', 'styled-components'],
11 |   plugins: [
12 |     babel({
13 |       presets: [
14 |         [
15 |           '@babel/preset-env',
16 |           {
17 |             targets: {
18 |               esmodules: true,
19 |             },
20 |           },
21 |         ],
22 |       ],
23 |       plugins: ['@babel/plugin-transform-react-jsx'],
24 |     }),
25 |     commonjs(),
26 |   ],
27 | };
28 | 


--------------------------------------------------------------------------------
/src/components/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | export const App = ({ children, port }) => <app$ port={port}>{children}</app$>;
 5 | 
 6 | App.propTypes = {
 7 |   port: PropTypes.number,
 8 |   children: PropTypes.node,
 9 | };
10 | 


--------------------------------------------------------------------------------
/src/components/Error.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | const isDev = process.env.NODE_ENV !== 'production';
 5 | const color = '#83CD29';
 6 | const msgStyle = { backgroundColor: '#222', color, padding: 5, borderRadius: 4, fontSize: 15 };
 7 | 
 8 | export const Error = ({ title, msg, error }) => (
 9 |   <div
10 |     style={{
11 |       width: '100vw',
12 |       height: '100vh',
13 |       backgroundColor: 'black',
14 |       position: 'fixed',
15 |       top: 0,
16 |       left: 0,
17 |     }}
18 |   >
19 |     <div
20 |       style={{
21 |         display: 'flex',
22 |         flexDirection: 'column',
23 |         position: 'fixed',
24 |         top: '50vh',
25 |         left: '50vw',
26 |         transform: 'translate(-50%, -50%)',
27 |         width: 'fit-contents',
28 |         height: 'auto',
29 |         padding: 10,
30 |         border: `2px solid ${color}`,
31 |         borderRadius: 8,
32 |         fontFamily: 'sans-serif',
33 |         boxShadow: `0 2px 1px rgba(0,0,0,0.02), 
34 |       0 4px 2px rgba(255,0,0,0.02), 
35 |       0 8px 4px rgba(255,0,0,0.02), 
36 |       0 16px 8px rgba(255,0,0,0.02),
37 |       0 32px 16px rgba(255,0,0,0.02)`,
38 |       }}
39 |     >
40 |       <h2 style={{ color, margin: 0, marginBottom: 10 }}>{title || '🐛 Reactend Error'}</h2>
41 |       {isDev && (
42 |         <>
43 |           <code style={msgStyle}>{msg}</code>
44 |           <br />
45 |           <b style={{ color, marginBottom: 5 }}>message:</b>
46 |           {error.message && <code style={msgStyle}>{error.message}</code>}
47 |           <br />
48 |           <b style={{ color, marginBottom: 5 }}>stack:</b>
49 |           {error.stack && <code style={msgStyle}>{error.stack}</code>}
50 |         </>
51 |       )}
52 |     </div>
53 |   </div>
54 | );
55 | 
56 | Error.propTypes = {
57 |   title: PropTypes.string,
58 |   msg: PropTypes.string.isRequired,
59 |   error: PropTypes.any,
60 | };
61 | 


--------------------------------------------------------------------------------
/src/components/Faker.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | import { transformFakerMap } from '../utils/fakerUtil';
 5 | import { Middleware } from './Middleware';
 6 | import { passValues } from '../utils/propsUtil';
 7 | 
 8 | export const Faker = ({ map, length, locale }) => (
 9 |   <Middleware
10 |     handler={(req, res) => {
11 |       let json;
12 |       const params = passValues(req, { length, locale });
13 | 
14 |       if (length) {
15 |         json = Array.from({ length: +(params.length || 5) }, () =>
16 |           transformFakerMap(map, params.locale || 'en')
17 |         );
18 |       } else {
19 |         json = transformFakerMap(map, params.locale);
20 |       }
21 | 
22 |       res.send(json);
23 |     }}
24 |   />
25 | );
26 | 
27 | Faker.propTypes = {
28 |   map: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
29 |   length: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
30 |   locale: PropTypes.oneOfType([
31 |     PropTypes.string,
32 |     PropTypes.oneOf([
33 |       'az',
34 |       'cz',
35 |       'de',
36 |       'de_AT',
37 |       'de_CH',
38 |       'en',
39 |       'en_AU',
40 |       'en_AU_ocker',
41 |       'en_BORK',
42 |       'en_CA',
43 |       'en_GB',
44 |       'en_IE',
45 |       'en_IND',
46 |       'en_US',
47 |       'en_ZA',
48 |       'es',
49 |       'es_MX',
50 |       'fa',
51 |       'fi',
52 |       'fr',
53 |       'fr_CA',
54 |       'fr_CH',
55 |       'ge',
56 |       'hy',
57 |       'hr',
58 |       'id_ID',
59 |       'it',
60 |       'ja',
61 |       'ko',
62 |       'nb_NO',
63 |       'ne',
64 |       'nl',
65 |       'nl_BE',
66 |       'pl',
67 |       'pt_BR',
68 |       'pt_PT',
69 |       'ro',
70 |       'ru',
71 |       'sk',
72 |       'sv',
73 |       'tr',
74 |       'uk',
75 |       'vi',
76 |       'zh_CN',
77 |       'zh_TW',
78 |     ]),
79 |   ]),
80 | };
81 | 


--------------------------------------------------------------------------------
/src/components/Head.js:
--------------------------------------------------------------------------------
1 | import { Helmet } from 'react-helmet';
2 | 
3 | export const Head = Helmet;
4 | 


--------------------------------------------------------------------------------
/src/components/Logger.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | /**
 5 |  * @param {{
 6 |  *  mode: 'skip' | 'stream' | 'combined' | 'common' | 'dev' | 'short' | 'tiny'
 7 |  *  disabled: Boolean
 8 |  * }} props
 9 |  */
10 | export const Logger = ({ mode, disabled }) => <logger$ mode={mode} disabled={disabled} />;
11 | Logger.propTypes = {
12 |   mode: PropTypes.oneOf(['skip', 'stream', 'combined', 'common', 'dev', 'short', 'tiny'])
13 |     .isRequired,
14 |   disabled: PropTypes.bool,
15 | };
16 | 


--------------------------------------------------------------------------------
/src/components/Middleware.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | 
4 | export const Middleware = ({ handler }) => <middleware$ handler={handler} />;
5 | Middleware.propTypes = {
6 |   handler: PropTypes.func.isRequired,
7 | };
8 | 


--------------------------------------------------------------------------------
/src/components/Res.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { Faker } from './Faker';
 4 | 
 5 | /**
 6 |  * @param {{ name: 'Accept-Patch' | 'Accept-Ranges' | 'Age' | 'Allow' | 'Alt-Svc' | 'Cache-Control' | 'Connection' | 'Content-Disposition' | 'Content-Encoding' | 'Content-Language' | 'Content-Length' | 'Content-Location' | 'Content-Range' | 'Content-Type' | 'Date' | 'Delta-Base' | 'ETag' | 'Expires' | 'IM' | 'Last-Modified' | 'Link' | 'Location' | 'Pragma' | 'Proxy-Authenticate' | 'Public-Key-Pins' | 'Retry-After' | 'Server' | 'Set-Cookie' | 'Strict-Transport-Security' | 'Trailer' | 'Transfer-Encoding' | 'Tk' | 'Upgrade' | 'Vary' | 'Via' | 'Warning' | 'WWW-Authenticate' | 'Content-Security-Policy' | 'Refresh' | 'X-Powered-By' | 'X-Request-ID' | 'X-UA-Compatible' | 'X-XSS-Protection' }} props
 7 |  */
 8 | const Header = ({ name, value }) => <param$ type="header" content={{ name, value }} />;
 9 | 
10 | Header.propTypes = {
11 |   name: PropTypes.string.isRequired,
12 |   value: PropTypes.any,
13 | };
14 | 
15 | const Render = ({ component }) => <param$ type="render" content={component} />;
16 | 
17 | Render.propTypes = {
18 |   component: PropTypes.func,
19 | };
20 | 
21 | const Content = ({ json, contentType, text }) => {
22 |   const ComponentsArray = [];
23 | 
24 |   if (contentType)
25 |     ComponentsArray.push(<param$ key="contentType" type="content-type" content={contentType} />);
26 |   if (json) ComponentsArray.push(<param$ key="json" type="json" content={json} />);
27 |   if (text) ComponentsArray.push(<param$ key="text" type="text" content={text} />);
28 | 
29 |   return ComponentsArray;
30 | };
31 | 
32 | Content.propTypes = {
33 |   json: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
34 |   contentType: PropTypes.string,
35 |   text: PropTypes.string,
36 | };
37 | 
38 | const Status = ({ statusCode }) => <param$ type="status" content={statusCode} />;
39 | Status.propTypes = {
40 |   statusCode: PropTypes.number,
41 | };
42 | 
43 | const Redirect = ({ path, statusCode }) => (
44 |   <param$ type="redirect" content={{ path, statusCode }} />
45 | );
46 | 
47 | Redirect.propTypes = {
48 |   path: PropTypes.string.isRequired,
49 |   statusCode: PropTypes.number,
50 | };
51 | 
52 | const SendFile = ({ path, options, onError = () => {} }) => (
53 |   <param$ type="send-file" content={{ path, options, onError }} />
54 | );
55 | 
56 | SendFile.propTypes = {
57 |   path: PropTypes.string.isRequired,
58 |   options: PropTypes.object,
59 |   onError: PropTypes.func,
60 | };
61 | 
62 | export const Res = {
63 |   Header,
64 |   Render,
65 |   Content,
66 |   Status,
67 |   Redirect,
68 |   SendFile,
69 |   Faker,
70 | };
71 | 


--------------------------------------------------------------------------------
/src/components/Router.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | export const Router = ({ path, caseSensitive, mergeParams, strict, children }) => (
 5 |   <router$
 6 |     path={path}
 7 |     caseSensitive={!!caseSensitive}
 8 |     mergeParams={!!mergeParams}
 9 |     strict={!!strict}
10 |   >
11 |     {children}
12 |   </router$>
13 | );
14 | 
15 | Router.propTypes = {
16 |   path: PropTypes.string.isRequired,
17 |   caseSensitive: PropTypes.bool,
18 |   mergeParams: PropTypes.bool,
19 |   strict: PropTypes.bool,
20 |   children: PropTypes.node,
21 | };
22 | 


--------------------------------------------------------------------------------
/src/components/Routes.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { Res } from './Res';
 4 | 
 5 | const BaseRoute = (method) => {
 6 |   const RouteComponent = ({ children, path, handler, render, status, json, text }) => (
 7 |     <route$ method={method} path={path} handler={handler}>
 8 |       {children}
 9 |       {render && <Res.Render component={render} />}
10 |       {status && <Res.Status statusCode={status} />}
11 |       {text && <Res.Content text={text} />}
12 |       {json && <Res.Content json={json} />}
13 |     </route$>
14 |   );
15 | 
16 |   RouteComponent.propTypes = {
17 |     children: PropTypes.node,
18 |     path: PropTypes.string,
19 |     handler: PropTypes.func,
20 |     render: PropTypes.func,
21 |     status: PropTypes.number,
22 |     json: PropTypes.any,
23 |     text: PropTypes.string,
24 |   };
25 | 
26 |   return RouteComponent;
27 | };
28 | 
29 | export const Get = BaseRoute('get');
30 | export const Post = BaseRoute('post');
31 | export const Put = BaseRoute('put');
32 | export const HeadRoute = BaseRoute('head');
33 | export const Delete = BaseRoute('delete');
34 | export const Options = BaseRoute('options');
35 | export const Trace = BaseRoute('trace');
36 | export const Copy = BaseRoute('copy');
37 | export const Lock = BaseRoute('lock');
38 | export const Mkcol = BaseRoute('mkcol');
39 | export const Move = BaseRoute('move');
40 | export const Purge = BaseRoute('purge');
41 | export const Propfind = BaseRoute('propfind');
42 | export const Proppatch = BaseRoute('proppatch');
43 | export const Unlock = BaseRoute('unlock');
44 | export const Report = BaseRoute('report');
45 | export const Mkactivity = BaseRoute('mkactivity');
46 | export const Checkout = BaseRoute('checkout');
47 | export const Merge = BaseRoute('merge');
48 | export const Msearch = BaseRoute('m-search');
49 | export const Notify = BaseRoute('notify');
50 | export const Subscribe = BaseRoute('subscribe');
51 | export const Unsubscribe = BaseRoute('unsubscribe');
52 | export const Patch = BaseRoute('patch');
53 | export const Search = BaseRoute('search');
54 | export const Connect = BaseRoute('connect');
55 | 


--------------------------------------------------------------------------------
/src/components/Static.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | export const Static = ({ publicPath, path, options }) => (
 5 |   <static$ publicPath={publicPath} path={path} options={options} />
 6 | );
 7 | 
 8 | Static.propTypes = {
 9 |   publicPath: PropTypes.string.isRequired,
10 |   path: PropTypes.string,
11 |   options: PropTypes.object,
12 | };
13 | 


--------------------------------------------------------------------------------
/src/components/constants.js:
--------------------------------------------------------------------------------
 1 | export const CTYPES = {
 2 |   app: 'app$',
 3 |   router: 'router$',
 4 |   route: 'route$',
 5 |   middleware: 'middleware$',
 6 |   param: 'param$',
 7 |   logger: 'logger$',
 8 |   static: 'static$',
 9 | };
10 | 


--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
1 | export * from './App';
2 | export * from './Head';
3 | export * from './Static';
4 | export * from './Router';
5 | export * from './Routes';
6 | export * from './Res';
7 | export * from './Logger';
8 | export * from './Middleware';
9 | 


--------------------------------------------------------------------------------
/src/context.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 | 
3 | export const ReqResContext = createContext({ req: null, res: null });
4 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export * from './renderer';
2 | export * from './components';
3 | export * from './context';
4 | 


--------------------------------------------------------------------------------
/src/renderer/generateRoute.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-return-await */
 2 | import React from 'react';
 3 | import { replaceValues } from '../utils/propsUtil';
 4 | import { renderPage } from './renderPage';
 5 | import { log } from './helpers';
 6 | import { Error } from '../components/Error';
 7 | 
 8 | async function paramfn(sq, req, res, next, options) {
 9 |   // eslint-disable-next-line no-restricted-syntax
10 |   for (const param of sq) {
11 |     switch (param.type) {
12 |       case 'header':
13 |         res.setHeader(param.content.name, param.content.value);
14 |         break;
15 |       case 'json':
16 |         res.send(param.content);
17 |         break;
18 |       case 'text':
19 |         res.send(replaceValues(req, param.content));
20 |         break;
21 |       case 'status':
22 |         res.statusCode = param.content;
23 |         break;
24 |       case 'contentType':
25 |         res.setHeader('Content-Type', param.content);
26 |         break;
27 |       case 'redirect':
28 |         if (param.content.statusCode) res.redirect(param.content.statusCode, param.content.path);
29 |         else res.redirect(param.content.path);
30 |         // res.end();
31 |         break;
32 |       case 'render':
33 |         // eslint-disable-next-line no-await-in-loop
34 |         res.send(await renderPage(param.content, { req, res }, options));
35 |         break;
36 |       case 'send-file':
37 |         res.sendFile(param.content.path, param.content.options, (err) => {
38 |           if (err) {
39 |             param.content.onError(err);
40 |             next();
41 |           }
42 |         });
43 |         break;
44 |       default:
45 |     }
46 |   }
47 | }
48 | 
49 | export function generateRoute(router, props, options = {}) {
50 |   router[props.method](
51 |     props.path || '/',
52 |     ...[
53 |       ...(props.middlewares || []),
54 |       async (req, res, next) => {
55 |         if (props.handler)
56 |           try {
57 |             await props.handler(
58 |               req,
59 |               res,
60 |               next,
61 |               async (Component) => await renderPage(Component, { req, res }, options)
62 |             );
63 |           } catch (error) {
64 |             const msg = `Error in the handler passed to this route <${props.method[0].toUpperCase()}${props.method.slice(
65 |               1
66 |             )} path="${props.path || '/'}">`;
67 | 
68 |             log('error', msg);
69 | 
70 |             res.writableEnded = true;
71 |             res.statusCode = 500;
72 |             if (props.method === 'get') {
73 |               res.end(
74 |                 await renderPage(() => <Error msg={msg} error={error} />, { req, res }, options)
75 |               );
76 |             } else {
77 |               res.end(msg);
78 |             }
79 |           }
80 | 
81 |         if (props.paramsSeq && !res.writableEnded) {
82 |           await paramfn(props.paramsSeq, req, res, next, options);
83 |         }
84 |       },
85 |     ]
86 |   );
87 | }
88 | 


--------------------------------------------------------------------------------
/src/renderer/helpers.js:
--------------------------------------------------------------------------------
 1 | export const colors = {
 2 |   reset: '\x1b[0m',
 3 |   bright: '\x1b[1m',
 4 |   dim: '\x1b[2m',
 5 |   underscore: '\x1b[4m',
 6 |   blink: '\x1b[5m',
 7 |   reverse: '\x1b[7m',
 8 |   hidden: '\x1b[8m',
 9 | 
10 |   fg: {
11 |     black: '\x1b[30m',
12 |     red: '\x1b[31m',
13 |     green: '\x1b[32m',
14 |     yellow: '\x1b[33m',
15 |     blue: '\x1b[34m',
16 |     magenta: '\x1b[35m',
17 |     cyan: '\x1b[36m',
18 |     white: '\x1b[37m',
19 |     crimson: '\x1b[38m', // Scarlet
20 |   },
21 |   bg: {
22 |     black: '\x1b[40m',
23 |     red: '\x1b[41m',
24 |     green: '\x1b[42m',
25 |     yellow: '\x1b[43m',
26 |     blue: '\x1b[44m',
27 |     magenta: '\x1b[45m',
28 |     cyan: '\x1b[46m',
29 |     white: '\x1b[47m',
30 |     crimson: '\x1b[48m',
31 |   },
32 | };
33 | 
34 | const libName = '⚡️ reactend';
35 | 
36 | export function log(type, msg) {
37 |   switch (type) {
38 |     case 'success':
39 |       console.log(`${colors.fg.green}${colors.bright}[${libName}] ${msg}${colors.reset}`);
40 |       break;
41 |     case 'warn':
42 |       console.log(`${colors.fg.yellow}[${libName}] ${msg}${colors.reset}`);
43 |       break;
44 |     case 'error':
45 |       console.log(`${colors.fg.red}[${libName}] ${msg}${colors.reset}`);
46 |       break;
47 |     default:
48 |       console.log(`[${libName}] ${msg}`);
49 |       break;
50 |   }
51 | }
52 | 
53 | export const METHODS = [
54 |   'get',
55 |   'post',
56 |   'put',
57 |   'head',
58 |   'delete',
59 |   'options',
60 |   'trace',
61 |   'copy',
62 |   'lock',
63 |   'mkcol',
64 |   'move',
65 |   'purge',
66 |   'propfind',
67 |   'proppatch',
68 |   'unlock',
69 |   'report',
70 |   'mkactivity',
71 |   'checkout',
72 |   'merge',
73 |   'm-search',
74 |   'notify',
75 |   'subscribe',
76 |   'unsubscribe',
77 |   'patch',
78 |   'search',
79 |   'connect',
80 | ];
81 | 


--------------------------------------------------------------------------------
/src/renderer/index.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable no-param-reassign */
  2 | /* eslint-disable no-useless-return */
  3 | /* eslint-disable no-unused-vars */
  4 | import React from 'react';
  5 | import ReactReconciler from 'react-reconciler';
  6 | import express from 'express';
  7 | import cookieParser from 'cookie-parser';
  8 | import compression from 'compression';
  9 | import logger from 'morgan';
 10 | 
 11 | import { log } from './helpers';
 12 | import { generateRoute } from './generateRoute';
 13 | import { renderHTML } from './renderHTML';
 14 | import { CTYPES } from '../components/constants';
 15 | 
 16 | let options = {
 17 |   appHOC: (Component) => <Component />,
 18 |   renderHTML,
 19 | };
 20 | 
 21 | const reconciler = ReactReconciler({
 22 |   getRootHostContext(rootContainerInstance) {},
 23 |   getChildHostContext(parentHostContext, type, rootContainerInstance) {},
 24 |   getPublicInstance(instance) {},
 25 |   prepareForCommit(containerInfo) {},
 26 |   resetAfterCommit(containerInfo) {},
 27 |   createInstance(type, props, rootContainerInstance, hostContext, internalInstanceHandle) {
 28 |     if (type === CTYPES.app) {
 29 |       const app = express();
 30 |       app.use(compression());
 31 |       app.use(express.json());
 32 |       app.use(express.urlencoded({ extended: true }));
 33 |       app.use(cookieParser());
 34 |       app.listen(props.port || 8080, () =>
 35 |         log('success', `app is running on ${props.port || 8080}`)
 36 |       );
 37 |       return app;
 38 |     }
 39 | 
 40 |     if (type === CTYPES.router) {
 41 |       const router = express.Router({
 42 |         caseSensitive: !!props.caseSensitive,
 43 |         mergeParams: !!props.mergeParams,
 44 |         strict: !!props.strict,
 45 |       });
 46 | 
 47 |       return { routerInstance: router, path: props.path };
 48 |     }
 49 | 
 50 |     if (type === CTYPES.route) {
 51 |       const paramsSeq = [];
 52 |       const middlewares = [];
 53 | 
 54 |       return {
 55 |         type,
 56 |         props: { ...props, paramsSeq, middlewares },
 57 |       };
 58 |     }
 59 | 
 60 |     if (type === CTYPES.middleware) {
 61 |       return {
 62 |         type,
 63 |         props,
 64 |       };
 65 |     }
 66 | 
 67 |     if (type === CTYPES.param) {
 68 |       return {
 69 |         type,
 70 |         props,
 71 |       };
 72 |     }
 73 | 
 74 |     if (type === CTYPES.static) {
 75 |       return {
 76 |         path: props.path,
 77 |         static: express.static(props.publicPath, props.options),
 78 |       };
 79 |     }
 80 | 
 81 |     // eslint-disable-next-line react/destructuring-assignment
 82 |     if (type === CTYPES.logger) {
 83 |       return {
 84 |         type,
 85 |         props,
 86 |       };
 87 |     }
 88 | 
 89 |     return null;
 90 |   },
 91 | 
 92 |   appendInitialChild(parentInstance, child) {
 93 |     if (child.routerInstance) {
 94 |       if (parentInstance.routerInstance) {
 95 |         parentInstance.routerInstance.use(child.path || '/', child.routerInstance);
 96 |       } else {
 97 |         parentInstance.use(child.path || '/', child.routerInstance);
 98 |       }
 99 |       return;
100 |     }
101 | 
102 |     if (child.type === CTYPES.route) {
103 |       generateRoute(parentInstance.routerInstance, child.props, options);
104 |       return;
105 |     }
106 | 
107 |     if (child.type === CTYPES.middleware) {
108 |       if (parentInstance.routerInstance) parentInstance.routerInstance.use(child.props.handler);
109 |       if (parentInstance) {
110 |         parentInstance.props.middlewares.push(child.props.handler);
111 |       }
112 |       return;
113 |     }
114 | 
115 |     if (child.type === CTYPES.param) {
116 |       parentInstance.props.paramsSeq.push(child.props);
117 |     }
118 | 
119 |     if (child.static) {
120 |       parentInstance.use(...(child.path ? [child.path, child.static] : [child.static]));
121 |       return;
122 |     }
123 | 
124 |     if (child.type === CTYPES.logger) {
125 |       if (!child.props.disabled) {
126 |         parentInstance.use(logger(child.props.mode));
127 |       }
128 |       return;
129 |     }
130 |   },
131 | 
132 |   finalizeInitialChildren(instance, type, props, rootContainerInstance, hostContext) {},
133 |   prepareUpdate(instance, type, oldProps, newProps, rootContainerInstance, hostContext) {},
134 |   shouldSetTextContent(type, props) {},
135 |   shouldDeprioritizeSubtree(type, props) {},
136 |   createTextInstance(text, rootContainerInstance, hostContext, internalInstanceHandle) {
137 |     return text;
138 |   },
139 | 
140 |   now: null,
141 | 
142 |   isPrimaryRenderer: true,
143 |   scheduleDeferredCallback: '',
144 |   cancelDeferredCallback: '',
145 | 
146 |   supportsMutation: true,
147 | 
148 |   commitMount(instance, type, newProps, internalInstanceHandle) {},
149 |   commitUpdate(instance, updatePayload, type, oldProps, newProps, internalInstanceHandle) {},
150 |   resetTextContent(instance) {},
151 |   commitTextUpdate(textInstance, oldText, newText) {},
152 |   appendChild(parentInstance, child) {},
153 |   appendChildToContainer(container, child) {
154 |     if (child.type === CTYPES.app) {
155 |       container = child;
156 |     }
157 |   },
158 |   insertBefore(parentInstance, child, beforeChild) {},
159 |   insertInContainerBefore(container, child, beforeChild) {},
160 |   removeChild(parentInstance, child) {},
161 |   removeChildFromContainer(container, child) {},
162 |   clearContainer(container, child) {},
163 | });
164 | 
165 | export const registerApp = (App, custom = options) => {
166 |   options = {
167 |     ...options,
168 |     ...custom,
169 |   };
170 |   log('success', `starting...`);
171 |   const container = reconciler.createContainer(null, false, false);
172 |   reconciler.updateContainer(<App />, container, null, null);
173 | };
174 | 


--------------------------------------------------------------------------------
/src/renderer/renderHTML.js:
--------------------------------------------------------------------------------
 1 | export const renderHTML = ({ head, styles, root }) =>
 2 |   `<!DOCTYPE html>
 3 | <html>
 4 |   <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     ${head}
 8 |     ${styles}
 9 |   </head>
10 |   <body>
11 |     <div id="root">
12 |       ${root}
13 |     </div>
14 |   </body>
15 | </html>
16 | `;
17 | 


--------------------------------------------------------------------------------
/src/renderer/renderPage.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { renderToString } from 'react-dom/server';
 3 | import { ServerStyleSheet } from 'styled-components';
 4 | import { Head } from '../components';
 5 | import { Error } from '../components/Error';
 6 | 
 7 | import { ReqResContext } from '../context';
 8 | import { log } from './helpers';
 9 | 
10 | export async function renderPage(Component, ctx, options) {
11 |   try {
12 |     const { appHOC, renderHTML } = options;
13 |     const PrenderedComponent = await Component({ ctx });
14 | 
15 |     const sheet = new ServerStyleSheet();
16 |     const root = renderToString(
17 |       sheet.collectStyles(
18 |         <ReqResContext.Provider value={ctx}>
19 |           {appHOC(() => PrenderedComponent)}
20 |         </ReqResContext.Provider>
21 |       )
22 |     );
23 | 
24 |     const styles = sheet.getStyleTags();
25 |     const helmet = Head.renderStatic();
26 |     const head = [helmet.title, helmet.meta, helmet.link].map((h) => h.toString()).join('\n');
27 | 
28 |     return renderHTML({ head, styles, root });
29 |   } catch (error) {
30 |     const msg = `Error while rendering React DOM Component at "${ctx.req.originalUrl}" path`;
31 |     log('error', msg);
32 | 
33 |     ctx.res.end(await renderPage(() => <Error msg={msg} error={error} />, ctx, options));
34 |     return false;
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/src/utils/common.js:
--------------------------------------------------------------------------------
 1 | export function get(object, keys, defaultVal) {
 2 |   keys = Array.isArray(keys) ? keys : keys.split('.');
 3 |   object = object[keys[0]];
 4 |   if (object && keys.length > 1) {
 5 |     return get(object, keys.slice(1));
 6 |   }
 7 |   return object === undefined ? defaultVal : object;
 8 | }
 9 | 
10 | // eslint-disable-next-line consistent-return
11 | export function set(object, keys, val) {
12 |   keys = Array.isArray(keys) ? keys : keys.split('.');
13 |   if (keys.length > 1) {
14 |     object[keys[0]] = object[keys[0]] || {};
15 |     return set(object[keys[0]], keys.slice(1), val);
16 |   }
17 |   object[keys[0]] = val;
18 | }
19 | 


--------------------------------------------------------------------------------
/src/utils/fakerUtil.js:
--------------------------------------------------------------------------------
 1 | import faker from 'faker';
 2 | import { get } from './common';
 3 | 
 4 | function getFakerMethod(methodPath) {
 5 |   try {
 6 |     const method = get(faker, methodPath);
 7 |     if (typeof method === 'function') {
 8 |       return method();
 9 |     }
10 |     return methodPath;
11 |   } catch (error) {
12 |     return methodPath;
13 |   }
14 | }
15 | 
16 | /**
17 |  * @param {Object} objMap
18 |  * @param {'az' | 'cz' | 'de' | 'de_AT' | 'de_CH' | 'en' | 'en_AU' | 'en_AU_ocker' | 'en_BORK' | 'en_CA' | 'en_GB' | 'en_IE' | 'en_IND' | 'en_US' | 'en_ZA' | 'es' | 'es_MX' | 'fa' | 'fi' | 'fr' | 'fr_CA' | 'fr_CH' | 'ge' | 'hy' | 'hr' | 'id_ID' | 'it' | 'ja' | 'ko' | 'nb_NO' | 'ne' | 'nl' | 'nl_BE' | 'pl' | 'pt_BR' | 'pt_PT' | 'ro' | 'ru' | 'sk' | 'sv' | 'tr' | 'uk' | 'vi' | 'zh_CN' | 'zh_TW'} locale
19 |  */
20 | export function transformFakerMap(objMap, locale = 'en') {
21 |   const jsonOutput = JSON.parse(JSON.stringify(objMap));
22 |   faker.setLocale(locale);
23 | 
24 |   function assign(obj) {
25 |     if (Array.isArray(obj) && obj.every((n) => typeof n !== 'string'))
26 |       obj.forEach((o) => assign(o));
27 |     else if (Array.isArray(obj) && obj.every((n) => typeof n === 'string')) {
28 |       for (let i = 0; i < obj.length; i++) {
29 |         obj[i] = getFakerMethod(obj[i]);
30 |       }
31 |     } else {
32 |       for (const prop in obj) {
33 |         if (typeof obj[prop] === 'string' && Number.isNaN(+prop)) {
34 |           obj[prop] = getFakerMethod(obj[prop]);
35 |         } else if (typeof obj[prop] === 'string' && !Number.isNaN(+prop)) {
36 |           obj[+prop] = getFakerMethod(obj[+prop]);
37 |         } else if (Array.isArray(obj[prop]) && obj[prop].every((n) => typeof n !== 'string')) {
38 |           obj[prop].forEach((o) => assign(o));
39 |         } else if (prop in obj) {
40 |           assign(obj[prop]);
41 |         }
42 |       }
43 |     }
44 |   }
45 | 
46 |   assign(jsonOutput);
47 |   return jsonOutput;
48 | }
49 | 


--------------------------------------------------------------------------------
/src/utils/propsUtil.js:
--------------------------------------------------------------------------------
 1 | const PREFIXES = {
 2 |   param: '$param.',
 3 |   query: '$query.',
 4 |   body: '$body.',
 5 | };
 6 | 
 7 | export function getFromParams(variable, params) {
 8 |   if (typeof variable === 'string' && variable.indexOf(PREFIXES.param) === 0) {
 9 |     const [, parsedVariable] = variable.split(PREFIXES.param);
10 |     if (parsedVariable in params) return params[parsedVariable];
11 |   }
12 |   return null;
13 | }
14 | 
15 | export function getFromQuery(variable, query) {
16 |   if (typeof variable === 'string' && variable.indexOf(PREFIXES.query) === 0) {
17 |     const [, parsedVariable] = variable.split(PREFIXES.query);
18 |     if (parsedVariable in query) return query[parsedVariable];
19 |   }
20 | 
21 |   return null;
22 | }
23 | 
24 | export function getFromBody(variable, body) {
25 |   if (typeof variable === 'string' && variable.indexOf(PREFIXES.body) === 0) {
26 |     const [, parsedVariable] = variable.split(PREFIXES.body);
27 |     if (parsedVariable in body) return body[parsedVariable];
28 |   }
29 | 
30 |   return null;
31 | }
32 | 
33 | export function passValues(req, input) {
34 |   const obj = { ...input };
35 | 
36 |   for (const prop in obj) {
37 |     const paramResult = getFromParams(obj[prop], req.params);
38 |     const queryResult = getFromQuery(obj[prop], req.query);
39 | 
40 |     if (paramResult) obj[prop] = paramResult;
41 |     else if (queryResult) obj[prop] = queryResult;
42 |     else obj[prop] = undefined;
43 |   }
44 | 
45 |   return obj;
46 | }
47 | 
48 | export function replaceValues(req, text) {
49 |   return text.replace(/(?<!\\)\$([^\W$]+\.[a-zA-Z0-9]+)/g, (value) => {
50 |     const paramResult = getFromParams(value, req.params);
51 |     const queryResult = getFromQuery(value, req.query);
52 | 
53 |     if (paramResult) return paramResult;
54 |     if (queryResult) return queryResult;
55 |     return value;
56 |   });
57 | }
58 | 


--------------------------------------------------------------------------------