Skip to content

Commit

Permalink
ci: convert browserify to webpack, fixes #976
Browse files Browse the repository at this point in the history
  • Loading branch information
acao committed Nov 18, 2019
1 parent 4de9408 commit 25badd5
Show file tree
Hide file tree
Showing 34 changed files with 1,431 additions and 771 deletions.
26 changes: 19 additions & 7 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,12 @@
* This source code is licensed under the license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/

const defaultPlugins = ['babel', 'import', 'flowtype', 'prefer-object-spread'];

const defaultPresets = ['prettier', 'plugin:import/typescript', 'plugin:react/recommended'];

module.exports = {
root: true,
parser: 'babel-eslint',
Expand All @@ -21,9 +24,9 @@ module.exports = {
},
},
settings: {
'react': {
'version': 'detect'
}
react: {
version: 'detect',
},
},
// https://github.com/sindresorhus/globals/blob/master/globals.json
env: {
Expand All @@ -33,10 +36,9 @@ module.exports = {
jest: true,
mocha: true,
browser: true,
'cypress/globals': true
},

extends: ['prettier', 'plugin:import/typescript', 'plugin:react/recommended'],
extends: defaultPresets,

globals: {
atom: false,
Expand Down Expand Up @@ -292,9 +294,19 @@ module.exports = {
'prefer-object-spread/prefer-object-spread': 1,
},

plugins: ['babel', 'import', 'flowtype', 'prefer-object-spread', 'cypress'],
plugins: defaultPlugins,

overrides: [
// Cypress plugin, global, etc only for cypress directory
// https://github.com/cypress-io/eslint-plugin-cypress
// cypress clashes with jest expect()
{
files: ['**/cypress/**'],
plugins: [...defaultPlugins, 'cypress'],
env: {
'cypress/globals': true,
},
},
// Rules for TypeScript only
{
files: ['*.ts', '*.tsx'],
Expand Down
20 changes: 16 additions & 4 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,24 @@
// for ESM don't transpile modules

const envConfig = {
ignoreBrowserslistConfig: Boolean(!process.env.CDN),
modules: 'commonjs',
targets: { node: true }
};

if (process.env.ESM) {
envConfig.modules = false
}

if (process.env.CDN) {
envConfig.modules = 'umd'
}

module.exports = {
presets: [
[
require.resolve('@babel/preset-env'),
{
modules: process.env.ESM ? false : 'commonjs',
targets: process.env.ESM ? { node: true } : '> 0.25%, not dead'
},
envConfig,
],
require.resolve('@babel/preset-flow'),
require.resolve('@babel/preset-react'),
Expand Down
4 changes: 4 additions & 0 deletions jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ module.exports = {
...tsjPreset.transform,
...jsWithBabelPreset.transform,
},
moduleNameMapper: {
'^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
require.resolve('identity-obj-proxy'),
},
testEnvironment: require.resolve('jest-environment-jsdom-global'),
testPathIgnorePatterns: ['node_modules', 'dist', 'codemirror-graphql'],
collectCoverageFrom: [
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"build-ts": "tsc --build",
"build-clean": "tsc --build --clean && rm -rf 'packages/**/src/{dist,esm,bundle}' && lerna run build-clean --parallel",
"build-demo": "lerna run build-demo",
"test": "yarn run lint && yarn run check && yarn run build && yarn run testonly && yarn run e2e",
"test": "yarn run lint && yarn run check && yarn run build && yarn run testonly && lerna run build-bundles && yarn run e2e",
"testonly": "jest && lerna run test --scope codemirror-graphql",
"e2e": "cd packages/graphiql && yarn e2e",
"cypress-open": "cd packages/graphiql && yarn e2e:server & cypress open --project ./packages/graphiql",
Expand Down
2 changes: 1 addition & 1 deletion packages/examples/graphiql-webpack/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"description": "A GraphiQL example with webpack and typescript",
"scripts": {
"build-demo": "webpack",
"start": "webpack-dev-server --watch"
"start": "webpack serve"
},
"dependencies": {
"express": "^4.17.1",
Expand Down
4 changes: 2 additions & 2 deletions packages/examples/graphiql-webpack/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ module.exports = {
'react-hot-loader/patch', // activate HMR for React
'webpack-dev-server/client?http://localhost:8080', // bundle the client for webpack-dev-server and connect to the provided endpoint
'webpack/hot/only-dev-server', // bundle the client for hot reloading, only- means to only hot reload for successful updates
'./index.jsx', // the entry point of our app
'./index.js', // the entry point of our app
]
: './index.jsx',
: './index.js',
context: path.resolve(__dirname, './src'),
mode: 'development',
devtool: 'inline-source-map',
Expand Down
5 changes: 2 additions & 3 deletions packages/graphiql/.gitignore
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
dist/
/graphiql.js
/graphiql.min.js
/graphiql.css
/graphiql.*js
/graphiql.*css
example/yarn.lock
example/graphiql.js
example/graphiql.css
Expand Down
46 changes: 24 additions & 22 deletions packages/graphiql/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
"esm",
"graphiql.js",
"graphiql.min.js",
"graphiql.css"
"graphiql.css",
"graphiql.min.css"
],
"nyc": {
"report-dir": "coverage/cypress",
Expand All @@ -28,28 +29,27 @@
]
},
"scripts": {
"build": "yarn build-clean && yarn build-js && yarn build-flow && yarn build-demo",
"build-clean": "rimraf 'graphiql.{css,*min.js,js}' esm dist",
"build-js": "bash ./resources/build.sh",
"analyze-bundle": "NODE_ENV=production CDN=1 ANALYZE=1 webpack -c resources/webpack.config.js -p",
"build": "yarn build-clean && yarn build-js && yarn build-flow",
"build-clean": "rimraf esm dist",
"build-js": "babel src --ignore __tests__ --out-dir dist/ && ESM=1 babel src --ignore __tests__ --out-dir esm/",
"build-bundles": "yarn build-bundles-clean && yarn build-bundles-dev && yarn build-bundles-min",
"build-bundles-dev": "NODE_ENV=development CDN=1 webpack --config resources/webpack.config.js -d",
"build-bundles-min": "NODE_ENV=production CDN=1 webpack --config resources/webpack.config.js -p",
"build-bundles-clean": "rimraf 'graphiql.*{js,css}' *.html",
"build-flow": "node ../../resources/buildFlow.js",
"build-demo": "cp resources/index.html .",
"check": "flow check",
"dev": "babel-node test/server.js",
"e2e": "yarn e2e:server && cypress run && kill -9 `cat test/pid`",
"dev": "WEBPACK_SERVE=1 CDN=1 NODE_ENV=development node test/server",
"e2e": "yarn e2e:server && cypress run",
"e2e:server": "PORT=8080 node test/e2e-server & wait-on http://localhost:8080",
"test": "node ../../resources/runTests ENZYME=true"
"test": "node ../../resources/runTests ENZYME=1"
},
"lint-staged": {
"*.js": [
"prettier --write",
"git add"
]
},
"browserify": {
"transform": [
"babelify"
]
},
"dependencies": {
"codemirror": "^5.47.0",
"codemirror-graphql": "^0.11.2",
Expand All @@ -64,27 +64,29 @@
"react-dom": "^15.6.0 || ^16.0.0"
},
"devDependencies": {
"autoprefixer": "9.6.0",
"babelify": "10.0.0",
"browserify": "16.2.3",
"browserify-shim": "3.8.14",
"css-loader": "3.2.0",
"cssnano": "^4.1.10",
"enzyme": "^3.9.0",
"enzyme-adapter-react-15": "^1.4.0",
"express": "5.0.0-alpha.5",
"express-graphql": "0.6.7",
"graphql": "14.4.2",
"html-webpack-plugin": "^3.2.0",
"jest": "^24.8.0",
"jsdom": "15.0.0",
"nyc": "^14.1.1",
"postcss-cli": "6.1.2",
"mini-css-extract-plugin": "^0.8.0",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"prop-types": "15.7.2",
"react": "15.6.2",
"react-dom": "15.6.2",
"react-hot-loader": "^4.12.18",
"react-test-renderer": "15.6.2",
"rimraf": "^3.0.0",
"serve": "^11.2.0",
"uglify-js": "3.5.11",
"uglifyify": "5.0.1",
"watchify": "3.11.1"
"style-loader": "^1.0.0",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-cli": "^3.3.10"
}
}
10 changes: 10 additions & 0 deletions packages/graphiql/postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
module.exports = ({ file, options, env }) => ({
plugins: {
'postcss-import': { root: file.dirname },
// contains autoprefixer, etc
'postcss-preset-env': options['postcss-preset-env']
? options['postcss-preset-env']
: false,
cssnano: process.env.NODE_ENV === 'production' ? options.cssnano : false,
},
});
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,9 @@
copy them directly into your environment, or perhaps include them in your
favored resource bundler.
-->
<link rel="stylesheet" href="/graphiql.css" />


</head>
<body>
<div id="graphiql">Loading...</div>
<script src="/graphiql.js" type="application/javascript"></script>
<script src="/resources/renderExample.js" type="application/javascript"></script>
<script defer src="/resources/renderExample.js" type="application/javascript"></script>
</body>
</html>
2 changes: 2 additions & 0 deletions packages/graphiql/resources/renderExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,8 @@ function graphQLFetcher(graphQLParams) {
});
}

console.log(GraphiQL)

// Render <GraphiQL /> into the body.
// See the README in the top level of this module to learn more about
// how you can customize GraphiQL by providing different values or
Expand Down
128 changes: 128 additions & 0 deletions packages/graphiql/resources/webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
const path = require('path');
const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const isDev = process.env.NODE_ENV === 'development';

const relPath = (...args) => path.resolve(__dirname, ...args);
const rootPath = (...args) => relPath('../', ...args);

const resultConfig = {
mode: process.env.NODE_ENV,
entry:
Boolean(isDev && process.env.WEBPACK_SERVE)
? [
'react-hot-loader/patch', // activate HMR for React
'webpack-dev-server/client?http://localhost:8080', // bundle the client for webpack-dev-server and connect to the provided endpoint
'webpack/hot/only-dev-server', // bundle the client for hot reloading, only- means to only hot reload for successful updates
'./index.js', // the entry point of our app
]
: './index.js',
context: rootPath('src'),
output: {
path: rootPath(),
library: 'GraphiQL',
libraryTarget: 'window',
libraryExport: 'default',
filename: isDev ? 'graphiql.js' : 'graphiql.min.js',
},
devServer: {
hot: true,
// bypass simple localhost CORS restrictions by setting
// these to 127.0.0.1 in /etc/hosts
allowedHosts: ['local.example.com', 'graphiql.com'],
},
node: {
fs: 'empty',
},
externals: {
react: 'React',
'react-dom': 'ReactDOM',
},
module: {
rules: [
// for graphql module, which uses .mjs
{
type: 'javascript/auto',
test: /\.mjs$/,
use: [],
include: /node_modules/,
},
// i think we need to add another rule for
// codemirror-graphql esm.js files to load
{
test: /\.(js|jsx)$/,
use: [{ loader: 'babel-loader' }],
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: isDev,
}
},
'css-loader',
'postcss-loader'
]
},
],
},
plugins: [
// in order to prevent async modules for CDN builds
// until we can guarantee it will work with the CDN properly
// and so that graphiql.min.js can retain parity
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1,
}),
new HtmlWebpackPlugin({
template: relPath('index.html.ejs'),
inject: 'head',
filename: isDev ? 'dev.html' : 'index.html',
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: isDev ? 'graphiql.css' : 'graphiql.min.css',
chunkFilename: '[id].css',
}),
],
resolve: {
extensions: ['.mjs', '.js', '.json', '.jsx', '.css'],
modules: [rootPath('node_modules'), rootPath('../', '../', 'node_modules')],
},
};



const cssLoaders = [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: isDev,
},
},
'css-loader',
];

if (!isDev) {
cssLoaders.push('postcss-loader');
}

resultConfig.module.rules.push();

if (process.env.ANALYZE) {
resultConfig.plugins.push(
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
reportFilename: rootPath('coverage/analyzer/index.html'),
}),
);
}

module.exports = resultConfig;
Loading

0 comments on commit 25badd5

Please sign in to comment.