tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implements webpack-dev-middleware

Browse Source
This commit is contained in:
James
2019-10-17 21:04:24 -04:00
parent ac831498c6
commit c58f103b76
40 changed files with 210 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/components/controls/Button/index.scss
View File

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

2
src/client/components/field-types/Email/index.scss
View File

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

2
src/client/components/field-types/Input/index.scss
View File

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

2
src/client/components/field-types/Password/index.scss
View File

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

2
src/client/components/field-types/Textarea/index.scss
View File

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

2
src/client/components/field-types/fieldType/index.scss
View File

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

2
src/client/components/forms/Form/index.scss
View File

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

2
src/client/components/forms/Submit/index.scss
View File

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

5
src/client/components/index.js
View File

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

2
src/client/components/layout/ContentBlock/index.scss
View File

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

4
src/client/components/layout/DefaultTemplate/index.js
View File

@@ -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';

2
src/client/components/layout/DefaultTemplate/index.scss
View File

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

2
src/client/components/layout/Section/index.scss
View File

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

2
src/client/components/layout/Sidebar/index.js
View File

@@ -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';

2
src/client/components/layout/Sidebar/index.scss
View File

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

2
src/client/components/layout/Sticky/index.scss
View File

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

2
src/client/components/layout/Table/index.scss
View File

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

2
src/client/components/modals/asModal/index.scss
View File

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

2
src/client/components/modules/APIUrl/index.scss
View File

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

2
src/client/components/modules/HeadingButton/index.scss
View File

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

2
src/client/components/modules/Localizer/index.js
View File

@@ -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';

2
src/client/components/modules/Localizer/index.scss
View File

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

2
src/client/components/modules/Status/index.scss
View File

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

2
src/client/components/modules/StepNav/index.scss
View File

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

2
src/client/components/modules/StickyHeader/index.scss
View File

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

2
src/client/components/modules/Tooltip/index.scss
View File

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

2
src/client/components/modules/UploadMedia/index.scss
View File

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

14
src/client/components/routes/index.js
View File

@@ -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();

5
src/client/components/utilities/LoadConfig/index.js
View File

@@ -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() {

2
src/client/components/views/Login/index.scss
View File

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

2
src/client/components/views/collections/Edit/index.scss
View File

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

2
src/client/components/views/collections/List/index.scss
View File

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

120
src/client/config/getWebpackDevConfig.js Normal file
View File

@@ -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
}
}
}
};

106
src/client/config/webpack.dev.config.js
View File

@@ -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/')
}
}
};

2
src/client/scss/vars.scss
View File

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

2
src/client/store.js
View File

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

44
src/index.js
View File

@@ -5,7 +5,7 @@ import bodyParser from 'body-parser';
import methodOverride from 'method-override';
import jwtStrategy from './auth/jwt';
import fileUpload from 'express-fileupload';
import {upload as uploadMedia, update as updateMedia} from './media/requestHandlers';
import { upload as uploadMedia, update as updateMedia } from './media/requestHandlers';
import mediaConfig from './media/media.config';
import passwordResetRoutes from './auth/passwordResets/passwordReset.routes';
import autopopulate from './mongoose/autopopulate.plugin';
@@ -25,6 +25,11 @@ import passwordResetConfig from './auth/passwordResets/passwordReset.config';
import validateCollection from './utilities/validateCollection';
import validateGlobal from './utilities/validateGlobal';
import setModelLocaleMiddleware from './mongoose/setModelLocale.middleware';
import path from 'path';
import webpack from 'webpack';
import getWebpackDevConfig from './client/config/getWebpackDevConfig';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
class Payload {
@@ -43,6 +48,27 @@ class Payload {
}
});
const webpackDevConfig = getWebpackDevConfig(options.config);
const compiler = webpack(webpackDevConfig);
options.app.use(webpackDevMiddleware(compiler, {
publicPath: webpackDevConfig.output.publicPath,
}));
options.app.get(options.config.routes.admin, (req, res, next) => {
compiler.outputFileSystem.readFile(path.join(__dirname, 'index.html'), (err, result) => {
if (err) {
return next(err)
}
res.set('content-type', 'text/html')
res.send(result)
res.end()
})
})
options.app.use(webpackHotMiddleware(compiler));
options.app.use(fileUpload({}));
const staticUrl = options.config.staticUrl ? options.config.staticUrl : `/${options.config.staticDir}`;
options.app.use(staticUrl, express.static(options.config.staticDir));
@@ -180,16 +206,16 @@ class Payload {
const fieldSchema = fieldToSchemaMap[field.type];
if (fieldSchema) globalFields[config.slug][field.name] = fieldSchema(field);
});
globalSchemaGroups[config.slug] = new mongoose.Schema(globalFields[config.slug], { _id : false });
});
globalSchemaGroups[config.slug] = new mongoose.Schema(globalFields[config.slug], { _id: false });
});
if (options.config.globals) {
globalModel = mongoose.model(
'global',
new mongoose.Schema({...globalSchemaGroups, timestamps: false})
.plugin(localizationPlugin, options.config.localization)
.plugin(autopopulate)
);
globalModel = mongoose.model(
'global',
new mongoose.Schema({ ...globalSchemaGroups, timestamps: false })
.plugin(localizationPlugin, options.config.localization)
.plugin(autopopulate)
);
}
options.router.all('/globals',