Another bug fixes, tweaks (#422)

* Fix lint

* code split naming strategy sample

* remove HTTP protocol to be more flexible

* Refactor polyfill.io
Due to counter route become broken in mobile device, use only default feature instead

* Fix lint while prettier revert changes

* update deps

Author: diondirza

config/index.js

@@ -39,6 +39,7 @@ function resolveConfigForBrowserOrServer() {
     process.env.BUILD_FLAG_IS_NODE === 'true'
   ) {
     // i.e. running in our server/node process.
+    // eslint-disable-next-line global-require
     configCache = require('./values').default;
     return configCache;
   }

config/utils/envVars.js

@@ -6,20 +6,20 @@
  * Please read the application configuration docs for more info.
  */
 
-import appRootDir from "app-root-dir";
-import colors from "colors/safe";
-import dotenv from "dotenv";
-import fs from "fs";
-import path from "path";
+import appRootDir from 'app-root-dir';
+import colors from 'colors/safe';
+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 '../../shared/utils/logic/ifElse';
+import removeNil from '../../shared/utils/arrays/removeNil';
 
 // PRIVATES
 
 function registerEnvFile() {
   const DEPLOYMENT = process.env.DEPLOYMENT;
-  const envFile = ".env";
+  const envFile = '.env';
 
   // This is the order in which we will try to resolve an environment configuration
   // file.
@@ -31,23 +31,16 @@ function registerEnvFile() {
     // Is there an environment config file at the app root for our target
     // environment name?
     // e.g. /projects/react-universally/.env.staging
-    ifElse(DEPLOYMENT)(
-      path.resolve(appRootDir.get(), `${envFile}.${DEPLOYMENT}`)
-    )
+    ifElse(DEPLOYMENT)(path.resolve(appRootDir.get(), `${envFile}.${DEPLOYMENT}`)),
   ]);
 
   // Find the first env file path match.
-  const envFilePath = envFileResolutionOrder.find(filePath =>
-    fs.existsSync(filePath));
+  const envFilePath = envFileResolutionOrder.find(filePath => fs.existsSync(filePath));
 
   // If we found an env file match the register it.
   if (envFilePath) {
-    console.log(
-      // eslint-disable-line no-console
-      colors.bgBlue.white(
-        `==> Registering environment variables from: ${envFilePath}`
-      )
-    );
+    // eslint-disable-next-line no-console
+    console.log(colors.bgBlue.white(`==> Registering environment variables from: ${envFilePath}`));
     dotenv.config({ path: envFilePath });
   }
 }
@@ -83,7 +76,5 @@ export function number(name, defaultVal) {
 }
 
 export function bool(name, defaultVal) {
-  return process.env[name]
-    ? process.env[name] === "true" || process.env[name] === "1"
-    : defaultVal;
+  return process.env[name] ? process.env[name] === 'true' || process.env[name] === '1' : defaultVal;
 }

config/values.js

