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 27, 2019
1 parent 3f62e55 commit 7d36787
Show file tree
Hide file tree
Showing 34 changed files with 1,495 additions and 1,377 deletions.
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
5 changes: 5 additions & 0 deletions jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,11 @@ module.exports = {
'<rootDir>/packages/*/src/**/*-test.{js,ts}',
'<rootDir>/packages/*/src/**/*.spec.{js,ts}',
],
moduleNameMapper: {
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
'identity-obj-proxy',
'\\.(css|less)$': 'identity-obj-proxy',
},
transform: {
'^.+\\.jsx?$': require.resolve('./resources/jestBabelTransform'),
...tsjPreset.transform,
Expand Down
3 changes: 1 addition & 2 deletions 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 Expand Up @@ -55,7 +55,6 @@
"@commitlint/cli": "^8.1.0",
"@commitlint/config-conventional": "^8.1.0",
"@commitlint/config-lerna-scopes": "^8.1.0",
"@cypress/code-coverage": "^1.10.2",
"@types/jest": "^24.0.18",
"@typescript-eslint/parser": "^2.3.0",
"babel-eslint": "^10.0.1",
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
6 changes: 3 additions & 3 deletions packages/graphiql/cypress/plugins/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@
// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)

module.exports = (on) => {
on('task', require('@cypress/code-coverage/task'));
on('file:preprocessor', require('@cypress/code-coverage/use-babelrc'));
module.exports = (_on, _config) => {
// on('task', require('@cypress/code-coverage/task'));
// on('file:preprocessor', require('@cypress/code-coverage/use-babelrc'));
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
}
2 changes: 1 addition & 1 deletion packages/graphiql/cypress/support/commands.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,5 +37,5 @@ Cypress.Commands.add('assertQueryResult', (op, mockSuccess) => {
cy.expect(JSON.parse(w.g.resultComponent.viewer.getValue())).to.deep.equal(
mockSuccess,
);
});
})
});
1 change: 0 additions & 1 deletion packages/graphiql/cypress/support/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
// https://on.cypress.io/configuration
// ***********************************************************

import '@cypress/code-coverage/support';

// Import commands.js using ES2015 syntax:
import './commands'
Expand Down
44 changes: 24 additions & 20 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,13 +29,18 @@
]
},
"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",
"webpack": "webpack --config resources/webpack.config.js",
"analyze-bundle": "NODE_ENV=production CDN=1 ANALYZE=1 yarn webpack -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 yarn webpack -d --bail",
"build-bundles-min": "NODE_ENV=production CDN=1 yarn webpack -p --bail",
"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",
"dev": "NODE_ENV=development node test/server.js",
"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"
Expand All @@ -45,11 +51,6 @@
"git add"
]
},
"browserify": {
"transform": [
"babelify"
]
},
"dependencies": {
"codemirror": "^5.47.0",
"codemirror-graphql": "^0.11.3",
Expand All @@ -64,27 +65,30 @@
"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",
"identity-obj-proxy": "^3.0.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>
125 changes: 125 additions & 0 deletions packages/graphiql/resources/webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
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;
2 changes: 2 additions & 0 deletions packages/graphiql/src/components/DocExplorer.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
* LICENSE file in the root directory of this source tree.
*/

import '../css/doc-explorer.css';

import React from 'react';
import PropTypes from 'prop-types';
import { GraphQLSchema, isType } from 'graphql';
Expand Down
2 changes: 2 additions & 0 deletions packages/graphiql/src/components/QueryHistory.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import PropTypes from 'prop-types';
import QueryStore from '../utility/QueryStore';
import HistoryQuery from './HistoryQuery';

import '../css/history.css';

const MAX_QUERY_SIZE = 100000;
const MAX_HISTORY_LENGTH = 20;

Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
14 changes: 12 additions & 2 deletions packages/graphiql/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,15 @@
* LICENSE file in the root directory of this source tree.
*/
import 'regenerator-runtime/runtime';
// The primary React component to use.
module.exports = require('./components/GraphiQL').GraphiQL;

import './css/app.css';
import './css/codemirror.css';
import './css/foldgutter.css';
import './css/info.css';
import './css/jump.css';
import './css/lint.css';
import './css/loading.css';
import './css/show-hint.css';

import { GraphiQL } from './components/GraphiQL';
export default GraphiQL;
2 changes: 1 addition & 1 deletion packages/graphiql/test/e2e-server.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const app = express();
// Server
app.use('/graphql', graphqlHTTP({ schema }));

app.use(express.static(path.resolve(path.join(__dirname, '../'))));
app.use(express.static(path.resolve(__dirname, '../')));

app.listen(process.env.PORT || 0, function() {
const port = this.address().port;
Expand Down
Loading

0 comments on commit 7d36787

Please sign in to comment.