RESTRUCTURE - shared => src; removed shared/components; HTML/index.js…

… => utils/renderHtml.js

client/index.js

@@ -9,7 +9,7 @@ import { AsyncComponentProvider } from 'react-async-component';
 import './polyfills';
 
 import ReactHotLoader from './components/ReactHotLoader';
-import DemoApp from '../shared/components/DemoApp';
+import DemoApp from '../src/app/';
 
 // Get the DOM Element that will host our React application.
 const container = document.querySelector('#app');
@@ -58,7 +58,7 @@ if (process.env.BUILD_FLAG_IS_DEV === 'true' && module.hot) {
   // Accept changes to this file for hot reloading.
   module.hot.accept('./index.js');
   // Any changes to our App will cause a hotload re-render.
-  module.hot.accept('../shared/components/DemoApp', () => {
-    renderApp(require('../shared/components/DemoApp').default);
+  module.hot.accept('../src/app/', () => {
+    renderApp(require('../src/app/').default);
   });
 }

config/components/ClientConfig.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import serialize from 'serialize-javascript';
-import filterWithRules from '../../shared/utils/objects/filterWithRules';
+import filterWithRules from '../../src/utils/objects/filterWithRules';
 import values from '../values';
 
 // Filter the config down to the properties that are allowed to be included

config/utils/envVars.js

@@ -11,8 +11,8 @@ import dotenv from 'dotenv';
 import fs from 'fs';
 import path from 'path';
 
-import ifElse from '../../shared/utils/logic/ifElse';
-import removeNil from '../../shared/utils/arrays/removeNil';
+import ifElse from '../../src/utils/logic/ifElse';
+import removeNil from '../../src/utils/arrays/removeNil';
 
 import { log } from '../../internal/utils';
 

config/values.js

@@ -9,7 +9,7 @@ import * as EnvVars from './utils/envVars';
 
 const values = {
   // The configuration values that should be exposed to our client bundle.
-  // This value gets passed through the /shared/utils/objects/filterWithRules
+  // This value gets passed through the /src/utils/objects/filterWithRules
   // util to create a filter object that can be serialised and included
   // with our client bundle.
   clientConfigFilter: {
@@ -163,7 +163,7 @@ const values = {
       // Src paths.
       srcPaths: [
         './client',
-        './shared',
+        './src',
         // The service worker offline page generation needs access to the
         // config folder.  Don't worry we have guards within the config files
         // to ensure they never get included in a client bundle.
@@ -211,7 +211,7 @@ const values = {
       srcEntryFile: './server/index.js',
 
       // Src paths.
-      srcPaths: ['./server', './shared', './config'],
+      srcPaths: ['./server', './src', './config'],
 
       // Where does the server bundle output live?
       outputPath: './build/server',
@@ -235,7 +235,7 @@ const values = {
       srcEntryFile: './api/index.js',
       srcPaths: [
         './api',
-        './shared',
+        './src',
         './config',
       ],
       outputPath: './build/api',

internal/webpack/configFactory.js

@@ -10,9 +10,9 @@ import WebpackMd5Hash from 'webpack-md5-hash';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 
 import { happyPackPlugin, log } from '../utils';
-import { ifElse } from '../../shared/utils/logic';
-import { mergeDeep } from '../../shared/utils/objects';
-import { removeNil } from '../../shared/utils/arrays';
+import { ifElse } from '../../src/utils/logic';
+import { mergeDeep } from '../../src/utils/objects';
+import { removeNil } from '../../src/utils/arrays';
 import withServiceWorker from './withServiceWorker';
 import config from '../../config';
 
@@ -429,7 +429,7 @@ export default function webpackConfigFactory(buildOptions) {
         ],
         include: removeNil([
           ...bundleConfig.srcPaths.map(srcPath => path.resolve(appRootDir.get(), srcPath)),
-          ifProdClient(path.resolve(appRootDir.get(), 'shared/HTML')),
+          ifProdClient(path.resolve(appRootDir.get(), 'src/utils/renderHtml')),
         ]),
       }),
 

internal/webpack/withServiceWorker/offlinePageTemplate.js

@@ -8,7 +8,7 @@
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 
-import HTML from '../../../shared/components/HTML';
+import HTML from '../../../src/utils/renderHtml';
 
 module.exports = function generate(context) {
   // const config = context.htmlWebpackPlugin.options.custom.config;

package.json

@@ -11,11 +11,11 @@
     "clean": "cross-env babel-node internal/scripts/clean",
     "deploy": "babel-node internal/scripts/deploy",
     "dev": "cross-env DEPLOYMENT=development babel-node internal/development",
-    "es": "eslint shared",
-    "es:fix": "eslint --fix shared",
-    "es:all": "eslint --fix client server shared config internal",
-    "ts": "tslint -p ./tsconfig.json './shared/**/*.{ts,tsx}'",
-    "ts:fix": "tslint --fix -c ./tslint.json -p ./tsconfig.json './shared/**/*.{ts,tsx}'",
+    "es": "eslint src",
+    "es:fix": "eslint --fix src",
+    "es:all": "eslint --fix client src src config internal",
+    "ts": "tslint -p ./tsconfig.json './src/**/*.{ts,tsx}'",
+    "ts:fix": "tslint --fix -c ./tslint.json -p ./tsconfig.json './src/**/*.{ts,tsx}'",
     "precommit": "lint-staged",
     "preinstall": "node internal/scripts/preinstall",
     "prepush": "jest",
@@ -127,7 +127,7 @@
   },
   "jest": {
     "collectCoverageFrom": [
-      "shared/**/*.{js,jsx}"
+      "src/**/*.{js,jsx}"
     ],
     "snapshotSerializers": [
       "<rootDir>/node_modules/enzyme-to-json/serializer"

server/middleware/reactApplication/ServerHTML.js

@@ -11,12 +11,12 @@ import PropTypes from 'prop-types';
 import serialize from 'serialize-javascript';
 
 import config from '../../../config';
-import ifElse from '../../../shared/utils/logic/ifElse';
-import removeNil from '../../../shared/utils/arrays/removeNil';
+import ifElse from '../../../src/utils/logic/ifElse';
+import removeNil from '../../../src/utils/arrays/removeNil';
 import getClientBundleEntryAssets from './getClientBundleEntryAssets';
 
 import ClientConfig from '../../../config/components/ClientConfig';
-import HTML from '../../../shared/components/HTML';
+import HTML from '../../../src/utils/renderHtml';
 
 // PRIVATES
 
@@ -43,8 +43,9 @@ function ServerHTML(props) {
   const { asyncComponentsState, helmet, nonce, reactAppString } = props;
 
   // Creates an inline script definition that is protected by the nonce.
-  const inlineScript = body =>
-    <script nonce={nonce} type="text/javascript" dangerouslySetInnerHTML={{ __html: body }} />;
+  const inlineScript = body => (
+    <script nonce={nonce} type="text/javascript" dangerouslySetInnerHTML={{ __html: body }} />
+  );
 
   const headerElements = removeNil([
     ...ifElse(helmet)(() => helmet.meta.toComponent(), []),
@@ -94,16 +95,10 @@ function ServerHTML(props) {
   return (
     <HTML
       htmlAttributes={ifElse(helmet)(() => helmet.htmlAttributes.toComponent(), null)}
-      headerElements={headerElements.map((x, idx) =>
-        (<KeyedComponent key={idx}>
-          {x}
-        </KeyedComponent>),
-      )}
-      bodyElements={bodyElements.map((x, idx) =>
-        (<KeyedComponent key={idx}>
-          {x}
-        </KeyedComponent>),
-      )}
+      headerElements={headerElements.map((x, idx) => (
+        <KeyedComponent key={idx}>{x}</KeyedComponent>
+      ))}
+      bodyElements={bodyElements.map((x, idx) => <KeyedComponent key={idx}>{x}</KeyedComponent>)}
       appBodyString={reactAppString}
     />
   );

server/middleware/reactApplication/index.js

@@ -8,7 +8,7 @@ import asyncBootstrapper from 'react-async-bootstrapper';
 import config from '../../../config';
 
 import ServerHTML from './ServerHTML';
-import DemoApp from '../../../shared/components/DemoApp';
+import DemoApp from '../../../src/app/';
 import { log } from '../../../internal/utils';
 
 /**

src/README.md

@@ -0,0 +1,13 @@
+# src
+
+This directory contains code that is shared between our bundles and should be considered safe to execute on either a `node` or `web` target (i.e. "Universal" code).
+
+```text
+.
+├── /app/                             # The Application
+    ├── /layouts/                     # For different screen resolutions
+    └── /routes/                      # 
+├── /helpers/                         # 
+├── /modules/                         # 
+└── /redux/                           # 
+```

shared/components/DemoApp/AsyncAboutRoute/AboutRoute.js → src/app/AsyncAboutRoute/AboutRoute.js

@@ -11,11 +11,8 @@ function AboutRoute() {
       <p>Produced with ❤️</p>
 
       <p>
-        View our contributors list on our
-        {' '}
-        <a href="https://github.com/ctrlplusb/react-universally">GitHub</a>
-        {' '}
-        page.
+        View our contributors list on our{' '}
+        <a href="https://github.com/ctrlplusb/react-universally">GitHub</a> page.
       </p>
     </div>
   );

shared/components/DemoApp/AsyncAboutRoute/__tests__/__snapshots__/AboutRoute.test.js.snap → src/app/AsyncAboutRoute/__tests__/__snapshots__/AboutRoute.test.js.snap

@@ -27,8 +27,7 @@ exports[`<AboutRoute /> renders 1`] = `
     >
       GitHub
     </a>
-     
-    page.
+     page.
   </p>
 </div>
 `;

shared/components/DemoApp/AsyncCounterRoute/CounterRoute.js → src/app/AsyncCounterRoute/CounterRoute.js

@@ -18,13 +18,11 @@ class CounterRoute extends Component {
         <h3>Counter</h3>
         <p>
           <em>
-            This is a small demo component that contains state.  It's useful for
-            testing the hot reloading experience of an asyncComponent.
+            This is a small demo component that contains state. It's useful for testing the hot
+            reloading experience of an asyncComponent.
           </em>
         </p>
-        <p>
-          Current value: {this.state.counter}
-        </p>
+        <p>Current value: {this.state.counter}</p>
         <p>
           <button onClick={this.incrementCounter}>Increment</button>
         </p>

shared/components/DemoApp/AsyncHomeRoute/HomeRoute.js → src/app/AsyncHomeRoute/HomeRoute.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Helmet from 'react-helmet';
 
-import config from '../../../../config';
+import config from '../../../config';
 
 function HomeRoute() {
   return (
@@ -13,10 +13,9 @@ function HomeRoute() {
       <h2>{config('welcomeMessage')}</h2>
 
       <p>
-        This starter kit contains all the build tooling and configuration you
-        need to kick off your next universal React project, whilst containing a
-        minimal project set up allowing you to make your own architecture
-        decisions (Redux/Mobx etc).
+        This starter kit contains all the build tooling and configuration you need to kick off your
+        next universal React project, whilst containing a minimal project set up allowing you to
+        make your own architecture decisions (Redux/Mobx etc).
       </p>
     </div>
   );

shared/components/DemoApp/Header/Menu/index.js → src/app/Header/Menu/index.js

@@ -4,9 +4,15 @@ import Link from 'react-router-dom/Link';
 function Menu() {
   return (
     <ul style={{ marginTop: '1rem', padding: '1rem', backgroundColor: '#c6c6c6' }}>
-      <li><Link to="/">Home</Link></li>
-      <li><Link to="/counter">Counter</Link></li>
-      <li><Link to="/about">About</Link></li>
+      <li>
+        <Link to="/">Home</Link>
+      </li>
+      <li>
+        <Link to="/counter">Counter</Link>
+      </li>
+      <li>
+        <Link to="/about">About</Link>
+      </li>
     </ul>
   );
 }

shared/components/DemoApp/Header/index.js → src/app/Header/index.js

@@ -7,9 +7,7 @@ function Header() {
     <div style={{ textAlign: 'center', marginBottom: '1rem' }}>
       <Logo />
       <h1>React, Universally</h1>
-      <strong>
-        A starter kit for universal react applications.
-      </strong>
+      <strong>A starter kit for universal react applications.</strong>
       <Menu />
     </div>
   );

shared/components/DemoApp/index.tsx → src/app/index.tsx

@@ -4,7 +4,7 @@ import * as React from 'react'
 import Helmet from 'react-helmet'
 import { Route, Switch } from 'react-router-dom'
 
-import config from '../../../config'
+import config from '../../config'
 
 import './globals.css'
 

shared/utils/objects/filterWithRules.js → src/utils/objects/filterWithRules.js

@@ -1,25 +1,22 @@
 function filterWithRulesLoop(rules, obj, basePropPath = '') {
-  return Object.keys(rules).reduce(
-    (acc, key) => {
-      const propPath = basePropPath !== '' ? `${basePropPath}.${key}` : key;
+  return Object.keys(rules).reduce((acc, key) => {
+    const propPath = basePropPath !== '' ? `${basePropPath}.${key}` : key;
 
-      if (typeof rules[key] === 'object') {
-        if (typeof obj[key] !== 'object') {
-          throw new Error(`Expected prop at path "${propPath}" to be an object`);
-        }
-        acc[key] = filterWithRulesLoop(rules[key], obj[key], propPath); // eslint-disable-line no-param-reassign,max-len
-      } else if (rules[key]) {
-        if (typeof obj[key] === 'undefined') {
-          throw new Error(
-            `Filter set an "allow" on path "${propPath}", however, this path was not found on the source object.`,
-          );
-        }
-        acc[key] = obj[key]; // eslint-disable-line no-param-reassign
+    if (typeof rules[key] === 'object') {
+      if (typeof obj[key] !== 'object') {
+        throw new Error(`Expected prop at path "${propPath}" to be an object`);
       }
-      return acc;
-    },
-    {},
-  );
+      acc[key] = filterWithRulesLoop(rules[key], obj[key], propPath); // eslint-disable-line no-param-reassign,max-len
+    } else if (rules[key]) {
+      if (typeof obj[key] === 'undefined') {
+        throw new Error(
+          `Filter set an "allow" on path "${propPath}", however, this path was not found on the source object.`,
+        );
+      }
+      acc[key] = obj[key]; // eslint-disable-line no-param-reassign
+    }
+    return acc;
+  }, {});
 }
 
 /**