diff --git a/packages/graphql-playground-electron/.babelrc b/packages/graphql-playground-electron/.babelrc index a41b973b3..2208e99df 100644 --- a/packages/graphql-playground-electron/.babelrc +++ b/packages/graphql-playground-electron/.babelrc @@ -1,12 +1,9 @@ { "presets": [ - ["@babel/preset-env", { - "targets": { - "esmodules": true - } - }], "@babel/preset-react" + "@babel/preset-env", "@babel/preset-react" ], "plugins": [ + // "styled-jsx-postcss/babel", "@babel/plugin-proposal-object-rest-spread", "babel-plugin-styled-components" ] diff --git a/packages/graphql-playground-electron/package.json b/packages/graphql-playground-electron/package.json index 54e713145..7f82c3418 100644 --- a/packages/graphql-playground-electron/package.json +++ b/packages/graphql-playground-electron/package.json @@ -85,6 +85,7 @@ "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", @@ -93,7 +94,7 @@ "find-up": "^2.1.0", "graphcool-styles": "0.2.7", "graphcool-ui": "^0.0.14", - "graphql": "^0.13.2", + "graphql": "^15.0.0", "graphql-config": "^2.2.2", "graphql-config-extension-graphcool": "^1.0.11", "graphql-config-extension-prisma": "^0.3.0", @@ -108,14 +109,14 @@ "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", - "styled-jsx-postcss": "git+https://github.com/timsuchanek/styled-jsx-postcss#build3", + "styled-jsx-postcss": "^0.2.0", "sweetalert2": "^7.21.0", "validator": "^9.2.0" }, @@ -136,7 +137,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", @@ -153,6 +154,7 @@ "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", @@ -177,10 +179,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-cli": "^3.3.12", - "webpack-dev-server": "2.9.1", + "webpack-dev-server": "3.11.0", "webpack-uglify-parallel": "0.1.4" }, "resolutions": { diff --git a/packages/graphql-playground-electron/src/renderer/components/App.tsx b/packages/graphql-playground-electron/src/renderer/components/App.tsx index d85e3eb3f..0ea4d988c 100644 --- a/packages/graphql-playground-electron/src/renderer/components/App.tsx +++ b/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' diff --git a/packages/graphql-playground-electron/webpack.config.build.js b/packages/graphql-playground-electron/webpack.config.build.js index 2a2c68647..cf419a7e3 100644 --- a/packages/graphql-playground-electron/webpack.config.build.js +++ b/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,10 @@ module.exports = { loader: 'tslint-loader', exclude: /node_modules/, }, - { - test: /\.json$/, // TODO check if still needed - loader: 'json-loader', - }, + // { + // test: /\.json$/, // TODO check if still needed + // loader: 'json-loader', + // }, { test: /\.css$/, loader: 'style-loader!css-loader', @@ -87,6 +88,15 @@ module.exports = { test: /.*\.(png|gif)$/, loader: 'file-loader', }, + { + test: /\.html$/, + loader: 'html-loader', + }, + { + test: /\.mjs$/, + include: /node_modules/, + type: 'javascript/auto', + }, ], }, plugins: [ @@ -117,7 +127,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 +162,6 @@ module.exports = { ], resolve: { modules: [path.resolve('./src'), 'node_modules'], - extensions: ['.js', '.ts', '.tsx'], + extensions: ['.mjs', '.js', '.ts', '.tsx'], }, } diff --git a/packages/graphql-playground-electron/webpack.config.js b/packages/graphql-playground-electron/webpack.config.js index 57fadc3f1..56cad0b93 100644 --- a/packages/graphql-playground-electron/webpack.config.js +++ b/packages/graphql-playground-electron/webpack.config.js @@ -15,104 +15,116 @@ if (!fs.existsSync(appEntrypoint)) { fs.writeFileSync(appEntrypoint, renderPlaygroundPage({ env: 'react' })) } -module.exports = { - devtool: 'cheap-module-eval-source-map', - entry: './src/renderer', - target: 'electron', - output: { - filename: '[name].[hash].js', - publicPath: '/', - }, - module: { - rules: [ - { - enforce: 'pre', - test: /\.ts(x?)$/, - loader: 'tslint-loader', - exclude: /node_modules/, - }, - { - test: /\.json$/, // TODO check if still needed - loader: 'json-loader', - }, - { - test: /\.css$/, - loader: 'style-loader!css-loader', - }, - { - test: /\.ts(x?)$/, - include: [__dirname + '/src'], - use: [ - { - loader: 'happypack/loader?id=babel', - }, - { - loader: 'happypack/loader?id=ts', +module.exports = [ + { + devtool: 'cheap-module-eval-source-map', + mode: 'development', + entry: './src/renderer', + target: 'electron-renderer', + output: { + filename: '[name].[hash].js', + publicPath: '/', + }, + module: { + rules: [ + { + enforce: 'pre', + test: /\.ts(x?)$/, + loader: 'tslint-loader', + exclude: /node_modules/, + }, + // { + // test: /\.json$/, // TODO check if still needed + // loader: 'json-loader', + // }, + { + test: /\.css$/, + loader: 'style-loader!css-loader', + }, + { + test: /\.ts(x?)$/, + include: [__dirname + '/src'], + use: [ + { + loader: 'happypack/loader?id=babel', + }, + { + loader: 'happypack/loader?id=ts', + }, + ], + }, + { + test: /\.js$/, + loader: 'babel-loader', + }, + { + test: /\.mp3$/, + loader: 'file-loader', + }, + { + test: /(icons|node_modules)\/.*\.svg$/, + loader: 'raw-loader!svgo-loader', + }, + { + test: /graphics\/.*\.svg$/, + loader: 'file-loader', + }, + { + test: /.*\.(png|gif)$/, + loader: 'file-loader', + }, + { + test: /\.html$/, + loader: 'html-loader', + }, + { + test: /\.mjs$/, + include: /node_modules/, + type: 'javascript/auto', + }, + ], + }, + plugins: [ + new webpack.HotModuleReplacementPlugin(), + new ForkTsCheckerWebpackPlugin({}), + new webpack.DefinePlugin({ + 'process.env': { + NODE_ENV: JSON.stringify('production'), + }, + __EXAMPLE_ADDR__: '"https://dynamic-resources.graph.cool"', + }), + new HtmlWebpackPlugin({ + favicon: 'static/favicon.png', + template: 'src/renderer/index.html', + }), + new webpack.NormalModuleReplacementPlugin(/\/iconv-loader$/, 'node-noop'), + // See https://github.com/graphql/graphql-language-service/issues/111 + new webpack.ContextReplacementPlugin( + /graphql-language-service-interface[\/\\]dist/, + /\.js$/, + ), + new webpack.LoaderOptionsPlugin({ + options: { + svgo: { + plugins: [{ removeStyleElement: true }], }, - ], - }, - { - test: /\.js$/, - loader: 'babel-loader', - }, - { - test: /\.mp3$/, - loader: 'file-loader', - }, - { - test: /(icons|node_modules)\/.*\.svg$/, - loader: 'raw-loader!svgo-loader', - }, - { - test: /graphics\/.*\.svg$/, - loader: 'file-loader', - }, - { - test: /.*\.(png|gif)$/, - loader: 'file-loader', - }, - ], - }, - plugins: [ - new webpack.HotModuleReplacementPlugin(), - new ForkTsCheckerWebpackPlugin({}), - new webpack.DefinePlugin({ - 'process.env': { - NODE_ENV: JSON.stringify('production'), - }, - __EXAMPLE_ADDR__: '"https://dynamic-resources.graph.cool"', - }), - new HtmlWebpackPlugin({ - favicon: 'static/favicon.png', - template: 'src/renderer/index.html', - }), - new webpack.NormalModuleReplacementPlugin(/\/iconv-loader$/, 'node-noop'), - // See https://github.com/graphql/graphql-language-service/issues/111 - new webpack.ContextReplacementPlugin( - /graphql-language-service-interface[\/\\]dist/, - /\.js$/, - ), - new webpack.LoaderOptionsPlugin({ - options: { - svgo: { - plugins: [{ removeStyleElement: true }], }, - }, - }), - new HappyPack({ - id: 'ts', - threads: 2, - loaders: ['ts-loader?' + JSON.stringify({ happyPackMode: true })], - }), - new HappyPack({ - id: 'babel', - threads: 2, - loaders: ['babel-loader'], - }), - // new BundleAnalyzerPlugin(), - ], - resolve: { - modules: [path.resolve('./src'), 'node_modules'], - extensions: ['.js', '.ts', '.tsx'], + }), + new HappyPack({ + id: 'ts', + threads: 2, + loaders: ['ts-loader?' + JSON.stringify({ happyPackMode: true })], + }), + new HappyPack({ + id: 'babel', + threads: 2, + loaders: ['babel-loader'], + }), + // new BundleAnalyzerPlugin(), + ], + resolve: { + modules: [path.resolve('./src'), 'node_modules'], + extensions: ['.mjs', '.js', '.ts', '.tsx'], + }, }, -} +]