Skip to content

Commit 9f5f340

Browse files
vardhanapoorvvardhanapoorv
authored
fix: electron build (#1279)
1 parent 669cc19 commit 9f5f340

File tree

10 files changed

+1088
-875
lines changed

10 files changed

+1088
-875
lines changed

‎packages/graphql-playground-electron/.babelrc

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
{
2-
"presets": ["@babel/preset-env", "@babel/preset-react"],
2+
"presets": [
3+
"@babel/preset-env", "@babel/preset-react"
4+
],
35
"plugins": [
6+
"styled-jsx-postcss/babel",
47
"@babel/plugin-proposal-object-rest-spread",
58
"babel-plugin-styled-components"
69
]

‎packages/graphql-playground-electron/package.json

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -85,15 +85,16 @@
8585
"dependencies": {
8686
"@types/ms": "0.7.30",
8787
"classnames": "2.2.5",
88+
"core-js": "^3.6.5",
8889
"date-fns": "1.29.0",
8990
"electron-is-dev": "0.3.0",
9091
"electron-localshortcut": "3.1.0",
9192
"electron-log": "2.2.14",
92-
"electron-updater": "3.2.3",
93+
"electron-updater": "^4.0.0",
9394
"find-up": "^2.1.0",
9495
"graphcool-styles": "0.2.7",
9596
"graphcool-ui": "^0.0.14",
96-
"graphql": "^0.13.2",
97+
"graphql": "^15.3.0",
9798
"graphql-config": "^2.2.2",
9899
"graphql-config-extension-graphcool": "^1.0.11",
99100
"graphql-config-extension-prisma": "^0.3.0",
@@ -108,10 +109,11 @@
108109
"raven": "^2.4.2",
109110
"react": "16.13.1",
110111
"react-dom": "^16.4.0",
111-
"react-redux": "^5.0.7",
112-
"redux": "^4.0.0",
112+
"react-redux": "^7.2.1",
113+
"redux": "^4.0.5",
113114
"redux-localstorage": "^1.0.0-rc5",
114115
"redux-localstorage-filter": "^0.1.1",
116+
"regenerator-runtime": "^0.13.7",
115117
"reselect": "^3.0.1",
116118
"semver": "^5.5.0",
117119
"styled-jsx": "2.2.6",
@@ -126,6 +128,7 @@
126128
"@babel/plugin-proposal-json-strings": "^7.0.0",
127129
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
128130
"@babel/plugin-syntax-import-meta": "^7.0.0",
131+
"@babel/plugin-transform-runtime": "^7.12.0",
129132
"@babel/preset-env": "^7.0.0",
130133
"@babel/preset-react": "^7.0.0",
131134
"@types/classnames": "2.2.3",
@@ -135,7 +138,7 @@
135138
"@types/react": "16.9.32",
136139
"@types/react-addons-test-utils": "0.14.20",
137140
"@types/react-dom": "~16.9.6",
138-
"@types/react-redux": "7.1.7",
141+
"@types/react-redux": "7.1.9",
139142
"@types/zen-observable": "^0.5.3",
140143
"awesome-typescript-loader": "5.0.0",
141144
"babel-core": "^7.0.0-bridge.0",
@@ -146,12 +149,13 @@
146149
"concurrently": "3.5.1",
147150
"css-loader": "0.28.11",
148151
"electron": "2.0.18",
149-
"electron-builder": "^20.34.0",
150-
"electron-devtools-installer": "2.2.4",
152+
"electron-builder": "^22.8.1",
153+
"electron-devtools-installer": "3.1.1",
151154
"extract-text-webpack-plugin": "3.0.2",
152155
"file-loader": "1.1.11",
153156
"fork-ts-checker-webpack-plugin": "0.4.1",
154157
"happypack": "5.0.0",
158+
"html-loader": "^1.3.1",
155159
"html-webpack-plugin": "3.2.0",
156160
"identity-obj-proxy": "3.0.0",
157161
"json-loader": "0.5.7",
@@ -176,9 +180,10 @@
176180
"typescript": "3.8.3",
177181
"url-loader": "0.6.2",
178182
"wait-on": "2.1.0",
179-
"webpack": "3.10.0",
183+
"webpack": "4.44.1",
180184
"webpack-bundle-analyzer": "3.3.2",
181-
"webpack-dev-server": "3.1.11",
185+
"webpack-cli": "^3.3.12",
186+
"webpack-dev-server": "3.11.0",
182187
"webpack-uglify-parallel": "0.1.4"
183188
},
184189
"resolutions": {

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import * as React from 'react'
2+
import 'core-js/stable'
3+
import 'regenerator-runtime/runtime'
24
import { remote, ipcRenderer, webFrame } from 'electron'
35
import * as cx from 'classnames'
46
import { Playground as IPlayground } from 'graphql-playground-react/lib/components/Playground'
@@ -113,8 +115,8 @@ class App extends React.Component<ReduxProps, State> {
113115
platformToken,
114116
loading: false,
115117
}
116-
;(global as any).a = this
117-
;(global as any).r = remote
118+
; (global as any).a = this
119+
; (global as any).r = remote
118120
}
119121

120122
fileAdded = event => {
@@ -579,7 +581,12 @@ class App extends React.Component<ReduxProps, State> {
579581
const { theme, endpoint, platformToken, configString, config } = this.state
580582

581583
return (
582-
<div className={cx('root', theme, { noConfig: !configString })}>
584+
<div
585+
className={
586+
'flex flexColumn bgDarkestBlue overflowHidden ' +
587+
cx('root', theme, { noConfig: !configString })
588+
}
589+
>
583590
<style jsx={true} global={true}>{`
584591
.app-content .left-content {
585592
letter-spacing: 0.5px;

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

Lines changed: 42 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -179,26 +179,31 @@ class InitialView extends React.Component<Props & StateFromProps, State> {
179179
onRequestClose={this.handleRequestClose}
180180
style={modalStyle}
181181
>
182-
<div className="initial-view-content">
182+
<div className="initial-view-content bgWhite flex flexRow">
183183
{history.size > 0 ? (
184-
<div className="initial-view-recent">
185-
<div className="initial-view-recent-header">RECENT</div>
186-
<div className="initial-view-recent-list">
184+
<div className="initial-view-recent br bBlack10 overflowHidden flex flexColumn">
185+
<div className="initial-view-recent-header pv10 ph20 bgBlack07 black50 bb bBlack10">
186+
RECENT
187+
</div>
188+
<div className="initial-view-recent-list flex1">
187189
{Object.keys(items)
188190
.reverse()
189-
.map(key => {
191+
.map((key) => {
190192
const data = items[key]
191193
const name = data.folderName || data.endpoint || data.path
192194
return (
193195
<div
194-
className="list-item"
196+
className="list-item pv10 ph20 bb bBlack10 pointer"
195197
// tslint:disable-next-line
196198
onClick={() => this.handleClickHistory(data)}
197199
>
198-
<div className="list-item-name" title={name}>
200+
<div
201+
className="list-item-name f20 black70 fw6 mb6 toe overflowHidden nowrap"
202+
title={name}
203+
>
199204
{name}
200205
</div>
201-
<div className="list-item-date">
206+
<div className="list-item-date f12 black40 flex">
202207
<Icon
203208
src={
204209
data.type === 'local'
@@ -220,21 +225,26 @@ class InitialView extends React.Component<Props & StateFromProps, State> {
220225
</div>
221226
</div>
222227
) : (
223-
<div className="initial-view-recent">
224-
<div className="initial-view-recent-header">EXAMPLES</div>
225-
<div className="initial-view-recent-list">
226-
{examples.map(example => (
228+
<div className="initial-view-recent br bBlack10 overflowHidden flex flexColumn">
229+
<div className="initial-view-recent-header pv10 ph20 bgBlack07 black50 bb bBlack10">
230+
EXAMPLES
231+
</div>
232+
<div className="initial-view-recent-list flex1">
233+
{examples.map((example) => (
227234
<div
228235
key={example.endpoint}
229-
className="list-item"
236+
className="list-item pv10 ph20 bb bBlack10 pointer"
230237
onClick={() =>
231238
this.props.onSelectEndpoint(example.endpoint)
232239
}
233240
>
234-
<div className="list-item-name" title={example.endpoint}>
241+
<div
242+
className="list-item-name f20 black70 fw6 mb6 toe overflowHidden nowrap"
243+
title={example.endpoint}
244+
>
235245
{example.name}
236246
</div>
237-
<div className="list-item-date">
247+
<div className="list-item-date f12 black40 flex">
238248
<Icon
239249
src={require('graphcool-styles/icons/fill/world.svg')}
240250
color={$v.gray40}
@@ -248,42 +258,49 @@ class InitialView extends React.Component<Props & StateFromProps, State> {
248258
</div>
249259
</div>
250260
)}
251-
<div className="initial-view-workspace">
252-
<h1 className="title">New Workspace</h1>
253-
<p className="description">
261+
<div className="initial-view-workspace flex1 tc pv20">
262+
<h1 className="title flex1 tc pv20">New Workspace</h1>
263+
<p className="description maAuto black50 mt16">
254264
Either load a local repository with a .graphqlconfig file, or
255265
just open a HTTP endpoint
256266
</p>
257-
<div className="toggle">
267+
<div className="toggle justifyCenter flex">
258268
<Toggle
259269
choices={choicesMode}
260270
activeChoice={selectedMode}
261271
onChange={this.handleChangeMode}
262272
/>
263273
</div>
264274
{selectedMode === 'url endpoint' && (
265-
<form className="container-input" onSubmit={this.handleSubmit}>
275+
<form
276+
className="container-input ph10 pv6 mh38 mt20 darkBlue40 ba bBlack10 br2 flex f14"
277+
onSubmit={this.handleSubmit}
278+
>
266279
<input
267-
className="input"
280+
className="input darkBlue60 w100 f14"
268281
placeholder="Enter endpoint url..."
269282
value={endpoint}
270283
onChange={this.handleChangeEndpoint}
271284
/>
272-
<button>OPEN</button>
285+
<button className="white br2 pv6 ph10 pointer f14 fw6">
286+
OPEN
287+
</button>
273288
</form>
274289
)}
275290
{selectedMode === 'local' && (
276291
<div
277-
className="container-input"
292+
className="container-input ph10 pv6 mh38 mt20 darkBlue40 ba bBlack10 br2 flex f14"
278293
onClick={this.handleClickLocal}
279294
>
280295
<input
281-
className="input"
296+
className="input darkBlue60 w100 f14"
282297
placeholder="Select a folder..."
283298
value={endpoint}
284299
onChange={this.handleChangeEndpoint}
285300
/>
286-
<button>OPEN</button>
301+
<button className="white br2 pv6 ph10 pointer f14 fw6">
302+
OPEN
303+
</button>
287304
</div>
288305
)}
289306
</div>

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export interface ToggleProps {
1010
/* tslint:disable */
1111
const Toggle = ({ choices, onChange, activeChoice }: ToggleProps) => {
1212
return (
13-
<div className="toggle">
13+
<div className="toggle flex">
1414
<style jsx={true}>{`
1515
.toggle {
1616
@p: .flex;
@@ -29,7 +29,12 @@ const Toggle = ({ choices, onChange, activeChoice }: ToggleProps) => {
2929
`}</style>
3030
{choices.map((choice, i) => (
3131
<div
32-
className={cn('choice', { active: choice === activeChoice })}
32+
className={
33+
'f14 ttu br2 mr6 fw6 darkBlue40 pointer ' +
34+
cn('choice', {
35+
'active darkBlue50 bgDarkBlue10': choice === activeChoice,
36+
})
37+
}
3338
key={choice}
3439
onClick={() => onChange(choice, i)}
3540
>

‎packages/graphql-playground-electron/tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"compilerOptions": {
33
"removeComments": true,
44
"module": "commonjs",
5-
"jsx": "preserve",
5+
"jsx": "react",
66
"sourceMap": true,
77
"target": "esnext",
88
"moduleResolution": "node",

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

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ if (!fs.existsSync(appEntrypoint)) {
1818

1919
module.exports = {
2020
devtool: 'source-map',
21+
mode: 'production',
2122
target: 'electron-renderer',
2223
entry: {
2324
app: ['./src/renderer'],
@@ -40,10 +41,6 @@ module.exports = {
4041
loader: 'tslint-loader',
4142
exclude: /node_modules/,
4243
},
43-
{
44-
test: /\.json$/, // TODO check if still needed
45-
loader: 'json-loader',
46-
},
4744
{
4845
test: /\.css$/,
4946
loader: 'style-loader!css-loader',
@@ -117,7 +114,7 @@ module.exports = {
117114
/\.js$/,
118115
),
119116
new webpack.NormalModuleReplacementPlugin(/\/iconv-loader$/, 'node-noop'),
120-
new webpack.optimize.CommonsChunkPlugin('vendor'),
117+
// new webpack.optimize.CommonsChunkPlugin('vendor'),
121118
new webpack.optimize.ModuleConcatenationPlugin(),
122119
new webpack.LoaderOptionsPlugin({
123120
options: {
@@ -152,6 +149,6 @@ module.exports = {
152149
],
153150
resolve: {
154151
modules: [path.resolve('./src'), 'node_modules'],
155-
extensions: ['.js', '.ts', '.tsx'],
152+
extensions: ['.mjs', '.js', '.ts', '.tsx'],
156153
},
157154
}

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

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,12 @@ if (!fs.existsSync(appEntrypoint)) {
1717

1818
module.exports = {
1919
devtool: 'cheap-module-eval-source-map',
20+
mode: 'development',
2021
entry: './src/renderer',
21-
target: 'electron',
22+
target: 'electron-renderer',
2223
output: {
2324
filename: '[name].[hash].js',
24-
publicPath: '/',
25+
publicPath: '/'
2526
},
2627
module: {
2728
rules: [
@@ -31,10 +32,6 @@ module.exports = {
3132
loader: 'tslint-loader',
3233
exclude: /node_modules/,
3334
},
34-
{
35-
test: /\.json$/, // TODO check if still needed
36-
loader: 'json-loader',
37-
},
3835
{
3936
test: /\.css$/,
4037
loader: 'style-loader!css-loader',
@@ -78,7 +75,7 @@ module.exports = {
7875
new ForkTsCheckerWebpackPlugin({}),
7976
new webpack.DefinePlugin({
8077
'process.env': {
81-
NODE_ENV: JSON.stringify('production'),
78+
NODE_ENV: JSON.stringify('development'),
8279
},
8380
__EXAMPLE_ADDR__: '"https://dynamic-resources.graph.cool"',
8481
}),
@@ -113,6 +110,6 @@ module.exports = {
113110
],
114111
resolve: {
115112
modules: [path.resolve('./src'), 'node_modules'],
116-
extensions: ['.js', '.ts', '.tsx'],
113+
extensions: ['.mjs', '.js', '.ts', '.tsx'],
117114
},
118115
}

‎packages/graphql-playground-react/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@
142142
"react-helmet": "^5.2.0",
143143
"react-input-autosize": "^2.2.1",
144144
"react-modal": "^3.1.11",
145-
"react-redux": "^7.2.0",
145+
"react-redux": "^7.2.1",
146146
"react-router-dom": "^4.2.2",
147147
"react-sortable-hoc": "^0.8.3",
148148
"react-transition-group": "^2.2.1",

0 commit comments

Comments
 (0)