Reactql 2.9.5

.babelrc

@@ -1,5 +1,6 @@
 {
   "presets": [
+    "react",
     ["env", {
       "targets": {
         "node": true

.eslintrc.js

@@ -15,20 +15,34 @@ module.exports = {
   env: {
     node: true,
     browser: true,
+    'jest/globals': true,
   },
   plugins: [
     'babel',
     'import',
     'jsx-a11y',
     'compat',
+    'jest',
   ],
   rules: {
+    // General
     'arrow-parens': ['error', 'as-needed'],
-    'react/forbid-prop-types': [1, { forbid: ['any']} ],
+    'function-paren-newline': ["error", "consistent"],
+    'object-curly-newline': ["error", { consistent: true }],
     'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
+    'linebreak-style': 0,
+    'global-require': 0,
+    'no-restricted-syntax': [2,
+      ...restricted.filter(
+        r => !['ForOfStatement'].includes(r.selector)
+      ),
+    ],
+
+    // React
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
+    'react/forbid-prop-types': [1, { forbid: ['any']} ],
     'react/prefer-stateless-function': [2, { ignorePureComponents: true }],
     'react/no-multi-comp': 0,
-    'react/no-array-index-key': 0,
     'react/jsx-closing-bracket-location': [1, 'after-props'],
     'react/prop-types': [1, {
       ignore: [
@@ -38,21 +52,24 @@ module.exports = {
         'data',
       ],
     }],
-    'linebreak-style': 0,
-    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
-    'no-restricted-syntax': [2,
-      ...restricted.filter(
-        r => !['ForOfStatement'].includes(r.selector)
-      ),
-    ],
-    'global-require': 0,
+
+    // Import
     'import/no-unresolved': [2, { commonjs: true }],
-    'compat/compat': 2
+
+    // Compat
+    'compat/compat': 2,
+
+    // JSX-a11y
+    "jsx-a11y/anchor-is-valid": [ "error", {
+      "components": [ "a" ],
+      "aspects": [ "noHref", "invalidHref", "preferButton" ]
+    }],
   },
   settings: {
     'import/resolver': {
       node: {
         paths: [
+          PATHS.src,
           PATHS.root,
           'node_modules',
         ],

.gitignore

@@ -41,6 +41,3 @@ jspm_packages
 
 # Distribution
 dist
-
-# dotenv environment variables file
-.env

.reactql

@@ -1 +1 @@
-2.8.4
+2.9.5

Dockerfile

@@ -1,38 +1,39 @@
-FROM debian:jessie-slim
+FROM node:8-alpine
 
-ENV EPHIMERAL_PACKAGES "build-essential dh-autoreconf curl xz-utils python"
-ENV PACKAGES "libpng-dev"
-
-# Add `package.json` to build Debian compatible NPM packages
 WORKDIR /src
-ADD package.json .
-
-# install everything (and clean up afterwards)
-RUN apt-get update \
-  && apt-get install -y apt-utils \
-  && apt-get install -y ${EPHIMERAL_PACKAGES} ${PACKAGES} \
-  && curl -sL https://deb.nodesource.com/setup_8.x | bash - \
-  && apt-get install -y nodejs \
-  && cd /src \
+
+# The official image has verbose logging; change it to npm's default
+ENV NPM_CONFIG_LOGLEVEL notice
+
+# Add PM2, for Node process management
+RUN npm i -g pm2
+
+# Add NPM package config
+ADD package*.json ./
+
+# Install everything (and clean up afterwards)
+RUN apk add --no-cache --virtual .gyp \
+    autoconf \
+    automake \
+    g++ \
+    libpng-dev \
+    libtool \
+    make \
+    nasm \
+    python \
+    git \
   && npm i \
-  ; apt-get remove --purge -y ${EPHIMERAL_PACKAGES} \
-  ; apt-get autoremove -y ${EPHIMERAL_PACKAGES} \
-  ; apt-get clean \
-  ; apt-get autoclean \
-  ; echo -n > /var/lib/apt/extended_states \
-  ; rm -rf /var/lib/apt/lists/* \
-  ; rm -rf /usr/share/man/?? \
-  ; rm -rf /usr/share/man/??_*
+  && apk del .gyp
 
 # Add the remaining project files
 ADD . .
 
-# Build distribution
-RUN npm run build
-
 # Set the default host/port
 ENV HOST 0.0.0.0
 ENV PORT 4000
 
+# Build distribution
+RUN npm run build
+
 # Start the server by default
-CMD npm run server
+CMD pm2-docker start dist/server.js -i max

browserslist

@@ -0,0 +1,3 @@
+# By default, target only modern browsers
+
+last 3 versions

cssnano.config.js

@@ -0,0 +1,6 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const defaultPreset = require('cssnano-preset-default');
+
+module.exports = defaultPreset({
+  normalizeUrl: false,
+});

docker-compose.dev.yml

@@ -0,0 +1,16 @@
+# Note: This is intended for use in local development
+version: '3.3'
+services:
+  reactql-dev:
+    build: .
+    volumes:
+      - .:/src
+      - /src/node_modules
+    ports:
+      - 8080:8080
+      - 8081:8081
+    environment:
+      HOST: "0.0.0.0"
+      BROWSER_HOST: "0.0.0.0"
+      PORT: "8081"
+    command: npm start

docker-compose.yml

@@ -0,0 +1,13 @@
+# Note: For production. For development, use `docker-compose.dev.yml`
+version: '3.3'
+services:
+  reactql-dev:
+    build: .
+    volumes:
+      - .:/src
+      - /src/node_modules
+    ports:
+      - 4000:4000
+    environment:
+      HOST: "0.0.0.0"
+      BROWSER_HOST: "0.0.0.0"

jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  coverageReporters: ['text'],
+  collectCoverageFrom: [
+    'src/**/*.js(x)',
+  ],
+  transform: {
+    '^.+\\.js(x)$': '<rootDir>/jest.transform.js',
+  },
+};

jest.transform.js

@@ -0,0 +1,26 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const babel = require('babel-jest');
+
+module.exports = babel.createTransformer({
+  presets: [
+    'react',
+    ['env', {
+      targets: {
+        node: true,
+      },
+    }],
+  ],
+  plugins: [
+    ['module-resolver', {
+      root: ['.'],
+      alias: {
+        src: './src',
+      },
+    }],
+    'transform-object-rest-spread',
+    'syntax-dynamic-import',
+    'transform-regenerator',
+    'transform-class-properties',
+    'transform-decorators-legacy',
+  ],
+});

kit/config.js

@@ -86,22 +86,30 @@ if (SERVER) {
       // Create a set for routes -- to retrieve based on insertion order
       this.routes = new Set();
 
+      // Custom middleware
+      this.beforeMiddleware = new Set();
+      this.middleware = new Set();
+
       // Koa application function. But default, this is null
       this.koaAppFunc = null;
 
       // Flag for setting whether plain HTTP should be disabled
       this.enableHTTP = true;
 
+      // Flag for enabling the `Response-Time` Koa middleware timer
+      this.enableTiming = true;
+
+      // Flag for enabling Koa Helmet HTTP hardening. True, by default.
+      this.enableKoaHelmet = true;
+      this.koaHelmetOptions = null;
+
       // Force SSL. Rewrites all non-SSL queries to SSL.  False, by default.
       this.enableForceSSL = false;
 
       // Options for enabling SSL. By default, this is null. If SSL is enabled
       // in userland, this would instead hold an object of options
       this.sslOptions = null;
 
-      // Custom middleware -- again, based on insertion order
-      this.middleware = new Set();
-
       // GraphQL schema (if we're using an internal server)
       this.graphQLSchema = null;
 
@@ -110,9 +118,9 @@ if (SERVER) {
       // default to the string value
       this.graphiQL = false;
 
-      // Enable body parsing by default.  Leave `koa-bodyparser` opts as default
+      // Enable body parsing by default.
       this.enableBodyParser = true;
-      this.bodyParserOptions = {};
+      this.bodyParserOptions = null;
 
       // CORS options for `koa-cors`
       this.corsOptions = {};
@@ -149,6 +157,11 @@ if (SERVER) {
       this.enableHTTP = false;
     }
 
+    // Disable timing the request. This will remove the `Response-Time` header
+    disableTiming() {
+      this.enableTiming = false;
+    }
+
     // Disable the optional `koa-bodyparser`, to prevent POST data being sent to
     // each request.  By default, body parsing is enabled.
     disableBodyParser() {
@@ -159,6 +172,15 @@ if (SERVER) {
       this.bodyParserOptions = opt;
     }
 
+    // Disable Koa Helmet option, to prevent HTTP hardening by default
+    disableKoaHelmet() {
+      this.enableKoaHelmet = false;
+    }
+
+    setKoaHelmetOptions(opt = {}) {
+      this.koaHelmetOptions = opt;
+    }
+
     // 404 handler for the server.  By default, `kit/entry/server.js` will
     // simply return a 404 status code without modifying the HTML render.  By
     // setting a handler here, this will be returned instead
@@ -179,7 +201,12 @@ if (SERVER) {
       this.errorHandler = func;
     }
 
-    // Add custom middleware.  This should be an async func, for use with Koa
+    // Add custom middleware.  This should be an async func, for use with Koa.
+    // There are two entry points - 'before' and 'after'
+    addBeforeMiddleware(middlewareFunc) {
+      this.beforeMiddleware.add(middlewareFunc);
+    }
+
     addMiddleware(middlewareFunc) {
       this.middleware.add(middlewareFunc);
     }

kit/entry/browser.js

@@ -16,8 +16,10 @@ import 'isomorphic-fetch';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-// Browser routing
-import { BrowserRouter } from 'react-router-dom';
+// React Router, for controlling browser routes.  We'll feed in our custom
+// `history` instance that's imported below, so that we have a single store of
+// truth for routing
+import { Router } from 'react-router-dom';
 
 // Apollo Provider. This HOC will 'wrap' our React component chain
 // and handle injecting data down to any listening component
@@ -31,6 +33,9 @@ import { ApolloProvider } from 'react-apollo';
 // first, since it sets up our app's settings
 import App from 'src/app';
 
+// Get the custom `history` that we'll use to feed down to our `<Router>`
+import { history } from 'kit/lib/routing';
+
 // Grab the shared Apollo Client
 import { browserClient } from 'kit/lib/apollo';
 
@@ -68,9 +73,9 @@ const Root = (() => {
   // can respond to route changes
   const Chain = () => (
     <ApolloProvider store={store} client={client}>
-      <BrowserRouter>
+      <Router history={history}>
         <App />
-      </BrowserRouter>
+      </Router>
     </ApolloProvider>
   );
 
@@ -80,7 +85,7 @@ const Root = (() => {
   if (module.hot) {
     // <AppContainer> will respond to our Hot Module Reload (HMR) changes
     // back from WebPack, and handle re-rendering the chain as needed
-    const AppContainer = require('react-hot-loader').AppContainer;
+    const { AppContainer } = require('react-hot-loader');
 
     // Start our 'listener' at the root component, so that any changes that
     // occur in the hierarchy can be captured