Playground loading successfully now

graphql · Oct 10, 2020 · 0080973 · 0080973
1 parent 7b8b701
commit 0080973
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 117 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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'],
+    },
   },
-}
+]