From 750f212ef1982d6050d4ded05ce1a79181fcf8bc Mon Sep 17 00:00:00 2001
From: ahmetkuslular <ahmet.kuslular@hepsiburada.com>
Date: Fri, 1 Oct 2021 17:20:31 +0300
Subject: [PATCH 01/20] fix: changed components configuration

---
 src/client/client.js                          |  9 +++--
 src/server.js                                 | 36 +++++++++----------
 src/universal/core/route/routeConstants.js    |  9 +++--
 .../core/route/routesWithComponents.js        | 10 ++++--
 src/universal/model/Component.js              | 13 ++++---
 src/universal/partials/Welcome/partials.js    | 10 ++++--
 src/universal/utils/helper.js                 | 34 ++++++++++++++++++
 7 files changed, 87 insertions(+), 34 deletions(-)

diff --git a/src/client/client.js b/src/client/client.js
index e98cf75..68f5240 100644
--- a/src/client/client.js
+++ b/src/client/client.js
@@ -1,10 +1,15 @@
 import 'whatwg-fetch';
 import Eev from 'eev';
 
+const appConfig = require('__APP_CONFIG__');
+
+const defaultEventBusName = 'eventBus';
 /* eslint-disable-next-line */
-"__V_styles__"
+('__V_styles__');
 
 if (!window.HbEventBus) {
-  window.HbEventBus = new Eev();
+  const name = appConfig.eventBusName || defaultEventBusName;
+
+  window[name] = new Eev();
   window.voltran_project_version = process.env.APP_BUILD_VERSION || '1.0.0';
 }
diff --git a/src/server.js b/src/server.js
index ed2b6f6..b93ee03 100644
--- a/src/server.js
+++ b/src/server.js
@@ -2,7 +2,7 @@
 import newrelic from './universal/tools/newrelic/newrelic';
 
 import cookieParser from 'cookie-parser';
-import {compose} from 'compose-middleware';
+import { compose } from 'compose-middleware';
 import compression from 'compression';
 import path from 'path';
 import Hiddie from 'hiddie';
@@ -18,9 +18,9 @@ import render from './render';
 import registerControllers from './api/controllers';
 import renderMultiple from './renderMultiple';
 
-import {createCacheManagerInstance} from "./universal/core/cache/cacheUtils";
+import { createCacheManagerInstance } from './universal/core/cache/cacheUtils';
 
-import {HTTP_STATUS_CODES} from './universal/utils/constants';
+import { HTTP_STATUS_CODES } from './universal/utils/constants';
 
 import voltranConfig from '../voltran.config';
 
@@ -39,7 +39,7 @@ process.on('unhandledRejection', (reason, p) => {
   process.exit(1);
 });
 
