implements webpack-dev-middleware

src/client/components/controls/Button/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 .btn {
     @extend %uppercase-label;

src/client/components/field-types/Email/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 .field-type.email {
 	margin-bottom: rem(.5);

src/client/components/field-types/Input/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 .field-type.input {
 	margin-bottom: rem(.5);

src/client/components/field-types/Password/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 .field-type.password {
 	margin-bottom: rem(.5);

src/client/components/field-types/Textarea/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 .field-type.textarea {
   margin-bottom: rem(.5);

src/client/components/field-types/fieldType/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 .field-type {
   @include gutter;

src/client/components/forms/Form/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 form {
   @include row;

src/client/components/forms/Submit/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 form > .form-submit {
   @include gutter;

src/client/components/index.js

@@ -26,3 +26,8 @@ const Index = () => {
 };
 
 render(<Index />, document.getElementById('app'));
+
+// Needed for Hot Module Replacement
+if (typeof (module.hot) !== 'undefined') {
+  module.hot.accept();
+}

src/client/components/layout/ContentBlock/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 .content-block {
   max-width: $content-width;

src/client/components/layout/DefaultTemplate/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
-import { Sidebar, StepNav, Localizer } from 'payload/components';
+import Sidebar from '../Sidebar';
+import StepNav from '../../modules/StepNav';
+import Localizer from '../../modules/Localizer';
 
 import './index.scss';
 

src/client/components/layout/DefaultTemplate/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 .default-template {
   @include default-template-width;

src/client/components/layout/Section/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 section.section {
   @extend %shadow;

src/client/components/layout/Sidebar/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { NavLink, Link } from 'react-router-dom';
-import { Arrow } from 'payload/components';
+import Arrow from '../../graphics/Arrow';
 
 import './index.scss';
 

src/client/components/layout/Sidebar/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 .sidebar {
   position: fixed;

src/client/components/layout/Sticky/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 .sticky {
   z-index: 10;

src/client/components/layout/Table/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 table {
   width: 100%;

src/client/components/modals/asModal/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 .modal {
 	transform: translateZ(0);

src/client/components/modules/APIUrl/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 .api-url {
   .url {

src/client/components/modules/HeadingButton/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 .heading-button {
   display: flex;

src/client/components/modules/Localizer/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { Link, withRouter } from 'react-router-dom';
-import { Arrow } from 'payload/components';
+import Arrow from '../../graphics/Arrow';
 import qs from 'qs';
 
 import './index.scss';

src/client/components/modules/Localizer/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 .localizer {
   position: relative;

src/client/components/modules/Status/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 .status {
   @include gutter;

src/client/components/modules/StepNav/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 .step-nav {
   display: flex;

src/client/components/modules/StickyHeader/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 .sticky-header {
   @include gutter;

src/client/components/modules/Tooltip/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 .tooltip {
 	@extend %uppercase-label;

src/client/components/modules/UploadMedia/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 .upload-media {
   padding: rem(1);

src/client/components/routes/index.js

@@ -1,14 +1,12 @@
 import React from 'react';
 import Cookies from 'universal-cookie';
 import { Route, Switch, withRouter, Redirect } from 'react-router-dom';
-import {
-  CollectionRoutes,
-  DefaultTemplate,
-  Dashboard,
-  Login,
-  CreateUser,
-  MediaLibrary,
-} from 'payload/components';
+import CollectionRoutes from './Collections';
+import DefaultTemplate from '../layout/DefaultTemplate';
+import Dashboard from '../views/Dashboard';
+import Login from '../views/Login';
+import CreateUser from '../views/CreateUser';
+import MediaLibrary from '../views/MediaLibrary';
 
 const cookies = new Cookies();
 

src/client/components/utilities/LoadConfig/index.js

@@ -1,15 +1,14 @@
 import { Component } from 'react';
 import { connect } from 'react-redux';
 
-import config from '~local/payload.config.js';
-
 const mapDispatch = dispatch => ({
   loadConfig: payload => dispatch({ type: 'LOAD_CONFIG', payload })
 })
 
 class LoadConfig extends Component {
   componentDidMount() {
-    this.props.loadConfig(config);
+    // fetch('/')
+    // this.props.loadConfig(config);
   }
 
   render() {

src/client/components/views/Login/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 .login {
   display: flex;

src/client/components/views/collections/Edit/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 .collection-edit {
   header {

src/client/components/views/collections/List/index.scss

@@ -1,4 +1,4 @@
-@import '~payload/scss/styles';
+@import '~payload/client/scss/styles';
 
 .collection-list {
   .heading-button {

src/client/config/getWebpackDevConfig.js

@@ -0,0 +1,120 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+// common function to get style loaders
+const getStyleLoaders = (cssOptions, preProcessor) => {
+  const loaders = [
+    require.resolve('style-loader'),
+    {
+      loader: require.resolve('css-loader'),
+      options: cssOptions,
+    },
+    {
+      // Options for PostCSS as we reference these options twice
+      // Adds vendor prefixing based on your specified browser support in
+      // package.json
+      loader: require.resolve('postcss-loader'),
+      options: {
+        // Necessary for external CSS imports to work
+        // https://github.com/facebook/create-react-app/issues/2677
+        ident: 'postcss',
+        plugins: () => [
+          require('postcss-flexbugs-fixes'),
+          require('postcss-preset-env')({
+            autoprefixer: {
+              flexbox: 'no-2009',
+            },
+            stage: 3,
+          }),
+        ],
+      },
+    },
+  ];
+  if (preProcessor) {
+    loaders.push(require.resolve(preProcessor));
+  }
+  return loaders;
+};
+
+module.exports = (config) => {
+  return {
+    entry: {
+      main: ['webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', './src/client/components/index.js'],
+    },
+    output: {
+      path: path.join(__dirname, 'build'),
+      publicPath: config.routes.admin,
+      filename: '[name].js'
+    },
+    devtool: 'source-map',
+    mode: 'development',
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader'
+          }
+        },
+        {
+          // "oneOf" will traverse all following loaders until one will
+          // match the requirements. When no loader matches it will fall
+          // back to the "file" loader at the end of the loader list.
+          oneOf: [
+            // "url" loader works like "file" loader except that it embeds assets
+            // smaller than specified limit in bytes as data URLs to avoid requests.
+            // A missing `test` is equivalent to a match.
+            {
+              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+              loader: require.resolve('url-loader'),
+              options: {
+                limit: 10000,
+                name: 'static/media/[name].[hash:8].[ext]',
+              },
+            },
+            // Opt-in support for SASS (using .scss or .sass extensions).
+            // Chains the sass-loader with the css-loader and the style-loader
+            // to immediately apply all styles to the DOM.
+            {
+              test: /\.(scss|sass)$/,
+              use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader')
+            },
+            // "file" loader makes sure those assets get served by WebpackDevServer.
+            // When you `import` an asset, you get its (virtual) filename.
+            // In production, they would get copied to the `build` folder.
+            // This loader doesn't use a "test" so it will catch all modules
+            // that fall through the other loaders.
+            {
+              // Exclude `js` files to keep "css" loader working as it injects
+              // its runtime that would otherwise processed through "file" loader.
+              // Also exclude `html` and `json` extensions so they get processed
+              // by webpacks internal loaders.
+              exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
+              loader: require.resolve('file-loader'),
+              options: {
+                name: 'static/media/[name].[hash:8].[ext]',
+              },
+            },
+          ]
+        }
+      ],
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: './src/client/index.html',
+        filename: './index.html'
+      }),
+      new webpack.HotModuleReplacementPlugin(),
+      new webpack.NoEmitOnErrorsPlugin()
+    ],
+    resolve: {
+      alias: {
+        payload: path.resolve(__dirname, '../../'),
+        scssOverrides: config.paths.scssOverrides,
+        customComponents: config.paths.customComponents
+      }
+    }
+  }
+};

src/client/config/webpack.dev.config.js

@@ -1,106 +0,0 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const path = require('path');
-
-// common function to get style loaders
-const getStyleLoaders = (cssOptions, preProcessor) => {
-  const loaders = [
-    require.resolve('style-loader'),
-    {
-      loader: require.resolve('css-loader'),
-      options: cssOptions,
-    },
-    {
-      // Options for PostCSS as we reference these options twice
-      // Adds vendor prefixing based on your specified browser support in
-      // package.json
-      loader: require.resolve('postcss-loader'),
-      options: {
-        // Necessary for external CSS imports to work
-        // https://github.com/facebook/create-react-app/issues/2677
-        ident: 'postcss',
-        plugins: () => [
-          require('postcss-flexbugs-fixes'),
-          require('postcss-preset-env')({
-            autoprefixer: {
-              flexbox: 'no-2009',
-            },
-            stage: 3,
-          }),
-        ],
-      },
-    },
-  ];
-  if (preProcessor) {
-    loaders.push(require.resolve(preProcessor));
-  }
-  return loaders;
-};
-
-module.exports = {
-  entry: '../components/index.js',
-  devtool: 'source-map',
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader'
-        }
-      },
-      {
-        // "oneOf" will traverse all following loaders until one will
-        // match the requirements. When no loader matches it will fall
-        // back to the "file" loader at the end of the loader list.
-        oneOf: [
-          // "url" loader works like "file" loader except that it embeds assets
-          // smaller than specified limit in bytes as data URLs to avoid requests.
-          // A missing `test` is equivalent to a match.
-          {
-            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-            loader: require.resolve('url-loader'),
-            options: {
-              limit: 10000,
-              name: 'static/media/[name].[hash:8].[ext]',
-            },
-          },
-          // Opt-in support for SASS (using .scss or .sass extensions).
-          // Chains the sass-loader with the css-loader and the style-loader
-          // to immediately apply all styles to the DOM.
-          {
-            test: /\.(scss|sass)$/,
-            use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader')
-          },
-          // "file" loader makes sure those assets get served by WebpackDevServer.
-          // When you `import` an asset, you get its (virtual) filename.
-          // In production, they would get copied to the `build` folder.
-          // This loader doesn't use a "test" so it will catch all modules
-          // that fall through the other loaders.
-          {
-            // Exclude `js` files to keep "css" loader working as it injects
-            // its runtime that would otherwise processed through "file" loader.
-            // Also exclude `html` and `json` extensions so they get processed
-            // by webpacks internal loaders.
-            exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
-            loader: require.resolve('file-loader'),
-            options: {
-              name: 'static/media/[name].[hash:8].[ext]',
-            },
-          },
-        ]
-      }
-    ],
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: '../../../demo/client/index.html',
-      filename: '../index.html'
-    })
-  ],
-  resolve: {
-    alias: {
-      payload: path.resolve(__dirname, '../../../'),
-      local: path.resolve(__dirname, '../../../demo/')
-    }
-  }
-};

src/client/scss/vars.scss

@@ -92,4 +92,4 @@ $stroke-width : 1px;
 // IMPORT OVERRIDES
 //////////////////////////////
 
-@import '~local/client/scss/overrides';
+@import '~scssOverrides';

src/client/store.js

@@ -1,5 +1,5 @@
 import { createStore, combineReducers } from 'redux';
-import { common } from 'payload/redux';
+import common from './reducers/common';
 
 const reducer = combineReducers({
   common