fix: electron build (#1279)

packages/graphql-playground-electron/.babelrc

@@ -1,6 +1,9 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "presets": [
+    "@babel/preset-env", "@babel/preset-react"
+  ],
   "plugins": [
+    "styled-jsx-postcss/babel",
     "@babel/plugin-proposal-object-rest-spread",
     "babel-plugin-styled-components"
   ]

packages/graphql-playground-electron/package.json

@@ -85,15 +85,16 @@
   "dependencies": {
     "@types/ms": "0.7.30",
     "classnames": "2.2.5",
+    "core-js": "^3.6.5",
     "date-fns": "1.29.0",
     "electron-is-dev": "0.3.0",
     "electron-localshortcut": "3.1.0",
     "electron-log": "2.2.14",
-    "electron-updater": "3.2.3",
+    "electron-updater": "^4.0.0",
     "find-up": "^2.1.0",
     "graphcool-styles": "0.2.7",
     "graphcool-ui": "^0.0.14",
-    "graphql": "^0.13.2",
+    "graphql": "^15.3.0",
     "graphql-config": "^2.2.2",
     "graphql-config-extension-graphcool": "^1.0.11",
     "graphql-config-extension-prisma": "^0.3.0",
@@ -108,10 +109,11 @@
     "raven": "^2.4.2",
     "react": "16.13.1",
     "react-dom": "^16.4.0",
-    "react-redux": "^5.0.7",
-    "redux": "^4.0.0",
+    "react-redux": "^7.2.1",
+    "redux": "^4.0.5",
     "redux-localstorage": "^1.0.0-rc5",
     "redux-localstorage-filter": "^0.1.1",
+    "regenerator-runtime": "^0.13.7",
     "reselect": "^3.0.1",
     "semver": "^5.5.0",
     "styled-jsx": "2.2.6",
@@ -126,6 +128,7 @@
     "@babel/plugin-proposal-json-strings": "^7.0.0",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-syntax-import-meta": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.12.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@types/classnames": "2.2.3",
@@ -135,7 +138,7 @@
     "@types/react": "16.9.32",
     "@types/react-addons-test-utils": "0.14.20",
     "@types/react-dom": "~16.9.6",
-    "@types/react-redux": "7.1.7",
+    "@types/react-redux": "7.1.9",
     "@types/zen-observable": "^0.5.3",
     "awesome-typescript-loader": "5.0.0",
     "babel-core": "^7.0.0-bridge.0",
@@ -146,12 +149,13 @@
     "concurrently": "3.5.1",
     "css-loader": "0.28.11",
     "electron": "2.0.18",
-    "electron-builder": "^20.34.0",
-    "electron-devtools-installer": "2.2.4",
+    "electron-builder": "^22.8.1",
+    "electron-devtools-installer": "3.1.1",
     "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "1.1.11",
     "fork-ts-checker-webpack-plugin": "0.4.1",
     "happypack": "5.0.0",
+    "html-loader": "^1.3.1",
     "html-webpack-plugin": "3.2.0",
     "identity-obj-proxy": "3.0.0",
     "json-loader": "0.5.7",
@@ -176,9 +180,10 @@
     "typescript": "3.8.3",
     "url-loader": "0.6.2",
     "wait-on": "2.1.0",
-    "webpack": "3.10.0",
+    "webpack": "4.44.1",
     "webpack-bundle-analyzer": "3.3.2",
-    "webpack-dev-server": "3.1.11",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "3.11.0",
     "webpack-uglify-parallel": "0.1.4"
   },
   "resolutions": {

packages/graphql-playground-electron/src/renderer/components/App.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react'
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
 import { remote, ipcRenderer, webFrame } from 'electron'
 import * as cx from 'classnames'
 import { Playground as IPlayground } from 'graphql-playground-react/lib/components/Playground'
@@ -113,8 +115,8 @@ class App extends React.Component<ReduxProps, State> {
       platformToken,
       loading: false,
     }
-    ;(global as any).a = this
-    ;(global as any).r = remote
+      ; (global as any).a = this
+      ; (global as any).r = remote
   }
 
   fileAdded = event => {
@@ -579,7 +581,12 @@ class App extends React.Component<ReduxProps, State> {
     const { theme, endpoint, platformToken, configString, config } = this.state
 
     return (
-      <div className={cx('root', theme, { noConfig: !configString })}>
+      <div
+        className={
+          'flex flexColumn bgDarkestBlue overflowHidden ' +
+          cx('root', theme, { noConfig: !configString })
+        }
+      >
         <style jsx={true} global={true}>{`
           .app-content .left-content {
             letter-spacing: 0.5px;

packages/graphql-playground-electron/src/renderer/components/InitialView/InitialView.tsx

@@ -179,26 +179,31 @@ class InitialView extends React.Component<Props & StateFromProps, State> {
           onRequestClose={this.handleRequestClose}
           style={modalStyle}
         >
-          <div className="initial-view-content">
+          <div className="initial-view-content bgWhite flex flexRow">
             {history.size > 0 ? (
-              <div className="initial-view-recent">
-                <div className="initial-view-recent-header">RECENT</div>
-                <div className="initial-view-recent-list">
+              <div className="initial-view-recent br bBlack10 overflowHidden flex flexColumn">
+                <div className="initial-view-recent-header pv10 ph20 bgBlack07 black50 bb bBlack10">
+                  RECENT
+                </div>
+                <div className="initial-view-recent-list flex1">
                   {Object.keys(items)
                     .reverse()
-                    .map(key => {
+                    .map((key) => {
                       const data = items[key]
                       const name = data.folderName || data.endpoint || data.path
                       return (
                         <div
-                          className="list-item"
+                          className="list-item pv10 ph20 bb bBlack10 pointer"
                           // tslint:disable-next-line
                           onClick={() => this.handleClickHistory(data)}
                         >
-                          <div className="list-item-name" title={name}>
+                          <div
+                            className="list-item-name f20 black70 fw6 mb6 toe overflowHidden nowrap"
+                            title={name}
+                          >
                             {name}
                           </div>
-                          <div className="list-item-date">
+                          <div className="list-item-date f12 black40 flex">
                             <Icon
                               src={
                                 data.type === 'local'
@@ -220,21 +225,26 @@ class InitialView extends React.Component<Props & StateFromProps, State> {
                 </div>
               </div>
             ) : (
-              <div className="initial-view-recent">
-                <div className="initial-view-recent-header">EXAMPLES</div>
-                <div className="initial-view-recent-list">
-                  {examples.map(example => (
+              <div className="initial-view-recent br bBlack10 overflowHidden flex flexColumn">
+                <div className="initial-view-recent-header pv10 ph20 bgBlack07 black50 bb bBlack10">
+                  EXAMPLES
+                </div>
+                <div className="initial-view-recent-list flex1">
+                  {examples.map((example) => (
                     <div
                       key={example.endpoint}
-                      className="list-item"
+                      className="list-item pv10 ph20 bb bBlack10 pointer"
                       onClick={() =>
                         this.props.onSelectEndpoint(example.endpoint)
                       }
                     >
-                      <div className="list-item-name" title={example.endpoint}>
+                      <div
+                        className="list-item-name f20 black70 fw6 mb6 toe overflowHidden nowrap"
+                        title={example.endpoint}
+                      >
                         {example.name}
                       </div>
-                      <div className="list-item-date">
+                      <div className="list-item-date f12 black40 flex">
                         <Icon
                           src={require('graphcool-styles/icons/fill/world.svg')}
                           color={$v.gray40}
@@ -248,42 +258,49 @@ class InitialView extends React.Component<Props & StateFromProps, State> {
                 </div>
               </div>
             )}
-            <div className="initial-view-workspace">
-              <h1 className="title">New Workspace</h1>
-              <p className="description">
+            <div className="initial-view-workspace flex1 tc pv20">
+              <h1 className="title flex1 tc pv20">New Workspace</h1>
+              <p className="description maAuto black50 mt16">
                 Either load a local repository with a .graphqlconfig file, or
                 just open a HTTP endpoint
               </p>
-              <div className="toggle">
+              <div className="toggle justifyCenter flex">
                 <Toggle
                   choices={choicesMode}
                   activeChoice={selectedMode}
                   onChange={this.handleChangeMode}
                 />
               </div>
               {selectedMode === 'url endpoint' && (
-                <form className="container-input" onSubmit={this.handleSubmit}>
+                <form
+                  className="container-input ph10 pv6 mh38 mt20 darkBlue40 ba bBlack10 br2 flex f14"
+                  onSubmit={this.handleSubmit}
+                >
                   <input
-                    className="input"
+                    className="input darkBlue60 w100 f14"
                     placeholder="Enter endpoint url..."
                     value={endpoint}
                     onChange={this.handleChangeEndpoint}
                   />
-                  <button>OPEN</button>
+                  <button className="white br2 pv6 ph10 pointer f14 fw6">
+                    OPEN
+                  </button>
                 </form>
               )}
               {selectedMode === 'local' && (
                 <div
-                  className="container-input"
+                  className="container-input ph10 pv6 mh38 mt20 darkBlue40 ba bBlack10 br2 flex f14"
                   onClick={this.handleClickLocal}
                 >
                   <input
-                    className="input"
+                    className="input darkBlue60 w100 f14"
                     placeholder="Select a folder..."
                     value={endpoint}
                     onChange={this.handleChangeEndpoint}
                   />
-                  <button>OPEN</button>
+                  <button className="white br2 pv6 ph10 pointer f14 fw6">
+                    OPEN
+                  </button>
                 </div>
               )}
             </div>

packages/graphql-playground-electron/src/renderer/components/InitialView/Toggle.tsx

@@ -10,7 +10,7 @@ export interface ToggleProps {
 /* tslint:disable */
 const Toggle = ({ choices, onChange, activeChoice }: ToggleProps) => {
   return (
-    <div className="toggle">
+    <div className="toggle flex">
       <style jsx={true}>{`
         .toggle {
           @p: .flex;
@@ -29,7 +29,12 @@ const Toggle = ({ choices, onChange, activeChoice }: ToggleProps) => {
       `}</style>
       {choices.map((choice, i) => (
         <div
-          className={cn('choice', { active: choice === activeChoice })}
+          className={
+            'f14 ttu br2 mr6 fw6 darkBlue40 pointer ' +
+            cn('choice', {
+              'active darkBlue50 bgDarkBlue10': choice === activeChoice,
+            })
+          }
           key={choice}
           onClick={() => onChange(choice, i)}
         >

packages/graphql-playground-electron/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "removeComments": true,
     "module": "commonjs",
-    "jsx": "preserve",
+    "jsx": "react",
     "sourceMap": true,
     "target": "esnext",
     "moduleResolution": "node",

packages/graphql-playground-electron/webpack.config.build.js

@@ -18,6 +18,7 @@ if (!fs.existsSync(appEntrypoint)) {
 
 module.exports = {
   devtool: 'source-map',
+  mode: 'production',
   target: 'electron-renderer',
   entry: {
     app: ['./src/renderer'],
@@ -40,10 +41,6 @@ module.exports = {
         loader: 'tslint-loader',
         exclude: /node_modules/,
       },
-      {
-        test: /\.json$/, // TODO check if still needed
-        loader: 'json-loader',
-      },
       {
         test: /\.css$/,
         loader: 'style-loader!css-loader',
@@ -117,7 +114,7 @@ module.exports = {
       /\.js$/,
     ),
     new webpack.NormalModuleReplacementPlugin(/\/iconv-loader$/, 'node-noop'),
-    new webpack.optimize.CommonsChunkPlugin('vendor'),
+    // new webpack.optimize.CommonsChunkPlugin('vendor'),
     new webpack.optimize.ModuleConcatenationPlugin(),
     new webpack.LoaderOptionsPlugin({
       options: {
@@ -152,6 +149,6 @@ module.exports = {
   ],
   resolve: {
     modules: [path.resolve('./src'), 'node_modules'],
-    extensions: ['.js', '.ts', '.tsx'],
+    extensions: ['.mjs', '.js', '.ts', '.tsx'],
   },
 }

packages/graphql-playground-electron/webpack.config.js

@@ -17,11 +17,12 @@ if (!fs.existsSync(appEntrypoint)) {
 
 module.exports = {
   devtool: 'cheap-module-eval-source-map',
+  mode: 'development',
   entry: './src/renderer',
-  target: 'electron',
+  target: 'electron-renderer',
   output: {
     filename: '[name].[hash].js',
-    publicPath: '/',
+    publicPath: '/'
   },
   module: {
     rules: [
@@ -31,10 +32,6 @@ module.exports = {
         loader: 'tslint-loader',
         exclude: /node_modules/,
       },
-      {
-        test: /\.json$/, // TODO check if still needed
-        loader: 'json-loader',
-      },
       {
         test: /\.css$/,
         loader: 'style-loader!css-loader',
@@ -78,7 +75,7 @@ module.exports = {
     new ForkTsCheckerWebpackPlugin({}),
     new webpack.DefinePlugin({
       'process.env': {
-        NODE_ENV: JSON.stringify('production'),
+        NODE_ENV: JSON.stringify('development'),
       },
       __EXAMPLE_ADDR__: '"https://dynamic-resources.graph.cool"',
     }),
@@ -113,6 +110,6 @@ module.exports = {
   ],
   resolve: {
     modules: [path.resolve('./src'), 'node_modules'],
-    extensions: ['.js', '.ts', '.tsx'],
+    extensions: ['.mjs', '.js', '.ts', '.tsx'],
   },
 }

packages/graphql-playground-react/package.json

@@ -142,7 +142,7 @@
     "react-helmet": "^5.2.0",
     "react-input-autosize": "^2.2.1",
     "react-modal": "^3.1.11",
-    "react-redux": "^7.2.0",
+    "react-redux": "^7.2.1",
     "react-router-dom": "^4.2.2",
     "react-sortable-hoc": "^0.8.3",
     "react-transition-group": "^2.2.1",