-process.on('message', (message) => {
+process.on('message', message => {
   handleProcessMessage(message);
 });
 
@@ -52,13 +52,13 @@ Object.keys(fragmentManifest).forEach(index => {
   fragments.push(name);
 });
 
-const handleProcessMessage = (message) => {
+const handleProcessMessage = message => {
   if (message?.msg?.action === 'deleteallcache') {
     createCacheManagerInstance().removeAll();
   } else if (message?.msg?.action === 'deletecache') {
     createCacheManagerInstance().remove(message?.msg?.key);
   }
-}
+};
 
 const handleUrls = async (req, res, next) => {
   if (req.url === '/' && req.method === 'GET') {
@@ -67,33 +67,33 @@ const handleUrls = async (req, res, next) => {
     res.setHeader('Content-Type', prom.register.contentType);
     res.end(prom.register.metrics());
   } else if (req.url === '/status' && req.method === 'GET') {
-    res.json({success: true, version: process.env.GO_PIPELINE_LABEL || '1.0.0', fragments});
+    res.json({ success: true, version: process.env.GO_PIPELINE_LABEL || '1.0.0', fragments });
   } else if ((req.url === '/statusCheck' || req.url === '/statuscheck') && req.method === 'GET') {
-    res.json({success: true, version: process.env.GO_PIPELINE_LABEL || '1.0.0', fragments});
+    res.json({ success: true, version: process.env.GO_PIPELINE_LABEL || '1.0.0', fragments });
   } else if (req.url === '/deleteallcache' && req.method === 'GET') {
     process.send({
       msg: {
-        action: 'deleteallcache',
+        action: 'deleteallcache'
       },
       options: {
-        forwardAllWorkers: true,
-      },
+        forwardAllWorkers: true
+      }
     });
-    res.json({success: true});
+    res.json({ success: true });
   } else if (req.path === '/deletecache' && req.method === 'GET') {
     if (req?.query?.key) {
       process.send({
         msg: {
           action: 'deletecache',
-          key: req?.query?.key,
+          key: req?.query?.key
         },
         options: {
-          forwardAllWorkers: true,
-        },
+          forwardAllWorkers: true
+        }
       });
-      res.json({success: true});
+      res.json({ success: true });
     } else {
-      res.json({success: false});
+      res.json({ success: false });
     }
   } else {
     newrelic?.setTransactionName?.(req.path);
@@ -142,7 +142,7 @@ const locals = async (req, res, next) => {
   req.url = xss(req.url);
 
   if (req.headers['set-cookie']) {
-    req.headers['cookie'] = req.headers['cookie'] || req.headers['set-cookie']?.join();
+    req.headers.cookie = req.headers.cookie || req.headers['set-cookie']?.join();
     delete req.headers['set-cookie'];
   }
 
diff --git a/src/universal/core/route/routeConstants.js b/src/universal/core/route/routeConstants.js
index 6a42197..58d372e 100644
--- a/src/universal/core/route/routeConstants.js
+++ b/src/universal/core/route/routeConstants.js
@@ -1,12 +1,15 @@
 import values from 'lodash/values';
+import { generateComponents } from '../../utils/helper';
 
-const components = require('__V_COMPONENTS__');
+const componentConfig = require('__V_COMPONENTS__');
+
+const components = generateComponents(componentConfig.default);
 
 const ROUTE_PATHS = {};
 const ROUTE_CONFIGS = {};
 
-Object.keys(components.default).forEach(path => {
-  const info = components.default[path];
+Object.keys(components).forEach(path => {
+  const info = components[path];
   ROUTE_PATHS[info.name] = path;
   ROUTE_CONFIGS[path] = {
     routeName: info.name,
diff --git a/src/universal/core/route/routesWithComponents.js b/src/universal/core/route/routesWithComponents.js
index c70e910..ad5afff 100644
--- a/src/universal/core/route/routesWithComponents.js
+++ b/src/universal/core/route/routesWithComponents.js
@@ -1,9 +1,13 @@
-const components = require('__V_COMPONENTS__');
+import { generateComponents } from '../../utils/helper';
+
+const componentConfig = require('__V_COMPONENTS__');
+
+const components = generateComponents(componentConfig.default);
 
 const routesWithComponents = {};
 
-Object.keys(components.default).forEach(path => {
-  const info = components.default[path];
+Object.keys(components).forEach(path => {
+  const info = components[path];
   routesWithComponents[path] = info.fragment;
 });
 
diff --git a/src/universal/model/Component.js b/src/universal/model/Component.js
index 90ef581..7d20da7 100644
--- a/src/universal/model/Component.js
+++ b/src/universal/model/Component.js
@@ -1,7 +1,10 @@
 import routesWithComponents from '../core/route/routesWithComponents';
-import { createComponentName } from '../utils/helper';
+// eslint-disable-next-line import/named
+import { createComponentName, generateComponents } from '../utils/helper';
 
-const COMPONENTS = require('__V_COMPONENTS__').default;
+const componentConfig = require('__V_COMPONENTS__');
+
+const components = generateComponents(componentConfig.default);
 
 export default class Component {
   static getComponentName = path => {
@@ -11,15 +14,15 @@ export default class Component {
   static getComponentPath = name => `/${name}`;
 
   static getComponentIsMobileFragment = path => {
-    return COMPONENTS[path].isMobileFragment ? COMPONENTS[path].isMobileFragment : false;
+    return components[path].isMobileFragment ? components[path].isMobileFragment : false;
   };
 
   static getComponentIsFullWidth = path => {
-    return COMPONENTS[path].fullWidth ? COMPONENTS[path].fullWidth : false;
+    return components[path].fullWidth ? components[path].fullWidth : false;
   };
 
   static getComponentIsPreviewQuery = path => {
-    return COMPONENTS[path].isPreviewQuery || true;
+    return components[path].isPreviewQuery || true;
   };
 
   static getComponentObjectWithPath = path => routesWithComponents[path];
diff --git a/src/universal/partials/Welcome/partials.js b/src/universal/partials/Welcome/partials.js
index db298e6..7f57918 100644
--- a/src/universal/partials/Welcome/partials.js
+++ b/src/universal/partials/Welcome/partials.js
@@ -1,9 +1,13 @@
-const components = require('__V_COMPONENTS__');
+import { generateComponents } from '../../utils/helper';
+
+const componentConfig = require('__V_COMPONENTS__');
+
+const components = generateComponents(componentConfig.default);
 
 const partials = [];
 
-Object.keys(components.default).forEach(path => {
-  const info = components.default[path];
+Object.keys(components).forEach(path => {
+  const info = components[path];
   partials.push({
     name: info.fragmentName,
     url: path,
diff --git a/src/universal/utils/helper.js b/src/universal/utils/helper.js
index 799edaa..8d9332a 100644
--- a/src/universal/utils/helper.js
+++ b/src/universal/utils/helper.js
@@ -9,6 +9,40 @@ export const createComponentName = routePath => {
   return routePath.split('/').join('');
 };
 
+const toCamel = (value = '') => {
+  return value
+    .replace(/([-_][a-z])/gi, key =>
+      key
+        .toUpperCase()
+        .replace('-', ' ')
+        .replace('_', ' ')
+    )
+    .toLowerCase();
+};
+
+export const generateComponents = ({
+  paths = {},
+  components = [],
+  defaultConfig = {},
+  customConfig = {}
+}) => {
+  let result = {};
+  Object.entries(paths).forEach(([key, value]) => {
+    result = {
+      ...result,
+      [value]: {
+        fragment: components[value],
+        fragmentName: toCamel(key),
+        name: key,
+        status: 'dev',
+        ...defaultConfig,
+        ...customConfig[value]
+      }
+    };
+  });
+  return result;
+};
+
 export function guid() {
   return `${s4()}${s4()}-${s4()}-4${s4().substr(0, 3)}-${s4()}-${s4()}${s4()}${s4()}`.toLowerCase();
 }

From 36fd1a97d62fde644bd0c6f70d03e752a8c0948f Mon Sep 17 00:00:00 2001
From: ahmetkuslular <ahmet.kuslular@hepsiburada.com>
Date: Mon, 1 Nov 2021 13:19:32 +0300
Subject: [PATCH 02/20] Added Request Dispatcher Layer

---
 .eslintrc.js                                  | 10 ++-
 config/string.js                              | 39 +++++++--
 package.json                                  |  4 +
 src/client/client.js                          |  9 +--
 src/render.js                                 | 11 ++-
 src/renderMultiple.js                         | 47 +++++++----
 src/universal/components/Preview.js           |  7 +-
 .../RequestDispatcher/RequestDispatcher.js    | 63 +++++++++++++++
 .../RequestDispatcher.utils.js                | 12 +++
 .../components/RequestDispatcher/index.js     |  1 +
 src/universal/core/route/components.js        | 29 +++++++
 src/universal/core/route/dictionary.js        | 10 +++
 src/universal/core/route/routeConstants.js    |  6 +-
 .../core/route/routesWithComponents.js        |  6 +-
 src/universal/model/Component.js              | 19 ++---
 src/universal/model/Renderer.js               | 19 +++--
 src/universal/partials/Welcome/partials.js    |  6 +-
 src/universal/service/RenderService.js        | 21 ++++-
 src/universal/utils/baseRenderHtml.js         | 20 ++---
 src/universal/utils/helper.js                 | 20 +++--
 webpack.client.config.js                      | 81 +++++++++----------
 21 files changed, 304 insertions(+), 136 deletions(-)
 create mode 100644 src/universal/components/RequestDispatcher/RequestDispatcher.js
 create mode 100644 src/universal/components/RequestDispatcher/RequestDispatcher.utils.js
 create mode 100644 src/universal/components/RequestDispatcher/index.js
 create mode 100644 src/universal/core/route/components.js
 create mode 100644 src/universal/core/route/dictionary.js

diff --git a/.eslintrc.js b/.eslintrc.js
index e4fcb8b..48e05a8 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -7,7 +7,7 @@ module.exports = {
     window: true,
     hepsiBus: true,
     global: true,
-    jest: true,
+    jest: true
   },
   parserOptions: {
     ecmaFeatures: {
@@ -46,7 +46,13 @@ module.exports = {
     'no-nested-ternary': 'off',
     'no-underscore-dangle': 'off',
     'consistent-return': 'off',
-    'array-callback-return': 'off'
+    'array-callback-return': 'off',
+    'no-restricted-syntax': [
+      'error',
+      'FunctionExpression',
+      'WithStatement',
+      "BinaryExpression[operator='in']"
+    ]
   },
   env: {
     jest: true,
diff --git a/config/string.js b/config/string.js
index d7e5fed..563dc13 100644
--- a/config/string.js
+++ b/config/string.js
@@ -7,12 +7,18 @@ const voltranConfig = require('../voltran.config');
 
 const prometheusFile = voltranConfig.monitoring.prometheus;
 
-function replaceString () {
-	const data = [
-		{ search: '__V_COMPONENTS__', replace: normalizeUrl(voltranConfig.routing.components), flags: 'g' },
+function replaceString() {
+  const data = [
+    {
+      search: '__V_COMPONENTS__',
+      replace: normalizeUrl(voltranConfig.routing.components),
+      flags: 'g'
+    },
     {
       search: '__APP_CONFIG__',
-      replace: normalizeUrl(`${voltranConfig.appConfigFile.output.path}/${voltranConfig.appConfigFile.output.name}.js`),
+      replace: normalizeUrl(
+        `${voltranConfig.appConfigFile.output.path}/${voltranConfig.appConfigFile.output.name}.js`
+      ),
       flags: 'g'
     },
     {
@@ -20,14 +26,31 @@ function replaceString () {
       replace: normalizeUrl(`${voltranConfig.inputFolder}/assets.json`),
       flags: 'g'
     },
-    { search: '__V_DICTIONARY__', replace: normalizeUrl(voltranConfig.routing.dictionary), flags: 'g' },
-    { search: '@voltran/core', replace: normalizeUrl(path.resolve(__dirname, '../src/index')), flags: 'g' },
+    {
+      search: '__V_DICTIONARY__',
+      replace: normalizeUrl(voltranConfig.routing.dictionary),
+      flags: 'g'
+    },
+    {
+      search: '__V_REQUEST_CONFIGS__',
+      replace: normalizeUrl(voltranConfig.routing.requestConfigs),
+      flags: 'g'
+    },
+    {
+      search: '@voltran/core',
+      replace: normalizeUrl(path.resolve(__dirname, '../src/index')),
+      flags: 'g'
+    },
     { search: '"__V_styles__"', replace: getStyles() }
   ];
 
-  data.push({ search: '__V_PROMETHEUS__', replace: normalizeUrl(prometheusFile ? prometheusFile : '../lib/tools/prom.js'), flags: 'g' });
+  data.push({
+    search: '__V_PROMETHEUS__',
+    replace: normalizeUrl(prometheusFile ? prometheusFile : '../lib/tools/prom.js'),
+    flags: 'g'
+  });
 
-	return data;
+  return data;
 }
 
 module.exports = replaceString;
diff --git a/package.json b/package.json
index 2d53de7..cddb2f1 100644
--- a/package.json
+++ b/package.json
@@ -132,5 +132,9 @@
     "commitLimit": false,
     "template": "changelog-template.hbs",
     "package": true
+  },
+  "peerDependencies": {
+    "react": ">=16.13.0",
+    "react-dom": ">=16.13.0"
   }
 }
diff --git a/src/client/client.js b/src/client/client.js
index 68f5240..e98cf75 100644
--- a/src/client/client.js
+++ b/src/client/client.js
@@ -1,15 +1,10 @@
 import 'whatwg-fetch';
 import Eev from 'eev';
 
-const appConfig = require('__APP_CONFIG__');
-
-const defaultEventBusName = 'eventBus';
 /* eslint-disable-next-line */
-('__V_styles__');
+"__V_styles__"
 
 if (!window.HbEventBus) {
-  const name = appConfig.eventBusName || defaultEventBusName;
-
-  window[name] = new Eev();
+  window.HbEventBus = new Eev();
   window.voltran_project_version = process.env.APP_BUILD_VERSION || '1.0.0';
 }
diff --git a/src/render.js b/src/render.js
index 284548e..43c2def 100644
--- a/src/render.js
+++ b/src/render.js
@@ -16,8 +16,7 @@ import logger from './universal/utils/logger';
 
 const appConfig = require('__APP_CONFIG__');
 
-// eslint-disable-next-line consistent-return
-export default async (req, res) => {
+const render = async (req, res) => {
   const isWithoutStateValue = isWithoutState(req.query);
   const pathParts = xss(req.path)
     .split('/')
@@ -63,7 +62,7 @@ export default async (req, res) => {
       componentName,
       seoState,
       isPreviewQuery,
-      responseOptions,
+      responseOptions
     } = renderResponse;
 
     const statusCode = responseOptions?.isPartialContent
@@ -84,7 +83,9 @@ export default async (req, res) => {
       if (voltranEnv !== 'prod' && isPreviewQuery) {
         res.status(statusCode).html(Preview([fullHtml].join('\n')));
       } else {
-        res.status(HTTP_STATUS_CODES.INTERNAL_SERVER_ERROR).html('<h1>Aradığınız sayfa bulunamadı...</h1>');
+        res
+          .status(HTTP_STATUS_CODES.INTERNAL_SERVER_ERROR)
+          .html('<h1>Aradığınız sayfa bulunamadı...</h1>');
       }
     }
   } else {
@@ -93,3 +94,5 @@ export default async (req, res) => {
     });
   }
 };
+
+export default render;
diff --git a/src/renderMultiple.js b/src/renderMultiple.js
index 433094d..6f72648 100644
--- a/src/renderMultiple.js
+++ b/src/renderMultiple.js
@@ -1,15 +1,19 @@
 /* eslint-disable no-param-reassign */
+import async from 'async';
 import { matchUrlInRouteConfigs } from './universal/core/route/routeUtils';
 import Component from './universal/model/Component';
 import Renderer from './universal/model/Renderer';
-import async from 'async';
 import Preview from './universal/components/Preview';
-import { isPreview, isWithoutHTML } from './universal/service/RenderService';
+import { isRequestDispatcher, isPreview, isWithoutHTML } from './universal/service/RenderService';
 import metrics from './metrics';
 import { HTTP_STATUS_CODES } from './universal/utils/constants';
 import logger from './universal/utils/logger';
 
-function getRenderer(name, query, cookies, url, path, userAgent) {
+function getRenderer(name, req) {
+  const { query, cookies, url, headers, params } = req;
+  const path = `/${params?.path || ''}`;
+  const userAgent = headers['user-agent'];
+
   const componentPath = Component.getComponentPath(name);
   const routeInfo = matchUrlInRouteConfigs(componentPath);
 
@@ -159,7 +163,7 @@ async function setInitialStates(renderers) {
 }
 
 async function getResponses(renderers) {
-  return (await Promise.all(renderers.map(renderer => renderer.render())))
+  const responses = (await Promise.all(renderers.map(renderer => renderer.render())))
     .filter(result => result.value != null)
     .reduce((obj, item) => {
       const el = obj;
@@ -169,6 +173,8 @@ async function getResponses(renderers) {
 
       return el;
     }, {});
+
+  return responses;
 }
 
 async function getPreview(responses, requestCount) {
@@ -178,21 +184,26 @@ async function getPreview(responses, requestCount) {
   );
 }
 
-// eslint-disable-next-line consistent-return
-export default async (req, res) => {
-  const renderers = req.params.components
+const DEFAULT_PARTIALS = ['RequestDispatcher'];
+
+export const getPartials = req => {
+  const useRequestDispatcher = isRequestDispatcher(req.query);
+
+  const reqPartials = req.params.components
     .split(',')
     .filter((value, index, self) => self.indexOf(value) === index)
-    .map(name =>
-      getRenderer(
-        name,
-        req.query,
-        req.cookies,
-        req.url,
-        `/${req.params.path || ''}`,
-        req.headers['user-agent']
-      )
-    )
+    .filter(item => !DEFAULT_PARTIALS.includes(item));
+
+  const partials = [...(useRequestDispatcher ? DEFAULT_PARTIALS : []), ...reqPartials];
+
+  return partials;
+};
+
+const renderMultiple = async (req, res) => {
+  const partials = getPartials(req);
+
+  const renderers = partials
+    .map(name => getRenderer(name, req))
     .filter(renderer => renderer != null);
 
   if (!renderers.length) {
@@ -227,3 +238,5 @@ export default async (req, res) => {
       .observe(Date.now() - res.locals.startEpoch);
   }
 };
+
+export default renderMultiple;
diff --git a/src/universal/components/Preview.js b/src/universal/components/Preview.js
index 87e7f17..61d9775 100644
--- a/src/universal/components/Preview.js
+++ b/src/universal/components/Preview.js
@@ -13,7 +13,10 @@ export default (body, title = null) => {
         <title>Preview${additionalTitle}</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <script>window.HBUS_LAZY = true;</script>
-        <script src="${appConfig.voltranCommonUrl}"></script>
+
+        ${cr(
+          appConfig.voltranCommonUrl ? `<script src="${appConfig.voltranCommonUrl}"></script>` : ''
+        )}
         ${cr(
           appConfig.showPreviewFrame,
           `<style>
@@ -31,7 +34,7 @@ export default (body, title = null) => {
               -moz-osx-font-smoothing: grayscale;
             }
 
-            
+
             .voltran-body.full {
               width: auto;
               padding: 0;
diff --git a/src/universal/components/RequestDispatcher/RequestDispatcher.js b/src/universal/components/RequestDispatcher/RequestDispatcher.js
new file mode 100644
index 0000000..c4dff4c
--- /dev/null
+++ b/src/universal/components/RequestDispatcher/RequestDispatcher.js
@@ -0,0 +1,63 @@
+import { useEffect } from 'react';
+
+import withBaseComponent from '../../partials/withBaseComponent';
+import { getEventBus } from '../../utils/helper';
+import { isExitCondition } from './RequestDispatcher.utils';
+
+const requestConfigs = require('__V_REQUEST_CONFIGS__');
+
+const { effects } = requestConfigs.default;
+const requestPrefix = 'RequestDispatcher.';
+const responsePrefix = 'RequestDispatcher.Response.';
+
+const RequestDispatcher = () => {
+  const fragment = '';
+
+  if (!process.env.BROWSER) {
+    return fragment;
+  }
+
+  window.HBUS_LAZY = true;
+
+  useEffect(() => {
+    const eventBus = getEventBus();
+
+    const broadcast = (effect, error, body) => {
+      effect.Subscribers.forEach(responseName => {
+        eventBus.emit(`${responsePrefix}${responseName}`, { error, body });
+      });
+    };
+
+    const runEffect = (effect, data) => {
+      effect
+        .Request(data)
+        .then(response => broadcast(effect, null, response))
+        .catch(error => broadcast(effect, error, null));
+    };
+
+    const requestHandler = requestName => {
+      return data => {
+        if (!Object.prototype.hasOwnProperty.call(effects, requestName)) {
+          return;
+        }
+
+        const conditions = effects[requestName];
+
+        for (const condition in conditions) {
+          if (isExitCondition(condition)) {
+            runEffect(conditions[condition], data);
+            break;
+          }
+        }
+      };
+    };
+
+    Object.keys(effects).forEach(requestName => {
+      eventBus.on(`${requestPrefix}${requestName}`, requestHandler(requestName));
+    });
+  }, []);
+
+  return fragment;
+};
+
+export default withBaseComponent(RequestDispatcher, '/RequestDispatcher');
diff --git a/src/universal/components/RequestDispatcher/RequestDispatcher.utils.js b/src/universal/components/RequestDispatcher/RequestDispatcher.utils.js
new file mode 100644
index 0000000..7541882
--- /dev/null
+++ b/src/universal/components/RequestDispatcher/RequestDispatcher.utils.js
@@ -0,0 +1,12 @@
+import { getEventBus, getProjectWindowData } from '../../utils/helper';
+
+const isEventExist = eventName => {
+  const eventBus = getEventBus();
+  return eventBus && Object.keys(eventBus.events).indexOf(eventName) > -1;
+};
+
+const isExitCondition = condition => {
+  return Object.keys(getProjectWindowData()).indexOf(condition) > -1 || condition === 'default';
+};
+
+export { isExitCondition, isEventExist };
diff --git a/src/universal/components/RequestDispatcher/index.js b/src/universal/components/RequestDispatcher/index.js
new file mode 100644
index 0000000..cb806c5
--- /dev/null
+++ b/src/universal/components/RequestDispatcher/index.js
@@ -0,0 +1 @@
+export { default } from './RequestDispatcher';
diff --git a/src/universal/core/route/components.js b/src/universal/core/route/components.js
new file mode 100644
index 0000000..5b8335c
--- /dev/null
+++ b/src/universal/core/route/components.js
@@ -0,0 +1,29 @@
+import { generateComponents } from '../../utils/helper';
+import RequestDispatcher from '../../components/RequestDispatcher';
+
+const componentConfig = require('__V_COMPONENTS__');
+
+const ROUTE_PATHS = {
+  REQUEST_DISPATCHER: '/RequestDispatcher'
+};
+const ROUTE_COMPONENTS = {
+  [ROUTE_PATHS.REQUEST_DISPATCHER]: RequestDispatcher
+};
+const defaultPartialsConfig = {
+  paths: ROUTE_PATHS,
+  components: ROUTE_COMPONENTS
+};
+
+const mergePartials = () => {
+  const { paths = {}, components = [], ...others } = componentConfig.default;
+
+  return {
+    paths: { ...paths, ...defaultPartialsConfig?.paths },
+    components: { ...components, ...defaultPartialsConfig?.components },
+    ...others
+  };
+};
+
+const components = generateComponents(mergePartials());
+
+export default components;
diff --git a/src/universal/core/route/dictionary.js b/src/universal/core/route/dictionary.js
new file mode 100644
index 0000000..686ae2c
--- /dev/null
+++ b/src/universal/core/route/dictionary.js
@@ -0,0 +1,10 @@
+const path = require('path');
+
+const ROUTE_CONFIG_TO_COMPONENT_DICT = [
+  {
+    path: path.resolve(__dirname, '../../components/RequestDispatcher/RequestDispatcher'),
+    routePath: '/RequestDispatcher'
+  }
+];
+
+module.exports = ROUTE_CONFIG_TO_COMPONENT_DICT;
diff --git a/src/universal/core/route/routeConstants.js b/src/universal/core/route/routeConstants.js
index 58d372e..1a6e576 100644
--- a/src/universal/core/route/routeConstants.js
+++ b/src/universal/core/route/routeConstants.js
@@ -1,9 +1,5 @@
 import values from 'lodash/values';
-import { generateComponents } from '../../utils/helper';
-
-const componentConfig = require('__V_COMPONENTS__');
-
-const components = generateComponents(componentConfig.default);
+import components from './components';
 
 const ROUTE_PATHS = {};
 const ROUTE_CONFIGS = {};
diff --git a/src/universal/core/route/routesWithComponents.js b/src/universal/core/route/routesWithComponents.js
index ad5afff..24810fa 100644
--- a/src/universal/core/route/routesWithComponents.js
+++ b/src/universal/core/route/routesWithComponents.js
@@ -1,8 +1,4 @@
-import { generateComponents } from '../../utils/helper';
-
-const componentConfig = require('__V_COMPONENTS__');
-
-const components = generateComponents(componentConfig.default);
+import components from './components';
 
 const routesWithComponents = {};
 
diff --git a/src/universal/model/Component.js b/src/universal/model/Component.js
index 7d20da7..93d9378 100644
--- a/src/universal/model/Component.js
+++ b/src/universal/model/Component.js
@@ -1,10 +1,7 @@
 import routesWithComponents from '../core/route/routesWithComponents';
 // eslint-disable-next-line import/named
-import { createComponentName, generateComponents } from '../utils/helper';
-
-const componentConfig = require('__V_COMPONENTS__');
-
-const components = generateComponents(componentConfig.default);
+import { createComponentName } from '../utils/helper';
+import components from '../core/route/components';
 
 export default class Component {
   static getComponentName = path => {
@@ -13,16 +10,16 @@ export default class Component {
 
   static getComponentPath = name => `/${name}`;
 
-  static getComponentIsMobileFragment = path => {
-    return components[path].isMobileFragment ? components[path].isMobileFragment : false;
+  static getComponentIsMobileFragment = (path = '') => {
+    return components?.[path]?.isMobileFragment ?? false;
   };
 
-  static getComponentIsFullWidth = path => {
-    return components[path].fullWidth ? components[path].fullWidth : false;
+  static getComponentIsFullWidth = (path = '') => {
+    return components?.[path]?.fullWidth ?? false;
   };
 
-  static getComponentIsPreviewQuery = path => {
-    return components[path].isPreviewQuery || true;
+  static getComponentIsPreviewQuery = (path = '') => {
+    return components?.[path]?.isPreviewQuery ?? true;
   };
 
   static getComponentObjectWithPath = path => routesWithComponents[path];
diff --git a/src/universal/model/Renderer.js b/src/universal/model/Renderer.js
index b9c9a83..4bfcc2e 100644
--- a/src/universal/model/Renderer.js
+++ b/src/universal/model/Renderer.js
@@ -1,5 +1,5 @@
 import ServerApiManagerCache from '../core/api/ServerApiManagerCache';
-import { renderComponent, renderLinksAndScripts } from '../service/RenderService';
+import { isPreview, renderComponent, renderLinksAndScripts } from '../service/RenderService';
 
 export default class Renderer {
   constructor(component, context) {
@@ -9,8 +9,10 @@ export default class Renderer {
     this.initialState = null;
     this.winnerMap = null;
 
-    if (this.isPredefinedInitialStateSupported() &&
-      (process.env.BROWSER || (!process.env.BROWSER && !this.context.isWithoutState))) {
+    if (
+      this.isPredefinedInitialStateSupported() &&
+      (process.env.BROWSER || (!process.env.BROWSER && !this.context.isWithoutState))
+    ) {
       this.servicesMap = this.getServicesMap();
       this.winnerMap = {};
     }
@@ -38,12 +40,19 @@ export default class Renderer {
   render() {
     return new Promise(resolve => {
       renderComponent(this.component, this.context, this.initialState).then(response => {
-        const { output, links, scripts, activeComponent, seoState } = response;
+        const { output, links, scripts, activeComponent, seoState, fullHtml } = response;
         const html = renderLinksAndScripts(output, '', '');
 
         resolve({
           key: this.component.name,
-          value: { html, scripts, style: links, activeComponent, seoState },
+          value: {
+            html,
+            scripts,
+            style: links,
+            activeComponent,
+            seoState,
+            ...(isPreview(this.context?.query) && { fullHtml })
+          },
           id: this.component.id
         });
       });
diff --git a/src/universal/partials/Welcome/partials.js b/src/universal/partials/Welcome/partials.js
index 7f57918..de47701 100644
--- a/src/universal/partials/Welcome/partials.js
+++ b/src/universal/partials/Welcome/partials.js
@@ -1,8 +1,4 @@
-import { generateComponents } from '../../utils/helper';
-
-const componentConfig = require('__V_COMPONENTS__');
-
-const components = generateComponents(componentConfig.default);
+import components from '../../core/route/components';
 
 const partials = [];
 
diff --git a/src/universal/service/RenderService.js b/src/universal/service/RenderService.js
index 33acc48..15d8391 100644
--- a/src/universal/service/RenderService.js
+++ b/src/universal/service/RenderService.js
@@ -19,12 +19,12 @@ const getStates = async (component, context, predefinedInitialState) => {
     return { initialState, seoState, subComponentFiles, responseOptions };
   }
 
-  if (!predefinedInitialState && component.getInitialState) {
+  if (!predefinedInitialState && component?.getInitialState) {
     const services = component.services.map(serviceName => ServerApiManagerCache[serviceName]);
     initialState.data = await component.getInitialState(...[...services, context]);
   }
 
-  if (component.getSeoState) {
+  if (component?.getSeoState) {
     seoState = component.getSeoState(initialState.data);
   }
 
@@ -90,6 +90,10 @@ const isWithoutState = query => {
   return query.withoutState === '';
 };
 
+const isRequestDispatcher = query => {
+  return query.requestDispathcer === '' || query.requestDispathcer !== 'false';
+};
+
 const renderComponent = async (component, context, predefinedInitialState = null) => {
   const { initialState, seoState, subComponentFiles, responseOptions } = await getStates(
     component.object,
@@ -116,8 +120,17 @@ const renderComponent = async (component, context, predefinedInitialState = null
     fullWidth: component.fullWidth,
     isMobileComponent: component.isMobileComponent,
     isPreviewQuery: component.isPreviewQuery,
-    responseOptions,
+    responseOptions
   };
 };
 
-export { renderHtml, renderLinksAndScripts, getStates, isWithoutHTML, isPreview, isWithoutState, renderComponent };
+export {
+  renderHtml,
+  renderLinksAndScripts,
+  getStates,
+  isWithoutHTML,
+  isPreview,
+  isRequestDispatcher,
+  isWithoutState,
+  renderComponent
+};
diff --git a/src/universal/utils/baseRenderHtml.js b/src/universal/utils/baseRenderHtml.js
index a0ef08f..b9860bc 100644
--- a/src/universal/utils/baseRenderHtml.js
+++ b/src/universal/utils/baseRenderHtml.js
@@ -29,30 +29,28 @@ if (process.env.NODE_ENV === 'production') {
 }
 
 const getScripts = (name, subComponentFiles) => {
-  const subComponentFilesScripts = subComponentFiles.scripts;
+  const subComponentFilesScripts = subComponentFiles?.scripts;
   const scripts = [
     {
-      src: `${assetsBaseUrl}${assets.client.js}`,
+      src: `${assetsBaseUrl}${assets?.client?.js}`,
       isAsync: false
     },
     {
-      src: `${assetsBaseUrl}${assets[name].js}`,
+      src: `${assetsBaseUrl}${assets?.[name]?.js}`,
       isAsync: false
     }
   ];
   const mergedScripts =
-    subComponentFilesScripts && subComponentFilesScripts.length > 0
-      ? scripts.concat(subComponentFiles.scripts)
-      : scripts;
+    subComponentFilesScripts?.length > 0 ? scripts.concat(subComponentFiles.scripts) : scripts;
 
   return mergedScripts;
 };
 
 const getStyles = async (name, subComponentFiles) => {
   const links = [];
-  const subComponentFilesStyles = subComponentFiles.styles;
+  const subComponentFilesStyles = subComponentFiles?.styles;
 
-  if (assets[name].css) {
+  if (assets?.[name]?.css) {
     links.push({
       rel: 'stylesheet',
       href: `${assetsBaseUrl}${assets[name].css}`,
@@ -63,7 +61,7 @@ const getStyles = async (name, subComponentFiles) => {
     });
   }
 
-  if (assets.client.css) {
+  if (assets?.client?.css) {
     links.push({
       rel: 'stylesheet',
       href: `${assetsBaseUrl}${assets.client.css}`,
@@ -75,9 +73,7 @@ const getStyles = async (name, subComponentFiles) => {
   }
 
   const mergedLinks =
-    subComponentFilesStyles && subComponentFilesStyles.length > 0
-      ? links.concat(subComponentFiles.styles)
-      : links;
+    subComponentFilesStyles?.length > 0 ? links.concat(subComponentFiles.styles) : links;
 
   return mergedLinks;
 };
diff --git a/src/universal/utils/helper.js b/src/universal/utils/helper.js
index 8d9332a..c3034b6 100644
--- a/src/universal/utils/helper.js
+++ b/src/universal/utils/helper.js
@@ -1,4 +1,6 @@
 // eslint-disable-next-line import/prefer-default-export
+import voltranConfig from '../../../voltran.config';
+
 export const removeQueryStringFromUrl = url => {
   const partials = url.split('?');
 
@@ -20,12 +22,9 @@ const toCamel = (value = '') => {
     .toLowerCase();
 };
 
-export const generateComponents = ({
-  paths = {},
-  components = [],
-  defaultConfig = {},
-  customConfig = {}
-}) => {
+export const generateComponents = partialsConfig => {
+  const { paths = {}, components = [], defaultConfig = {}, customConfig = {} } = partialsConfig;
+
   let result = {};
   Object.entries(paths).forEach(([key, value]) => {
     result = {
@@ -47,6 +46,15 @@ export function guid() {
   return `${s4()}${s4()}-${s4()}-4${s4().substr(0, 3)}-${s4()}-${s4()}${s4()}${s4()}`.toLowerCase();
 }
 
+export const getEventBus = () => {
+  return process.env.BROWSER && window && window.HbEventBus;
+};
+
+export const getProjectWindowData = () => {
+  const prefix = voltranConfig.prefix.toUpperCase();
+  return process.env.BROWSER && window && window[prefix];
+};
+
 export function s4() {
   return Math.floor((1 + Math.random()) * 0x10000)
     .toString(16)
diff --git a/webpack.client.config.js b/webpack.client.config.js
index cb0adfe..15c8840 100644
--- a/webpack.client.config.js
+++ b/webpack.client.config.js
@@ -1,6 +1,5 @@
 const path = require('path');
 const fs = require('fs');
-
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
 const AssetsPlugin = require('assets-webpack-plugin');
@@ -15,34 +14,31 @@ const { ESBuildMinifyPlugin } = require('esbuild-loader');
 require('intersection-observer');
 
 const { createComponentName } = require('./src/universal/utils/helper.js');
-
 const packageJson = require('./package.json');
+const voltranConfig = require('./voltran.config');
 
 const isBuildingForCDN = process.argv.includes('--for-cdn');
 const isAnalyze = process.argv.includes('--analyze');
 const env = process.env.VOLTRAN_ENV || 'local';
-const voltranConfig = require('./voltran.config');
 
 const appConfigFilePath = `${voltranConfig.appConfigFile.entry}/${env}.conf.js`;
 const appConfig = require(appConfigFilePath);
 const commonConfig = require('./webpack.common.config');
 const postCssConfig = require('./postcss.config');
-const babelConfig = require('./babel.server.config');
 
 const voltranClientConfigPath = voltranConfig.webpackConfiguration.client;
 const voltranClientConfig = voltranClientConfigPath
   ? require(voltranConfig.webpackConfiguration.client)
   : '';
 
-const normalizeUrl = require('./lib/os.js');
 const replaceString = require('./config/string.js');
 
 const fragmentManifest = require(voltranConfig.routing.dictionary);
+const fixFragmentManifest = require('./src/universal/core/route/dictionary');
 
 const isDebug = voltranConfig.dev;
 const reScript = /\.(js|jsx|mjs)$/;
 const distFolderPath = voltranConfig.distFolder;
-const prometheusFile = voltranConfig.monitoring.prometheus;
 
 const chunks = {};
 
@@ -53,18 +49,17 @@ chunks.client = [
   path.resolve(__dirname, 'src/client/client.js')
 ];
 
-for (const index in fragmentManifest) {
-  if (!fragmentManifest[index]) {
-    continue;
-  }
-
-  const fragment = fragmentManifest[index];
-  const fragmentUrl = fragment.path;
-  const name = createComponentName(fragment.routePath);
+function generateChunk(fragments) {
+  fragments.forEach(fragment => {
+    const fragmentUrl = fragment?.path;
+    const name = createComponentName(fragment.routePath);
 
-  chunks[name] = [fragmentUrl];
+    chunks[name] = [fragmentUrl];
+  });
 }
 
+generateChunk([...fragmentManifest, ...fixFragmentManifest]);
+
 if (isDebug) {
   chunks.client.push('webpack-hot-middleware/client');
 }
@@ -136,13 +131,13 @@ const clientConfig = webpackMerge(commonConfig, voltranClientConfig, {
         use: [
           isDebug
             ? {
-              loader: 'style-loader',
-              options: {
-                insertAt: 'top',
-                singleton: true,
-                sourceMap: false
+                loader: 'style-loader',
+                options: {
+                  insertAt: 'top',
+                  singleton: true,
+                  sourceMap: false
+                }
               }
-            }
             : MiniCssExtractPlugin.loader,
           {
             loader: 'css-loader',
@@ -164,13 +159,13 @@ const clientConfig = webpackMerge(commonConfig, voltranClientConfig, {
         use: [
           isDebug
             ? {
-              loader: 'style-loader',
-              options: {
-                insertAt: 'top',
-                singleton: true,
-                sourceMap: false
+                loader: 'style-loader',
+                options: {
+                  insertAt: 'top',
+                  singleton: true,
+                  sourceMap: false
+                }
               }
-            }
             : MiniCssExtractPlugin.loader,
           {
             loader: 'css-loader',
@@ -193,14 +188,14 @@ const clientConfig = webpackMerge(commonConfig, voltranClientConfig, {
           },
           ...(voltranConfig.sassResources
             ? [
-              {
-                loader: 'sass-resources-loader',
-                options: {
-                  sourceMap: false,
-                  resources: voltranConfig.sassResources
+                {
+                  loader: 'sass-resources-loader',
+                  options: {
+                    sourceMap: false,
+                    resources: voltranConfig.sassResources
+                  }
                 }
-              }
-            ]
+              ]
             : [])
         ]
       }
@@ -226,10 +221,10 @@ const clientConfig = webpackMerge(commonConfig, voltranClientConfig, {
     ...(isBuildingForCDN
       ? []
       : [
-        new CleanWebpackPlugin([distFolderPath], {
-          verbose: true
-        })
-      ]),
+          new CleanWebpackPlugin([distFolderPath], {
+            verbose: true
+          })
+        ]),
 
     new webpack.DefinePlugin({
       'process.env.BROWSER': true,
@@ -247,11 +242,11 @@ const clientConfig = webpackMerge(commonConfig, voltranClientConfig, {
     ...(isDebug
       ? [new webpack.HotModuleReplacementPlugin()]
       : [
-        new MiniCssExtractPlugin({
-          filename: '[name].css',
-          chunkFilename: '[id]-[contenthash].css'
-        })
-      ]),
+          new MiniCssExtractPlugin({
+            filename: '[name].css',
+            chunkFilename: '[id]-[contenthash].css'
+          })
+        ]),
 
     new AssetsPlugin({
       path: voltranConfig.inputFolder,

From 412dba33824b059cb102d78e3627f38152457652 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cihan=20SEL=C4=B0M?= <chnselim@outlook.com>
Date: Fri, 17 Dec 2021 13:05:07 +0300
Subject: [PATCH 03/20] FIX server.js to customize it in other projects

---
 config/string.js         |   1 +
 src/middleware.js        | 191 +++++++++++++++++++++++++++++++++++++++
 src/server.js            | 191 ++-------------------------------------
 webpack.server.config.js |   5 +-
 4 files changed, 204 insertions(+), 184 deletions(-)
 create mode 100644 src/middleware.js

diff --git a/config/string.js b/config/string.js
index d7e5fed..b4c745b 100644
--- a/config/string.js
+++ b/config/string.js
@@ -22,6 +22,7 @@ function replaceString () {
     },
     { search: '__V_DICTIONARY__', replace: normalizeUrl(voltranConfig.routing.dictionary), flags: 'g' },
     { search: '@voltran/core', replace: normalizeUrl(path.resolve(__dirname, '../src/index')), flags: 'g' },
+    { search: '@voltran/server', replace: normalizeUrl(path.resolve(__dirname, '../src/server')), flags: 'g' },
     { search: '"__V_styles__"', replace: getStyles() }
   ];
 
diff --git a/src/middleware.js b/src/middleware.js
new file mode 100644
index 0000000..4ed2647
--- /dev/null
+++ b/src/middleware.js
@@ -0,0 +1,191 @@
+/* istanbul ignore file */
+import newrelic from './universal/tools/newrelic/newrelic';
+
+import cookieParser from 'cookie-parser';
+import { compose } from 'compose-middleware';
+import compression from 'compression';
+import path from 'path';
+import Hiddie from 'hiddie';
+import serveStatic from 'serve-static';
+import prom from 'prom-client';
+import helmet from 'helmet';
+import url from 'url';
+import xss from 'xss';
+
+import Welcome from './universal/partials/Welcome';
+import render from './render';
+import registerControllers from './api/controllers';
+import renderMultiple from './renderMultiple';
+
+import { createCacheManagerInstance } from './universal/core/cache/cacheUtils';
+
+import { HTTP_STATUS_CODES } from './universal/utils/constants';
+
+import voltranConfig from '../voltran.config';
+
+const enablePrometheus = voltranConfig.monitoring.prometheus;
+let Prometheus;
+
+if (enablePrometheus) {
+  // eslint-disable-next-line global-require
+  Prometheus = require('__V_PROMETHEUS__');
+}
+
+const fragmentManifest = require('__V_DICTIONARY__');
+
+process.on('unhandledRejection', (reason, p) => {
+  console.error('Unhandled Rejection at:', p, 'reason:', reason);
+  process.exit(1);
+});
+
+process.on('message', message => {
+  handleProcessMessage(message);
+});
+
+const fragments = [];
+
+Object.keys(fragmentManifest).forEach(index => {
+  const fragmentUrl = fragmentManifest[index].path;
+  const arr = fragmentUrl.split(path.sep);
+  const name = arr[arr.length - 1];
+  fragments.push(name);
+});
+
+const handleProcessMessage = message => {
+  if (message?.msg?.action === 'deleteallcache') {
+    createCacheManagerInstance().removeAll();
+  } else if (message?.msg?.action === 'deletecache') {
+    createCacheManagerInstance().remove(message?.msg?.key);
+  }
+};
+
+const handleUrls = async (req, res, next) => {
+  if (req.url === '/' && req.method === 'GET') {
+    res.html(Welcome());
+  } else if (req.url === '/metrics' && req.method === 'GET' && !enablePrometheus) {
+    res.setHeader('Content-Type', prom.register.contentType);
+    res.end(prom.register.metrics());
+  } else if (req.url === '/status' && req.method === 'GET') {
+    res.json({ success: true, version: process.env.GO_PIPELINE_LABEL || '1.0.0', fragments });
+  } else if ((req.url === '/statusCheck' || req.url === '/statuscheck') && req.method === 'GET') {
+    res.json({ success: true, version: process.env.GO_PIPELINE_LABEL || '1.0.0', fragments });
+  } else if (req.url === '/deleteallcache' && req.method === 'GET') {
+    process.send({
+      msg: {
+        action: 'deleteallcache'
+      },
+      options: {
+        forwardAllWorkers: true
+      }
+    });
+    res.json({ success: true });
+  } else if (req.path === '/deletecache' && req.method === 'GET') {
+    if (req?.query?.key) {
+      process.send({
+        msg: {
+          action: 'deletecache',
+          key: req?.query?.key
+        },
+        options: {
+          forwardAllWorkers: true
+        }
+      });
+      res.json({ success: true });
+    } else {
+      res.json({ success: false });
+    }
+  } else {
+    newrelic?.setTransactionName?.(req.path);
+    next();
+  }
+};
+
+const cors = async (req, res, next) => {
+  res.setHeader('CCC', 'SSSS');
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, HEAD, OPTIONS');
+
+  if (req.method === 'OPTIONS') {
+    res.writeHead(HTTP_STATUS_CODES.OK);
+    res.end();
+
+    return;
+  }
+
+  next();
+};
+
+const utils = async (req, res, next) => {
+  res.json = json => {
+    res.setHeader('Content-Type', 'application/json; charset=utf-8');
+    res.end(JSON.stringify(json));
+  };
+
+  res.html = html => {
+    res.setHeader('Content-Type', 'text/html; charset=utf-8');
+    res.end(html);
+  };
+
+  res.status = code => {
+    res.statusCode = code;
+    return res;
+  };
+
+  next();
+};
+
+const locals = async (req, res, next) => {
+  const parsedUrl = url.parse(req.url, true);
+
+  req.query = JSON.parse(xss(JSON.stringify(parsedUrl.query)));
+  req.path = xss(parsedUrl.pathname);
+  req.url = xss(req.url);
+
+  if (req.headers['set-cookie']) {
+    req.headers.cookie = req.headers.cookie || req.headers['set-cookie']?.join();
+    delete req.headers['set-cookie'];
+  }
+
+  res.locals = {};
+  res.locals.startEpoch = new Date();
+
+  next();
+};
+
+export const hiddie = Hiddie(async (err, req, res) => {
+  res.end();
+});
+
+export const prepareMiddlewares = () => {
+  hiddie.use(compression());
+  hiddie.use(locals);
+  hiddie.use(helmet());
+  hiddie.use(cors);
+  hiddie.use('/', serveStatic(`${voltranConfig.distFolder}/public`));
+  hiddie.use(cookieParser());
+  hiddie.use(utils);
+  hiddie.use(handleUrls);
+
+  if (enablePrometheus) {
+    Prometheus.injectMetricsRoute(hiddie);
+    Prometheus.startCollection();
+  }
+
+  registerControllers(hiddie);
+  hiddie.use('/components/:components/:path*', renderMultiple);
+  hiddie.use('/components/:components', renderMultiple);
+  hiddie.use(render);
+};
+
+export const composedMiddlewares = () => {
+  return compose([
+    compression(),
+    locals,
+    helmet(),
+    serveStatic(`${voltranConfig.distFolder}/public`),
+    cookieParser(),
+    utils,
+    handleUrls,
+    render
+  ]);
+};
diff --git a/src/server.js b/src/server.js
index b93ee03..84e62a8 100644
--- a/src/server.js
+++ b/src/server.js
@@ -1,191 +1,16 @@
-/* istanbul ignore file */
-import newrelic from './universal/tools/newrelic/newrelic';
-
-import cookieParser from 'cookie-parser';
-import { compose } from 'compose-middleware';
-import compression from 'compression';
-import path from 'path';
-import Hiddie from 'hiddie';
 import http from 'http';
-import serveStatic from 'serve-static';
-import prom from 'prom-client';
-import helmet from 'helmet';
-import url from 'url';
-import xss from 'xss';
-
-import Welcome from './universal/partials/Welcome';
-import render from './render';
-import registerControllers from './api/controllers';
-import renderMultiple from './renderMultiple';
-
-import { createCacheManagerInstance } from './universal/core/cache/cacheUtils';
-
-import { HTTP_STATUS_CODES } from './universal/utils/constants';
 
 import voltranConfig from '../voltran.config';
+import { hiddie, composedMiddlewares, prepareMiddlewares } from './middleware';
 
-const enablePrometheus = voltranConfig.monitoring.prometheus;
-let Prometheus;
-
-if (enablePrometheus) {
-  // eslint-disable-next-line global-require
-  Prometheus = require('__V_PROMETHEUS__');
-}
-
-const fragmentManifest = require('__V_DICTIONARY__');
-
-process.on('unhandledRejection', (reason, p) => {
-  console.error('Unhandled Rejection at:', p, 'reason:', reason);
-  process.exit(1);
-});
-
-process.on('message', message => {
-  handleProcessMessage(message);
-});
-
-const fragments = [];
-
-Object.keys(fragmentManifest).forEach(index => {
-  const fragmentUrl = fragmentManifest[index].path;
-  const arr = fragmentUrl.split(path.sep);
-  const name = arr[arr.length - 1];
-  fragments.push(name);
-});
-
-const handleProcessMessage = message => {
-  if (message?.msg?.action === 'deleteallcache') {
-    createCacheManagerInstance().removeAll();
-  } else if (message?.msg?.action === 'deletecache') {
-    createCacheManagerInstance().remove(message?.msg?.key);
-  }
-};
-
-const handleUrls = async (req, res, next) => {
-  if (req.url === '/' && req.method === 'GET') {
-    res.html(Welcome());
-  } else if (req.url === '/metrics' && req.method === 'GET' && !enablePrometheus) {
-    res.setHeader('Content-Type', prom.register.contentType);
-    res.end(prom.register.metrics());
-  } else if (req.url === '/status' && req.method === 'GET') {
-    res.json({ success: true, version: process.env.GO_PIPELINE_LABEL || '1.0.0', fragments });
-  } else if ((req.url === '/statusCheck' || req.url === '/statuscheck') && req.method === 'GET') {
-    res.json({ success: true, version: process.env.GO_PIPELINE_LABEL || '1.0.0', fragments });
-  } else if (req.url === '/deleteallcache' && req.method === 'GET') {
-    process.send({
-      msg: {
-        action: 'deleteallcache'
-      },
-      options: {
-        forwardAllWorkers: true
-      }
-    });
-    res.json({ success: true });
-  } else if (req.path === '/deletecache' && req.method === 'GET') {
-    if (req?.query?.key) {
-      process.send({
-        msg: {
-          action: 'deletecache',
-          key: req?.query?.key
-        },
-        options: {
-          forwardAllWorkers: true
-        }
-      });
-      res.json({ success: true });
-    } else {
-      res.json({ success: false });
-    }
-  } else {
-    newrelic?.setTransactionName?.(req.path);
-    next();
-  }
-};
-
-const cors = async (req, res, next) => {
-  res.setHeader('Access-Control-Allow-Origin', '*');
-  res.setHeader('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, HEAD, OPTIONS');
-
-  if (req.method === 'OPTIONS') {
-    res.writeHead(HTTP_STATUS_CODES.OK);
-    res.end();
-
-    return;
-  }
-
-  next();
-};
-
-const utils = async (req, res, next) => {
-  res.json = json => {
-    res.setHeader('Content-Type', 'application/json; charset=utf-8');
-    res.end(JSON.stringify(json));
-  };
-
-  res.html = html => {
-    res.setHeader('Content-Type', 'text/html; charset=utf-8');
-    res.end(html);
-  };
-
-  res.status = code => {
-    res.statusCode = code;
-    return res;
-  };
-
-  next();
-};
-
-const locals = async (req, res, next) => {
-  const parsedUrl = url.parse(req.url, true);
-
-  req.query = JSON.parse(xss(JSON.stringify(parsedUrl.query)));
-  req.path = xss(parsedUrl.pathname);
-  req.url = xss(req.url);
-
-  if (req.headers['set-cookie']) {
-    req.headers.cookie = req.headers.cookie || req.headers['set-cookie']?.join();
-    delete req.headers['set-cookie'];
-  }
-
-  res.locals = {};
-  res.locals.startEpoch = new Date();
-
-  next();
+const launchServer = () => {
+  prepareMiddlewares();
+  http.createServer(hiddie.run).listen(voltranConfig.port);
 };
 
-if (process.env.NODE_ENV === 'production') {
-  const hiddie = Hiddie(async (err, req, res) => {
-    res.end();
-  });
-  hiddie.use(compression());
-  hiddie.use(locals);
-  hiddie.use(helmet());
-  hiddie.use(cors);
-  hiddie.use('/', serveStatic(`${voltranConfig.distFolder}/public`));
-  hiddie.use(cookieParser());
-  hiddie.use(utils);
-  hiddie.use(handleUrls);
-
-  if (enablePrometheus) {
-    Prometheus.injectMetricsRoute(hiddie);
-    Prometheus.startCollection();
-  }
-
-  registerControllers(hiddie);
-  hiddie.use('/components/:components/:path*', renderMultiple);
-  hiddie.use('/components/:components', renderMultiple);
-  hiddie.use(render);
-  http.createServer(hiddie.run).listen(voltranConfig.port);
+if (process.env.NODE_ENV === 'production' && !voltranConfig.entry) {
+  launchServer();
 }
 
-export default () => {
-  return compose([
-    compression(),
-    locals,
-    helmet(),
-    serveStatic(`${voltranConfig.distFolder}/public`),
-    cookieParser(),
-    utils,
-    handleUrls,
-    render
-  ]);
-};
+export default composedMiddlewares;
+export { launchServer, hiddie };
diff --git a/webpack.server.config.js b/webpack.server.config.js
index 1b9b79b..dae31a3 100644
--- a/webpack.server.config.js
+++ b/webpack.server.config.js
@@ -25,6 +25,9 @@ const voltranServerConfigPath = voltranConfig.webpackConfiguration.server;
 const voltranServerConfig = voltranServerConfigPath
   ? require(voltranConfig.webpackConfiguration.server)
   : '';
+const voltranServer = voltranConfig.entry
+  ? voltranConfig.entry
+  : path.resolve(__dirname, isDebug ? 'src/server.js' : 'src/main.js');
 
 const serverConfig = webpackMerge(commonConfig, voltranServerConfig, {
   name: 'server',
@@ -34,7 +37,7 @@ const serverConfig = webpackMerge(commonConfig, voltranServerConfig, {
   mode: isDebug ? 'development' : 'production',
 
   entry: {
-    server: [path.resolve(__dirname, isDebug ? 'src/server.js' : 'src/main.js')]
+    server: [voltranServer]
   },
 
   output: {

From efc05d5c542732f2cc193771e7f79bb272c459dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cihan=20SEL=C4=B0M?= <cihan.selim@hepsiburada.com>
Date: Tue, 11 Jan 2022 13:29:50 +0300
Subject: [PATCH 04/20] Remove unnecessary header

---
 src/middleware.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/middleware.js b/src/middleware.js
index 4ed2647..829d94f 100644
--- a/src/middleware.js
+++ b/src/middleware.js
@@ -101,7 +101,6 @@ const handleUrls = async (req, res, next) => {
 };
 
 const cors = async (req, res, next) => {
-  res.setHeader('CCC', 'SSSS');
   res.setHeader('Access-Control-Allow-Origin', '*');
   res.setHeader('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, HEAD, OPTIONS');
 

From ca6e445e12e578a7f2ad7c92ade67803911b12c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cihan=20SEL=C4=B0M?= <cihan.selim@hepsiburada.com>
Date: Tue, 11 Jan 2022 13:45:32 +0300
Subject: [PATCH 05/20] FIX some bugs and missings

---
 src/universal/components/Preview.js                           | 4 +++-
 .../components/RequestDispatcher/RequestDispatcher.js         | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/universal/components/Preview.js b/src/universal/components/Preview.js
index 61d9775..957ddae 100644
--- a/src/universal/components/Preview.js
+++ b/src/universal/components/Preview.js
@@ -15,7 +15,9 @@ export default (body, title = null) => {
         <script>window.HBUS_LAZY = true;</script>
 
         ${cr(
-          appConfig.voltranCommonUrl ? `<script src="${appConfig.voltranCommonUrl}"></script>` : ''
+          appConfig.voltranCommonUrl,
+          `<script src="${appConfig.voltranCommonUrl}"></script>`,
+          ''
         )}
         ${cr(
           appConfig.showPreviewFrame,
diff --git a/src/universal/components/RequestDispatcher/RequestDispatcher.js b/src/universal/components/RequestDispatcher/RequestDispatcher.js
index c4dff4c..57cae83 100644
--- a/src/universal/components/RequestDispatcher/RequestDispatcher.js
+++ b/src/universal/components/RequestDispatcher/RequestDispatcher.js
@@ -6,7 +6,7 @@ import { isExitCondition } from './RequestDispatcher.utils';
 
 const requestConfigs = require('__V_REQUEST_CONFIGS__');
 
-const { effects } = requestConfigs.default;
+const { effects = [] } = requestConfigs.default;
 const requestPrefix = 'RequestDispatcher.';
 const responsePrefix = 'RequestDispatcher.Response.';
 

From ce9577948ad0094527eb1a3a6bdf23070238485a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cihan=20SEL=C4=B0M?= <cihan.selim@hepsiburada.com>
Date: Tue, 11 Jan 2022 14:39:21 +0300
Subject: [PATCH 06/20] FIX user-agent header null check

---
 src/render.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/render.js b/src/render.js
index 592d759..4bf7c8b 100644
--- a/src/render.js
+++ b/src/render.js
@@ -35,7 +35,7 @@ const render = async (req, res) => {
       url: xss(req.url)
         .replace(componentPath, '/')
         .replace('//', '/'),
-      userAgent: Buffer.from(req.headers['user-agent'], 'utf-8').toString('base64'),
+      userAgent: Buffer.from(req.headers['user-agent'] || [], 'utf-8').toString('base64'),
       headers: JSON.parse(xss(JSON.stringify(req.headers))),
       isWithoutState: isWithoutStateValue
     };

From d73f3cb78d4cc7eb21f349c29b24bc5d488fb984 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cihan=20SEL=C4=B0M?= <cihan.selim@hepsiburada.com>
Date: Wed, 12 Jan 2022 13:58:46 +0300
Subject: [PATCH 07/20] FIX voltranconfig entry condition

---
 webpack.server.config.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/webpack.server.config.js b/webpack.server.config.js
index dae31a3..ce0973e 100644
--- a/webpack.server.config.js
+++ b/webpack.server.config.js
@@ -25,9 +25,10 @@ const voltranServerConfigPath = voltranConfig.webpackConfiguration.server;
 const voltranServerConfig = voltranServerConfigPath
   ? require(voltranConfig.webpackConfiguration.server)
   : '';
-const voltranServer = voltranConfig.entry
-  ? voltranConfig.entry
-  : path.resolve(__dirname, isDebug ? 'src/server.js' : 'src/main.js');
+const voltranServer =
+  voltranConfig.entry && !isDebug
+    ? voltranConfig.entry
+    : path.resolve(__dirname, isDebug ? 'src/server.js' : 'src/main.js');
 
 const serverConfig = webpackMerge(commonConfig, voltranServerConfig, {
   name: 'server',

From 049bd52d32de9c66967c923ce28aa927d759300c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cihan=20SEL=C4=B0M?= <cihan.selim@hepsiburada.com>
Date: Wed, 12 Jan 2022 17:05:23 +0300
Subject: [PATCH 08/20] ADD console to webpack server

---
 webpack.server.config.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/webpack.server.config.js b/webpack.server.config.js
index ce0973e..97fae86 100644
--- a/webpack.server.config.js
+++ b/webpack.server.config.js
@@ -5,6 +5,8 @@ const nodeExternals = require('webpack-node-externals');
 
 const env = process.env.VOLTRAN_ENV || 'local';
 
+console.log('::VOLTRAN WP SERVER: ', env);
+
 const voltranConfig = require('./voltran.config');
 
 const appConfigFilePath = `${voltranConfig.appConfigFile.entry}/${env}.conf.js`;

From f6a2827a5716fe0191793f7d7a3536d28054e550 Mon Sep 17 00:00:00 2001
From: ahmetkuslular <ahmet.kuslular@hepsiburada.com>
Date: Fri, 4 Feb 2022 14:57:31 +0300
Subject: [PATCH 09/20] ADD server side data functions and response setter

---
 config/string.js                              |  5 +
 package.json                                  |  1 +
 src/index.js                                  |  9 +-
 src/renderMultiple.js                         | 57 +++++++++--
 src/universal/core/api/index.js               |  2 +
 src/universal/model/Renderer.js               | 35 ++++---
 src/universal/partials/Welcome/PartialList.js | 26 +++--
 src/universal/partials/Welcome/partials.js    |  3 +
 src/universal/partials/Welcome/styled.js      | 39 ++++++--
 src/universal/service/RenderService.js        | 47 +++------
 src/universal/service/getStates.js            | 96 +++++++++++++++++++
 src/universal/utils/logger.js                 |  7 +-
 12 files changed, 251 insertions(+), 76 deletions(-)
 create mode 100644 src/universal/core/api/index.js
 create mode 100644 src/universal/service/getStates.js

diff --git a/config/string.js b/config/string.js
index ffe091e..defe320 100644
--- a/config/string.js
+++ b/config/string.js
@@ -36,6 +36,11 @@ function replaceString() {
       replace: normalizeUrl(voltranConfig.routing.requestConfigs),
       flags: 'g'
     },
+    {
+      search: '__V_PREVIEW_PAGES__',
+      replace: normalizeUrl(voltranConfig.routing.previewPages),
+      flags: 'g'
+    },
     {
       search: '@voltran/core',
       replace: normalizeUrl(path.resolve(__dirname, '../src/index')),
diff --git a/package.json b/package.json
index b09df9b..671af7e 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "classnames": "2.2.6",
     "clean-webpack-plugin": "1.0.0",
     "cli-color": "^2.0.0",
+    "colors": "^1.4.0",
     "compose-middleware": "5.0.0",
     "compression": "^1.7.4",
     "cookie-parser": "1.4.3",
diff --git a/src/index.js b/src/index.js
index d534a79..d217a12 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,6 @@
-import withBaseComponent from './universal/partials/withBaseComponent';
+import voltran from './universal/partials/withBaseComponent';
 import { SERVICES } from './universal/utils/constants';
+import { ClientApiManager, ServerApiManager } from './universal/core/api';
 
-export default {
-  withBaseComponent,
-  SERVICES
-};
+export default voltran;
+export { SERVICES, ClientApiManager, ServerApiManager };
diff --git a/src/renderMultiple.js b/src/renderMultiple.js
index 01cb05f..c821dc0 100644
--- a/src/renderMultiple.js
+++ b/src/renderMultiple.js
@@ -4,11 +4,31 @@ import { matchUrlInRouteConfigs } from './universal/core/route/routeUtils';
 import Component from './universal/model/Component';
 import Renderer from './universal/model/Renderer';
 import Preview from './universal/components/Preview';
-import { isRequestDispatcher, isPreview, isWithoutHTML } from './universal/service/RenderService';
+import {
+  isRequestDispatcher,
+  isPreview,
+  isWithoutHTML,
+  isWithoutState,
+  getPreviewLayout
+} from './universal/service/RenderService';
 import metrics from './metrics';
 import { HTTP_STATUS_CODES } from './universal/utils/constants';
 import logger from './universal/utils/logger';
 
+const previewPages = require('__V_PREVIEW_PAGES__');
+
+const getRenderOptions = req => {
+  const isPreviewValue = isPreview(req.query) || false;
+  const isWithoutHTMLValue = isWithoutHTML(req.query) || false;
+  const isWithoutStateValue = isWithoutState(req.query) || false;
+
+  return {
+    isPreview: isPreviewValue,
+    isWithoutHTML: isWithoutHTMLValue,
+    isWithoutState: isWithoutStateValue
+  };
+};
+
 function getRenderer(name, req) {
   const { query, cookies, url, headers, params } = req;
   const path = `/${params?.path || ''}`;
@@ -16,6 +36,7 @@ function getRenderer(name, req) {
 
   const componentPath = Component.getComponentPath(name);
   const routeInfo = matchUrlInRouteConfigs(componentPath);
+  const renderOptions = getRenderOptions(req);
 
   if (routeInfo) {
     const urlWithPath = url.replace('/', path);
@@ -26,6 +47,7 @@ function getRenderer(name, req) {
       cookies,
       url: urlWithPath,
       userAgent,
+      ...renderOptions
     };
 
     if (Component.isExist(componentPath)) {
@@ -177,11 +199,21 @@ async function getResponses(renderers) {
   return responses;
 }
 
-async function getPreview(responses, requestCount) {
-  return Preview(
-    [...Object.keys(responses).map(name => responses[name].fullHtml)].join('\n'),
-    `${requestCount} request!`
-  );
+async function getPreview(responses, requestCount, req) {
+  const layoutName = getPreviewLayout(req.query);
+  const { layouts } = previewPages.default;
+  let PreviewFile = Preview;
+
+  if (layouts[layoutName]) {
+    PreviewFile = layouts[layoutName];
+  }
+
+  const content = Object.keys(responses).map(name => {
+    const componentName = responses?.[name]?.activeComponent?.componentName ?? '';
+    return getLayoutWithClass(componentName, responses[name].fullHtml);
+  });
+
+  return PreviewFile([...content].join('\n'), `${requestCount} request!`);
 }
 
 const DEFAULT_PARTIALS = ['RequestDispatcher'];
@@ -199,6 +231,17 @@ export const getPartials = req => {
   return partials;
 };
 
+function cr(condition, ok, cancel) {
+  return condition ? ok : cancel || '';
+}
+
+const getLayoutWithClass = (name, html, id = '', style = null) => {
+  const idAttr = cr(id !== '', `id=${id}`);
+  const styleAttr = cr(style !== null, `style=${style}`);
+
+  return `<div class="${name}"  ${idAttr} ${styleAttr}>${html}</div>`;
+};
+
 const renderMultiple = async (req, res) => {
   const partials = getPartials(req);
 
@@ -228,7 +271,7 @@ const renderMultiple = async (req, res) => {
   const responses = await getResponses(renderers);
 
   if (isPreview(req.query)) {
-    const preview = await getPreview(responses, requestCount);
+    const preview = await getPreview(responses, requestCount, req);
     res.html(preview);
   } else {
     res.json(responses);
diff --git a/src/universal/core/api/index.js b/src/universal/core/api/index.js
new file mode 100644
index 0000000..2990a60
--- /dev/null
+++ b/src/universal/core/api/index.js
@@ -0,0 +1,2 @@
+export { default as ClientApiManager } from './ClientApiManagerCache';
+export { default as ServerApiManager } from './ServerApiManagerCache';
diff --git a/src/universal/model/Renderer.js b/src/universal/model/Renderer.js
index 4bfcc2e..1809867 100644
--- a/src/universal/model/Renderer.js
+++ b/src/universal/model/Renderer.js
@@ -1,6 +1,13 @@
-import ServerApiManagerCache from '../core/api/ServerApiManagerCache';
+import omit from 'lodash/omit';
 import { isPreview, renderComponent, renderLinksAndScripts } from '../service/RenderService';
 
+const blacklistOutput = [
+  'componentName',
+  'fullWidth',
+  'isMobileComponent',
+  'isPreviewQuery',
+  'responseOptions'
+];
 export default class Renderer {
   constructor(component, context) {
     this.component = component;
@@ -13,44 +20,42 @@ export default class Renderer {
       this.isPredefinedInitialStateSupported() &&
       (process.env.BROWSER || (!process.env.BROWSER && !this.context.isWithoutState))
     ) {
-      this.servicesMap = this.getServicesMap();
+      this.servicesMap = this.getServicesWithMultiple();
       this.winnerMap = {};
     }
   }
 
   setInitialState(prepareInitialStateArgs) {
     this.initialState = {
-      data: this.component.object.prepareInitialState(...prepareInitialStateArgs)
+      data: this.component.object.getInitialStateWithMultiple(...prepareInitialStateArgs)
     };
   }
 
   isPredefinedInitialStateSupported() {
-    return this.component.object.getServicesMap && this.component.object.prepareInitialState;
-  }
-
-  getServicesMap() {
-    const services = this.component.object.services.map(
-      serviceName => ServerApiManagerCache[serviceName]
+    return (
+      this.component.object.getServicesWithMultiple &&
+      this.component.object.getInitialStateWithMultiple
     );
+  }
 
-    const params = [...services, this.context];
-    return this.component.object.getServicesMap(...params);
+  getServicesWithMultiple() {
+    const options = { isServer: false };
+    return this.component.object.getServicesWithMultiple(this.context, options);
   }
 
   render() {
     return new Promise(resolve => {
       renderComponent(this.component, this.context, this.initialState).then(response => {
-        const { output, links, scripts, activeComponent, seoState, fullHtml } = response;
+        const { output, links, fullHtml, ...rest } = response;
+        const otherParams = omit(rest, blacklistOutput);
         const html = renderLinksAndScripts(output, '', '');
 
         resolve({
           key: this.component.name,
           value: {
             html,
-            scripts,
             style: links,
-            activeComponent,
-            seoState,
+            ...otherParams,
             ...(isPreview(this.context?.query) && { fullHtml })
           },
           id: this.component.id
diff --git a/src/universal/partials/Welcome/PartialList.js b/src/universal/partials/Welcome/PartialList.js
index e225d26..b406108 100644
--- a/src/universal/partials/Welcome/PartialList.js
+++ b/src/universal/partials/Welcome/PartialList.js
@@ -12,7 +12,7 @@ const Welcome = () => {
   const { live = [], dev = [], page = [] } = groupBy(partials, item => item.status);
 
   const renderItem = item => (
-    <ListItem>
+    <ListItem status={item.status}>
       <Link href={item.previewUrl ? item.previewUrl : `${item.url}?preview`} target="_blank">
         <Name>{item.name}</Name>
         <Url>{item.url}</Url>
@@ -26,12 +26,24 @@ const Welcome = () => {
   );
   return (
     <List>
-      <HeaderName>Live</HeaderName>
-      {live.map(item => renderItem(item))}
-      <HeaderName>Pages</HeaderName>
-      {page.map(item => renderItem(item))}
-      <HeaderName>Development</HeaderName>
-      {dev.map(item => renderItem(item))}
+      {live.length > 0 && (
+        <>
+          <HeaderName>Live</HeaderName>
+          {live.map(item => renderItem(item))}
+        </>
+      )}
+      {page.length > 0 && (
+        <>
+          <HeaderName>Pages</HeaderName>
+          {page.map(item => renderItem(item))}
+        </>
+      )}
+      {dev.length > 0 && (
+        <>
+          <HeaderName>Development</HeaderName>
+          {dev.map(item => renderItem(item))}
+        </>
+      )}
     </List>
   );
 };
diff --git a/src/universal/partials/Welcome/partials.js b/src/universal/partials/Welcome/partials.js
index de47701..0e648ee 100644
--- a/src/universal/partials/Welcome/partials.js
+++ b/src/universal/partials/Welcome/partials.js
@@ -1,5 +1,7 @@
 import components from '../../core/route/components';
 
+const previewPages = require('__V_PREVIEW_PAGES__');
+
 const partials = [];
 
 Object.keys(components).forEach(path => {
@@ -10,5 +12,6 @@ Object.keys(components).forEach(path => {
     status: info.status
   });
 });
+partials.push(...previewPages.default.pages);
 
 export default partials;
diff --git a/src/universal/partials/Welcome/styled.js b/src/universal/partials/Welcome/styled.js
index 0e16937..020e4c9 100644
--- a/src/universal/partials/Welcome/styled.js
+++ b/src/universal/partials/Welcome/styled.js
@@ -2,12 +2,15 @@ import styled from 'styled-components';
 
 const STATUS_COLOR = {
   live: '#8dc63f',
-  dev: '#FF6000'
+  dev: '#FF6000',
+  page: '#00abff'
 };
+
 export const List = styled.ul`
   list-style: none;
   margin: 0;
   padding: 0;
+  margin-bottom: 20px;
 `;
 
 export const HeaderName = styled.div`
@@ -18,19 +21,41 @@ export const HeaderName = styled.div`
 
 export const ListItem = styled.li`
   padding: 20px;
-  border-radius: 2px;
-  background: white;
-  box-shadow: 0 2px 1px rgba(170, 170, 170, 0.25);
-  position: relative;
   display: inline-block;
   vertical-align: top;
   height: 120px;
   width: 320px;
   margin: 10px;
   cursor: pointer;
+  border-radius: 20px;
+  border: 1px solid ${({ status }) => (status && STATUS_COLOR[status]) || '#8dc63f'};
+
+  position: relative;
+  background-color: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+
+  :after {
+    content: '';
+    border-radius: 20px;
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+    opacity: 0;
+    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+  }
 
   &:hover {
-    background: #efefef;
+    transform: scale(1.02, 1.02);
+    :after {
+      opacity: 1;
+    }
   }
 
   @media screen and (max-width: 600px) {
@@ -58,7 +83,7 @@ export const Link = styled.a`
 `;
 
 export const Name = styled.span`
-  font-weight: 400;
+  font-weight: 800;
   display: block;
   max-width: 80%;
   font-size: 16px;
diff --git a/src/universal/service/RenderService.js b/src/universal/service/RenderService.js
index 15d8391..0303b21 100644
--- a/src/universal/service/RenderService.js
+++ b/src/universal/service/RenderService.js
@@ -2,42 +2,13 @@ import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { ServerStyleSheet } from 'styled-components';
 import { StaticRouter } from 'react-router';
+
 import ConnectedApp from '../components/App';
 import Html from '../components/Html';
 import PureHtml, { generateLinks, generateScripts } from '../components/PureHtml';
-import ServerApiManagerCache from '../core/api/ServerApiManagerCache';
 import createBaseRenderHtmlProps from '../utils/baseRenderHtml';
 import { guid } from '../utils/helper';
-
-const getStates = async (component, context, predefinedInitialState) => {
-  const initialState = predefinedInitialState || { data: {} };
-  let subComponentFiles = [];
-  let seoState = {};
-  let responseOptions = {};
-
-  if (context.isWithoutState) {
-    return { initialState, seoState, subComponentFiles, responseOptions };
-  }
-
-  if (!predefinedInitialState && component?.getInitialState) {
-    const services = component.services.map(serviceName => ServerApiManagerCache[serviceName]);
-    initialState.data = await component.getInitialState(...[...services, context]);
-  }
-
-  if (component?.getSeoState) {
-    seoState = component.getSeoState(initialState.data);
-  }
-
-  if (initialState.data.subComponentFiles) {
-    subComponentFiles = initialState.data.subComponentFiles;
-  }
-
-  if (initialState.data.responseOptions) {
-    responseOptions = initialState.data.responseOptions;
-  }
-
-  return { initialState, seoState, subComponentFiles, responseOptions };
-};
+import getStates from './getStates';
 
 const renderLinksAndScripts = (html, links, scripts) => {
   return html
@@ -86,6 +57,14 @@ const isPreview = query => {
   return query.preview === '';
 };
 
+const getPreviewLayout = query => {
+  if (query?.previewLayout) {
+    return query?.previewLayout;
+  }
+
+  return '';
+};
+
 const isWithoutState = query => {
   return query.withoutState === '';
 };
@@ -95,7 +74,7 @@ const isRequestDispatcher = query => {
 };
 
 const renderComponent = async (component, context, predefinedInitialState = null) => {
-  const { initialState, seoState, subComponentFiles, responseOptions } = await getStates(
+  const { initialState, subComponentFiles, ...restStates } = await getStates(
     component.object,
     context,
     predefinedInitialState
@@ -116,11 +95,10 @@ const renderComponent = async (component, context, predefinedInitialState = null
     scripts,
     activeComponent,
     componentName: component.name,
-    seoState,
     fullWidth: component.fullWidth,
     isMobileComponent: component.isMobileComponent,
     isPreviewQuery: component.isPreviewQuery,
-    responseOptions
+    ...restStates
   };
 };
 
@@ -130,6 +108,7 @@ export {
   getStates,
   isWithoutHTML,
   isPreview,
+  getPreviewLayout,
   isRequestDispatcher,
   isWithoutState,
   renderComponent
diff --git a/src/universal/service/getStates.js b/src/universal/service/getStates.js
new file mode 100644
index 0000000..f1297d4
--- /dev/null
+++ b/src/universal/service/getStates.js
@@ -0,0 +1,96 @@
+import omit from 'lodash/omit';
+import camelCase from 'lodash/camelCase';
+
+const blacklistFunctionName = [
+  'getServerSideProps',
+  'getServicesWithMultiple',
+  'getInitialStateWithMultiple',
+  'setDependencies',
+  'setSeoState',
+  'setRedirection',
+  'setPageData'
+];
+
+const getCustomSetters = (component, context, data) => {
+  const pattern = new RegExp(`^set`);
+  const functions = omit(component, blacklistFunctionName);
+  let result = {};
+
+  Object.entries(functions).forEach(entity => {
+    const [name, method] = entity;
+    const isValidName = pattern.test(name);
+    if (isValidName) {
+      const propertyName = camelCase(name.replace(pattern, ''));
+      let value = null;
+      if (typeof method === 'function') {
+        value = method(context, data);
+      } else {
+        value = method;
+      }
+
+      if (value) {
+        result = {
+          ...result,
+          [propertyName]: value
+        };
+      }
+    }
+  });
+
+  return result;
+};
+
+const getStates = async (component, context, predefinedInitialState) => {
+  const initialState = predefinedInitialState || { data: {} };
+  let subComponentFiles = [];
+  let seoState = {};
+  let responseOptions = {};
+  let dependencies = [];
+  let redirection = null;
+
+  if (component.setDependencies) {
+    dependencies = component.setDependencies(context);
+  }
+
+  if (context.isWithoutState) {
+    return { initialState, seoState, dependencies, subComponentFiles, responseOptions };
+  }
+
+  if (!predefinedInitialState && component.getServerSideProps) {
+    initialState.data = await component.getServerSideProps(context);
+  }
+
+  if (component?.setSeoState) {
+    seoState = component.setSeoState(initialState?.data) || {};
+  }
+
+  if (initialState?.data?.subComponentFiles) {
+    subComponentFiles = initialState?.data?.subComponentFiles || [];
+  }
+
+  if (initialState?.data?.responseOptions) {
+    responseOptions = initialState?.data?.responseOptions || {};
+  }
+
+  if (component.setRedirection) {
+    redirection = component.setRedirection(context, initialState.data);
+  }
+
+  if (component.setPageData) {
+    redirection = component.setPageData(context, initialState.data);
+  }
+
+  const setters = getCustomSetters(component, context, initialState.data);
+
+  return {
+    initialState,
+    seoState,
+    subComponentFiles,
+    responseOptions,
+    dependencies,
+    redirection,
+    ...setters
+  };
+};
+
+export default getStates;
diff --git a/src/universal/utils/logger.js b/src/universal/utils/logger.js
index 06b36ef..cd4878f 100644
--- a/src/universal/utils/logger.js
+++ b/src/universal/utils/logger.js
@@ -2,6 +2,7 @@
 const application = 'voltran';
 const currentThread = 'event-loop';
 const sourceContext = 'app';
+const colors = require('colors');
 
 const logger = {
   formatter(level, message) {
@@ -13,7 +14,7 @@ const logger = {
       return;
     }
 
-    console.log(this.formatter('INFO', message));
+    console.log(colors.blue(this.formatter('INFO', message)));
   },
 
   error(message) {
@@ -24,6 +25,10 @@ const logger = {
     console.error(this.formatter('ERROR', message));
   },
 
+  warning(message) {
+    console.warn(colors.yellow(message));
+  },
+
   exception(exception, stack = true, requestPath = null) {
     if (process.env.BROWSER && process.env.VOLTRAN_ENV === 'prod') {
       return;

From 6482ec924eabaded4349e7e44470d80e01f196e9 Mon Sep 17 00:00:00 2001
From: ahmetkuslular <ahmet.kuslular@hepsiburada.com>
Date: Fri, 4 Feb 2022 18:07:50 +0300
Subject: [PATCH 10/20] FIX code review issues

---
 config/emptyModule.js                         |  1 +
 config/string.js                              |  8 +-
 jest.config.js                                |  7 +-
 lib/os.js                                     | 12 ++-
 src/render.js                                 | 11 +--
 src/renderMultiple.js                         |  2 +-
 .../RequestDispatcher/RequestDispatcher.js    |  2 +-
 src/universal/model/Renderer.js               | 10 +--
 src/universal/partials/Welcome/PartialList.js |  2 +-
 src/universal/partials/Welcome/partials.js    | 17 +++--
 src/universal/partials/Welcome/styled.js      | 11 ++-
 src/universal/service/RenderService.js        | 11 ++-
 src/universal/service/getStates.js            | 73 +++----------------
 src/universal/utils/constants.js              | 11 ++-
 14 files changed, 74 insertions(+), 104 deletions(-)
 create mode 100644 config/emptyModule.js

diff --git a/config/emptyModule.js b/config/emptyModule.js
new file mode 100644
index 0000000..f053ebf
--- /dev/null
+++ b/config/emptyModule.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/config/string.js b/config/string.js
index defe320..52003d6 100644
--- a/config/string.js
+++ b/config/string.js
@@ -33,12 +33,16 @@ function replaceString() {
     },
     {
       search: '__V_REQUEST_CONFIGS__',
-      replace: normalizeUrl(voltranConfig.routing.requestConfigs),
+      replace: normalizeUrl(
+        voltranConfig.routing.requestConfigs || path.resolve(__dirname, './emptyModule.js')
+      ),
       flags: 'g'
     },
     {
       search: '__V_PREVIEW_PAGES__',
-      replace: normalizeUrl(voltranConfig.routing.previewPages),
+      replace: normalizeUrl(
+        voltranConfig.routing.previewPages || path.resolve(__dirname, './emptyModule.js')
+      ),
       flags: 'g'
     },
     {
diff --git a/jest.config.js b/jest.config.js
index 19e22c1..57b22a3 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,5 +1,3 @@
-// Jest configuration
-// https://facebook.github.io/jest/docs/en/configuration.html
 module.exports = {
   verbose: true,
   automock: false,
@@ -11,6 +9,11 @@ module.exports = {
     '!src/public/**',
     '!src/tools/**'
   ],
+  env: {
+    production: {
+      plugins: ['transform-es2015-modules-commonjs']
+    }
+  },
   coverageDirectory: '<rootDir>/coverage',
   globals: {
     window: true,
diff --git a/lib/os.js b/lib/os.js
index 96b8a48..d23b3d4 100644
--- a/lib/os.js
+++ b/lib/os.js
@@ -1,9 +1,13 @@
 const path = require('path');
 
 function normalizeUrl(url) {
-	const urlArray = url.split(path.sep);
-	
-  return urlArray.join('/');
+  if (url) {
+    const urlArray = url?.split(path.sep);
+
+    return urlArray.join('/');
+  }
+
+  return '';
 }
 
-module.exports = normalizeUrl;
\ No newline at end of file
+module.exports = normalizeUrl;
diff --git a/src/render.js b/src/render.js
index 4bf7c8b..4b75aef 100644
--- a/src/render.js
+++ b/src/render.js
@@ -2,7 +2,7 @@ import xss from 'xss';
 
 import { matchUrlInRouteConfigs } from './universal/core/route/routeUtils';
 import Preview from './universal/components/Preview';
-import { HTTP_STATUS_CODES } from './universal/utils/constants';
+import { BLACKLIST_OUTPUT, HTTP_STATUS_CODES } from './universal/utils/constants';
 import metrics from './metrics';
 import {
   renderComponent,
@@ -13,6 +13,7 @@ import {
 } from './universal/service/RenderService';
 import Component from './universal/model/Component';
 import logger from './universal/utils/logger';
+import omit from 'lodash/omit';
 
 const appConfig = require('__APP_CONFIG__');
 
@@ -60,9 +61,9 @@ const render = async (req, res) => {
       scripts,
       activeComponent,
       componentName,
-      seoState,
       isPreviewQuery,
-      responseOptions
+      responseOptions,
+      ...responseData
     } = renderResponse;
 
     const statusCode = responseOptions?.isPartialContent
@@ -71,8 +72,8 @@ const render = async (req, res) => {
 
     if (!isPreview(context.query)) {
       const html = renderLinksAndScripts(output, '', '');
-
-      res.status(statusCode).json({ html, scripts, style: links, activeComponent, seoState });
+      const otherParams = omit(responseData, BLACKLIST_OUTPUT);
+      res.status(statusCode).json({ html, scripts, style: links, activeComponent, ...otherParams });
 
       metrics.fragmentRequestDurationMicroseconds
         .labels(componentName, isWithoutHTML(context.query) ? '1' : '0')
diff --git a/src/renderMultiple.js b/src/renderMultiple.js
index c821dc0..9e4f758 100644
--- a/src/renderMultiple.js
+++ b/src/renderMultiple.js
@@ -201,7 +201,7 @@ async function getResponses(renderers) {
 
 async function getPreview(responses, requestCount, req) {
   const layoutName = getPreviewLayout(req.query);
-  const { layouts } = previewPages.default;
+  const { layouts = {} } = previewPages?.default || {};
   let PreviewFile = Preview;
 
   if (layouts[layoutName]) {
diff --git a/src/universal/components/RequestDispatcher/RequestDispatcher.js b/src/universal/components/RequestDispatcher/RequestDispatcher.js
index 57cae83..7a8c395 100644
--- a/src/universal/components/RequestDispatcher/RequestDispatcher.js
+++ b/src/universal/components/RequestDispatcher/RequestDispatcher.js
@@ -6,7 +6,7 @@ import { isExitCondition } from './RequestDispatcher.utils';
 
 const requestConfigs = require('__V_REQUEST_CONFIGS__');
 
-const { effects = [] } = requestConfigs.default;
+const { effects = [] } = requestConfigs?.default || {};
 const requestPrefix = 'RequestDispatcher.';
 const responsePrefix = 'RequestDispatcher.Response.';
 
diff --git a/src/universal/model/Renderer.js b/src/universal/model/Renderer.js
index 1809867..731737e 100644
--- a/src/universal/model/Renderer.js
+++ b/src/universal/model/Renderer.js
@@ -1,13 +1,7 @@
 import omit from 'lodash/omit';
 import { isPreview, renderComponent, renderLinksAndScripts } from '../service/RenderService';
+import { BLACKLIST_OUTPUT } from '../utils/constants';
 
-const blacklistOutput = [
-  'componentName',
-  'fullWidth',
-  'isMobileComponent',
-  'isPreviewQuery',
-  'responseOptions'
-];
 export default class Renderer {
   constructor(component, context) {
     this.component = component;
@@ -47,7 +41,7 @@ export default class Renderer {
     return new Promise(resolve => {
       renderComponent(this.component, this.context, this.initialState).then(response => {
         const { output, links, fullHtml, ...rest } = response;
-        const otherParams = omit(rest, blacklistOutput);
+        const otherParams = omit(rest, BLACKLIST_OUTPUT);
         const html = renderLinksAndScripts(output, '', '');
 
         resolve({
diff --git a/src/universal/partials/Welcome/PartialList.js b/src/universal/partials/Welcome/PartialList.js
index b406108..f227c18 100644
--- a/src/universal/partials/Welcome/PartialList.js
+++ b/src/universal/partials/Welcome/PartialList.js
@@ -16,7 +16,7 @@ const Welcome = () => {
       <Link href={item.previewUrl ? item.previewUrl : `${item.url}?preview`} target="_blank">
         <Name>{item.name}</Name>
         <Url>{item.url}</Url>
-        <Footer>
+        <Footer status={item.status}>
           <Label status={item.status}>
             {item.status} <Dot status={item.status} />
           </Label>
diff --git a/src/universal/partials/Welcome/partials.js b/src/universal/partials/Welcome/partials.js
index 0e648ee..5bb1499 100644
--- a/src/universal/partials/Welcome/partials.js
+++ b/src/universal/partials/Welcome/partials.js
@@ -3,15 +3,18 @@ import components from '../../core/route/components';
 const previewPages = require('__V_PREVIEW_PAGES__');
 
 const partials = [];
-
+const BLACKLIST = ['REQUEST_DISPATCHER'];
 Object.keys(components).forEach(path => {
   const info = components[path];
-  partials.push({
-    name: info.fragmentName,
-    url: path,
-    status: info.status
-  });
+  if (!BLACKLIST.includes(info.name)) {
+    partials.push({
+      name: info.fragmentName,
+      url: path,
+      status: info.status
+    });
+  }
 });
-partials.push(...previewPages.default.pages);
+const pages = previewPages?.default?.pages || [];
+partials.push(...pages);
 
 export default partials;
diff --git a/src/universal/partials/Welcome/styled.js b/src/universal/partials/Welcome/styled.js
index 020e4c9..423fa3c 100644
--- a/src/universal/partials/Welcome/styled.js
+++ b/src/universal/partials/Welcome/styled.js
@@ -24,11 +24,10 @@ export const ListItem = styled.li`
   display: inline-block;
   vertical-align: top;
   height: 120px;
-  width: 320px;
+  width: 240px;
   margin: 10px;
   cursor: pointer;
-  border-radius: 20px;
-  border: 1px solid ${({ status }) => (status && STATUS_COLOR[status]) || '#8dc63f'};
+  border-radius: 10px;
 
   position: relative;
   background-color: #fff;
@@ -38,14 +37,14 @@ export const ListItem = styled.li`
 
   :after {
     content: '';
-    border-radius: 20px;
+    border-radius: 10px;
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     opacity: 0;
     -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
     transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
@@ -104,7 +103,7 @@ export const Footer = styled.span`
   right: 0;
   width: 100%;
   padding: 20px;
-  border-top: 1px solid #eee;
+  border-top: 1px solid ${({ status }) => (status && STATUS_COLOR[status]) || '#eeeeee'}50;
   font-size: 13px;
 `;
 
diff --git a/src/universal/service/RenderService.js b/src/universal/service/RenderService.js
index 0303b21..5bd9a48 100644
--- a/src/universal/service/RenderService.js
+++ b/src/universal/service/RenderService.js
@@ -54,12 +54,15 @@ const isWithoutHTML = query => {
 };
 
 const isPreview = query => {
-  return query.preview === '';
+  if (query.preview || query.preview === '') {
+    return true;
+  }
+  return false;
 };
 
 const getPreviewLayout = query => {
-  if (query?.previewLayout) {
-    return query?.previewLayout;
+  if (isPreview(query)) {
+    return query?.preview;
   }
 
   return '';
@@ -70,7 +73,7 @@ const isWithoutState = query => {
 };
 
 const isRequestDispatcher = query => {
-  return query.requestDispathcer === '' || query.requestDispathcer !== 'false';
+  return query.requestDispatcher === '' || query.requestDispatcher !== 'false';
 };
 
 const renderComponent = async (component, context, predefinedInitialState = null) => {
diff --git a/src/universal/service/getStates.js b/src/universal/service/getStates.js
index f1297d4..3c01b41 100644
--- a/src/universal/service/getStates.js
+++ b/src/universal/service/getStates.js
@@ -1,41 +1,13 @@
-import omit from 'lodash/omit';
-import camelCase from 'lodash/camelCase';
-
-const blacklistFunctionName = [
-  'getServerSideProps',
-  'getServicesWithMultiple',
-  'getInitialStateWithMultiple',
-  'setDependencies',
-  'setSeoState',
-  'setRedirection',
-  'setPageData'
-];
-
-const getCustomSetters = (component, context, data) => {
-  const pattern = new RegExp(`^set`);
-  const functions = omit(component, blacklistFunctionName);
+const getResponseData = (component, context, data) => {
   let result = {};
 
-  Object.entries(functions).forEach(entity => {
-    const [name, method] = entity;
-    const isValidName = pattern.test(name);
-    if (isValidName) {
-      const propertyName = camelCase(name.replace(pattern, ''));
-      let value = null;
-      if (typeof method === 'function') {
-        value = method(context, data);
-      } else {
-        value = method;
-      }
-
-      if (value) {
-        result = {
-          ...result,
-          [propertyName]: value
-        };
-      }
+  if (component?.setResponseData) {
+    if (typeof component.setResponseData === 'function') {
+      result = component.setResponseData(context, data);
+    } else {
+      result = component.setResponseData;
     }
-  });
+  }
 
   return result;
 };
@@ -43,27 +15,17 @@ const getCustomSetters = (component, context, data) => {
 const getStates = async (component, context, predefinedInitialState) => {
   const initialState = predefinedInitialState || { data: {} };
   let subComponentFiles = [];
-  let seoState = {};
   let responseOptions = {};
-  let dependencies = [];
-  let redirection = null;
-
-  if (component.setDependencies) {
-    dependencies = component.setDependencies(context);
-  }
+  const responseData = getResponseData(component, context, initialState.data);
 
   if (context.isWithoutState) {
-    return { initialState, seoState, dependencies, subComponentFiles, responseOptions };
+    return { initialState, subComponentFiles, responseOptions, ...responseData };
   }
 
-  if (!predefinedInitialState && component.getServerSideProps) {
+  if (!predefinedInitialState && component?.getServerSideProps) {
     initialState.data = await component.getServerSideProps(context);
   }
 
-  if (component?.setSeoState) {
-    seoState = component.setSeoState(initialState?.data) || {};
-  }
-
   if (initialState?.data?.subComponentFiles) {
     subComponentFiles = initialState?.data?.subComponentFiles || [];
   }
@@ -72,24 +34,11 @@ const getStates = async (component, context, predefinedInitialState) => {
     responseOptions = initialState?.data?.responseOptions || {};
   }
 
-  if (component.setRedirection) {
-    redirection = component.setRedirection(context, initialState.data);
-  }
-
-  if (component.setPageData) {
-    redirection = component.setPageData(context, initialState.data);
-  }
-
-  const setters = getCustomSetters(component, context, initialState.data);
-
   return {
     initialState,
-    seoState,
     subComponentFiles,
     responseOptions,
-    dependencies,
-    redirection,
-    ...setters
+    ...responseData
   };
 };
 
diff --git a/src/universal/utils/constants.js b/src/universal/utils/constants.js
index 909bda4..a119311 100644
--- a/src/universal/utils/constants.js
+++ b/src/universal/utils/constants.js
@@ -25,11 +25,20 @@ const SERVICES = Object.freeze(
   }, {})
 );
 
+const BLACKLIST_OUTPUT = [
+  'componentName',
+  'fullWidth',
+  'isMobileComponent',
+  'isPreviewQuery',
+  'responseOptions'
+];
+
 export {
   HTTP_STATUS_CODES,
   WINDOW_GLOBAL_PARAMS,
   JSON_CONTENT_TYPE,
   CONTENT_TYPE_HEADER,
   REQUEST_TYPES_WITH_BODY,
-  SERVICES
+  SERVICES,
+  BLACKLIST_OUTPUT
 };

From e33858da03436f02125db8e668ba10522888f656 Mon Sep 17 00:00:00 2001
From: ahmetkuslular <ahmet.kuslular@hepsiburada.com>
Date: Wed, 2 Mar 2022 02:02:57 +0300
Subject: [PATCH 11/20] ADD History service

---
 package.json                                |  1 +
 src/render.js                               | 20 ++++++-
 src/renderMultiple.js                       | 10 ++--
 src/universal/partials/Welcome/partials.js  |  2 +-
 src/universal/partials/withBaseComponent.js | 14 ++++-
 src/universal/service/HistoryService.js     | 60 +++++++++++++++++++++
 src/universal/utils/constants.js            |  4 +-
 7 files changed, 102 insertions(+), 9 deletions(-)
 create mode 100644 src/universal/service/HistoryService.js

diff --git a/package.json b/package.json
index 671af7e..3fb19b1 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
     "file-loader": "1.1.11",
     "helmet": "3.21.3",
     "hiddie": "^1.0.0",
+    "history": "^5.3.0",
     "husky": "^3.1.0",
     "identity-obj-proxy": "3.0.0",
     "intersection-observer": "0.7.0",
diff --git a/src/render.js b/src/render.js
index 4b75aef..f7e6cc6 100644
--- a/src/render.js
+++ b/src/render.js
@@ -16,6 +16,19 @@ import logger from './universal/utils/logger';
 import omit from 'lodash/omit';
 
 const appConfig = require('__APP_CONFIG__');
+const previewPages = require('__V_PREVIEW_PAGES__');
+
+function getPreview(output) {
+  const { layouts = {} } = previewPages?.default || {};
+  let PreviewFile = Preview;
+
+  console.log('layouts:', layouts);
+  if (layouts.default) {
+    PreviewFile = layouts.default;
+  }
+
+  return PreviewFile(output);
+}
 
 const render = async (req, res) => {
   const isWithoutStateValue = isWithoutState(req.query);
@@ -23,6 +36,7 @@ const render = async (req, res) => {
     .split('/')
     .filter(part => part);
   const componentPath = `/${pathParts.join('/')}`;
+  const isPreviewValue = isPreview(req.query);
 
   const routeInfo = matchUrlInRouteConfigs(componentPath);
 
@@ -38,7 +52,8 @@ const render = async (req, res) => {
         .replace('//', '/'),
       userAgent: Buffer.from(req.headers['user-agent'] || [], 'utf-8').toString('base64'),
       headers: JSON.parse(xss(JSON.stringify(req.headers))),
-      isWithoutState: isWithoutStateValue
+      isWithoutState: isWithoutStateValue,
+      isPreview: isPreviewValue
     };
 
     const component = new Component(routeInfo.path);
@@ -82,7 +97,8 @@ const render = async (req, res) => {
       const voltranEnv = appConfig.voltranEnv || 'local';
 
       if (voltranEnv !== 'prod' && isPreviewQuery) {
-        res.status(statusCode).html(Preview([fullHtml].join('\n')));
+        const response = getPreview([fullHtml].join('\n'));
+        res.status(statusCode).html(response);
       } else {
         res
           .status(HTTP_STATUS_CODES.INTERNAL_SERVER_ERROR)
diff --git a/src/renderMultiple.js b/src/renderMultiple.js
index 9e4f758..9ab45a6 100644
--- a/src/renderMultiple.js
+++ b/src/renderMultiple.js
@@ -145,9 +145,13 @@ async function setInitialStates(renderers) {
             winner
               .execute()
               .then(response => callback(null, response))
-              .catch(exception =>
-                callback(new Error(`${winner.uri} : ${exception.message}`), null)
-              );
+              .catch(exception => {
+                if (renderer.component.object.byPassWhenFailed) {
+                  callback(null, { data: { isFailed: true } });
+                } else {
+                  callback(new Error(`${winner.uri} : ${exception.message}`), null);
+                }
+              });
           };
         }
       });
diff --git a/src/universal/partials/Welcome/partials.js b/src/universal/partials/Welcome/partials.js
index 5bb1499..c734fec 100644
--- a/src/universal/partials/Welcome/partials.js
+++ b/src/universal/partials/Welcome/partials.js
@@ -10,7 +10,7 @@ Object.keys(components).forEach(path => {
     partials.push({
       name: info.fragmentName,
       url: path,
-      status: info.status
+      status: info?.fragment?.previewStatus || info.status
     });
   }
 });
diff --git a/src/universal/partials/withBaseComponent.js b/src/universal/partials/withBaseComponent.js
index 0f78d45..9eb10e3 100644
--- a/src/universal/partials/withBaseComponent.js
+++ b/src/universal/partials/withBaseComponent.js
@@ -5,6 +5,7 @@ import ClientApp from '../components/ClientApp';
 import { WINDOW_GLOBAL_PARAMS } from '../utils/constants';
 import { createComponentName } from '../utils/helper';
 import voltranConfig from '../../../voltran.config';
+import HistoryService from '../service/HistoryService';
 
 const getStaticProps = () => {
   const staticProps = {};
@@ -24,7 +25,12 @@ const withBaseComponent = (PageComponent, pathName) => {
 
   if (process.env.BROWSER && window[prefix] && window[prefix][componentName.toUpperCase()]) {
     const fragments = window[prefix][componentName.toUpperCase()];
-    const history = window[WINDOW_GLOBAL_PARAMS.HISTORY];
+
+    window[WINDOW_GLOBAL_PARAMS.VOLTRAN_HISTORY] =
+      window[WINDOW_GLOBAL_PARAMS.VOLTRAN_HISTORY] ||
+      new HistoryService(WINDOW_GLOBAL_PARAMS.VOLTRAN_HISTORY);
+    const history = window[WINDOW_GLOBAL_PARAMS.VOLTRAN_HISTORY].getHistory();
+
     const staticProps = getStaticProps();
 
     Object.keys(fragments).forEach(id => {
@@ -37,7 +43,11 @@ const withBaseComponent = (PageComponent, pathName) => {
 
       ReactDOM.hydrate(
         <ClientApp>
-          <PageComponent {...staticProps} initialState={initialState} history={history} />
+          <PageComponent
+            {...staticProps}
+            initialState={initialState}
+            history={history}
+          />
         </ClientApp>,
         componentEl,
         () => {
diff --git a/src/universal/service/HistoryService.js b/src/universal/service/HistoryService.js
new file mode 100644
index 0000000..0797cac
--- /dev/null
+++ b/src/universal/service/HistoryService.js
@@ -0,0 +1,60 @@
+import { createBrowserHistory } from 'history';
+import { WINDOW_GLOBAL_PARAMS } from '../utils/constants';
+
+let instance;
+
+const setReferrer = referrer => {
+  if (process.env.BROWSER) {
+    window.ref = referrer;
+  }
+};
+
+export default class HistoryService {
+  constructor(historyKey) {
+    if (instance) {
+      return instance;
+    }
+
+    this.current = '';
+    this.previous = '';
+    this.history = null;
+    this.historyKey = historyKey;
+    this._listenCallback = this._listenCallback.bind(this);
+
+    this._selectHistoryKey();
+
+    if (process.env.BROWSER) {
+      this.current = window.location.href;
+      this.history = window[this.historyKey];
+
+      if (this.historyKey === historyKey) {
+        this.history.listen(this._listenCallback);
+      }
+    }
+
+    instance = this;
+  }
+
+  _listenCallback(location) {
+    if (!process.env.BROWSER) return;
+
+    this.previous = this.current;
+    this.current = `${window.location.origin}${location.pathname}${location.search}${location.hash}`;
+    setReferrer(this.previous);
+  }
+
+  _selectHistoryKey() {
+    if (!process.env.BROWSER) return;
+
+    // eslint-disable-next-line no-prototype-builtins
+    if (!window.hasOwnProperty(WINDOW_GLOBAL_PARAMS.HISTORY)) {
+      window[this.historyKey] = createBrowserHistory();
+    } else {
+      this.historyKey = WINDOW_GLOBAL_PARAMS.HISTORY;
+    }
+  }
+
+  getHistory() {
+    return this.history;
+  }
+}
diff --git a/src/universal/utils/constants.js b/src/universal/utils/constants.js
index a119311..684b0f9 100644
--- a/src/universal/utils/constants.js
+++ b/src/universal/utils/constants.js
@@ -1,7 +1,9 @@
 const appConfig = require('__APP_CONFIG__');
+const voltranConfig = require('../../../voltran.config');
 
 const WINDOW_GLOBAL_PARAMS = {
-  HISTORY: 'storefront.pwa.mobile.global.history'
+  HISTORY: 'storefront.pwa.mobile.global.history',
+  VOLTRAN_HISTORY: voltranConfig.historyKey || 'voltran.global.history'
 };
 
 const HTTP_STATUS_CODES = {

From cdb6b8912c818c29a03797b169ba31a6bb2815ef Mon Sep 17 00:00:00 2001
From: ahmetkuslular <ahmet.kuslular@hepsiburada.com>
Date: Thu, 3 Mar 2022 09:22:51 +0300
Subject: [PATCH 12/20] ADD feature toggle component field

---
 src/universal/service/FeatureToggleService.js | 25 +++++++++++++++++++
 src/universal/service/RenderService.js        | 13 +++++++---
 src/universal/service/getStates.js            | 10 +++++++-
 3 files changed, 43 insertions(+), 5 deletions(-)
 create mode 100644 src/universal/service/FeatureToggleService.js

diff --git a/src/universal/service/FeatureToggleService.js b/src/universal/service/FeatureToggleService.js
new file mode 100644
index 0000000..7c893a3
--- /dev/null
+++ b/src/universal/service/FeatureToggleService.js
@@ -0,0 +1,25 @@
+let featureToggleService = [];
+
+function load(tempFeatureToggles) {
+  featureToggleService = tempFeatureToggles;
+}
+
+function isOn(name) {
+  const index = featureToggleService.findIndex(toggle => toggle.name === name);
+
+  if (index > -1) {
+    return featureToggleService[index].isOn;
+  }
+
+  return false;
+}
+
+const getToggles = data => {
+  return data.reduce((el, name) => {
+    // eslint-disable-next-line no-param-reassign
+    el[name] = isOn(name);
+    return el;
+  }, {});
+};
+
+export default { isOn, load, getToggles };
diff --git a/src/universal/service/RenderService.js b/src/universal/service/RenderService.js
index 5bd9a48..c04b865 100644
--- a/src/universal/service/RenderService.js
+++ b/src/universal/service/RenderService.js
@@ -16,10 +16,15 @@ const renderLinksAndScripts = (html, links, scripts) => {
     .replace('<div>REPLACE_WITH_SCRIPTS</div>', scripts);
 };
 
-const renderHtml = (component, initialState, context) => {
+const renderHtml = ({ component, initialState, context, toggles }) => {
   // eslint-disable-next-line no-param-reassign
   component.id = guid();
-  const initialStateWithLocation = { ...initialState, location: context, id: component.id };
+  const initialStateWithLocation = {
+    ...initialState,
+    location: context,
+    id: component.id,
+    toggles
+  };
   const sheet = new ServerStyleSheet();
 
   if (isWithoutHTML(context.query)) {
@@ -77,7 +82,7 @@ const isRequestDispatcher = query => {
 };
 
 const renderComponent = async (component, context, predefinedInitialState = null) => {
-  const { initialState, subComponentFiles, ...restStates } = await getStates(
+  const { initialState, subComponentFiles, toggles, ...restStates } = await getStates(
     component.object,
     context,
     predefinedInitialState
@@ -88,7 +93,7 @@ const renderComponent = async (component, context, predefinedInitialState = null
     subComponentFiles
   );
 
-  const output = renderHtml(component, initialState, context);
+  const output = renderHtml({ component, initialState, context, toggles });
   const fullHtml = renderLinksAndScripts(output, generateLinks(links), generateScripts(scripts));
 
   return {
diff --git a/src/universal/service/getStates.js b/src/universal/service/getStates.js
index 3c01b41..11541ee 100644
--- a/src/universal/service/getStates.js
+++ b/src/universal/service/getStates.js
@@ -1,3 +1,5 @@
+import featureToggleService from './FeatureToggleService';
+
 const getResponseData = (component, context, data) => {
   let result = {};
 
@@ -17,9 +19,14 @@ const getStates = async (component, context, predefinedInitialState) => {
   let subComponentFiles = [];
   let responseOptions = {};
   const responseData = getResponseData(component, context, initialState.data);
+  let toggles = [];
+
+  if (component.toggles) {
+    toggles = featureToggleService.getToggles(component.toggles);
+  }
 
   if (context.isWithoutState) {
-    return { initialState, subComponentFiles, responseOptions, ...responseData };
+    return { initialState, subComponentFiles, responseOptions, toggles, ...responseData };
   }
 
   if (!predefinedInitialState && component?.getServerSideProps) {
@@ -38,6 +45,7 @@ const getStates = async (component, context, predefinedInitialState) => {
     initialState,
     subComponentFiles,
     responseOptions,
+    toggles,
     ...responseData
   };
 };

From 4012cf45da8ef60f09df72d1715e9155e3d158db Mon Sep 17 00:00:00 2001
From: cihan <chnselim@outlook.com>
Date: Wed, 6 Apr 2022 13:24:20 +0300
Subject: [PATCH 13/20] ADD custom main js feature and extraPropKeys (#42)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* FIX mainjs and REMOVE toggles

* FIX response data state

Co-authored-by: Cihan SELİM <cihan.selim@hepsiburada.com>
---
 config/string.js                              | 14 ++++++++
 src/main.js                                   | 34 +++++++++++++------
 src/render.js                                 |  1 -
 src/server.js                                 |  2 +-
 src/universal/service/FeatureToggleService.js | 25 --------------
 src/universal/service/RenderService.js        |  8 ++---
 src/universal/service/getStates.js            | 30 ++++++++++------
 webpack.server.config.js                      |  9 ++---
 8 files changed, 66 insertions(+), 57 deletions(-)
 delete mode 100644 src/universal/service/FeatureToggleService.js

diff --git a/config/string.js b/config/string.js
index 52003d6..0a766dd 100644
--- a/config/string.js
+++ b/config/string.js
@@ -55,6 +55,20 @@ function replaceString() {
       replace: normalizeUrl(path.resolve(__dirname, '../src/server')),
       flags: 'g'
     },
+    {
+      search: '__V_MAIN__',
+      replace: normalizeUrl(
+        voltranConfig.entry.main || path.resolve(__dirname, './emptyModule.js')
+      ),
+      flags: 'g'
+    },
+    {
+      search: '__V_SERVER__',
+      replace: normalizeUrl(
+        voltranConfig.entry.server || path.resolve(__dirname, './emptyModule.js')
+      ),
+      flags: 'g'
+    },
     { search: '"__V_styles__"', replace: getStyles() }
   ];
 
diff --git a/src/main.js b/src/main.js
index fa6bdf2..e9000fa 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,12 +6,14 @@ import Hiddie from 'hiddie';
 import http from 'http';
 import voltranConfig from '../voltran.config';
 import prom from 'prom-client';
-import {HTTP_STATUS_CODES} from './universal/utils/constants';
+import { HTTP_STATUS_CODES } from './universal/utils/constants';
+
+const voltranMain = require('__V_MAIN__');
 
 const enablePrometheus = voltranConfig.monitoring.prometheus;
 
 function triggerMessageListener(worker) {
-  worker.on('message', function (message) {
+  worker.on('message', function(message) {
     if (message?.options?.forwardAllWorkers) {
       sendMessageToAllWorkers(message);
     }
@@ -19,28 +21,33 @@ function triggerMessageListener(worker) {
 }
 
 function sendMessageToAllWorkers(message) {
-  Object.keys(cluster.workers).forEach(function (key) {
+  Object.keys(cluster.workers).forEach(function(key) {
     const worker = cluster.workers[key];
     worker.send({
-      msg: message.msg,
+      msg: message.msg
     });
   }, this);
 }
 
-cluster.on('fork', (worker) => {
+cluster.on('fork', worker => {
   triggerMessageListener(worker);
 });
 
-if (cluster.isMaster) {
-  for (let i = 0; i < os.cpus().length; i += 1) {
+const DEFAULT_CPU_COUNT = os.cpus().length;
+
+function forkClusters(cpuCount = DEFAULT_CPU_COUNT) {
+  for (let i = 0; i < cpuCount; i += 1) {
     cluster.fork();
   }
 
   cluster.on('exit', worker => {
     logger.error(`Worker ${worker.id} died`);
-    cluster.fork();
+    const newWorker = cluster.fork();
+    cluster.emit('message', newWorker, 'NEW_WORKER');
   });
+}
 
+if (cluster.isMaster) {
   if (enablePrometheus) {
     const aggregatorRegistry = new prom.AggregatorRegistry();
     const metricsPort = voltranConfig.port + 1;
@@ -52,7 +59,7 @@ if (cluster.isMaster) {
         return res.end(await aggregatorRegistry.clusterMetrics());
       }
       res.statusCode = HTTP_STATUS_CODES.NOT_FOUND;
-      res.end(JSON.stringify({message: 'not found'}));
+      res.end(JSON.stringify({ message: 'not found' }));
     });
 
     http.createServer(hiddie.run).listen(metricsPort, () => {
@@ -63,7 +70,14 @@ if (cluster.isMaster) {
       );
     });
   }
+
+  if (voltranConfig.entry.main) {
+    const voltranMainFile = voltranMain.default;
+    forkClusters(voltranMainFile.cpuCount);
+    voltranMainFile.load(cluster);
+  }
+} else if (voltranConfig.entry.server) {
+  require('__V_SERVER__');
 } else {
-  // eslint-disable-next-line global-require
   require('./server');
 }
diff --git a/src/render.js b/src/render.js
index f7e6cc6..309e09f 100644
--- a/src/render.js
+++ b/src/render.js
@@ -22,7 +22,6 @@ function getPreview(output) {
   const { layouts = {} } = previewPages?.default || {};
   let PreviewFile = Preview;
 
-  console.log('layouts:', layouts);
   if (layouts.default) {
     PreviewFile = layouts.default;
   }
diff --git a/src/server.js b/src/server.js
index 84e62a8..e1483e1 100644
--- a/src/server.js
+++ b/src/server.js
@@ -8,7 +8,7 @@ const launchServer = () => {
   http.createServer(hiddie.run).listen(voltranConfig.port);
 };
 
-if (process.env.NODE_ENV === 'production' && !voltranConfig.entry) {
+if (process.env.NODE_ENV === 'production' && !voltranConfig.entry.server) {
   launchServer();
 }
 
diff --git a/src/universal/service/FeatureToggleService.js b/src/universal/service/FeatureToggleService.js
deleted file mode 100644
index 7c893a3..0000000
--- a/src/universal/service/FeatureToggleService.js
+++ /dev/null
@@ -1,25 +0,0 @@
-let featureToggleService = [];
-
-function load(tempFeatureToggles) {
-  featureToggleService = tempFeatureToggles;
-}
-
-function isOn(name) {
-  const index = featureToggleService.findIndex(toggle => toggle.name === name);
-
-  if (index > -1) {
-    return featureToggleService[index].isOn;
-  }
-
-  return false;
-}
-
-const getToggles = data => {
-  return data.reduce((el, name) => {
-    // eslint-disable-next-line no-param-reassign
-    el[name] = isOn(name);
-    return el;
-  }, {});
-};
-
-export default { isOn, load, getToggles };
diff --git a/src/universal/service/RenderService.js b/src/universal/service/RenderService.js
index c04b865..78c3f5c 100644
--- a/src/universal/service/RenderService.js
+++ b/src/universal/service/RenderService.js
@@ -16,14 +16,14 @@ const renderLinksAndScripts = (html, links, scripts) => {
     .replace('<div>REPLACE_WITH_SCRIPTS</div>', scripts);
 };
 
-const renderHtml = ({ component, initialState, context, toggles }) => {
+const renderHtml = ({ component, initialState, context, extraPropKeys }) => {
   // eslint-disable-next-line no-param-reassign
   component.id = guid();
   const initialStateWithLocation = {
     ...initialState,
     location: context,
     id: component.id,
-    toggles
+    ...extraPropKeys
   };
   const sheet = new ServerStyleSheet();
 
@@ -82,7 +82,7 @@ const isRequestDispatcher = query => {
 };
 
 const renderComponent = async (component, context, predefinedInitialState = null) => {
-  const { initialState, subComponentFiles, toggles, ...restStates } = await getStates(
+  const { initialState, subComponentFiles, extraPropKeys, ...restStates } = await getStates(
     component.object,
     context,
     predefinedInitialState
@@ -93,7 +93,7 @@ const renderComponent = async (component, context, predefinedInitialState = null
     subComponentFiles
   );
 
-  const output = renderHtml({ component, initialState, context, toggles });
+  const output = renderHtml({ component, initialState, context, extraPropKeys });
   const fullHtml = renderLinksAndScripts(output, generateLinks(links), generateScripts(scripts));
 
   return {
diff --git a/src/universal/service/getStates.js b/src/universal/service/getStates.js
index 11541ee..7d10d02 100644
--- a/src/universal/service/getStates.js
+++ b/src/universal/service/getStates.js
@@ -1,5 +1,3 @@
-import featureToggleService from './FeatureToggleService';
-
 const getResponseData = (component, context, data) => {
   let result = {};
 
@@ -14,19 +12,29 @@ const getResponseData = (component, context, data) => {
   return result;
 };
 
+const getExtraProps = (component, context, data) => {
+  let result = {};
+
+  if (component?.setExtraProps) {
+    if (typeof component.setExtraProps === 'function') {
+      result = component.setExtraProps(context, data);
+    } else {
+      result = component.setExtraProps;
+    }
+  }
+
+  return result;
+};
+
 const getStates = async (component, context, predefinedInitialState) => {
   const initialState = predefinedInitialState || { data: {} };
   let subComponentFiles = [];
   let responseOptions = {};
-  const responseData = getResponseData(component, context, initialState.data);
-  let toggles = [];
-
-  if (component.toggles) {
-    toggles = featureToggleService.getToggles(component.toggles);
-  }
+  let responseData = {};
+  const extraPropKeys = getExtraProps(component, context, initialState.data);
 
   if (context.isWithoutState) {
-    return { initialState, subComponentFiles, responseOptions, toggles, ...responseData };
+    return { initialState, subComponentFiles, responseOptions, extraPropKeys, ...responseData };
   }
 
   if (!predefinedInitialState && component?.getServerSideProps) {
@@ -41,11 +49,13 @@ const getStates = async (component, context, predefinedInitialState) => {
     responseOptions = initialState?.data?.responseOptions || {};
   }
 
+  responseData = getResponseData(component, context, initialState.data);
+
   return {
     initialState,
     subComponentFiles,
     responseOptions,
-    toggles,
+    extraPropKeys,
     ...responseData
   };
 };
diff --git a/webpack.server.config.js b/webpack.server.config.js
index 97fae86..7a401ca 100644
--- a/webpack.server.config.js
+++ b/webpack.server.config.js
@@ -5,8 +5,6 @@ const nodeExternals = require('webpack-node-externals');
 
 const env = process.env.VOLTRAN_ENV || 'local';
 
-console.log('::VOLTRAN WP SERVER: ', env);
-
 const voltranConfig = require('./voltran.config');
 
 const appConfigFilePath = `${voltranConfig.appConfigFile.entry}/${env}.conf.js`;
@@ -27,10 +25,9 @@ const voltranServerConfigPath = voltranConfig.webpackConfiguration.server;
 const voltranServerConfig = voltranServerConfigPath
   ? require(voltranConfig.webpackConfiguration.server)
   : '';
-const voltranServer =
-  voltranConfig.entry && !isDebug
-    ? voltranConfig.entry
-    : path.resolve(__dirname, isDebug ? 'src/server.js' : 'src/main.js');
+const voltranCustomServer = voltranConfig.entry.server || 'src/server.js';
+
+const voltranServer = path.resolve(__dirname, isDebug ? voltranCustomServer : 'src/main.js');
 
 const serverConfig = webpackMerge(commonConfig, voltranServerConfig, {
   name: 'server',

From acb1752684b2c4affb7b8f2ffc8d68904a1f9117 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cihan=20SEL=C4=B0M?= <cihan.selim@hepsiburada.com>
Date: Wed, 6 Apr 2022 14:39:17 +0300
Subject: [PATCH 14/20] Some fixes about history location provider in moria

---
 src/render.js                                  | 14 +++++++++++---
 src/renderMultiple.js                          |  1 +
 src/universal/components/ClientApp.js          |  2 +-
 .../RequestDispatcher/RequestDispatcher.js     |  4 ++--
 src/universal/partials/withBaseComponent.js    | 18 ++++++++++++------
 5 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/render.js b/src/render.js
index 309e09f..7f28977 100644
--- a/src/render.js
+++ b/src/render.js
@@ -34,7 +34,7 @@ const render = async (req, res) => {
   const pathParts = xss(req.path)
     .split('/')
     .filter(part => part);
-  const componentPath = `/${pathParts.join('/')}`;
+  const componentPath = `/${pathParts?.[0]}`;
   const isPreviewValue = isPreview(req.query);
 
   const routeInfo = matchUrlInRouteConfigs(componentPath);
@@ -52,7 +52,8 @@ const render = async (req, res) => {
       userAgent: Buffer.from(req.headers['user-agent'] || [], 'utf-8').toString('base64'),
       headers: JSON.parse(xss(JSON.stringify(req.headers))),
       isWithoutState: isWithoutStateValue,
-      isPreview: isPreviewValue
+      isPreview: isPreviewValue,
+      componentPath
     };
 
     const component = new Component(routeInfo.path);
@@ -96,7 +97,14 @@ const render = async (req, res) => {
       const voltranEnv = appConfig.voltranEnv || 'local';
 
       if (voltranEnv !== 'prod' && isPreviewQuery) {
-        const response = getPreview([fullHtml].join('\n'));
+        const requestDispatcherResponse = await renderComponent(
+          new Component('/RequestDispatcher'),
+          context
+        );
+        const requestDispatcherFullHtml = requestDispatcherResponse.fullHtml;
+
+        const response = getPreview([requestDispatcherFullHtml, fullHtml].join('\n'));
+
         res.status(statusCode).html(response);
       } else {
         res
diff --git a/src/renderMultiple.js b/src/renderMultiple.js
index 9ab45a6..fd89137 100644
--- a/src/renderMultiple.js
+++ b/src/renderMultiple.js
@@ -47,6 +47,7 @@ function getRenderer(name, req) {
       cookies,
       url: urlWithPath,
       userAgent,
+      componentPath,
       ...renderOptions
     };
 
diff --git a/src/universal/components/ClientApp.js b/src/universal/components/ClientApp.js
index bc15869..84040aa 100644
--- a/src/universal/components/ClientApp.js
+++ b/src/universal/components/ClientApp.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 function ClientApp({ children }) {
-  return <div>{children}</div>;
+  return <div id="clientApp">{children}</div>;
 }
 
 export default ClientApp;
diff --git a/src/universal/components/RequestDispatcher/RequestDispatcher.js b/src/universal/components/RequestDispatcher/RequestDispatcher.js
index 7a8c395..42a87dd 100644
--- a/src/universal/components/RequestDispatcher/RequestDispatcher.js
+++ b/src/universal/components/RequestDispatcher/RequestDispatcher.js
@@ -28,9 +28,9 @@ const RequestDispatcher = () => {
       });
     };
 
-    const runEffect = (effect, data) => {
+    const runEffect = (effect, params) => {
       effect
-        .Request(data)
+        .Request({ params })
         .then(response => broadcast(effect, null, response))
         .catch(error => broadcast(effect, error, null));
     };
diff --git a/src/universal/partials/withBaseComponent.js b/src/universal/partials/withBaseComponent.js
index 9eb10e3..42021e0 100644
--- a/src/universal/partials/withBaseComponent.js
+++ b/src/universal/partials/withBaseComponent.js
@@ -19,7 +19,7 @@ const getStaticProps = () => {
   return staticProps;
 };
 
-const withBaseComponent = (PageComponent, pathName) => {
+const withBaseComponent = (PageComponent, pathName, wrapperEl) => {
   const componentName = createComponentName(pathName);
   const prefix = voltranConfig.prefix.toUpperCase();
 
@@ -40,14 +40,20 @@ const withBaseComponent = (PageComponent, pathName) => {
       if (isHydrated || !componentEl) return;
 
       const initialState = fragments[id].STATE;
+      const Wrapper = wrapperEl;
+      const pageComponent = (
+        <PageComponent {...staticProps} initialState={initialState} history={history} />
+      );
 
       ReactDOM.hydrate(
         <ClientApp>
-          <PageComponent
-            {...staticProps}
-            initialState={initialState}
-            history={history}
-          />
+          {Wrapper ? (
+            <Wrapper history={history} pathName={pathName}>
+              {pageComponent}
+            </Wrapper>
+          ) : (
+            pageComponent
+          )}
         </ClientApp>,
         componentEl,
         () => {

From 75a8df4c6eee0a71825f76d3398edacee764adf4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cihan=20SEL=C4=B0M?= <cihan.selim@hepsiburada.com>
Date: Wed, 20 Apr 2022 09:52:47 +0300
Subject: [PATCH 15/20] ADD fullComponentPath to render multiple, minor changes
 in serverjs & webpack

---
 src/renderMultiple.js    | 6 ++++--
 src/server.js            | 6 +++++-
 webpack.server.config.js | 3 ++-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/renderMultiple.js b/src/renderMultiple.js
index fd89137..92f21b1 100644
--- a/src/renderMultiple.js
+++ b/src/renderMultiple.js
@@ -40,6 +40,7 @@ function getRenderer(name, req) {
 
   if (routeInfo) {
     const urlWithPath = url.replace('/', path);
+    const fullComponentPath = `/components/${req.params.components ?? ''}`;
 
     const context = {
       path,
@@ -47,7 +48,7 @@ function getRenderer(name, req) {
       cookies,
       url: urlWithPath,
       userAgent,
-      componentPath,
+      componentPath: fullComponentPath,
       ...renderOptions
     };
 
@@ -207,6 +208,7 @@ async function getResponses(renderers) {
 async function getPreview(responses, requestCount, req) {
   const layoutName = getPreviewLayout(req.query);
   const { layouts = {} } = previewPages?.default || {};
+  const componentNames = Object.keys(responses);
   let PreviewFile = Preview;
 
   if (layouts[layoutName]) {
@@ -218,7 +220,7 @@ async function getPreview(responses, requestCount, req) {
     return getLayoutWithClass(componentName, responses[name].fullHtml);
   });
 
-  return PreviewFile([...content].join('\n'), `${requestCount} request!`);
+  return PreviewFile([...content].join('\n'), `${requestCount} request!`, componentNames);
 }
 
 const DEFAULT_PARTIALS = ['RequestDispatcher'];
diff --git a/src/server.js b/src/server.js
index e1483e1..2c653fc 100644
--- a/src/server.js
+++ b/src/server.js
@@ -3,12 +3,16 @@ import http from 'http';
 import voltranConfig from '../voltran.config';
 import { hiddie, composedMiddlewares, prepareMiddlewares } from './middleware';
 
+const isDebug = voltranConfig.dev;
+const customServer = voltranConfig.entry.server;
+const canStartServer = process.env.NODE_ENV === 'production' && (!customServer || isDebug);
+
 const launchServer = () => {
   prepareMiddlewares();
   http.createServer(hiddie.run).listen(voltranConfig.port);
 };
 
-if (process.env.NODE_ENV === 'production' && !voltranConfig.entry.server) {
+if (canStartServer) {
   launchServer();
 }
 
diff --git a/webpack.server.config.js b/webpack.server.config.js
index 7a401ca..ba036dc 100644
--- a/webpack.server.config.js
+++ b/webpack.server.config.js
@@ -25,7 +25,8 @@ const voltranServerConfigPath = voltranConfig.webpackConfiguration.server;
 const voltranServerConfig = voltranServerConfigPath
   ? require(voltranConfig.webpackConfiguration.server)
   : '';
-const voltranCustomServer = voltranConfig.entry.server || 'src/server.js';
+const voltranCustomServer =
+  voltranConfig.entry.server && !isDebug ? voltranConfig.entry.server : 'src/server.js';
 
 const voltranServer = path.resolve(__dirname, isDebug ? voltranCustomServer : 'src/main.js');
 

From c8b5ceddccc850a5a47e433784ec79f57101354a Mon Sep 17 00:00:00 2001
From: ahmetkuslular <ahmetkuslular@gmail.com>
Date: Wed, 27 Apr 2022 23:53:41 +0300
Subject: [PATCH 16/20] FIX api service manager

---
 src/index.js                                  |  5 +--
 src/renderMultiple.js                         | 42 +++++++------------
 src/universal/core/api/ClientApiManager.js    | 11 -----
 .../core/api/ClientApiManagerCache.js         | 13 ------
 .../core/api/ServerApiManagerCache.js         | 13 ------
 src/universal/core/api/index.js               |  2 -
 .../apiManager/BaseApiManager.js}             |  6 +--
 .../apiService/apiManager/ClientApiManager.js | 11 +++++
 .../apiManager}/ServerApiManager.js           |  8 ++--
 .../core/apiService/apiManager/index.js       |  3 ++
 .../apiManagerCache/ClientApiManagerCache.js  |  9 ++++
 .../apiManagerCache/ServerApiManagerCache.js  |  9 ++++
 .../core/apiService/apiManagerCache/index.js  |  2 +
 src/universal/core/apiService/apiService.js   | 10 +++++
 src/universal/core/apiService/index.js        |  3 ++
 .../apiService/utils/createApiClient.js}      |  7 ++--
 .../core/apiService/utils/createCache.js      | 15 +++++++
 .../core/apiService/utils/freezeServices.js   | 11 +++++
 src/universal/model/Renderer.js               |  3 +-
 src/universal/utils/constants.js              |  8 ----
 20 files changed, 100 insertions(+), 91 deletions(-)
 delete mode 100644 src/universal/core/api/ClientApiManager.js
 delete mode 100644 src/universal/core/api/ClientApiManagerCache.js
 delete mode 100644 src/universal/core/api/ServerApiManagerCache.js
 delete mode 100644 src/universal/core/api/index.js
 rename src/universal/core/{api/ApiManager.js => apiService/apiManager/BaseApiManager.js} (89%)
 create mode 100644 src/universal/core/apiService/apiManager/ClientApiManager.js
 rename src/universal/core/{api => apiService/apiManager}/ServerApiManager.js (61%)
 create mode 100644 src/universal/core/apiService/apiManager/index.js
 create mode 100644 src/universal/core/apiService/apiManagerCache/ClientApiManagerCache.js
 create mode 100644 src/universal/core/apiService/apiManagerCache/ServerApiManagerCache.js
 create mode 100644 src/universal/core/apiService/apiManagerCache/index.js
 create mode 100644 src/universal/core/apiService/apiService.js
 create mode 100644 src/universal/core/apiService/index.js
 rename src/universal/{common/network/apiUtils.js => core/apiService/utils/createApiClient.js} (93%)
 create mode 100644 src/universal/core/apiService/utils/createCache.js
 create mode 100644 src/universal/core/apiService/utils/freezeServices.js

diff --git a/src/index.js b/src/index.js
index d217a12..a17b25e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,5 @@
 import voltran from './universal/partials/withBaseComponent';
-import { SERVICES } from './universal/utils/constants';
-import { ClientApiManager, ServerApiManager } from './universal/core/api';
+import apiService, { ClientApiManager, ServerApiManager } from './universal/core/apiService';
 
 export default voltran;
-export { SERVICES, ClientApiManager, ServerApiManager };
+export { ClientApiManager, ServerApiManager, apiService };
diff --git a/src/renderMultiple.js b/src/renderMultiple.js
index 92f21b1..cdb367f 100644
--- a/src/renderMultiple.js
+++ b/src/renderMultiple.js
@@ -63,22 +63,16 @@ function getRenderer(name, req) {
 }
 
 function iterateServicesMap(servicesMap, callback) {
-  Object.getOwnPropertySymbols(servicesMap).forEach(serviceName => {
-    const endPoints = servicesMap[serviceName];
+  Object.getOwnPropertyNames(servicesMap).forEach(serviceName => {
+    const requests = servicesMap[serviceName];
 
-    Object.keys(endPoints).forEach(endPointName => {
-      callback(serviceName, endPointName);
-    });
+    callback(serviceName, requests);
   });
 }
 
-function reduceServicesMap(servicesMap, callback, initialValue) {
-  return Object.getOwnPropertySymbols(servicesMap).map(serviceName => {
-    const endPoints = servicesMap[serviceName];
-
-    return Object.keys(endPoints).reduce((obj, endPointName) => {
-      return callback(serviceName, endPointName, obj);
-    }, initialValue);
+function reduceServicesMap(servicesMap, callback, obj) {
+  return Object.getOwnPropertyNames(servicesMap).map(serviceName => {
+    return callback(serviceName, obj);
   });
 }
 
@@ -86,9 +80,7 @@ function getHashes(renderers) {
   return renderers
     .filter(renderer => renderer.servicesMap)
     .reduce((hashes, renderer) => {
-      iterateServicesMap(renderer.servicesMap, (serviceName, endPointName) => {
-        const requests = renderer.servicesMap[serviceName][endPointName];
-
+      iterateServicesMap(renderer.servicesMap, (serviceName, requests) => {
         requests.forEach(request => {
           if (hashes[request.hash]) {
             hashes[request.hash].occurrence += 1;
@@ -121,12 +113,8 @@ function incWinnerScore(winner, hashes) {
   hashes[winner.hash].score += 1;
 }
 
-function putWinnerMap(serviceName, endPointName, winnerMap, winner) {
-  if (winnerMap[serviceName]) {
-    winnerMap[serviceName][endPointName] = winner;
-  } else {
-    winnerMap[serviceName] = { [endPointName]: winner };
-  }
+function putWinnerMap(serviceName, winnerMap, winner) {
+  winnerMap[serviceName] = winner;
 }
 
 async function setInitialStates(renderers) {
@@ -135,12 +123,10 @@ async function setInitialStates(renderers) {
   const promises = renderers
     .filter(renderer => renderer.servicesMap)
     .reduce((promises, renderer) => {
-      iterateServicesMap(renderer.servicesMap, (serviceName, endPointName) => {
-        const requests = renderer.servicesMap[serviceName][endPointName];
-
+      iterateServicesMap(renderer.servicesMap, (serviceName, requests) => {
         const winner = getWinner(requests, hashes);
         incWinnerScore(winner, hashes);
-        putWinnerMap(serviceName, endPointName, renderer.winnerMap, winner);
+        putWinnerMap(serviceName, renderer.winnerMap, winner);
 
         if (!promises[winner.hash]) {
           promises[winner.hash] = callback => {
@@ -176,9 +162,9 @@ async function setInitialStates(renderers) {
       renderer.setInitialState(
         reduceServicesMap(
           renderer.winnerMap,
-          (serviceName, endPointName, obj) => {
-            const request = renderer.winnerMap[serviceName][endPointName];
-            obj[endPointName] = results[request.hash];
+          (serviceName, obj) => {
+            const request = renderer.winnerMap[serviceName];
+            obj[serviceName] = results[request.hash];
             return obj;
           },
           {}
diff --git a/src/universal/core/api/ClientApiManager.js b/src/universal/core/api/ClientApiManager.js
deleted file mode 100644
index 0513103..0000000
--- a/src/universal/core/api/ClientApiManager.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import ApiManager from './ApiManager';
-import { createApiClient } from '../../common/network/apiUtils';
-
-export default (config, timeout) => {
-  const apiManager = new ApiManager({
-    baseURL: config.clientUrl,
-    timeout
-  });
-
-  return createApiClient(apiManager);
-};
diff --git a/src/universal/core/api/ClientApiManagerCache.js b/src/universal/core/api/ClientApiManagerCache.js
deleted file mode 100644
index 56ad45b..0000000
--- a/src/universal/core/api/ClientApiManagerCache.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/* istanbul ignore file */
-import ClientApiManager from './ClientApiManager';
-import { SERVICES } from '../../utils/constants';
-
-const { services, timeouts } = require('__APP_CONFIG__');
-
-const cache = {};
-
-Object.entries(services).forEach(entity => {
-  cache[SERVICES[entity[0]]] = ClientApiManager(entity[1], timeouts.clientApiManager);
-});
-
-export default cache;
diff --git a/src/universal/core/api/ServerApiManagerCache.js b/src/universal/core/api/ServerApiManagerCache.js
deleted file mode 100644
index b0e77a9..0000000
--- a/src/universal/core/api/ServerApiManagerCache.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/* istanbul ignore file */
-import ServerApiManager from './ServerApiManager';
-import { SERVICES } from '../../utils/constants';
-
-const { services, timeouts } = require('__APP_CONFIG__');
-
-const cache = {};
-
-Object.entries(services).forEach(entity => {
-  cache[SERVICES[entity[0]]] = ServerApiManager(entity[1], timeouts.serverApiManager);
-});
-
-export default cache;
diff --git a/src/universal/core/api/index.js b/src/universal/core/api/index.js
deleted file mode 100644
index 2990a60..0000000
--- a/src/universal/core/api/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as ClientApiManager } from './ClientApiManagerCache';
-export { default as ServerApiManager } from './ServerApiManagerCache';
diff --git a/src/universal/core/api/ApiManager.js b/src/universal/core/apiService/apiManager/BaseApiManager.js
similarity index 89%
rename from src/universal/core/api/ApiManager.js
rename to src/universal/core/apiService/apiManager/BaseApiManager.js
index 778ea1e..80a621d 100644
--- a/src/universal/core/api/ApiManager.js
+++ b/src/universal/core/apiService/apiManager/BaseApiManager.js
@@ -3,13 +3,13 @@ import {
   CONTENT_TYPE_HEADER,
   JSON_CONTENT_TYPE,
   REQUEST_TYPES_WITH_BODY
-} from '../../utils/constants';
+} from '../../../utils/constants';
 
 function createBaseConfig() {
   return {};
 }
 
-class ApiManager {
+class BaseApiManager {
   constructor(customConfig) {
     const headers = {
       common: {
@@ -40,4 +40,4 @@ class ApiManager {
   }
 }
 
-export default ApiManager;
+export default BaseApiManager;
diff --git a/src/universal/core/apiService/apiManager/ClientApiManager.js b/src/universal/core/apiService/apiManager/ClientApiManager.js
new file mode 100644
index 0000000..574fc0d
--- /dev/null
+++ b/src/universal/core/apiService/apiManager/ClientApiManager.js
@@ -0,0 +1,11 @@
+import createApiClient from '../utils/createApiClient';
+import BaseApiManager from './BaseApiManager';
+
+export default (config, timeout) => {
+  const apiManager = new BaseApiManager({
+    baseURL: config.clientUrl || config.url || config.serverUrl || '/',
+    timeout
+  });
+
+  return createApiClient(apiManager);
+};
diff --git a/src/universal/core/api/ServerApiManager.js b/src/universal/core/apiService/apiManager/ServerApiManager.js
similarity index 61%
rename from src/universal/core/api/ServerApiManager.js
rename to src/universal/core/apiService/apiManager/ServerApiManager.js
index e181237..acb7e5e 100644
--- a/src/universal/core/api/ServerApiManager.js
+++ b/src/universal/core/apiService/apiManager/ServerApiManager.js
@@ -1,5 +1,5 @@
-import ApiManager from './ApiManager';
-import { createApiClient } from '../../common/network/apiUtils';
+import createApiClient from '../utils/createApiClient';
+import BaseApiManager from './BaseApiManager';
 
 import http from 'http';
 import https from 'https';
@@ -10,9 +10,9 @@ const BASE_HTTP_AGENT_CONFIG = {
 };
 
 export default (config, timeout) => {
-  const apiManager = new ApiManager({
+  const apiManager = new BaseApiManager({
     timeout,
-    baseURL: config.serverUrl,
+    baseURL: config.serverUrl || config.url || config.clientUrl || '/',
     httpAgent: new http.Agent(BASE_HTTP_AGENT_CONFIG),
     httpsAgent: new https.Agent(BASE_HTTP_AGENT_CONFIG)
   });
diff --git a/src/universal/core/apiService/apiManager/index.js b/src/universal/core/apiService/apiManager/index.js
new file mode 100644
index 0000000..59fb173
--- /dev/null
+++ b/src/universal/core/apiService/apiManager/index.js
@@ -0,0 +1,3 @@
+export { default as BaseApiManager } from './BaseApiManager';
+export { default as ClientApiManager } from './ClientApiManager';
+export { default as ServerApiManager } from './ServerApiManager';
diff --git a/src/universal/core/apiService/apiManagerCache/ClientApiManagerCache.js b/src/universal/core/apiService/apiManagerCache/ClientApiManagerCache.js
new file mode 100644
index 0000000..5dd1026
--- /dev/null
+++ b/src/universal/core/apiService/apiManagerCache/ClientApiManagerCache.js
@@ -0,0 +1,9 @@
+/* istanbul ignore file */
+import ClientApiManager from '../apiManager/ClientApiManager';
+import createCache from '../utils/createCache';
+
+const { services, timeouts } = require('__APP_CONFIG__');
+
+const cache = createCache(ClientApiManager, services, timeouts.clientApiManager);
+
+export default cache;
diff --git a/src/universal/core/apiService/apiManagerCache/ServerApiManagerCache.js b/src/universal/core/apiService/apiManagerCache/ServerApiManagerCache.js
new file mode 100644
index 0000000..2a56eeb
--- /dev/null
+++ b/src/universal/core/apiService/apiManagerCache/ServerApiManagerCache.js
@@ -0,0 +1,9 @@
+/* istanbul ignore file */
+import ServerApiManager from '../apiManager/ServerApiManager';
+import createCache from '../utils/createCache';
+
+const { services, timeouts } = require('__APP_CONFIG__');
+
+const cache = createCache(ServerApiManager, services, timeouts.serverApiManager);
+
+export default cache;
diff --git a/src/universal/core/apiService/apiManagerCache/index.js b/src/universal/core/apiService/apiManagerCache/index.js
new file mode 100644
index 0000000..442c9ce
--- /dev/null
+++ b/src/universal/core/apiService/apiManagerCache/index.js
@@ -0,0 +1,2 @@
+export { default as ServerApiManagerCache } from './ServerApiManagerCache';
+export { default as ClientApiManagerCache } from './ClientApiManagerCache';
diff --git a/src/universal/core/apiService/apiService.js b/src/universal/core/apiService/apiService.js
new file mode 100644
index 0000000..c09c762
--- /dev/null
+++ b/src/universal/core/apiService/apiService.js
@@ -0,0 +1,10 @@
+import { ServerApiManagerCache, ClientApiManagerCache } from './apiManagerCache';
+
+const getApiService = () => {
+  const isBrowser = typeof window !== 'undefined';
+
+  return isBrowser ? ClientApiManagerCache : ServerApiManagerCache;
+};
+
+const apiService = getApiService();
+export default apiService;
diff --git a/src/universal/core/apiService/index.js b/src/universal/core/apiService/index.js
new file mode 100644
index 0000000..d689927
--- /dev/null
+++ b/src/universal/core/apiService/index.js
@@ -0,0 +1,3 @@
+export { default } from './apiService';
+export { default as ClientApiManager } from './apiManagerCache/ClientApiManagerCache';
+export { default as ServerApiManager } from './apiManagerCache/ServerApiManagerCache';
diff --git a/src/universal/common/network/apiUtils.js b/src/universal/core/apiService/utils/createApiClient.js
similarity index 93%
rename from src/universal/common/network/apiUtils.js
rename to src/universal/core/apiService/utils/createApiClient.js
index d83a266..cefebd0 100644
--- a/src/universal/common/network/apiUtils.js
+++ b/src/universal/core/apiService/utils/createApiClient.js
@@ -1,5 +1,5 @@
-import Request from '../../model/Request';
-import { createCacheManagerInstance } from '../../core/cache/cacheUtils';
+import Request from '../../../model/Request';
+import { createCacheManagerInstance } from '../../cache/cacheUtils';
 
 function createApiClient(apiManager) {
   const cacheManager = createCacheManagerInstance();
@@ -101,5 +101,4 @@ function createApiClient(apiManager) {
   };
 }
 
-// eslint-disable-next-line import/prefer-default-export
-export { createApiClient };
+export default createApiClient;
diff --git a/src/universal/core/apiService/utils/createCache.js b/src/universal/core/apiService/utils/createCache.js
new file mode 100644
index 0000000..2100ead
--- /dev/null
+++ b/src/universal/core/apiService/utils/createCache.js
@@ -0,0 +1,15 @@
+import freezeServices from './freezeServices';
+
+const createCache = (ApiManager, services, timeout) => {
+  const cache = {};
+  const frozenServicesData = freezeServices(services);
+
+  Object.entries(services).forEach(entity => {
+    const [serviceKey, serviceValues] = entity;
+    cache[frozenServicesData[serviceKey]] = ApiManager(serviceValues, timeout);
+  });
+
+  return cache;
+};
+
+export default createCache;
diff --git a/src/universal/core/apiService/utils/freezeServices.js b/src/universal/core/apiService/utils/freezeServices.js
new file mode 100644
index 0000000..ba6491b
--- /dev/null
+++ b/src/universal/core/apiService/utils/freezeServices.js
@@ -0,0 +1,11 @@
+function freezeServices(services) {
+  return Object.freeze(
+    Object.keys(services).reduce((obj, val) => {
+      // eslint-disable-next-line no-param-reassign
+      obj[val] = val;
+      return obj;
+    }, {})
+  );
+}
+
+export default freezeServices;
diff --git a/src/universal/model/Renderer.js b/src/universal/model/Renderer.js
index 731737e..bc98f3f 100644
--- a/src/universal/model/Renderer.js
+++ b/src/universal/model/Renderer.js
@@ -33,8 +33,7 @@ export default class Renderer {
   }
 
   getServicesWithMultiple() {
-    const options = { isServer: false };
-    return this.component.object.getServicesWithMultiple(this.context, options);
+    return this.component.object.getServicesWithMultiple(this.context);
   }
 
   render() {
diff --git a/src/universal/utils/constants.js b/src/universal/utils/constants.js
index 684b0f9..5bc9c28 100644
--- a/src/universal/utils/constants.js
+++ b/src/universal/utils/constants.js
@@ -19,13 +19,6 @@ const HTTP_STATUS_CODES = {
 const JSON_CONTENT_TYPE = 'application/json';
 const CONTENT_TYPE_HEADER = 'Content-Type';
 const REQUEST_TYPES_WITH_BODY = ['post', 'put', 'patch'];
-const SERVICES = Object.freeze(
-  Object.keys(appConfig.services).reduce((obj, val) => {
-    // eslint-disable-next-line no-param-reassign
-    obj[val] = Symbol(val);
-    return obj;
-  }, {})
-);
 
 const BLACKLIST_OUTPUT = [
   'componentName',
@@ -41,6 +34,5 @@ export {
   JSON_CONTENT_TYPE,
   CONTENT_TYPE_HEADER,
   REQUEST_TYPES_WITH_BODY,
-  SERVICES,
   BLACKLIST_OUTPUT
 };

From 3b3a5ce186b71e77d572003fe8886b53a8d660eb Mon Sep 17 00:00:00 2001
From: ahmetkuslular <ahmetkuslular@gmail.com>
Date: Mon, 6 Jun 2022 15:23:15 +0300
Subject: [PATCH 17/20] Minor updates

---
 config/string.js                              |  4 +-
 src/render.js                                 | 18 ++------
 src/renderMultiple.js                         | 22 ++++-----
 src/universal/components/Preview.js           |  4 +-
 .../apiService/apiManager/BaseApiManager.js   | 19 ++++++++
 .../apiService/apiManager/ClientApiManager.js | 12 +++--
 .../apiService/apiManager/ServerApiManager.js |  6 +--
 .../apiManagerCache/ClientApiManagerCache.js  |  4 +-
 .../apiManagerCache/ServerApiManagerCache.js  |  4 +-
 src/universal/partials/Welcome/PartialList.js | 45 +++++++++----------
 src/universal/partials/Welcome/partials.js    |  4 +-
 src/universal/partials/Welcome/styled.js      |  5 ++-
 src/universal/service/CookieService.js        | 27 +++++++++++
 src/universal/service/RenderService.js        |  9 ----
 src/universal/utils/constants.js              |  1 -
 src/universal/utils/previewHelper.js          | 26 +++++++++++
 16 files changed, 133 insertions(+), 77 deletions(-)
 create mode 100644 src/universal/service/CookieService.js
 create mode 100644 src/universal/utils/previewHelper.js

diff --git a/config/string.js b/config/string.js
index 0a766dd..bbab92d 100644
--- a/config/string.js
+++ b/config/string.js
@@ -39,9 +39,9 @@ function replaceString() {
       flags: 'g'
     },
     {
-      search: '__V_PREVIEW_PAGES__',
+      search: '__V_PREVIEW__',
       replace: normalizeUrl(
-        voltranConfig.routing.previewPages || path.resolve(__dirname, './emptyModule.js')
+        voltranConfig.routing.preview || path.resolve(__dirname, './emptyModule.js')
       ),
       flags: 'g'
     },
diff --git a/src/render.js b/src/render.js
index 7f28977..3ac3160 100644
--- a/src/render.js
+++ b/src/render.js
@@ -1,7 +1,6 @@
 import xss from 'xss';
 
 import { matchUrlInRouteConfigs } from './universal/core/route/routeUtils';
-import Preview from './universal/components/Preview';
 import { BLACKLIST_OUTPUT, HTTP_STATUS_CODES } from './universal/utils/constants';
 import metrics from './metrics';
 import {
@@ -14,20 +13,9 @@ import {
 import Component from './universal/model/Component';
 import logger from './universal/utils/logger';
 import omit from 'lodash/omit';
+import { getPreviewFile } from './universal/utils/previewHelper';
 
 const appConfig = require('__APP_CONFIG__');
-const previewPages = require('__V_PREVIEW_PAGES__');
-
-function getPreview(output) {
-  const { layouts = {} } = previewPages?.default || {};
-  let PreviewFile = Preview;
-
-  if (layouts.default) {
-    PreviewFile = layouts.default;
-  }
-
-  return PreviewFile(output);
-}
 
 const render = async (req, res) => {
   const isWithoutStateValue = isWithoutState(req.query);
@@ -102,8 +90,10 @@ const render = async (req, res) => {
           context
         );
         const requestDispatcherFullHtml = requestDispatcherResponse.fullHtml;
+        const PreviewFile = getPreviewFile(context.query);
+        const body = [requestDispatcherFullHtml, fullHtml].join('\n');
 
-        const response = getPreview([requestDispatcherFullHtml, fullHtml].join('\n'));
+        const response = PreviewFile({ body, componentName });
 
         res.status(statusCode).html(response);
       } else {
diff --git a/src/renderMultiple.js b/src/renderMultiple.js
index cdb367f..4db40e4 100644
--- a/src/renderMultiple.js
+++ b/src/renderMultiple.js
@@ -3,19 +3,16 @@ import async from 'async';
 import { matchUrlInRouteConfigs } from './universal/core/route/routeUtils';
 import Component from './universal/model/Component';
 import Renderer from './universal/model/Renderer';
-import Preview from './universal/components/Preview';
 import {
   isRequestDispatcher,
   isPreview,
   isWithoutHTML,
-  isWithoutState,
-  getPreviewLayout
+  isWithoutState
 } from './universal/service/RenderService';
 import metrics from './metrics';
 import { HTTP_STATUS_CODES } from './universal/utils/constants';
 import logger from './universal/utils/logger';
-
-const previewPages = require('__V_PREVIEW_PAGES__');
+import { getPreviewFile } from './universal/utils/previewHelper';
 
 const getRenderOptions = req => {
   const isPreviewValue = isPreview(req.query) || false;
@@ -192,21 +189,20 @@ async function getResponses(renderers) {
 }
 
 async function getPreview(responses, requestCount, req) {
-  const layoutName = getPreviewLayout(req.query);
-  const { layouts = {} } = previewPages?.default || {};
   const componentNames = Object.keys(responses);
-  let PreviewFile = Preview;
-
-  if (layouts[layoutName]) {
-    PreviewFile = layouts[layoutName];
-  }
+  const PreviewFile = getPreviewFile(req.query);
 
   const content = Object.keys(responses).map(name => {
     const componentName = responses?.[name]?.activeComponent?.componentName ?? '';
     return getLayoutWithClass(componentName, responses[name].fullHtml);
   });
+  const body = [...content].join('\n');
 
-  return PreviewFile([...content].join('\n'), `${requestCount} request!`, componentNames);
+  return PreviewFile({
+    body,
+    requestCount,
+    componentNames
+  });
 }
 
 const DEFAULT_PARTIALS = ['RequestDispatcher'];
diff --git a/src/universal/components/Preview.js b/src/universal/components/Preview.js
index 957ddae..af881ce 100644
--- a/src/universal/components/Preview.js
+++ b/src/universal/components/Preview.js
@@ -1,7 +1,7 @@
 const appConfig = require('__APP_CONFIG__');
 
-export default (body, title = null) => {
-  const additionalTitle = title ? ` - ${title}` : '';
+export default ({ body, componentName = '' }) => {
+  const additionalTitle = componentName ? ` - ${componentName}` : '';
 
   function cr(condition, ok, cancel) {
     return condition ? ok : cancel || '';
diff --git a/src/universal/core/apiService/apiManager/BaseApiManager.js b/src/universal/core/apiService/apiManager/BaseApiManager.js
index 80a621d..98fca23 100644
--- a/src/universal/core/apiService/apiManager/BaseApiManager.js
+++ b/src/universal/core/apiService/apiManager/BaseApiManager.js
@@ -1,9 +1,12 @@
 import axios from 'axios';
+import Cookies from 'js-cookie';
 import {
   CONTENT_TYPE_HEADER,
   JSON_CONTENT_TYPE,
   REQUEST_TYPES_WITH_BODY
 } from '../../../utils/constants';
+import voltranConfig from '../../../../../voltran.config';
+import CookieService from '../../../service/CookieService';
 
 function createBaseConfig() {
   return {};
@@ -22,6 +25,22 @@ class BaseApiManager {
       headers['Accept-Encoding'] = 'gzip, deflate';
     }
 
+    if (process.env.BROWSER && voltranConfig.setCookiesToHeader) {
+      const cookieMap = CookieService.getAllItems();
+
+      Object.keys(cookieMap).forEach(key => {
+        if (voltranConfig.setCookiesToHeaderKeys.length > 0) {
+          voltranConfig.setCookiesToHeaderKeys.map(item => {
+            if (key.indexOf(item) === 0) {
+              headers[key] = cookieMap[key];
+            }
+          });
+        } else {
+          headers[key] = cookieMap[key];
+        }
+      });
+    }
+
     this.api = this.createInstance({
       ...createBaseConfig(),
       ...customConfig,
diff --git a/src/universal/core/apiService/apiManager/ClientApiManager.js b/src/universal/core/apiService/apiManager/ClientApiManager.js
index 574fc0d..14e9c9f 100644
--- a/src/universal/core/apiService/apiManager/ClientApiManager.js
+++ b/src/universal/core/apiService/apiManager/ClientApiManager.js
@@ -1,10 +1,16 @@
 import createApiClient from '../utils/createApiClient';
 import BaseApiManager from './BaseApiManager';
 
-export default (config, timeout) => {
+export default (entity, serviceConfigs) => {
+  const baseURL = entity.clientUrl || entity.url || entity.serverUrl || '/';
+  const config = {
+    ...serviceConfigs,
+    ...entity?.config
+  };
+
   const apiManager = new BaseApiManager({
-    baseURL: config.clientUrl || config.url || config.serverUrl || '/',
-    timeout
+    baseURL,
+    ...config
   });
 
   return createApiClient(apiManager);
diff --git a/src/universal/core/apiService/apiManager/ServerApiManager.js b/src/universal/core/apiService/apiManager/ServerApiManager.js
index acb7e5e..1126492 100644
--- a/src/universal/core/apiService/apiManager/ServerApiManager.js
+++ b/src/universal/core/apiService/apiManager/ServerApiManager.js
@@ -9,10 +9,10 @@ const BASE_HTTP_AGENT_CONFIG = {
   rejectUnauthorized: false
 };
 
-export default (config, timeout) => {
+export default (entity, serviceConfigs) => {
   const apiManager = new BaseApiManager({
-    timeout,
-    baseURL: config.serverUrl || config.url || config.clientUrl || '/',
+    baseURL: entity.serverUrl || entity.url || entity.clientUrl || '/',
+    ...serviceConfigs,
     httpAgent: new http.Agent(BASE_HTTP_AGENT_CONFIG),
     httpsAgent: new https.Agent(BASE_HTTP_AGENT_CONFIG)
   });
diff --git a/src/universal/core/apiService/apiManagerCache/ClientApiManagerCache.js b/src/universal/core/apiService/apiManagerCache/ClientApiManagerCache.js
index 5dd1026..a92487a 100644
--- a/src/universal/core/apiService/apiManagerCache/ClientApiManagerCache.js
+++ b/src/universal/core/apiService/apiManagerCache/ClientApiManagerCache.js
@@ -2,8 +2,8 @@
 import ClientApiManager from '../apiManager/ClientApiManager';
 import createCache from '../utils/createCache';
 
-const { services, timeouts } = require('__APP_CONFIG__');
+const { services, serviceConfigs } = require('__APP_CONFIG__');
 
-const cache = createCache(ClientApiManager, services, timeouts.clientApiManager);
+const cache = createCache(ClientApiManager, services, serviceConfigs?.client);
 
 export default cache;
diff --git a/src/universal/core/apiService/apiManagerCache/ServerApiManagerCache.js b/src/universal/core/apiService/apiManagerCache/ServerApiManagerCache.js
index 2a56eeb..11ae446 100644
--- a/src/universal/core/apiService/apiManagerCache/ServerApiManagerCache.js
+++ b/src/universal/core/apiService/apiManagerCache/ServerApiManagerCache.js
@@ -2,8 +2,8 @@
 import ServerApiManager from '../apiManager/ServerApiManager';
 import createCache from '../utils/createCache';
 
-const { services, timeouts } = require('__APP_CONFIG__');
+const { services, serviceConfigs } = require('__APP_CONFIG__');
 
-const cache = createCache(ServerApiManager, services, timeouts.serverApiManager);
+const cache = createCache(ServerApiManager, services, serviceConfigs?.server);
 
 export default cache;
diff --git a/src/universal/partials/Welcome/PartialList.js b/src/universal/partials/Welcome/PartialList.js
index f227c18..fd90e8b 100644
--- a/src/universal/partials/Welcome/PartialList.js
+++ b/src/universal/partials/Welcome/PartialList.js
@@ -9,41 +9,40 @@ import partials from './partials';
 const sheet = new ServerStyleSheet();
 
 const Welcome = () => {
-  const { live = [], dev = [], page = [] } = groupBy(partials, item => item.status);
+  const { live = [], dev = [], page = [], ...others } = groupBy(partials, item => item.status);
 
-  const renderItem = item => (
+  const renderItem = ({ item, status }) => (
     <ListItem status={item.status}>
       <Link href={item.previewUrl ? item.previewUrl : `${item.url}?preview`} target="_blank">
         <Name>{item.name}</Name>
         <Url>{item.url}</Url>
-        <Footer status={item.status}>
-          <Label status={item.status}>
-            {item.status} <Dot status={item.status} />
+        <Footer status={status}>
+          <Label status={status}>
+            {item.status} <Dot status={status} />
           </Label>
         </Footer>
       </Link>
     </ListItem>
   );
+
+  const renderGroup = ({ title, value, status }) => {
+    return (
+      <>
+        <HeaderName>{title}</HeaderName>
+        {value.map(item => renderItem({ item, status }))}
+      </>
+    );
+  };
+
   return (
     <List>
-      {live.length > 0 && (
-        <>
-          <HeaderName>Live</HeaderName>
-          {live.map(item => renderItem(item))}
-        </>
-      )}
-      {page.length > 0 && (
-        <>
-          <HeaderName>Pages</HeaderName>
-          {page.map(item => renderItem(item))}
-        </>
-      )}
-      {dev.length > 0 && (
-        <>
-          <HeaderName>Development</HeaderName>
-          {dev.map(item => renderItem(item))}
-        </>
-      )}
+      {page.length > 0 && renderGroup({ title: 'page', value: page, status: 'page' })}
+      {live.length > 0 && renderGroup({ title: 'live', value: live, status: 'live' })}
+      {dev.length > 0 && renderGroup({ title: 'dev', value: dev, status: 'dev' })}
+      {Object.entries(others).map((entity, index) => {
+        const [key, value] = entity;
+        return renderGroup({ title: key, value, status: index + 1 });
+      })}
     </List>
   );
 };
diff --git a/src/universal/partials/Welcome/partials.js b/src/universal/partials/Welcome/partials.js
index c734fec..91f1289 100644
--- a/src/universal/partials/Welcome/partials.js
+++ b/src/universal/partials/Welcome/partials.js
@@ -1,6 +1,6 @@
 import components from '../../core/route/components';
 
-const previewPages = require('__V_PREVIEW_PAGES__');
+const preview = require('__V_PREVIEW__');
 
 const partials = [];
 const BLACKLIST = ['REQUEST_DISPATCHER'];
@@ -14,7 +14,7 @@ Object.keys(components).forEach(path => {
     });
   }
 });
-const pages = previewPages?.default?.pages || [];
+const pages = preview?.default?.pages || [];
 partials.push(...pages);
 
 export default partials;
diff --git a/src/universal/partials/Welcome/styled.js b/src/universal/partials/Welcome/styled.js
index 423fa3c..0f55d4f 100644
--- a/src/universal/partials/Welcome/styled.js
+++ b/src/universal/partials/Welcome/styled.js
@@ -3,7 +3,10 @@ import styled from 'styled-components';
 const STATUS_COLOR = {
   live: '#8dc63f',
   dev: '#FF6000',
-  page: '#00abff'
+  page: '#00abff',
+  1: '#9b59b6',
+  2: '#c0392b',
+  3: '#16a085'
 };
 
 export const List = styled.ul`
diff --git a/src/universal/service/CookieService.js b/src/universal/service/CookieService.js
new file mode 100644
index 0000000..e62c0ed
--- /dev/null
+++ b/src/universal/service/CookieService.js
@@ -0,0 +1,27 @@
+import Cookies from 'js-cookie';
+
+const appConfig = require('__APP_CONFIG__');
+
+const domain = appConfig.cookieStorageUrl;
+
+export default class CookieService {
+  static setItem(key, value, options) {
+    Cookies.set(key, value, { domain, ...options });
+  }
+
+  static getItem(key) {
+    return Cookies.get(key);
+  }
+
+  static getAllItems() {
+    return Cookies.get();
+  }
+
+  static getJSON(key) {
+    return Cookies.getJSON(key);
+  }
+
+  static removeItem(key, options) {
+    Cookies.remove(key, { domain, ...options });
+  }
+}
diff --git a/src/universal/service/RenderService.js b/src/universal/service/RenderService.js
index 78c3f5c..0cd01b3 100644
--- a/src/universal/service/RenderService.js
+++ b/src/universal/service/RenderService.js
@@ -65,14 +65,6 @@ const isPreview = query => {
   return false;
 };
 
-const getPreviewLayout = query => {
-  if (isPreview(query)) {
-    return query?.preview;
-  }
-
-  return '';
-};
-
 const isWithoutState = query => {
   return query.withoutState === '';
 };
@@ -116,7 +108,6 @@ export {
   getStates,
   isWithoutHTML,
   isPreview,
-  getPreviewLayout,
   isRequestDispatcher,
   isWithoutState,
   renderComponent
diff --git a/src/universal/utils/constants.js b/src/universal/utils/constants.js
index 5bc9c28..c35bdaa 100644
--- a/src/universal/utils/constants.js
+++ b/src/universal/utils/constants.js
@@ -1,4 +1,3 @@
-const appConfig = require('__APP_CONFIG__');
 const voltranConfig = require('../../../voltran.config');
 
 const WINDOW_GLOBAL_PARAMS = {
diff --git a/src/universal/utils/previewHelper.js b/src/universal/utils/previewHelper.js
new file mode 100644
index 0000000..3945812
--- /dev/null
+++ b/src/universal/utils/previewHelper.js
@@ -0,0 +1,26 @@
+import Preview from '../components/Preview';
+import { isPreview } from '../service/RenderService';
+
+const previewPages = require('__V_PREVIEW__');
+
+const getPreviewLayout = query => {
+  if (isPreview(query)) {
+    return query?.preview;
+  }
+
+  return '';
+};
+
+export const getPreviewFile = query => {
+  const layoutName = getPreviewLayout(query);
+  const { previewLayouts = {} } = previewPages?.default || {};
+  let PreviewFile = Preview;
+
+  if (previewLayouts[layoutName]) {
+    PreviewFile = previewLayouts[layoutName];
+  } else if (previewLayouts.default) {
+    PreviewFile = previewLayouts.default;
+  }
+
+  return PreviewFile;
+};

From a70e8d6be4439ab2daf7f05b4d6f4d3c7f2f5de4 Mon Sep 17 00:00:00 2001
From: ahmetkuslular <ahmetkuslular@gmail.com>
Date: Mon, 13 Jun 2022 15:19:37 +0300
Subject: [PATCH 18/20] ADD request dispatcher client

---
 config/string.js                              |  6 +-
 src/index.js                                  |  4 +-
 src/renderMultiple.js                         |  3 +-
 .../RequestDispatcher/RequestDispatcher.js    |  4 +-
 .../RequestDispatcher.utils.js                |  5 +-
 .../apiService/apiManager/BaseApiManager.js   |  1 -
 src/universal/hooks/useRequestDispatcher.js   | 82 +++++++++++++++++++
 src/universal/utils/requestDispatcher.js      | 19 +++++
 8 files changed, 114 insertions(+), 10 deletions(-)
 create mode 100644 src/universal/hooks/useRequestDispatcher.js
 create mode 100644 src/universal/utils/requestDispatcher.js

diff --git a/config/string.js b/config/string.js
index bbab92d..6358e7a 100644
--- a/config/string.js
+++ b/config/string.js
@@ -34,15 +34,13 @@ function replaceString() {
     {
       search: '__V_REQUEST_CONFIGS__',
       replace: normalizeUrl(
-        voltranConfig.routing.requestConfigs || path.resolve(__dirname, './emptyModule.js')
+        voltranConfig.requestConfigs || path.resolve(__dirname, './emptyModule.js')
       ),
       flags: 'g'
     },
     {
       search: '__V_PREVIEW__',
-      replace: normalizeUrl(
-        voltranConfig.routing.preview || path.resolve(__dirname, './emptyModule.js')
-      ),
+      replace: normalizeUrl(voltranConfig.preview || path.resolve(__dirname, './emptyModule.js')),
       flags: 'g'
     },
     {
diff --git a/src/index.js b/src/index.js
index a17b25e..734b89d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,7 @@
 import voltran from './universal/partials/withBaseComponent';
 import apiService, { ClientApiManager, ServerApiManager } from './universal/core/apiService';
+import requestDispatcher from './universal/utils/requestDispatcher';
+import useRequestDispatcher from './universal/hooks/useRequestDispatcher';
 
 export default voltran;
-export { ClientApiManager, ServerApiManager, apiService };
+export { ClientApiManager, ServerApiManager, apiService, requestDispatcher, useRequestDispatcher };
diff --git a/src/renderMultiple.js b/src/renderMultiple.js
index 4db40e4..acf3e87 100644
--- a/src/renderMultiple.js
+++ b/src/renderMultiple.js
@@ -45,6 +45,7 @@ function getRenderer(name, req) {
       cookies,
       url: urlWithPath,
       userAgent,
+      headers,
       componentPath: fullComponentPath,
       ...renderOptions
     };
@@ -178,7 +179,7 @@ async function getResponses(renderers) {
     .filter(result => result.value != null)
     .reduce((obj, item) => {
       const el = obj;
-      const name = `${item.key}_${item.id}`;
+      const name = `${item.key}`;
 
       if (!el[name]) el[name] = item.value;
 
diff --git a/src/universal/components/RequestDispatcher/RequestDispatcher.js b/src/universal/components/RequestDispatcher/RequestDispatcher.js
index 42a87dd..99010af 100644
--- a/src/universal/components/RequestDispatcher/RequestDispatcher.js
+++ b/src/universal/components/RequestDispatcher/RequestDispatcher.js
@@ -23,14 +23,14 @@ const RequestDispatcher = () => {
     const eventBus = getEventBus();
 
     const broadcast = (effect, error, body) => {
-      effect.Subscribers.forEach(responseName => {
+      effect.subscribers.forEach(responseName => {
         eventBus.emit(`${responsePrefix}${responseName}`, { error, body });
       });
     };
 
     const runEffect = (effect, params) => {
       effect
-        .Request({ params })
+        .request({ params })
         .then(response => broadcast(effect, null, response))
         .catch(error => broadcast(effect, error, null));
     };
diff --git a/src/universal/components/RequestDispatcher/RequestDispatcher.utils.js b/src/universal/components/RequestDispatcher/RequestDispatcher.utils.js
index 7541882..0cd2d38 100644
--- a/src/universal/components/RequestDispatcher/RequestDispatcher.utils.js
+++ b/src/universal/components/RequestDispatcher/RequestDispatcher.utils.js
@@ -6,7 +6,10 @@ const isEventExist = eventName => {
 };
 
 const isExitCondition = condition => {
-  return Object.keys(getProjectWindowData()).indexOf(condition) > -1 || condition === 'default';
+  return (
+    Object.keys(getProjectWindowData()).indexOf(condition?.toUpperCase()) > -1 ||
+    condition === 'default'
+  );
 };
 
 export { isExitCondition, isEventExist };
diff --git a/src/universal/core/apiService/apiManager/BaseApiManager.js b/src/universal/core/apiService/apiManager/BaseApiManager.js
index 98fca23..82d86ae 100644
--- a/src/universal/core/apiService/apiManager/BaseApiManager.js
+++ b/src/universal/core/apiService/apiManager/BaseApiManager.js
@@ -1,5 +1,4 @@
 import axios from 'axios';
-import Cookies from 'js-cookie';
 import {
   CONTENT_TYPE_HEADER,
   JSON_CONTENT_TYPE,
diff --git a/src/universal/hooks/useRequestDispatcher.js b/src/universal/hooks/useRequestDispatcher.js
new file mode 100644
index 0000000..a5bee3f
--- /dev/null
+++ b/src/universal/hooks/useRequestDispatcher.js
@@ -0,0 +1,82 @@
+import { useEffect, useReducer } from 'react';
+import requestDispatcher from '../utils/requestDispatcher';
+
+function createAction(type, payload) {
+  return {
+    type,
+    payload
+  };
+}
+
+function reducer(state, action) {
+  switch (action.type) {
+    case 'UPDATE_DATA':
+      return { ...state, ...action.payload };
+    default:
+      return state;
+  }
+}
+
+const initialState = {
+  isLoading: false,
+  data: null,
+  err: null
+};
+
+function init(defaultData) {
+  return { ...initialState, data: { ...initialState.data, ...defaultData } };
+}
+
+const useRequestDispatcher = ({ effect, subscribe = '', defaultData }) => {
+  const [store, dispatch] = useReducer(reducer, defaultData, init);
+  const { isLoading, data, error } = store;
+
+  const fetchData = params => {
+    if (effect) {
+      dispatch(
+        createAction('SET_LOADING', {
+          isLoading: true
+        })
+      );
+      if (Array.isArray(effect)) {
+        effect?.forEach(request => {
+          requestDispatcher.request(request, params);
+        });
+      } else {
+        requestDispatcher.request(effect, params);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (process.env.BROWSER && subscribe) {
+      requestDispatcher.subscribe(subscribe, (error, data) => {
+        if (error) {
+          dispatch(
+            createAction('UPDATE_DATA', {
+              isLoading: false,
+              error
+            })
+          );
+        } else {
+          dispatch(
+            createAction('UPDATE_DATA', {
+              isLoading: false,
+              error: null,
+              data
+            })
+          );
+        }
+      });
+    }
+  }, []);
+
+  return {
+    isLoading,
+    data,
+    error,
+    fetchData
+  };
+};
+
+export default useRequestDispatcher;
diff --git a/src/universal/utils/requestDispatcher.js b/src/universal/utils/requestDispatcher.js
new file mode 100644
index 0000000..fba05d7
--- /dev/null
+++ b/src/universal/utils/requestDispatcher.js
@@ -0,0 +1,19 @@
+import { getEventBus } from './helper';
+
+const responsePrefix = 'RequestDispatcher.Response.';
+const requestPrefix = 'RequestDispatcher.';
+
+export default {
+  subscribe(requestName, callback) {
+    getEventBus().on(`${responsePrefix}${requestName}`, ({ error, body }) => {
+      if (error) {
+        callback(error, null);
+      } else {
+        callback(null, body);
+      }
+    });
+  },
+  request(requestName, params, options) {
+    getEventBus().emit(`${requestPrefix}${requestName}`, params, options);
+  }
+};

From 2d105e87aac23c8a5bed1150f3d43d4943112fe5 Mon Sep 17 00:00:00 2001
From: ahmetkuslular <ahmetkuslular@gmail.com>
Date: Wed, 15 Jun 2022 17:19:31 +0300
Subject: [PATCH 19/20] New Welcome screen

---
 .../partials/Welcome/PartialCards.js          |  70 ++++
 src/universal/partials/Welcome/PartialList.js |  52 ---
 src/universal/partials/Welcome/Welcome.js     |  83 ++++-
 src/universal/partials/Welcome/styled.js      | 145 --------
 .../partials/Welcome/welcomeStyle.js          | 322 ++++++++++++++++++
 5 files changed, 458 insertions(+), 214 deletions(-)
 create mode 100644 src/universal/partials/Welcome/PartialCards.js
 delete mode 100644 src/universal/partials/Welcome/PartialList.js
 delete mode 100644 src/universal/partials/Welcome/styled.js
 create mode 100644 src/universal/partials/Welcome/welcomeStyle.js

diff --git a/src/universal/partials/Welcome/PartialCards.js b/src/universal/partials/Welcome/PartialCards.js
new file mode 100644
index 0000000..b679102
--- /dev/null
+++ b/src/universal/partials/Welcome/PartialCards.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import groupBy from 'lodash/groupBy';
+import ReactDOMServer from 'react-dom/server';
+import { ServerStyleSheet } from 'styled-components';
+
+import partials from './partials';
+const STATUS_COLOR = {
+  live: '#8dc63f',
+  dev: '#FF6000',
+  page: '#00abff',
+  1: '#9b59b6',
+  2: '#c0392b',
+  3: '#16a085'
+};
+
+const sheet = new ServerStyleSheet();
+
+const Welcome = () => {
+  const { live = [], dev = [], page = [], ...others } = groupBy(partials, item => item.status);
+
+  const renderItem = ({ item, status, title }) => (
+    <a
+      href={item.previewUrl ? item.previewUrl : `${item.url}?preview`}
+      target="_blank"
+      className="link"
+    >
+      <div className="card">
+        <div className="card-header">
+          <div className="badge" style={{ backgroundColor: STATUS_COLOR[status] }}>
+            {title}
+          </div>
+        </div>
+        <div className="card-title">{item.name}</div>
+        <div className="card-subtitle">
+          {status === 'page' ? 'Multiple partials' : 'Single partial'}
+        </div>
+        <button className="url-button detail-button">{item.previewUrl || item.url}</button>
+      </div>
+    </a>
+  );
+
+  const renderGroup = ({ title, data, status }) => {
+    return (
+      <div className="group">
+        <div className="group-content">
+          <div className="group-title">
+            {title.toUpperCase()} ({data.length})
+          </div>
+        </div>
+        <div className="cards">{data.map(item => renderItem({ item, status, title }))}</div>
+      </div>
+    );
+  };
+
+  return (
+    <div>
+      {page.length > 0 && renderGroup({ title: 'page', data: page, status: 'page' })}
+      {live.length > 0 && renderGroup({ title: 'live', data: live, status: 'live' })}
+      {dev.length > 0 && renderGroup({ title: 'dev', data: dev, status: 'dev' })}
+      {Object.entries(others).map((entity, index) => {
+        const [key, data] = entity;
+        return renderGroup({ title: key, data, status: index + 1 });
+      })}
+    </div>
+  );
+};
+export default ReactDOMServer.renderToString(sheet.collectStyles(<Welcome />));
+const styleTags = sheet.getStyleTags();
+
+export { styleTags };
diff --git a/src/universal/partials/Welcome/PartialList.js b/src/universal/partials/Welcome/PartialList.js
deleted file mode 100644
index fd90e8b..0000000
--- a/src/universal/partials/Welcome/PartialList.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import groupBy from 'lodash/groupBy';
-import ReactDOMServer from 'react-dom/server';
-import { ServerStyleSheet } from 'styled-components';
-
-import { List, ListItem, Name, Url, Footer, Label, Dot, Link, HeaderName } from './styled';
-import partials from './partials';
-
-const sheet = new ServerStyleSheet();
-
-const Welcome = () => {
-  const { live = [], dev = [], page = [], ...others } = groupBy(partials, item => item.status);
-
-  const renderItem = ({ item, status }) => (
-    <ListItem status={item.status}>
-      <Link href={item.previewUrl ? item.previewUrl : `${item.url}?preview`} target="_blank">
-        <Name>{item.name}</Name>
-        <Url>{item.url}</Url>
-        <Footer status={status}>
-          <Label status={status}>
-            {item.status} <Dot status={status} />
-          </Label>
-        </Footer>
-      </Link>
-    </ListItem>
-  );
-
-  const renderGroup = ({ title, value, status }) => {
-    return (
-      <>
-        <HeaderName>{title}</HeaderName>
-        {value.map(item => renderItem({ item, status }))}
-      </>
-    );
-  };
-
-  return (
-    <List>
-      {page.length > 0 && renderGroup({ title: 'page', value: page, status: 'page' })}
-      {live.length > 0 && renderGroup({ title: 'live', value: live, status: 'live' })}
-      {dev.length > 0 && renderGroup({ title: 'dev', value: dev, status: 'dev' })}
-      {Object.entries(others).map((entity, index) => {
-        const [key, value] = entity;
-        return renderGroup({ title: key, value, status: index + 1 });
-      })}
-    </List>
-  );
-};
-export default ReactDOMServer.renderToString(sheet.collectStyles(<Welcome />));
-const styleTags = sheet.getStyleTags();
-
-export { styleTags };
diff --git a/src/universal/partials/Welcome/Welcome.js b/src/universal/partials/Welcome/Welcome.js
index 173aff5..97413c4 100644
--- a/src/universal/partials/Welcome/Welcome.js
+++ b/src/universal/partials/Welcome/Welcome.js
@@ -1,4 +1,7 @@
-import PartialList, { styleTags } from './PartialList';
+import PartialCards from './PartialCards';
+import welcomeStyle from './welcomeStyle';
+
+import voltranConfig from '../../../../voltran.config';
 
 export default () => {
   return `
@@ -6,23 +9,69 @@ export default () => {
       <head>
         <title>Welcome</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <style>
-          * {
-            box-sizing: border-box;
-          }
-          body {
-            background: #f5f5f5;
-            margin: 0 auto;
-            padding: 10px;
-            font-family: 'Lato', sans-serif;
-            text-shadow: 0 0 1px rgba(255, 255, 255, 0.004);
-            font-size: 100%;
-            font-weight: 400;
-          }
-        </style>
-        ${styleTags}
+        ${welcomeStyle()}
       </head>
-      <body>${PartialList}</body>
+      <body>
+        <div class="container">
+            <div class="header">
+              <div class="logo">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="transform: rotate(180deg);">
+                  <path
+                    xmlns="http://www.w3.org/2000/svg"
+                    d="M512 503.5H381.7a48 48 0 01-45.3-32.1L265 268.1l-9-25.5 2.7-124.6L338.2 8.5l23.5 67.1L512 503.5z"
+                    fill="#0473ff"
+                    data-original="#28b446"
+                  />
+                  <path
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="#0473ff"
+                    data-original="#219b38"
+                    d="M361.7 75.6L265 268.1l-9-25.5 2.7-124.6L338.2 8.5z"
+                  />
+                  <path
+                    xmlns="http://www.w3.org/2000/svg"
+                    d="M338.2 8.5l-82.2 234-80.4 228.9a48 48 0 01-45.3 32.1H0l173.8-495h164.4z"
+                    fill="#0473ff"
+                    data-original="#518ef8"
+                  />
+                </svg>
+               ${voltranConfig.prefix} MikroFrontend Interface
+              <div class="settings">
+                <div class="dark-light">
+                  <svg
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    fill="none"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
+                  </svg>
+                </div>
+              </div>
+            </div>
+            </div>
+            <div class="wrapper">
+              <div class="main-container">
+                ${PartialCards}
+              </div>
+            </div>
+        </div>
+        <script>
+        const toggleButton = document.querySelector(".dark-light");
+        let theme = localStorage.getItem("voltran-welcome-theme");
+
+        if(theme === 'dark-mode'){
+           document.body.classList.toggle("dark-mode");
+        }
+
+        toggleButton.addEventListener("click", () => {
+          document.body.classList.toggle("dark-mode");
+          localStorage.setItem("voltran-welcome-theme", document.body.classList.value);
+        });
+        </script>
+      </body>
     </html>
   `;
 };
diff --git a/src/universal/partials/Welcome/styled.js b/src/universal/partials/Welcome/styled.js
deleted file mode 100644
index 0f55d4f..0000000
--- a/src/universal/partials/Welcome/styled.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import styled from 'styled-components';
-
-const STATUS_COLOR = {
-  live: '#8dc63f',
-  dev: '#FF6000',
-  page: '#00abff',
-  1: '#9b59b6',
-  2: '#c0392b',
-  3: '#16a085'
-};
-
-export const List = styled.ul`
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  margin-bottom: 20px;
-`;
-
-export const HeaderName = styled.div`
-  font-size: 36px;
-  font-weight: bold;
-  margin: 10px;
-`;
-
-export const ListItem = styled.li`
-  padding: 20px;
-  display: inline-block;
-  vertical-align: top;
-  height: 120px;
-  width: 240px;
-  margin: 10px;
-  cursor: pointer;
-  border-radius: 10px;
-
-  position: relative;
-  background-color: #fff;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
-  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
-
-  :after {
-    content: '';
-    border-radius: 10px;
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-    opacity: 0;
-    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
-    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
-  }
-
-  &:hover {
-    transform: scale(1.02, 1.02);
-    :after {
-      opacity: 1;
-    }
-  }
-
-  @media screen and (max-width: 600px) {
-    display: block;
-    width: auto;
-    height: 150px;
-    margin: 10px auto;
-  }
-`;
-
-export const Link = styled.a`
-  text-decoration: none;
-  color: #49494a;
-
-  &:before {
-    position: absolute;
-    z-index: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: block;
-    content: '';
-  }
-`;
-
-export const Name = styled.span`
-  font-weight: 800;
-  display: block;
-  max-width: 80%;
-  font-size: 16px;
-  line-height: 18px;
-`;
-
-export const Url = styled.span`
-  font-size: 11px;
-  line-height: 16px;
-  color: #a1a1a4;
-`;
-
-export const Footer = styled.span`
-  display: block;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  padding: 20px;
-  border-top: 1px solid ${({ status }) => (status && STATUS_COLOR[status]) || '#eeeeee'}50;
-  font-size: 13px;
-`;
-
-export const Label = styled.span`
-  font-size: 13px;
-  align-items: center;
-  font-weight: bold;
-  display: flex;
-  position: absolute;
-  right: 20px;
-  top: 0;
-  line-height: 40px;
-  margin: 0 10px;
-
-  @media screen and (max-width: 200px) {
-    right: auto;
-    left: 10px;
-  }
-
-  color: ${({ status }) => (status && STATUS_COLOR[status]) || '#8dc63f'};
-`;
-
-export const Dot = styled.span`
-  display: inline-block;
-  vertical-align: middle;
-  width: 16px;
-  height: 16px;
-  overflow: hidden;
-  border-radius: 50%;
-  padding: 0;
-  text-indent: -9999px;
-  color: transparent;
-  line-height: 16px;
-  margin-left: 10px;
-  background: ${({ status }) => (status && STATUS_COLOR[status]) || '#8dc63f'};
-`;
diff --git a/src/universal/partials/Welcome/welcomeStyle.js b/src/universal/partials/Welcome/welcomeStyle.js
new file mode 100644
index 0000000..9b09e2b
--- /dev/null
+++ b/src/universal/partials/Welcome/welcomeStyle.js
@@ -0,0 +1,322 @@
+const welcomeStyle = () => {
+  return `<style>
+          @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
+          * {
+            outline: none;
+            box-sizing: border-box;
+          }
+          :root {
+            --body-bg-color: #e5ecef;
+            --theme-bg-color: #fafafb;
+            --body-font: "Poppins", sans-serif;
+            --body-color: #2f2f33;
+            --active-color: #0162ff;
+            --active-light-color: #e1ebfb;
+            --header-bg-color: #fff;
+            --border-color: #d8d8d8;
+            --alert-bg-color: #e8f2ff;
+            --subtitle-color: #83838e;
+            --inactive-color: #f0f0f0;
+            --button-color: #fff;
+          }
+          .dark-mode {
+            --body-bg-color: #1d1d1d;
+            --theme-bg-color: #13131a;
+            --header-bg-color: #1c1c24;
+            --body-color: #fff;
+            --inactive-color: #292932;
+            --active-light-color: #263d63;
+            --border-color: #26262f;
+          }
+
+          html {
+            box-sizing: border-box;
+            -webkit-font-smoothing: antialiased;
+          }
+
+          body {
+            background-color: var(--body-bg-color);
+            font-family: var(--body-font);
+            font-size: 15px;
+            color: var(--body-color);
+            margin:0;
+            padding:0;
+          }
+          .dark-light {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          .dark-light svg {
+            margin-right: 8px;
+            width: 22px;
+            cursor: pointer;
+            fill: transparent;
+            transition: 0.5s;
+          }
+          .dark-mode .dark-light svg {
+            fill: #ffce45;
+            stroke: #ffce45;
+          }
+
+          .dark-mode .detail-button {
+            background-color: var(--inactive-color);
+            color: var(--subtitle-color);
+          }
+
+          .container {
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            margin: 0 auto;
+            overflow: hidden;
+            background-color: var(--theme-bg-color);
+          }
+
+          .logo {
+            display: flex;
+            align-items: center;
+            font-weight: 600;
+            font-size: 18px;
+            cursor: pointer;
+            justify-content: center;
+          }
+          .logo svg {
+            width: 24px;
+            margin-right: 12px;
+          }
+
+          .header {
+            display: flex;
+            align-items: center;
+            transition: box-shadow 0.3s;
+            flex-shrink: 0;
+            padding: 0 40px;
+            white-space: nowrap;
+            background-color: var(--header-bg-color);
+            height: 60px;
+            width: 100%;
+            font-size: 14px;
+            justify-content: space-between;
+          }
+          .settings {
+            display: flex;
+            align-items: center;
+            font-weight: 500;
+            margin-left: 20px;
+          }
+          .settings svg {
+            width: 20px;
+            color: #94949f;
+          }
+
+          .wrapper {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+            scroll-behavior: smooth;
+            padding: 30px 40px;
+            overflow: auto;
+          }
+          .main-container {
+            display: flex;
+            flex-grow: 1;
+          }
+
+          .url-button {
+            border: none;
+            color: var(--button-color);
+            background-color: var(--active-color);
+            padding: 8px 10px;
+            border-radius: 6px;
+            font-size: 13px;
+            font-weight: 600;
+            margin-top: 14px;
+          }
+
+          @-webkit-keyframes slideY {
+            0% {
+              opacity: 0;
+              transform: translateY(200px);
+            }
+          }
+
+          @keyframes slideY {
+            0% {
+              opacity: 0;
+              transform: translateY(200px);
+            }
+          }
+          .group-content {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            -webkit-animation: slideY 0.6s both;
+                    animation: slideY 0.6s both;
+          }
+          .group-title {
+            font-size: 24px;
+            font-weight: 600;
+          }
+          .link {
+            color: inherit;
+            text-decoration: inherit;
+          }
+
+          .cards {
+            padding-top: 20px;
+            display: grid;
+            grid-template-columns: repeat(6, 1fr);
+            grid-column-gap: 25px;
+            grid-row-gap: 25px;
+            -webkit-animation: slideY 0.6s both;
+            animation: slideY 0.6s both;
+          }
+          @media screen and (max-width: 1600px) {
+            .cards {
+              grid-template-columns: repeat(4, 1fr);
+            }
+          }
+          @media screen and (max-width: 1500px) {
+            .cards {
+              grid-template-columns: repeat(3, 1fr);
+            }
+          }
+          @media screen and (max-width: 1212px) {
+            .cards {
+              grid-template-columns: repeat(2, 1fr);
+            }
+          }
+
+          .card {
+            padding: 20px 16px;
+            background-color: var(--header-bg-color);
+            border-radius: 8px;
+            cursor: pointer;
+            transition: 0.2s;
+            text-decoration: none;
+          }
+          .card:hover {
+            transform: scale(1.02);
+          }
+          .card svg {
+            width: 46px;
+            padding: 10px;
+            border-radius: 8px;
+          }
+          .card-title {
+            font-weight: 600;
+            margin-top: 16px;
+            font-size: 14px;
+          }
+          .card-subtitle {
+            color: var(--subtitle-color);
+            font-size: 13px;
+            margin-top: 14px;
+            line-height: 1.6em;
+          }
+          .card-header {
+            display: flex;
+            align-items: flex-start;
+          }
+          .badge{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: #f50;
+            font-weight: 600;
+            margin-top: 16px;
+            font-size: 14px;
+            padding: 5px 10px;
+            color: white;
+            border-radius: 5px;
+          }
+          .detail-button {
+            background-color: var(--active-light-color);
+            color: var(--active-color);
+            font-size: 11px;
+            font-weight: 500;
+            padding: 6px 8px;
+            border-radius: 4px;
+            text-align: start;
+          }
+          .detail-button + .detail-button {
+            margin-left: 4px;
+          }
+
+          .card-buttons {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+            margin-top: 4px;
+          }
+          .card-buttons,
+          .card-buttons {
+            margin-right: 12px;
+          }
+          .header-shadow {
+            box-shadow: 0 4px 20px rgba(88, 99, 148, 0.17);
+            z-index: 1;
+          }
+          .group {
+            padding-top: 20px;
+          }
+          @-webkit-keyframes slide {
+            0% {
+              opacity: 0;
+              transform: translateX(300px);
+            }
+          }
+
+          @keyframes slide {
+            0% {
+              opacity: 0;
+              transform: translateX(300px);
+            }
+          }
+
+
+          @media screen and (max-width: 730px) {
+            .group {
+              padding-left: 0;
+            }
+            .cards {
+              grid-template-columns: repeat(2, 1fr);
+            }
+          }
+
+
+          @media screen and (max-width: 620px) {
+            .cards {
+              grid-template-columns: repeat(1, 1fr);
+            }
+          }
+          @media screen and (max-width: 590px) {
+            .header-menu {
+              display: none;
+            }
+          }
+          @media screen and (max-width: 520px) {
+            .group-content {
+              flex-direction: column;
+              align-items: flex-start;
+            }
+            .main-container {
+            }
+          }
+          @media screen and (max-width: 380px) {
+
+            .wrapper {
+              padding: 20px;
+            }
+
+            .header {
+              padding: 0 20px;
+            }
+          }
+        </style>`;
+};
+
+export default welcomeStyle;

From 660dccd5f7fb7785883b36661e21b96e65bebc8c Mon Sep 17 00:00:00 2001
From: ahmetkuslular <ahmetkuslular@gmail.com>
Date: Thu, 16 Jun 2022 16:01:01 +0300
Subject: [PATCH 20/20] ADD api service middleware

---
 src/index.js                                      | 15 +++++++++++++--
 .../apiService/apiManager/ClientApiManager.js     |  4 ++--
 .../apiService/apiManager/ServerApiManager.js     |  4 ++--
 .../apiManagerCache/ClientApiManagerCache.js      |  8 ++++++--
 .../apiManagerCache/ServerApiManagerCache.js      |  8 ++++++--
 src/universal/core/apiService/apiService.js       |  5 +++--
 .../core/apiService/apiServiceMiddleware.js       |  9 +++++++++
 src/universal/core/apiService/index.js            |  1 +
 .../core/apiService/utils/createApiClient.js      | 15 ++++++---------
 .../core/apiService/utils/createCache.js          |  4 ++--
 10 files changed, 50 insertions(+), 23 deletions(-)
 create mode 100644 src/universal/core/apiService/apiServiceMiddleware.js

diff --git a/src/index.js b/src/index.js
index 734b89d..e0624ba 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,18 @@
 import voltran from './universal/partials/withBaseComponent';
-import apiService, { ClientApiManager, ServerApiManager } from './universal/core/apiService';
+import apiService, {
+  ClientApiManager,
+  ServerApiManager,
+  apiServiceMiddleware
+} from './universal/core/apiService';
 import requestDispatcher from './universal/utils/requestDispatcher';
 import useRequestDispatcher from './universal/hooks/useRequestDispatcher';
 
 export default voltran;
-export { ClientApiManager, ServerApiManager, apiService, requestDispatcher, useRequestDispatcher };
+export {
+  ClientApiManager,
+  ServerApiManager,
+  apiService,
+  apiServiceMiddleware,
+  requestDispatcher,
+  useRequestDispatcher
+};
diff --git a/src/universal/core/apiService/apiManager/ClientApiManager.js b/src/universal/core/apiService/apiManager/ClientApiManager.js
index 14e9c9f..a394a16 100644
--- a/src/universal/core/apiService/apiManager/ClientApiManager.js
+++ b/src/universal/core/apiService/apiManager/ClientApiManager.js
@@ -1,7 +1,7 @@
 import createApiClient from '../utils/createApiClient';
 import BaseApiManager from './BaseApiManager';
 
-export default (entity, serviceConfigs) => {
+export default (entity, serviceConfigs, func) => {
   const baseURL = entity.clientUrl || entity.url || entity.serverUrl || '/';
   const config = {
     ...serviceConfigs,
@@ -13,5 +13,5 @@ export default (entity, serviceConfigs) => {
     ...config
   });
 
-  return createApiClient(apiManager);
+  return createApiClient(apiManager, func);
 };
diff --git a/src/universal/core/apiService/apiManager/ServerApiManager.js b/src/universal/core/apiService/apiManager/ServerApiManager.js
index 1126492..e020c22 100644
--- a/src/universal/core/apiService/apiManager/ServerApiManager.js
+++ b/src/universal/core/apiService/apiManager/ServerApiManager.js
@@ -9,7 +9,7 @@ const BASE_HTTP_AGENT_CONFIG = {
   rejectUnauthorized: false
 };
 
-export default (entity, serviceConfigs) => {
+export default (entity, serviceConfigs, func) => {
   const apiManager = new BaseApiManager({
     baseURL: entity.serverUrl || entity.url || entity.clientUrl || '/',
     ...serviceConfigs,
@@ -17,5 +17,5 @@ export default (entity, serviceConfigs) => {
     httpsAgent: new https.Agent(BASE_HTTP_AGENT_CONFIG)
   });
 
-  return createApiClient(apiManager);
+  return createApiClient(apiManager, func);
 };
diff --git a/src/universal/core/apiService/apiManagerCache/ClientApiManagerCache.js b/src/universal/core/apiService/apiManagerCache/ClientApiManagerCache.js
index a92487a..7d4c0a7 100644
--- a/src/universal/core/apiService/apiManagerCache/ClientApiManagerCache.js
+++ b/src/universal/core/apiService/apiManagerCache/ClientApiManagerCache.js
@@ -4,6 +4,10 @@ import createCache from '../utils/createCache';
 
 const { services, serviceConfigs } = require('__APP_CONFIG__');
 
-const cache = createCache(ClientApiManager, services, serviceConfigs?.client);
+const getCache = func => {
+  const cache = createCache(ClientApiManager, services, serviceConfigs?.client, func);
 
-export default cache;
+  return cache;
+};
+
+export default getCache;
diff --git a/src/universal/core/apiService/apiManagerCache/ServerApiManagerCache.js b/src/universal/core/apiService/apiManagerCache/ServerApiManagerCache.js
index 11ae446..6c122e9 100644
--- a/src/universal/core/apiService/apiManagerCache/ServerApiManagerCache.js
+++ b/src/universal/core/apiService/apiManagerCache/ServerApiManagerCache.js
@@ -4,6 +4,10 @@ import createCache from '../utils/createCache';
 
 const { services, serviceConfigs } = require('__APP_CONFIG__');
 
-const cache = createCache(ServerApiManager, services, serviceConfigs?.server);
+const getCache = func => {
+  const cache = createCache(ServerApiManager, services, serviceConfigs?.server, func);
 
-export default cache;
+  return cache;
+};
+
+export default getCache;
diff --git a/src/universal/core/apiService/apiService.js b/src/universal/core/apiService/apiService.js
index c09c762..a1c8ce4 100644
--- a/src/universal/core/apiService/apiService.js
+++ b/src/universal/core/apiService/apiService.js
@@ -1,10 +1,11 @@
 import { ServerApiManagerCache, ClientApiManagerCache } from './apiManagerCache';
 
-const getApiService = () => {
+const getApiService = func => {
   const isBrowser = typeof window !== 'undefined';
 
-  return isBrowser ? ClientApiManagerCache : ServerApiManagerCache;
+  return isBrowser ? ClientApiManagerCache(func) : ServerApiManagerCache(func);
 };
 
 const apiService = getApiService();
 export default apiService;
+export { getApiService };
diff --git a/src/universal/core/apiService/apiServiceMiddleware.js b/src/universal/core/apiService/apiServiceMiddleware.js
new file mode 100644
index 0000000..025672d
--- /dev/null
+++ b/src/universal/core/apiService/apiServiceMiddleware.js
@@ -0,0 +1,9 @@
+import { getApiService } from './apiService';
+
+const apiServiceMiddleware = func => {
+  const apiService = getApiService(func);
+
+  return apiService;
+};
+
+export default apiServiceMiddleware;
diff --git a/src/universal/core/apiService/index.js b/src/universal/core/apiService/index.js
index d689927..820bc5a 100644
--- a/src/universal/core/apiService/index.js
+++ b/src/universal/core/apiService/index.js
@@ -1,3 +1,4 @@
 export { default } from './apiService';
 export { default as ClientApiManager } from './apiManagerCache/ClientApiManagerCache';
 export { default as ServerApiManager } from './apiManagerCache/ServerApiManagerCache';
+export { default as apiServiceMiddleware } from './apiServiceMiddleware';
diff --git a/src/universal/core/apiService/utils/createApiClient.js b/src/universal/core/apiService/utils/createApiClient.js
index cefebd0..74585c0 100644
--- a/src/universal/core/apiService/utils/createApiClient.js
+++ b/src/universal/core/apiService/utils/createApiClient.js
@@ -1,7 +1,7 @@
 import Request from '../../../model/Request';
 import { createCacheManagerInstance } from '../../cache/cacheUtils';
 
-function createApiClient(apiManager) {
+function createApiClient(apiManager, middlewareFunc) {
   const cacheManager = createCacheManagerInstance();
 
   function getSortedParams(nonSortedParams) {
@@ -21,17 +21,14 @@ function createApiClient(apiManager) {
   }
 
   function getPayload(url, method, params, configArgument) {
-    let payload;
-    if (configArgument) {
-      payload = { url, method, params, ...configArgument };
-    } else {
-      payload = { url, method, params };
-    }
-    return payload;
+    return { url, method, params, ...(configArgument && configArgument) };
   }
 
   function getRequest(method, url, paramsArgument, configArgument, response) {
-    const params = getSortedParams(paramsArgument);
+    let params = getSortedParams(paramsArgument);
+    if (middlewareFunc) {
+      params = middlewareFunc(params);
+    }
     const payload = getPayload(url, method, params, configArgument);
     const uri = apiManager.api.getUri(payload);
 
diff --git a/src/universal/core/apiService/utils/createCache.js b/src/universal/core/apiService/utils/createCache.js
index 2100ead..05f8b26 100644
--- a/src/universal/core/apiService/utils/createCache.js
+++ b/src/universal/core/apiService/utils/createCache.js
@@ -1,12 +1,12 @@
 import freezeServices from './freezeServices';
 
-const createCache = (ApiManager, services, timeout) => {
+const createCache = (ApiManager, services, config, func) => {
   const cache = {};
   const frozenServicesData = freezeServices(services);
 
   Object.entries(services).forEach(entity => {
     const [serviceKey, serviceValues] = entity;
-    cache[frozenServicesData[serviceKey]] = ApiManager(serviceValues, timeout);
+    cache[frozenServicesData[serviceKey]] = ApiManager(serviceValues, config, func);
   });
 
   return cache;