Fork and publish playground packages (#13)

* Use forked playground

Update the getCdnMarkup to reference the scoped (forked) version
of graphql-playground(-react)

* Update all deps to forked versions

* Publish react

* Release html + middlewares

* Update versions of -playground-html and publish to current

Author: trevor-scheer

packages/graphql-playground-electron/package.json

@@ -1,10 +1,10 @@
 {
-  "name": "graphql-playground-electron",
+  "name": "@apollographql/graphql-playground-electron",
   "productName": "GraphQL Playground",
   "homepage": "https://github.com/graphcool/graphql-playground",
   "repository": "graphcool/graphql-playground",
   "description": "GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration)",
-  "version": "1.8.10",
+  "version": "1.8.11",
   "author": {
     "name": "Graphcool",
     "email": "[email protected]",
@@ -82,6 +82,8 @@
     "test-quick"
   ],
   "dependencies": {
+    "@apollographql/graphql-playground-html": "^1.6.17",
+    "@apollographql/graphql-playground-react": "1.7.24",
     "@types/ms": "^0.7.30",
     "classnames": "^2.2.5",
     "date-fns": "^1.29.0",
@@ -96,8 +98,6 @@
     "graphql-config": "^2.1.0",
     "graphql-config-extension-graphcool": "1.0.8",
     "graphql-config-extension-prisma": "^0.2.5",
-    "graphql-playground-html": "^1.6.0",
-    "graphql-playground-react": "1.7.20",
     "immutable": "4.0.0-rc.9",
     "js-yaml": "^3.11.0",
     "lodash.merge": "^4.6.1",

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

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { remote, ipcRenderer, webFrame } from 'electron'
 import * as cx from 'classnames'
-import { Playground as IPlayground } from 'graphql-playground-react/lib/components/Playground'
+import { Playground as IPlayground } from '@apollographql/graphql-playground-react/lib/components/Playground'
 import { merge, set } from 'immutable'
 import Playground, {
   openSettingsTab,
@@ -17,7 +17,7 @@ import Playground, {
   getEndpoint,
   selectAppHistoryItem,
   AppHistoryItem,
-} from 'graphql-playground-react'
+} from '@apollographql/graphql-playground-react'
 import {
   getGraphQLConfig,
   findGraphQLConfigFile,

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

@@ -9,7 +9,10 @@ import { connect } from 'react-redux'
 import * as format from 'date-fns/format'
 import Toggle from './Toggle'
 import { examples } from './data'
-import { getAppHistory, AppHistoryItem } from 'graphql-playground-react'
+import {
+  getAppHistory,
+  AppHistoryItem,
+} from '@apollographql/@apollographql/graphql-playground-react'
 import { createStructuredSelector, createSelector } from 'reselect'
 import { OrderedMap } from 'immutable'
 
@@ -294,7 +297,10 @@ class InitialView extends React.Component<Props & StateFromProps, State> {
   }
 }
 
-const itemsSelector = createSelector([getAppHistory], state => state.items)
+const itemsSelector = createSelector(
+  [getAppHistory],
+  state => state.items,
+)
 
 const mapStateToProps = createStructuredSelector({
   history: itemsSelector,

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

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import App from './App'
-import { store } from 'graphql-playground-react'
+import { store } from '@apollographql/graphql-playground-react'
 import { Provider } from 'react-redux'
 
 export default class Root extends React.Component {

packages/graphql-playground-electron/src/renderer/redux/reducers/index.ts

@@ -1,5 +1,5 @@
 import { combineReducers } from 'redux'
-import graphiqlDocs from 'graphql-playground-react/lib/reducers/graphiql-docs'
+import graphiqlDocs from '@apollographql/graphql-playground-react/lib/reducers/graphiql-docs'
 import history from './history'
 
 const combinedReducers = combineReducers({

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

@@ -7,7 +7,9 @@ const HappyPack = require('happypack')
 const os = require('os')
 const fs = require('fs')
 const UglifyJSParallelPlugin = require('webpack-uglify-parallel')
-const { renderPlaygroundPage } = require('graphql-playground-html')
+const {
+  renderPlaygroundPage,
+} = require('@apollo/@apollographql/graphql-playground-html')
 
 const appEntrypoint = 'src/renderer/index.html'
 

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

@@ -6,7 +6,9 @@ const path = require('path')
 const fs = require('fs')
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
 const HappyPack = require('happypack')
-const { renderPlaygroundPage } = require('graphql-playground-html')
+const {
+  renderPlaygroundPage,
+} = require('@apollographql/graphql-playground-html')
 
 const appEntrypoint = 'src/renderer/index.html'
 

packages/graphql-playground-electron/yarn.lock

@@ -10,6 +10,69 @@
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/7zip/-/7zip-0.0.6.tgz#9cafb171af82329490353b4816f03347aa150a30"
 
+"@apollographql/graphql-playground-html@^1.6.17":
+  version "1.6.17"
+  resolved "https://registry.yarnpkg.com/@apollographql/graphql-playground-html/-/graphql-playground-html-1.6.17.tgz#26980e0441cfd32f870151696d51b61de9009423"
+  integrity sha512-VC9BNRAk7O0W0Uat33JLjISiGfQvD4cpXzc5XSQCpzdAufi+X6ZrzbNLgVtJ9Aj30VVCXcLlT0pkcKC5vDVA0A==
+
+"@apollographql/[email protected]":
+  version "1.7.24"
+  resolved "https://registry.yarnpkg.com/@apollographql/graphql-playground-react/-/graphql-playground-react-1.7.24.tgz#ceb9861cf4371da1f652a3a982db95680911a926"
+  integrity sha512-j96L9QKiRhnBJCS15I3fwX9Ifhxk40Sj5DjPjps4rcj2cJLpqR2FPSsWII1ZafCszncxwam0HO4KFQvWKAbavQ==
+  dependencies:
+    "@types/lru-cache" "^4.1.1"
+    apollo-link "^1.0.7"
+    apollo-link-http "^1.3.2"
+    apollo-link-ws "1.0.8"
+    calculate-size "^1.1.1"
+    codemirror "^5.38.0"
+    codemirror-graphql timsuchanek/codemirror-graphql#details-fix
+    copy-to-clipboard "^3.0.8"
+    cryptiles "4.1.2"
+    cuid "^1.3.8"
+    graphiql "^0.11.2"
+    graphql "^0.11.7"
+    immutable "^4.0.0-rc.9"
+    isomorphic-fetch "^2.2.1"
+    js-yaml "^3.10.0"
+    json-stable-stringify "^1.0.1"
+    keycode "^2.1.9"
+    lodash "^4.17.11"
+    lodash.debounce "^4.0.8"
+    markdown-it "^8.4.1"
+    marked "^0.3.19"
+    prettier "^1.13.0"
+    prop-types "^15.6.0"
+    query-string "5"
+    react "^16.3.1"
+    react-addons-shallow-compare "^15.6.2"
+    react-codemirror "^1.0.0"
+    react-copy-to-clipboard "^5.0.1"
+    react-display-name "^0.2.3"
+    react-dom "^16.3.1"
+    react-helmet "^5.2.0"
+    react-input-autosize "^2.2.1"
+    react-modal "^3.1.11"
+    react-redux "^5.0.6"
+    react-router-dom "^4.2.2"
+    react-sortable-hoc "^0.8.3"
+    react-transition-group "^2.2.1"
+    react-virtualized "^9.12.0"
+    redux "^3.7.2"
+    redux-actions "^2.2.1"
+    redux-immutable "^4.0.0"
+    redux-localstorage rc
+    redux-localstorage-debounce "^0.1.0"
+    redux-localstorage-filter "^0.1.1"
+    redux-saga "^0.16.0"
+    reselect "^3.0.1"
+    seamless-immutable "^7.0.1"
+    styled-components "^4.0.0"
+    subscriptions-transport-ws "^0.9.5"
+    utility-types "^1.0.0"
+    webpack-bundle-analyzer "^2.9.2"
+    zen-observable "^0.7.1"
+
 "@babel/code-frame@^7.0.0-beta.35":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0.tgz#06e2ab19bdb535385559aabb5ba59729482800f8"
@@ -3766,68 +3829,6 @@ graphql-language-service-utils@^1.2.2:
     graphql-config "2.0.1"
     graphql-language-service-types "^1.2.2"
 
-graphql-playground-html@^1.6.0:
-  version "1.6.5"
-  resolved "https://registry.yarnpkg.com/graphql-playground-html/-/graphql-playground-html-1.6.5.tgz#0de1a68db891f7356312cf03dcf371d67388e95a"
-
-[email protected]:
-  version "1.7.20"
-  resolved "https://registry.yarnpkg.com/graphql-playground-react/-/graphql-playground-react-1.7.20.tgz#99f27fabbb9b24bb18cce2b62a5324567d7cdfb6"
-  integrity sha512-0l0z6/D4KhsleX4JKWM/1qiSa+g8s7nmUEn1pj52UmxzqRgDkEequbPEa3zMeeR+k1In89J1i7/YdhHuFNFICQ==
-  dependencies:
-    "@types/lru-cache" "^4.1.1"
-    apollo-link "^1.0.7"
-    apollo-link-http "^1.3.2"
-    apollo-link-ws "1.0.8"
-    calculate-size "^1.1.1"
-    codemirror "^5.38.0"
-    codemirror-graphql timsuchanek/codemirror-graphql#details-fix
-    copy-to-clipboard "^3.0.8"
-    cryptiles "4.1.2"
-    cuid "^1.3.8"
-    graphiql "^0.11.2"
-    graphql "^0.11.7"
-    immutable "^4.0.0-rc.9"
-    isomorphic-fetch "^2.2.1"
-    js-yaml "^3.10.0"
-    json-stable-stringify "^1.0.1"
-    keycode "^2.1.9"
-    lodash "^4.17.11"
-    lodash.debounce "^4.0.8"
-    markdown-it "^8.4.1"
-    marked "^0.3.19"
-    prettier "^1.13.0"
-    prop-types "^15.6.0"
-    query-string "5"
-    react "^16.3.1"
-    react-addons-shallow-compare "^15.6.2"
-    react-codemirror "^1.0.0"
-    react-copy-to-clipboard "^5.0.1"
-    react-display-name "^0.2.3"
-    react-dom "^16.3.1"
-    react-helmet "^5.2.0"
-    react-input-autosize "^2.2.1"
-    react-modal "^3.1.11"
-    react-redux "^5.0.6"
-    react-router-dom "^4.2.2"
-    react-sortable-hoc "^0.8.3"
-    react-transition-group "^2.2.1"
-    react-virtualized "^9.12.0"
-    redux "^3.7.2"
-    redux-actions "^2.2.1"
-    redux-immutable "^4.0.0"
-    redux-localstorage rc
-    redux-localstorage-debounce "^0.1.0"
-    redux-localstorage-filter "^0.1.1"
-    redux-saga "^0.16.0"
-    reselect "^3.0.1"
-    seamless-immutable "^7.0.1"
-    styled-components "^4.0.0"
-    subscriptions-transport-ws "^0.9.5"
-    utility-types "^1.0.0"
-    webpack-bundle-analyzer "^2.9.2"
-    zen-observable "^0.7.1"
-
 graphql-request@^1.5.0:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/graphql-request/-/graphql-request-1.8.2.tgz#398d10ae15c585676741bde3fc01d5ca948f8fbe"

packages/graphql-playground-html/minimal.html

@@ -5,9 +5,9 @@
   <meta charset=utf-8/>
   <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
   <title>GraphQL Playground</title>
-  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/css/index.css" />
-  <link rel="shortcut icon" href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/favicon.png" />
-  <script src="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/js/middleware.js"></script>
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@apollographql/graphql-playground-react/build/static/css/index.css" />
+  <link rel="shortcut icon" href="//cdn.jsdelivr.net/npm/@apollographql/graphql-playground-react/build/favicon.png" />
+  <script src="//cdn.jsdelivr.net/npm/@apollographql/graphql-playground-react/build/static/js/middleware.js"></script>
 </head>
 
 <body>
@@ -43,7 +43,7 @@
         font-weight: 400;
       }
     </style>
-    <img src='//cdn.jsdelivr.net/npm/graphql-playground-react/build/logo.png' alt=''>
+    <img src='//cdn.jsdelivr.net/npm/@apollographql/graphql-playground-react/build/logo.png' alt=''>
     <div class="loading"> Loading
       <span class="title">GraphQL Playground</span>
     </div>

packages/graphql-playground-html/minimalWithoutCDN.html

@@ -1,58 +1,71 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui"
+    />
+    <title>GraphQL Playground</title>
+    <link
+      rel="stylesheet"
+      href="./node_modules/@apollographql/graphql-playground-react/build/static/css/index.css"
+    />
+    <link
+      rel="shortcut icon"
+      href="./node_modules/@apollographql/graphql-playground-react/build/favicon.png"
+    />
+    <script src="./node_modules/@apollographql/graphql-playground-react/build/static/js/middleware.js"></script>
+  </head>
 
-<head>
-  <meta charset=utf-8 />
-  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
-  <title>GraphQL Playground</title>
-  <link rel="stylesheet" href="./node_modules/graphql-playground-react/build/static/css/index.css" />
-  <link rel="shortcut icon" href="./node_modules/graphql-playground-react/build/favicon.png" />
-  <script src="./node_modules/graphql-playground-react/build/static/js/middleware.js"></script>
-</head>
+  <body>
+    <div id="root">
+      <style>
+        body {
+          background-color: rgb(23, 42, 58);
+          font-family: Open Sans, sans-serif;
+          height: 90vh;
+        }
 
-<body>
-  <div id="root">
-    <style>
-      body {
-        background-color: rgb(23, 42, 58);
-        font-family: Open Sans, sans-serif;
-        height: 90vh;
-      }
+        #root {
+          height: 100%;
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
 
-      #root {
-        height: 100%;
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
+        .loading {
+          font-size: 32px;
+          font-weight: 200;
+          color: rgba(255, 255, 255, 0.6);
+          margin-left: 20px;
+        }
 
-      .loading {
-        font-size: 32px;
-        font-weight: 200;
-        color: rgba(255, 255, 255, .6);
-        margin-left: 20px;
-      }
+        img {
+          width: 78px;
+          height: 78px;
+        }
 
-      img {
-        width: 78px;
-        height: 78px;
-      }
-
-      .title {
-        font-weight: 400;
-      }
-    </style>
-    <img src='./node_modules/graphql-playground-react/build/logo.png' alt=''>
-    <div class="loading"> Loading
-      <span class="title">GraphQL Playground</span>
+        .title {
+          font-weight: 400;
+        }
+      </style>
+      <img
+        src="./node_modules/@apollographql/graphql-playground-react/build/logo.png"
+        alt=""
+      />
+      <div class="loading">
+        Loading
+        <span class="title">GraphQL Playground</span>
+      </div>
     </div>
-  </div>
-  <script>window.addEventListener('load', function (event) {
-      GraphQLPlayground.init(document.getElementById('root'), {
-        // options as 'endpoint' belong here
+    <script>
+      window.addEventListener('load', function(event) {
+        GraphQLPlayground.init(document.getElementById('root'), {
+          // options as 'endpoint' belong here
+        })
       })
-    })</script>
-</body>
-
-</html>
+    </script>
+  </body>
+</html>