@@ -58,13 +58,14 @@ const values = {
   // gets parsed.
   polyfillIO: {
     enabled: true,
+    url: '//cdn.polyfill.io/v2/polyfill.min.js',
     // Reference https://qa.polyfill.io/v2/docs/features for a full list
     // of features.
     features: [
       // The default list.
       'default',
-      // All es6 features.
-      'es6',
+      // If you want to add only es6 features.
+      // 'es6',
     ],
   },
 
@@ -83,19 +84,19 @@ const values = {
     childSrc: [],
     connectSrc: [],
     defaultSrc: [],
-    fontSrc: ['https://fonts.googleapis.com/css', 'https://fonts.gstatic.com'],
+    fontSrc: ['fonts.googleapis.com/css', 'fonts.gstatic.com'],
     imgSrc: [],
     mediaSrc: [],
     manifestSrc: [],
     objectSrc: [],
     scriptSrc: [
-      // Allow scripts from https://cdn.polyfill.io so that we can import the
+      // Allow scripts from cdn.polyfill.io so that we can import the
       // polyfill.
-      'https://cdn.polyfill.io',
+      'cdn.polyfill.io',
     ],
     styleSrc: [
-      'https://cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css',
-      'https://fonts.googleapis.com/css',
+      'cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css',
+      'fonts.googleapis.com/css',
     ],
   },
 

internal/development/hotDevelopment.js

@@ -69,7 +69,8 @@ class HotDevelopment {
 
     const nodeBundles = [initializeBundle('server', config('bundles.server'))].concat(
       Object.keys(config('additionalNodeBundles')).map(name =>
-        initializeBundle(name, config('additionalNodeBundles')[name])),
+        initializeBundle(name, config('additionalNodeBundles')[name]),
+      ),
     );
 
     Promise.resolve(
@@ -104,7 +105,7 @@ class HotDevelopment {
   }
 
   dispose() {
-    const safeDisposer = server => server ? server.dispose() : Promise.resolve();
+    const safeDisposer = server => (server ? server.dispose() : Promise.resolve());
 
     // First the hot client server.
     return (

internal/webpack/withServiceWorker/index.js

@@ -106,31 +106,32 @@ export default function withServiceWorker(webpackConfig, bundleConfig) {
       // if you needed.
       AppCache: false,
       // Which external files should be included with the service worker?
-      externals:
-        // Add the polyfill io script as an external if it is enabled.
-        (
-          config('polyfillIO.enabled')
-            ? [`https://cdn.polyfill.io/v2/polyfill.min.js?features=${config('polyfillIO.features').join(',')}`]
-            : []
-        )
+      // Add the polyfill io script as an external if it is enabled.
+      externals: (config('polyfillIO.enabled')
+        ? [`${config('polyfillIO.url')}?features=${config('polyfillIO.features').join(',')}`]
+        : [])
         // Add any included public folder assets.
         .concat(
           config('serviceWorker.includePublicAssets').reduce((acc, cur) => {
             const publicAssetPathGlob = path.resolve(
-              appRootDir.get(), config('publicAssetsPath'), cur,
+              appRootDir.get(),
+              config('publicAssetsPath'),
+              cur,
             );
             const publicFileWebPaths = acc.concat(
               // First get all the matching public folder files.
               globSync(publicAssetPathGlob, { nodir: true })
-              // Then map them to relative paths against the public folder.
-              // We need to do this as we need the "web" paths for each one.
-              .map(publicFile => path.relative(
-                path.resolve(appRootDir.get(), config('publicAssetsPath')),
-                publicFile,
-              ))
-              // Add the leading "/" indicating the file is being hosted
-              // off the root of the application.
-              .map(relativePath => `/${relativePath}`),
+                // Then map them to relative paths against the public folder.
+                // We need to do this as we need the "web" paths for each one.
+                .map(publicFile =>
+                  path.relative(
+                    path.resolve(appRootDir.get(), config('publicAssetsPath')),
+                    publicFile,
+                  ),
+                )
+                // Add the leading "/" indicating the file is being hosted
+                // off the root of the application.
+                .map(relativePath => `/${relativePath}`),
             );
             return publicFileWebPaths;
           }, []),

package.json

@@ -114,9 +114,9 @@
     "md5": "2.2.1",
     "modernizr-loader": "1.0.1",
     "node-notifier": "5.1.2",
-    "prettier": "1.1.0",
+    "prettier": "1.2.2",
     "prettier-eslint": "5.1.0",
-    "prettier-eslint-cli": "3.3.0",
+    "prettier-eslint-cli": "3.4.1",
     "react-addons-test-utils": "15.5.1",
     "react-hot-loader": "3.0.0-beta.6",
     "react-test-renderer": "15.5.4",

server/middleware/reactApplication/ServerHTML.js

@@ -40,12 +40,7 @@ function scriptTag(jsFilePath) {
 // COMPONENT
 
 function ServerHTML(props) {
-  const {
-    asyncComponentsState,
-    helmet,
-    nonce,
-    reactAppString,
-  } = props;
+  const { asyncComponentsState, helmet, nonce, reactAppString } = props;
 
   // Creates an inline script definition that is protected by the nonce.
   const inlineScript = body => (
@@ -72,14 +67,14 @@ function ServerHTML(props) {
     ifElse(asyncComponentsState)(() =>
       inlineScript(
         `window.__ASYNC_COMPONENTS_REHYDRATE_STATE__=${serialize(asyncComponentsState)};`,
-      )),
+      ),
+    ),
     // Enable the polyfill io script?
     // This can't be configured within a react-helmet component as we
     // may need the polyfill's before our client JS gets parsed.
     ifElse(config('polyfillIO.enabled'))(() =>
-      scriptTag(
-        `https://cdn.polyfill.io/v2/polyfill.min.js?features=${config('polyfillIO.features').join(',')}`,
-      )),
+      scriptTag(`${config('polyfillIO.url')}?features=${config('polyfillIO.features').join(',')}`),
+    ),
     // When we are in development mode our development server will
     // generate a vendor DLL in order to dramatically reduce our
     // compilation times.  Therefore we need to inject the path to the
@@ -89,7 +84,8 @@ function ServerHTML(props) {
     )(() =>
       scriptTag(
         `${config('bundles.client.webPath')}${config('bundles.client.devVendorDLL.name')}.js?t=${Date.now()}`,
-      )),
+      ),
+    ),
     ifElse(clientEntryAssets && clientEntryAssets.js)(() => scriptTag(clientEntryAssets.js)),
     ...ifElse(helmet)(() => helmet.script.toComponent(), []),
   ]);

server/middleware/reactApplication/index.js

@@ -31,7 +31,7 @@ export default function reactApplicationMiddleware(request, response) {
     // SSR is disabled so we will return an "empty" html page and
     // rely on the client to initialize and render the react application.
     const html = renderToStaticMarkup(<ServerHTML nonce={nonce} />);
-    response.status(200).send(html);
+    response.status(200).send(`<!DOCTYPE html>${html}`);
     return;
   }
 

shared/components/DemoApp/AsyncAboutRoute/index.js

@@ -1,5 +1,6 @@
 import { asyncComponent } from 'react-async-component';
 
 export default asyncComponent({
-  resolve: () => System.import('./AboutRoute'),
+  // include home and about route in same chunk e.g main
+  resolve: () => System.import(/* webpackChunkName: "main" */ './AboutRoute'),
 });

shared/components/DemoApp/AsyncCounterRoute/CounterRoute.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unescaped-entities */
 import React, { Component } from 'react';
 
 class CounterRoute extends Component {